From 45d99a41264e41b995848cc1609a92f360032d53 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Thu, 28 Jan 2021 13:00:24 +0100
Subject: [PATCH] timer labels in query design tab and shell tab

---
 packages/web/src/tabs/QueryDesignTab.js | 20 +++++++++++++++++++-
 packages/web/src/tabs/ShellTab.js       | 12 +++++++++++-
 2 files changed, 30 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/tabs/QueryDesignTab.js b/packages/web/src/tabs/QueryDesignTab.js
index c50ff5bd..1d03eeea 100644
--- a/packages/web/src/tabs/QueryDesignTab.js
+++ b/packages/web/src/tabs/QueryDesignTab.js
@@ -25,8 +25,18 @@ import QueryDesignColumns from '../designer/QueryDesignColumns';
 import { findEngineDriver } from 'dbgate-tools';
 import { generateDesignedQuery } from '../designer/designerTools';
 import useUndoReducer from '../utility/useUndoReducer';
+import { StatusBarItem } from '../widgets/StatusBar';
+import useTimerLabel from '../utility/useTimerLabel';
 
-export default function QueryDesignTab({ tabid, conid, database, tabVisible, toolbarPortalRef, ...other }) {
+export default function QueryDesignTab({
+  tabid,
+  conid,
+  database,
+  tabVisible,
+  toolbarPortalRef,
+  statusbarPortalRef,
+  ...other
+}) {
   const [sessionId, setSessionId] = React.useState(null);
   const [visibleResultTabs, setVisibleResultTabs] = React.useState(false);
   const [executeNumber, setExecuteNumber] = React.useState(0);
@@ -49,6 +59,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
     },
     { mergeNearActions: true }
   );
+  const timerLabel = useTimerLabel();
 
   React.useEffect(() => {
     // @ts-ignore
@@ -61,6 +72,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
 
   const handleSessionDone = React.useCallback(() => {
     setBusy(false);
+    timerLabel.stop();
   }, []);
 
   const generatePreview = (value, engine) => {
@@ -114,6 +126,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
       setSessionId(sesid);
     }
     setBusy(true);
+    timerLabel.start();
     await axios.post('sessions/execute-query', {
       sesid,
       sql: sqlPreview,
@@ -126,6 +139,7 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
     });
     setSessionId(null);
     setBusy(false);
+    timerLabel.stop();
   };
 
   const handleKeyDown = React.useCallback(
@@ -200,6 +214,10 @@ export default function QueryDesignTab({ tabid, conid, database, tabVisible, too
           />,
           toolbarPortalRef.current
         )}
+      {statusbarPortalRef &&
+        statusbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<StatusBarItem>{timerLabel.text}</StatusBarItem>, statusbarPortalRef.current)}
       <SaveTabModal
         modalState={saveFileModalState}
         tabVisible={tabVisible}
diff --git a/packages/web/src/tabs/ShellTab.js b/packages/web/src/tabs/ShellTab.js
index e54fa675..c7cd3766 100644
--- a/packages/web/src/tabs/ShellTab.js
+++ b/packages/web/src/tabs/ShellTab.js
@@ -16,16 +16,19 @@ import useEditorData from '../utility/useEditorData';
 import SaveTabModal from '../modals/SaveTabModal';
 import useModalState from '../modals/useModalState';
 import LoadingInfo from '../widgets/LoadingInfo';
+import useTimerLabel from '../utility/useTimerLabel';
+import { StatusBarItem } from '../widgets/StatusBar';
 
 const configRegex = /\s*\/\/\s*@ImportExportConfigurator\s*\n\s*\/\/\s*(\{[^\n]+\})\n/;
 const requireRegex = /\s*(\/\/\s*@require\s+[^\n]+)\n/g;
 const initRegex = /([^\n]+\/\/\s*@init)/g;
 
-export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other }) {
+export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, statusbarPortalRef, ...other }) {
   const [busy, setBusy] = React.useState(false);
   const showModal = useShowModal();
   const { editorData, setEditorData, isLoading } = useEditorData({ tabid });
   const saveFileModalState = useModalState();
+  const timerLabel = useTimerLabel();
 
   const setOpenedTabs = useSetOpenedTabs();
 
@@ -42,6 +45,7 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
 
   const handleRunnerDone = React.useCallback(() => {
     setBusy(false);
+    timerLabel.stop();
   }, []);
 
   React.useEffect(() => {
@@ -69,12 +73,14 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
     runid = resp.data.runid;
     setRunnerId(runid);
     setBusy(true);
+    timerLabel.start();
   };
 
   const handleCancel = () => {
     axios.post('runners/cancel', {
       runid: runnerId,
     });
+    timerLabel.stop();
   };
 
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
@@ -128,6 +134,10 @@ export default function ShellTab({ tabid, tabVisible, toolbarPortalRef, ...other
           />,
           toolbarPortalRef.current
         )}
+      {statusbarPortalRef &&
+        statusbarPortalRef.current &&
+        tabVisible &&
+        ReactDOM.createPortal(<StatusBarItem>{timerLabel.text}</StatusBarItem>, statusbarPortalRef.current)}
       <SaveTabModal
         modalState={saveFileModalState}
         tabVisible={tabVisible}