Merge pull request #118 from SUNET/feature.show_config_modal

add modal that shows running config and generated config for a device
SUNET · Jul 5, 2024 · 45adae6 · 45adae6
2 parents 1df8ada + 261208d
commit 45adae6
Show file tree

Hide file tree

Showing 3 changed files with 402 additions and 0 deletions.
diff --git a/public/components/DeviceList/DeviceList.js b/public/components/DeviceList/DeviceList.js
@@ -20,6 +20,7 @@ import { deleteData } from "../../utils/sendData";
 import DeviceInfoBlock from "./DeviceInfoBlock";
 import AddMgmtDomainModal from "./AddMgmtDomainModal";
 import UpdateMgmtDomainModal from "./UpdateMgmtDomainModal";
+import ShowConfigModal from "./ShowConfigModal";
 
 const io = require("socket.io-client");
 
@@ -58,6 +59,9 @@ class DeviceList extends React.Component {
     mgmtUpdateModalInput: {},
     mgmtAddModalInput: {},
     mgmtDomainsData: [],
+    showConfigModalOpen: false,
+    showConfigModalHostname: null,
+    showConfigModalState: null,
   };
 
   discovered_device_ids = new Set();
@@ -840,6 +844,22 @@ class DeviceList extends React.Component {
     });
   }
 
+  showConfigModalOpen(hostname, state) {
+    this.setState({
+      showConfigModalOpen: true,
+      showConfigModalHostname: hostname,
+      showConfigModalState: state,
+    });
+  }
+
+  showConfigModalClose() {
+    this.setState({
+      showConfigModalOpen: false,
+      showConfigModalHostname: null,
+      showConfigModalState: null,
+    });
+  }
+
   changeStateAction(device_id, state) {
     console.log(`Change state for device_id: ${device_id}`);
     const credentials = localStorage.getItem("token");
@@ -985,6 +1005,13 @@ class DeviceList extends React.Component {
           text="Make unmanaged"
           onClick={() => this.changeStateAction(device.id, "UNMANAGED")}
         />,
+        <Dropdown.Item
+          key="showconfig"
+          text="Show configuration"
+          onClick={() =>
+            this.showConfigModalOpen(device.hostname, device.state)
+          }
+        />,
         <Dropdown.Item
           key="delete"
           text="Delete device..."
@@ -1019,6 +1046,13 @@ class DeviceList extends React.Component {
           text="Make managed"
           onClick={() => this.changeStateAction(device.id, "MANAGED")}
         />,
+        <Dropdown.Item
+          key="showconfig"
+          text="Show configuration"
+          onClick={() =>
+            this.showConfigModalOpen(device.hostname, device.state)
+          }
+        />,
         <Dropdown.Item
           key="delete"
           text="Delete device..."
@@ -1351,6 +1385,12 @@ class DeviceList extends React.Component {
             onDelete={(v) => this.handleDeleteMgmtDomain(v)}
             onUpdate={(v) => this.handleUpdateMgmtDomains(v)}
           />
+          <ShowConfigModal
+            hostname={this.state.showConfigModalHostname}
+            state={this.state.showConfigModalState}
+            isOpen={this.state.showConfigModalOpen}
+            closeAction={() => this.showConfigModalClose()}
+          />
           <div className="table_options">
             <Popup
               on="click"