From 1df8ada5a55fb40d49c16d1d1799bfbf1d3c7528 Mon Sep 17 00:00:00 2001
From: Johan Marcusson <johan.marcusson@sunet.se>
Date: Thu, 4 Jul 2024 16:48:50 +0200
Subject: [PATCH] Revert "add modal that shows running config and generated
 config for a device" should be in branch

This reverts commit 6d5253cea2ca0751723865f38f0ef281dbc792e4.
---
 public/components/DeviceList/DeviceList.js    |  40 ---
 .../components/DeviceList/ShowConfigModal.js  | 235 ------------------
 public/styles/main.css                        |  15 --
 3 files changed, 290 deletions(-)
 delete mode 100644 public/components/DeviceList/ShowConfigModal.js

diff --git a/public/components/DeviceList/DeviceList.js b/public/components/DeviceList/DeviceList.js
index 783ac5b..ede5633 100644
--- a/public/components/DeviceList/DeviceList.js
+++ b/public/components/DeviceList/DeviceList.js
@@ -20,7 +20,6 @@ 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");
 
@@ -59,9 +58,6 @@ class DeviceList extends React.Component {
     mgmtUpdateModalInput: {},
     mgmtAddModalInput: {},
     mgmtDomainsData: [],
-    showConfigModalOpen: false,
-    showConfigModalHostname: null,
-    showConfigModalState: null,
   };
 
   discovered_device_ids = new Set();
@@ -844,22 +840,6 @@ 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");
@@ -1005,13 +985,6 @@ 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..."
@@ -1046,13 +1019,6 @@ 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..."
@@ -1385,12 +1351,6 @@ 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"
diff --git a/public/components/DeviceList/ShowConfigModal.js b/public/components/DeviceList/ShowConfigModal.js
deleted file mode 100644
index a10b5d4..0000000
--- a/public/components/DeviceList/ShowConfigModal.js
+++ /dev/null
@@ -1,235 +0,0 @@
-import React, { useEffect, useState } from "react";
-import {
-  Button,
-  ButtonGroup,
-  Loader,
-  Popup,
-  Icon,
-  Modal,
-  ModalActions,
-  ModalContent,
-  ModalDescription,
-  ModalHeader,
-  Grid,
-  GridRow,
-  GridColumn,
-  Segment,
-} from "semantic-ui-react";
-import PropTypes from "prop-types";
-import { getData } from "../../utils/getData";
-
-function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
-  const [runningConfig, setRunningConfig] = useState({ config: "" });
-  const [generatedConfig, setGeneratedConfig] = useState({
-    generated_config: "",
-  });
-  const [errors, setErrors] = useState([]);
-
-  function clearForm() {
-    setErrors([]);
-    setRunningConfig({ config: "" });
-    setGeneratedConfig({ generated_config: "" });
-  }
-
-  function handleCancel() {
-    clearForm();
-    closeAction();
-  }
-
-  function getRunningConfig() {
-    const credentials = localStorage.getItem("token");
-    setRunningConfig({ config: <Loader className="modalloader" /> });
-    getData(
-      `${process.env.API_URL}/api/v1.0/device/${hostname}/running_config`,
-      credentials,
-    )
-      .then((resp) => {
-        setRunningConfig(resp.data);
-      })
-      .catch((error) => {
-        // loading status
-        setErrors([error]);
-        setRunningConfig({ config: error.message });
-      });
-  }
-
-  function getGeneratedConfig() {
-    setGeneratedConfig({
-      generated_config: <Loader className="modalloader" />,
-    });
-    const credentials = localStorage.getItem("token");
-    getData(
-      `${process.env.API_URL}/api/v1.0/device/${hostname}/generate_config`,
-      credentials,
-    )
-      .then((resp) => {
-        setGeneratedConfig(resp.data.config);
-      })
-      .catch((error) => {
-        // loading status
-        setErrors([error]);
-        setRunningConfig({ generated_config: error.message });
-      });
-  }
-
-  useEffect(() => {
-    if (hostname) {
-      if (state === "MANAGED") {
-        getRunningConfig();
-      }
-      getGeneratedConfig();
-    } else {
-      clearForm();
-    }
-  }, [hostname, state]);
-
-  return (
-    <Modal open={isOpen} onClose={handleCancel} size="fullscreen">
-      <ModalHeader>Show config for {hostname}</ModalHeader>
-      <ModalContent>
-        <ModalDescription>
-          <Grid columns="equal">
-            <GridRow>
-              <GridColumn>
-                <h1>Device Running Config</h1>
-              </GridColumn>
-              <GridColumn>
-                <h1>NMS Generated Config</h1>
-              </GridColumn>
-            </GridRow>
-            <GridRow>
-              <GridColumn>
-                <ButtonGroup>
-                  <Popup
-                    content="Copy running config"
-                    floated="right"
-                    trigger={
-                      <Button
-                        onClick={() =>
-                          navigator.clipboard.writeText(runningConfig.config)
-                        }
-                        icon="copy"
-                        size="small"
-                      />
-                    }
-                    position="bottom right"
-                  />
-                  <Popup
-                    content="Refresh running config"
-                    floated="right"
-                    trigger={
-                      <Button
-                        onClick={() => getRunningConfig()}
-                        icon="refresh"
-                        size="small"
-                      />
-                    }
-                    position="bottom right"
-                  />
-                </ButtonGroup>
-                <Segment>
-                  {typeof runningConfig.config === "object" ? (
-                    runningConfig.config
-                  ) : (
-                    <pre className="fullconfig">{runningConfig.config}</pre>
-                  )}
-                </Segment>
-              </GridColumn>
-              <GridColumn>
-                <ButtonGroup>
-                  <Popup
-                    content="Copy NMS generated config"
-                    floated="right"
-                    trigger={
-                      <Button
-                        onClick={() =>
-                          navigator.clipboard.writeText(
-                            generatedConfig.generated_config,
-                          )
-                        }
-                        icon="copy"
-                        size="small"
-                      />
-                    }
-                    position="bottom center"
-                  />
-                  <Popup
-                    content="Refresh NMS generated config"
-                    floated="right"
-                    trigger={
-                      <Button
-                        onClick={() => getGeneratedConfig()}
-                        icon="refresh"
-                        size="small"
-                      />
-                    }
-                    position="bottom center"
-                  />
-                  <Popup
-                    content="Copy available variables for templates"
-                    floated="right"
-                    trigger={
-                      <Button
-                        onClick={() =>
-                          navigator.clipboard.writeText(
-                            JSON.stringify(
-                              generatedConfig.available_variables,
-                              null,
-                              2,
-                            ),
-                          )
-                        }
-                        icon="code"
-                        size="small"
-                      />
-                    }
-                    position="bottom center"
-                  />
-                </ButtonGroup>
-                <Segment>
-                  <Loader />
-                  {typeof generatedConfig.generated_config === "object" ? (
-                    <div>{generatedConfig.generated_config}</div>
-                  ) : (
-                    <pre className="fullconfig">
-                      {generatedConfig.generated_config}
-                    </pre>
-                  )}
-                </Segment>
-              </GridColumn>
-            </GridRow>
-            <GridRow>
-              <GridColumn>
-                <ul id="error_list" style={{ color: "red" }}>
-                  {errors.map((err, index) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <li key={index}>{err.message}</li>
-                  ))}
-                </ul>
-              </GridColumn>
-            </GridRow>
-          </Grid>
-        </ModalDescription>
-      </ModalContent>
-      <ModalActions>
-        <Button color="black" onClick={handleCancel}>
-          Close <Icon name="cancel" />
-        </Button>
-      </ModalActions>
-    </Modal>
-  );
-}
-
-ShowConfigModal.propTypes = {
-  hostname: PropTypes.string,
-  state: PropTypes.string,
-  isOpen: PropTypes.bool.isRequired,
-  closeAction: PropTypes.func.isRequired,
-};
-
-ShowConfigModal.defaultProps = {
-  hostname: null,
-  state: "MANAGED",
-};
-
-export default ShowConfigModal;
diff --git a/public/styles/main.css b/public/styles/main.css
index e3cfcd6..ad9a637 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -364,10 +364,6 @@ progress::-moz-progress-bar {
   font-size: 80%;
 }
 
-.fullconfig {
-  overflow-x: scroll;
-}
-
 /* log output styles */
 .logoutput {
   overflow-y: scroll;
@@ -382,14 +378,3 @@ progress::-moz-progress-bar {
 .job_ticket_ref {
   width: 15em;
 }
-
-/* Workaround for an unfixed bug with Loaders not showing up properly in Modals
- * https://github.com/Semantic-Org/Semantic-UI-React/issues/3133 
- */
-.ui.dimmer .ui.modalloader.loader:before {
-  border-color: rgba(0, 0, 0, 0.1);
-}
-
-.ui.dimmer .ui.modalloader.loader:after {
-  border-color: #767676 transparent transparent;
-}