combined host and summary columns to a new details column

src/components/Job/JobDetails.tsx

@@ -16,14 +16,11 @@ import {
 } from "@ess-ics/ce-ui-common";
 import { JobBadge } from "./JobBadge";
 import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
-import { JobGitRefIcon } from "./JobTable/JobGitRefIcon";
-import { JobGitRefLink } from "./JobTable/JobGitRefLink";
-import { AWXJobDetails, Status } from "../../api/DataTypes";
-
-interface JobDetailsProps {
-  operation: OperationDetails;
-  job: AwxJobDetails;
-}
+import { JobGitRefIcon } from "./JobGitRefIcon";
+import { JobGitRefLink } from "./JobGitRefLink";
+import AccessControl from "../auth/AccessControl";
+import { AWXJobDetails } from "../../api/DataTypes";
+import { JobStatusStepper } from "./JobStatus";
 
 const createAlert = (type: Status, message: string) => {
   return {

src/components/Job/JobTable/JobGitRefIcon.js → src/components/Job/JobGitRefIcon.js

 import { useContext, useMemo } from "react";
-import { apiContext } from "../../../api/DeployApi";
+import { apiContext } from "../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
 import { Skeleton } from "@mui/material";
-import { GitRefTypeIcon } from "../../common/Git/GitRefTypeIcon";
+import { GitRefTypeIcon } from "../common/Git/GitRefTypeIcon";
 
-export const JobGitRefIcon = ({ job, fontSize }) => {
+export const JobGitRefIcon = ({ job, fontSize = null }) => {
   const client = useContext(apiContext);
   const params = useMemo(
     () => ({

src/components/Job/JobTable/JobGitRefLink.js → src/components/Job/JobGitRefLink.js

 import { useContext, useMemo } from "react";
-import { GitRefLink } from "../../common/Git/GitRefLink";
-import { apiContext } from "../../../api/DeployApi";
+import { GitRefLink } from "../common/Git/GitRefLink";
+import { apiContext } from "../../api/DeployApi";
 import { useAPIMethod } from "@ess-ics/ce-ui-common";
 import { Skeleton } from "@mui/material";
 

src/components/Job/JobRevisionChip.tsx

+import { PagedOperationResponse } from "../../store/deployApi";
+import { Chip } from "@mui/material";
+import { JobGitRefIcon } from "./JobGitRefIcon";
+import { JobGitRefLink } from "./JobGitRefLink";
+
+interface JobRevisionChipProps {
+  job: PagedOperationResponse;
+}
+
+export const JobRevisionChip = ({ job }: JobRevisionChipProps) => {
+  return (
+    <Chip
+      sx={{
+        padding: "8px",
+        gap: "4px",
+        "& .MuiChip-label": {
+          paddingLeft: "0",
+          paddingRight: "0"
+        }
+      }}
+      size="small"
+      icon={<JobGitRefIcon job={job} />}
+      label={
+        <JobGitRefLink
+          job={job}
+          disableExternalLinkIcon
+        />
+      }
+    />
+  );
+};

src/components/Job/JobTable/JobDetailsColumn.js

+import { Stack, Typography } from "@mui/material";
+import { InternalLink } from "@ess-ics/ce-ui-common";
+import { JobTypeIcon } from "../JobIcons";
+import { JobRevisionChip } from "../JobRevisionChip";
+
+export const JobDetailsColumn = ({ job, colorStyle }) => {
+  return (
+    <Stack>
+      <JobTypeIcon
+        type={job.type}
+        colorStyle={colorStyle}
+        labelPosition="right"
+      />
+      {/* TODO: Fix hard coded job types in next commit */}
+      {job.type !== "BATCH_DEPLOY" || job.type !== "BATCH_UNDEPLOY" ? (
+        <Stack>
+          <Stack
+            flexDirection="row"
+            gap={1}
+            alignItems="center"
+          >
+            <InternalLink
+              to={`/iocs/${job.iocId}`}
+              label={`IOC Details, ${job.iocName}`}
+            >
+              {job.iocName}
+            </InternalLink>
+            {job.type === "DEPLOY" && <JobRevisionChip job={job} />}
+          </Stack>
+          <Stack
+            flexDirection="row"
+            gap={1}
+            alignItems="baseline"
+          >
+            <InternalLink
+              to={`/hosts/${job?.host?.hostId}`}
+              label={`Host details, ${job.host?.hostName}`}
+            >
+              {job.host.hostName}
+            </InternalLink>
+            <Typography variant="body2">{job.host.network}</Typography>
+          </Stack>
+        </Stack>
+      ) : (
+        <Stack>
+          <Typography
+            variant="body2"
+            sx={{ width: "30px" }}
+          >
+            {job.noOfIOCs} IOCs
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{ width: "30px" }}
+          >
+            {job.noOfHosts} Hosts
+          </Typography>
+        </Stack>
+      )}
+    </Stack>
+  );
+};

src/components/Job/JobTable/JobHostColumn.js

-import { Stack, Typography } from "@mui/material";
-import { InternalLink } from "@ess-ics/ce-ui-common";
-
-export const JobHostColumn = ({ job }) => {
-  if (job.host?.hostName) {
-    return (
-      <Stack>
-        <InternalLink
-          to={`/hosts/${job?.host?.hostId}`}
-          label={`Host details, ${job.host?.hostName}`}
-        >
-          {job.host.hostName}
-        </InternalLink>
-        <Typography variant="body2">{job.host.network}</Typography>
-      </Stack>
-    );
-  }
-
-  return null;
-};

src/components/Job/JobTable/JobSummaryColumn.js

-import { Chip, Stack } from "@mui/material";
-import { JobGitRefLink } from "./JobGitRefLink";
-import { JobTypeIcon } from "../JobIcons";
-import { InternalLink } from "@ess-ics/ce-ui-common";
-import { JobGitRefIcon } from "./JobGitRefIcon";
-
-export const JobSummaryColumn = ({ job, colorStyle }) => {
-  return (
-    <Stack>
-      <JobTypeIcon
-        type={job.type}
-        colorStyle={colorStyle}
-        labelPosition="right"
-      />
-      <InternalLink
-        to={`/iocs/${job.iocId}`}
-        label={`IOC Details, ${job.iocName}`}
-      >
-        {job.iocName}
-      </InternalLink>
-      <Stack
-        flexDirection="row"
-        gap={0.5}
-        alignItems="center"
-      >
-        <InternalLink
-          to={`/jobs/${job?.id}`}
-          label={`Job Details, ID ${job.id}`}
-        >
-          {`#${job.id}`}
-        </InternalLink>
-        {job.type === "DEPLOY" ? (
-          <Chip
-            sx={{
-              padding: "8px",
-              gap: "4px",
-              "& .MuiChip-label": {
-                paddingLeft: "0",
-                paddingRight: "0"
-              }
-            }}
-            size="small"
-            icon={<JobGitRefIcon job={job} />}
-            label={
-              <JobGitRefLink
-                job={job}
-                disableExternalLinkIcon
-              />
-            }
-          />
-        ) : null}
-      </Stack>
-    </Stack>
-  );
-};