Merge pull request #358 from kube-HPC/HKUBE-1909-stop-of-all-jobs

invoke stop of all jobs of a certain pipeline

Author: zivglik

src/Routes/Tables/Pipelines/PipelineActions.react.js

@@ -5,13 +5,14 @@ import {
   EditOutlined,
   InfoCircleOutlined,
   PlayCircleOutlined,
+  StopOutlined,
 } from '@ant-design/icons';
 import { Button, Empty, Popover, Tooltip } from 'antd';
 
 import { USER_GUIDE } from 'const';
 import { useActions } from 'hooks';
 import isEqual from 'lodash/isEqual';
-import { deleteConfirmAction } from 'utils';
+import { deleteConfirmAction, stopConfirmAction } from 'utils';
 import PipelineCreateBoard from './TensorflowBoards/PipelineCreateBoard.react';
 import usePath from './usePath';
 
@@ -23,7 +24,7 @@ const title = 'Create Tensor Board for selected Node';
 
 const PipelineActions = ({ pipeline, className }) => {
   const { goTo } = usePath();
-  const { deleteStored: remove } = useActions();
+  const { deleteStored: remove, stopAllPipeline } = useActions();
 
   const container = useRef();
 
@@ -38,6 +39,11 @@ const PipelineActions = ({ pipeline, className }) => {
     remove,
   ]);
 
+  const onStop = useCallback(
+    () => stopConfirmAction(stopAllPipeline, pipeline),
+    [pipeline, stopAllPipeline]
+  );
+
   const setPopupContainer = useCallback(() => container.current, [container]);
 
   const onUpdate = useCallback(() => {
@@ -90,6 +96,9 @@ const PipelineActions = ({ pipeline, className }) => {
         <Tooltip title="delete pipeline">
           <Button icon={<DeleteOutlined />} onClick={onDelete} />
         </Tooltip>
+        <Tooltip title="stop all jobs of pipeline">
+          <Button icon={<StopOutlined />} onClick={onStop} />
+        </Tooltip>
         <Tooltip title="show overview">
           <Button icon={<InfoCircleOutlined />} onClick={onEdit} />
         </Tooltip>

src/actions/index.js

@@ -30,6 +30,7 @@ import {
   pausePipeline,
   resumePipeline,
   stopPipeline,
+  stopAllPipeline,
   updateStored,
 } from './pipeline.action';
 import { setSettings } from './settings.action';
@@ -78,6 +79,7 @@ const actions = {
   socketInit,
   startBoard,
   stopPipeline,
+  stopAllPipeline,
   toggleViewType,
   setExperimentLoading,
   triggerUserGuide,

src/actions/pipeline.action.js

@@ -9,6 +9,19 @@ export const addPipeline = pipeline => ({
   },
 });
 
+export const stopAllPipeline = (pipelineName, { onSuccess }) => ({
+  type: actions.REST_REQ_POST,
+  payload: {
+    url: `exec/stop`,
+    body: {
+      pipelineName,
+      reason: `Request from simulator, Algorithms-tab Delete action`,
+    },
+    actionType: actions.PIPELINE_STOP,
+  },
+  meta: { pipelineName, onSuccess },
+});
+
 export const stopPipeline = jobId => ({
   type: actions.REST_REQ_POST,
   payload: {

src/config/schema/success-messages.schema.js

@@ -2,6 +2,7 @@ import Text from 'antd/lib/typography/Text';
 import React from 'react';
 
 const successMsg = payload => ({
+  ALL_PIPELINE_JOBS_STOP: `${payload.name}'s Jobs have been stopped`,
   ALGORITHM_APPLY: 'Algorithm Applied, check Algorithms table',
   ALGORITHM_RUN: (
     <>

src/styles/themes/CommonColor.js

@@ -111,7 +111,7 @@ const COMMON_COLOR = () => {
     [PIPELINE.COMPLETED]: COLOR.greenLight,
     [PIPELINE.CRASHED]: COLOR.redPale,
     [PIPELINE.FAILED]: COLOR.red,
-    [PIPELINE.PENDING]: COLOR.white,
+    [PIPELINE.PENDING]: COLOR.grey,
     [PIPELINE.RESUMED]: COLOR.blueLight,
     [PIPELINE.RUNNING]: COLOR.blue,
     [PIPELINE.STALLED]: COLOR.darkGrey,

src/utils/index.js

@@ -7,7 +7,7 @@ export {
   setLsItem,
 } from './localStorage';
 export { default as mapObjValues } from './mapObjValues';
-export { deleteConfirmAction } from './modal';
+export { deleteConfirmAction, stopConfirmAction } from './modal';
 export { default as notification, copyToClipboard } from './notification';
 export { default as selector } from './selector';
 export {

src/utils/modal.js

@@ -1,4 +1,5 @@
-import { Modal } from 'antd';
+import { Modal, message } from 'antd';
+import successMsg from 'config/schema/success-messages.schema';
 import Text from 'antd/lib/typography/Text';
 import React from 'react';
 
@@ -19,3 +20,25 @@ export const deleteConfirmAction = (action, { name }) => {
     },
   });
 };
+
+export const stopConfirmAction = (action, { name }) => {
+  Modal.confirm({
+    title: 'WARNING stop all jobs',
+    content: (
+      <>
+        Are you sure you want to stop all jobs of pipeline{' '}
+        <Text strong>{name}</Text>?
+      </>
+    ),
+    okText: 'Confirm',
+    okType: 'danger',
+    cancelText: 'Cancel',
+    onOk() {
+      action(name, {
+        onSuccess: () => {
+          message.success(successMsg({ name }).ALL_PIPELINE_JOBS_STOP);
+        },
+      });
+    },
+  });
+};