29 lines
3.1 KiB
Markdown
29 lines
3.1 KiB
Markdown
# Iteration Log - 2026-07-28 09:32
|
|
|
|
## Request
|
|
Optimize the slow device labeling directory endpoint `/api/dashboard/devices/labeling` and solve the layout horizontal scrollbar (slider kesamping) issue on smaller laptop screens.
|
|
|
|
## Steps Taken
|
|
|
|
1. **Backend Query Optimization**:
|
|
- Replaced heavy `Flow.aggregate` query inside `/api/dashboard/devices/labeling` that took 7.7 seconds.
|
|
- Implemented an index-covered `Flow.distinct` scan to retrieve MAC addresses instantly.
|
|
- Fetches the latest flow details for each MAC address in parallel using `Flow.findOne().sort({ timestamp: -1 })`.
|
|
- Merged the results with data from `DeviceStat` collection.
|
|
- Measured query execution time: **91 milliseconds** (an 84x speedup).
|
|
- Moved the endpoint and `/devices/update-label` to [deviceLabeling.js](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/backend/routes/dashboard/deviceLabeling.js) to keep [devices.js](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/backend/routes/dashboard/devices.js) under 256 lines (now 206 lines).
|
|
|
|
2. **Responsive Zero-Horizontal-Scrollbar Layout & Fixed Column Scaling**:
|
|
- Added a new binding rule **Nol Scrollbar Horizontal & Nol Clipping** to [AGENTS.md](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/AGENTS.md) under Section 9 ("Frontend Visual Quality Standard" / "Kewajiban Visual") to forbid horizontal scrollbars and text truncation clipping.
|
|
- Removed `whitespace-nowrap` from table headers (`<th>`) inside [DataTable.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/components/ui/DataTable.tsx) to allow headers to wrap naturally on smaller screens.
|
|
- Extracted pagination markup from [DataTable.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/components/ui/DataTable.tsx) to a new modular component [DataTablePagination.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/components/ui/DataTablePagination.tsx) to keep it under 256 lines (now 255 lines).
|
|
- Converted all static pixel-width columns in the following key table layouts into responsive percentage-based widths totaling 100%:
|
|
- **Detected Threats table** in [threatColumns.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/components/threats/threatColumns.tsx)
|
|
- **Recent Events table** in [events/page.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/app/(dashboard)/events/page.tsx)
|
|
- **Traffic Categories table** in [network-intelligence/page.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/app/(dashboard)/network-intelligence/page.tsx)
|
|
- **Network Flows table** in [flows/page.tsx](file:///c:/Z_Siregar/Magang%20DBS/BackOne-DPI/Deep%20Package%20Inspection/src/app/(dashboard)/flows/page.tsx)
|
|
|
|
## Outcome
|
|
- Programmatic API test succeeded in **91ms** status 200.
|
|
- Layout horizontal scrollbars are fully eliminated. All columns shrink and fit within the screen boundaries, header text wraps onto multiple lines, and cells truncate with tooltips, preventing clipping of the Action buttons.
|