Merge pull request #10 from uni-tue-kn/VxLAN

uni-tue-kn · Mar 8, 2024 · ed6605d · ed6605d
2 parents d5e4f49 + acf07de
commit ed6605d
Show file tree

Hide file tree

Showing 38 changed files with 1,286 additions and 452 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog 
 
+## v2.2.0
+- Added VxLAN support
+- Added infobox in UI to get further information on features
+
 ## v2.1.2
 - Added RTT visualization
 - Cleaner monitoring routine in controller

diff --git a/Configuration GUI/package.json b/Configuration GUI/package.json
@@ -12,7 +12,7 @@
     "@types/node": "^16.11.45",
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
-    "axios": "^0.27.2",
+    "axios": ">=0.28.0",
     "bootstrap": "^5.2.0",
     "bootstrap-icons": "^1.9.1",
     "chart.js": "^4.4.1",

diff --git a/Configuration GUI/src/common/Interfaces.ts b/Configuration GUI/src/common/Interfaces.ts
@@ -100,6 +100,15 @@ export interface StreamSettings {
     ip_src_mask: string,
     ip_dst_mask: string,
     active: boolean
+    vxlan: {
+        eth_src: string,
+        eth_dst: string,
+        ip_src: string,
+        ip_dst: string,
+        ip_tos: number,
+        udp_source: number,
+        vni: number
+    }
 }
 
 export enum Encapsulation {
@@ -120,6 +129,7 @@ export interface Stream {
     stream_id: number,
     frame_size: number,
     encapsulation: Encapsulation,
+    vxlan: boolean,
     number_of_lse: number,
     traffic_rate: number,
     app_id: number
@@ -143,7 +153,8 @@ export const DefaultStream = (id: number) => {
         encapsulation: Encapsulation.None,
         number_of_lse: 0,
         traffic_rate: 1,
-        burst: 1
+        burst: 1,
+        vxlan: false
     }
 
     return stream
@@ -167,7 +178,16 @@ export const DefaultStreamSettings = (id: number, port: number) => {
         ip_tos: 0,
         ip_src_mask: "0.0.0.0",
         ip_dst_mask: "0.0.0.0",
-        active: false
+        active: false,
+        vxlan: {
+            eth_src: "3B:D5:42:2A:F6:92",
+            eth_dst: "81:E7:9D:E3:AD:47",
+            ip_src: "192.168.178.10",
+            ip_dst: "192.168.178.11",
+            ip_tos: 0,
+            udp_source: 49152,
+            vni: 1
+        }
     }
 
     return stream

diff --git a/Configuration GUI/src/components/InfoBox.tsx b/Configuration GUI/src/components/InfoBox.tsx
@@ -0,0 +1,61 @@
+/* Copyright 2022-present University of Tuebingen, Chair of Communication Networks
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ * Steffen Lindner (steffen.lindner@uni-tuebingen.de)
+ */
+
+import React, {useState} from "react"
+import {Button, Modal} from "react-bootstrap";
+import styled from "styled-components";
+
+interface Info {
+    children: JSX.Element
+}
+
+const Wrapper = styled.div`
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: wrap;
+    height: 100%;
+`
+
+
+const InfoBox = ({children}: Info) => {
+    const [display, set_display] = useState(false)
+    return <Wrapper>
+        <Modal aria-labelledby="contained-modal-title-vcenter"
+               centered show={display} onHide={() => {
+            set_display(false)
+        }}>
+            <Modal.Header closeButton>
+                <Modal.Title>Info</Modal.Title>
+            </Modal.Header>
+            <Modal.Body>{children}</Modal.Body>
+            <Modal.Footer>
+                <Button variant="danger" onClick={() => {
+                    set_display(false)
+                }}>
+                    Close
+                </Button>
+            </Modal.Footer>
+        </Modal>
+        <i onClick={() => {
+            set_display(true)
+        }} role="button" className="bi bi-question-circle-fill"/>
+    </Wrapper>
+}
+
+export default InfoBox
diff --git a/Configuration GUI/src/components/Navbar.tsx b/Configuration GUI/src/components/Navbar.tsx
@@ -107,7 +107,7 @@ const Navbar = () => {
             </Row>
             <Row>
                 <CNavItem className="flex-grow-1 mb-2">
-                    <span>v2.1.2</span>
+                    <span>v2.2.0</span>
                     {/*<a href={"#"} role="button" onClick={() => setup()} className={"nav-link logout"}>*/}
                     {/*    <i className="bi bi-box-arrow-left me-2"></i></a>*/}
                 </CNavItem>

diff --git a/Configuration GUI/src/components/StatView.tsx b/Configuration GUI/src/components/StatView.tsx
@@ -437,18 +437,18 @@ const StatView = ({ stats, time_stats, port_mapping, mode, visual }: { stats: St
                         </tr>
                     </thead>
                     <tbody>
-                        {["Multicast", "Broadcast", "Unicast", "Non-Unicast", " ", "Total"].map((v, i) => {
+                        {["Multicast", "Broadcast", "Unicast", "VxLAN", "Non-Unicast", "Total"].map((v, i) => {
                             let key = v.toLowerCase()
                             let data = get_frame_types(key)
 
                             if(key == "total") {
-                                data.tx = ["multicast", "broadcast", "unicast"].reduce((acc, curr) => {
+                                data.tx = ["multicast", "broadcast", "unicast", "vxlan"].reduce((acc, curr) => {
                                     acc += get_frame_types(curr).tx
 
                                     return acc
                                 }, 0)
 
-                                data.rx = ["multicast", "broadcast", "unicast"].reduce((acc, curr) => {
+                                data.rx = ["multicast", "broadcast", "unicast", "vxlan"].reduce((acc, curr) => {
                                     acc += get_frame_types(curr).rx
 
                                     return acc

diff --git a/Configuration GUI/src/components/Visuals.tsx b/Configuration GUI/src/components/Visuals.tsx
@@ -371,7 +371,7 @@ const Visuals = ({data, stats, port_mapping}: {data: TimeStatistics, stats: Stat
         ]
     }
 
-    let frame_type_label = ["Multicast", "Broadcast", "Unicast"]
+    let frame_type_label = ["Multicast", "Broadcast", "Unicast", "VxLAN"]
 
     const frame_type_data = {
         labels: frame_type_label,
@@ -380,23 +380,27 @@ const Visuals = ({data, stats, port_mapping}: {data: TimeStatistics, stats: Stat
                 label: 'TX frame types',
                 data: [get_frame_types(stats, port_mapping, "multicast").tx,
                     get_frame_types(stats, port_mapping, "broadcast").tx,
-                    get_frame_types(stats, port_mapping, "unicast").tx],
+                    get_frame_types(stats, port_mapping, "unicast").tx,
+                    get_frame_types(stats, port_mapping, "vxlan").tx],
                 backgroundColor: [
                     'rgb(255, 99, 132)',
                     'rgb(54, 162, 235)',
-                    'rgb(255, 205, 86)'
+                    'rgb(255, 205, 86)',
+                    'rgb(125,62,37)'
                 ],
                 hoverOffset: 4
             },
             {
                 label: 'RX frame types',
                 data: [get_frame_types(stats, port_mapping, "multicast").rx,
                     get_frame_types(stats, port_mapping, "broadcast").rx,
-                    get_frame_types(stats, port_mapping, "unicast").rx],
+                    get_frame_types(stats, port_mapping, "unicast").rx,
+                    get_frame_types(stats, port_mapping, "vxlan").rx],
                 backgroundColor: [
                     'rgb(255, 99, 132)',
                     'rgb(54, 162, 235)',
-                    'rgb(255, 205, 86)'
+                    'rgb(255, 205, 86)',
+                    'rgb(125,62,37)',
                 ],
                 hoverOffset: 4
             },
@@ -410,7 +414,8 @@ const Visuals = ({data, stats, port_mapping}: {data: TimeStatistics, stats: Stat
         datasets: [
             {
                 label: 'TX ethernet types',
-                data: [get_frame_types(stats, port_mapping, "vlan").tx,
+                data: [
+                    get_frame_types(stats, port_mapping, "vlan").tx,
                     get_frame_types(stats, port_mapping, "qinq").tx,
                     get_frame_types(stats, port_mapping, "ipv4").tx,
                     get_frame_types(stats, port_mapping, "ipv6").tx,
@@ -428,7 +433,8 @@ const Visuals = ({data, stats, port_mapping}: {data: TimeStatistics, stats: Stat
             },
             {
                 label: 'RX ethernet types',
-                data: [get_frame_types(stats, port_mapping, "vlan").rx,
+                data: [
+                    get_frame_types(stats, port_mapping, "vlan").rx,
                     get_frame_types(stats, port_mapping, "qinq").rx,
                     get_frame_types(stats, port_mapping, "ipv4").rx,
                     get_frame_types(stats, port_mapping, "ipv6").rx,

diff --git a/Configuration GUI/src/sites/Home.tsx b/Configuration GUI/src/sites/Home.tsx
@@ -142,6 +142,10 @@ const Home = () => {
                     ret += v.number_of_lse * 4 // 4 bytes per LSE
                 }
 
+                if (v.vxlan) {
+                    ret += 50 // 50 bytes overhead
+                }
+
                 return
             }
         })
-Original file line number
+Diff line change
@@ Expand Up / @@ -142,6 +142,10 @@ const Home = () => { @@
                         ret += v.number_of_lse * 4 // 4 bytes per LSE
                     }
+                    if (v.vxlan) {
+                        ret += 50 // 50 bytes overhead
+                    }
                     return
                 }
             })
@@ Expand Down @@