From e6dfcc960c9976a819f0b659df90eccf70799ee1 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <maxfrederiksen@Maxs-MacBook-Air.local>
Date: Wed, 13 Nov 2024 13:22:20 +0100
Subject: [PATCH] IOC components
---
.../IOC/IOCLiveStatus/IOCLiveStatus.jsx | 24 +++----
src/views/IOC/IOCDetailsContainer.jsx | 15 +----
src/views/IOC/IOCDetailsView.jsx | 66 ++-----------------
src/views/IOC/IOCListView.tsx | 63 +++---------------
4 files changed, 24 insertions(+), 144 deletions(-)
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
index 6bd7994e..1f8b701e 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { useCallback, useState } from "react";
import { Typography } from "@mui/material";
import {
SimpleAccordion,
@@ -10,18 +10,12 @@ import { LokiPanel } from "../../common/Loki/LokiPanel";
import { RecordSearch } from "../../records/RecordSearch";
import { GitRefLink } from "../../common/Git/GitRefLink";
import AccessControl from "../../auth/AccessControl";
-import useUrlState from "@ahooksjs/use-url-state";
-import { serialize, deserialize } from "../../common/URLState/URLState";
export function IOCLiveStatus({ ioc }) {
- const [state, setState] = useUrlState(
- {
- procserv_log_open: "true",
- records_open: "false",
- log_stream_open: "false"
- },
- { navigateMode: "replace" }
- );
+ const [accordionState, setAccordionState] = useState({
+ logStreamOpen: false,
+ recordsOpen: false
+ });
const hostName = ioc.activeDeployment?.host?.hostName;
const externalIdValid = ioc.activeDeployment?.host?.externalIdValid;
@@ -81,9 +75,9 @@ export function IOCLiveStatus({ ioc }) {
IOC log stream
</Typography>
}
- expanded={deserialize(state.log_stream_open)}
+ expanded={accordionState.logStreamOpen}
onChange={(_, expanded) =>
- setState({ log_stream_open: serialize(expanded) })
+ setAccordionState({ ...accordionState, logStreamOpen: expanded })
}
>
{hostName && (
@@ -103,9 +97,9 @@ export function IOCLiveStatus({ ioc }) {
Records
</Typography>
}
- expanded={deserialize(state.records_open)}
+ expanded={accordionState.recordsOpen}
onChange={(_, expanded) =>
- setState({ records_open: serialize(expanded) })
+ setAccordionState({ ...accordionState, recordsOpen: expanded })
}
>
<RecordSearch
diff --git a/src/views/IOC/IOCDetailsContainer.jsx b/src/views/IOC/IOCDetailsContainer.jsx
index f89a4ac4..b8e38f54 100644
--- a/src/views/IOC/IOCDetailsContainer.jsx
+++ b/src/views/IOC/IOCDetailsContainer.jsx
@@ -3,13 +3,10 @@ import { IOCDetailsView } from "./IOCDetailsView";
import { LinearProgress } from "@mui/material";
import NotFoundView from "../../components/navigation/NotFoundView/NotFoundView";
import { onFetchEntityError } from "../../components/common/Helper";
-import { userContext, useAPIMethod } from "@ess-ics/ce-ui-common";
-import useUrlState from "@ahooksjs/use-url-state";
+import { useAPIMethod } from "@ess-ics/ce-ui-common";
import { apiContext } from "../../api/DeployApi";
export function IOCDetailsContainer({ id }) {
- const { user } = useContext(userContext);
- const [urlState] = useUrlState();
const [error, setError] = useState(null);
const client = useContext(apiContext);
@@ -38,16 +35,6 @@ export function IOCDetailsContainer({ id }) {
}
}, [fetchError]);
- useEffect(() => {
- // user logs in => clear error message, and try to re-request userInfo
- if (user) {
- setError(null);
- } else if (!user && urlState?.tab) {
- // user is not logged in => show a message
- setError({ message: "Unauthorized", status: "401" });
- }
- }, [urlState, user]);
-
if (error) {
return (
<NotFoundView
diff --git a/src/views/IOC/IOCDetailsView.jsx b/src/views/IOC/IOCDetailsView.jsx
index 699b3268..cd811efa 100644
--- a/src/views/IOC/IOCDetailsView.jsx
+++ b/src/views/IOC/IOCDetailsView.jsx
@@ -17,11 +17,6 @@ import {
usePagination,
usePolling
} from "@ess-ics/ce-ui-common";
-import useUrlState from "@ahooksjs/use-url-state";
-import {
- serialize,
- deserialize
-} from "../../components/common/URLState/URLState";
import { apiContext } from "../../api/DeployApi";
const IOC_POLL_INTERVAL = 10000;
@@ -33,15 +28,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
}
}, [ioc, setTitle]);
- const [urlState, setUrlState] = useUrlState(
- {
- tab: "Status",
- jobs_rows: "20",
- jobs_page: "0"
- },
- { navigateMode: "replace" }
- );
-
const [buttonDisabled, setButtonDisabled] = useState(false);
const navigate = useNavigate();
@@ -78,48 +64,21 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
call: false
});
- const jobUrlPagination = useMemo(() => {
- return {
- rows: deserialize(urlState.jobs_rows),
- page: deserialize(urlState.jobs_page)
- };
- }, [urlState.jobs_rows, urlState.jobs_page]);
-
- const setJobUrlPagination = useCallback(
- (params) => {
- setUrlState({
- jobs_rows: serialize(params.rows),
- jobs_page: serialize(params.page)
- });
- },
- [setUrlState]
- );
-
const rowsPerPage = [20, 50];
const { pagination: jobPagination, setPagination: setJobPagination } =
usePagination({
rowsPerPageOptions: rowsPerPage,
- initLimit: jobUrlPagination.rows ?? rowsPerPage[0],
- initPage: jobUrlPagination.page ?? 0
+ initLimit: rowsPerPage[0],
+ initPage: 0
});
+ const [tabIndex, setTabIndex] = useState(0);
// update pagination whenever search result total pages change
useEffect(() => {
setJobPagination({ totalCount: jobs?.totalCount ?? 0 });
}, [setJobPagination, jobs?.totalCount]);
- // whenever url state changes, update pagination
- useEffect(() => {
- setJobPagination({ ...jobUrlPagination });
- }, [setJobPagination, jobUrlPagination]);
-
- // whenever table pagination internally changes (user clicks next page etc)
- // update the row params
- useEffect(() => {
- setJobUrlPagination(jobPagination);
- }, [jobPagination, setJobUrlPagination]);
-
// Invoked by Table on change to pagination
const onPage = useCallback(
(params) => {
@@ -141,10 +100,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
setButtonDisabled(Boolean(ioc?.operationInProgress));
}, [ioc?.operationInProgress]);
- const onTabChange = (index, label) => {
- setUrlState({ tab: serialize(label) });
- };
-
const callGetJobs = useCallback(() => {
let requestParams = initRequestParams(jobPagination);
requestParams.ioc_id = ioc.id;
@@ -166,14 +121,6 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
navigate(-1);
};
- const resetTab = useCallback(() => {
- if (ioc?.activeDeployment) {
- setUrlState({ tab: "Status" });
- } else {
- setUrlState({ tab: "Management" });
- }
- }, [ioc?.activeDeployment, setUrlState]);
-
const setButtonDisabledAndUpdate = useCallback(
(isDisabled) => {
setButtonDisabled(isDisabled);
@@ -225,14 +172,13 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
<IOCAdmin
ioc={ioc}
getIOC={getIOC}
- resetTab={resetTab}
+ resetTab={() => setTabIndex(0)}
buttonDisabled={buttonDisabled}
setButtonDisabled={setButtonDisabled}
/>
)
});
}
- const initialIndex = tabs.map((it) => it.label).indexOf(urlState?.tab);
return (
<Grid
@@ -246,8 +192,8 @@ export function IOCDetailsView({ ioc, getIOC, abortGetIOC, loading }) {
>
<TabPanel
tabs={tabs}
- initialIndex={initialIndex}
- onTabChange={onTabChange}
+ initialIndex={tabIndex}
+ onTabChange={(_, tab) => setTabIndex(tab)}
TabsProps={{ centered: true, sx: { flex: 1 } }}
renderTabs={(tabs) => (
<Stack
diff --git a/src/views/IOC/IOCListView.tsx b/src/views/IOC/IOCListView.tsx
index 8c750824..a4720d4a 100644
--- a/src/views/IOC/IOCListView.tsx
+++ b/src/views/IOC/IOCListView.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo } from "react";
+import { useState, useEffect, useCallback } from "react";
import { useLazyListIocsQuery, ListIocsApiArg } from "../../store/deployApi";
import {
useGlobalAppBarContext,
@@ -25,31 +25,17 @@ const ROWS_PER_PAGE = [20, 50];
export const IOCListView = () => {
const [deploymentStatus, setDeploymentStatus] =
useState<ListIocsApiArg["deploymentStatus"]>("ALL");
+ const [tabIndex, setTabIndex] = useState(0);
const [listIocs, { data: iocs, isFetching, error }] = useLazyListIocsQuery();
const [urlState, setUrlState] = useUrlState(
{
- tab: "0",
- rows: "20",
- page: "0",
query: ""
},
{ navigateMode: "replace" }
);
const { setTitle }: GlobalAppBarContext = useGlobalAppBarContext();
- const handleTabChange = useCallback(
- (tab: number) => {
- setUrlState((s) =>
- serialize(s.tab) === serialize(tab)
- ? { tab: serialize(tab) }
- : { tab: serialize(tab), page: "0" }
- );
- changeTab(tab);
- },
- [setUrlState]
- );
-
- const changeTab = (tab: number) => {
+ const handleTabChange = (tab: number) => {
if (tab === 0) {
setDeploymentStatus("ALL");
} else if (tab === 1) {
@@ -57,29 +43,13 @@ export const IOCListView = () => {
} else if (tab === 2) {
setDeploymentStatus("NOT_DEPLOYED");
}
+ setTabIndex(tab);
};
- const setUrlPagination = useCallback(
- ({ rows, page }: OnPageParams) => {
- setUrlState({
- rows: serialize(rows),
- page: serialize(page)
- });
- },
- [setUrlState]
- );
-
- const urlPagination = useMemo(() => {
- return {
- rows: deserialize(urlState.rows),
- page: deserialize(urlState.page)
- };
- }, [urlState.rows, urlState.page]);
-
const { pagination, setPagination } = usePagination({
rowsPerPageOptions: ROWS_PER_PAGE,
- initLimit: urlPagination.rows ?? ROWS_PER_PAGE[0],
- initPage: urlPagination.page ?? 0
+ initLimit: ROWS_PER_PAGE[0],
+ initPage: 0
});
// Invoked by Table on change to pagination
@@ -97,28 +67,11 @@ export const IOCListView = () => {
useEffect(() => setTitle(applicationTitle("IOCs")), [setTitle]);
- useEffect(() => {
- if (urlState.tab) {
- changeTab(deserialize(urlState.tab));
- }
- }, [urlState.tab]);
-
// update pagination whenever search result total pages change
useEffect(() => {
setPagination({ totalCount: iocs?.totalCount ?? 0 });
}, [setPagination, iocs?.totalCount]);
- // whenever url state changes, update pagination
- useEffect(() => {
- setPagination({ ...urlPagination });
- }, [setPagination, urlPagination]);
-
- // whenever table pagination internally changes (user clicks next page etc)
- // update the row params
- useEffect(() => {
- setUrlPagination(pagination);
- }, [pagination, setUrlPagination]);
-
useEffect(() => {
const requestParams = Object.assign(
{},
@@ -127,7 +80,7 @@ export const IOCListView = () => {
);
listIocs(requestParams);
- }, [listIocs, urlPagination, deploymentStatus, urlState.query, pagination]);
+ }, [listIocs, deploymentStatus, urlState.query, pagination]);
return (
<RootPaper>
@@ -145,7 +98,7 @@ export const IOCListView = () => {
>
<Grid item>
<Tabs
- value={deserialize(urlState.tab)}
+ value={tabIndex}
onChange={(_, tab) => handleTabChange(tab)}
>
<Tab label="All" />
--
GitLab