kill query

packages/web/src/query/QueryToolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToolbarButton from '../widgets/ToolbarButton';
 
-export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format }) {
+export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format, isConnected, kill }) {
   return (
     <>
       <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="fas fa-play">
@@ -10,6 +10,9 @@ export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy,
       <ToolbarButton disabled={!busy} onClick={cancel} icon="fas fa-times">
         Cancel
       </ToolbarButton>
+      <ToolbarButton disabled={!isConnected} onClick={kill} icon="fas fa-times">
+        Kill
+      </ToolbarButton>
       <ToolbarButton onClick={save} icon="fas fa-save">
         Save
       </ToolbarButton>

packages/web/src/tabs/QueryTab.js

@@ -178,6 +178,13 @@ export default function QueryTab({
     });
   };
 
+  const handleKill = () => {
+    axios.post('sessions/cancel', {
+      sesid: sessionId,
+    });
+    setSessionId(null);
+  };
+
   const handleKeyDown = (data, hash, keyString, keyCode, event) => {
     if (keyCode == keycodes.f5) {
       event.preventDefault();
@@ -236,6 +243,8 @@ export default function QueryTab({
             cancel={handleCancel}
             format={handleFormatCode}
             save={saveSqlFileModalState.open}
+            isConnected={!!sessionId}
+            kill={handleKill}
           />,
           toolbarPortalRef.current
         )}