feat: open logger dialog automatically

if we have a new warn, error or fatal the logger dialog should be opened automatically close #2485
cheminfo · Jul 6, 2023 · b80a2d1 · b80a2d1
1 parent 41b4cd8
commit b80a2d1
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 34 deletions.
diff --git a/src/component/context/LoggerContext.tsx b/src/component/context/LoggerContext.tsx
@@ -10,6 +10,8 @@ import {
   useEffect,
 } from 'react';
 
+import { LogsHistory } from '../header/LogsHistory';
+
 import { usePreferences } from './PreferencesContext';
 
 export const LoggerContext = createContext<{
@@ -40,15 +42,19 @@ export function LoggerProvider({ children }: LoggerProviderProps) {
   } = usePreferences();
   const [lastReadLogId, setLastLogId] = useState(0);
   const [logsHistory, setLogsHistory] = useState<LogEntry[]>([]);
+  const [isLogHistoryOpened, openLogHistory] = useState(false);
+
   const loggerRef = useRef<FifoLogger>(
     new FifoLogger({
       onChange: (log, logs) => {
-        if (
-          log?.error &&
-          (log?.levelLabel === 'error' || log?.levelLabel === 'fatal')
-        ) {
-          // eslint-disable-next-line no-console
-          console.error(log.error);
+        if (log && ['warn', 'error', 'fatal'].includes(log.levelLabel)) {
+          //open the log history automatically if we have warn,error, or fatal
+          openLogHistory(true);
+
+          if (log?.error) {
+            // eslint-disable-next-line no-console
+            console.error(log.error);
+          }
         }
         setLogsHistory(logs.slice());
       },
@@ -79,6 +85,9 @@ export function LoggerProvider({ children }: LoggerProviderProps) {
 
   return (
     <LoggerContext.Provider value={loggerState}>
+      {isLogHistoryOpened && (
+        <LogsHistory autoOpen onClose={() => openLogHistory(false)} />
+      )}
       {children}
     </LoggerContext.Provider>
   );

diff --git a/src/component/header/LogsHistory.tsx b/src/component/header/LogsHistory.tsx
@@ -57,9 +57,15 @@ function getMaxLevelLogs(logs: LogEntry[], lastReadLogId: number) {
   return { backgroundColor, count: logsCounts[maxLevel] };
 }
 
-export function LogsHistory() {
+interface LogsHistoryProps {
+  autoOpen?: boolean;
+  onClose?: () => void;
+}
+
+export function LogsHistory(props: LogsHistoryProps) {
+  const { autoOpen = false, onClose } = props;
   const { logsHistory, logger, markAsRead, lastReadLogId } = useLogger();
-  const [isOpenDialog, openDialog, closeDialog] = useOnOff(false);
+  const [isOpenDialog, openDialog, closeDialog] = useOnOff(autoOpen);
 
   const { count, backgroundColor } = getMaxLevelLogs(
     logsHistory,
@@ -121,41 +127,43 @@ export function LogsHistory() {
   );
 
   const sortedLogs = logsHistory.slice().sort((a, b) => b.time - a.time);
-
   return (
     <>
-      <Button.BarButton
-        onClick={() => {
-          openDialog();
-        }}
-      >
-        <div style={{ position: 'relative' }}>
-          <IoBugOutline fontSize="1.4em" />
-          {count && (
-            <span
-              style={{
-                position: 'absolute',
-                top: '-0.4em',
-                left: '-0.4em',
-                backgroundColor,
-                borderRadius: '50%',
-                minWidth: '14px',
-                fontSize: '0.75em',
-                color: 'white',
-              }}
-            >
-              {count}
-            </span>
-          )}
-        </div>
-      </Button.BarButton>
+      {!autoOpen && (
+        <Button.BarButton
+          onClick={() => {
+            openDialog();
+          }}
+        >
+          <div style={{ position: 'relative' }}>
+            <IoBugOutline fontSize="1.4em" />
+            {count && (
+              <span
+                style={{
+                  position: 'absolute',
+                  top: '-0.4em',
+                  left: '-0.4em',
+                  backgroundColor,
+                  borderRadius: '50%',
+                  minWidth: '14px',
+                  fontSize: '0.75em',
+                  color: 'white',
+                }}
+              >
+                {count}
+              </span>
+            )}
+          </div>
+        </Button.BarButton>
+      )}
 
       <Modal
         hasCloseButton
         isOpen={isOpenDialog}
         onRequestClose={() => {
           markAsRead();
           closeDialog();
+          onClose?.();
         }}
       >
         <Modal.Header>Logs History </Modal.Header>