adding flow panel

AmyangXYZ · Dec 29, 2023 · d199bb4 · d199bb4
1 parent 0931bdf
commit d199bb4
Show file tree

Hide file tree

Showing 6 changed files with 147 additions and 10 deletions.
diff --git a/src/components/ChannelChart.vue b/src/components/ChannelChart.vue
@@ -15,7 +15,7 @@ onMounted(() => {
 <style scoped>
 .chart {
   width: 100%;
-  height: 200px;
+  height: 180px;
   margin-top: 5px;
 }
 </style>

diff --git a/src/components/FlowsPanel.vue b/src/components/FlowsPanel.vue
@@ -0,0 +1,134 @@
+<script setup lang="tsx">
+import { ref, watch, nextTick } from 'vue'
+import { Network } from '@/hooks/useStates'
+
+const columns: any = [
+  {
+    key: 'id',
+    title: 'No.',
+    dataKey: 'id',
+    width: 40,
+    align: 'center',
+    cellRenderer: ({ rowIndex }: any) => rowIndex + 1
+  },
+  {
+    key: 'asn',
+    title: 'ASN',
+    dataKey: 'asn',
+    width: 40,
+    align: 'center'
+  },
+  {
+    key: 'ch',
+    title: 'CH',
+    dataKey: 'ch',
+    width: 30,
+    align: 'center'
+  },
+  {
+    key: 'src',
+    title: 'SRC',
+    dataKey: 'src',
+    width: 30,
+    align: 'center'
+  },
+  {
+    key: 'dst',
+    title: 'DST',
+    dataKey: 'dst',
+    width: 30,
+    align: 'center'
+  },
+  {
+    key: 'uid',
+    title: 'UID',
+    dataKey: 'uid',
+    width: 60,
+    align: 'center',
+    cellRenderer: ({ cellData: uid }: any) => '0x' + uid.toString(16).toUpperCase().padStart(4, '0')
+  },
+  {
+    key: 'type',
+    title: 'TYPE',
+    dataKey: 'type',
+    width: 80,
+    align: 'center',
+    cellRenderer: ({ cellData: type }: any) => {}
+  },
+  // {
+  //   key: 'seq',
+  //   title: 'SEQ',
+  //   dataKey: 'seq',
+  //   width: 40,
+  //   align: 'center'
+  // },
+  {
+    key: 'len',
+    title: 'LEN',
+    dataKey: 'len',
+    width: 60,
+    align: 'center'
+  }
+]
+
+const tableRef = ref()
+watch(
+  Network.Packets,
+  () => {
+    if (Network.Packets.value.length > 0) {
+      nextTick(() => {
+        tableRef.value?.scrollToRow(Network.Packets.value.length)
+      })
+    }
+  },
+  { deep: true }
+)
+
+const Row = ({ cells, rowData }: any) => {
+  if (rowData.detail) return <div class="row-detail">{rowData.detail}</div>
+  return cells
+}
+Row.inheritAttrs = false
+</script>
+
+<template>
+  <el-card class="card">
+    <template #header>
+      <div class="card-header">Flows</div>
+    </template>
+
+    <el-table-v2
+      ref="tableRef"
+      class="table"
+      :columns="columns"
+      :data="Network.Packets.value"
+      :width="360"
+      :height="180"
+      :expand-column-key="columns[7].key"
+      :estimated-row-height="16"
+      :header-height="18"
+    >
+      <template #row="props">
+        <Row v-bind="props" />
+      </template>
+    </el-table-v2>
+  </el-card>
+</template>
+
+<style scoped>
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.table {
+  font-size: 0.65rem;
+  font-family: Menlo;
+  text-align: center;
+}
+
+.row-detail {
+  width: 100%;
+  text-align: center;
+}
+</style>
diff --git a/src/components/PacketSniffer.vue b/src/components/PacketSniffer.vue
@@ -130,7 +130,7 @@ Row.inheritAttrs = false
       :columns="columns"
       :data="Network.Packets.value.filter(filterFunc)"
       :width="360"
-      :height="360"
+      :height="180"
       :expand-column-key="columns[7].key"
       :estimated-row-height="16"
       :header-height="18"
@@ -164,5 +164,4 @@ Row.inheritAttrs = false
   width: 100%;
   text-align: center;
 }
-</style>
-@/networks/TSCH @/networks/common
+</style>
diff --git a/src/hooks/useDrawChannels.ts b/src/hooks/useDrawChannels.ts
@@ -10,7 +10,7 @@ export function useDrawChannels(chartDom: HTMLElement) {
   const option: any = {
     grid: {
       top: '34px',
-      bottom: '27px',
+      bottom: '20px',
       left: '32px',
       right: '1%'
     },
@@ -19,7 +19,7 @@ export function useDrawChannels(chartDom: HTMLElement) {
         type: 'slider',
         throttle: 0,
         bottom: 0,
-        height: 20
+        height: 13
       }
     ],
     xAxis: {

diff --git a/src/hooks/useStates.ts b/src/hooks/useStates.ts
@@ -2,11 +2,11 @@
 
 import { ref } from 'vue'
 
-// import { TSCHNetwork } from '@/networks/TSCH/network'
-// export const Network = new TSCHNetwork()
+import { TSCHNetwork } from '@/networks/TSCH/network'
+export const Network = new TSCHNetwork()
 
-import { TSNNetwork } from '@/networks/TSN/network'
-export const Network = new TSNNetwork()
+// import { TSNNetwork } from '@/networks/TSN/network'
+// export const Network = new TSNNetwork()
 
 // import { FiveGNetwork } from '@/networks/5G/network'
 // export const Network = new FiveGNetwork()

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
@@ -8,6 +8,7 @@ import NodeStats from '@/components/NodeStats.vue'
 import MiniMap from '@/components/MiniMap.vue'
 import SettingsPanel from '@/components/SettingsPanel.vue'
 import ScenariosPanel from '@/components/ScenariosPanel.vue'
+import FlowsPanelVue from '@/components/FlowsPanel.vue'
 </script>
 
 <template>
@@ -30,6 +31,9 @@ import ScenariosPanel from '@/components/ScenariosPanel.vue'
   />
   <Topology style="position: absolute; z-index: 10" />
   <MiniMap style="position: absolute; bottom: 16px; left: 16px; z-index: 999" />
+  <FlowsPanelVue
+    style="position: absolute; bottom: 480px; right: 16px; width: 380px; z-index: 999"
+  />
   <PacketSniffer
     style="position: absolute; bottom: 16px; right: 16px; width: 380px; z-index: 999"
   />