diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js index 583795d74fc2398e7f7bbb70d8726751e8633ded..f808af1504442060c97e8e0ed472eb00b11a1243 100644 --- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js +++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.js @@ -1,10 +1,8 @@ -import React, { useState, useRef, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { Button, Typography, Grid, Tooltip } from "@mui/material"; import { useUndeployInDb } from "../../../api/SwaggerApi"; -import { SimpleAccordion } from "@ess-ics/ce-ui-common"; -import { ConfirmationDialog } from "../../dialog/ConfirmationDialog"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; +import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common"; import Alert from "@mui/material/Alert"; import AccessControl from "../../auth/AccessControl"; import { IocActiveDeployment } from "../../../api/DataTypes"; @@ -18,37 +16,17 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) { // for the dialog const [error, setError] = useState(); - const [adHocDialogOpen, setAdHocDialogOpen] = useState(false); - const [adHocDialogTitle, setAdHocDialogTitle] = useState(); - const [adHocDialogDescription, setAdHocDialogDescription] = useState(); - const callbackRef = useRef(); + const [open, setOpen] = useState(false); const [response, undeployIOC] = useUndeployInDb(ioc.id, onError); - // Setting up dialog properties - const openUndeployModal = () => { - setAdHocDialogTitle("Administratively 'undeploy' IOC"); - setAdHocDialogDescription( - <> - <Typography style={{ display: "inline-block" }}> - Are you sure want to administer IOC as undeployed - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </> - ); - callbackRef.current = undeployIoc; - setAdHocDialogOpen(true); - }; + const onClose = useCallback(() => { + setOpen(false); + }, []); - // what to do when "undeploying" the IOC - const undeployIoc = async () => { + const onConfirm = useCallback(() => { undeployIOC(); - }; + }, [undeployIOC]); useEffect(() => { if (response) { @@ -77,18 +55,29 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) { renderNoAccess={() => <></>} > <> - <SimpleModal - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - > - <ConfirmationDialog - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - title={adHocDialogTitle} - description={adHocDialogDescription} - callback={callbackRef.current} - /> - </SimpleModal> + <ConfirmationDialog + title="Administratively 'undeploy' IOC" + description={ + <> + <Typography component="span"> + Are you sure want to administer IOC as undeployed + <Typography + fontFamily="monospace" + component="span" + > + {" "} + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Undeploy IOC" + cancelText="Cancel" + open={open} + onClose={onClose} + onConfirm={onConfirm} + /> <SimpleAccordion summary="Change deployment status to not deployed (e.g. if IOC has been manually removed)" @@ -115,7 +104,7 @@ export default function AdministerUndeployment({ ioc, buttonDisabled }) { <Tooltip title={disabledButtonTitle}> <span> <Button - onClick={openUndeployModal} + onClick={() => setOpen(true)} disabled={ buttonDisabled || ioc.operationInProgress || diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js index 7c45ca7e469d5cf79740df60f5be8ecf19ea2991..a3faa68dd579b672a641ae6bcb31c7e6a85d15ec 100644 --- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js +++ b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.js @@ -1,6 +1,6 @@ -import React, { useState, useRef, useEffect, useCallback } from "react"; +import React, { useState, useEffect, useCallback, useMemo } from "react"; import AccessControl from "../../auth/AccessControl"; -import { SimpleAccordion } from "@ess-ics/ce-ui-common"; +import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { Button, Typography, @@ -11,8 +11,6 @@ import { Alert, Autocomplete } from "@mui/material"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; -import { ConfirmationDialog } from "../../dialog/ConfirmationDialog"; import { useUpdateActiveDeploymentHost, useCSEntrySearch @@ -26,12 +24,15 @@ export default function ChangeHostAdmin({ resetTab, buttonDisabled }) { - const initHost = { - csEntryHost: { - fqdn: ioc.activeDeployment.host.fqdn, - id: ioc.activeDeployment.host.csEntryId - } - }; + const initHost = useMemo( + () => ({ + csEntryHost: { + fqdn: ioc.activeDeployment.host.fqdn, + id: ioc.activeDeployment.host.csEntryId + } + }), + [ioc?.activeDeployment?.host] + ); const [hosts, getHosts, , loadingHosts] = useCSEntrySearch(); const [host, setHost] = useState(initHost); @@ -48,11 +49,7 @@ export default function ChangeHostAdmin({ // for the dialog const [error, setError] = useState(); - const [adHocDialogOpen, setAdHocDialogOpen] = useState(false); - const [adHocDialogTitle, setAdHocDiatlogTitle] = useState(); - const [adHocDialogDescription, setAdHocDialogDescription] = useState(); - const callbackRef = useRef(); - + const [open, setOpen] = useState(); const [updatedIoc, updateHost] = useUpdateActiveDeploymentHost( ioc.id, onError @@ -70,30 +67,16 @@ export default function ChangeHostAdmin({ [query, getHosts] ); - const openModifyModal = () => { - setAdHocDiatlogTitle("Modifying deployment host"); - setAdHocDialogDescription( - <> - <Typography style={{ display: "inline-block" }}> - Are you sure want to modify deployment host of - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </> - ); - callbackRef.current = modifyHost; - setAdHocDialogOpen(true); - }; + const onClose = useCallback(() => { + setOpen(false); + setHost(initHost); + }, [setOpen, initHost]); - const modifyHost = () => { + const onConfirm = useCallback(() => { updateHost({ hostCSEntryId: host.csEntryHost.id }); - }; + }, [updateHost, host?.csEntryHost?.id]); let disabledButtonTitle = ""; if (buttonDisabled || ioc.operationInProgress) { @@ -111,109 +94,117 @@ export default function ChangeHostAdmin({ allowedRoles={["DeploymentToolAdmin"]} renderNoAccess={() => <></>} > - <> - <SimpleModal - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - > - <ConfirmationDialog - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - title={adHocDialogTitle} - description={adHocDialogDescription} - callback={callbackRef.current} - /> - </SimpleModal> - - <SimpleAccordion - summary="Change deployment host" - defaultExpanded - > - <Grid - container - spacing={1} - > - {error ? ( - <Grid - item - xs={12} + <ConfirmationDialog + title="Modifying deployment host" + description={ + <> + <Typography component="span"> + Are you sure want to modify deployment host of + <Typography + component="span" + fontFamily="monospace" > - <Alert severity="error">{error}</Alert> - </Grid> - ) : ( - <></> - )} - <Grid - item - xs={12} - > - <Autocomplete - autoHighlight - id="host" - options={hosts.hostList} - loading={loadingHosts} - clearOnBlur={false} - defaultValue={initHost} - getOptionLabel={(option) => { - return option?.csEntryHost?.fqdn; - }} - renderInput={(params) => ( - <TextField - {...params} - label="host" - variant="outlined" - required - InputProps={{ - ...params.InputProps, - endAdornment: ( - <React.Fragment> - {loadingHosts ? ( - <CircularProgress - color="inherit" - size={20} - /> - ) : null} - {params.InputProps.endAdornment} - </React.Fragment> - ) - }} - /> - )} - onChange={(event, value, reason) => { - setHost(value); - }} - onInputChange={(event, value, reason) => { - event && onHostKeyUp(event.nativeEvent); - }} - autoSelect - filterOptions={(options, state) => options} - /> - </Grid> + {" "} + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Modify Host" + cancelText="Cancel" + open={open} + onClose={onClose} + onConfirm={onConfirm} + /> + <SimpleAccordion + summary="Change deployment host" + defaultExpanded + > + <Grid + container + spacing={1} + > + {error ? ( <Grid item xs={12} > - <Tooltip title={disabledButtonTitle}> - <span> - <Button - color="primary" - variant="contained" - onClick={openModifyModal} - disabled={ - buttonDisabled || - ioc.operationInProgress || - !ioc.activeDeployment || - noModification() - } - > - CHANGE HOST - </Button> - </span> - </Tooltip> + <Alert severity="error">{error}</Alert> </Grid> + ) : ( + <></> + )} + <Grid + item + xs={12} + > + <Autocomplete + autoHighlight + id="host" + options={hosts.hostList} + loading={loadingHosts} + clearOnBlur={false} + value={host} + getOptionLabel={(option) => { + return option?.csEntryHost?.fqdn; + }} + renderInput={(params) => ( + <TextField + {...params} + label="host" + variant="outlined" + required + InputProps={{ + ...params.InputProps, + endAdornment: ( + <React.Fragment> + {loadingHosts ? ( + <CircularProgress + color="inherit" + size={20} + /> + ) : null} + {params.InputProps.endAdornment} + </React.Fragment> + ) + }} + /> + )} + onChange={(event, value, reason) => { + setHost(value); + }} + onInputChange={(event, value, reason) => { + event && onHostKeyUp(event.nativeEvent); + }} + autoSelect + filterOptions={(options, state) => options} + /> + </Grid> + <Grid + item + xs={12} + > + <Tooltip title={disabledButtonTitle}> + <span> + <Button + color="primary" + variant="contained" + onClick={() => setOpen(true)} + disabled={ + buttonDisabled || + ioc.operationInProgress || + !ioc.activeDeployment || + noModification() + } + > + CHANGE HOST + </Button> + </span> + </Tooltip> </Grid> - </SimpleAccordion> - </> + </Grid> + </SimpleAccordion> </AccessControl> </> ); diff --git a/src/components/IOC/IOCDelete/IOCDelete.js b/src/components/IOC/IOCDelete/IOCDelete.js index 32e88f6a859f6e45250f74bd131ffeed76d320c3..8f49ec1f9e2f1730e661130f923ed0c27108af3d 100644 --- a/src/components/IOC/IOCDelete/IOCDelete.js +++ b/src/components/IOC/IOCDelete/IOCDelete.js @@ -1,10 +1,8 @@ -import React, { useState, useRef, useEffect } from "react"; +import React, { useState, useEffect, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { Button, Typography, Grid, Tooltip } from "@mui/material"; import { useDeleteIOC } from "../../../api/SwaggerApi"; -import { SimpleAccordion } from "@ess-ics/ce-ui-common"; -import { ConfirmationDialog } from "../../dialog/ConfirmationDialog"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; +import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common"; import Alert from "@mui/material/Alert"; import AccessControl from "../../auth/AccessControl"; @@ -17,38 +15,10 @@ export default function IOCDelete({ ioc, buttonDisabled }) { // for the dialog const [error, setError] = useState(); - const [adHocDialogOpen, setAdHocDialogOpen] = useState(false); - const [adHocDialogTitle, setAdHocDiatlogTitle] = useState(); - const [adHocDialogDescription, setAdHocDialogDescription] = useState(); - const callbackRef = useRef(); + const [open, setOpen] = useState(false); const [response, deleteIOC] = useDeleteIOC(ioc.id, onError); - // Setting up dialog properties - const openDeleteModal = () => { - setAdHocDiatlogTitle("Deleting IOC"); - setAdHocDialogDescription( - <> - <Typography style={{ display: "inline-block" }}> - Are you sure want to delete - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </> - ); - callbackRef.current = deleteIoc; - setAdHocDialogOpen(true); - }; - - // what to do when deleting IOC - const deleteIoc = async () => { - deleteIOC(); - }; - useEffect(() => { if (response && !error) { navigate(-1); @@ -62,20 +32,39 @@ export default function IOCDelete({ ioc, buttonDisabled }) { "There is an ongoing operation, you can not delete the IOC right now"; } + const onClose = useCallback(() => { + setOpen(false); + }, [setOpen]); + + const onConfirm = useCallback(() => { + deleteIOC(); + }, [deleteIOC]); + return ( <> - <SimpleModal - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - > - <ConfirmationDialog - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - title={adHocDialogTitle} - description={adHocDialogDescription} - callback={callbackRef.current} - /> - </SimpleModal> + <ConfirmationDialog + title="Deleting IOC" + description={ + <> + <Typography component="span"> + Are you sure want to delete + <Typography + component="span" + fontFamily="monospace" + > + {" "} + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Delete IOC" + cancelText="Cancel" + open={open} + onClose={onClose} + onConfirm={onConfirm} + /> <SimpleAccordion summary="Delete IOC" @@ -118,7 +107,7 @@ export default function IOCDelete({ ioc, buttonDisabled }) { <Tooltip title={disabledButtonTitle}> <span> <Button - onClick={openDeleteModal} + onClick={() => setOpen(true)} disabled={ buttonDisabled || ioc.operationInProgress || diff --git a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js index 19a94f5268e4991884de45dfdd5df593e22f538c..ac33d4e5ee303dec93e185dc327fa81ad0c00aca 100644 --- a/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js +++ b/src/components/IOC/IOCDeployDialog/IOCDeployDialog.js @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { styled } from "@mui/material/styles"; import { Button, TextField, @@ -17,23 +16,6 @@ import { useCSEntrySearch, useTagsAndCommitIds } from "../../../api/SwaggerApi"; import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer"; import { formatDate, transformHostQuery } from "../../common/Helper"; -const PREFIX = "IOCDeployDialog"; - -const classes = { - textField: `${PREFIX}-textField`, - alert: `${PREFIX}-alert` -}; - -const StyledDialog = styled(Dialog)(({ theme }) => ({ - [`& .${classes.textField}`]: { - marginBottom: theme.spacing(1) - }, - - [`& .${classes.alert}`]: { - marginTop: theme.spacing(1) - } -})); - export function IOCDeployDialog({ open, setOpen, @@ -94,13 +76,11 @@ export function IOCDeployDialog({ <tr> <td style={{ width: "7em", maxWidth: "7em" }}> <Typography - style={{ - fontFamily: "monospace", - fontWeight: "bolder", - overflow: "hidden", - textOverflow: "ellipsis", - whiteSpace: "nowrap" - }} + fontFamily="monospace" + fontWeight="bolder" + overflow="hidden" + textOverflow="ellipsis" + whiteSpace="nowrap" > {option.shortReference} </Typography> @@ -108,7 +88,8 @@ export function IOCDeployDialog({ <td style={{ width: "1em" }}>-</td> <td> <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} + fontFamily="monospace" + display="inline-block" > {formatDate(option.commitDate)} </Typography> @@ -119,18 +100,27 @@ export function IOCDeployDialog({ } return ( - <StyledDialog + <Dialog open={open} onClose={handleClose} > <form onSubmit={onSubmit}> - <DialogTitle id="form-dialog-title"> + <DialogTitle + id="form-dialog-title" + variant="h2" + > {hasActiveDeployment ? "Deploy revision" : "Deploy"} </DialogTitle> - <DialogContent> + <DialogContent + sx={{ + gap: 1.5, + display: "flex", + flexDirection: "column", + minWidth: "600px" + }} + > <TextField autoComplete="off" - className={classes.textField} id="git" label="Git repository" variant="standard" @@ -145,7 +135,6 @@ export function IOCDeployDialog({ /> <Autocomplete - className={classes.textField} autoHighlight id="version" options={tagOrCommitId} @@ -214,7 +203,6 @@ export function IOCDeployDialog({ /> <Autocomplete - className={classes.textField} autoHighlight id="host" options={hosts.hostList} @@ -259,23 +247,14 @@ export function IOCDeployDialog({ /> {hasActiveDeployment ? ( - <Typography variant="body"> + <Typography variant="body2"> Hint: First undeploy IOC if you want to move to another host. </Typography> ) : ( <></> )} - {error ? ( - <Alert - severity="error" - className={classes.alert} - > - {error} - </Alert> - ) : ( - <></> - )} + {error ? <Alert severity="error">{error}</Alert> : <></>} </DialogContent> <DialogActions> <Button @@ -294,6 +273,6 @@ export function IOCDeployDialog({ </Button> </DialogActions> </form> - </StyledDialog> + </Dialog> ); } diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js index ac55cd42ae6f05a68e62340ae35bbcdcd71835f8..5f6c516836404cab16e5cd3131d9385eda737b7b 100644 --- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js +++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.js @@ -1,6 +1,5 @@ -import React, { useState, useEffect, useRef, useCallback } from "react"; -import { styled } from "@mui/material/styles"; -import { SimpleAccordion } from "@ess-ics/ce-ui-common"; +import React, { useState, useEffect, useCallback } from "react"; +import { SimpleAccordion, ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { Button, CircularProgress, @@ -16,23 +15,8 @@ import { useUpdateIoc } from "../../../api/SwaggerApi"; import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer"; -import { ConfirmationDialog } from "../../dialog/ConfirmationDialog"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; import AccessControl from "../../auth/AccessControl"; -const PREFIX = "IOCDetailAdmin"; - -const classes = { - textField: `${PREFIX}-textField` -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.textField}`]: { - marginBottom: theme.spacing(1) - } -})); - export default function IOCDetailAdmin({ ioc, getIOC, @@ -55,11 +39,8 @@ export default function IOCDetailAdmin({ }); // for the dialog - const [adHocDialogOpen, setAdHocDialogOpen] = useState(false); - const [adHocDialogTitle, setAdHocDiatlogTitle] = useState(); - const [adHocDialogDescription, setAdHocDialogDescription] = useState(); + const [open, setOpen] = useState(false); const [error, setError] = useState(); - const callbackRef = useRef(); function onError(message) { setError(message); @@ -87,37 +68,19 @@ export default function IOCDetailAdmin({ // when user clicks Submit button a dialog should open const onSubmit = (event) => { event.preventDefault(); - - openModifyModal(); + setOpen(true); }; - // Setting up dialog properties - const openModifyModal = () => { - setAdHocDiatlogTitle("Modifying IOC"); - setAdHocDialogDescription( - <Root> - <Typography style={{ display: "inline-block" }}> - Are you sure want to modify - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </Root> - ); - callbackRef.current = modifyIoc; - setAdHocDialogOpen(true); - }; + const onClose = useCallback(() => { + setOpen(false); + }, [setOpen]); - // what to do when modifying IOC - const modifyIoc = () => { + const onConfirm = useCallback(() => { actionUpdateIoc({ gitProjectId: gitId, namingUuid: name ? name.uuid : null }); - }; + }, [actionUpdateIoc, gitId, name]); useEffect(() => { if (uioc) { @@ -140,7 +103,6 @@ export default function IOCDetailAdmin({ return ( <Tooltip title={nameDisabledTitle}> <Autocomplete - className={classes.textField} autoHighlight id="namingName" options={names} @@ -191,7 +153,6 @@ export default function IOCDetailAdmin({ const loading = loadingAllowedGitProjects && !isDisabled; return ( <Autocomplete - className={classes.textField} autoHighlight id="gitId" options={allowedGitProjects} @@ -245,19 +206,28 @@ export default function IOCDetailAdmin({ return ( <> - <SimpleModal - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - > - <ConfirmationDialog - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - title={adHocDialogTitle} - description={adHocDialogDescription} - callback={callbackRef.current} - /> - </SimpleModal> - + <ConfirmationDialog + title="Modifying IOC" + description={ + <> + <Typography component="span"> + Are you sure want to modify + <Typography + component="span" + fontFamily="monospace" + > + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Modify IOC" + cancelText="Cancel" + open={open} + onClose={onClose} + onConfirm={onConfirm} + /> <SimpleAccordion summary="Modify IOC" defaultExpanded diff --git a/src/components/IOC/IOCManage/IOCManage.js b/src/components/IOC/IOCManage/IOCManage.js index e1378e4d82fa1ccd8a5d0b870b5d4047ec727af6..e4fccae3cdbbf21bd6424ddd5aa7dad94d4b43df 100644 --- a/src/components/IOC/IOCManage/IOCManage.js +++ b/src/components/IOC/IOCManage/IOCManage.js @@ -3,7 +3,6 @@ import React, { useState, useEffect, useContext, useCallback } from "react"; import { IOCDetails } from "../IOCDetails"; import { DeployIOC } from "../DeployIOC"; import { UndeployIOC } from "../UndeployIOC"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; import { useUpdateAndDeployIoc, useCreateUndeployment, @@ -221,31 +220,21 @@ export function IOCManage({ loading={operationsLoading} /> </SimpleAccordion> - <SimpleModal + <DeployIOC open={deployDialogOpen} setOpen={setDeployDialogOpen} - > - <DeployIOC - open={deployDialogOpen} - setOpen={setDeployDialogOpen} - submitCallback={closeDeployModal} - init={formInit} - hook={useUpdateAndDeployIoc.bind(null, ioc.id)} - hasActiveDeployment={ioc.activeDeployment} - /> - </SimpleModal> - <SimpleModal + submitCallback={closeDeployModal} + init={formInit} + hook={useUpdateAndDeployIoc.bind(null, ioc.id)} + hasActiveDeployment={ioc.activeDeployment} + /> + <UndeployIOC open={undeployDialogOpen} setOpen={setUndeployDialogOpen} - > - <UndeployIOC - open={undeployDialogOpen} - setOpen={setUndeployDialogOpen} - submitCallback={closeUndeployModal} - ioc={ioc} - hook={useCreateUndeployment.bind(null, ioc.id)} - /> - </SimpleModal> + submitCallback={closeUndeployModal} + ioc={ioc} + hook={useCreateUndeployment.bind(null, ioc.id)} + /> </AccessControl> </> ); diff --git a/src/components/IOC/IOCService/IOCService.js b/src/components/IOC/IOCService/IOCService.js index 6f42bda0666a16a8cbbf60a39948003d81b08645..9f3bfab787b5c474ed0c2f89155cb1f78c97d8eb 100644 --- a/src/components/IOC/IOCService/IOCService.js +++ b/src/components/IOC/IOCService/IOCService.js @@ -6,10 +6,9 @@ import { Tooltip } from "@mui/material"; import { styled } from "@mui/material/styles"; -import React, { useState, useEffect, useRef, useContext } from "react"; +import React, { useState, useEffect, useContext, useCallback } from "react"; import { useStartIOC, useStopIOC } from "../../../api/SwaggerApi"; -import { SimpleModal } from "../../common/SimpleModal/SimpleModal"; -import { ConfirmationDialog } from "../../dialog/ConfirmationDialog"; +import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { notificationContext } from "../../common/notification/Notifications"; import Alert from "@mui/material/Alert"; import { initRequestParams } from "../../common/Helper"; @@ -59,11 +58,9 @@ export function IOCService({ const [startJob, startIOC, resetStartJob] = useStartIOC(ioc.id, onError); const [stopJob, stopIOC, resetStopJob] = useStopIOC(ioc.id, onError); const [inProgress, setInProgress] = useState(false); - const [adHocDialogOpen, setAdHocDialogOpen] = useState(false); - const [adHocDialogTitle, setAdHocDiatlogTitle] = useState(); - const [adHocDialogDescription, setAdHocDialogDescription] = useState(); + const [startModalOpen, setStartModalOpen] = useState(false); + const [stopModalOpen, setStopModalOpen] = useState(false); const [command, setCommand] = useState(null); - const callbackRef = useRef(); const { watchCommand } = useContext(notificationContext); useEffect(() => { @@ -81,72 +78,68 @@ export function IOCService({ } }, [startJob, stopJob, command, watchCommand, currentCommand, navigate]); - function resetUI() { + const resetUI = useCallback(() => { setCommand(null); resetStartJob(); resetStopJob(); setError(null); - } + }, [resetStartJob, resetStopJob]); - const start = async () => { + const start = useCallback(() => { resetUI(); setInProgress(true); setButtonDisabled(true); - await startIOC(); + + startIOC(); + let requestParams = initRequestParams(jobLazyParams); + requestParams.deployment_id = ioc.activeDeployment?.id; getOperations(requestParams); - }; - - const stop = async () => { + }, [ + getOperations, + ioc.activeDeployment?.id, + jobLazyParams, + resetUI, + setButtonDisabled, + startIOC + ]); + + const stop = useCallback(() => { resetUI(); setInProgress(true); setButtonDisabled(true); - await stopIOC(); + + stopIOC(); let requestParams = initRequestParams(jobLazyParams); requestParams.deployment_id = ioc.activeDeployment?.id; getOperations(requestParams); - }; - - const openStartModal = () => { - setAdHocDiatlogTitle("Starting IOC"); - setAdHocDialogDescription( - <> - <Typography style={{ display: "inline-block" }}> - Are you sure want to start - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </> - ); - callbackRef.current = start; - setAdHocDialogOpen(true); - }; - - const openStopModal = () => { - setAdHocDiatlogTitle("Stopping IOC"); - setAdHocDialogDescription( - <> - <Typography style={{ display: "inline-block" }}> - Are you sure want to stop - </Typography> - <Typography - style={{ fontFamily: "monospace", display: "inline-block" }} - > - {" "} - {ioc.namingName}?{" "} - </Typography> - </> - ); - callbackRef.current = stop; - setAdHocDialogOpen(true); - }; + }, [ + getOperations, + ioc.activeDeployment?.id, + jobLazyParams, + resetUI, + setButtonDisabled, + stopIOC + ]); + + const onStartModalClose = useCallback(() => { + setStartModalOpen(false); + }, [setStartModalOpen]); + + const onStartModalConfirm = useCallback(() => { + start(); + }, [start]); + + const onStopModalClose = useCallback(() => { + setStopModalOpen(false); + }, [setStopModalOpen]); + + const onStopModalConfirm = useCallback(() => { + stop(); + }, [stop]); let disabledStartButtonTitle = ""; if (buttonDisabled || ioc.operationInProgress) { @@ -165,19 +158,50 @@ export function IOCService({ allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]} renderNoAccess={() => "You are not authorized to control this IOC"} > - <SimpleModal - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - > - <ConfirmationDialog - open={adHocDialogOpen} - setOpen={setAdHocDialogOpen} - title={adHocDialogTitle} - description={adHocDialogDescription} - callback={callbackRef.current} - /> - </SimpleModal> - + <ConfirmationDialog + title="Start IOC" + description={ + <> + <Typography component="span"> + Are you sure want to start{" "} + <Typography + component="span" + fontFamily="monospace" + > + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Start IOC" + cancelText="Cancel" + open={startModalOpen} + onClose={onStartModalClose} + onConfirm={onStartModalConfirm} + /> + <ConfirmationDialog + title="Stop IOC" + description={ + <> + <Typography component="span"> + Are you sure want to stop{" "} + <Typography + component="span" + fontFamily="monospace" + > + {ioc.namingName} + </Typography>{" "} + ? + </Typography> + </> + } + confirmText="Stop IOC" + cancelText="Cancel" + open={stopModalOpen} + onClose={onStopModalClose} + onConfirm={onStopModalConfirm} + /> <Grid container spacing={1} @@ -185,7 +209,7 @@ export function IOCService({ <Grid item> <Tooltip title={disabledStopButtonTitle}> <StopButton - onClick={openStopModal} + onClick={() => setStopModalOpen(true)} disabled={buttonDisabled} > Stop @@ -195,7 +219,7 @@ export function IOCService({ <Grid item> <Tooltip title={disabledStartButtonTitle}> <StartButton - onClick={openStartModal} + onClick={() => setStartModalOpen(true)} disabled={buttonDisabled} > Start diff --git a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js index 1fc84a3e51a62e43bfb5e60212012fd9bcfaaa2f..1e2c50faaa003082ee47ff29f67eff6f03a23729 100644 --- a/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js +++ b/src/components/IOC/IOCUndeployDialog/IOCUndeployDialog.js @@ -1,27 +1,14 @@ import React from "react"; -import { styled } from "@mui/material/styles"; import { Button, Dialog, DialogActions, DialogContent, DialogTitle, - DialogContentText + Typography } from "@mui/material"; import Alert from "@mui/material/Alert"; -const PREFIX = "IOCUndeployDialog"; - -const classes = { - textField: `${PREFIX}-textField` -}; - -const StyledDialog = styled(Dialog)(({ theme }) => ({ - [`& .${classes.textField}`]: { - marginBottom: theme.spacing(1) - } -})); - export function IOCUndeployDialog({ open, setOpen, @@ -40,27 +27,25 @@ export function IOCUndeployDialog({ }; return ( - <StyledDialog + <Dialog open={open} onClose={handleClose} > <form onSubmit={onSubmit}> - <DialogTitle id="form-dialog-title">Undeploy</DialogTitle> - <DialogContent> - <DialogContentText> + <DialogTitle + id="form-dialog-title" + variant="h2" + > + Undeploy + </DialogTitle> + <DialogContent + sx={{ gap: 1.5, display: "flex", flexDirection: "column" }} + > + <Typography> Do you really want to undeploy {ioc.namingName} from{" "} - {ioc.activeDeployment.host.fqdn}? - </DialogContentText> - {error ? ( - <Alert - severity="error" - className={classes.alert} - > - {error} - </Alert> - ) : ( - <></> - )} + {ioc?.activeDeployment?.host?.fqdn}? + </Typography> + {error ? <Alert severity="error">{error}</Alert> : <></>} </DialogContent> <DialogActions> <Button @@ -78,6 +63,6 @@ export function IOCUndeployDialog({ </Button> </DialogActions> </form> - </StyledDialog> + </Dialog> ); } diff --git a/src/components/auth/Login/Login.js b/src/components/auth/Login/Login.js deleted file mode 100644 index 4f75b05b355c6b31b37e67b5baedf42ab6c2a801..0000000000000000000000000000000000000000 --- a/src/components/auth/Login/Login.js +++ /dev/null @@ -1,116 +0,0 @@ -import React, { useCallback, useEffect, useState } from "react"; -import { styled } from "@mui/material/styles"; -import { - TextField, - Button, - Dialog, - DialogContent, - Box, - LinearProgress, - Stack -} from "@mui/material"; -import Alert from "@mui/material/Alert"; - -const PREFIX = "Login"; - -const classes = { - textField: `${PREFIX}-textField` -}; - -const StyledDialog = styled(Dialog)(({ theme }) => ({ - [`& .${classes.textField}`]: { - marginBottom: theme.spacing(1) - } -})); - -export function LoginForm({ login, error, resetError, onSubmitCallback }) { - const [loading, setLoading] = useState(false); - - const onSubmit = useCallback( - (event) => { - event.preventDefault(); - const username = document.getElementById("username").value; - const password = document.getElementById("password").value; - login(username, password); - resetError(); - setLoading(true); - onSubmitCallback && onSubmitCallback(); - }, - [login, onSubmitCallback, resetError] - ); - - useEffect(() => { - if (error) { - setLoading(false); - } - }, [error]); - - return ( - <Stack - component="form" - spacing={1} - > - <TextField - id="username" - className={classes.textField} - label="Username" - variant="outlined" - onChange={resetError} - fullWidth - autoFocus - required - /> - <TextField - id="password" - className={classes.textField} - label="Password" - variant="outlined" - type="password" - onChange={resetError} - fullWidth - required - /> - {error && <Alert severity="error">{error}</Alert>} - <Button - fullWidth - variant="contained" - color="primary" - onClick={onSubmit} - type="submit" - > - Login - </Button> - {loading && <LinearProgress />} - </Stack> - ); -} - -export function LoginDialog({ - login, - open, - error, - resetError, - loading, - handleClose, - onSubmitCallback -}) { - return ( - <StyledDialog - fullWidth - open={open} - onClose={handleClose} - > - <DialogContent> - <Box marginY={1}> - <LoginForm - login={login} - error={error} - resetError={resetError} - onSubmitCallback={onSubmitCallback} - loading={loading} - /> - </Box> - </DialogContent> - </StyledDialog> - ); -} diff --git a/src/components/auth/Login/index.js b/src/components/auth/Login/index.js deleted file mode 100644 index 0f501ad10ba79231f7fe7582be457a890234ae86..0000000000000000000000000000000000000000 --- a/src/components/auth/Login/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import { LoginForm, LoginDialog } from "./Login"; - -export { LoginForm, LoginDialog }; diff --git a/src/components/common/Console/Console.js b/src/components/common/Console/Console.js index d8a071390e0a631bf5f674d240bb6c138e2b97a9..3fb8fa2c959fd2af20a41389049192e8d1f96c11 100644 --- a/src/components/common/Console/Console.js +++ b/src/components/common/Console/Console.js @@ -3,7 +3,6 @@ import { Container, Button, Grid, Box, LinearProgress } from "@mui/material"; import { Launch } from "@mui/icons-material"; import { ConsoleOutput } from "./ConsoleOutput"; import { LogDialog } from "./LogDialog"; -import { SimpleModal } from "../SimpleModal/SimpleModal"; export function Console({ html, @@ -27,35 +26,29 @@ export function Console({ </div> ) : ( <> - <SimpleModal + <LogDialog open={logDialogOpen} setOpen={setLogDialogOpen} - > - <LogDialog - open={logDialogOpen} - setOpen={setLogDialogOpen} - title={title} - content={ - loading ? ( - <div style={{ width: "100%" }}> - <LinearProgress color="primary" /> - </div> - ) : ( - <Container maxWidth="xl"> - {dialogHeader} - <div style={{ height: 10 }} /> - <ConsoleOutput - html={html} - dataReady={dataReady} - extraClass={extraClass} - shownInDialog - /> - </Container> - ) - } - /> - </SimpleModal> - + title={title} + content={ + loading ? ( + <div style={{ width: "100%" }}> + <LinearProgress color="primary" /> + </div> + ) : ( + <Container maxWidth="xl"> + {dialogHeader} + <div style={{ height: 10 }} /> + <ConsoleOutput + html={html} + dataReady={dataReady} + extraClass={extraClass} + shownInDialog + /> + </Container> + ) + } + /> <Grid container spacing={0} diff --git a/src/components/common/Console/LogDialog.js b/src/components/common/Console/LogDialog.js index 71899f61597cb192b33799022bece8af2eaa4e63..e7f73b8cccd3feb708f4dd409171c2af875091a5 100644 --- a/src/components/common/Console/LogDialog.js +++ b/src/components/common/Console/LogDialog.js @@ -12,8 +12,6 @@ export function LogDialog({ open, setOpen, title, content }) { onClose={handleClose} fullWidth maxWidth="xl" - // TODO: Replace with common element - // styles appear to match... sx={{ "& .MuiDialogTitle-root": { backgroundColor: "primary.main", @@ -21,7 +19,12 @@ export function LogDialog({ open, setOpen, title, content }) { } }} > - <DialogTitle id="log-dialog-title">{title}</DialogTitle> + <DialogTitle + id="log-dialog-title" + variant="h2" + > + {title} + </DialogTitle> <DialogContent>{content}</DialogContent> </Dialog> ); diff --git a/src/components/common/SimpleModal/SimpleModal.js b/src/components/common/SimpleModal/SimpleModal.js deleted file mode 100644 index 87b475c85e99d9b80ebaa54d4a00ccbb5ad92a80..0000000000000000000000000000000000000000 --- a/src/components/common/SimpleModal/SimpleModal.js +++ /dev/null @@ -1,57 +0,0 @@ -import React from "react"; -import { styled } from "@mui/material/styles"; -import { Dialog } from "@mui/material"; -const PREFIX = "SimpleModal"; - -const classes = { - paper: `${PREFIX}-paper` -}; - -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.paper}`]: { - position: "absolute", - width: 400, - backgroundColor: theme.palette.background.paper, - border: "2px solid #000", - boxShadow: theme.shadows[5], - padding: theme.spacing(2, 4, 3) - } -})); - -function getModalStyle() { - const top = 50; - const left = 50; - - return { - top: `${top}%`, - left: `${left}%`, - transform: `translate(-${top}%, -${left}%)` - }; -} - -export function SimpleModal({ open, setOpen, children }) { - // getModalStyle is not a pure function, we roll the style only on the first render - const [modalStyle] = React.useState(getModalStyle); - - const handleClose = () => { - setOpen(false); - }; - - return ( - <Root> - <Dialog - open={open} - onClose={handleClose} - aria-labelledby="simple-modal-title" - aria-describedby="simple-modal-description" - > - <div - style={modalStyle} - className={classes.paper} - > - {children} - </div> - </Dialog> - </Root> - ); -} diff --git a/src/components/common/SimpleModal/index.js b/src/components/common/SimpleModal/index.js deleted file mode 100644 index e57ea87346a77d76cd001729214eb4991d4fa4be..0000000000000000000000000000000000000000 --- a/src/components/common/SimpleModal/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { SimpleModal } from "./SimpleModal"; - -export { SimpleModal }; -export default SimpleModal; diff --git a/src/components/dialog/ConfirmationDialog.js b/src/components/dialog/ConfirmationDialog.js deleted file mode 100644 index 699d7e8aa4d3daf67612dd726c33a98033040dfe..0000000000000000000000000000000000000000 --- a/src/components/dialog/ConfirmationDialog.js +++ /dev/null @@ -1,79 +0,0 @@ -import React from "react"; -import { styled } from "@mui/material/styles"; -import { - Button, - Dialog, - DialogActions, - DialogContent, - DialogTitle, - DialogContentText -} from "@mui/material"; -const PREFIX = "ConfirmationDialog"; - -const classes = { - title: `${PREFIX}-title` -}; - -// TODO jss-to-styled codemod: The Fragment root was replaced by div. Change the tag if needed. -const Root = styled("div")(({ theme }) => ({ - [`& .${classes.title}`]: { - backgroundColor: "#0099dc", - color: "#FFFFFF" - } -})); - -export function ConfirmationDialog({ - open, - setOpen, - title, - description, - callback -}) { - const handleClose = () => { - setOpen(false); - }; - - const handleConfirm = () => { - callback(); - setOpen(false); - }; - - return ( - <Root> - <Dialog - open={open} - onClose={handleClose} - aria-labelledby="confirm-dialog-title" - aria-describedby="confirm-dialog-description" - > - <DialogTitle - id="confirm-dialog-title" - className={classes.title} - > - {title} - </DialogTitle> - <DialogContent> - <DialogContentText id="confirm-dialog-description"> - {description} - </DialogContentText> - </DialogContent> - <DialogActions> - <Button - onClick={handleClose} - color="primary" - > - No - </Button> - <Button - onClick={handleConfirm} - color="primary" - variant="contained" - autoFocus - > - Yes - </Button> - </DialogActions> - </Dialog> - </Root> - ); -} diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js deleted file mode 100644 index 0a5263fd66b8b630476110b45b21dd82f781e867..0000000000000000000000000000000000000000 --- a/src/components/dialog/index.js +++ /dev/null @@ -1,4 +0,0 @@ -import { ConfirmationDialog } from "./ConfirmationDialog"; - -export { ConfirmationDialog }; -export default ConfirmationDialog; diff --git a/src/mocks/fixtures/Hosts.json b/src/mocks/fixtures/Hosts.json new file mode 100644 index 0000000000000000000000000000000000000000..66475d81381424b2ba57a4d1484da9342127a94f --- /dev/null +++ b/src/mocks/fixtures/Hosts.json @@ -0,0 +1,890 @@ +{ + "totalCount": 812, + "listSize": 100, + "pageNumber": 0, + "limit": 100, + "csEntryHosts": [ + { + "csEntryHost": { + "id": 2191, + "fqdn": "pbi-bcm03-mtca-ioc01.cslab.esss.lu.se", + "name": "pbi-bcm03-mtca-ioc01", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-BeamDiag", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2205, + "fqdn": "pbi-bcm04-mtca-ioc01.cslab.esss.lu.se", + "name": "pbi-bcm04-mtca-ioc01", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-BeamDiag", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2176, + "fqdn": "pbi-bcm05-mtca-ioc01.cslab.esss.lu.se", + "name": "pbi-bcm05-mtca-ioc01", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-BeamDiag", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3704, + "fqdn": "pbi-bpm01-mtca-ioc02.tn.esss.lu.se", + "name": "pbi-bpm01-mtca-ioc02", + "scope": "TechnicalNetwork", + "description": "BPM01 DTL 010-020 CPU02", + "network": "ChannelAccess-FEB", + "deviceType": "MTCA-AMC" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3703, + "fqdn": "pbi-bpm01-mtca-ioc03.cslab.esss.lu.se", + "name": "pbi-bpm01-mtca-ioc03", + "scope": "LabNetworks", + "description": "MEBT BPM - CPU 2 (lab test)", + "network": "CSLab-BeamDiag", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4937, + "fqdn": "pbi-emu01-dev-ioc01.cslab.esss.lu.se", + "name": "pbi-emu01-dev-ioc01", + "scope": "LabNetworks", + "description": "VM for development of MEBT EMU auxiliary systems.", + "network": "CSLab-BeamDiag", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2108, + "fqdn": "pbi-emu02-mtca-ifc02.tn.esss.lu.se", + "name": "pbi-emu02-mtca-ifc02", + "scope": "TechnicalNetwork", + "description": "IFC1410 CPU for MEBT EMU - located in BI LAB Equipped with two ADC3117 FMC (second unit)", + "network": "ChannelAccess-FEB", + "deviceType": "MTCA-IFC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4991, + "fqdn": "pbi-fbpm-vm-ioc01.tn.esss.lu.se", + "name": "pbi-fbpm-vm-ioc01", + "scope": "TechnicalNetwork", + "description": "VM for running e3-ioc-pbi-fastbpm01 IOC.", + "network": "ChannelAccess-FEB", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2193, + "fqdn": "pbi-ws01-mtca-ioc01.tn.esss.lu.se", + "name": "pbi-ws01-mtca-ioc01", + "scope": "TechnicalNetwork", + "description": "MEBT Wire Scanner MTCA CPU PBI-WS01", + "network": "ChannelAccess-FEB", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 5580, + "fqdn": "pbwrv-ioc-110.cslab.esss.lu.se", + "name": "pbwrv-ioc-110", + "scope": "LabNetworks", + "description": "IOC for PBWRV gauge controllers", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4900, + "fqdn": "pbwvcs-ioc-001.cslab.esss.lu.se", + "name": "pbwvcs-ioc-001", + "scope": "LabNetworks", + "description": "IOC for Tgt-PBWRV:Vac-PLC-001", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2665, + "fqdn": "phys-machine-demo.cslab.esss.lu.se", + "name": "phys-machine-demo", + "scope": "LabNetworks", + "description": "Demo of a physical machine for docs", + "network": "Utgard-Dev", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1341, + "fqdn": "ics-vm-mc-ioc-01.cslab.esss.lu.se", + "name": "ics-vm-mc-ioc-01", + "scope": "LabNetworks", + "description": "Virtual machine to support Motion Control (MC) EPICS IOCs on Utgard laboratory", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 287, + "fqdn": "ioc-lebt-test.tn.esss.lu.se", + "name": "ioc-lebt-test", + "scope": "TechnicalNetwork", + "description": null, + "network": "ISRC-LEBT-Profinet", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 355, + "fqdn": "ioc-mcc1.tn.esss.lu.se", + "name": "ioc-mcc1", + "scope": "TechnicalNetwork", + "description": "TMCP", + "network": "ChannelAccess-CRYO", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1196, + "fqdn": "ion-pump-dev.cslab.esss.lu.se", + "name": "ion-pump-dev", + "scope": "LabNetworks", + "description": "Machine for Ion Pump IOC development", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3477, + "fqdn": "ipc-picoscope-ioc.tn.esss.lu.se", + "name": "ipc-picoscope-ioc", + "scope": "TechnicalNetwork", + "description": "IPC for picoscope IOC", + "network": "ChannelAccess-ACC", + "deviceType": "PhysicalMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 114, + "fqdn": "isrc-lebt-ipc-test.tn.esss.lu.se", + "name": "isrc-lebt-ipc-test", + "scope": "TechnicalNetwork", + "description": "Machine shut off 2022-04-01 - https://jira.esss.lu.se/browse/INFRA-5057", + "network": "ICSVMs", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2981, + "fqdn": "isrc-lebt-vm.cslab.esss.lu.se", + "name": "isrc-lebt-vm", + "scope": "LabNetworks", + "description": "ISRC-LEBT Virtual Machine : Intended to host the IOCs", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2506, + "fqdn": "isrc-mtca-ioc1-obsolete.cslab.esss.lu.se", + "name": "isrc-mtca-ioc1-obsolete", + "scope": "LabNetworks", + "description": "ICSHWI-5294 Magnetron PS, LEBT and MEBT chopper triggering\r\nISrc:Ctrl-CPU-1", + "network": "CSLab-GeneralLab", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4338, + "fqdn": "javier-test.cslab.esss.lu.se", + "name": "javier-test", + "scope": "LabNetworks", + "description": "Used for remote tests", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1736, + "fqdn": "jkazan.cslab.esss.lu.se", + "name": "jkazan", + "scope": "LabNetworks", + "description": "VM used for IOCs", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1060, + "fqdn": "jsparger-test.cslab.esss.lu.se", + "name": "jsparger-test", + "scope": "LabNetworks", + "description": "first test virtual machine", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2921, + "fqdn": "julmur-vm-01.cslab.esss.lu.se", + "name": "julmur-vm-01", + "scope": "LabNetworks", + "description": "Juliano Murari virtual machine", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2637, + "fqdn": "lab-deploy-test-ioc.cslab.esss.lu.se", + "name": "lab-deploy-test-ioc", + "scope": "LabNetworks", + "description": "Test the ioc box ", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2638, + "fqdn": "lab-deploy-test-ioc2.cslab.esss.lu.se", + "name": "lab-deploy-test-ioc2", + "scope": "LabNetworks", + "description": "An example host for docs", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2639, + "fqdn": "lab-deploy-test-ioc3.cslab.esss.lu.se", + "name": "lab-deploy-test-ioc3", + "scope": "LabNetworks", + "description": "An example host for docs", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 5443, + "fqdn": "lab-fbpm-vm-ioctest.cslab.esss.lu.se", + "name": "lab-fbpm-vm-ioctest", + "scope": "LabNetworks", + "description": "vm for fastbpm TEST ioc.", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3919, + "fqdn": "lab-mot-ctrl-cpu-1.cslab.esss.lu.se", + "name": "lab-mot-ctrl-cpu-1", + "scope": "LabNetworks", + "description": "MCAG MTCA ecmc mrf b02", + "network": "CSLab-MotionLab-05", + "deviceType": "MTCA-AMC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 612, + "fqdn": "lab-mps-ioc01.cslab.esss.lu.se", + "name": "lab-mps-ioc01", + "scope": "LabNetworks", + "description": "IOC machine to test MPS subsystems", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4501, + "fqdn": "lab-mps-ioc02.cslab.esss.lu.se", + "name": "lab-mps-ioc02", + "scope": "LabNetworks", + "description": "new IOC machine to test MPS subsystems", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 5595, + "fqdn": "lab-mps-ioc03.cslab.esss.lu.se", + "name": "lab-mps-ioc03", + "scope": "LabNetworks", + "description": "Third IOC machine to test MPS subsystems", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1253, + "fqdn": "lab-rflps-sim-ioc-01.cslab.esss.lu.se", + "name": "lab-rflps-sim-ioc-01", + "scope": "LabNetworks", + "description": "Virtual Machine to test Slow Interlocks Modules in the LAB", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3530, + "fqdn": "lab-rflps-sim-ioc-02.cslab.esss.lu.se", + "name": "lab-rflps-sim-ioc-02", + "scope": "LabNetworks", + "description": "RFLPS SIM IOC - Slow Interlocks Module for LAB", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4042, + "fqdn": "lab-rf-vm-ioc.cslab.esss.lu.se", + "name": "lab-rf-vm-ioc", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4521, + "fqdn": "lab-rf-vm-ioc-02.cslab.esss.lu.se", + "name": "lab-rf-vm-ioc-02", + "scope": "LabNetworks", + "description": "Test machine for lab IOCs", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1965, + "fqdn": "lab-rssma100a-ioc2.cslab.esss.lu.se", + "name": "lab-rssma100a-ioc2", + "scope": "LabNetworks", + "description": "VM running is CSLab for hosting the SMA100A RF generators IOCs", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3989, + "fqdn": "lab-scanning-test.cslab.esss.lu.se", + "name": "lab-scanning-test", + "scope": "LabNetworks", + "description": "EMU Scanning algorithm test", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 843, + "fqdn": "larsjohanssontest.cslab.esss.lu.se", + "name": "larsjohanssontest", + "scope": "LabNetworks", + "description": "test git repository for ioc-factory", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 315, + "fqdn": "lcr-operation.tn.esss.lu.se", + "name": "lcr-operation", + "scope": "TechnicalNetwork", + "description": "This VM is to run IOC to track the LCR shift operation.", + "network": "ChannelAccess-FEB", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4453, + "fqdn": "fbis-lab-vm01.cslab.esss.lu.se", + "name": "fbis-lab-vm01", + "scope": "LabNetworks", + "description": "Development machine for FBIS IFC1410 IOC", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4601, + "fqdn": "fbis-vm-ioc01.tn.esss.lu.se", + "name": "fbis-vm-ioc01", + "scope": "TechnicalNetwork", + "description": "VM for running FBIS top level IOC", + "network": "ChannelAccess-PS", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4903, + "fqdn": "fedel-vm.tn.esss.lu.se", + "name": "fedel-vm", + "scope": "TechnicalNetwork", + "description": null, + "network": "ChannelAccess-ACC", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4955, + "fqdn": "gabourin-vm.cslab.esss.lu.se", + "name": "gabourin-vm", + "scope": "LabNetworks", + "description": "VM for SW and EPICS development", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 748, + "fqdn": "georgesblanc.cslab.esss.lu.se", + "name": "georgesblanc", + "scope": "LabNetworks", + "description": "Georg Weiss test instance", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2745, + "fqdn": "gitlabrunner-e3-test.cslab.esss.lu.se", + "name": "gitlabrunner-e3-test", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4405, + "fqdn": "hvac-opcua-test.cslab.esss.lu.se", + "name": "hvac-opcua-test", + "scope": "LabNetworks", + "description": "Virtual machine to run test tools against the Siemens Desigo OPCUA server for HVAC integration", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3329, + "fqdn": "ics-alo-vm-4.cslab.esss.lu.se", + "name": "ics-alo-vm-4", + "scope": "LabNetworks", + "description": "Test host w 4 cores and 4 GB RAM", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3806, + "fqdn": "ics-alo-vm-5.cslab.esss.lu.se", + "name": "ics-alo-vm-5", + "scope": "LabNetworks", + "description": "test machine for deployment systems", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4906, + "fqdn": "ics-andrebengtsson.cslab.esss.lu.se", + "name": "ics-andrebengtsson", + "scope": "LabNetworks", + "description": "Development machine on CSLab-Generallab", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4977, + "fqdn": "ics-andreb-vm-lab-ioc.cslab.esss.lu.se", + "name": "ics-andreb-vm-lab-ioc", + "scope": "LabNetworks", + "description": "Development machine on CSLab-Generallab", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 5117, + "fqdn": "ics-bevm-lds.cslab.esss.lu.se", + "name": "ics-bevm-lds", + "scope": "LabNetworks", + "description": "This VM is for test the created ioc using lds.", + "network": "CSLab-ECDC-DEV", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 431, + "fqdn": "ics-commissioning.tn.esss.lu.se", + "name": "ics-commissioning", + "scope": "TechnicalNetwork", + "description": "USB->Ethernet adapter located in ICS Ambulance (https://jira.esss.lu.se/browse/ICSHWI-1324).", + "network": "ChannelAccess-FEB", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2717, + "fqdn": "ics-devvm-nh-01.cslab.esss.lu.se", + "name": "ics-devvm-nh-01", + "scope": "LabNetworks", + "description": "Nicklas Holmbergs test VM", + "network": "Utgard-Dev", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 479, + "fqdn": "ics-ipc-01.cslab.esss.lu.se", + "name": "ics-ipc-01", + "scope": "LabNetworks", + "description": null, + "network": "CSLab-GeneralLab", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1044, + "fqdn": "icslab-mtca5-ifc-10.cslab.esss.lu.se", + "name": "icslab-mtca5-ifc-10", + "scope": "LabNetworks", + "description": "uTCA IFC14xx in icslab, rack 6, crate 5, slot 10", + "network": "CSLab-GeneralLab", + "deviceType": "MTCA-IFC" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 1294, + "fqdn": "icslab-tdklpsc3s-ioc.cslab.esss.lu.se", + "name": "icslab-tdklpsc3s-ioc", + "scope": "LabNetworks", + "description": "VM to test TDK LAMBDA PS ", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3472, + "fqdn": "ics-ldstest-01.cslab.esss.lu.se", + "name": "ics-ldstest-01", + "scope": "LabNetworks", + "description": "LDS test and demo", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 507, + "fqdn": "ics-moxa-debug-01.tn.esss.lu.se", + "name": "ics-moxa-debug-01", + "scope": "TechnicalNetwork", + "description": "ICS MOXA used to debug devices at Front End Building", + "network": "ChannelAccess-FEB", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 2692, + "fqdn": "ics-nhvm-01.cslab.esss.lu.se", + "name": "ics-nhvm-01", + "scope": "LabNetworks", + "description": "Nicklas Holmberg VM machine to test inventory deployment\r\n", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4829, + "fqdn": "ics-saeed-vm-2.cslab.esss.lu.se", + "name": "ics-saeed-vm-2", + "scope": "LabNetworks", + "description": "VM for testing", + "network": "CSLab-GeneralLab", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 4814, + "fqdn": "dream-chpsy1-ipc-01.cslab.esss.lu.se", + "name": "dream-chpsy1-ipc-01", + "scope": "LabNetworks", + "description": "Dream Rack 1 IPC", + "network": "CSLab-Embla-GeneralLab", + "deviceType": "PhysicalMachine" + }, + "status": "UNREACHABLE", + "alertSeverity": "INFO", + "iocDeployed": false + }, + { + "csEntryHost": { + "id": 3527, + "fqdn": "dtl-010-solps-ioc.tn.esss.lu.se", + "name": "dtl-010-solps-ioc", + "scope": "TechnicalNetwork", + "description": "IOC Host- DTL RF System - Klystron auxiliary - solenoid power supply", + "network": "ChannelAccess-ACC", + "deviceType": "VirtualMachine" + }, + "status": "AVAILABLE", + "alertSeverity": "INFO", + "iocDeployed": false + } + ] +} diff --git a/src/mocks/mockAPI.js b/src/mocks/mockAPI.js index 010a2cc137b5cb378c3d0a7289964cee008701f0..ba4173b6cd4d93bf8c52824264ca06121d3240e9 100644 --- a/src/mocks/mockAPI.js +++ b/src/mocks/mockAPI.js @@ -178,6 +178,12 @@ function getCSEntryHostWithStatus(req) { return { body, status }; } +function listHosts(req) { + const data = require("./fixtures/Hosts.json"); + const body = withMockPagination({ req, data, key: "csEntryHosts" }); + return { body }; +} + function getProcservLogs(req) { const body = require("./fixtures/LokiResponse.json"); return { body }; @@ -275,7 +281,8 @@ const mockAPI = { fetchOperation }, hosts: { - getCSEntryHostWithStatus + getCSEntryHostWithStatus, + listHosts }, git_helper: { infoFromUserName, @@ -386,6 +393,7 @@ export const apiHandlers = [ ), // hosts + makeHandler("GET", qRegExp(".*/hosts"), mockAPI.hosts.listHosts), makeHandler( "GET", qRegExp(".*/hosts/[0-9]+/with_status"), diff --git a/src/style/Theme.js b/src/style/Theme.js index 020ee3d9b3be292bc46b8f1a4411f115124c0a8b..7f35d2576c13c2adc2e8fe51f2a40c553e034107 100644 --- a/src/style/Theme.js +++ b/src/style/Theme.js @@ -23,14 +23,6 @@ let theme = createTheme(ceuiTheme, {}); // add customizations theme = createTheme(theme, { components: { - MuiDialogContent: { - styleOverrides: { - root: { - paddingTop: "0.5rem !important", - paddingBottom: "0.5rem !important" - } - } - }, // TODO: Move to common theme? MuiAlert: { styleOverrides: { diff --git a/src/views/login/LoginView.js b/src/views/login/LoginView.js index 2fc21f3fac3023813baf69ecd5a32d7c32225e9e..b6b0897c1bbcb2e13ea7b2c735b4352b2f3a21f8 100644 --- a/src/views/login/LoginView.js +++ b/src/views/login/LoginView.js @@ -1,8 +1,11 @@ import { Card, CardContent, Grid } from "@mui/material"; import React, { useContext, useEffect } from "react"; import { useLocation } from "react-router-dom"; -import { LoginForm } from "../../components/auth/Login"; -import { GlobalAppBarContext, userContext } from "@ess-ics/ce-ui-common"; +import { + GlobalAppBarContext, + userContext, + LoginForm +} from "@ess-ics/ce-ui-common"; import { useRedirect } from "../../hooks/Redirect"; import { applicationTitle } from "../../components/common/Helper";