removed snackbar error, updated to rtk query and some minor cleanup

src/components/common/Loki/LokiPanel.js

@@ -6,14 +6,9 @@ import { TimeRange } from "../Inputs/TimeRange";
 import { PopoutButton } from "../Buttons/PopoutButton";
 import { useCustomSnackbar } from "../snackbar/Snackbar";
 import { closeSnackbar } from "notistack";
-import { apiContext } from "../../../api/DeployApi";
-import {
-  useAPIMethod,
-  usePolling,
-  formatDateAndTime
-} from "@ess-ics/ce-ui-common";
+import { formatDateAndTime } from "@ess-ics/ce-ui-common";
 import Convert from "ansi-to-html";
-import { getErrorMessage, isAbortError } from "../Helper";
+import { isAbortError } from "../Helper";
 
 const TIME_RANGE_VALUES = [
   {
@@ -35,17 +30,6 @@ const TIME_RANGE_VALUES = [
 const LOG_POLL_INTERVAL = 5000;
 export function LokiPanel({ hostName, iocName, isSyslog }) {
   const showWarning = useCustomSnackbar();
-  const client = useContext(apiContext);
-
-  const handleError = useCallback(
-    (error) => {
-      if (error && !isAbortError(error)) {
-        showWarning(getErrorMessage(error));
-      }
-    },
-    [showWarning]
-  );
-
   const [timeRange, setTimeRange] = useState(720);
   const [logDialogOpen, setLogDialogOpen] = useState(false);
   const [periodChange, setPeriodChange] = useState(false);
@@ -114,46 +98,23 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
 
   const params = useMemo(
     () => ({
-      host_name: hostName,
-      ioc_name: iocName,
-      time_range: timeRange
+      hostName: hostName,
+      iocName: iocName,
+      timeRange: timeRange
     }),
     [hostName, iocName, timeRange]
   );
 
-  const {
-    value: sysLogData,
-    wrapper: getSysLogData,
-    loading: sysLoading,
-    error: sysLogError,
-    abort: getSysLogDataAbort
-  } = useAPIMethod({
-    fcn: client.apis.Hosts.fetchSyslogLines,
-    call: false,
-    params
-  });
+  const [getSysLogData, { data: sysLogData, error: sysLogError }] =
+    useLazyFetchSyslogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
 
-  const {
-    value: procServLog,
-    wrapper: getProcServLog,
-    loading: procServLoading,
-    error: procServLogError,
-    abort: getProcServLogAbort
-  } = useAPIMethod({
-    fcn: client.apis.IOCs.fetchProcServLogLines,
-    call: false,
-    params
-  });
+  const [getProcServLog, { data: procServLog, error: procServLogError }] =
+    useLazyFetchProcServLogLinesQuery({ pollingInterval: LOG_POLL_INTERVAL });
 
-  // show sysLogErrors on snackBar
-  useEffect(() => {
-    handleError(sysLogError);
-  }, [sysLogError, handleError]);
-
-  // show procServErrors on snackBar
-  useEffect(() => {
-    handleError(procServLogError);
-  }, [procServLogError, handleError]);
+  const hasLogError = !!sysLogError || !!procServLogError;
+  const hasLogData = !!sysLogData || !!procServLog;
+  const hasAbortError =
+    isAbortError(sysLogError) || isAbortError(procServLogError);
 
   const handleTimeRangeChange = (event) => {
     setPeriodChange(true);
@@ -174,26 +135,13 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
     };
   }, [alertIds]);
 
-  const updateLogs = useCallback(() => {
+  useEffect(() => {
     if (isSyslog === true) {
-      getSysLogData(hostName, timeRange);
+      getSysLogData(params);
     } else {
-      getProcServLog(hostName, iocName, timeRange);
+      getProcServLog(params);
     }
-  }, [getSysLogData, getProcServLog, hostName, iocName, isSyslog, timeRange]);
-
-  const hasLogError = !!sysLogError || !!procServLogError;
-  const hasLogData = !!sysLogData || !!procServLog;
-  const hasAbortError =
-    isAbortError(sysLogError) || isAbortError(procServLogError);
-  const logError = sysLogError || procServLogError;
-
-  usePolling(
-    updateLogs,
-    sysLoading || procServLoading || hasLogError,
-    LOG_POLL_INTERVAL,
-    isSyslog ? getSysLogDataAbort : getProcServLogAbort
-  );
+  }, [getSysLogData, getProcServLog, isSyslog, params]);
 
   useEffect(() => {
     setHtml(
@@ -223,7 +171,7 @@ export function LokiPanel({ hostName, iocName, isSyslog }) {
   };
 
   if (hasLogError && !hasAbortError) {
-    return <Alert severity="error">{getErrorMessage(logError)}</Alert>;
+    return <ApiAlertError error={sysLogError || procServLogError} />;
   }
 
   if (!hasLogData && !hasLogError) {

src/components/deployments/DeploymentJobOutput.js

@@ -13,7 +13,6 @@ import { LogStreamConsoleDialog } from "../common/LogStream/LogStreamConsoleDial
 import { PopoutButton } from "../common/Buttons/PopoutButton";
 import { Alert, LinearProgress, Stack } from "@mui/material";
 import { getErrorMessage, isAbortError } from "../common/Helper";
-import useCustomSnackbar from "../common/snackbar";
 
 const LOG_POLL_INTERVAL = 5000;
 
@@ -27,7 +26,6 @@ export function DeploymentJobOutput({ job }) {
     }),
     [job]
   );
-  const showWarning = useCustomSnackbar();
 
   const {
     value: log,
@@ -58,12 +56,6 @@ export function DeploymentJobOutput({ job }) {
     abortGetLogById
   );
 
-  useEffect(() => {
-    if (logError && !hasAbortError) {
-      showWarning(getErrorMessage(logError));
-    }
-  }, [logError, showWarning]);
-
   useEffect(() => {
     finalResultsNeeded.current = true;
   }, [job.jobId]);