diff --git a/package-lock.json b/package-lock.json
index d2bc55f33aa424948d6ba13f87b807af622bbfa2..b8170e7ad15b11be08d578f513288c73f747d2e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^0.6.0",
+ "@ess-ics/ce-ui-common": "^2.1.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
@@ -2656,9 +2656,9 @@
}
},
"node_modules/@ess-ics/ce-ui-common": {
- "version": "0.6.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.6.0.tgz",
- "integrity": "sha1-5yOVZhamHg44YJwx05TWPQ5Pz5I=",
+ "version": "2.1.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-2.1.0.tgz",
+ "integrity": "sha1-Bh6QQZc/iphDwNgsxbhCPSVrpBc=",
"dependencies": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
@@ -41736,9 +41736,9 @@
"dev": true
},
"@ess-ics/ce-ui-common": {
- "version": "0.6.0",
- "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-0.6.0.tgz",
- "integrity": "sha1-5yOVZhamHg44YJwx05TWPQ5Pz5I=",
+ "version": "2.1.0",
+ "resolved": "https://artifactory.esss.lu.se/artifactory/api/npm/ics-npm/@ess-ics/ce-ui-common/-/ce-ui-common-2.1.0.tgz",
+ "integrity": "sha1-Bh6QQZc/iphDwNgsxbhCPSVrpBc=",
"requires": {
"@fontsource/titillium-web": "^4.5.9",
"@mui/x-data-grid-pro": "^6.5.0",
diff --git a/package.json b/package.json
index 2e339dffa89675a61ae851c9836ce0ba518a6129..1e3e64f98da3a49a252a6318d973888aa52ae41a 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
"@ahooksjs/use-url-state": "^3.5.0",
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
- "@ess-ics/ce-ui-common": "^0.6.0",
+ "@ess-ics/ce-ui-common": "^2.1.0",
"@fontsource/roboto": "^4.1.0",
"@mui/icons-material": "^5.14.1",
"@mui/material": "^5.14.1",
diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
index e3d91a729ab75f61e386abd2dabc4efa16deb843..f0b2ac6bd6fbaa7506d4434bd8d5f81cbc0a7e19 100644
--- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
+++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js
@@ -87,8 +87,15 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) {
>
<>
<ConfirmationDialog
- title="Administratively 'undeploy' IOC"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Administratively undeploy IOC
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to administer IOC as undeployed
diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
index dfa908f5749a6adea4034553c96e922447aef487..8f778299713a0cf96bfdfc5c5802a286d13dec31 100644
--- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
+++ b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js
@@ -126,8 +126,15 @@ export default function ChangeHostAdmin({
renderNoAccess={() => <></>}
>
<ConfirmationDialog
- title="Modifying deployment host"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Modifying deployment host
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to modify deployment host of
diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js
index 4b2a037cd4c14d7f5f117a671d27091cb7ec5a87..1f7a55380ff0ea43b3cc304a6efcf7bbc6d72e60 100644
--- a/src/components/IOC/IOCDelete/IOCDelete.js
+++ b/src/components/IOC/IOCDelete/IOCDelete.js
@@ -72,8 +72,15 @@ export default function IOCDelete({ ioc, buttonDisabled, setButtonDisabled }) {
return (
<>
<ConfirmationDialog
- title="Deleting IOC"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Deleting IOC
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to delete
diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
index 0287d83701bd2260d15bed600c51ddf5409e8a5a..61e31135d42a04dcb754e7333dbe95c3751bb466 100644
--- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
+++ b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js
@@ -2,20 +2,17 @@ import React, { useCallback, useContext, useEffect, useState } from "react";
import {
Button,
TextField,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
Typography,
Tooltip,
CircularProgress,
Autocomplete,
- Alert
+ Alert,
+ Stack
} from "@mui/material";
import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer";
import { formatDate, transformHostQuery } from "../../common/Helper";
import { apiContext } from "../../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useAPIMethod, Dialog } from "@ess-ics/ce-ui-common";
export function IOCDeployDialog({
open,
@@ -140,21 +137,19 @@ export function IOCDeployDialog({
<Dialog
open={open}
onClose={handleClose}
- >
- <form onSubmit={onSubmit}>
- <DialogTitle
- id="form-dialog-title"
+ title={
+ <Typography
variant="h2"
+ marginY={1}
>
{hasActiveDeployment ? "Deploy revision" : "Deploy"}
- </DialogTitle>
- <DialogContent
- sx={{
- gap: 1.5,
- display: "flex",
- flexDirection: "column",
- minWidth: "600px"
- }}
+ </Typography>
+ }
+ content={
+ <Stack
+ component="form"
+ onSubmit={onSubmit}
+ gap={1}
>
<TextField
autoComplete="off"
@@ -295,24 +290,29 @@ export function IOCDeployDialog({
)}
{error ? <Alert severity="error">{error}</Alert> : <></>}
- </DialogContent>
- <DialogActions>
- <Button
- onClick={handleClose}
- color="primary"
- >
- Cancel
- </Button>
- <Button
- color="primary"
- variant="contained"
- type="submit"
- disabled={!host || !gitVersion || buttonDisabled}
+ <Stack
+ flexDirection="row"
+ justifyContent="flex-end"
+ gap={2}
+ marginTop={1}
>
- Deploy
- </Button>
- </DialogActions>
- </form>
- </Dialog>
+ <Button
+ onClick={handleClose}
+ color="primary"
+ >
+ Cancel
+ </Button>
+ <Button
+ color="primary"
+ variant="contained"
+ type="submit"
+ disabled={!host || !gitVersion}
+ >
+ Deploy
+ </Button>
+ </Stack>
+ </Stack>
+ }
+ />
);
}
diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
index 103816122c9d07d3792da0765391ae1ceb6e0ee7..025ce948b6e1a14f54d0e73979a0a9d2375f834d 100644
--- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
+++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js
@@ -251,8 +251,15 @@ export default function IOCDetailAdmin({
return (
<>
<ConfirmationDialog
- title="Modifying IOC"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Modifying IOC
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to modify
diff --git a/src/components/IOC/IOCService/IOCService.js b/src/components/IOC/IOCService/IOCService.js
index e4877b582eb2231dae554ea410fb27c4af3dd6d5..448e9f32824196354af29ec71e622212db2de3b6 100644
--- a/src/components/IOC/IOCService/IOCService.js
+++ b/src/components/IOC/IOCService/IOCService.js
@@ -193,8 +193,15 @@ export function IOCService({
renderNoAccess={() => "You are not authorized to control this IOC"}
>
<ConfirmationDialog
- title="Start IOC"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Start IOC
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to start{" "}
@@ -215,8 +222,15 @@ export function IOCService({
onConfirm={onStartModalConfirm}
/>
<ConfirmationDialog
- title="Stop IOC"
- description={
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ Stop IOC
+ </Typography>
+ }
+ content={
<>
<Typography component="span">
Are you sure want to stop{" "}
diff --git a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
index 34c31e657bb0bdc1ba1684bfb19ec184512094f0..4d08269b0e4f3bfd5d81fbcd38291e88a543bffd 100644
--- a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
+++ b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js
@@ -1,13 +1,7 @@
import React from "react";
-import {
- Button,
- Dialog,
- DialogActions,
- DialogContent,
- DialogTitle,
- Typography
-} from "@mui/material";
+import { Stack, Typography } from "@mui/material";
import Alert from "@mui/material/Alert";
+import { ConfirmationDialog } from "@ess-ics/ce-ui-common";
export function IOCUndeployDialog({
open,
@@ -31,44 +25,40 @@ export function IOCUndeployDialog({
});
};
+ const onConfirm = () => {
+ submitCallback({
+ ioc_id: ioc.id
+ });
+ };
+
return (
- <Dialog
+ <ConfirmationDialog
open={open}
onClose={handleClose}
- >
- <form onSubmit={onSubmit}>
- <DialogTitle
- id="form-dialog-title"
+ title={
+ <Typography
variant="h2"
+ marginY={1}
>
Undeploy
- </DialogTitle>
- <DialogContent
- sx={{ gap: 1.5, display: "flex", flexDirection: "column" }}
+ </Typography>
+ }
+ confirmText="Undeploy"
+ cancelText="Cancel"
+ onConfirm={onConfirm}
+ content={
+ <Stack
+ component="form"
+ onSubmit={onSubmit}
+ gap={1}
>
<Typography>
Do you really want to undeploy {ioc.namingName} from{" "}
{ioc?.activeDeployment?.host?.fqdn}?
</Typography>
{error ? <Alert severity="error">{error}</Alert> : <></>}
- </DialogContent>
- <DialogActions>
- <Button
- onClick={handleClose}
- color="primary"
- >
- Cancel
- </Button>
- <Button
- color="primary"
- variant="contained"
- type="submit"
- disabled={buttonDisabled}
- >
- Undeploy
- </Button>
- </DialogActions>
- </form>
- </Dialog>
+ </Stack>
+ }
+ />
);
}
diff --git a/src/components/common/Console/LogDialog.js b/src/components/common/Console/LogDialog.js
index e7f73b8cccd3feb708f4dd409171c2af875091a5..ab19a60e27813cc28328e2e78067080ebc7ba39e 100644
--- a/src/components/common/Console/LogDialog.js
+++ b/src/components/common/Console/LogDialog.js
@@ -1,5 +1,6 @@
+import { Dialog } from "@ess-ics/ce-ui-common/dist/components/common/Dialog";
+import { Typography } from "@mui/material";
import React from "react";
-import { Dialog, DialogContent, DialogTitle } from "@mui/material";
export function LogDialog({ open, setOpen, title, content }) {
const handleClose = () => {
@@ -8,24 +9,21 @@ export function LogDialog({ open, setOpen, title, content }) {
return (
<Dialog
+ title={
+ <Typography
+ variant="h2"
+ marginY={1}
+ >
+ {title}
+ </Typography>
+ }
+ content={content}
open={open}
onClose={handleClose}
- fullWidth
- maxWidth="xl"
- sx={{
- "& .MuiDialogTitle-root": {
- backgroundColor: "primary.main",
- color: "essWhite.main"
- }
+ DialogProps={{
+ fullWidth: true,
+ maxWidth: "xl"
}}
- >
- <DialogTitle
- id="log-dialog-title"
- variant="h2"
- >
- {title}
- </DialogTitle>
- <DialogContent>{content}</DialogContent>
- </Dialog>
+ />
);
}
diff --git a/src/components/common/User/UserIOCList.js b/src/components/common/User/UserIOCList.js
index 4f5aa493313f76bde79e6aac63d65fbf6b24cad5..c7b77d4cb02087307547857351539b58d164cf90 100644
--- a/src/components/common/User/UserIOCList.js
+++ b/src/components/common/User/UserIOCList.js
@@ -2,10 +2,9 @@ import React, { useContext } from "react";
import { Card, CardHeader } from "@mui/material";
import { useEffect } from "react";
import { initRequestParams } from "../Helper";
-import { usePagination } from "../../../hooks/pagination";
import IOCTable from "../../IOC/IOCTable";
import { apiContext } from "../../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
export function UserIocList({ userName }) {
const client = useContext(apiContext);
diff --git a/src/components/common/User/UserOperationList.js b/src/components/common/User/UserOperationList.js
index 016621e9c1eb1350e8b15e87a4001a9fe3b89bb8..202af3eed42f024aecf304ccf8b806f9e05c9b67 100644
--- a/src/components/common/User/UserOperationList.js
+++ b/src/components/common/User/UserOperationList.js
@@ -2,10 +2,9 @@ import React, { useContext } from "react";
import { Card, CardHeader } from "@mui/material";
import { initRequestParams } from "../Helper";
import { useEffect } from "react";
-import { usePagination } from "../../../hooks/pagination";
import { JobTable } from "../../Job";
import { apiContext } from "../../../api/DeployApi";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
+import { useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
export function UserOperationList({ userName }) {
const client = useContext(apiContext);
diff --git a/src/components/records/RecordSearch.js b/src/components/records/RecordSearch.js
index d06a933723f7ef82e09c0cd0c981586f362a8903..930e5c128df8f5212ffa2087fc7823bd9747898f 100644
--- a/src/components/records/RecordSearch.js
+++ b/src/components/records/RecordSearch.js
@@ -11,8 +11,7 @@ import { SearchBar } from "../common/SearchBar/SearchBar";
import useUrlState from "@ahooksjs/use-url-state";
import { serialize, deserialize } from "../common/URLState/URLState";
import { Grid, Tabs, Tab } from "@mui/material";
-import { useAPIMethod } from "@ess-ics/ce-ui-common";
-import { usePagination } from "../../hooks/pagination";
+import { useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
import { apiContext } from "../../api/DeployApi";
export function RecordSearch({ iocName, rowType }) {
diff --git a/src/hooks/pagination.js b/src/hooks/pagination.js
deleted file mode 100644
index e976fec5d732879248f1a0e760f020bcdae0a1ca..0000000000000000000000000000000000000000
--- a/src/hooks/pagination.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import { useCallback, useMemo, useState } from "react";
-
-const isZeroOrPositiveInt = (val) => {
- return Number.isInteger(val) && val >= 0;
-};
-
-/**
- * Manages pagination state e.g. outside a table or url.
- *
- * Provides getting/setting for a single pagination object, but internally
- * manages changes for each attribute independently so that e.g. if there are
- * no changes then the object is unchanged.
- */
-export const usePagination = ({
- initPage,
- initLimit,
- initTotalCount,
- rowsPerPageOptions
-}) => {
- const [page, setPage] = useState(initPage ?? 0);
- const [_rowsPerPageOptions] = useState(rowsPerPageOptions ?? [20, 50]);
- const [limit, setLimit] = useState(initLimit ?? _rowsPerPageOptions[0]);
- const [totalCount, setTotalCount] = useState(initTotalCount ?? 0);
-
- /**
- * Returns current set of pagination values
- */
- const pagination = useMemo(() => {
- const val = {
- page,
- limit,
- rows: limit,
- totalCount,
- totalRecords: totalCount,
- rowsPerPageOptions: _rowsPerPageOptions
- };
- return val;
- }, [page, limit, totalCount, _rowsPerPageOptions]);
-
- /**
- * Sets pagination. Ignores negative or nonzero values.
- */
- const setPagination = useCallback(
- ({ page, limit, totalCount, rows, totalRecords }) => {
- isZeroOrPositiveInt(page) && setPage(page);
- isZeroOrPositiveInt(limit || rows) && setLimit(limit || rows);
- isZeroOrPositiveInt(totalCount || totalRecords) &&
- setTotalCount(totalCount || totalRecords);
- },
- []
- );
-
- return {
- pagination,
- setPagination,
- setTotalCount
- };
-};
diff --git a/src/views/IOC/IOCDetailsView.js b/src/views/IOC/IOCDetailsView.js
index d7b396ea834d691a149e0626a57cd849d72522a6..6d68bb64bc3ec2e99dacb93872d2bee0d3208455 100644
--- a/src/views/IOC/IOCDetailsView.js
+++ b/src/views/IOC/IOCDetailsView.js
@@ -19,7 +19,8 @@ import {
GlobalAppBarContext,
useAPIMethod,
useIsCurrentUserPermitted,
- TabPanel
+ TabPanel,
+ usePagination
} from "@ess-ics/ce-ui-common";
import { useSafePolling } from "../../hooks/Polling";
import useUrlState from "@ahooksjs/use-url-state";
@@ -27,7 +28,6 @@ import {
serialize,
deserialize
} from "../../components/common/URLState/URLState";
-import { usePagination } from "../../hooks/pagination";
import { apiContext } from "../../api/DeployApi";
const IOC_POLL_INTERVAL = 10000;
diff --git a/src/views/IOC/IOCListView.js b/src/views/IOC/IOCListView.js
index 669aaae8ff8e543608210e27dcbaf85ac6a208d8..ddec0a5730ba8563c5c5562c7274bf0d740e32eb 100644
--- a/src/views/IOC/IOCListView.js
+++ b/src/views/IOC/IOCListView.js
@@ -3,7 +3,8 @@ import { Container, Grid, Tabs, Tab } from "@mui/material";
import {
GlobalAppBarContext,
RootPaper,
- useAPIMethod
+ useAPIMethod,
+ usePagination
} from "@ess-ics/ce-ui-common";
import {
applicationTitle,
@@ -15,7 +16,6 @@ import {
serialize,
deserialize
} from "../../components/common/URLState/URLState";
-import { usePagination } from "../../hooks/pagination";
import { useMemo } from "react";
import { apiContext } from "../../api/DeployApi";
import IOCTable from "../../components/IOC/IOCTable";
diff --git a/src/views/host/HostDetailsView.js b/src/views/host/HostDetailsView.js
index f591e47c1c1825273e70a5da0e2973c01a2c09d1..7410c7dc35ef7aab62d34671143b2cc615101469 100644
--- a/src/views/host/HostDetailsView.js
+++ b/src/views/host/HostDetailsView.js
@@ -13,7 +13,8 @@ import {
SimpleAccordion,
GlobalAppBarContext,
useAPIMethod,
- AlertBannerList
+ AlertBannerList,
+ usePagination
} from "@ess-ics/ce-ui-common";
import { LokiPanel } from "../../components/common/Loki/LokiPanel";
import { useNavigate, Link as ReactRouterLink } from "react-router-dom";
@@ -28,7 +29,6 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
import { apiContext } from "../../api/DeployApi";
-import { usePagination } from "../../hooks/pagination";
import IOCTable from "../../components/IOC/IOCTable";
import {
ExternalLink,
diff --git a/src/views/host/HostListView.js b/src/views/host/HostListView.js
index 06a365e304cff16553bddf7f41e2043f7674b0e3..63afabec28fdaa4403242a3c4bd95825c48f689e 100644
--- a/src/views/host/HostListView.js
+++ b/src/views/host/HostListView.js
@@ -10,7 +10,8 @@ import { HostTable } from "../../components/host/HostTable";
import {
GlobalAppBarContext,
RootPaper,
- useAPIMethod
+ useAPIMethod,
+ usePagination
} from "@ess-ics/ce-ui-common";
import {
applicationTitle,
@@ -23,7 +24,6 @@ import {
serialize,
deserialize
} from "../../components/common/URLState/URLState";
-import { usePagination } from "../../hooks/pagination";
import { apiContext } from "../../api/DeployApi";
export function HostListView() {
diff --git a/src/views/jobs/JobListView.js b/src/views/jobs/JobListView.js
index 93606698bded39371505cd787a9dcf764ea855e4..f3f3ce38b57cb0dd8728381cd5349e0a2b7ab48d 100644
--- a/src/views/jobs/JobListView.js
+++ b/src/views/jobs/JobListView.js
@@ -1,6 +1,6 @@
import React, { useContext, useCallback, useMemo } from "react";
import { Box } from "@mui/material";
-import { RootPaper, useAPIMethod } from "@ess-ics/ce-ui-common";
+import { RootPaper, useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
import { initRequestParams } from "../../components/common/Helper";
import { useEffect } from "react";
import { SearchBar } from "../../components/common/SearchBar/SearchBar";
@@ -9,7 +9,6 @@ import {
serialize,
deserialize
} from "../../components/common/URLState/URLState";
-import { usePagination } from "../../hooks/pagination";
import { JobTable } from "../../components/Job/JobTable";
import { apiContext } from "../../api/DeployApi";
diff --git a/src/views/records/RecordListView.js b/src/views/records/RecordListView.js
index c8b4b0e787d46c5095ad33ce35d41acbb50d2e08..9c461a4c0f727cde9fcbe1bc13eb360e7b613e61 100644
--- a/src/views/records/RecordListView.js
+++ b/src/views/records/RecordListView.js
@@ -9,7 +9,8 @@ import { Container, Grid, Tabs, Tab } from "@mui/material";
import {
GlobalAppBarContext,
RootPaper,
- useAPIMethod
+ useAPIMethod,
+ usePagination
} from "@ess-ics/ce-ui-common";
import {
applicationTitle,
@@ -22,7 +23,6 @@ import {
deserialize
} from "../../components/common/URLState/URLState";
import { RecordTable } from "../../components/records/RecordTable";
-import { usePagination } from "../../hooks/pagination";
import { apiContext } from "../../api/DeployApi";
export function RecordListView() {