108 lines
4.8 KiB
Markdown
108 lines
4.8 KiB
Markdown
|
# Button-Based Frame Type Filter Layout
|
||
|
|
|
||
|
|
## ✅ New Design Implemented
|
||
|
|
|
||
|
|
Completely redesigned the interface with filter buttons above the grid view as requested.
|
||
|
|
|
||
|
|
## 🎯 Layout Structure
|
||
|
|
|
||
|
|
```
|
||
|
|
┌─────────────────────────────────────────────────────────────┐
|
||
|
|
│ Progress Bar (when loading) │
|
||
|
|
├─────────────────────────────────────────────────────────────┤
|
||
|
|
│ Metrics: Flows | Pkts/s | Vol/s | Enhanced | Outliers │
|
||
|
|
├─────────────────────────────────────────────────────────────┤
|
||
|
|
│ [1. Overview] [2. CH10-Data] [3. UDP] [4. PTP-Sync]... │ <- Filter Buttons
|
||
|
|
├─────────────────────────────────────────────────────────────┤
|
||
|
|
│ │ │
|
||
|
|
│ Flow Grid (70%) │ Flow │
|
||
|
|
│ - Shows filtered flows │ Details │
|
||
|
|
│ - Frame-type specific columns │ (30%) │
|
||
|
|
│ - One row per flow │ │
|
||
|
|
│ │ │
|
||
|
|
└─────────────────────────────────────────────────────────────┘
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🔧 Key Features
|
||
|
|
|
||
|
|
### **Filter Button Bar**
|
||
|
|
- **1. Overview** - Shows all flows with frame type summary
|
||
|
|
- **2-9, 0** - Frame type specific filters (dynamically created)
|
||
|
|
- **Active button** highlighted in blue
|
||
|
|
- **Button counts** show number of flows for each frame type
|
||
|
|
|
||
|
|
### **Grid View Modes**
|
||
|
|
|
||
|
|
#### **Overview Mode (Key: 1)**
|
||
|
|
- Shows ALL flows (one row per flow)
|
||
|
|
- Columns: #, Source, Destination, Protocol, Packets, Volume, Frame Types, Status
|
||
|
|
- Frame Types column shows top 3 frame types per flow
|
||
|
|
|
||
|
|
#### **Frame Type Mode (Keys: 2-9, 0)**
|
||
|
|
- Shows ONLY flows containing that frame type
|
||
|
|
- Columns: #, Source, Destination, Protocol, [FrameType] Packets, Avg ΔT, Std ΔT, Min ΔT, Max ΔT, Outliers, Quality
|
||
|
|
- Frame-type specific timing statistics
|
||
|
|
|
||
|
|
## ⌨️ Keyboard Controls
|
||
|
|
|
||
|
|
### **Frame Type Selection**
|
||
|
|
- **`1`** - Overview (all flows)
|
||
|
|
- **`2`** - First detected frame type (e.g., CH10-Data)
|
||
|
|
- **`3`** - Second detected frame type (e.g., UDP)
|
||
|
|
- **`4-9, 0`** - Additional frame types as detected
|
||
|
|
|
||
|
|
### **Other Controls**
|
||
|
|
- **`p`** - Pause/Resume updates
|
||
|
|
- **`d`** - Show details
|
||
|
|
- **`r`** - Generate report
|
||
|
|
- **`o`** - Copy outliers
|
||
|
|
- **`v`** - Toggle view mode (reserved for future use)
|
||
|
|
- **`q`** - Quit
|
||
|
|
|
||
|
|
## 📊 Frame Type Examples
|
||
|
|
|
||
|
|
Based on your PCAP data, buttons would show:
|
||
|
|
|
||
|
|
```
|
||
|
|
[1. Overview] [2. CH10-Data(1)] [3. UDP(6)] [4. PTP-Signaling(2)] [5. TMATS(1)]
|
||
|
|
```
|
||
|
|
|
||
|
|
### **Pressing "2" shows CH10-Data filtered view:**
|
||
|
|
```
|
||
|
|
# Source Dest Proto CH10-Data Packets Avg ΔT Std ΔT Outliers Quality
|
||
|
|
1 192.168.4.89:... 239.1.2.10:... UDP 1,105 102.2ms 5.1ms 2 99%
|
||
|
|
```
|
||
|
|
|
||
|
|
### **Pressing "3" shows UDP filtered view:**
|
||
|
|
```
|
||
|
|
# Source Dest Proto UDP Packets Avg ΔT Std ΔT Outliers Quality
|
||
|
|
1 192.168.4.89:... 239.1.2.10:... UDP 228 492.9ms 125.3ms 0 100%
|
||
|
|
2 11.59.19.202:... 239.0.1.133:... UDP 113 999.4ms 45.2ms 0 100%
|
||
|
|
3 192.168.43.111:. 192.168.255:... UDP 48 2248.9ms 567.1ms 0 95%
|
||
|
|
...
|
||
|
|
```
|
||
|
|
|
||
|
|
## 🎨 Visual Styling
|
||
|
|
|
||
|
|
- **Active button**: Blue background (#0080ff) with bold white text
|
||
|
|
- **Inactive buttons**: Dark background (#262626) with gray text
|
||
|
|
- **Hover effect**: Lighter background on mouse over
|
||
|
|
- **Button counts**: Show number of flows for each frame type
|
||
|
|
- **Quality colors**: Green (>90%), Yellow (70-90%), Red (<70%)
|
||
|
|
|
||
|
|
## ⚡ Performance
|
||
|
|
|
||
|
|
- **Dynamic buttons**: Only creates buttons for detected frame types
|
||
|
|
- **Efficient filtering**: Reuses existing flow data structures
|
||
|
|
- **Real-time updates**: Buttons and counts update as new data loads
|
||
|
|
- **Memory efficient**: Single grid view, just changes columns/filtering
|
||
|
|
|
||
|
|
## 🎯 User Workflow
|
||
|
|
|
||
|
|
1. **Start with Overview** (default) - see all flows
|
||
|
|
2. **Press number key** to filter by frame type
|
||
|
|
3. **View frame-specific timing** statistics in filtered mode
|
||
|
|
4. **Switch between filters** to analyze different protocols
|
||
|
|
5. **All keyboard shortcuts** work in any mode
|
||
|
|
|
||
|
|
This matches exactly what you requested: buttons above the grid, number key selection, and filtered views showing frame-type specific statistics!
|