CE-2062: resolve upstream conflicts, fix RouterHarness

src/api/SwaggerApi.js

@@ -693,22 +693,16 @@ export function unpackIocStatus(status) {
   return { ...status };
 }
 
-export function useIocStatus() {
+export function useIocStatus(id) {
   const api = useContext(apiContext);
   const method = useCallAndUnpack(
-    (iocId) => api.apis.Monitoring.fetchIocStatus({ ioc_id: iocId }),
+    api.apis.Monitoring.fetchIocStatus,
     unpackIocStatus
   );
-  return useAsync({ fcn: method, call: false });
+  const boundMethod = useCallback(method.bind(null, { ioc_id: id }), [id]);
+  return useAsync({ fcn: boundMethod });
 }
 
-// export function useIocStatus(id) {
-//   const api = useContext(apiContext);
-//   const method = useCallAndUnpack(api.apis.Monitoring.fetchIocStatus, unpackIocStatus);
-//   const boundMethod = useCallback(method.bind(null, {ioc_id: id}), [id])
-//   return useAsync({ fcn: boundMethod});
-// }
-
 export function unpackNaming(naming) {
   return { ...naming };
 }

src/components/IOC/IOCAsyncList/IOCAsyncList.js

 import React from "react";
 import { useMediaQuery } from "@mui/material";
-import { IOCDetailFetcher } from "../IOCDetailFetcher";
 import { IOCList } from "../IOCList";
 import { IOCTable } from "../IOCTable";
 
@@ -10,8 +9,7 @@ export function IOCAsyncList({
   rowType,
   pagination,
   onPage,
-  loading,
-  asyncDetails = true
+  loading
 }) {
   const smUp = useMediaQuery((theme) => theme.breakpoints.up("sm"));
   const smDown = useMediaQuery((theme) => theme.breakpoints.down("sm"));
@@ -29,15 +27,6 @@ export function IOCAsyncList({
           onPage={onPage}
         />
       ) : null}
-      {asyncDetails &&
-        iocs.map((ioc, index) => (
-          <IOCDetailFetcher
-            key={`ioc-${ioc.id}`}
-            ioc={ioc}
-            index={index}
-            setIocs={setIocs}
-          />
-        ))}
     </>
   );
 }

src/components/IOC/IOCDetailFetcher/IOCDetailFetcher.js

-import { useEffect } from "react";
-import {
-  useTagsAndCommitIds,
-  useIocStatus,
-  useIOC
-} from "../../../api/SwaggerApi";
-
-function onError(message) {
-  console.warn(message);
-}
-
-export function IOCDetailFetcher({ ioc, index, setIocs }) {
-  const [tagOrCommitId, getTagOrCommitId] = useTagsAndCommitIds(onError);
-  const [iocStatus, getIocStatus] = useIocStatus();
-  const [iocDetails, getIocDetails] = useIOC(ioc.id);
-
-  useEffect(() => {
-    if (ioc.sourceVersion) {
-      getTagOrCommitId(ioc.gitProjectId, ioc.sourceVersion);
-    }
-
-    getIocStatus(ioc.id);
-    getIocDetails(ioc.id);
-  }, [ioc, getTagOrCommitId, getIocStatus, getIocDetails]);
-
-  useEffect(() => {
-    setIocs((iocs) => {
-      iocs[index].sourceVersionShort =
-        tagOrCommitId?.length === 1
-          ? tagOrCommitId[0].shortReference
-          : iocs[index].sourceVersionShort;
-      iocs[index].host = iocs[index].activeDeployment?.host;
-      iocs[index].alertSeverity = iocStatus?.alertSeverity;
-      iocs[index].alerts = iocStatus?.alerts;
-      iocs[index].active = iocStatus?.active ?? iocs[index].active;
-      iocs[index].description = iocDetails?.description;
-      return [...iocs];
-    });
-  }, [index, setIocs, tagOrCommitId, iocStatus, iocDetails]);
-
-  return null;
-}

src/components/IOC/IOCDetailFetcher/index.js

-import { IOCDetailFetcher } from "./IOCDetailFetcher";
-
-export { IOCDetailFetcher };
-export default IOCDetailFetcher;

src/components/IOC/IOCTable/IOCDescription.js

+import React from "react";
+import { useIOC } from "../../../api/SwaggerApi";
+import { Skeleton, Tooltip, Typography } from "@mui/material";
+
+function createIocDescription(description) {
+  return (
+    <>
+      {description ? (
+        <Tooltip
+          title={description}
+          arrow
+          enterDelay={400}
+        >
+          <Typography
+            style={{
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap"
+            }}
+          >
+            {description}
+          </Typography>
+        </Tooltip>
+      ) : (
+        "---"
+      )}
+    </>
+  );
+}
+
+export const IOCDescription = ({ id }) => {
+  const [ioc, , , loading] = useIOC(id);
+
+  if (loading) {
+    return <Skeleton width="100%" />;
+  }
+  return createIocDescription(ioc?.description);
+};

src/components/IOC/IOCTable/IOCStatus.js

+import React from "react";
+import { useIocStatus } from "../../../api/SwaggerApi";
+import { Grid, Skeleton } from "@mui/material";
+import { IOCStatusIcon } from "../IOCIcons";
+
+export const IOCStatus = ({ id, activeDeployment }) => {
+  const [status, , , loading] = useIocStatus(id);
+
+  return (
+    <Grid
+      container
+      direction="column"
+      justifyContent="center"
+      alignItems="center"
+    >
+      {loading ? (
+        <Skeleton
+          variant="circular"
+          height={20}
+          width={20}
+        />
+      ) : (
+        <IOCStatusIcon ioc={{ id, activeDeployment, ...status }} />
+      )}
+    </Grid>
+  );
+};

src/components/IOC/IOCTable/IOCTable.js

 import React from "react";
 import { Table } from "@ess-ics/ce-ui-common";
-import { Grid, Tooltip, Typography, Link } from "@mui/material";
-import { IOCStatusIcon } from "../IOCIcons";
+import { Link } from "@mui/material";
+import { IOCDescription } from "./IOCDescription";
+import { IOCStatus } from "./IOCStatus";
 import { noWrapText } from "../../common/Helper";
 
 const ownIocsColumns = [
@@ -86,108 +87,61 @@ function createHostLink(host) {
   return "---";
 }
 
-function createIocDescription(description) {
-  return (
-    <>
-      {description ? (
-        <Tooltip
-          title={description}
-          arrow
-          enterDelay={400}
-        >
-          <Typography
-            style={{
-              overflow: "hidden",
-              textOverflow: "ellipsis",
-              whiteSpace: "nowrap"
-            }}
-          >
-            {description}
-          </Typography>
-        </Tooltip>
-      ) : (
-        "---"
-      )}
-    </>
-  );
-}
-
 function createTableRowForHostDetails(ioc) {
-  const { id, name, namingName, alertSeverity, description } = ioc;
+  const { id, name, namingName, activeDeployment } = ioc;
 
   return {
     id: id,
     status: (
-      <Grid
-        container
-        direction="column"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <IOCStatusIcon ioc={ioc} />
-      </Grid>
+      <IOCStatus
+        id={ioc.id}
+        activeDeployment={activeDeployment}
+      />
     ),
     namingName: (
       <Link href={`/iocs/${id}`}>{noWrapText(namingName ?? name)}</Link>
     ),
-    discrepancy: alertSeverity === "WARNING",
-    inconsistentState: alertSeverity === "ERROR",
-    description: createIocDescription(description)
+    description: <IOCDescription id={ioc.id} />
   };
 }
 
 function createTableRowForOwnIocs(ioc) {
-  const { id, activeDeployment, namingName, alertSeverity, description } = ioc;
+  const { id, activeDeployment, namingName } = ioc;
 
   return {
     id: id,
     status: (
-      <Grid
-        container
-        direction="column"
-        justifyContent="flex-start"
-        alignItems="center"
-      >
-        <IOCStatusIcon ioc={ioc} />
-      </Grid>
+      <IOCStatus
+        id={ioc.id}
+        activeDeployment={ioc.activeDeployment}
+      />
     ),
     namingName: (
       <Link href={`/iocs/${id}`}>{noWrapText(namingName ?? "---")}</Link>
     ),
+    description: <IOCDescription id={ioc.id} />,
     host: createHostLink(activeDeployment?.host),
-    network: noWrapText(activeDeployment?.host.network || "---"),
-    discrepancy: alertSeverity === "WARNING",
-    inconsistentState: alertSeverity === "ERROR",
-    iocNotDeployed: !ioc.activeDeployment,
-    description: createIocDescription(description)
+    network: noWrapText(activeDeployment?.host.network || "---")
   };
 }
 
 function createTableRowForExploreIocs(ioc) {
-  const { id, namingName, createdBy, alertSeverity, host, description } = ioc;
+  const { id, namingName, activeDeployment } = ioc;
 
   return {
     id: id,
     status: (
-      <Grid
-        container
-        direction="column"
-        justifyContent="center"
-        alignItems="center"
-      >
-        <IOCStatusIcon ioc={ioc} />
-      </Grid>
+      <IOCStatus
+        id={ioc.id}
+        activeDeployment={ioc.activeDeployment}
+      />
     ),
     namingName: (
       <Link href={`/iocs/${id}`}>{noWrapText(namingName ?? "---")}</Link>
     ),
-    host: createHostLink(host),
-    network: noWrapText(host?.network || "---"),
-    createdBy: noWrapText(createdBy || "---"),
-    discrepancy: alertSeverity === "WARNING",
-    inconsistentState: alertSeverity === "ERROR",
-    iocNotDeployed: !ioc.activeDeployment,
-    description: createIocDescription(description)
+    description: <IOCDescription id={ioc.id} />,
+    host: createHostLink(activeDeployment?.host),
+    network: noWrapText(activeDeployment?.host?.network || "---")
   };
 }
 

src/components/IOC/IOCTable/IOCTable.spec.js

@@ -10,8 +10,7 @@ const firstRowData = [
   "VacS-RFQ:SC-IOC-130",
   "Some description",
   "vacs-accv-vm-ioc",
-  "ChannelAccess-FEB",
-  "1.0.0"
+  "ChannelAccess-FEB"
 ];
 
 describe("HostTable", () => {
@@ -31,7 +30,7 @@ describe("HostTable", () => {
       cy.findAllByRole("row")
         .eq(1) // first row is headers, so get next index
         .find(".MuiTypography-noWrap")
-        .should("have.length", textColumns.length - 2);
+        .should("have.length", textColumns.length - 1);
     });
 
     it("Displays correct content in first row", () => {

src/mocks/AppHarness.js

 import React from "react";
 import { SnackbarProvider } from "notistack";
-import { Container, StyledEngineProvider } from "@mui/material";
+import { Container, CssBaseline, StyledEngineProvider } from "@mui/material";
 import { ThemeProvider } from "@mui/material/styles";
 import { theme } from "../style/Theme";
 import { LegacyApiProvider } from "../api/SwaggerApi";
@@ -18,6 +18,7 @@ export function AppHarness({ children, initialHistory = ["/"] }) {
     >
       <StyledEngineProvider injectFirst>
         <ThemeProvider theme={theme}>
+          <CssBaseline />
           <MemoryRouter initialEntries={initialHistory}>
             <DeployAPIProvider>
               <LegacyApiProvider>
@@ -41,7 +42,12 @@ export function RouterHarness({ children, initialHistory = ["/"] }) {
   return (
     <StyledEngineProvider injectFirst>
       <ThemeProvider theme={theme}>
-        <MemoryRouter initialEntries={initialHistory}>{children}</MemoryRouter>
+        <CssBaseline />
+        <MemoryRouter initialEntries={initialHistory}>
+          <DeployAPIProvider>
+            <LegacyApiProvider>{children}</LegacyApiProvider>
+          </DeployAPIProvider>
+        </MemoryRouter>
       </ThemeProvider>
     </StyledEngineProvider>
   );

src/mocks/fixtures/AsyncCombinedIOCs.json

-[
-  {
-    "id": 346,
-    "description": "some description",
-    "namingName": "VacS-RFQ:SC-IOC-130",
-    "createdBy": "krisztianloki",
-    "gitProjectId": 5336,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 3354
-      },
-      "sourceVersion": "1.0.0",
-      "sourceVersionShort": "1.0.0"
-    },
-    "host": {
-      "externalId": 3354,
-      "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
-      "hostName": "vacs-accv-vm-ioc",
-      "network": "ChannelAccess-FEB"
-    },
-    "active": true
-  },
-  {
-    "id": 345,
-    "namingName": "VacS-RFQ:SC-IOC-119",
-    "createdBy": "krisztianloki",
-    "gitProjectId": 5335,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 3354
-      },
-      "sourceVersion": "cc95ff21a09977fd2396ec1999259ec0a5e63147",
-      "sourceVersionShort": "cc95ff21"
-    },
-    "host": {
-      "externalId": 3354,
-      "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
-      "hostName": "vacs-accv-vm-ioc",
-      "network": "ChannelAccess-FEB"
-    },
-    "alert": "ERROR",
-    "alerts": [
-      {
-        "type": "WARNING",
-        "message": "Example alert without link"
-      },
-      {
-        "type": "ERROR",
-        "message": "Example alert with link",
-        "link": "https://google.com"
-      }
-    ],
-    "active": true
-  },
-  {
-    "id": 344,
-    "description": "some description",
-    "namingName": "VacS-RFQ:SC-IOC-110",
-    "createdBy": "krisztianloki",
-    "gitProjectId": 5334,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 3354
-      },
-      "sourceVersion": "9a3585a5bea4372f7d964b7e18b83aa3b1afc61f",
-      "sourceVersionShort": "9a3585a5"
-    },
-    "host": {
-      "externalId": 3354,
-      "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
-      "hostName": "vacs-accv-vm-ioc",
-      "network": "ChannelAccess-FEB"
-    },
-    "alert": "WARNING",
-    "alerts": [
-      {
-        "type": "WARNING",
-        "message": "Example alert warning for VacS-RFQ:SC-IOC-110"
-      }
-    ],
-    "active": true
-  },
-  {
-    "id": 328,
-    "namingName": "RFQ-010:SC-IOC-117",
-    "createdBy": "gabrielfedel",
-    "gitProjectId": 5953,
-    "sourceVersion": null,
-    "activeDeployment": null
-  },
-  {
-    "id": 251,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-015",
-    "createdBy": "lucianocarneiro",
-    "gitProjectId": 5952,
-    "sourceVersion": null,
-    "activeDeployment": null
-  },
-  {
-    "id": 249,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-016",
-    "createdBy": "gabrielfedel",
-    "gitProjectId": 5954,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4205
-      },
-      "sourceVersion": "1.0.1",
-      "sourceVersionShort": "1.0.1"
-    },
-    "host": {
-      "externalId": 4205,
-      "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
-      "hostName": "rfq-rf-vm-ioc",
-      "network": "ChannelAccess-ACC"
-    },
-    "active": true
-  },
-  {
-    "id": 166,
-    "namingName": "RFQ-010:SC-IOC-001",
-    "createdBy": "gabrielfedel",
-    "gitProjectId": 4314,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 2245
-      },
-      "sourceVersion": "3.0.3",
-      "sourceVersionShort": "3.0.3"
-    },
-    "host": {
-      "externalId": 2245,
-      "fqdn": "rfq-llrf1-mtca-ioc.tn.esss.lu.se",
-      "hostName": "rfq-llrf1-mtca-ioc",
-      "network": "ChannelAccess-ACC"
-    },
-    "alert": "ERROR",
-    "alerts": [
-      {
-        "type": "ERROR",
-        "message": "Example alert error for RFQ-010:SC-IOC-001"
-      }
-    ]
-  },
-  {
-    "id": 148,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-977",
-    "createdBy": "krisztianloki",
-    "gitProjectId": 5429,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4178
-      },
-      "sourceVersion": "0.0.2-usb",
-      "sourceVersionShort": "0.0.2-usb"
-    },
-    "host": {
-      "externalId": 4178,
-      "fqdn": "rfq-ipc-01.tn.esss.lu.se",
-      "hostName": "rfq-ipc-01",
-      "network": "ChannelAccess-FEB"
-    },
-    "alert": "WARNING",
-    "alerts": [
-      {
-        "type": "WARNING",
-        "message": "Example alert warning for RFQ-010:SC-IOC-977"
-      }
-    ],
-    "active": true
-  },
-  {
-    "id": 116,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-005",
-    "createdBy": "joaopaulomartins",
-    "gitProjectId": 1697,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4696
-      },
-      "sourceVersion": "1.0.0",
-      "sourceVersionShort": "1.0.0"
-    },
-    "host": {
-      "externalId": 4696,
-      "fqdn": "rfq-rflps-vm-ioc01.tn.esss.lu.se",
-      "hostName": "rfq-rflps-vm-ioc01",
-      "network": "ChannelAccess-ACC"
-    },
-    "active": true
-  },
-  {
-    "id": 76,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-004",
-    "createdBy": "joaopaulomartins",
-    "gitProjectId": 5257,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4205
-      },
-      "sourceVersion": "1.1.0",
-      "sourceVersionShort": "1.1.0"
-    },
-    "host": {
-      "externalId": 4205,
-      "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
-      "hostName": "rfq-rf-vm-ioc",
-      "network": "ChannelAccess-ACC"
-    },
-    "active": true
-  },
-  {
-    "id": 13,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-056",
-    "createdBy": "krisztianloki",
-    "gitProjectId": 5056,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4408
-      },
-      "sourceVersion": "2b8a031d7b698a6944e28408cb17241a7df9ec99",
-      "sourceVersionShort": "2b8a031d"
-    },
-    "host": {
-      "externalId": 4408,
-      "fqdn": "rfq-lob-vm-ioc.tn.esss.lu.se",
-      "hostName": "rfq-lob-vm-ioc",
-      "network": "ChannelAccess-FEB"
-    },
-    "alert": "WARNING",
-    "alerts": [
-      {
-        "type": "WARNING",
-        "message": "Example alert warning for RFQ-010:SC-IOC-056"
-      }
-    ],
-    "active": true
-  },
-  {
-    "id": 10,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-011",
-    "createdBy": "anderslindh",
-    "gitProjectId": 4929,
-    "sourceVersion": "961ebd48020add0282688437ae34dd0974b6fa15",
-    "activeDeployment": null,
-    "sourceVersionShort": "961ebd48"
-  },
-  {
-    "id": 9,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-010",
-    "createdBy": "anderslindh",
-    "gitProjectId": 4875,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4521
-      },
-      "sourceVersion": "0527d4cfa1c64276634961fefa8f480d00faee26",
-      "sourceVersionShort": "0527d4cf"
-    },
-    "host": {
-      "externalId": 4521,
-      "fqdn": "lab-rf-vm-ioc-02.cslab.esss.lu.se",
-      "hostName": "lab-rf-vm-ioc-02",
-      "network": "CSLab-GeneralLab"
-    },
-    "active": true
-  },
-  {
-    "id": 8,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-009",
-    "createdBy": "anderslindh",
-    "gitProjectId": 4947,
-    "sourceVersion": null,
-    "activeDeployment": null
-  },
-  {
-    "id": 6,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-008",
-    "createdBy": "anderslindh",
-    "gitProjectId": 2582,
-    "sourceVersion": null,
-    "activeDeployment": null
-  },
-  {
-    "id": 4,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-007",
-    "createdBy": "anderslindh",
-    "gitProjectId": 4877,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4521
-      },
-      "sourceVersion": "cb065da1b6e5dcde6da091a93799ac8488e1e818",
-      "sourceVersionShort": "cb065da1"
-    },
-    "host": {
-      "externalId": 4521,
-      "fqdn": "lab-rf-vm-ioc-02.cslab.esss.lu.se",
-      "hostName": "lab-rf-vm-ioc-02",
-      "network": "CSLab-GeneralLab"
-    },
-    "active": true
-  },
-  {
-    "id": 3,
-    "description": "some description",
-    "namingName": "RFQ-010:SC-IOC-006",
-    "createdBy": "anderslindh",
-    "gitProjectId": 4335,
-    "activeDeployment": {
-      "host": {
-        "externalHostId": 4205
-      },
-      "sourceVersion": "1.0.0",
-      "sourceVersionShort": "1.0.0"
-    },
-    "host": {
-      "externalId": 4205,
-      "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
-      "hostName": "rfq-rf-vm-ioc",
-      "network": "ChannelAccess-ACC"
-    },
-    "alert": "WARNING",
-    "alerts": [
-      {
-        "type": "WARNING",
-        "message": "Example alert warning RFQ-010:SC-IOC-006"
-      }
-    ],
-    "active": true
-  }
-]

src/mocks/fixtures/IOCStatus.json

+[
+  {
+    "id": 346,
+    "active": true
+  },
+  {
+    "id": 345,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "Example alert without link"
+      },
+      {
+        "type": "ERROR",
+        "message": "Example alert with link",
+        "link": "https://google.com"
+      }
+    ],
+    "active": true
+  },
+  {
+    "id": 344,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "Example alert warning for VacS-RFQ:SC-IOC-110"
+      }
+    ],
+    "active": true
+  },
+  {
+    "id": 328
+  },
+  {
+    "id": 251
+  },
+  {
+    "id": 249,
+    "active": true
+  },
+  {
+    "id": 166,
+    "alerts": [
+      {
+        "type": "ERROR",
+        "message": "Example alert error for RFQ-010:SC-IOC-001"
+      }
+    ]
+  },
+  {
+    "id": 148,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "Example alert warning for RFQ-010:SC-IOC-977"
+      }
+    ],
+    "active": true
+  },
+  {
+    "id": 116,
+    "active": true
+  },
+  {
+    "id": 76,
+    "active": true
+  },
+  {
+    "id": 13,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "Example alert warning for RFQ-010:SC-IOC-056"
+      }
+    ],
+    "active": true
+  },
+  {
+    "id": 10
+  },
+  {
+    "id": 9,
+    "active": true
+  },
+  {
+    "id": 8
+  },
+  {
+    "id": 6
+  },
+  {
+    "id": 4,
+    "active": true
+  },
+  {
+    "id": 3,
+    "alerts": [
+      {
+        "type": "WARNING",
+        "message": "Example alert warning RFQ-010:SC-IOC-006"
+      }
+    ],
+    "active": true
+  }
+]

src/mocks/fixtures/PagedIOCResponse.json

@@ -11,9 +11,13 @@
       "gitProjectId": 5336,
       "activeDeployment": {
         "host": {
-          "externalHostId": 3354
+          "externalHostId": 3354,
+          "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
+          "hostName": "vacs-accv-vm-ioc",
+          "network": "ChannelAccess-FEB"
         },
-        "sourceVersion": "1.0.0"
+        "sourceVersion": "1.0.0",
+        "sourceVersionShort": "1.0.0"
       }
     },
     {
@@ -23,21 +27,30 @@
       "gitProjectId": 5335,
       "activeDeployment": {
         "host": {
-          "externalHostId": 3354
+          "externalHostId": 3354,
+          "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
+          "hostName": "vacs-accv-vm-ioc",
+          "network": "ChannelAccess-FEB"
         },
-        "sourceVersion": "cc95ff21a09977fd2396ec1999259ec0a5e63147"
+        "sourceVersion": "cc95ff21a09977fd2396ec1999259ec0a5e63147",
+        "sourceVersionShort": "cc95ff21"
       }
     },
     {
       "id": 344,
+      "description": "some description",
       "namingName": "VacS-RFQ:SC-IOC-110",
       "createdBy": "krisztianloki",
       "gitProjectId": 5334,
       "activeDeployment": {
         "host": {
-          "externalHostId": 3354
+          "externalHostId": 3354,
+          "fqdn": "vacs-accv-vm-ioc.tn.esss.lu.se",
+          "hostName": "vacs-accv-vm-ioc",
+          "network": "ChannelAccess-FEB"
         },
-        "sourceVersion": "9a3585a5bea4372f7d964b7e18b83aa3b1afc61f"
+        "sourceVersion": "9a3585a5bea4372f7d964b7e18b83aa3b1afc61f",
+        "sourceVersionShort": "9a3585a5"
       }
     },
     {
@@ -46,26 +59,32 @@
       "createdBy": "gabrielfedel",
       "gitProjectId": 5953,
       "sourceVersion": null,
-      "activeDeployment": null
+      "activeDeployment": {}
     },
     {
       "id": 251,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-015",
       "createdBy": "lucianocarneiro",
       "gitProjectId": 5952,
       "sourceVersion": null,
-      "activeDeployment": null
+      "activeDeployment": {}
     },
     {
       "id": 249,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-016",
       "createdBy": "gabrielfedel",
       "gitProjectId": 5954,
-      "sourceVersion": "1.0.1",
       "activeDeployment": {
         "host": {
-          "externalHostId": 4205
-        }
+          "externalHostId": 4205,
+          "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
+          "hostName": "rfq-rf-vm-ioc",
+          "network": "ChannelAccess-ACC"
+        },
+        "sourceVersion": "1.0.1",
+        "sourceVersionShort": "1.0.1"
       }
     },
     {
@@ -75,117 +94,160 @@
       "gitProjectId": 4314,
       "activeDeployment": {
         "host": {
-          "externalHostId": 2245
+          "externalHostId": 2245,
+          "fqdn": "rfq-llrf1-mtca-ioc.tn.esss.lu.se",
+          "hostName": "rfq-llrf1-mtca-ioc",
+          "network": "ChannelAccess-ACC"
         },
-        "sourceVersion": "3.0.3"
+        "sourceVersion": "3.0.3",
+        "sourceVersionShort": "3.0.3"
       }
     },
     {
       "id": 148,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-977",
       "createdBy": "krisztianloki",
       "gitProjectId": 5429,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4178
+          "externalHostId": 4178,
+          "fqdn": "rfq-ipc-01.tn.esss.lu.se",
+          "hostName": "rfq-ipc-01",
+          "network": "ChannelAccess-FEB"
         },
-        "sourceVersion": "0.0.2-usb"
+        "sourceVersion": "0.0.2-usb",
+        "sourceVersionShort": "0.0.2-usb"
       }
     },
     {
       "id": 116,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-005",
       "createdBy": "joaopaulomartins",
       "gitProjectId": 1697,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4696
+          "externalHostId": 4696,
+          "fqdn": "rfq-rflps-vm-ioc01.tn.esss.lu.se",
+          "hostName": "rfq-rflps-vm-ioc01",
+          "network": "ChannelAccess-ACC"
         },
-        "sourceVersion": "1.0.0"
+        "sourceVersion": "1.0.0",
+        "sourceVersionShort": "1.0.0"
       }
     },
     {
       "id": 76,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-004",
       "createdBy": "joaopaulomartins",
       "gitProjectId": 5257,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4205
+          "externalHostId": 4205,
+          "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
+          "hostName": "rfq-rf-vm-ioc",
+          "network": "ChannelAccess-ACC"
         },
-        "sourceVersion": "1.1.0"
+        "sourceVersion": "1.1.0",
+        "sourceVersionShort": "1.1.0"
       }
     },
     {
       "id": 13,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-056",
       "createdBy": "krisztianloki",
       "gitProjectId": 5056,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4408
+          "externalHostId": 4408,
+          "fqdn": "rfq-lob-vm-ioc.tn.esss.lu.se",
+          "hostName": "rfq-lob-vm-ioc",
+          "network": "ChannelAccess-FEB"
         },
-        "sourceVersion": "2b8a031d7b698a6944e28408cb17241a7df9ec99"
+        "sourceVersion": "2b8a031d7b698a6944e28408cb17241a7df9ec99",
+        "sourceVersionShort": "2b8a031d"
       }
     },
     {
       "id": 10,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-011",
       "createdBy": "anderslindh",
       "gitProjectId": 4929,
       "sourceVersion": "961ebd48020add0282688437ae34dd0974b6fa15",
-      "activeDeployment": null
+      "activeDeployment": {},
+      "sourceVersionShort": "961ebd48"
     },
     {
       "id": 9,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-010",
       "createdBy": "anderslindh",
       "gitProjectId": 4875,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4521
+          "externalHostId": 4521,
+          "fqdn": "lab-rf-vm-ioc-02.cslab.esss.lu.se",
+          "hostName": "lab-rf-vm-ioc-02",
+          "network": "CSLab-GeneralLab"
         },
-        "sourceVersion": "0527d4cfa1c64276634961fefa8f480d00faee26"
+        "sourceVersion": "0527d4cfa1c64276634961fefa8f480d00faee26",
+        "sourceVersionShort": "0527d4cf"
       }
     },
     {
       "id": 8,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-009",
       "createdBy": "anderslindh",
       "gitProjectId": 4947,
       "sourceVersion": null,
-      "activeDeployment": null
+      "activeDeployment": {}
     },
     {
       "id": 6,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-008",
       "createdBy": "anderslindh",
       "gitProjectId": 2582,
       "sourceVersion": null,
-      "activeDeployment": null
+      "activeDeployment": {}
     },
     {
       "id": 4,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-007",
       "createdBy": "anderslindh",
       "gitProjectId": 4877,
       "activeDeployment": {
         "host": {
-          "externalHostId": 4521
+          "externalHostId": 4521,
+          "fqdn": "lab-rf-vm-ioc-02.cslab.esss.lu.se",
+          "hostName": "lab-rf-vm-ioc-02",
+          "network": "CSLab-GeneralLab"
         },
-        "sourceVersion": "cb065da1b6e5dcde6da091a93799ac8488e1e818"
+        "sourceVersion": "cb065da1b6e5dcde6da091a93799ac8488e1e818",
+        "sourceVersionShort": "cb065da1"
       }
     },
     {
       "id": 3,
+      "description": "some description",
       "namingName": "RFQ-010:SC-IOC-006",
       "createdBy": "anderslindh",
       "gitProjectId": 4335,
-      "sourceVersion": "1.0.0",
       "activeDeployment": {
         "host": {
-          "externalHostId": 4205
-        }
+          "externalHostId": 4205,
+          "fqdn": "rfq-rf-vm-ioc.tn.esss.lu.se",
+          "hostName": "rfq-rf-vm-ioc",
+          "network": "ChannelAccess-ACC"
+        },
+        "sourceVersion": "1.0.0",
+        "sourceVersionShort": "1.0.0"
       }
     }
   ]

src/mocks/mockAPI.js

@@ -174,6 +174,25 @@ function getProcservLogs(req) {
   return { body };
 }
 
+function fetchIocStatus(req) {
+  const params = getParameters(req, "/monitoring/status/:id");
+  const data = require("./fixtures/IOCStatus.json");
+  const { id, alertSeverity, alerts, active } = data.find(
+    (x) => `${x.id}` === params.id
+  );
+
+  const body = {
+    iocId: id,
+    alertSeverity,
+    alerts,
+    active
+  };
+  console.debug("fetchIocStatus", data, params, body);
+  const status = body ? 200 : 404;
+
+  return { body, status };
+}
+
 function getStatistics(req) {
   const body = require("./fixtures/GeneralStatisticsResponse.json");
   return { body };
@@ -219,11 +238,6 @@ function calculateStatistics(req) {
   }
 }
 
-function listOwnIocsWithAlarms(req) {
-  const body = require("./fixtures/AsyncCombinedIOCs.json");
-  return { body };
-}
-
 function fetchIOCByName(req) {
   const body = require("./fixtures/NamingNames.json");
   return { body };
@@ -240,9 +254,8 @@ const mockAPI = {
   },
   iocs: {
     listIOCs,
-    createIoc,
     getIOC,
-    listOwnIocsWithAlarms
+    createIoc
   },
   deployments: {
     getDeployment,
@@ -259,7 +272,8 @@ const mockAPI = {
     listProjects
   },
   monitoring: {
-    getProcservLogs
+    getProcservLogs,
+    fetchIocStatus
   },
   statistics: {
     getStatistics,
@@ -313,12 +327,6 @@ export const apiHandlers = [
   makeHandler("GET", qRegExp(".*/iocs"), mockAPI.iocs.listIOCs),
   makeHandler("POST", qRegExp(".*/iocs"), mockAPI.iocs.createIoc),
   makeHandler("GET", qRegExp(".*/iocs/[0-9]+"), mockAPI.iocs.getIOC),
-  makeHandler(
-    "GET",
-    qRegExp(".*/iocs/my_iocs_with_alarms"),
-    mockAPI.iocs.listOwnIocsWithAlarms
-  ),
-  // git
   makeHandler(
     "GET",
     qRegExp(".*/git_helper/user_info"),
@@ -375,6 +383,11 @@ export const apiHandlers = [
     mockAPI.monitoring.getProcservLogs,
     auth
   ),
+  makeHandler(
+    "GET",
+    qRegExp(".*/monitoring/status/.+"),
+    mockAPI.monitoring.fetchIocStatus
+  ),
 
   // statistics
   makeHandler(

src/stories/components/common/IOC/IOCTable.stories.js

 import React from "react";
 import { IOCTable } from "../../../../components/IOC/IOCTable";
-import { Container } from "@mui/material";
+import { Box } from "@mui/material";
 import iocs from "../../../../mocks/fixtures/PagedIOCResponse.json";
-import asyncCombinedIOCs from "../../../../mocks/fixtures/AsyncCombinedIOCs.json";
+import { rest } from "msw";
+import { handlers } from "../../../../mocks/handlers";
 import { RouterHarness } from "../../../../mocks/AppHarness";
-import { disabledTable } from "../../../utils/common-args";
+import {
+  hideStorybookControls,
+  paginationNoResults
+} from "../../../utils/common-args";
 
 export default {
   title: "IOC/IOCTable",
@@ -13,23 +17,21 @@ export default {
       options: ["explore", "host"],
       control: { type: "radio" }
     },
-    iocs: disabledTable,
-    totalCount: disabledTable,
-    rowsPerPage: disabledTable,
-    lazyParams: disabledTable,
-    columnSort: disabledTable,
-    setLazyParams: disabledTable,
-    setColumnSort: disabledTable
+    iocs: hideStorybookControls,
+    pagination: hideStorybookControls,
+    onPage: hideStorybookControls
   }
 };
 
-const Template = (args) => (
-  <RouterHarness>
-    <Container>
-      <IOCTable {...args} />
-    </Container>
-  </RouterHarness>
-);
+const Template = (args) => {
+  return (
+    <RouterHarness>
+      <Box height="90vh">
+        <IOCTable {...args} />
+      </Box>
+    </RouterHarness>
+  );
+};
 
 export const Empty = (args) => <Template {...args} />;
 
@@ -37,13 +39,8 @@ Empty.args = {
   rowType: "explore",
   loading: false,
   iocs: [],
-  paginator: true,
-  totalCount: 0,
-  rowsPerPage: [5, 10, 20, 50, 100],
-  lazyParams: { rows: 10, page: 0 },
-  columnSort: { sortField: null, sortOrder: null },
-  setLazyParams: () => {},
-  setColumnSort: () => {}
+  pagination: paginationNoResults,
+  onPage: () => {}
 };
 
 export const EmptyLoading = (args) => <Template {...args} />;
@@ -57,17 +54,24 @@ export const BeforeAsync = (args) => <Template {...args} />;
 
 BeforeAsync.args = {
   ...Empty.args,
-  totalCount: iocs.totalCount,
+  pagination: { ...paginationNoResults, totalCount: iocs.totalCount },
   iocs: iocs.iocList
 };
-
 BeforeAsync.argTypes = {
-  loading: disabledTable
+  loading: hideStorybookControls
+};
+BeforeAsync.parameters = {
+  msw: {
+    handlers: [
+      rest.get("*/iocs/*", (req, res, ctx) => res(ctx.delay("infinite"))),
+      rest.get("*/monitoring/status/*", (req, res, ctx) =>
+        res(ctx.delay("infinite"))
+      ),
+      ...handlers
+    ]
+  }
 };
 
 export const AfterAsync = (args) => <Template {...args} />;
-
-AfterAsync.args = {
-  ...BeforeAsync.args,
-  iocs: asyncCombinedIOCs
-};
+AfterAsync.args = { ...BeforeAsync.args };
+AfterAsync.argTypes = { ...BeforeAsync.argTypes };

src/stories/components/common/host/HostTable.stories.js

@@ -3,18 +3,18 @@ import { Container } from "@mui/material";
 import hosts from "../../../../mocks/fixtures/PagedCSEntryHostResponse.json";
 import { HostTable } from "../../../../components/host/HostTable";
 import { RouterHarness } from "../../../../mocks/AppHarness";
-import { disabledTable } from "../../../utils/common-args";
+import { hideStorybookControls } from "../../../utils/common-args";
 
 export default {
   title: "Host/HostTable",
   argTypes: {
-    hosts: disabledTable,
-    totalCount: disabledTable,
-    rowsPerPage: disabledTable,
-    lazyParams: disabledTable,
-    columnSort: disabledTable,
-    setLazyParams: disabledTable,
-    setColumnSort: disabledTable
+    hosts: hideStorybookControls,
+    totalCount: hideStorybookControls,
+    rowsPerPage: hideStorybookControls,
+    lazyParams: hideStorybookControls,
+    columnSort: hideStorybookControls,
+    setLazyParams: hideStorybookControls,
+    setColumnSort: hideStorybookControls
   }
 };
 
@@ -55,7 +55,7 @@ Populated.args = {
 };
 
 Populated.argTypes = {
-  totalCount: disabledTable,
-  hosts: disabledTable,
-  loading: disabledTable
+  totalCount: hideStorybookControls,
+  hosts: hideStorybookControls,
+  loading: hideStorybookControls
 };

src/stories/components/common/job/JobTable.stories.js

 import React from "react";
 import { RouterHarness } from "../../../../mocks/AppHarness";
 import { JobTable } from "../../../../components/Job/JobTable";
-import { disabledTable } from "../../../utils/common-args";
+import { hideStorybookControls } from "../../../utils/common-args";
 import { Container } from "@mui/material";
 import operationList from "../../../../mocks/fixtures/OperationList.json";
 
 export default {
   title: "Jobs/JobTable",
   argTypes: {
-    jobs: disabledTable,
-    totalCount: disabledTable,
-    rowsPerPage: disabledTable,
-    lazyParams: disabledTable,
-    columnSort: disabledTable,
-    setLazyParams: disabledTable,
-    setColumnSort: disabledTable
+    jobs: hideStorybookControls,
+    totalCount: hideStorybookControls,
+    rowsPerPage: hideStorybookControls,
+    lazyParams: hideStorybookControls,
+    columnSort: hideStorybookControls,
+    setLazyParams: hideStorybookControls,
+    setColumnSort: hideStorybookControls
   }
 };
 
@@ -56,7 +56,7 @@ Populated.args = {
 };
 
 Populated.argTypes = {
-  totalCount: disabledTable,
-  hosts: disabledTable,
-  loading: disabledTable
+  totalCount: hideStorybookControls,
+  hosts: hideStorybookControls,
+  loading: hideStorybookControls
 };

src/stories/utils/common-args.js

-export const disabledTable = {
+// see https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
+export const hideStorybookControls = {
   table: {
     disable: true
   }
 };
+
+export const paginationNoResults = {
+  totalCount: 0,
+  rowsPerPageOptions: [5, 10, 20, 50, 100],
+  rows: 10,
+  page: 0
+};