test backend codec ndpi

frontend/src/components/PacketViewer.tsx

@@ -18,28 +18,11 @@ import {
 } from 'antd';
 import { ReactElement, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { clearPackets, fetchPackets } from '../api/apiClient';
+import type { PacketRow } from '../types/packets';
 
 const { Text, Title } = Typography;
 const { Option } = Select;
 
-type PacketRow = {
-  id?: number | string;
-  timestamp?: string; // ISO or DB formatted
-  iface?: string | string[]; // may be single iface or list
-  src_mac?: string | null;
-  dst_mac?: string | null;
-  eth_type?: string | number | null;
-  ip_proto?: string | number | null;
-  src_ip?: string | null;
-  dst_ip?: string | null;
-  src_port?: number | null;
-  dst_port?: number | null;
-  vlan_id?: number | null;
-  length?: number | null;
-  raw_b64?: string | null;
-  [k: string]: any;
-};
-
 const DEFAULT_LIMIT = 200;
 const MAX_PACKETS = 2000; // in-memory cap
 
@@ -164,7 +147,7 @@ export default function PacketViewer(): ReactElement {
     setStatusLoading(true);
     try {
       const res = await fetchPackets(limitVal);
-      const list: PacketRow[] = (res.packets ?? []).map((p: any) => p);
+      const list: PacketRow[] = res.packets ?? [];
       setPackets(list);
     } catch (err: any) {
       console.error('fetchHistory error', err);
@@ -337,7 +320,30 @@ export default function PacketViewer(): ReactElement {
         title: 'Protocol',
         dataIndex: 'ip_proto',
         key: 'ip_proto',
-        width: 100,
+        width: 110,
+        render: (v: any) => <Text>{v ?? '-'}</Text>,
+      },
+      {
+        title: 'App',
+        key: 'app',
+        width: 170,
+        render: (_: any, rec: PacketRow) => {
+          const app = rec.app_protocol ?? rec.app_master_protocol ?? '-';
+          return (
+            <Space direction="vertical" size={0}>
+              <Text>{app}</Text>
+              <Text type="secondary" style={{ fontSize: 12 }}>
+                {rec.app_confidence ?? rec.app_category ?? ''}
+              </Text>
+            </Space>
+          );
+        },
+      },
+      {
+        title: 'Host',
+        dataIndex: 'app_hostname',
+        key: 'app_hostname',
+        width: 180,
         render: (v: any) => <Text>{v ?? '-'}</Text>,
       },
       {
@@ -375,6 +381,13 @@ export default function PacketViewer(): ReactElement {
         width: 80,
         render: (n: any) => (typeof n === 'number' ? n.toLocaleString('de-DE') : '-'),
       },
+      {
+        title: 'Risk',
+        dataIndex: 'app_risk_score',
+        key: 'app_risk_score',
+        width: 70,
+        render: (n: any) => (typeof n === 'number' ? n : '-'),
+      },
       {
         title: 'Actions',
         key: 'actions',