fix: add stop pipeline to StageRunner view

harness · Oct 28, 2022 · 889fdcc · 889fdcc
1 parent 98efde2
commit 889fdcc
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 4 deletions.
diff --git a/backend/scripts/run-drone.sh b/backend/scripts/run-drone.sh
@@ -18,7 +18,7 @@ else
 	pushd "${PIPELINE_DIR}" &>/dev/null || true
 	DRONE_CMD=("${SCRIPT_DIR}/drone" "exec" "${@:1:$#-2}" "${PIPELINE_FILE_NAME}")
 	# printf "\n Command to be run %s\n"  "${DRONE_CMD[*]}"
-	bash -c "${DRONE_CMD[*]}" > /dev/null 2>&1 & echo $! > "${SCRIPT_DIR}/${PID_FILE}.pid"
+	bash -c "${DRONE_CMD[*]}" & echo $! > "${SCRIPT_DIR}/${PID_FILE}.pid"
     # bash -c "${DRONE_CMD[*]}"
 	popd +1 &>/dev/null || true
 fi
diff --git a/ui/src/components/dialogs/RunPipelineDialog.tsx b/ui/src/components/dialogs/RunPipelineDialog.tsx
@@ -227,6 +227,12 @@ export default function RunPipelineDialog({ ...props }) {
           onOutput(data) {
             console.debug('onOutput:%s', JSON.stringify(data));
             if (data.stderr) {
+              // any signals to kill the drone process will be treated 
+              // graciously - as it will denote docker signal 137 which
+              // wil be shown as "Stopped"
+              if (data.stderr === 'received signal, terminating process'){
+                return;
+              }
               showError(data.stderr);
               return;
             }

diff --git a/ui/src/components/views/StageRunnerView.tsx b/ui/src/components/views/StageRunnerView.tsx
@@ -6,6 +6,8 @@ import RemovePipelineDialog from '../dialogs/RemovePipelineDialog';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
 import DeleteIcon from '@mui/icons-material/Delete';
 import RunPipelineDialog from '../dialogs/RunPipelineDialog';
+import StopCircleOutlinedIcon from '@mui/icons-material/StopCircleOutlined';
+import StopPipelineDialog from '../dialogs/StopPipelineDialog';
 import { useSelector } from 'react-redux';
 import {
   Divider,
@@ -19,7 +21,7 @@ import {
   Tooltip,
   Typography
 } from '@mui/material';
-import { selectStagesByPipeline, refreshPipelines } from '../../features/pipelinesSlice';
+import { selectStagesByPipeline, refreshPipelines, selectPipelineStatus } from '../../features/pipelinesSlice';
 import { StepStatus } from '../StepStatus';
 import { LazyLog, ScrollFollow } from 'react-lazylog';
 import { RootState } from '../../app/store';
@@ -48,10 +50,12 @@ export const StageRunnerView = (props) => {
 
   const pipelineFile = query.get('file');
   const stages = useSelector((state: RootState) => selectStagesByPipeline(state, pipelineFile));
+  const pipelineStatus = useSelector((state: RootState) => selectPipelineStatus(state, pipelineFile));
 
   const [workspacePath, setWorkspacePath] = useState('');
 
   const [removeConfirm, setRemoveConfirm] = useState(false);
+  const [stopConfirm, setStopConfirm] = useState(false);
   const [openRunPipeline, setOpenRunPipeline] = useState(false);
 
   const showLogs = async (stage, step) => {
@@ -258,6 +262,14 @@ export const StageRunnerView = (props) => {
     setOpenRunPipeline(false);
   };
 
+  const handleStopPipeline = () => {
+    setStopConfirm(true);
+  };
+
+  const handleStopPipelineDialogClose = () => {
+    setStopConfirm(false);
+  };
+
   const hasServices = (steps: Step[]) => {
     return steps && steps.find(s => s.isService);
   }
@@ -430,7 +442,7 @@ export const StageRunnerView = (props) => {
                 <PlayCircleOutlineOutlinedIcon
                   color="primary"
                   sx={{
-                    fontSize: '24px'
+                    fontSize: '26px'
                   }}
                 />
               </IconButton>
@@ -450,6 +462,30 @@ export const StageRunnerView = (props) => {
                 />
               </IconButton>
             </Tooltip>
+            <Tooltip title="Stop Pipeline">
+              <span>
+                <IconButton
+                  onClick={handleStopPipeline}
+                  color="primary"
+                  disabled={pipelineStatus != 2}
+                  sx={{
+                    fontSize: '24px'
+                  }}
+                >
+                  <StopCircleOutlinedIcon
+                    sx={{
+                      fontSize: '28px'
+                    }} />
+                </IconButton>
+              </span>
+            </Tooltip>
+            {stopConfirm && (
+              <StopPipelineDialog
+                open={stopConfirm}
+                pipelineFile={pipelineFile}
+                onClose={handleStopPipelineDialogClose}
+              />
+            )}
             <Tooltip title="Remove Pipeline">
               <IconButton
                 onClick={handleDeletePipelines}
@@ -460,7 +496,7 @@ export const StageRunnerView = (props) => {
                 <DeleteIcon
                   color="primary"
                   sx={{
-                    fontSize: '24px'
+                    fontSize: '26px'
                   }}
                 />
               </IconButton>