From 8f7af502491bbc6b57b95d4fccc0123393e270a1 Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Mon, 18 Mar 2024 09:29:33 +0200
Subject: [PATCH 1/2] invoke stop of all jobs of a certain pipeline

---
 .../Tables/Pipelines/PipelineActions.react.js | 13 ++++++++--
 src/actions/index.js                          |  2 ++
 src/actions/pipeline.action.js                | 13 ++++++++++
 src/config/schema/success-messages.schema.js  |  1 +
 src/utils/index.js                            |  2 +-
 src/utils/modal.js                            | 25 ++++++++++++++++++-
 6 files changed, 52 insertions(+), 4 deletions(-)

diff --git a/src/Routes/Tables/Pipelines/PipelineActions.react.js b/src/Routes/Tables/Pipelines/PipelineActions.react.js
index 8badcca11..fb81ee3f5 100644
--- a/src/Routes/Tables/Pipelines/PipelineActions.react.js
+++ b/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>
diff --git a/src/actions/index.js b/src/actions/index.js
index 231c730f9..c0c212c4f 100644
--- a/src/actions/index.js
+++ b/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,
diff --git a/src/actions/pipeline.action.js b/src/actions/pipeline.action.js
index 80bd42cb2..ef2a08661 100644
--- a/src/actions/pipeline.action.js
+++ b/src/actions/pipeline.action.js
@@ -9,6 +9,19 @@ export const addPipeline = pipeline => ({
   },
 });
 
+export const stopAllPipeline = (jobId, { onSuccess }) => ({
+  type: actions.REST_REQ_POST,
+  payload: {
+    url: `exec/stop`,
+    body: {
+      jobId,
+      reason: `Request from simulator, Algorithms-tab Delete action`,
+    },
+    actionType: actions.PIPELINE_STOP,
+  },
+  meta: { jobId, onSuccess },
+});
+
 export const stopPipeline = jobId => ({
   type: actions.REST_REQ_POST,
   payload: {
diff --git a/src/config/schema/success-messages.schema.js b/src/config/schema/success-messages.schema.js
index 7edad7510..dc8269bcb 100644
--- a/src/config/schema/success-messages.schema.js
+++ b/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: (
     <>
diff --git a/src/utils/index.js b/src/utils/index.js
index 5d61c97f9..d67627c86 100644
--- a/src/utils/index.js
+++ b/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 {
diff --git a/src/utils/modal.js b/src/utils/modal.js
index 59fb09742..424ce676b 100644
--- a/src/utils/modal.js
+++ b/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);
+        },
+      });
+    },
+  });
+};

From 4946fa3e9e0cf6e629033b9239d01c58d1f42b9c Mon Sep 17 00:00:00 2001
From: zivglik <zivglik@gmail.com>
Date: Mon, 18 Mar 2024 10:50:59 +0200
Subject: [PATCH 2/2] fix payload body stop all

---
 src/actions/pipeline.action.js   | 6 +++---
 src/styles/themes/CommonColor.js | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/actions/pipeline.action.js b/src/actions/pipeline.action.js
index ef2a08661..bbb684ff8 100644
--- a/src/actions/pipeline.action.js
+++ b/src/actions/pipeline.action.js
@@ -9,17 +9,17 @@ export const addPipeline = pipeline => ({
   },
 });
 
-export const stopAllPipeline = (jobId, { onSuccess }) => ({
+export const stopAllPipeline = (pipelineName, { onSuccess }) => ({
   type: actions.REST_REQ_POST,
   payload: {
     url: `exec/stop`,
     body: {
-      jobId,
+      pipelineName,
       reason: `Request from simulator, Algorithms-tab Delete action`,
     },
     actionType: actions.PIPELINE_STOP,
   },
-  meta: { jobId, onSuccess },
+  meta: { pipelineName, onSuccess },
 });
 
 export const stopPipeline = jobId => ({
diff --git a/src/styles/themes/CommonColor.js b/src/styles/themes/CommonColor.js
index 45a23605b..cb3fd4c0f 100644
--- a/src/styles/themes/CommonColor.js
+++ b/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,