Host components

src/views/host/HostListView.jsx

-import { useState, useEffect, useCallback, useContext, useMemo } from "react";
+import { useState, useEffect, useCallback, useContext } from "react";
 import { Container, Grid, Tabs, Tab } from "@mui/material";
 import { HostTable } from "../../components/host/HostTable";
 import {
@@ -37,47 +37,14 @@ export function HostListView() {
 
   const [urlState, setUrlState] = useUrlState(
     {
-      tab: "0",
-      rows: "20",
-      page: "0",
       query: ""
     },
     { navigateMode: "replace" }
   );
+  const [tabIndex, setTabIndex] = useState(0);
   const [hostFilter, setHostFilter] = useState("ALL");
 
-  const urlPagination = useMemo(
-    () => ({
-      rows: deserialize(urlState.rows),
-      page: deserialize(urlState.page)
-    }),
-    [urlState.rows, urlState.page]
-  );
-
-  const setUrlPagination = useCallback(
-    ({ rows, page }) => {
-      setUrlState({
-        rows: serialize(rows),
-        page: serialize(page)
-      });
-    },
-    [setUrlState]
-  );
-
-  const handleTabChange = useCallback(
-    (event, tab) => {
-      setUrlState((s) =>
-        serialize(s.tab) === serialize(tab)
-          ? { tab: serialize(tab) }
-          : { tab: serialize(tab), page: "0" }
-      );
-
-      changeTab(tab);
-    },
-    [setUrlState]
-  );
-
-  const changeTab = (tab) => {
+  const handleTabChange = (tab) => {
     if (tab === 0) {
       setHostFilter("ALL");
     } else if (tab === 1) {
@@ -85,20 +52,15 @@ export function HostListView() {
     } else if (tab === 2) {
       setHostFilter("NO_IOCS");
     }
+    setTabIndex(tab);
   };
 
-  useEffect(() => {
-    if (urlState.tab) {
-      changeTab(deserialize(urlState.tab));
-    }
-  }, [urlState]);
-
   const rowsPerPage = [20, 50];
 
   const { pagination, setPagination } = usePagination({
     rowsPerPageOptions: rowsPerPage,
-    initLimit: urlPagination.rows ?? rowsPerPage[0],
-    initPage: urlPagination.page ?? 0
+    initLimit: rowsPerPage[0],
+    initPage: 0
   });
 
   // update pagination whenever search result total pages change
@@ -106,17 +68,6 @@ export function HostListView() {
     setPagination({ totalCount: hosts?.totalCount ?? 0 });
   }, [setPagination, hosts?.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]);
-
   // Request new search results whenever search or pagination changes
   useEffect(() => {
     let requestParams = initRequestParams(pagination);
@@ -174,8 +125,8 @@ export function HostListView() {
         >
           <Grid item>
             <Tabs
-              value={deserialize(urlState.tab)}
-              onChange={handleTabChange}
+              value={tabIndex}
+              onChange={(_, tab) => handleTabChange(tab)}
             >
               <Tab label="All" />
               <Tab label="Only hosts with IOCs" />

src/views/host/details/HostDetailsView.jsx

-import { useEffect, useContext } from "react";
-import useUrlState from "@ahooksjs/use-url-state";
+import { useEffect, useContext, useState } from "react";
 import { Box, IconButton, Typography, Stack } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import {
@@ -13,10 +12,6 @@ import { LokiPanel } from "../../../components/common/Loki/LokiPanel";
 import { useNavigate } from "react-router-dom";
 import { applicationTitle } from "../../../components/common/Helper";
 import AccessControl from "../../../components/auth/AccessControl";
-import {
-  serialize,
-  deserialize
-} from "../../../components/common/URLState/URLState";
 import { HostDetailsTable } from "./HostDetailsTable";
 import { HostStatus } from "../../../components/host/HostStatus";
 import { HostJobsSection } from "./HostJobsSection";
@@ -25,6 +20,10 @@ import env from "../../../config/env";
 
 export function HostDetailsView({ hostId, host, alert }) {
   const { setTitle } = useContext(GlobalAppBarContext);
+  const [accordionState, setAccordionState] = useState({
+    detailsOpen: false,
+    logStreamOpen: false
+  });
 
   useEffect(() => {
     if (host && host.name) {
@@ -32,18 +31,6 @@ export function HostDetailsView({ hostId, host, alert }) {
     }
   }, [host, setTitle]);
 
-  const [urlState, setUrlState] = useUrlState(
-    {
-      iocs_rows: 20,
-      iocs_page: 0,
-      details_open: false,
-      log_stream_open: false,
-      job_log_open: false,
-      job_log_rows: 20,
-      job_log_page: 0
-    },
-    { navigateMode: "replace" }
-  );
   const navigate = useNavigate();
 
   return (
@@ -95,20 +82,9 @@ export function HostDetailsView({ hostId, host, alert }) {
             </Box>
           </Stack>
           <Stack gap={2}>
-            <HostIocSection
-              hostId={hostId}
-              rows={deserialize(urlState.iocs_rows)}
-              page={deserialize(urlState.iocs_page)}
-              onUrlStateChange={(params) => setUrlState(params)}
-            />
+            <HostIocSection hostId={hostId} />
           </Stack>
-          <HostJobsSection
-            hostId={hostId}
-            rows={deserialize(urlState.job_log_rows)}
-            page={deserialize(urlState.job_log_page)}
-            expanded={deserialize(urlState.job_log_open)}
-            onUrlStateChange={(params) => setUrlState(params)}
-          />
+          <HostJobsSection hostId={hostId} />
 
           <AccessControl
             allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
@@ -123,9 +99,9 @@ export function HostDetailsView({ hostId, host, alert }) {
                   Host details
                 </Typography>
               }
-              expanded={deserialize(urlState.details_open)}
+              expanded={accordionState.detailsOpen}
               onChange={(_, expanded) =>
-                setUrlState({ details_open: serialize(expanded) })
+                setAccordionState({ detailsOpen: expanded })
               }
             >
               <HostDetailsTable host={host} />
@@ -140,9 +116,9 @@ export function HostDetailsView({ hostId, host, alert }) {
                   Host log stream
                 </Typography>
               }
-              expanded={deserialize(urlState.log_stream_open)}
+              expanded={accordionState.logStreamOpen}
               onChange={(_, expanded) =>
-                setUrlState({ log_stream_open: serialize(expanded) })
+                setAccordionState({ logStreamOpen: expanded })
               }
             >
               <LokiPanel

src/views/host/details/HostIocSection.jsx

 import { useEffect, useContext, useCallback } from "react";
 import IOCTable from "../../../components/IOC/IOCTable";
-import { string, number, func } from "prop-types";
+import { string } from "prop-types";
 import { apiContext } from "../../../api/DeployApi";
 import { Typography } from "@mui/material";
 import { useAPIMethod, usePagination } from "@ess-ics/ce-ui-common";
 import { initRequestParams } from "../../../components/common/Helper";
-import { serialize } from "../../../components/common/URLState/URLState";
 
 const propTypes = {
-  hostId: string,
-  row: number,
-  page: number,
-  onUrlStateChange: func
+  hostId: string
 };
 
-export const HostIocSection = ({ hostId, rows, page, onUrlStateChange }) => {
+const rowsPerPage = [20, 50];
+
+export const HostIocSection = ({ hostId }) => {
   const client = useContext(apiContext);
+
   const { pagination, setPagination, setTotalCount } = usePagination({
-    initLimit: rows,
-    initPage: page
+    initLimit: rowsPerPage[0],
+    initPage: 0
   });
 
   const {
@@ -36,19 +35,15 @@ export const HostIocSection = ({ hostId, rows, page, onUrlStateChange }) => {
     (params) => {
       setPagination(params);
       abortGetIocs();
-      onUrlStateChange({
-        iocs_rows: serialize(params.limit),
-        iocs_page: serialize(params.page)
-      });
     },
-    [setPagination, abortGetIocs, onUrlStateChange]
+    [setPagination, abortGetIocs]
   );
 
   const getIocs = useCallback(() => {
-    let requestParams = initRequestParams({ page, rows }, null);
+    let requestParams = initRequestParams(pagination, null);
     requestParams.host_id = hostId;
     callgetIocs(requestParams);
-  }, [callgetIocs, hostId, page, rows]);
+  }, [callgetIocs, hostId, pagination]);
 
   // update pagination whenever search result total pages change
   useEffect(() => {
@@ -61,7 +56,7 @@ export const HostIocSection = ({ hostId, rows, page, onUrlStateChange }) => {
     return () => {
       abortGetIocs();
     };
-  }, [rows, page, abortGetIocs, getIocs]);
+  }, [abortGetIocs, getIocs]);
 
   return (
     <>

src/views/host/details/HostJobsSection.jsx

-import { useContext, useEffect, useMemo, useCallback } from "react";
-import { string, number, boolean, func } from "prop-types";
-import { serialize } from "../../../components/common/URLState/URLState";
+import { useContext, useEffect, useMemo, useCallback, useState } from "react";
+import { string } from "prop-types";
 import { getErrorMessage } from "../../../components/common/Helper";
 import { apiContext } from "../../../api/DeployApi";
 import {
@@ -12,29 +11,20 @@ import { JobTable } from "../../../components/Job";
 import { Alert, Typography } from "@mui/material";
 
 const propTypes = {
-  hostId: string.isRequired,
-  rows: number,
-  page: number,
-  expanded: boolean,
-  onUrlStateChange: func
+  hostId: string.isRequired
 };
 
 const rowsPerPage = [20, 50];
 
-export const HostJobsSection = ({
-  hostId,
-  rows,
-  page,
-  expanded,
-  onUrlStateChange
-}) => {
+export const HostJobsSection = ({ hostId }) => {
   const client = useContext(apiContext);
 
   const { pagination, setPagination } = usePagination({
     rowsPerPageOptions: rowsPerPage,
-    initLimit: rows,
-    initPage: page
+    initLimit: rowsPerPage[0],
+    initPage: 0
   });
+  const [expanded, setExpanded] = useState(false);
 
   const {
     value: hostLog,
@@ -56,12 +46,8 @@ export const HostJobsSection = ({
     (params) => {
       setPagination(params);
       abortGetHostLog();
-      onUrlStateChange({
-        job_log_rows: serialize(params.limit),
-        job_log_page: serialize(params.page)
-      });
     },
-    [setPagination, abortGetHostLog, onUrlStateChange]
+    [setPagination, abortGetHostLog]
   );
 
   useEffect(() => {
@@ -82,6 +68,7 @@ export const HostJobsSection = ({
 
   return (
     <SimpleAccordion
+      expanded={expanded}
       summary={
         <Typography
           variant="h3"
@@ -90,9 +77,7 @@ export const HostJobsSection = ({
           Job log
         </Typography>
       }
-      onChange={(_, isExpanded) =>
-        onUrlStateChange({ job_log_open: serialize(isExpanded) })
-      }
+      onChange={(_, expanded) => setExpanded(expanded)}
     >
       {error ? <Alert severity="error">{getErrorMessage(error)}</Alert> : null}
       {hostLog ? (