From b019d398b670f2a32041fa45683d8f21b418e4d1 Mon Sep 17 00:00:00 2001
From: Alexander Madsen <alexander.madsen@ess.eu>
Date: Tue, 29 Aug 2023 07:20:15 +0000
Subject: [PATCH] CE-1949: Ensure usage of only MUI KeyValueTable from common
in CE deploy
---
src/components/IOC/IOCDetails/IOCDetails.js | 4 +-
.../IOC/IOCLiveStatus/IOCLiveStatus.js | 7 +-
src/components/Job/JobDetails.js | 13 +-
.../common/KeyValueTable/KeyValueTable.js | 138 ------------------
src/components/common/KeyValueTable/index.js | 4 -
.../PrimeKeyValueTable/PrimeKeyValueTable.js | 39 -----
.../PrimeKeyValueTable.stories.js | 27 ----
.../common/PrimeKeyValueTable/index.js | 4 -
src/components/common/User/UserProfile.js | 2 +
.../deployments/DeploymentDetails.js | 13 +-
src/components/records/RecordTable.js | 2 +-
.../HostStatistics/HostStatistics.js | 19 ++-
.../statistics/IOCStatistics/IOCStatistics.js | 18 ++-
.../PrimeKeyValueTable.stories.js | 34 -----
src/views/host/HostDetailsView.js | 11 +-
src/views/records/RecordDetailsView.js | 4 +-
16 files changed, 64 insertions(+), 275 deletions(-)
delete mode 100644 src/components/common/KeyValueTable/KeyValueTable.js
delete mode 100644 src/components/common/KeyValueTable/index.js
delete mode 100644 src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
delete mode 100644 src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
delete mode 100644 src/components/common/PrimeKeyValueTable/index.js
delete mode 100644 src/stories/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
diff --git a/src/components/IOC/IOCDetails/IOCDetails.js b/src/components/IOC/IOCDetails/IOCDetails.js
index eae00bb5..33d3242a 100644
--- a/src/components/IOC/IOCDetails/IOCDetails.js
+++ b/src/components/IOC/IOCDetails/IOCDetails.js
@@ -1,7 +1,7 @@
import { Grid, Box } from "@mui/material";
import React from "react";
import { SimpleAccordion } from "../../common/Accordion/SimpleAccordion";
-import { KeyValueTable } from "../../common/KeyValueTable/KeyValueTable";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { IOCBadge } from "../IOCBadge";
import AccessControl from "../../auth/AccessControl";
@@ -70,6 +70,8 @@ export function IOCDetails({ ioc, getSubset = defaultSubset, alert, buttons }) {
<KeyValueTable
obj={subset}
variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
/>
</SimpleAccordion>
</Grid>
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
index dc978685..398b95f1 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.js
@@ -44,10 +44,9 @@ export function IOCLiveStatus({ ioc }) {
).hasDeployment();
// if IOC is not deployed some fields has to show '---' value
- const grayOutNoText = {
- shownValue: "---",
- shownClass: classes.iocNotDeployed
- };
+ const grayOutNoText = (
+ <Typography className={classes.iocNotDeployed}>---</Typography>
+ );
let subset = {
Description: ioc.description,
diff --git a/src/components/Job/JobDetails.js b/src/components/Job/JobDetails.js
index b5e2c70d..6c9c8b3a 100644
--- a/src/components/Job/JobDetails.js
+++ b/src/components/Job/JobDetails.js
@@ -9,7 +9,7 @@ import {
Link as MuiLink
} from "@mui/material";
import { DeploymentStepper } from "../deployments/DeploymentStepper";
-import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { JobBadge } from "./JobBadge";
import { DeploymentJobOutput } from "../deployments/DeploymentJobOutput";
@@ -78,10 +78,11 @@ export function JobDetails({ operation, job }) {
}
// gray out hostname if it is from cache
- return {
- shownValue: <Typography>{operation.host.fqdn}</Typography>,
- shownClass: classes.csentryIdInvalid
- };
+ return (
+ <Typography className={classes.csentryIdInvalid}>
+ {operation.host.fqdn}
+ </Typography>
+ );
}
const deploymentDetails = {
@@ -151,6 +152,8 @@ export function JobDetails({ operation, job }) {
<KeyValueTable
obj={deploymentDetails}
variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
/>
</SimpleAccordion>
</Grid>
diff --git a/src/components/common/KeyValueTable/KeyValueTable.js b/src/components/common/KeyValueTable/KeyValueTable.js
deleted file mode 100644
index 9289299c..00000000
--- a/src/components/common/KeyValueTable/KeyValueTable.js
+++ /dev/null
@@ -1,138 +0,0 @@
-import React from "react";
-import {
- Container,
- Table,
- TableBody,
- TableCell,
- TableRow,
- Typography
-} from "@mui/material";
-
-// const StyledTableRow = withStyles((theme) => ({
-// root: {
-// '&:nth-of-type(odd)': {
-// backgroundColor: theme.palette.action.hover,
-// },
-// },
-// }))(TableRow);
-
-/*
- KEY-VALUE table visualiser
- VALUE can be an object, or component
- If you want to style the while entry, use a records for the VALUE
- VALUE should consis of {shownValue:xxx, shownClass:yyy}
-*/
-
-export function KeyValueTable({ obj, variant = "overline" }) {
- /**
- * Trying to extract style class from the entry.
- * If there is no style class NULL value will be returned.
- *
- * @param {*} value: The VALUE part of the entry
- * @returns The style class name if it exists in the VALUE part.
- * If there is not style class NULL value will be returned
- */
- function extractStyle(value) {
- if (!value) {
- return null;
- }
-
- if (typeof value !== "object") {
- return null;
- }
-
- if (value.shownClass) {
- return value.shownClass;
- }
-
- return null;
- }
-
- /**
- * Returning the "formatted" KEY part of the entry for overline variant.
- * If VALUE has style class the KEY part will use the same style.
- *
- * @param {*} key: The KEY part of the entry
- * @param {*} value: Then VALUE part of the entry that may contain Style class
- * @returns: The "formatted" KEY part for the table
- */
- function extractKey(key, value) {
- const externalStyle = extractStyle(value);
-
- if (externalStyle) {
- return (
- <Typography
- variant="overline"
- className={externalStyle}
- >
- {key}
- </Typography>
- );
- }
-
- return <Typography variant="overline">{key}</Typography>;
- }
-
- /**
- * Returning the "formatted" VALUE part of the entry.
- * If the VALUE part contains style class it will use it.
- *
- * @param {*} value: The VALUE part of the entry that may contain Style class
- * @returns: The "formatted" VALUE part for the table
- */
- function extractValue(value) {
- const externalStyle = extractStyle(value);
-
- if (externalStyle) {
- return <div className={externalStyle}>{value.shownValue}</div>;
- }
-
- return typeof value !== "object" ? (
- <Typography>{`${value}`}</Typography>
- ) : (
- <div>{value}</div>
- );
- }
-
- /**
- * Returning the "formatted" KEY part of the entry for table variant.
- * If VALUE has style class the KEY part will use the same style.
- *
- * @param {*} key: The KEY part of the entry
- * @param {*} value: Then VALUE part of the entry that may contain Style class
- * @returns: The "formatted" KEY part for the table
- */
- function extractKeyForTable(key, value) {
- const externalStyle = extractStyle(value);
-
- if (externalStyle) {
- return (
- <div className={externalStyle}>
- <strong>{key}</strong>
- </div>
- );
- }
-
- return <strong>{key}</strong>;
- }
-
- return (
- <Container style={{ overflow: "auto" }}>
- <Table>
- <TableBody size="small">
- {Object.keys(obj).map((key) => (
- <TableRow key={key}>
- {variant === "table" && (
- <TableCell>{extractKeyForTable(key, obj[key])}</TableCell>
- )}
- <TableCell>
- {variant === "overline" && extractKey(key, obj[key])}
- {extractValue(obj[key])}
- </TableCell>
- </TableRow>
- ))}
- </TableBody>
- </Table>
- </Container>
- );
-}
diff --git a/src/components/common/KeyValueTable/index.js b/src/components/common/KeyValueTable/index.js
deleted file mode 100644
index b6ba15a3..00000000
--- a/src/components/common/KeyValueTable/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { KeyValueTable } from "./KeyValueTable";
-
-export { KeyValueTable };
-export default KeyValueTable;
diff --git a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js b/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
deleted file mode 100644
index 37e29fc3..00000000
--- a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import React from "react";
-import { CustomTable } from "../table/CustomTable";
-import { Skeleton } from "primereact/skeleton";
-
-export function PrimeKeyValueTable(
- { obj, labels = ["Key", "Value"] },
- valueWidth = "15ch"
-) {
- const bodyTemplate = (rowData) => {
- return rowData.value ?? <Skeleton />;
- };
-
- const defaultColumns = [
- { id: "key", label: labels[0] },
- {
- id: "value",
- label: labels[1],
- width: valueWidth,
- body: bodyTemplate,
- textAlign: "right"
- }
- ];
-
- // even though they are unused, we have to give the
- // CustomTable some pagination args or it just won't work
- return (
- <CustomTable
- columns={defaultColumns}
- rows={Object.entries(obj).map(([key, value]) => ({ key, value }))}
- paginator={false}
- totalCount={Object.entries(obj).length}
- rowsPerPage={[5, 10, 20, 50, 100]}
- lazyParams={{ rows: 10, page: 0 }}
- columnSort={{ sortField: null, sortOrder: null }}
- setLazyParams={() => {}}
- setColumnSort={() => {}}
- />
- );
-}
diff --git a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js b/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
deleted file mode 100644
index 3732b778..00000000
--- a/src/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from "react";
-import { Container, StyledEngineProvider } from "@mui/material";
-import { ThemeProvider } from "@mui/material/styles";
-import { theme } from "../../../style/Theme";
-import { PrimeKeyValueTable } from "./PrimeKeyValueTable";
-
-export default {
- title: "Common/PrimeKeyValueTable",
- component: PrimeKeyValueTable
-};
-
-const Template = (args) => (
- <StyledEngineProvider injectFirst>
- <ThemeProvider theme={theme}>
- <Container>
- <PrimeKeyValueTable {...args} />
- </Container>
- </ThemeProvider>
- </StyledEngineProvider>
-);
-
-export const Example = Template.bind({});
-Example.args = {
- obj: { "The first statistic": 102, "The second statistic": 7.6 },
- labels: ["External Statistics"],
- valueWidth: "15ch"
-};
diff --git a/src/components/common/PrimeKeyValueTable/index.js b/src/components/common/PrimeKeyValueTable/index.js
deleted file mode 100644
index f12f0b0e..00000000
--- a/src/components/common/PrimeKeyValueTable/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import { PrimeKeyValueTable } from "./PrimeKeyValueTable";
-
-export { PrimeKeyValueTable };
-export default PrimeKeyValueTable;
diff --git a/src/components/common/User/UserProfile.js b/src/components/common/User/UserProfile.js
index 25b0610f..d7a89168 100644
--- a/src/components/common/User/UserProfile.js
+++ b/src/components/common/User/UserProfile.js
@@ -28,6 +28,8 @@ export function UserProfile({ userInfo, errorMessage }) {
<KeyValueTable
obj={userData}
variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
/>
)}
</Card>
diff --git a/src/components/deployments/DeploymentDetails.js b/src/components/deployments/DeploymentDetails.js
index 8b3d3b29..b74bd82d 100644
--- a/src/components/deployments/DeploymentDetails.js
+++ b/src/components/deployments/DeploymentDetails.js
@@ -9,7 +9,7 @@ import {
Link as MuiLink
} from "@mui/material";
import { DeploymentStepper } from "./DeploymentStepper";
-import { KeyValueTable } from "../common/KeyValueTable/KeyValueTable";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { SimpleAccordion } from "../common/Accordion/SimpleAccordion";
import { DeploymentBadge } from "./DeploymentBadge";
import { DeploymentJobOutput } from "./DeploymentJobOutput";
@@ -86,10 +86,11 @@ export function DeploymentDetails({ deployment, deploymentJob }) {
}
// gray out hostname if it is from cache
- return {
- shownValue: <Typography>{deployment.host.fqdn}</Typography>,
- shownClass: classes.csentryIdInvalid
- };
+ return (
+ <Typography className={classes.csentryIdInvalid}>
+ {deployment.host.fqdn}
+ </Typography>
+ );
}
const deploymentDetails = {
@@ -157,6 +158,8 @@ export function DeploymentDetails({ deployment, deploymentJob }) {
<KeyValueTable
obj={deploymentDetails}
variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
/>
</SimpleAccordion>
</Grid>
diff --git a/src/components/records/RecordTable.js b/src/components/records/RecordTable.js
index f3334a82..159c9f0d 100644
--- a/src/components/records/RecordTable.js
+++ b/src/components/records/RecordTable.js
@@ -1,7 +1,7 @@
import React from "react";
import { CustomTable } from "../common/table/CustomTable";
import { RecordStatusIcon } from "./RecordIcons";
-import { Grid } from "@mui/material";
+import { Grid, Tooltip, Typography } from "@mui/material";
import { useRedirect } from "../../hooks/Redirect";
const recordsColumns = [
diff --git a/src/components/statistics/HostStatistics/HostStatistics.js b/src/components/statistics/HostStatistics/HostStatistics.js
index 3d7feb50..c4023e95 100644
--- a/src/components/statistics/HostStatistics/HostStatistics.js
+++ b/src/components/statistics/HostStatistics/HostStatistics.js
@@ -1,5 +1,6 @@
import React from "react";
-import { PrimeKeyValueTable } from "../../common/PrimeKeyValueTable/PrimeKeyValueTable";
+import { Paper } from "@mui/material";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { useStatistics } from "../../../api/SwaggerApi";
export function HostStatistics() {
@@ -30,9 +31,17 @@ export function HostStatistics() {
}
return (
- <PrimeKeyValueTable
- obj={hostStats}
- labels={["Host statistics"]}
- />
+ <Paper>
+ <KeyValueTable
+ obj={hostStats}
+ variant="table"
+ keyOptions={{ headerName: "Host statistics" }}
+ valueOptions={{
+ headerName: "",
+ align: "right"
+ }}
+ striped
+ />
+ </Paper>
);
}
diff --git a/src/components/statistics/IOCStatistics/IOCStatistics.js b/src/components/statistics/IOCStatistics/IOCStatistics.js
index 4db408c5..0f5afea7 100644
--- a/src/components/statistics/IOCStatistics/IOCStatistics.js
+++ b/src/components/statistics/IOCStatistics/IOCStatistics.js
@@ -1,5 +1,6 @@
import React from "react";
-import { PrimeKeyValueTable } from "../../common/PrimeKeyValueTable/PrimeKeyValueTable";
+import { Paper } from "@mui/material";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { useStatistics } from "../../../api/SwaggerApi";
export function IOCStatistics() {
@@ -25,9 +26,16 @@ export function IOCStatistics() {
}
return (
- <PrimeKeyValueTable
- obj={iocStats}
- labels={["IOC statistics"]}
- />
+ <Paper>
+ <KeyValueTable
+ obj={iocStats}
+ keyOptions={{ headerName: "IOC statistics" }}
+ valueOptions={{
+ headerName: "",
+ align: "right"
+ }}
+ striped
+ />
+ </Paper>
);
}
diff --git a/src/stories/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js b/src/stories/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
deleted file mode 100644
index ef2a9d37..00000000
--- a/src/stories/components/common/PrimeKeyValueTable/PrimeKeyValueTable.stories.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from "react";
-import { Container, StyledEngineProvider } from "@mui/material";
-import { ThemeProvider } from "@mui/material/styles";
-import { theme } from "../../../../style/Theme";
-import { PrimeKeyValueTable } from "../../../../components/common/PrimeKeyValueTable/PrimeKeyValueTable";
-import { disabledTable } from "../../../utils/common-args";
-
-export default {
- title: "Common/PrimeKeyValueTable"
-};
-
-const Template = (args) => (
- <StyledEngineProvider injectFirst>
- <ThemeProvider theme={theme}>
- <Container>
- <PrimeKeyValueTable {...args} />
- </Container>
- </ThemeProvider>
- </StyledEngineProvider>
-);
-
-export const Example = (args) => <Template {...args} />;
-
-Example.args = {
- obj: { "The first statistic": 102, "The second statistic": 7.6 },
- labels: ["External Statistics"],
- valueWidth: "15ch"
-};
-
-Example.argTypes = {
- obj: disabledTable,
- labels: disabledTable,
- valueWidth: disabledTable
-};
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index a31ff533..d573a492 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -18,7 +18,7 @@ import { useHostIOCList } from "../../api/SwaggerApi";
import { HostBadge } from "../../components/host/HostBadge";
import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
import { IOCAsyncList } from "../../components/IOC/IOCAsyncList";
-import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { LokiPanel } from "../../components/common/Loki/LokiPanel";
import { useNavigate } from "react-router-dom";
import {
@@ -205,7 +205,14 @@ export function HostDetailsView({ id }) {
allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
renderNoAccess={() => <></>}
>
- {host && <KeyValueTable obj={renderHost} />}
+ {host && (
+ <KeyValueTable
+ obj={renderHost}
+ variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
+ />
+ )}
</AccessControl>
</SimpleAccordion>
<AccessControl
diff --git a/src/views/records/RecordDetailsView.js b/src/views/records/RecordDetailsView.js
index c79f8dc9..c86384b4 100644
--- a/src/views/records/RecordDetailsView.js
+++ b/src/views/records/RecordDetailsView.js
@@ -12,7 +12,7 @@ import { RootContainer } from "../../components/common/Container/RootContainer";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import { GlobalAppBarContext } from "@ess-ics/ce-ui-common";
import { SimpleAccordion } from "../../components/common/Accordion/SimpleAccordion";
-import { KeyValueTable } from "../../components/common/KeyValueTable/KeyValueTable";
+import { KeyValueTable } from "@ess-ics/ce-ui-common/dist/components/common/KeyValueTable";
import { RecordBadge } from "../../components/records/RecordBadge";
import { applicationTitle, formatDate } from "../../components/common/Helper";
import { useParams } from "react-router-dom";
@@ -111,6 +111,8 @@ export function RecordDetailsView() {
<KeyValueTable
obj={getSubset(record)}
variant="overline"
+ sx={{ border: 0 }}
+ valueOptions={{ headerName: "" }}
/>
</SimpleAccordion>
)}
--
GitLab