query - busy indicator, canceling

packages/web/src/TabsPanel.js

@@ -91,7 +91,7 @@ export default function TabsPanel() {
           onClick={(e) => handleTabClick(e, tab.tabid)}
           onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
         >
-          {getIconImage(tab.icon)}
+          {tab.busy ? <i className="fas fa-spinner fa-spin"></i> : getIconImage(tab.icon)}
           <FileNameWrapper>{tab.title}</FileNameWrapper>
           <CloseButton
             className="fas fa-times tabCloseButton"

packages/web/src/appobj/AppObjects.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
 
-import _ from 'lodash'
+import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
@@ -13,12 +13,12 @@ const AppObjectDiv = styled.div`
   }
   cursor: pointer;
   white-space: nowrap;
-  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+  font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
 `;
 
 const AppObjectSpan = styled.span`
   white-space: nowrap;
-  font-weight: ${props => (props.isBold ? 'bold' : 'normal')};
+  font-weight: ${(props) => (props.isBold ? 'bold' : 'normal')};
 `;
 
 const IconWrap = styled.span`
@@ -33,13 +33,14 @@ export function AppObjectCore({
   makeAppObj,
   onClick,
   isBold,
+  isBusy,
   component = 'div',
   prefix = null,
   ...other
 }) {
   const appObjectParams = useAppObjectParams();
 
-  const handleContextMenu = event => {
+  const handleContextMenu = (event) => {
     if (!Menu) return;
 
     event.preventDefault();
@@ -60,9 +61,7 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>
-        <Icon />
-      </IconWrap>
+      <IconWrap>{isBusy ? <i className="fas fa-spinner fa-spin"></i> : <Icon />}</IconWrap>
       {title}
     </Component>
   );

packages/web/src/appobj/openedTabAppObject.js

@@ -2,7 +2,7 @@ import React from 'react';
 import _ from 'lodash';
 import { getIconImage } from '../icons';
 
-const openedTabAppObject = () => ({ tabid, props, selected, icon, title }, { setOpenedTabs }) => {
+const openedTabAppObject = () => ({ tabid, props, selected, icon, title, busy }, { setOpenedTabs }) => {
   const key = tabid;
   const Icon = (props) => getIconImage(icon, props);
   const isBold = !!selected;
@@ -16,7 +16,7 @@ const openedTabAppObject = () => ({ tabid, props, selected, icon, title }, { set
     );
   };
 
-  return { title, key, Icon, isBold, onClick };
+  return { title, key, Icon, isBold, onClick, isBusy: busy };
 };
 
 export default openedTabAppObject;

packages/web/src/query/QueryToolbar.js

@@ -1,10 +1,15 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryToolbar({ execute,isDatabaseDefined }) {
+export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy }) {
   return (
     <>
-      <ToolbarButton disabled={!isDatabaseDefined} onClick={execute}>Execute</ToolbarButton>
+      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute}>
+        Execute
+      </ToolbarButton>
+      <ToolbarButton disabled={!busy} onClick={cancel}>
+        Cancel
+      </ToolbarButton>
     </>
   );
 }

packages/web/src/sqleditor/ResultTabs.js

@@ -7,10 +7,10 @@ export default function ResultTabs({ children, sessionId, executeNumber }) {
   const socket = useSocket();
   const [resultIds, setResultIds] = React.useState([]);
 
-  const handleResultSet = (props) => {
+  const handleResultSet = React.useCallback((props) => {
     const { jslid } = props;
     setResultIds((ids) => [...ids, jslid]);
-  };
+  }, []);
 
   React.useEffect(() => {
     setResultIds([]);

packages/web/src/tabs/QueryTab.js

@@ -4,24 +4,15 @@ import _ from 'lodash';
 import axios from '../utility/axios';
 import { useConnectionInfo } from '../utility/metadataLoaders';
 import SqlEditor from '../sqleditor/SqlEditor';
-import { useUpdateDatabaseForTab } from '../utility/globalState';
+import { useUpdateDatabaseForTab, useSetOpenedTabs } from '../utility/globalState';
 import QueryToolbar from '../query/QueryToolbar';
 import SessionMessagesView from '../query/SessionMessagesView';
 import { TabPage } from '../widgets/TabControl';
 import ResultTabs from '../sqleditor/ResultTabs';
 import { VerticalSplitter } from '../widgets/Splitter';
 import keycodes from '../utility/keycodes';
-
-// const MainContainer = styled.div``;
-
-// const EditorContainer = styled.div`
-//   height: 600px;
-//   position: relative;
-// `;
-
-// const MessagesContainer = styled.div`
-//   height: 200px;
-// `;
+import { changeTab } from '../utility/common';
+import useSocket from '../utility/SocketProvider';
 
 export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPortalRef, initialScript }) {
   const localStorageKey = `sql_${tabid}`;
@@ -29,6 +20,9 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
   const queryTextRef = React.useRef(queryText);
   const [sessionId, setSessionId] = React.useState(null);
   const [executeNumber, setExecuteNumber] = React.useState(0);
+  const setOpenedTabs = useSetOpenedTabs();
+  const socket = useSocket();
+  const [busy, setBusy] = React.useState(false);
 
   const saveToStorage = React.useCallback(() => localStorage.setItem(localStorageKey, queryTextRef.current), [
     localStorageKey,
@@ -44,6 +38,23 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
     };
   }, []);
 
+  const handleSessionDone = React.useCallback(() => {
+    setBusy(false);
+  }, []);
+
+  React.useEffect(() => {
+    if (sessionId && socket) {
+      socket.on(`session-done-${sessionId}`, handleSessionDone);
+      return () => {
+        socket.off(`session-done-${sessionId}`, handleSessionDone);
+      };
+    }
+  }, [sessionId, socket]);
+
+  React.useEffect(() => {
+    changeTab(tabid, setOpenedTabs, (tab) => ({ ...tab, busy }));
+  }, [busy]);
+
   const editorRef = React.useRef(null);
 
   useUpdateDatabaseForTab(tabVisible, conid, database);
@@ -68,12 +79,19 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
       sesid = resp.data.sesid;
       setSessionId(sesid);
     }
+    setBusy(true);
     await axios.post('sessions/execute-query', {
       sesid,
       sql: selectedText || queryText,
     });
   };
 
+  const handleCancel = () => {
+    axios.post('sessions/cancel', {
+      sesid: sessionId,
+    });
+  };
+
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
     if (keyCode == keycodes.f5) {
       event.preventDefault();
@@ -113,7 +131,12 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
         toolbarPortalRef.current &&
         tabVisible &&
         ReactDOM.createPortal(
-          <QueryToolbar isDatabaseDefined={conid && database} execute={handleExecute} />,
+          <QueryToolbar
+            isDatabaseDefined={conid && database}
+            execute={handleExecute}
+            busy={busy}
+            cancel={handleCancel}
+          />,
           toolbarPortalRef.current
         )}
     </>

packages/web/src/utility/common.js

@@ -11,13 +11,13 @@ export class LoadingToken {
 }
 
 export function sleep(milliseconds) {
-  return new Promise(resolve => window.setTimeout(() => resolve(null), milliseconds));
+  return new Promise((resolve) => window.setTimeout(() => resolve(null), milliseconds));
 }
 
 export function openNewTab(setOpenedTabs, newTab) {
   const tabid = uuidv1();
-  setOpenedTabs(files => [
-    ...(files || []).map(x => ({ ...x, selected: false })),
+  setOpenedTabs((files) => [
+    ...(files || []).map((x) => ({ ...x, selected: false })),
     {
       tabid,
       selected: true,
@@ -25,3 +25,7 @@ export function openNewTab(setOpenedTabs, newTab) {
     },
   ]);
 }
+
+export function changeTab(tabid, setOpenedTabs, changeFunc) {
+  setOpenedTabs((files) => files.map((tab) => (tab.tabid == tabid ? changeFunc(tab) : tab)));
+}