From 3c15b0bce07071d69f7d695a2547585f3ea5f0bf Mon Sep 17 00:00:00 2001
From: Johanna Szepanski <johanna.szepanski@softhouse.se>
Date: Wed, 6 Nov 2024 07:57:46 +0100
Subject: [PATCH] moved error message on top of the console
---
src/components/common/Loki/LokiPanel.js | 59 +++++++++++++++++--------
1 file changed, 41 insertions(+), 18 deletions(-)
diff --git a/src/components/common/Loki/LokiPanel.js b/src/components/common/Loki/LokiPanel.js
index c8af92fb..d9149797 100644
--- a/src/components/common/Loki/LokiPanel.js
+++ b/src/components/common/Loki/LokiPanel.js
@@ -1,5 +1,10 @@
-import { useState, useEffect, useCallback, useContext, useMemo } from "react";
-import { Stack, LinearProgress, Box, Alert } from "@mui/material";
+import { useState, useEffect, useCallback, useMemo } from "react";
+import {
+ useLazyFetchSyslogLinesQuery,
+ useLazyFetchProcServLogLinesQuery
+} from "../../../store/deployApi";
+import { ApiAlertError } from "../Alerts/ApiAlertError";
+import { Stack, LinearProgress, Box } from "@mui/material";
import { LogStreamConsole } from "../LogStream/LogStreamConsole";
import { LogStreamConsoleDialog } from "../LogStream/LogStreamConsoleDialog";
import { TimeRange } from "../Inputs/TimeRange";
@@ -105,14 +110,17 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
[hostName, iocName, timeRange]
);
- const [getSysLogData, { data: sysLogData, error: sysLogError }] =
- useLazyFetchSyslogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
+ const [
+ getSysLogData,
+ { data: sysLogData, error: sysLogError, isLoading: sysDataIsLoading }
+ ] = useLazyFetchSyslogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
- const [getProcServLog, { data: procServLog, error: procServLogError }] =
- useLazyFetchProcServLogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
+ const [
+ getProcServLog,
+ { data: procServLog, error: procServLogError, isLoading: procDataIsLoading }
+ ] = useLazyFetchProcServLogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
const hasLogError = !!sysLogError || !!procServLogError;
- const hasLogData = !!sysLogData || !!procServLog;
const hasAbortError =
isAbortError(sysLogError) || isAbortError(procServLogError);
@@ -170,11 +178,7 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
return sysLogData || procServLog;
};
- if (hasLogError && !hasAbortError) {
- return <ApiAlertError error={sysLogError || procServLogError} />;
- }
-
- if (!hasLogData && !hasLogError) {
+ if (sysDataIsLoading || procDataIsLoading) {
return (
<div style={{ width: "100%" }}>
<LinearProgress color="primary" />
@@ -216,12 +220,31 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
/>
</Box>
</LogStreamConsoleDialog>
- <LogStreamConsole
- log={html}
- dataReady={dataReady}
- height="500px"
- loading={periodChange}
- />
+ <Box
+ sx={{
+ position: "relative"
+ }}
+ >
+ {hasLogError && !hasAbortError && (
+ <Box
+ sx={{
+ position: "absolute",
+ width: "auto",
+ maxWidth: "40%",
+ right: "1rem",
+ top: "1rem"
+ }}
+ >
+ <ApiAlertError error={sysLogError || procServLogError} />
+ </Box>
+ )}
+ <LogStreamConsole
+ log={html}
+ dataReady={dataReady}
+ height="500px"
+ loading={periodChange}
+ />
+ </Box>
</Box>
);
}
--
GitLab