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({timerLabel.text}, statusbarPortalRef.current)} { 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({timerLabel.text}, statusbarPortalRef.current)}