Skip to content
Snippets Groups Projects
Commit e6dfcc96 authored by Max Frederiksen's avatar Max Frederiksen Committed by Max Frederiksen
Browse files

IOC components

parent 1cbbe12b
No related branches found
No related tags found
2 merge requests!612Release 5.0.0,!564CE-2550: Remove query params for pagination, tabs and accordions
Hide whitespace changes
Inline Side-by-side
src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
+ 9
− 15
View file @ e6dfcc96
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
......
src/views/IOC/IOCDetailsContainer.jsx
+ 1
− 14
View file @ e6dfcc96
......@@ -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
......
src/views/IOC/IOCDetailsView.jsx
+ 6
− 60
View file @ e6dfcc96
......@@ -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
......
src/views/IOC/IOCListView.tsx
+ 8
− 55
View file @ e6dfcc96
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" />
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment