From d51f16d515006ea6c9f54037a82e9e2ad018bb39 Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Mon, 20 Jan 2025 13:18:20 +0100
Subject: [PATCH] generalized JobHost to be more reusable
---
src/components/Job/JobDetailsBatchJob.tsx | 7 +-
src/components/Job/JobDetailsSingleJob.tsx | 28 +++--
src/components/Job/JobDetailsTable.tsx | 114 ------------------
src/components/Job/JobHost.tsx | 17 ++-
.../Job/JobTable/JobDetailsColumn.tsx | 19 ++-
5 files changed, 38 insertions(+), 147 deletions(-)
delete mode 100644 src/components/Job/JobDetailsTable.tsx
diff --git a/src/components/Job/JobDetailsBatchJob.tsx b/src/components/Job/JobDetailsBatchJob.tsx
index cbb02c58..f4b3d70e 100644
--- a/src/components/Job/JobDetailsBatchJob.tsx
+++ b/src/components/Job/JobDetailsBatchJob.tsx
@@ -58,7 +58,12 @@ const createRow = (job: JobDetails, action: string | undefined) => {
</Stack>
</Stack>
),
- host: <JobHost job={job} />
+ host: (
+ <JobHost
+ url={job.host?.externalIdValid ? job.host.hostId : undefined}
+ label={job.host?.fqdn}
+ />
+ )
};
};
diff --git a/src/components/Job/JobDetailsSingleJob.tsx b/src/components/Job/JobDetailsSingleJob.tsx
index e60018e1..7ca67c38 100644
--- a/src/components/Job/JobDetailsSingleJob.tsx
+++ b/src/components/Job/JobDetailsSingleJob.tsx
@@ -8,13 +8,13 @@ interface JobDetailsSingleJobProps {
job: JobDetails;
}
-const getRevision = (operation: JobDetails) => {
+const getRevision = (job: JobDetails) => {
return {
revision:
- operation.gitReference && operation.gitProjectId ? (
+ job.gitReference && job.gitProjectId ? (
<JobRevisionChip
- gitReference={operation.gitReference}
- gitProjectId={operation.gitProjectId}
+ gitReference={job.gitReference}
+ gitProjectId={job.gitProjectId}
/>
) : (
"Unknown"
@@ -22,21 +22,23 @@ const getRevision = (operation: JobDetails) => {
};
};
-const getSingleOperationFields = (
- operation: JobDetails,
- isDeployJob: boolean
-) => {
+const getSingleOperationFields = (job: JobDetails, isDeployJob: boolean) => {
return {
ioc: (
<InternalLink
- to={`/iocs/${operation.iocName}`}
- label={`IOC details, ${operation.iocName}`}
+ to={`/iocs/${job.iocName}`}
+ label={`IOC details, ${job.iocName}`}
>
- {operation.iocName}
+ {job.iocName}
</InternalLink>
),
- ...(isDeployJob && getRevision(operation)),
- host: <JobHost job={operation} />
+ ...(isDeployJob && getRevision(job)),
+ host: (
+ <JobHost
+ url={job.host?.externalIdValid ? job.host.hostId : undefined}
+ label={job.host?.fqdn}
+ />
+ )
};
};
diff --git a/src/components/Job/JobDetailsTable.tsx b/src/components/Job/JobDetailsTable.tsx
deleted file mode 100644
index 2832645a..00000000
--- a/src/components/Job/JobDetailsTable.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import { useMemo } from "react";
-import {
- EllipsisText,
- InternalLink,
- Table,
- SimpleAccordion
-} from "@ess-ics/ce-ui-common";
-import { Typography, Stack } from "@mui/material";
-import { getNoOfIOCs, getNoOfHosts, isBatchJob } from "./JobUtils";
-import { JobRevisionChip } from "./JobRevisionChip";
-import { JobHost } from "./JobHost";
-import { JobDetails, JobDetailsEntry } from "../../store/deployApi";
-
-const columns = [
- {
- field: "ioc",
- headerName: "IOC",
- flex: 1
- },
- {
- field: "revision",
- headerName: "Revision",
- flex: 1
- },
- {
- field: "host",
- headerName: "Host",
- flex: 1
- }
-];
-
-const createRow = (job: JobDetailsEntry) => {
- const { iocId, iocName, host, gitReference, gitProjectId } = job;
- return {
- id: `${iocId}${host?.hostId}`,
- ioc: (
- <InternalLink
- to={`/iocs/${iocId}`}
- label={`Ioc details, ${iocName}`}
- width="100%"
- >
- <EllipsisText>{iocName}</EllipsisText>
- </InternalLink>
- ),
- host: <JobHost job={job} />,
- revision: gitReference && gitProjectId && (
- <JobRevisionChip
- gitReference={gitReference}
- gitProjectId={gitProjectId}
- />
- )
- };
-};
-
-export const JobDetailsTable = ({ operation }: { operation: JobDetails }) => {
- const isBatchOperation = isBatchJob(operation.action);
-
- const noOfIOCs = useMemo(() => {
- if (isBatchOperation) {
- return getNoOfIOCs(operation.jobs);
- }
- }, [operation, isBatchOperation]);
-
- const noOfHosts = useMemo(() => {
- if (isBatchOperation) {
- return getNoOfHosts(operation.jobs);
- }
- }, [operation, isBatchOperation]);
-
- return (
- <>
- {isBatchJob(operation.action) ? (
- <SimpleAccordion
- summary={
- <Stack
- flexDirection="row"
- alignItems="end"
- sx={{ width: "100%" }}
- gap={1}
- >
- {" "}
- <Typography
- component="h2"
- variant="h3"
- >
- Batch
- </Typography>
- <Typography
- variant="body2"
- sx={{ fontWeight: "600", marginRight: "10px" }}
- >
- {noOfIOCs} {noOfIOCs && noOfIOCs > 1 ? "IOCs" : "IOC"}
- {", "}
- {noOfHosts} {noOfHosts && noOfHosts > 1 ? "Hosts" : "Host"}
- </Typography>
- </Stack>
- }
- >
- <Table
- columns={columns}
- disableColumnSorting
- rows={operation?.jobs?.map((job) => createRow(job))}
- />
- </SimpleAccordion>
- ) : (
- <Table
- columns={columns}
- disableColumnSorting
- rows={[operation].map((job) => createRow(job))}
- />
- )}
- </>
- );
-};
diff --git a/src/components/Job/JobHost.tsx b/src/components/Job/JobHost.tsx
index 465f26a7..285a9c09 100644
--- a/src/components/Job/JobHost.tsx
+++ b/src/components/Job/JobHost.tsx
@@ -1,28 +1,27 @@
import { EllipsisText, InternalLink } from "@ess-ics/ce-ui-common";
import { Typography } from "@mui/material";
-import { JobDetails } from "../../store/deployApi";
interface JobHostProps {
- job: JobDetails;
+ url: string | undefined;
+ label: string | undefined;
}
-export const JobHost = ({ job }: JobHostProps) => {
+export const JobHost = ({ url, label }: JobHostProps) => {
// host is resolvable => show link for users
- if (job?.host?.hostId && job?.host?.externalIdValid) {
+ if (url) {
return (
<InternalLink
- to={`/hosts/${job.host.hostId}`}
- label={`Host Details, ${job.host.fqdn}`}
+ to={`/hosts/${url}`}
+ label={`Host Details, ${label}`}
width="100%"
>
- <EllipsisText>{job.host.fqdn}</EllipsisText>
+ <EllipsisText>{label}</EllipsisText>
</InternalLink>
);
}
- // gray out hostname if it is from cache
return (
<Typography color="gray">
- <EllipsisText>{job?.host?.fqdn}</EllipsisText>
+ <EllipsisText>{label}</EllipsisText>
</Typography>
);
};
diff --git a/src/components/Job/JobTable/JobDetailsColumn.tsx b/src/components/Job/JobTable/JobDetailsColumn.tsx
index 7354a06f..84d75a57 100644
--- a/src/components/Job/JobTable/JobDetailsColumn.tsx
+++ b/src/components/Job/JobTable/JobDetailsColumn.tsx
@@ -10,6 +10,7 @@ import {
} from "../JobUtils";
import { ActionTypeIconText } from "../JobIcons";
import { JobRevisionChip } from "../JobRevisionChip";
+import { JobHost } from "../JobHost";
export const JobDetailsColumn = ({ job }: { job: Job }) => {
const isBatchOperation = isBatchJob(job.action);
@@ -69,16 +70,14 @@ export const JobDetailsColumn = ({ job }: { job: Job }) => {
flexWrap="wrap"
>
<Box sx={{ minWidth: "112px" }}>
- {!checkHostExistsLoading && isSuccess ? (
- <InternalLink
- to={`/hosts/${job?.host?.hostId}`}
- label={`Host details, ${job.host?.hostName}`}
- >
- {job.host?.hostName}
- </InternalLink>
- ) : (
- <Typography>{job.host?.hostName}</Typography>
- )}
+ <JobHost
+ url={
+ !checkHostExistsLoading && isSuccess
+ ? job?.host?.hostId
+ : undefined
+ }
+ label={job.host?.hostName}
+ />
</Box>
<Typography variant="body2">{job?.host?.network}</Typography>
</Stack>
--
GitLab