Put host log stream + IOC log stream in SimpleAccordion

src/components/IOC/IOCLiveStatus/IOCLiveStatus.js

@@ -19,7 +19,8 @@ export function IOCLiveStatus({ ioc }) {
   const [state, setState] = useUrlState(
     {
       procserv_log_open: "true",
-      records_open: "false"
+      records_open: "false",
+      log_stream_open: "false"
     },
     { navigateMode: "replace" }
   );
@@ -81,15 +82,23 @@ export function IOCLiveStatus({ ioc }) {
           allowedRoles={["DeploymentToolAdmin", "DeploymentToolIntegrator"]}
           renderNoAccess={() => <></>}
         >
-          <LokiContainer
-            hostName={liveIOC.activeDeployment?.host.hostName}
-            iocName={ioc.namingName}
-            isDeployed={isIocDeployed(ioc)}
-          />
+          <SimpleAccordion
+            summary="IOC log stream"
+            expanded={deserialize(state.log_stream_open)}
+            onChange={(_, expanded) =>
+              setState({ log_stream_open: serialize(expanded) })
+            }
+          >
+            <LokiContainer
+              hostName={liveIOC.activeDeployment?.host.hostName}
+              iocName={ioc.namingName}
+              isDeployed={isIocDeployed(ioc)}
+            />
+          </SimpleAccordion>
           <SimpleAccordion
             summary="Records"
             expanded={deserialize(state.records_open)}
-            onChange={(event, expanded) =>
+            onChange={(_, expanded) =>
               setState({ records_open: serialize(expanded) })
             }
           >

src/components/common/Loki/LokiContainer.js

-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
 import { LokiPanel } from "./LokiPanel";
 
 export function LokiContainer({ hostName, iocName, isDeployed }) {
@@ -6,12 +6,6 @@ export function LokiContainer({ hostName, iocName, isDeployed }) {
     <>
       {hostName && (
         <Box sx={{ pt: 2 }}>
-          <Typography
-            sx={{ my: 2.5 }}
-            variant="h3"
-          >
-            IOC log stream
-          </Typography>
           <LokiPanel
             hostName={hostName}
             isSyslog={false}

src/views/host/details/HostDetailsView.js

@@ -37,6 +37,7 @@ export function HostDetailsView({ hostId, host, status }) {
       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
@@ -100,22 +101,31 @@ export function HostDetailsView({ hostId, host, status }) {
               <HostDetailsTable host={host} />
             </SimpleAccordion>
 
-            <Stack
-              gap={2}
-              sx={{ marginTop: "10px" }}
+            <SimpleAccordion
+              summary={
+                <Typography
+                  variant="h3"
+                  component="h2"
+                >
+                  Host log stream
+                </Typography>
+              }
+              expanded={deserialize(urlState.log_stream_open)}
+              onChange={(_, expanded) =>
+                setUrlState({ log_stream_open: serialize(expanded) })
+              }
             >
-              <Typography
-                variant="h3"
-                component="h2"
+              <Stack
+                gap={2}
+                sx={{ marginTop: "10px" }}
               >
-                Host log stream
-              </Typography>
-              <LokiPanel
-                hostName={host.name}
-                isSyslog
-                isDeployed
-              />
-            </Stack>
+                <LokiPanel
+                  hostName={host.name}
+                  isSyslog
+                  isDeployed
+                />
+              </Stack>
+            </SimpleAccordion>
           </AccessControl>
           <KeyValueTable
             obj={{