Network diagram edits, lifetime stats

2025-12-25 00:57:05 +00:00 · 2021-08-12 14:13:55 -04:00
parent f6861ec122
commit f202cd7327
13 changed files with 151 additions and 29 deletions
--- a/src/components/NetworkDiagram/index.js
+++ b/src/components/NetworkDiagram/index.js
@@ -0,0 +1,152 @@
+import React, { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+import { CRow, CCol } from '@coreui/react';
+import { NetworkDiagram as Graph } from 'ucentral-libs';
+import { useTranslation } from 'react-i18next';
+
+const associationStyle = {
+  background: '#3399ff',
+  color: 'white',
+  border: '1px solid #777',
+  width: 220,
+  padding: 10,
+};
+
+const recognizedRadioStyle = {
+  background: '#2eb85c',
+  color: 'white',
+  width: 220,
+  padding: 15,
+};
+
+const unrecognizedRadioStyle = {
+  background: '#e55353',
+  color: 'white',
+  width: 220,
+  padding: 15,
+};
+
+const recognizedRadioNode = (radio) => (
+  <div className="align-middle">
+    <h6 className="align-middle mb-0">
+      Radio #{radio.radio} ({radio.channel < 16 ? '2G' : '5G'})
+    </h6>
+  </div>
+);
+
+const unrecognizedRadioNode = (t, radio) => (
+  <div className="align-middle">
+    <h6 className="align-middle mb-0">
+      Radio #{radio.radioIndex} ({t('common.unrecognized')})
+    </h6>
+  </div>
+);
+
+const associationNode = (associationInfo) => (
+  <div>
+    <CRow>
+      <CCol className="text-center">
+        <h6>{associationInfo.bssid}</h6>
+      </CCol>
+    </CRow>
+    <CRow>
+      <CCol className="text-left pl-4">Rx Rate : {associationInfo.rxRate}</CCol>
+    </CRow>
+    <CRow>
+      <CCol className="text-left pl-4">Tx Rate : {associationInfo.txRate}</CCol>
+    </CRow>
+  </div>
+);
+
+const NetworkDiagram = ({ radios, associations }) => {
+  const { t } = useTranslation();
+  const [loading, setLoading] = useState(false);
+  const [elements, setElements] = useState([]);
+
+  const getX = (associationsAdded) => {
+    if (associationsAdded === 0) return 0;
+    if ((associationsAdded + 1) % 2 === 0) return -140 * (associationsAdded + 1);
+    return 140 * associationsAdded;
+  };
+
+  const parseData = () => {
+    setLoading(true);
+    const newElements = [];
+    const radiosAdded = {};
+
+    // Creating the radio nodes
+    for (const radio of radios) {
+      if (radiosAdded[radio.radio] === undefined) {
+        newElements.push({
+          id: `r-${radio.radio}`,
+          data: { label: recognizedRadioNode(radio) },
+          position: { x: 0, y: 200 * radio.radio },
+          type: 'input',
+          style: recognizedRadioStyle,
+        });
+        radiosAdded[radio.radio] = 0;
+      }
+    }
+
+    // Creating the association nodes and their edges
+    for (let i = 0; i < associations.length; i += 1) {
+      const assoc = associations[i];
+
+      // If the radio has not been added, we create a new unknown radio based on its index
+      if (radiosAdded[assoc.radio.radioIndex] === undefined) {
+        newElements.push({
+          id: `r-${assoc.radio.radioIndex}`,
+          data: { label: unrecognizedRadioNode(t, assoc.radio) },
+          position: { x: 0, y: 200 * assoc.radio.radioIndex },
+          type: 'input',
+          style: unrecognizedRadioStyle,
+        });
+        radiosAdded[assoc.radio.radioIndex] = 0;
+      }
+
+      // Adding the association
+      newElements.push({
+        id: `a-${assoc.bssid}`,
+        data: { label: associationNode(assoc) },
+        position: {
+          x: getX(radiosAdded[assoc.radio.radioIndex]),
+          y: 80 + 240 * assoc.radio.radioIndex,
+        },
+        style: associationStyle,
+        type: 'output',
+      });
+      radiosAdded[assoc.radio.radioIndex] += 1;
+
+      // Creating the edge
+      newElements.push({
+        id: `e-${assoc.radio.radioIndex}-${assoc.bssid}`,
+        source: `r-${assoc.radio.radioIndex}`,
+        target: `a-${assoc.bssid}`,
+        arrowHeadType: 'arrowclosed',
+      });
+    }
+
+    setElements(newElements);
+    setLoading(false);
+  };
+
+  useEffect(() => {
+    if (radios !== null && associations !== null) {
+      parseData();
+    }
+  }, [radios, associations]);
+
+  return <Graph loading={loading} elements={elements} setElements={setElements} />;
+};
+
+NetworkDiagram.propTypes = {
+  radios: PropTypes.instanceOf(Array),
+  associations: PropTypes.instanceOf(Array),
+};
+
+NetworkDiagram.defaultProps = {
+  radios: null,
+  associations: null,
+};
+
+export default NetworkDiagram;