30 lines
2.5 KiB
Markdown
30 lines
2.5 KiB
Markdown
# Iteration Log: Device Labeling Details Modal & Relational IP History
|
|
|
|
- **Iterasi**: `n` (Implementing device detail popup, IP history resolver, and database indexing)
|
|
- **Tanggal**: 2026-07-28 14:45
|
|
|
|
---
|
|
|
|
## Yang Diminta
|
|
* Terapkan hasil brainstorming tentang pop-up pendetailan MAC address di mana semua IP address yang pernah terikat oleh MAC address tersebut ditampilkan beserta status aktivitas dan pemakaian datanya.
|
|
|
|
## Langkah yang Diambil
|
|
1. **Backend - Database Indexing (`Schemas.js`)**:
|
|
* Menambahkan index `true` pada properti `src_mac` di `FlowSchema`.
|
|
* Menambahkan compound index `{ site_uuid: 1, src_mac: 1, timestamp: -1 }` pada `FlowSchema` agar agregasi pencarian data flow berdasarkan MAC Address di MongoDB berjalan sangat cepat dan efisien.
|
|
2. **Backend - Details API Endpoint (`deviceLabeling.js`)**:
|
|
* Menambahkan route `GET /api/dashboard/devices/mac-details` yang menerima parameter `mac`.
|
|
* Menggunakan pipeline agregasi untuk menyaring semua IP Address unik (`src_ip`) di koleksi `Flow` yang digunakan oleh MAC tersebut.
|
|
* Mengambil data pemakaian bandwidth (Upload/Download), hitungan flow total, serta tanggal pertama/terakhir aktif (*First/Last Seen*) untuk masing-masing IP.
|
|
* Mengambil profil identitas perangkat pendukung dari koleksi `DeviceStat` berdasarkan MAC Address.
|
|
3. **Frontend - Details Popup Modal (`DeviceMacDetailsModal.tsx`)**:
|
|
* Merancang modal detail khusus untuk menampilkan profile hardware perangkat dan tabel riwayat IP Address terikat.
|
|
* Menyajikan tabel berisikan kolom: IP Address, First Seen, Last Seen (dengan stempel zona waktu WIB), pemakaian bandwidth (Upload / Download diformat menggunakan fungsi pembantu `fmtBytes`), dan total flow yang tercatat.
|
|
4. **Frontend - Table Integration & Click Handler (`page.tsx`, `columns.tsx`, `EditOwnerModal.tsx`)**:
|
|
* Mengubah kolom MAC Address di tabel direktori perangkat agar berupa tombol clickable. Ketika diklik, akan memicu pemanggilan API details dan membuka `DeviceMacDetailsModal`.
|
|
* Melakukan refaktor/pemisahan pada `src/app/(dashboard)/device-labeling/page.tsx` yang sebelumnya berukuran 324 baris. Memisahkannya menjadi `columns.tsx` dan `EditOwnerModal.tsx` guna memenuhi kepatuhan ketat batas maksimal 256 baris file repositori. Hasilnya, file `page.tsx` menyusut menjadi hanya 142 baris.
|
|
|
|
## Hasil & Status Codebase saat Ini
|
|
* Next.js production build terbukti kompilasi sukses tanpa kesalahan TypeScript.
|
|
* Halaman `/device-labeling` kini memiliki integrasi pop-up detail yang sangat informatif dan memecahkan relasi rumit MAC-to-IP secara real-time.
|