Merge pull request #19 from AmyangXYZ/jem/features

Jem/features

src/components/FlowsPanel.vue

@@ -2,6 +2,19 @@
 import { ref, watch, nextTick } from 'vue'
 import { Network } from '@/hooks/useStates'
 
+const editCellRenderer = () => ({ column, rowIndex, rowData }: any) => {
+  if (rowIndex === Network.Flows.value.length - 1 && rowData.editing) {
+    return (
+      <el-input
+      v-model={rowData[column.dataKey!]}
+      placeholder="edit"
+      />
+    )
+  } else {
+    return <div>{rowData[column.dataKey!]}</div>
+  }
+}
+
 const columns: any = [
   {
     key: 'flow_id',
@@ -16,28 +29,24 @@ const columns: any = [
     title: 'SRC',
     dataKey: 'e2e_src',
     width: 40,
-    align: 'center'
+    align: 'center',
+    cellRenderer: editCellRenderer()
   },
   {
     key: 'dst',
     title: 'DST',
     dataKey: 'e2e_dst',
     width: 40,
-    align: 'center'
+    align: 'center',
+    cellRenderer: editCellRenderer()
   },
-  // {
-  //   key: 'deadline',
-  //   title: 'Deadline',
-  //   dataKey: 'deadline',
-  //   width: 50,
-  //   align: 'center'
-  // },
   {
     key: 'period',
     title: 'PERIOD',
     dataKey: 'period',
     width: 40,
-    align: 'center'
+    align: 'center',
+    cellRenderer: editCellRenderer()
   },
   {
     key: 'path',
@@ -51,8 +60,8 @@ const columns: any = [
     title: 'WORKLOAD',
     dataKey: 'workload',
     width: 50,
-    align: 'center'
-    // cellRenderer: ({ cellData: payload_size }: any) => payload_size.toString()
+    align: 'center',
+    cellRenderer: editCellRenderer()
   }
 ]
 
@@ -69,6 +78,27 @@ watch(
   { deep: true }
 )
 
+const addFlow = () => {
+  const newFlow = {
+    id: Network.Flows.value.length + 1,
+    e2e_src: 0,
+    e2e_dst: 0,
+    deadline: 0,
+    workload: 0,
+    period: 0,
+    path: [],
+    editing: true
+  }
+  Network.Flows.value.push(newFlow)
+  console.log('added flow')
+}
+
+const saveFlow = () => {
+  const lastFlow = Network.Flows.value[Network.Flows.value.length - 1]
+  // lastFlow.path = Network.findPath(lastFlow.e2e_src, lastFlow.e2e_dst)
+  lastFlow.editing = false
+}
+
 const Row = ({ cells, rowData }: any) => {
   if (rowData.detail) return <div class="row-detail">{rowData.detail}</div>
   return cells
@@ -80,6 +110,8 @@ Row.inheritAttrs = false
   <el-card class="card">
     <template #header>
       <div class="card-header">Flows</div>
+      <button @click="addFlow">Add Flow</button>
+      <button @click="saveFlow">Save Flow</button>
     </template>
 
     <el-table-v2

src/components/TopoEditToolbox.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, toRefs } from 'vue'
 import { Network, SignalEditTopology, SignalAddNode, SignalUpdateLinks } from '@/hooks/useStates'
 import { Check, Plus, Switch } from '@element-plus/icons-vue'
 import { NODE_TYPE } from '@/core/typedefs'
@@ -26,11 +26,27 @@ const nodeTypes = [
   }
 ]
 
+const { nodeId1, nodeId2 } = toRefs({
+  nodeId1: ref(''),
+  nodeId2: ref(''),
+});
+
 const addNode = () => {
   Network.AddNode(nodeType.value)
   SignalAddNode.value++
 }
 const connect = () => {
+  const v1 = parseInt(nodeId1.value, 10)
+  const v2 = parseInt(nodeId2.value, 10)
+  if (!isNaN(v1) && !isNaN(v2)) {
+    Network.connect(v1, v2)
+    SignalUpdateLinks.value++
+  }
+  else {
+    console.error('Invalid node IDs.')
+  }
+}
+const autoConnect = () => {
   Network.EstablishConnection()
   SignalUpdateLinks.value++
 }
@@ -62,9 +78,16 @@ const finishEdit = () => {
 
     <div class="flex-container mt-4">
       <span class="label-margin">Connect</span>
+      <el-input v-model="nodeId1" placeholder="v1" class="node-input" style="margin-right: -35px"/>
+      <el-input v-model="nodeId2" placeholder="v2" class="node-input" />
       <el-button class="circular-button" @click="connect" type="info" :icon="Switch" circle />
     </div>
 
+    <div class="flex-container mt-4">
+      <span class="label-margin">Auto-Connect</span>
+      <el-button class="circular-button" @click="autoConnect" type="info" :icon="Switch" circle />
+    </div>
+
     <div class="flex-container mt-4">
       <span class="label-margin">Finish</span>
       <el-button class="circular-button" @click="finishEdit" type="danger" :icon="Check" circle />
@@ -100,4 +123,9 @@ const finishEdit = () => {
 .button-margin {
   margin-left: 8px;
 }
+.node-input {
+  display: flex;
+  width: 60px;
+  margin-left: 10px;
+}
 </style>

src/core/network.ts

@@ -284,6 +284,23 @@ export class NetworkHub {
     this.Logs.value.unshift(`Established ${Object.keys(this.Links.value).length} links.`)
   }
 
+  connect(v1: number, v2: number) {
+    const node1 = this.Nodes.value.find(n => n.id === v1)
+    const node2 = this.Nodes.value.find(n => n.id === v2)
+
+    if (!node1 || !node2) {
+      console.error('Connection error: node(s) not found.')
+      return
+    }
+
+    this.AddLink(v1, v2)
+
+    node1.neighbors.push(v2)
+    node2.neighbors.push(v1)
+
+    this.Logs.value.unshift(`Connected nodes ${v1} and ${v2}`)
+  }
+
   StartWebWorkers() {
     for (const n of this.Nodes.value) {
       if (n.id == 0) continue
@@ -485,7 +502,8 @@ export class NetworkHub {
         period: Math.floor(this.Rand.next() * 4 + 1) * 5, // from 5 to 10 - change this later
         deadline: Math.floor(this.Rand.next() * 4 + 1) * 5, // from 5 to 10 - change this later
         workload: Math.floor(this.Rand.next() * 10) + 1, // from 1 to 10 - change this later
-        path: this.findPath(src.id, dst.id)
+        path: this.findPath(src.id, dst.id),
+        editing: false
       }
       this.Flows.value.push(f)
     }

src/core/typedefs.ts

@@ -66,6 +66,7 @@ export interface Flow {
   period: number
   workload: number
   path: number[] // id's of all nodes in path
+  editing: boolean // whether or not the user can edit in FlowsPanel
 }
 
 // Packet is transfered among nodes, at data-link layer