Turn "Run" button into "Stop" button when a script is running long.

Summary:
It waits one second before doing this to avoid flickering on scripts that run quickly.

{F97120}

Test Plan: Run a fast script, a slow one, a few that fail reliably, etc. For one that usually takes a long time, try `etcd_get_trace`; `http_data` in production sits close to the threshold for some clusters and is a good example for both cases.

Reviewers: nserrino, michelle, #engineering

Reviewed By: michelle, #engineering

JIRA Issues: PC-635

Differential Revision: https://phab.corp.pixielabs.ai/D6493

GitOrigin-RevId: bbca0b6da6270b8f72bee45105f7313db53494a5

src/ui/src/containers/live/execute-button.tsx

@@ -31,10 +31,29 @@ const StyledButton = withStyles((theme: Theme) => createStyles({
 
 type ExecuteScriptButtonProps = WithStyles<typeof styles>;
 
+const CANCELLABILITY_DELAY_MS = 1000;
+
 const ExecuteScriptButtonBare = ({ classes }: ExecuteScriptButtonProps) => {
   const { healthy } = React.useContext(ClientContext);
   const { loading } = React.useContext(ResultsContext);
-  const { saveEditorAndExecute } = React.useContext(ScriptContext);
+  const { saveEditorAndExecute, cancelExecution } = React.useContext(ScriptContext);
+
+  const [cancellable, setCancellable] = React.useState<boolean>(false);
+  const [cancellabilityTimer, setCancellabilityTimer] = React.useState<number>(undefined);
+
+  React.useEffect(() => {
+    window.clearTimeout(cancellabilityTimer);
+    if (loading && healthy) {
+      setCancellabilityTimer(window.setTimeout(() => {
+        setCancellable(loading && healthy);
+      }, CANCELLABILITY_DELAY_MS));
+    } else {
+      setCancellable(false);
+    }
+
+    // cancellabilityTimer must not appear in this hook's deps. Infinite loop.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [loading, healthy, cancelExecution]);
 
   let tooltipTitle;
   if (loading) {
@@ -49,14 +68,14 @@ const ExecuteScriptButtonBare = ({ classes }: ExecuteScriptButtonProps) => {
     <Tooltip title={tooltipTitle}>
       <div className={classes.buttonContainer}>
         <StyledButton
-          variant='contained'
+          variant={cancellable ? 'outlined' : 'contained'}
           color='primary'
-          disabled={!healthy || loading}
-          onClick={saveEditorAndExecute}
+          disabled={!healthy || (loading && !cancellable)}
+          onClick={cancellable ? cancelExecution : saveEditorAndExecute}
           size='small'
           startIcon={<PlayIcon />}
         >
-          <span className={classes.buttonText}>Run</span>
+          <span className={classes.buttonText}>{cancellable ? 'Stop' : 'Run'}</span>
         </StyledButton>
       </div>
     </Tooltip>