Merge branch 'master' of https://github.com/kube-HPC/simulator

Author: Adir111

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "simulator",
-  "version": "2.8.11",
+  "version": "2.8.13",
   "description": "The Hkube Dashboard",
   "private": true,
   "homepage": ".",

package.json

@@ -1,47 +1,39 @@
-import React, { memo, useCallback, useRef, useState, useEffect } from 'react';
+import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { StopOutlined } from '@ant-design/icons';
 import { message, Button, Tooltip } from 'antd';
-import { workersStopListVar } from 'cache';
+
 import { useActions } from 'hooks';
 import isEqual from 'lodash/isEqual';
-import { useReactiveVar } from '@apollo/client';
 
 const WorkersActions = ({ algorithm }) => {
-  const workersStopList = useReactiveVar(workersStopListVar);
   const { stopAlgorithm } = useActions();
   const [stopWorkerIsRun, setStopWorkerIsRun] = useState(false);
   const container = useRef();
 
   const onStopSuccess = () => {
-    const arrWorkersStopList = [...workersStopListVar()];
-    const arrWorkersStopListFilter = arrWorkersStopList.filter(
-      x => x !== algorithm.algorithmName
-    );
-
-    workersStopListVar(arrWorkersStopListFilter);
-  };
-
-  const onStop = useCallback(() => {
+    setStopWorkerIsRun(true);
     message.success(
       <>
         Stop worker is started. It may take a few moments for the algorithms to
         be deleted.
       </>
     );
-    const arrWorkersStopList = [...workersStopList];
-    arrWorkersStopList.push(algorithm.algorithmName);
+  };
 
-    workersStopListVar(arrWorkersStopList);
-    stopAlgorithm(algorithm.algorithmName);
-    setStopWorkerIsRun(true);
-  }, [algorithm.algorithmName, stopAlgorithm, workersStopList]);
+  const onStop = useCallback(() => {
+    stopAlgorithm(algorithm.algorithmName, onStopSuccess);
+  }, [algorithm.algorithmName, stopAlgorithm]);
 
   const stopPropagation = useCallback(e => {
     e.stopPropagation();
   }, []);
 
-  useEffect(() => () => onStopSuccess(), []);
+  useEffect(() => {
+    if (algorithm?.exit === 0) {
+      setStopWorkerIsRun(false);
+    }
+  }, [algorithm, algorithm?.exit]);
 
   return (
     <div

src/Routes/Tables/Workers/WorkersActions.react.js

@@ -22,7 +22,11 @@ const WorkerState = (_, { workerStatus, jobStatus }) => {
 
 const HotWorker = (_, { workerPaused, hotWorker }) => (
   <>
-    {workerPaused && <PauseCircleTwoTone twoToneColor="red" />}
+    {workerPaused && (
+      <Tooltip placement="top" title="Stop Worker">
+        <PauseCircleTwoTone twoToneColor="red" />
+      </Tooltip>
+    )}
     {hotWorker && (
       <Tooltip placement="top" title="Hot Worker">
         <FireFilled style={{ color: 'orange' }} />

src/Routes/Tables/Workers/columns.js

@@ -4,8 +4,6 @@ import { DownOutlined, RightOutlined } from '@ant-design/icons';
 import { Card, JsonSwitch, Tabs } from 'components/common';
 import defaultWorkerData from 'config/template/worker.template';
 import { useWorkers } from 'hooks/graphql';
-import { workersStopListVar } from 'cache';
-import { useReactiveVar } from '@apollo/client';
 import { workersColumns, workersTableStats } from './columns';
 
 const generateTab = (key, value) => [
@@ -20,17 +18,12 @@ const generateTab = (key, value) => [
   },
 ];
 
-const ExpandedRow = (collection, arrWorkersStopList) => recordRow => {
+const ExpandedRow = collection => recordRow => {
   const entries = collection[recordRow?.algorithmName] || [];
-
   return (
     <Card isMargin>
       <Table
-        rowClassName={
-          arrWorkersStopList?.includes(recordRow?.algorithmName)
-            ? 'expanded-row-disable'
-            : ''
-        }
+        rowClassName={row => (row?.workerPaused ? 'expanded-row-disable' : '')}
         isInner
         rowKey={row => row.podName}
         columns={workersTableStats}
@@ -56,7 +49,6 @@ const ExpandedRow = (collection, arrWorkersStopList) => recordRow => {
 };
 
 const WorkersTable = () => {
-  const workersStopList = useReactiveVar(workersStopListVar);
   const { collection, stats } = useWorkers();
   const statsMergedWithDefault = useMemo(
     () =>
@@ -73,7 +65,7 @@ const WorkersTable = () => {
       columns={workersColumns}
       dataSource={statsMergedWithDefault}
       expandable={{
-        expandedRowRender: ExpandedRow(collection, workersStopList),
+        expandedRowRender: ExpandedRow(collection),
         // eslint-disable-next-line react/prop-types
         expandIcon: ({ expanded, onExpand, record }) =>
           expanded ? (

src/Routes/Tables/Workers/index.js

@@ -31,10 +31,11 @@ export const runAlgorithm = ({ name, input = [], debug = false }) => ({
   },
 });
 
-export const stopAlgorithm = algorithmName => ({
+export const stopAlgorithm = (algorithmName, onSuccess) => ({
   type: actions.REST_REQ_DELETE,
   payload: {
     url: `kubernetes/algorithms/jobs/${algorithmName}`,
     actionType: actions.ALGORITHM_DELETE,
   },
+  meta: { onSuccess },
 });

src/actions/algorithm.action.js

@@ -18,7 +18,6 @@ export const numberErrorGraphQLVar = makeVar({ error: 0 });
 export const isPinActiveJobVar = makeVar(false);
 export const filterToggeledVar = makeVar(true);
 export const pipelineListVar = makeVar([]);
-export const workersStopListVar = makeVar([]);
 export const algorithmsListVar = makeVar([]);
 export const inactiveModeVar = makeVar(false);
 export const instanceCounterVar = makeVar({
@@ -124,11 +123,7 @@ const cache = new InMemoryCache({
             return inactiveModeVar();
           },
         },
-        workersStopList: {
-          read() {
-            return workersStopListVar();
-          },
-        },
+
         metaMode: {
           read() {
             return metaVar();

src/cache.js

@@ -47,7 +47,11 @@ const InputField = ({
         ) : (
           <Tooltip
             title={
-              isValid ? '' : tooltip || inputRef.current.input.placeholder
+              isValid
+                ? ''
+                : tooltip ||
+                  inputRef?.current?.input?.placeholder ||
+                  placeholder
             }>
             <WarningOutlined style={{ color: 'red', fontSize: '15px' }} />
           </Tooltip>

src/components/InputField.js

@@ -11,6 +11,10 @@ const WORKERS_ALL_QUERY = gql`
             count
             results
             status
+            #exit
+            #init
+            #ready
+            #working
           }
         }
       }

src/graphql/queries/Workers/workers-query.js

@@ -109,7 +109,7 @@ body{
 .expanded-row-disable,
 .expanded-row-disable .ant-table-cell-row-hover,
 .expanded-row-disable .ant-table-column-sort {
-  background:#ccc !important;
+  background:#aaa !important;
 }
 
 `;