diff --git a/src/components/Job/JobTable/JobTable.js b/src/components/Job/JobTable/JobTable.js index 8674a56460655502696f52eb2250867ea7aa8c0d..551a5ee21c07e737bdaaea3820bb66987bb056a6 100644 --- a/src/components/Job/JobTable/JobTable.js +++ b/src/components/Job/JobTable/JobTable.js @@ -1,22 +1,22 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { Table } from "@ess-ics/ce-ui-common"; import { JobStatusColumn } from "./JobStatusColumn"; import { JobSummaryColumn } from "./JobSummaryColumn"; import { UserAvatar } from "../../common/User/UserAvatar"; import { JobHostColumn } from "./JobHostColumn"; -const jobLogColumns = [ +const defaultColumns = [ { field: "status", headerName: "Status" }, { field: "job", - headerName: "Job" + headerName: "Job", + width: "100%" }, { - field: "host", - headerName: "Host" + field: "host" }, { field: "user", @@ -26,46 +26,50 @@ const jobLogColumns = [ } ]; -const userPageJobLogColumns = [ - ...jobLogColumns.filter((it) => it.field !== "user") -]; - -function createTableRow(job, colorStyle) { - return { - id: job.id, - status: <JobStatusColumn {...{ job }} />, - job: <JobSummaryColumn {...{ job, colorStyle }} />, - host: <JobHostColumn {...{ job }} />, - user: <UserAvatar username={job.createdBy} /> - }; -} +const shapeColumns = (customColumns) => { + return customColumns.map((column) => { + const mappedCol = defaultColumns.find((col) => col.field === column.field); + return mappedCol ? { ...mappedCol, ...column } : null; + }); +}; -function createTableRowJobLog(job) { - return createTableRow(job, "black"); -} +const createTableRow = (job, colorStyle) => ({ + id: job.id, + status: <JobStatusColumn {...{ job }} />, + job: <JobSummaryColumn {...{ job, colorStyle }} />, + host: <JobHostColumn {...{ job }} />, + user: <UserAvatar username={job.createdBy} /> +}); -export function JobTable({ +export const JobTable = ({ jobs, - rowType = "jobLog", + customColumns, pagination, onPage, loading -}) { - const tableTypeSpecifics = { - jobLog: [jobLogColumns, createTableRowJobLog], - userPageJobLog: [userPageJobLogColumns, createTableRowJobLog] - }; +}) => { + const [columns, setColumns] = useState(null); - const [columns, createRow] = tableTypeSpecifics[rowType]; + useEffect(() => { + if (customColumns) { + setColumns(shapeColumns(customColumns)); + } else { + setColumns(defaultColumns); + } + }, [customColumns, setColumns]); return ( - <Table - columns={columns} - rows={jobs?.map((job) => createRow(job))} - pagination={pagination} - onPage={onPage} - loading={loading} - rowHeight={90} - /> + <> + {columns ? ( + <Table + columns={columns} + rows={columns && jobs?.map((job) => createTableRow(job))} + pagination={pagination} + onPage={onPage} + loading={loading} + rowHeight={90} + /> + ) : null} + </> ); -} +}; diff --git a/src/components/common/User/UserOperationList.js b/src/components/common/User/UserOperationList.js index 233cc9dd18a1b9744eaf5bb617cad4722e183349..c02c4a84fa14ee7807702235da4419e6186f1577 100644 --- a/src/components/common/User/UserOperationList.js +++ b/src/components/common/User/UserOperationList.js @@ -67,6 +67,11 @@ export function UserOperationList({ userName }) { /> <JobTable jobs={operations?.operations} + customColumns={[ + { field: "status" }, + { field: "job" }, + { field: "host" } + ]} loading={loading || !dataReady} pagination={pagination} onPage={onPage} diff --git a/src/views/host/details/HostJobsSection.js b/src/views/host/details/HostJobsSection.js index 5203f898f510da61ac7af516849b6027ed9c7f81..9255a0c3b0b0ce3a9609c262db9214d20f0151f0 100644 --- a/src/views/host/details/HostJobsSection.js +++ b/src/views/host/details/HostJobsSection.js @@ -68,6 +68,11 @@ export const HostJobsSection = ({ hostId }) => { {hostLog ? ( <JobTable jobs={!error && hostLog ? hostLog?.operations : null} + customColumns={[ + { field: "status" }, + { field: "job" }, + { field: "user" } + ]} loading={loading || !dataReady} pagination={pagination} onPage={setPagination}