From 7e5a8e9737ba15c4d12922d10360c9d467144599 Mon Sep 17 00:00:00 2001
From: Johan Marcusson <johan.marcusson@sunet.se>
Date: Thu, 4 Jul 2024 16:46:42 +0200
Subject: [PATCH 1/3] add modal that shows running config and generated config
 for a device

---
 public/components/DeviceList/DeviceList.js    |  40 +++
 .../components/DeviceList/ShowConfigModal.js  | 235 ++++++++++++++++++
 public/styles/main.css                        |  15 ++
 3 files changed, 290 insertions(+)
 create mode 100644 public/components/DeviceList/ShowConfigModal.js

diff --git a/public/components/DeviceList/DeviceList.js b/public/components/DeviceList/DeviceList.js
index ede5633..783ac5b 100644
--- 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"
diff --git a/public/components/DeviceList/ShowConfigModal.js b/public/components/DeviceList/ShowConfigModal.js
new file mode 100644
index 0000000..a10b5d4
--- /dev/null
+++ b/public/components/DeviceList/ShowConfigModal.js
@@ -0,0 +1,235 @@
+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 ad9a637..e3cfcd6 100644
--- a/public/styles/main.css
+++ b/public/styles/main.css
@@ -364,6 +364,10 @@ progress::-moz-progress-bar {
   font-size: 80%;
 }
 
+.fullconfig {
+  overflow-x: scroll;
+}
+
 /* log output styles */
 .logoutput {
   overflow-y: scroll;
@@ -378,3 +382,14 @@ 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;
+}

From 05990c3202f2f2be754da087d622a3ff1bde62d7 Mon Sep 17 00:00:00 2001
From: Johan Marcusson <johan.marcusson@sunet.se>
Date: Fri, 5 Jul 2024 11:10:30 +0200
Subject: [PATCH 2/3] have two dropdowns with options for what config to show
 on left and right column

---
 .../components/DeviceList/ShowConfigModal.js  | 250 ++++++++++--------
 1 file changed, 142 insertions(+), 108 deletions(-)

diff --git a/public/components/DeviceList/ShowConfigModal.js b/public/components/DeviceList/ShowConfigModal.js
index a10b5d4..d96c516 100644
--- a/public/components/DeviceList/ShowConfigModal.js
+++ b/public/components/DeviceList/ShowConfigModal.js
@@ -14,6 +14,10 @@ import {
   GridRow,
   GridColumn,
   Segment,
+  Dropdown,
+  DropdownDivider,
+  DropdownHeader,
+  DropdownItem,
 } from "semantic-ui-react";
 import PropTypes from "prop-types";
 import { getData } from "../../utils/getData";
@@ -24,6 +28,10 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
     generated_config: "",
   });
   const [errors, setErrors] = useState([]);
+  const [columnValues, setColumnValues] = useState({
+    left: "running_config",
+    right: "generate_config",
+  });
 
   function clearForm() {
     setErrors([]);
@@ -81,122 +89,148 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
     } else {
       clearForm();
     }
-  }, [hostname, state]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [hostname]);
+
+  const leftColumnOptions = [
+    <DropdownHeader key="device_header" content="Device config" />,
+    <DropdownItem
+      key="running_config"
+      value="running_config"
+      text="Running config"
+    />,
+    <DropdownDivider key="divider" />,
+    <DropdownHeader key="nms_header" content="NMS generated" />,
+    <DropdownItem
+      key="generate_config"
+      value="generate_config"
+      text="Latest config from templates"
+    />,
+    <DropdownItem
+      key="available_variables"
+      value="available_variables"
+      text="Available variables for templates"
+    />,
+  ];
+
+  const rightColumnOptions = [
+    ...leftColumnOptions,
+    <DropdownDivider key="right_only_divider" />,
+    <DropdownItem key="hide" value="hide" text="Hide" />,
+  ];
+
+  function updateColumn(e, data) {
+    console.log(data);
+    const colName = data.name;
+    const val = data.value;
+    const column = {};
+    if (colName === "left") {
+      column.left = val;
+    } else {
+      column.right = val;
+    }
+    if (val !== columnValues[colName]) {
+      setColumnValues((currentValues) => ({
+        ...currentValues,
+        [colName]: val,
+      }));
+    }
+  }
+
+  const columnHeaders = {
+    running_config: "Device running config",
+    generate_config: "NMS generated config",
+    available_variables: "Template variables",
+  };
+
+  const columnRefreshFunctions = {
+    running_config: getRunningConfig,
+    generate_config: getGeneratedConfig,
+    available_variables: getGeneratedConfig,
+  };
+
+  const columnContents = Object.entries(columnValues).map(
+    ([colName, colValue]) => {
+      const headerText = columnHeaders[colValue] || colValue;
+      let config = "";
+      if (colValue === "running_config") {
+        config = runningConfig.config;
+      } else if (colValue === "generate_config") {
+        config = generatedConfig.generated_config;
+      } else if (colValue === "available_variables") {
+        config = JSON.stringify(generatedConfig.available_variables, null, 2);
+      } else {
+        return null;
+      }
+      return (
+        <GridColumn>
+          <h1>{headerText}</h1>
+          <ButtonGroup>
+            <Popup
+              content={`Copy ${headerText}`}
+              floated="right"
+              trigger={
+                <Button
+                  onClick={() => navigator.clipboard.writeText(config)}
+                  icon="copy"
+                  size="small"
+                />
+              }
+              position="bottom right"
+            />
+            <Popup
+              content={`Refresh ${headerText}`}
+              floated="right"
+              trigger={
+                <Button
+                  onClick={() => columnRefreshFunctions[colValue]()}
+                  icon="refresh"
+                  size="small"
+                />
+              }
+              position="bottom right"
+            />
+          </ButtonGroup>
+          <Segment>
+            {typeof config === "object" ? (
+              config
+            ) : (
+              <pre className="fullconfig">{config}</pre>
+            )}
+          </Segment>
+        </GridColumn>
+      );
+    },
+  );
 
   return (
     <Modal open={isOpen} onClose={handleCancel} size="fullscreen">
       <ModalHeader>Show config for {hostname}</ModalHeader>
       <ModalContent>
         <ModalDescription>
+          <Segment>
+            <Dropdown
+              key="left"
+              name="left"
+              text="Left column"
+              button
+              options={leftColumnOptions}
+              defaultValue="running_config"
+              onChange={updateColumn}
+            />
+            <Dropdown
+              key="right"
+              name="right"
+              text="Right column"
+              button
+              options={rightColumnOptions}
+              defaultValue="generate_config"
+              onChange={updateColumn}
+            />
+          </Segment>
           <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>
+              {columnContents.filter((contents) => contents !== null)}
             </GridRow>
             <GridRow>
               <GridColumn>

From 261208d7b90d7872753ffb16702816f4dc8aa404 Mon Sep 17 00:00:00 2001
From: Johan Marcusson <johan.marcusson@sunet.se>
Date: Fri, 5 Jul 2024 14:28:50 +0200
Subject: [PATCH 3/3] option to get last syncto job generated configs

---
 .../components/DeviceList/ShowConfigModal.js  | 114 +++++++++++++++---
 1 file changed, 96 insertions(+), 18 deletions(-)

diff --git a/public/components/DeviceList/ShowConfigModal.js b/public/components/DeviceList/ShowConfigModal.js
index d96c516..1ba9aeb 100644
--- a/public/components/DeviceList/ShowConfigModal.js
+++ b/public/components/DeviceList/ShowConfigModal.js
@@ -27,6 +27,12 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
   const [generatedConfig, setGeneratedConfig] = useState({
     generated_config: "",
   });
+  const [previousConfig, setPreviousConfig] = useState({
+    0: { config: "" },
+    1: { config: "" },
+    2: { config: "" },
+    3: { config: "" },
+  });
   const [errors, setErrors] = useState([]);
   const [columnValues, setColumnValues] = useState({
     left: "running_config",
@@ -76,7 +82,33 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
       .catch((error) => {
         // loading status
         setErrors([error]);
-        setRunningConfig({ generated_config: error.message });
+        setGeneratedConfig({ generated_config: error.message });
+      });
+  }
+
+  function getPreviousConfig(number) {
+    setPreviousConfig((currentValues) => ({
+      ...currentValues,
+      [number]: { config: <Loader className="modalloader" /> },
+    }));
+    const credentials = localStorage.getItem("token");
+    getData(
+      `${process.env.API_URL}/api/v1.0/device/${hostname}/previous_config?previous=${number}`,
+      credentials,
+    )
+      .then((resp) => {
+        setPreviousConfig((currentValues) => ({
+          ...currentValues,
+          [number]: resp.data,
+        }));
+      })
+      .catch((error) => {
+        // loading status
+        setErrors([error]);
+        setPreviousConfig((currentValues) => ({
+          ...currentValues,
+          [number]: { config: error.message },
+        }));
       });
   }
 
@@ -104,7 +136,27 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
     <DropdownItem
       key="generate_config"
       value="generate_config"
-      text="Latest config from templates"
+      text="Generate config from latest templates"
+    />,
+    <DropdownItem
+      key="previous_0"
+      value="previous_0"
+      text="Last syncto job generated config (0)"
+    />,
+    <DropdownItem
+      key="previous_1"
+      value="previous_1"
+      text="Second from last syncto job generated config (-1)"
+    />,
+    <DropdownItem
+      key="previous_2"
+      value="previous_2"
+      text="Third from last syncto job generated config (-2)"
+    />,
+    <DropdownItem
+      key="previous_3"
+      value="previous_3"
+      text="Fourth from last syncto job generated config (-3)"
     />,
     <DropdownItem
       key="available_variables"
@@ -116,11 +168,10 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
   const rightColumnOptions = [
     ...leftColumnOptions,
     <DropdownDivider key="right_only_divider" />,
-    <DropdownItem key="hide" value="hide" text="Hide" />,
+    <DropdownItem key="hide" value="hide" text="Hide column" />,
   ];
 
   function updateColumn(e, data) {
-    console.log(data);
     const colName = data.name;
     const val = data.value;
     const column = {};
@@ -129,6 +180,11 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
     } else {
       column.right = val;
     }
+    // if val starts with previous_, then we need to get the previous value
+    if (val.startsWith("previous_")) {
+      const number = parseInt(val.replace("previous_", ""), 10);
+      getPreviousConfig(number);
+    }
     if (val !== columnValues[colName]) {
       setColumnValues((currentValues) => ({
         ...currentValues,
@@ -151,19 +207,25 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
 
   const columnContents = Object.entries(columnValues).map(
     ([colName, colValue]) => {
-      const headerText = columnHeaders[colValue] || colValue;
+      let headerText = columnHeaders[colValue] || colValue;
       let config = "";
+      let jobId = 0;
       if (colValue === "running_config") {
         config = runningConfig.config;
       } else if (colValue === "generate_config") {
         config = generatedConfig.generated_config;
+      } else if (colValue.startsWith("previous_")) {
+        const number = parseInt(colValue.replace("previous_", ""), 10);
+        config = previousConfig[number].config;
+        jobId = previousConfig[number].job_id;
+        headerText = `Previous ${number} job config`;
       } else if (colValue === "available_variables") {
         config = JSON.stringify(generatedConfig.available_variables, null, 2);
       } else {
         return null;
       }
       return (
-        <GridColumn>
+        <GridColumn key={colName}>
           <h1>{headerText}</h1>
           <ButtonGroup>
             <Popup
@@ -178,18 +240,34 @@ function ShowConfigModal({ hostname, state, isOpen, closeAction }) {
               }
               position="bottom right"
             />
-            <Popup
-              content={`Refresh ${headerText}`}
-              floated="right"
-              trigger={
-                <Button
-                  onClick={() => columnRefreshFunctions[colValue]()}
-                  icon="refresh"
-                  size="small"
-                />
-              }
-              position="bottom right"
-            />
+            {colValue.startsWith("previous_") && (
+              <Popup
+                content={`Copy Job ID #${jobId}`}
+                floated="right"
+                trigger={
+                  <Button
+                    onClick={() => navigator.clipboard.writeText(jobId)}
+                    icon="numbered list"
+                    size="small"
+                  />
+                }
+                position="bottom right"
+              />
+            )}
+            {colValue in columnRefreshFunctions && (
+              <Popup
+                content={`Refresh ${headerText}`}
+                floated="right"
+                trigger={
+                  <Button
+                    onClick={() => columnRefreshFunctions[colValue]()}
+                    icon="refresh"
+                    size="small"
+                  />
+                }
+                position="bottom right"
+              />
+            )}
           </ButtonGroup>
           <Segment>
             {typeof config === "object" ? (