improve pktsniffer

src/components/NodeStats.vue

@@ -13,7 +13,9 @@ import { NODE_TYPE, NODE_TYPE_DISPLAY_NAME } from '@/core/typedefs'
       </el-col>
       <el-col :span="13">
         <span style="font-weight: 600; font-size: 0.9rem">
-          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{ SelectedNode }}
+          {{ NODE_TYPE_DISPLAY_NAME[NODE_TYPE[Network.Nodes.value[SelectedNode].type]] }}-{{
+            SelectedNode
+          }}
         </span>
         <br />
         - TX: {{ Network.Nodes.value[SelectedNode].tx_cnt }} , RX:

src/components/PacketSniffer.vue

@@ -3,7 +3,7 @@ import ChannelChart from '@/components/ChannelChart.vue'
 
 import { ref, watch, nextTick } from 'vue'
 import { Network } from '@/hooks/useStates'
-import { type Packet } from '@/core/typedefs'
+import { PKT_TYPE, PROTOCOL_TYPE, type Packet } from '@/core/typedefs'
 
 import { Filter } from '@element-plus/icons-vue'
 
@@ -30,13 +30,7 @@ const columns: any = [
     width: 40,
     align: 'center'
   },
-  {
-    key: 'ch',
-    title: 'CH',
-    dataKey: 'ch',
-    width: 30,
-    align: 'center'
-  },
+
   {
     key: 'mac_src',
     title: 'SRC',
@@ -51,6 +45,14 @@ const columns: any = [
     width: 30,
     align: 'center'
   },
+  {
+    key: 'protocol',
+    title: 'PROTOCOL',
+    dataKey: 'protocol',
+    width: 70,
+    align: 'center',
+    cellRenderer: ({ cellData: protocol }: any) => protocol
+  },
   {
     key: 'uid',
     title: 'UID',
@@ -63,11 +65,9 @@ const columns: any = [
     key: 'type',
     title: 'TYPE',
     dataKey: 'type',
-    width: 80,
+    width: 60,
     align: 'center',
-    cellRenderer: ({ cellData: type }: any) => {
-      type
-    }
+    cellRenderer: ({ cellData: type }: any) => PKT_TYPE[type]
   },
   // {
   //   key: 'seq',
@@ -80,7 +80,7 @@ const columns: any = [
     key: 'len',
     title: 'LEN',
     dataKey: 'len',
-    width: 60,
+    width: 40,
     align: 'center'
   }
 ]

src/core/network.ts

@@ -11,7 +11,8 @@ import {
   MSG_TYPE,
   type ASNMsgPayload,
   LINK_TYPE,
-  type InitMsgPayload
+  type InitMsgPayload,
+  PROTOCOL_TYPE
 } from './typedefs'
 import { SeededRandom } from '@/utils/rand'
 
@@ -76,6 +77,37 @@ export class NetworkHub {
   // forward physical layer pkt from each node
   handlePkt = (pkt: Packet) => {
     this.Nodes.value[pkt.mac_dst].w!.postMessage(pkt)
+
+    // check protocol type
+    if (
+      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSCH ||
+      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSCH
+    ) {
+      pkt.protocol = PROTOCOL_TYPE.TSCH
+    }
+    if (
+      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.TSN ||
+      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.TSN
+    ) {
+      pkt.protocol = PROTOCOL_TYPE.TSN
+    }
+    if (
+      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.FIVE_G_GNB ||
+      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.FIVE_G_GNB ||
+      this.Nodes.value[pkt.mac_src].type == NODE_TYPE.FIVE_G_UE ||
+      this.Nodes.value[pkt.mac_dst].type == NODE_TYPE.FIVE_G_UE
+    ) {
+      pkt.protocol = PROTOCOL_TYPE.FIVE_G
+    }
+    // must use this format for the detailedView function of el-table-v2
+    pkt.id = this.Packets.value.length
+    pkt.children = [
+      {
+        id: `${this.Packets.value.length}-detail-content`,
+        detail: JSON.stringify(pkt.payload).replace(/"/g, '')
+      }
+    ]
+
     this.Packets.value.push(pkt)
     this.PacketsCurrent.value.push(pkt)
   }
@@ -142,8 +174,10 @@ export class NetworkHub {
         case NODE_TYPE.TSN:
           n.w = new Worker(new URL('@/core/node_tsn.ts', import.meta.url), { type: 'module' })
           break
-        case NODE_TYPE.FIVE_G_BS:
-          n.w = new Worker(new URL('@/core/node_five_g_bs.ts', import.meta.url), { type: 'module' })
+        case NODE_TYPE.FIVE_G_GNB:
+          n.w = new Worker(new URL('@/core/node_FIVE_G_GNB.ts', import.meta.url), {
+            type: 'module'
+          })
           break
         case NODE_TYPE.FIVE_G_UE:
           n.w = new Worker(new URL('@/core/node_five_g_ue.ts', import.meta.url), { type: 'module' })

src/core/node_end_system.ts

@@ -25,12 +25,18 @@ class EndSystem extends Node {
     this.ASN = payload.asn
 
     // do something
-    postMessage(<Packet>{
-      uid: Math.floor(Math.random() * 0xffff),
-      type: PKT_TYPE.DATA,
-      mac_src: this.id,
-      mac_dst: this.neighbors[0]
-    })
+    if (this.ASN % 3 == this.id % 3) {
+      postMessage(<Packet>{
+        uid: Math.floor(Math.random() * 0xffff),
+        type: PKT_TYPE.DATA,
+        asn: this.ASN,
+        e2e_src: this.id,
+        mac_src: this.id,
+        mac_dst: this.neighbors[0],
+        len: 'biubiubiu'.length,
+        payload: 'biubiubiu'
+      })
+    }
 
     postMessage(<Message>{
       type: MSG_TYPE.DONE

src/core/node_five_g_bs.ts → src/core/node_five_g_gnb.ts

@@ -1,5 +1,12 @@
 import { Node } from './node'
-import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
+import {
+  PKT_TYPE,
+  type Message,
+  type Packet,
+  MSG_TYPE,
+  type ASNMsgPayload,
+  type InitMsgPayload
+} from './typedefs'
 
 class FiveGBS extends Node {
   constructor() {

src/core/node_five_g_ue.ts

@@ -1,5 +1,12 @@
 import { Node } from './node'
-import { PKT_TYPE, type Message, type Packet, MSG_TYPE, type ASNMsgPayload, type InitMsgPayload } from './typedefs'
+import {
+  PKT_TYPE,
+  type Message,
+  type Packet,
+  MSG_TYPE,
+  type ASNMsgPayload,
+  type InitMsgPayload
+} from './typedefs'
 
 class FiveGUE extends Node {
   constructor() {

src/core/typedefs.ts

@@ -10,7 +10,7 @@ export interface Config {
 export enum NODE_TYPE {
   TSCH,
   TSN,
-  FIVE_G_BS,
+  FIVE_G_GNB,
   FIVE_G_UE,
   END_SYSTEM_SERVER = 11,
   END_SYSTEM_SENSOR,
@@ -20,7 +20,7 @@ export enum NODE_TYPE {
 export const NODE_TYPE_DISPLAY_NAME = <{ [name: string]: string }>{
   TSCH: 'TSCH Node',
   TSN: 'TSN Bridge',
-  FIVE_G_BS: '5G gNB',
+  FIVE_G_GNB: '5G gNB',
   FIVE_G_UE: '5G UE',
   END_SYSTEM_SERVER: 'Edge Server',
   END_SYSTEM_SENSOR: 'Sensor',
@@ -62,12 +62,12 @@ export interface Flow {
 // Packet is transfered among nodes, at data-link layer
 export interface Packet {
   uid: number
+  protocol: string
   type: number
   e2e_src: number
   e2e_dst: number
   mac_src: number
   mac_dst: number
-  seq: number
   asn: number
   len: number
   payload: any
@@ -81,6 +81,12 @@ export enum PKT_TYPE {
   DATA
 }
 
+export const PROTOCOL_TYPE = <{ [name: string]: string }>{
+  TSCH: '802.15.4',
+  TSN: '802.1',
+  FIVE_G: '5G NR'
+}
+
 export enum ADDR {
   BROADCAST = -1
 }

src/hooks/useDrawTopology.ts

@@ -165,7 +165,7 @@ export async function useDrawTopology(dom: HTMLElement) {
       -Math.PI / 2
     )
     await loadModel(NODE_TYPE.TSN, '/models/switch/scene.gltf', [7, 7, 7], 0)
-    await loadModel(NODE_TYPE.FIVE_G_BS, '/models/5g_tower/scene.gltf', [6, 6, 6], 0)
+    await loadModel(NODE_TYPE.FIVE_G_GNB, '/models/5g_tower/scene.gltf', [6, 6, 6], 0)
     await loadModel(NODE_TYPE.FIVE_G_UE, '/models/5g_ue/scene.gltf', [0.5, 0.5, 0.5], -Math.PI / 2)
     await loadModel(
       NODE_TYPE.END_SYSTEM_SERVER,