Merge pull request #12 from uni-tue-kn/dev

VxLAN, ARP Reply, REST-API refactor, UI refactor

.github/workflows/docker-image.yml

@@ -4,7 +4,7 @@ on:
   push:
     branches: [ "main", "dev"]
   pull_request:
-    branches: [ "main" ]
+    branches: [ "main", "dev"]
 
 jobs:
   build:

.gitignore

@@ -2,7 +2,25 @@
 # Created by https://www.toptal.com/developers/gitignore/api/osx,node,python
 # Edit at https://www.toptal.com/developers/gitignore?templates=osx,node,python
 
+### Rust ###
+# Generated by Cargo
+# will have compiled files and executables
+debug/
+target/
+
+# Remove Cargo.lock from gitignore if creating an executable, leave it for libraries
+# More information here https://doc.rust-lang.org/cargo/guide/cargo-toml-vs-cargo-lock.html
+Cargo.lock
+
+# These are backup files generated by rustfmt
+**/*.rs.bk
+
+# MSVC Windows builds of rustc generate these, which store debugging information
+*.pdb
+
 ### Node ###
+package-lock.json
+
 # Logs
 logs
 *.log

CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog 
 
+## v2.2.0
+- Added VxLAN support
+- Added infobox in UI to get further information on features
+- Random Ethernet src addresses are now always unicast
+- Detection mechanism that clears local storage if stored streams do not have all required properties
+  - This may be the case if an update introduces new properties, but the old stored values in local storage dont have them
+- Refactor Configuration GUI code
+- Switch to utoipa + swagger-ui for REST-API docs
+- Add `config.json` file that can be used to specify the traffic generation (front panel) ports
+- Add `ARP Reply` option in UI. If enabled, the switch answers all ARP requests that it receives on that port.
+
+### Refactor REST-API endpoint `/api/trafficgen` 
+- Endpoint `/api/trafficgen` refactored to better reflect encapsulation methods
+- Streamsettings are now grouped according to protocol (see `/api/docs` for examples)
+  - Ethernet related configuration (src & dst mac) are now under `ethernet`
+  - VLAN & QinQ related configuration are now under `vlan`
+  - IP related configuration are now under `ip`
+  - Fields (`vlan`, `mpls_stack`, `vxlan`) are only required if corresponding encapsulation is active
+- `number_of_lse` in stream description is now only required if MPLS encapsulation is used
+
+## v2.1.2
+- Added RTT visualization
+- Cleaner monitoring routine in controller
+- Add "port clearance" before P4TG starts. May be needed if other systems configure the switch (e.g., SONiC). See https://github.com/uni-tue-kn/P4TG/issues/6
+
 ## v2.1.1
 
 - UI bug-fix total TX/RX frame tpes

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",

Configuration GUI/src/App.tsx

@@ -17,7 +17,7 @@
  * Steffen Lindner (steffen.lindner@uni-tuebingen.de)
  */
 
-import React, {useState} from 'react'
+import React, {useEffect, useState} from 'react'
 import Config from "./config"
 import {BrowserRouter as Router, Route, Routes} from "react-router-dom"
 import {Col, Container, Row} from "react-bootstrap"
@@ -26,13 +26,15 @@ import styled from "styled-components"
 import ErrorView from "./components/ErrorView"
 import Navbar from "./components/Navbar"
 
-import Home from "./sites/Home"
+import Home, {GitHub} from "./sites/Home"
 import Setup from "./sites/Setup";
 import Ports from "./sites/Ports";
 import Settings from "./sites/Settings";
 import Offline from "./sites/Offline"
 import Tables from "./sites/Tables";
 import config from "./config";
+import {DefaultStream, DefaultStreamSettings, StreamSettings} from "./common/Interfaces";
+import {Stream} from "./common/Interfaces";
 
 const App = () => {
     const [error, set_error] = useState(false)
@@ -52,6 +54,45 @@ const App = () => {
     const Wrapper = styled.div`
 
     `
+
+    // Validates the stored streams and stream settings in the local storage
+    // Clears local storage if some streams/settings are not valid
+    // This may be needed if the UI got an update (new stream properties), but the local storage
+    // holds "old" streams/settings without the new property
+    const validateLocalStorage = () => {
+        const defaultStream = DefaultStream(1)
+        const defaultStreamSetting = DefaultStreamSettings(1, 5)
+
+        try {
+            let stored_streams: Stream[] = JSON.parse(localStorage.getItem("streams") ?? "[]")
+            let stored_settings: StreamSettings[] = JSON.parse(localStorage.getItem("streamSettings") ?? "[]")
+
+            if(!stored_streams.every(s => Object.keys(defaultStream).every(key => Object.keys(s).includes(key)))) {
+                alert("Incompatible stream description found. This may be due to an update. Resetting local storage.")
+                localStorage.clear()
+                window.location.reload()
+                return
+            }
+
+            if(!stored_settings.every(s => Object.keys(defaultStreamSetting).every(key => {
+                return Object.keys(s).includes(key) && s.mpls_stack != undefined
+            }))) {
+                alert("Incompatible stream description found. This may be due to an update. Resetting local storage.")
+                localStorage.clear()
+                window.location.reload()
+                return
+            }
+        }
+        catch {
+            alert("Error in reading local storage. Resetting local storage.")
+            localStorage.clear()
+            window.location.reload()
+        }
+    }
+
+    useEffect(() => {
+        validateLocalStorage()
+    }, [])
     return <>
         <Router basename={Config.BASE_PATH}>
             <Row>
@@ -80,6 +121,7 @@ const App = () => {
                                     <Offline/>
                                 }
                             </Wrapper>
+
                         </Container>
                     </AxiosInterceptor>
                 </Col>

Configuration GUI/src/assets/index.css

@@ -19,10 +19,11 @@
 
 :root {
     --color-primary: #e74c3c;
+    --color-primary-light: #ff9e93;
     --color-okay: #27ae60;
     --color-okay-hover: #20864b;
     --color-secondary: #2c3e50;
-    --color-seconary-light: #415e7a;
+    --color-secondary-light: #415e7a;
     --color-yellow: #f1c40f;
 }
 
@@ -119,6 +120,22 @@ table tr th {
 .btn {
     padding: 10px 10px 10px 10px !important;
 }
+
+.accordion-button:not(.collapsed) {
+    background-color: var(--color-secondary);
+    color: #FFF;
+}
+
+.accordion-button {
+    background-color: var(--color-secondary);
+    color: #FFF;
+}
+
+.accordion-button::after {
+    -webkit-filter: grayscale(1) invert(1);
+    filter: grayscale(1) invert(1);
+}
+
 @media only screen and (max-width: 450px) {
     .sidebar-nav .nav-link i {
         font-size: 20px;

Configuration GUI/src/common/Definitions.ts

@@ -0,0 +1,43 @@
+/* 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)
+ */
+
+export const fec_mapping: { [name: string]: string } = {
+    "BF_FEC_TYP_NONE": "None",
+    "BF_FEC_TYP_FC": "Firecode",
+    "BF_FEC_TYP_REED_SOLOMON": "Reed Solomon"
+}
+export const auto_neg_mapping: { [name: string]: string } = {
+    "PM_AN_DEFAULT": "Auto",
+    "PM_AN_FORCE_DISABLE": "Off",
+    "PM_AN_FORCE_ENABLE": "On"
+}
+
+export const speed_mapping: { [name: string]: string } = {
+    "BF_SPEED_1G": "1G",
+    "BF_SPEED_10G": "10G",
+    "BF_SPEED_25G": "25G",
+    "BF_SPEED_40G": "40G",
+    "BF_SPEED_50G": "50G",
+    "BF_SPEED_100G": "100G"
+}
+
+export const loopback_mapping: { [name: string]: string } = {
+    "BF_LPBK_NONE": "Off",
+    "BF_LPBK_MAC_NEAR": "On"
+}

Configuration GUI/src/common/Interfaces.ts

@@ -86,20 +86,35 @@ export interface StreamSettings {
     mpls_stack: MPLSHeader[],
     port: number,
     stream_id: number,
-    vlan_id: number,
-    pcp: number,
-    dei: number,
-    inner_vlan_id: number,
-    inner_pcp: number,
-    inner_dei: number,
-    eth_src: string,
-    eth_dst: string,
-    ip_src: string,
-    ip_dst: string,
-    ip_tos: number,
-    ip_src_mask: string,
-    ip_dst_mask: string,
+    vlan: {
+        vlan_id: number,
+        pcp: number,
+        dei: number,
+        inner_vlan_id: number,
+        inner_pcp: number,
+        inner_dei: number,
+    }
+    ethernet: {
+        eth_src: string,
+        eth_dst: string,
+    },
+    ip: {
+        ip_src: string,
+        ip_dst: string,
+        ip_tos: number,
+        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 +135,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 +159,8 @@ export const DefaultStream = (id: number) => {
         encapsulation: Encapsulation.None,
         number_of_lse: 0,
         traffic_rate: 1,
-        burst: 1
+        burst: 1,
+        vxlan: false
     }
 
     return stream
@@ -153,22 +170,45 @@ export const DefaultStreamSettings = (id: number, port: number) => {
     let stream: StreamSettings = {
         port: port,
         stream_id: id,
-        vlan_id: 1,
-        pcp: 0,
-        dei: 0,
-        inner_vlan_id: 1,
-        inner_pcp: 0,
-        inner_dei: 0,
+        vlan: {
+            vlan_id: 1,
+            pcp: 0,
+            dei: 0,
+            inner_vlan_id: 1,
+            inner_pcp: 0,
+            inner_dei: 0
+        },
         mpls_stack: [],
-        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,
-        ip_src_mask: "0.0.0.0",
-        ip_dst_mask: "0.0.0.0",
-        active: false
+        ethernet: {
+            eth_src: "32:D5:42:2A:F6:92",
+            eth_dst: "81:E7:9D:E3:AD:47"
+        },
+        ip: {
+            ip_src: "192.168.178.10",
+            ip_dst: "192.168.178.11",
+            ip_tos: 0,
+            ip_src_mask: "0.0.0.0",
+            ip_dst_mask: "0.0.0.0"
+        },
+        active: false,
+        vxlan: {
+            eth_src: "32: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
-}
+}
+
+export interface P4TGConfig {
+    tg_ports: {
+        port: number,
+        mac: string,
+        arp_reply: boolean
+    }[]
+}