refactoring and cleanup of host details view

src/components/Job/JobTable/JobTable.js

@@ -16,7 +16,8 @@ const defaultColumns = [
     width: "100%"
   },
   {
-    field: "host"
+    field: "host",
+    headerName: "Host"
   },
   {
     field: "user",

src/views/host/details/HostDetailsView.js

@@ -49,16 +49,12 @@ export function HostDetailsView({ hostId, host }) {
     }
   }, [setUrlState, urlState]);
 
-  const handleClick = (event) => {
-    navigate(-1);
-  };
-
   return (
     <Stack gap={2}>
       <Box>
         <IconButton
           color="inherit"
-          onClick={handleClick}
+          onClick={() => navigate(-1)}
           size="large"
         >
           <ArrowBackIcon />
@@ -66,89 +62,78 @@ export function HostDetailsView({ hostId, host }) {
       </Box>
       {host ? (
         <>
-          <AlertBannerList alerts={host?.alerts ?? []} />
+          <AlertBannerList alerts={host.alerts ?? []} />
           <HostBadge host={host} />
-        </>
-      ) : null}
-      <Stack>
-        <HostIocSection
-          hostId={hostId}
-          rows={deserialize(urlState.iocs_rows)}
-          page={deserialize(urlState.iocs_page)}
-          onUrlStateChange={(params) => setUrlState(params)}
-        />
-      </Stack>
-      {hostId ? (
-        <HostJobsSection
-          hostId={hostId}
-          rows={deserialize(urlState.job_log_rows)}
-          page={deserialize(urlState.job_log_page)}
-          expanded={deserialize(urlState.job_log_open)}
-          onUrlStateChange={(params) => setUrlState(params)}
-        />
-      ) : null}
+          <Stack>
+            <HostIocSection
+              hostId={hostId}
+              rows={deserialize(urlState.iocs_rows)}
+              page={deserialize(urlState.iocs_page)}
+              onUrlStateChange={(params) => setUrlState(params)}
+            />
+          </Stack>
+          <HostJobsSection
+            hostId={hostId}
+            rows={deserialize(urlState.job_log_rows)}
+            page={deserialize(urlState.job_log_page)}
+            expanded={deserialize(urlState.job_log_open)}
+            onUrlStateChange={(params) => setUrlState(params)}
+          />
 
-      <AccessControl
-        allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-        renderNoAccess={() => <></>}
-      >
-        {host ? (
-          <SimpleAccordion
-            summary="Host details"
-            expanded={deserialize(urlState.details_open)}
-            onChange={(event, expanded) =>
-              setUrlState({ details_open: serialize(expanded) })
-            }
-            sx={{ marginTop: "0 !important" }}
+          <AccessControl
+            allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
+            renderNoAccess={() => <></>}
           >
-            <HostDetailsTable host={host} />
-          </SimpleAccordion>
-        ) : null}
-      </AccessControl>
-
-      <AccessControl
-        allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
-        renderNoAccess={() => <></>}
-      >
-        <Stack gap={2}>
-          <Typography variant="h3">Host log stream</Typography>
-          {host ? (
-            <LokiPanel
-              host={host}
-              isSyslog
-              isDeployed
-            />
-          ) : null}
-        </Stack>
-      </AccessControl>
-      <KeyValueTable
-        obj={{
-          "Host Configuration": (
-            <ExternalLink
-              href={
-                host?.netBoxHost.vm
-                  ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
-                  : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`
+            <SimpleAccordion
+              summary="Host details"
+              expanded={deserialize(urlState.details_open)}
+              onChange={(_, expanded) =>
+                setUrlState({ details_open: serialize(expanded) })
               }
-              aria-label="Host Configuration"
-            >
-              {" "}
-              {host?.netBoxHost.vm
-                ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
-                : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`}
-            </ExternalLink>
-          ),
-          "Host Metrics": (
-            <ExternalLink
-              href={`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.netBoxHost.fqdn}`}
-              aria-label="Host Metrics"
+              sx={{ marginTop: "0 !important" }}
             >
-              {`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.netBoxHost.fqdn}`}
-            </ExternalLink>
-          )
-        }}
-        variant="overline"
-      />
+              <HostDetailsTable host={host} />
+            </SimpleAccordion>
+
+            <Stack gap={2}>
+              <Typography variant="h3">Host log stream</Typography>
+              <LokiPanel
+                host={host}
+                isSyslog
+                isDeployed
+              />
+            </Stack>
+          </AccessControl>
+          <KeyValueTable
+            obj={{
+              "Host Configuration": (
+                <ExternalLink
+                  href={
+                    host?.netBoxHost.vm
+                      ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
+                      : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`
+                  }
+                  aria-label="Host Configuration"
+                >
+                  {" "}
+                  {host?.netBoxHost.vm
+                    ? `${window.NETBOX_ADDRESS}/virtualization/virtual-machines/${host?.netBoxHost.id}`
+                    : `${window.NETBOX_ADDRESS}/dcim/devices/${host?.netBoxHost.id}`}
+                </ExternalLink>
+              ),
+              "Host Metrics": (
+                <ExternalLink
+                  href={`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.netBoxHost.fqdn}`}
+                  aria-label="Host Metrics"
+                >
+                  {`https://grafana.tn.esss.lu.se/d/5zJT23xWz/node-exporter-full?orgId=1&var-node=${host?.netBoxHost.fqdn}`}
+                </ExternalLink>
+              )
+            }}
+            variant="overline"
+          />
+        </>
+      ) : null}
     </Stack>
   );
 }