From 8d20a2889dedf1703af5cab308f10952b9ffca85 Mon Sep 17 00:00:00 2001
From: Max Frederiksen <maxfrederiksen@Maxs-MacBook-Air.local>
Date: Wed, 20 Nov 2024 16:12:22 +0100
Subject: [PATCH] CE-3145: Only fetch data inside accordion when expanded
---
.../IOC/IOCLiveStatus/IOCLiveStatus.jsx | 2 ++
src/components/Job/JobDetails.tsx | 8 ++++-
src/components/common/Loki/LokiPanel.jsx | 14 +++++----
.../deployments/DeploymentJobOutput.jsx | 12 ++++----
src/components/records/RecordSearch.jsx | 30 ++++++++++++-------
src/views/host/details/HostDetailsView.jsx | 1 +
6 files changed, 45 insertions(+), 22 deletions(-)
diff --git a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
index b8a0c051..73698a33 100644
--- a/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
+++ b/src/components/IOC/IOCLiveStatus/IOCLiveStatus.jsx
@@ -86,6 +86,7 @@ export function IOCLiveStatus({ ioc }) {
<LokiPanel
hostName={hostName}
iocName={ioc.namingName}
+ isExpanded={accordionState.logStreamOpen}
/>
)}
</SimpleAccordion>
@@ -107,6 +108,7 @@ export function IOCLiveStatus({ ioc }) {
<RecordSearch
iocName={ioc.namingName}
rowType="iocDetails"
+ isExpanded={accordionState.recordsOpen}
/>
</SimpleAccordion>
</AccessControl>
diff --git a/src/components/Job/JobDetails.tsx b/src/components/Job/JobDetails.tsx
index 03bbe70a..54502206 100644
--- a/src/components/Job/JobDetails.tsx
+++ b/src/components/Job/JobDetails.tsx
@@ -82,6 +82,7 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
const StepIcon = operation?.status
? StepperComponents[operation.status.toLowerCase()]
: StepperComponents[STEPPER_STATES.unknown];
+ const [expanded, setExpanded] = useState(false);
const awxJob = useMemo(
() => new AWXJobDetails(operation, operation.action),
@@ -114,6 +115,8 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
renderNoAccess={() => <></>}
>
<SimpleAccordion
+ expanded={expanded}
+ onChange={() => setExpanded((prev) => !prev)}
summary={
<Stack
flexDirection="row"
@@ -136,7 +139,10 @@ export const JobsDetails = ({ jobDetail: operation }: JobDetailsProps) => {
</Stack>
}
>
- <DeploymentJobOutput job={operation} />
+ <DeploymentJobOutput
+ job={operation}
+ isExpanded={expanded}
+ />
</SimpleAccordion>
</AccessControl>
</Stack>
diff --git a/src/components/common/Loki/LokiPanel.jsx b/src/components/common/Loki/LokiPanel.jsx
index d9149797..428869ca 100644
--- a/src/components/common/Loki/LokiPanel.jsx
+++ b/src/components/common/Loki/LokiPanel.jsx
@@ -33,7 +33,7 @@ const TIME_RANGE_VALUES = [
*/
const LOG_POLL_INTERVAL = 5000;
-export function LokiPanel({ hostName, iocName, isSyslog }) {
+export function LokiPanel({ hostName, iocName, isSyslog, isExpanded }) {
const showWarning = useCustomSnackbar();
const [timeRange, setTimeRange] = useState(720);
const [logDialogOpen, setLogDialogOpen] = useState(false);
@@ -144,12 +144,14 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
}, [alertIds]);
useEffect(() => {
- if (isSyslog === true) {
- getSysLogData(params);
- } else {
- getProcServLog(params);
+ if (isExpanded) {
+ if (isSyslog === true) {
+ getSysLogData(params);
+ } else {
+ getProcServLog(params);
+ }
}
- }, [getSysLogData, getProcServLog, isSyslog, params]);
+ }, [getSysLogData, getProcServLog, isSyslog, isExpanded, params]);
useEffect(() => {
setHtml(
diff --git a/src/components/deployments/DeploymentJobOutput.jsx b/src/components/deployments/DeploymentJobOutput.jsx
index 73a96120..5f046b27 100644
--- a/src/components/deployments/DeploymentJobOutput.jsx
+++ b/src/components/deployments/DeploymentJobOutput.jsx
@@ -16,7 +16,7 @@ import { getErrorMessage, isAbortError } from "../common/Helper";
const LOG_POLL_INTERVAL = 5000;
-export function DeploymentJobOutput({ job }) {
+export function DeploymentJobOutput({ job, isExpanded }) {
const [consoleDialogOpen, setConsoleDialogOpen] = useState(false);
const client = useContext(apiContext);
const finalResultsNeeded = useRef(true);
@@ -40,11 +40,13 @@ export function DeploymentJobOutput({ job }) {
});
const getLog = useCallback(() => {
- if (!job.finishedAt || finalResultsNeeded.current) {
- getLogById(job.jobId);
- finalResultsNeeded.current = !job.finishedAt;
+ if (isExpanded) {
+ if (!job.finishedAt || finalResultsNeeded.current) {
+ getLogById(job.jobId);
+ finalResultsNeeded.current = !job.finishedAt;
+ }
}
- }, [job.finishedAt, job.jobId, getLogById]);
+ }, [job.finishedAt, job.jobId, isExpanded, getLogById]);
const hasAbortError = isAbortError(logError);
const showLoading = !log || !job.startTime;
diff --git a/src/components/records/RecordSearch.jsx b/src/components/records/RecordSearch.jsx
index cb82c42f..8a0b1055 100644
--- a/src/components/records/RecordSearch.jsx
+++ b/src/components/records/RecordSearch.jsx
@@ -7,7 +7,7 @@ import { useAPIMethod, usePagination, SearchBar } from "@ess-ics/ce-ui-common";
import { apiContext } from "../../api/DeployApi";
import { ROWS_PER_PAGE } from "../../constants";
-export function RecordSearch({ iocName, rowType }) {
+export function RecordSearch({ iocName, rowType, isExpanded }) {
const client = useContext(apiContext);
const {
@@ -49,16 +49,26 @@ export function RecordSearch({ iocName, rowType }) {
// Request new search results whenever search or pagination changes
useEffect(() => {
- let requestParams = initRequestParams(pagination);
- requestParams.pv_status = recordFilter;
- requestParams.text = searchParams.get("query");
- requestParams.ioc_name = iocName;
- getRecords(requestParams);
+ if (isExpanded) {
+ let requestParams = initRequestParams(pagination);
+ requestParams.pv_status = recordFilter;
+ requestParams.text = searchParams.get("query");
+ requestParams.ioc_name = iocName;
+ getRecords(requestParams);
- return () => {
- abort();
- };
- }, [getRecords, recordFilter, searchParams, pagination, abort, iocName]);
+ return () => {
+ abort();
+ };
+ }
+ }, [
+ getRecords,
+ recordFilter,
+ searchParams,
+ pagination,
+ abort,
+ iocName,
+ isExpanded
+ ]);
// Callback for searchbar, called whenever user updates search
const setSearch = useCallback(
diff --git a/src/views/host/details/HostDetailsView.jsx b/src/views/host/details/HostDetailsView.jsx
index bd1cb8e4..325ea578 100644
--- a/src/views/host/details/HostDetailsView.jsx
+++ b/src/views/host/details/HostDetailsView.jsx
@@ -130,6 +130,7 @@ export function HostDetailsView({ hostId, host, alert }) {
<LokiPanel
hostName={host.name}
isSyslog
+ isExpanded={accordionState.logStreamOpen}
/>
</SimpleAccordion>
</AccessControl>
--
GitLab