From 7890057adc4725862b2c1ba651b902341904b4b8 Mon Sep 17 00:00:00 2001 From: Johanna Szepanski <johanna.szepanski@softhouse.se> Date: Thu, 5 Dec 2024 12:28:00 +0100 Subject: [PATCH] remove not neccessary props between parent and admin tab --- .../AdministerUndeployment.jsx | 66 ++++------- .../IOC/ChangeHostAdmin/ChangeHostAdmin.jsx | 98 ++++++--------- src/components/IOC/DeployIOC/DeployIOC.jsx | 2 +- src/components/IOC/IOCDelete/IOCDelete.jsx | 48 +++----- .../IOC/IOCDetailAdmin/IOCDetailAdmin.jsx | 112 ++++++------------ src/components/IOC/IOCManage/IOCService.jsx | 2 +- src/components/IOC/IOCManage/JobSection.tsx | 4 +- .../IOC/UndeployIOC/UndeployIOC.jsx | 2 +- src/store/enhancedApi.ts | 37 +++++- 9 files changed, 146 insertions(+), 225 deletions(-) diff --git a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.jsx b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.jsx index c2873efc..573f7800 100644 --- a/src/components/IOC/AdministerUndeployment/AdministerUndeployment.jsx +++ b/src/components/IOC/AdministerUndeployment/AdministerUndeployment.jsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useCallback, useContext, useMemo } from "react"; +import { useState, useEffect, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { Box, @@ -8,56 +8,47 @@ import { Tooltip, LinearProgress } from "@mui/material"; -import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common"; -import Alert from "@mui/material/Alert"; +import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { AccessControl } from "../../auth/AccessControl"; -import { apiContext } from "../../../api/DeployApi"; +import { useUnDeployInDbMutation } from "../../../store/enhancedApi"; +import { ApiAlertError } from "../../common/Alerts/ApiAlertError"; -export const AdministerUndeployment = ({ ioc, buttonDisabled }) => { +export const AdministerUndeployment = ({ + ioc, + buttonDisabled, + setButtonDisabled +}) => { const navigate = useNavigate(); - - // for the dialog const [error, setError] = useState(); const [open, setOpen] = useState(false); - const client = useContext(apiContext); - - const params = useMemo( - () => ({ - ioc_id: ioc?.id - }), - [ioc] - ); - - const { - value: response, - wrapper: undeployIOC, - loading, - error: errorResponse - } = useAPIMethod({ - fcn: client.apis.IOCs.unDeployInDb, - call: false, - params - }); + const [ + undeployInDB, + { value: undeployResponse, error: undeployInDBError, isLoading } + ] = useUnDeployInDbMutation(); useEffect(() => { - setError(errorResponse?.message); - }, [errorResponse]); + setError(undeployInDBError); + }, [undeployInDBError]); const onClose = useCallback(() => { setOpen(false); }, []); const onConfirm = useCallback(() => { - undeployIOC(); - }, [undeployIOC]); + setButtonDisabled(true); + undeployInDB({ + iocId: ioc?.id + }); + setButtonDisabled(false); + }, [undeployInDB, ioc, setButtonDisabled]); useEffect(() => { - if (response) { + if (undeployResponse) { setOpen(false); navigate(-1); } - }, [response, navigate]); + }, [undeployResponse, navigate]); let disabledButtonTitle = ""; if (buttonDisabled || ioc.operationInProgress) { @@ -97,7 +88,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => { </Typography>{" "} ? </Typography> - {loading ? <LinearProgress /> : null} + {isLoading && <LinearProgress />} </> } confirmText="Undeploy IOC" @@ -124,7 +115,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => { item xs={12} > - <Alert severity="error">{error}</Alert> + <ApiAlertError error={error} /> </Grid> ) : ( <></> @@ -137,12 +128,7 @@ export const AdministerUndeployment = ({ ioc, buttonDisabled }) => { <span> <Button onClick={() => setOpen(true)} - disabled={ - buttonDisabled || - ioc.operationInProgress || - !ioc.activeDeployment || - loading - } + disabled={buttonDisabled || !ioc.activeDeployment} color="error" variant="contained" > diff --git a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.jsx b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.jsx index cab11f68..21ff327c 100644 --- a/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.jsx +++ b/src/components/IOC/ChangeHostAdmin/ChangeHostAdmin.jsx @@ -1,5 +1,5 @@ -import { useState, useEffect, useCallback, useContext, useMemo } from "react"; -import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common"; +import { useState, useEffect, useCallback, useMemo } from "react"; +import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { Box, Button, @@ -8,20 +8,15 @@ import { Tooltip, TextField, CircularProgress, - Alert, Autocomplete } from "@mui/material"; import { AccessControl } from "../../auth/AccessControl"; import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer"; -import { apiContext } from "../../../api/DeployApi"; +import { useLazyListHostsQuery } from "../../../store/deployApi"; +import { useUpdateActiveDeploymentHostMutation } from "../../../store/enhancedApi"; +import { ApiAlertError } from "../../common/Alerts/ApiAlertError"; -export const ChangeHostAdmin = ({ - ioc, - getIOC, - resetTab, - buttonDisabled, - setButtonDisabled -}) => { +export const ChangeHostAdmin = ({ ioc, buttonDisabled, setButtonDisabled }) => { const initHost = useMemo( () => ({ fqdn: ioc.activeDeployment.host.fqdn, @@ -30,79 +25,57 @@ export const ChangeHostAdmin = ({ [ioc.activeDeployment.host] ); const [host, setHost] = useState(initHost); - const client = useContext(apiContext); + const [error, setError] = useState(); + const [open, setOpen] = useState(false); + const [query, onHostKeyUp] = useTypingTimer({ interval: 500 }); - const { - value: hosts, - wrapper: getHosts, - loading: loadingHosts - } = useAPIMethod({ - fcn: client.apis.Hosts.listHosts, - call: false - }); + const [getHosts, { data: hosts, isLoading: loadingHosts }] = + useLazyListHostsQuery(); - const [query, onHostKeyUp] = useTypingTimer({ interval: 500 }); + const [updateHost, { data: updatedIoc, error: updateHostError }] = + useUpdateActiveDeploymentHostMutation(); const noModification = useCallback( () => !host || host?.hostId === ioc.activeDeployment.host.hostId, [host, ioc] ); - // for the dialog - const [error, setError] = useState(); - const [open, setOpen] = useState(false); + const onClose = useCallback(() => { + setOpen(false); + setHost(initHost); + }, [setOpen, initHost]); - const { - value: updatedIoc, - wrapper: updateHost, - error: updateHostError - } = useAPIMethod({ - fcn: client.apis.IOCs.updateActiveDeploymentHost, - call: false - }); + const onConfirm = useCallback(() => { + setButtonDisabled(true); + updateHost({ + iocId: ioc.id, + updateHostRequest: { + hostId: host?.hostId + } + }); + }, [updateHost, ioc, host?.hostId, setButtonDisabled]); useEffect(() => { if (updateHostError) { setButtonDisabled(false); - setError(updateHostError?.message); + setError(updateHostError); } }, [updateHostError, setError, setButtonDisabled]); useEffect(() => { if (updatedIoc) { - getIOC(); setHost({ fqdn: updatedIoc.activeDeployment.host.fqdn, hostId: updatedIoc.activeDeployment.host.hostId }); - resetTab(); setButtonDisabled(false); } - }, [updatedIoc, getIOC, resetTab, setButtonDisabled]); + }, [updatedIoc, setButtonDisabled]); useEffect(() => { getHosts({ text: `${query}` }); }, [query, getHosts]); - const onClose = useCallback(() => { - setOpen(false); - setHost(initHost); - }, [setOpen, initHost]); - - const onConfirm = useCallback(() => { - setButtonDisabled(true); - updateHost( - { - ioc_id: ioc.id - }, - { - requestBody: { - hostId: host?.hostId - } - } - ); - }, [updateHost, ioc, host?.hostId, setButtonDisabled]); - let disabledButtonTitle = ""; if (buttonDisabled || ioc.operationInProgress) { disabledButtonTitle = @@ -161,16 +134,6 @@ export const ChangeHostAdmin = ({ container spacing={1} > - {error ? ( - <Grid - item - xs={12} - > - <Alert severity="error">{error}</Alert> - </Grid> - ) : ( - <></> - )} <Grid item xs={12} @@ -223,6 +186,11 @@ export const ChangeHostAdmin = ({ item xs={12} > + {error && ( + <Box sx={{ marginBottom: 1 }}> + <ApiAlertError error={error} /> + </Box> + )} <Tooltip title={disabledButtonTitle}> <span> <Button diff --git a/src/components/IOC/DeployIOC/DeployIOC.jsx b/src/components/IOC/DeployIOC/DeployIOC.jsx index 8b8f50f0..d1a7d5c9 100644 --- a/src/components/IOC/DeployIOC/DeployIOC.jsx +++ b/src/components/IOC/DeployIOC/DeployIOC.jsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { Navigate } from "react-router-dom"; import { IOCDeployDialog } from "../IOCDeployDialog"; -import { useStartJobMutation } from "../../../store/deployApi"; +import { useStartJobMutation } from "../../../store/enhancedApi"; export function DeployIOC({ open, diff --git a/src/components/IOC/IOCDelete/IOCDelete.jsx b/src/components/IOC/IOCDelete/IOCDelete.jsx index 951dee72..a14a5141 100644 --- a/src/components/IOC/IOCDelete/IOCDelete.jsx +++ b/src/components/IOC/IOCDelete/IOCDelete.jsx @@ -1,53 +1,35 @@ -import { useState, useEffect, useCallback, useContext, useMemo } from "react"; +import { useState, useEffect, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { Box, Button, Grid, Tooltip, Typography } from "@mui/material"; -import { ConfirmDangerActionDialog, useAPIMethod } from "@ess-ics/ce-ui-common"; -import Alert from "@mui/material/Alert"; +import { ConfirmDangerActionDialog } from "@ess-ics/ce-ui-common"; import { useCustomSnackbar } from "../../common/snackbar"; import { AccessControl } from "../../auth/AccessControl"; -import { apiContext } from "../../../api/DeployApi"; +import { useDeleteIocMutation } from "../../../store/enhancedApi"; +import { ApiAlertError } from "../../common/Alerts/ApiAlertError"; export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => { const navigate = useNavigate(); const showSnackBar = useCustomSnackbar(); - - // for the dialog const [error, setError] = useState(); const [open, setOpen] = useState(false); - - const client = useContext(apiContext); - const params = useMemo( - () => ({ - ioc_id: ioc?.id - }), - [ioc] - ); - - const { - wrapper: deleteIOC, - dataReady: dataready, - error: errorResponse - } = useAPIMethod({ - fcn: client.apis.IOCs.deleteIoc, - call: false, - params - }); + const [deleteIOC, { data: deleteIOCResponse, error: deleteIOCError }] = + useDeleteIocMutation(); useEffect(() => { - if (errorResponse) { + if (deleteIOCError) { setButtonDisabled(false); - setError(errorResponse?.message); + setError(deleteIOCError); } - }, [errorResponse, setError, setButtonDisabled]); + }, [deleteIOCError, setError, setButtonDisabled]); useEffect(() => { - if (dataready && !error) { + if (deleteIOCResponse) { setButtonDisabled(false); showSnackBar(`IOC ${ioc.namingName} deleted`, "success"); navigate("/iocs"); } }, [ - dataready, + deleteIOCResponse, navigate, error, setButtonDisabled, @@ -68,8 +50,10 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => { const onConfirm = useCallback(() => { setButtonDisabled(true); - deleteIOC(); - }, [deleteIOC, setButtonDisabled]); + deleteIOC({ + iocId: ioc?.id + }); + }, [ioc, deleteIOC, setButtonDisabled]); return ( <> @@ -100,7 +84,7 @@ export const IOCDelete = ({ ioc, buttonDisabled, setButtonDisabled }) => { item xs={12} > - <Alert severity="error">{error}</Alert> + <ApiAlertError error={error} /> </Grid> ) : ( <></> diff --git a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.jsx b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.jsx index 65e5d081..a0a3386a 100644 --- a/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.jsx +++ b/src/components/IOC/IOCDetailAdmin/IOCDetailAdmin.jsx @@ -1,5 +1,5 @@ -import { useState, useMemo, useEffect, useCallback, useContext } from "react"; -import { ConfirmationDialog, useAPIMethod } from "@ess-ics/ce-ui-common"; +import { useState, useEffect, useCallback } from "react"; +import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { Box, Button, @@ -7,26 +7,21 @@ import { TextField, Tooltip, Typography, - Autocomplete, - Alert + Autocomplete } from "@mui/material"; import { useTypingTimer } from "../../common/SearchBoxFilter/TypingTimer"; import { AccessControl } from "../../auth/AccessControl"; -import { apiContext } from "../../../api/DeployApi"; - -const createRequestParams = (query) => { - return { - query: query - }; -}; +import { + useLazyListProjectsQuery, + useLazyFetchIocByNameQuery +} from "../../../store/deployApi"; +import { useUpdateIocMutation } from "../../../store/enhancedApi"; +import { ApiAlertError } from "../../common/Alerts/ApiAlertError"; -export const IOCDetailAdmin = ({ - ioc, - getIOC, - resetTab, - buttonDisabled, - setButtonDisabled -}) => { +export const IOCDetailAdmin = ({ ioc, buttonDisabled, setButtonDisabled }) => { + const iocIsDeployed = Boolean(ioc.activeDeployment); + const [open, setOpen] = useState(false); + const [error, setError] = useState(null); const [gitId, setGitId] = useState(ioc.gitProjectId); const [nameQuery, onNameKeyUp] = useTypingTimer({ interval: 500 }); const [repoQuery, onRepoKeyUp] = useTypingTimer({ interval: 500 }); @@ -36,48 +31,21 @@ export const IOCDetailAdmin = ({ name: ioc.namingName }); - // for the dialog - const [open, setOpen] = useState(false); - const [error, setError] = useState(); - const client = useContext(apiContext); - - const requestParams = useMemo( - () => createRequestParams(repoQuery), - [repoQuery] - ); - - const { - value: allowedGitProjects, - wrapper: getAllowedGitProjects, - loading: loadingAllowedGitProjects - } = useAPIMethod({ - fcn: client.apis.Git.listProjects, - params: requestParams, - call: false - }); + const [ + getAllowedGitProjects, + { data: allowedGitProjects, isLoading: loadingAllowedGitProjects } + ] = useLazyListProjectsQuery(); - const { - value: names, - wrapper: getNames, - loading: loadingNames - } = useAPIMethod({ - fcn: client.apis.Names.fetchIOCByName, - call: false - }); + const [getNames, { data: names, isLoading: loadingNames }] = + useLazyFetchIocByNameQuery(); - const { - value: uioc, - wrapper: actionUpdateIoc, - error: updateError - } = useAPIMethod({ - fcn: client.apis.IOCs.updateIoc, - call: false - }); + const [updateIOC, { data: updatedIOC, error: updateError }] = + useUpdateIocMutation(); useEffect(() => { if (updateError) { setButtonDisabled(false); - setError(updateError?.message); + setError(updateError); } }, [updateError, setError, setButtonDisabled]); @@ -98,46 +66,36 @@ export const IOCDetailAdmin = ({ setOpen(true); }; - const onClose = useCallback(() => { - setOpen(false); - }, [setOpen]); - const onConfirm = useCallback(() => { setButtonDisabled(true); - actionUpdateIoc( - { ioc_id: ioc?.id }, - { - requestBody: { - gitProjectId: gitId, - namingUuid: name ? name.uuid : null - } + updateIOC({ + iocId: ioc?.id, + iocUpdateRequest: { + gitProjectId: gitId, + namingUuid: name ? name.uuid : null } - ); - }, [actionUpdateIoc, ioc, name, gitId, setButtonDisabled]); + }); + }, [updateIOC, ioc, name, gitId, setButtonDisabled]); useEffect(() => { - if (uioc) { - getIOC(); - resetTab(); + if (updatedIOC) { setButtonDisabled(false); } - }, [uioc, getIOC, resetTab, setButtonDisabled]); + }, [updatedIOC, setButtonDisabled]); useEffect(() => { // fetch git repos only if user has entered a text and it wasn't previously fetched if (repoQuery && repoQuery.length > 2) { - getAllowedGitProjects(); + getAllowedGitProjects({ query: repoQuery }); } }, [repoQuery, getAllowedGitProjects]); useEffect(() => { if (nameQuery) { - getNames(nameQuery); + getNames({ query: nameQuery }); } }, [nameQuery, getNames]); - const iocIsDeployed = Boolean(ioc.activeDeployment); - let nameDisabledTitle = ""; if (iocIsDeployed) { nameDisabledTitle = @@ -286,7 +244,7 @@ export const IOCDetailAdmin = ({ confirmText="Modify IOC" cancelText="Cancel" open={open} - onClose={onClose} + onClose={() => setOpen(false)} onConfirm={onConfirm} /> <Box sx={{ pt: 2 }}> @@ -323,7 +281,7 @@ export const IOCDetailAdmin = ({ {gitRepoAutocomplete(false)} </AccessControl> - {error ? <Alert severity="error">{error}</Alert> : <></>} + {error && <ApiAlertError error={error} />} <Tooltip title={disabledButtonTitle}> <span> diff --git a/src/components/IOC/IOCManage/IOCService.jsx b/src/components/IOC/IOCManage/IOCService.jsx index 8c0c6102..704ca6d8 100644 --- a/src/components/IOC/IOCManage/IOCService.jsx +++ b/src/components/IOC/IOCManage/IOCService.jsx @@ -9,7 +9,7 @@ import { useState, useEffect, useCallback } from "react"; import { useNavigate } from "react-router-dom"; import { ConfirmationDialog } from "@ess-ics/ce-ui-common"; import { AccessControl } from "../../auth/AccessControl"; -import { useStartJobMutation } from "../../../store/deployApi"; +import { useStartJobMutation } from "../../../store/enhancedApi"; import { ApiAlertError } from "../../common/Alerts/ApiAlertError"; export function IOCService({ ioc, currentCommand }) { diff --git a/src/components/IOC/IOCManage/JobSection.tsx b/src/components/IOC/IOCManage/JobSection.tsx index d775c302..3deef686 100644 --- a/src/components/IOC/IOCManage/JobSection.tsx +++ b/src/components/IOC/IOCManage/JobSection.tsx @@ -15,11 +15,9 @@ export const JobSection = () => { const { data: jobs, isLoading } = useListJobsQuery( initRequestParams(pagination), - { pollingInterval: 30000 } + { pollingInterval: 5000 } ); - console.log(jobs); //eslint-disable-line - useEffect(() => { setPagination({ totalCount: jobs?.totalCount ?? 0 }); }, [setPagination, jobs?.totalCount]); diff --git a/src/components/IOC/UndeployIOC/UndeployIOC.jsx b/src/components/IOC/UndeployIOC/UndeployIOC.jsx index d6832919..81d2c8b3 100644 --- a/src/components/IOC/UndeployIOC/UndeployIOC.jsx +++ b/src/components/IOC/UndeployIOC/UndeployIOC.jsx @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { Navigate } from "react-router-dom"; import { IOCUndeployDialog } from "../IOCUndeployDialog"; -import { useStartJobMutation } from "../../../store/deployApi"; +import { useStartJobMutation } from "../../../store/enhancedApi"; export const UndeployIOC = ({ open, setOpen, submitCallback, ioc }) => { const [error, setError] = useState(); diff --git a/src/store/enhancedApi.ts b/src/store/enhancedApi.ts index 770599d9..46d356d9 100644 --- a/src/store/enhancedApi.ts +++ b/src/store/enhancedApi.ts @@ -1,13 +1,40 @@ import { deployApi } from "./deployApi"; const enhancedApiWithTags = deployApi.enhanceEndpoints({ - addTagTypes: ["StartJob"], + addTagTypes: [ + "StartJob", + "UpdateIOC", + "UpdateActiveDeploymentHost", + "UndeployInDB", + "DeleteIOC" + ], endpoints: { - getIoc: { providesTags: ["StartJob"] }, + getIoc: { + providesTags: [ + "StartJob", + "UpdateIOC", + "UpdateActiveDeploymentHost", + "UndeployInDB", + "DeleteIOC" + ] + }, listJobs: { providesTags: ["StartJob"] }, - startJob: { invalidatesTags: ["StartJob"] } + startJob: { invalidatesTags: ["StartJob"] }, + updateIoc: { invalidatesTags: ["UpdateIOC"] }, + updateActiveDeploymentHost: { + invalidatesTags: ["UpdateActiveDeploymentHost"] + }, + unDeployInDb: { invalidatesTags: ["UndeployInDB"] }, + deleteIoc: { invalidatesTags: ["DeleteIOC"] } } }); -export const { useGetIocQuery, useListJobsQuery, useStartJobMutation } = - enhancedApiWithTags; +export const { + useGetIocQuery, + useListJobsQuery, + useStartJobMutation, + useUpdateIocMutation, + useUpdateActiveDeploymentHostMutation, + useUnDeployInDbMutation, + useDeleteIocMutation +} = enhancedApiWithTags; -- GitLab