fix build eslint

Author: zivglikr

package-lock.json

@@ -1,4 +1,4 @@
-import React, { createContext, useContext } from 'react';
+import React, { createContext, useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { InputNumber, Switch, Radio, AutoComplete } from 'antd';
 import { Form as CommonForm } from 'components/common';
@@ -21,9 +21,12 @@ const Field = props => {
 const AlgorithmNode = ({ id }) => {
   const { isStreamingPipeline, valuesState } = useWizardContext();
   const { algorithms: sortedAlgorithms } = useGetLists();
-  const rootId = ['nodes', id];
+  const rootId = useMemo(() => ['nodes', id], [id]);
+
+  const contextValue = useMemo(() => ({ rootId }), [rootId]);
+
   return (
-    <ctx.Provider value={{ rootId }}>
+    <ctx.Provider value={contextValue}>
       <Field name={['algorithmName']} title="Algorithm">
         <AutoComplete
           disabled={sortedAlgorithms?.length === 0}
@@ -110,7 +113,7 @@ const AlgorithmNode = ({ id }) => {
 
         {!isStreamingPipeline && (
           <Field
-            overrides={{ ...{ valuePropName: 'checked' } }}
+            overrides={{ valuePropName: 'checked' }}
             title="Include In Pipeline Results"
             name={['includeInResult']}
             skipValidation>
@@ -120,7 +123,7 @@ const AlgorithmNode = ({ id }) => {
 
         {!isStreamingPipeline && (
           <Field
-            overrides={{ ...{ valuePropName: 'checked' } }}
+            overrides={{ valuePropName: 'checked' }}
             title="Create A Tensorboard"
             name={['metrics', 'tensorboard']}
             skipValidation>
@@ -135,4 +138,5 @@ const AlgorithmNode = ({ id }) => {
 AlgorithmNode.propTypes = {
   id: PropTypes.node.isRequired,
 };
+
 export default AlgorithmNode;

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/Algorithms.js

@@ -36,32 +36,40 @@ const DataSourceNode = ({ id }) => {
     initialState?.nodes[id]?.spec?.snapshot
       ? MODES.SNAPSHOT
       : initialState?.nodes[id]?.spec?.id
-      ? MODES.VERSION
-      : MODES.LATEST
+        ? MODES.VERSION
+        : MODES.LATEST
   );
 
   const activeName = form.getFieldValue(['nodes', id, 'spec', 'name']);
   const { versionsCollection } = useVersions({ name: activeName });
   const { snapshots } = useSnapshots({ dataSourceName: activeName });
 
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  const handleChangeMode = useCallback(e => {
-    setTimeout(() => {
-      setForm();
-    }, 500);
+  const handleChangeMode = useCallback(
+    e => {
+      setTimeout(() => {
+        setForm();
+      }, 500);
 
-    return setMode(e.target.value);
-  });
-  const disableSnapshot = useMemo(() => snapshots?.length === 0, [
-    snapshots?.length,
-  ]);
+      return setMode(e.target.value);
+    },
+    [setForm]
+  );
+
+  const disableSnapshot = useMemo(
+    () => snapshots?.length === 0,
+    [snapshots?.length]
+  );
+
+  const disableVersions = useMemo(
+    () => versionsCollection?.length === 0,
+    [versionsCollection?.length]
+  );
 
-  const disableVersions = useMemo(() => versionsCollection?.length === 0, [
-    versionsCollection?.length,
-  ]);
+  const contextValue = useMemo(() => ({ rootId: ['nodes', id, 'spec'] }), [id]);
 
   return (
-    <ctx.Provider value={{ rootId: ['nodes', id, 'spec'] }}>
+    <ctx.Provider value={contextValue}>
       <Field name={['name']} title="DataSource Name">
         <Select disabled={collection && collection.length === 0}>
           {collection.map(({ name }) => (

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/DataSource.js

@@ -1,4 +1,4 @@
-import React, { useContext, useEffect } from 'react';
+import React, { useContext, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Input, InputNumber } from 'antd';
 
@@ -28,9 +28,14 @@ const GatewayNode = ({ id }) => {
     form.setFieldsValue(nodes);
   }, [form, id]);
 
+  const providerValue = useMemo(
+    () => ({ rootId: ['nodes', id, 'spec'] }),
+    [id]
+  );
+
   return (
     <>
-      <ctx.Provider value={{ rootId: ['nodes', id, 'spec'] }}>
+      <ctx.Provider value={providerValue}>
         <Field name={['name']} title="Name">
           <Input placeholder="Name Gateway" />
         </Field>

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/Gateway.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Form,
@@ -88,8 +88,10 @@ const HyperParamsNode = ({ id }) => {
     }
   };
 
+  const contextValue = useMemo(() => ({ rootId }), [rootId]);
+
   return (
-    <ctx.Provider value={{ rootId }}>
+    <ctx.Provider value={contextValue}>
       <Field name={['objectivePipeline']} title="Objective Pipeline">
         <AutoComplete
           disabled={pipelinesCollection?.length === 0}

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/HyperParams.js

@@ -126,7 +126,7 @@ const useInputField = (antFields, onRemove, inputRef, selectWidth) => {
 
       const { rules, label } = antFields?.addonBefore.filter(
         x => x.value === selectBefore
-      )[0];
+      )[0] || { rules: [], label: '' };
 
       setValue(srcValue);
 

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/InputParseJson/useInputField.js

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { Select, Input, Divider } from 'antd';
 import Controller from './InputParseJson';
@@ -18,8 +18,11 @@ const Field = props => {
 const OutputNode = ({ id }) => {
   const { initialState } = useWizardContext();
   const rootId = ['nodes', id, 'spec'];
+
+  const contextValue = useMemo(() => ({ rootId }), [rootId]);
+
   return (
-    <ctx.Provider value={{ rootId }}>
+    <ctx.Provider value={contextValue}>
       <Field name={['description']} title="Description" skipValidation>
         <Input placeholder="Description" />
       </Field>
@@ -44,7 +47,9 @@ const OutputNode = ({ id }) => {
     </ctx.Provider>
   );
 };
+
 OutputNode.propTypes = {
   id: PropTypes.node.isRequired,
 };
+
 export default OutputNode;

src/Routes/SidebarRight/AddPipeline/Steps/Nodes/Output.js

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Drawer from 'components/Drawer';
 import { TabDrawerText, TabDrawer } from 'styles';
 import { RIGHT_SIDEBAR_NAMES } from 'const';
@@ -67,13 +67,15 @@ const DashboardDrawer = () => {
   const width = CONTENT_CONFIG[panelType]?.width ?? 0;
   const titleDrawer = titleSelector[panelType];
 
+  const contextValue = useMemo(() => ({ closeDrawer: setOff }), [setOff]);
+
   if (root === undefined) {
     navigate('/jobs');
   }
 
   // eslint-disable-next-line consistent-return
   return (
-    <ctx.Provider value={{ closeDrawer: setOff }}>
+    <ctx.Provider value={contextValue}>
       <Drawer
         width={width}
         isOpened={isOn}

src/Routes/SidebarRight/Drawer.js

@@ -8,7 +8,7 @@ import { FiltersForms } from 'styles';
 import qs from 'qs';
 
 const { RangePicker } = DatePicker;
-let localValueTimeChanged = 1;
+// let localValueTimeChanged = 1;
 const DateFormat = 'YYYY-MM-DD HH:mm';
 
 const ErrorLogQueryTable = ({ onSubmit, ErrorLogList }) => {
@@ -92,7 +92,7 @@ const ErrorLogQueryTable = ({ onSubmit, ErrorLogList }) => {
           format={DateFormat}
           onOpenChange={() => {
             // eslint-disable-next-line no-unused-vars
-            localValueTimeChanged = Date.now();
+            // localValueTimeChanged = Date.now();
           }}
           onChange={SubmitForm}
         />

src/Routes/SidebarRight/ErrorLogs/ErrorLogQueryTable.js

@@ -15,7 +15,22 @@ const Container = styled.div`
   }
 `;
 
-// https://nivo.rocks/bar/ customization
+// Define the custom formatter component outside of NodeStatistics
+const CustomAxisLeftTick = ({ value }) =>
+  value.length > 15 ? (
+    <tspan>
+      {`${value.substring(0, 15)}...`}
+      <title>{value}</title>
+    </tspan>
+  ) : (
+    value
+  );
+
+CustomAxisLeftTick.propTypes = {
+  value: PropTypes.string.isRequired,
+};
+
+// NodeStatistics component
 const NodeStatistics = ({ metric }) => {
   const { data, legend } = useMetric(metric);
 
@@ -44,7 +59,6 @@ const NodeStatistics = ({ metric }) => {
             legend: {
               text: {
                 fontSize: 19,
-
                 fill: whiteColor,
               },
             },
@@ -104,15 +118,7 @@ const NodeStatistics = ({ metric }) => {
           legendOffset: 50,
         }}
         axisLeft={{
-          format: v =>
-            v.length > 15 ? (
-              <tspan>
-                {`${v.substring(0, 15)}...`}
-                <title>{v}</title>
-              </tspan>
-            ) : (
-              v
-            ),
+          format: CustomAxisLeftTick, // Use the custom formatter component
           tickSize: 5,
           tickPadding: 5,
           tickRotation: 20,

src/Routes/SidebarRight/NodeStatistics.react.js

@@ -69,8 +69,10 @@ const AlgorithmsTable = () => {
     }
 
     return (
-      (queryVal.data?.algorithms?.list &&
-        [...queryVal.data?.algorithms?.list].sort((x, y) =>
+      (queryVal.data &&
+        queryVal.data.algorithms &&
+        queryVal.data.algorithms.list &&
+        [...queryVal.data.algorithms.list].sort((x, y) =>
           x.modified < y.modified ? 1 : -1
         )) ||
       []

src/Routes/Tables/Algorithms/index.js

@@ -1,12 +1,18 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import Ellipsis from 'components/common/Ellipsis.react';
 import { StatusTag as CountTag } from 'components/StatusTag';
 import { sorter } from 'utils/stringHelper';
 
+const Jobs = ({ jobs }) => <CountTag count={jobs?.length | 0} />;
+Jobs.propTypes = {
+  jobs: PropTypes.array.isRequired,
+};
+export default Jobs;
+
 const DriverId = driverId => <Ellipsis text={driverId} />;
 const PodName = podName => <Ellipsis copyable text={podName} />;
 const Status = status => <Ellipsis text={status} />;
-const Jobs = jobs => <CountTag count={jobs.length} />;
 const Max = count => <CountTag count={count} />;
 const Capacity = count => <CountTag count={count} />;
 const Active = active => <Ellipsis text={active ? 'active' : 'inActive'} />;

src/Routes/Tables/Drivers/DriversTableColumns.react.js

@@ -7,9 +7,10 @@ import React, {
   useRef,
 } from 'react';
 import PropTypes from 'prop-types';
-import { Empty, Slider, Button, Switch, Popconfirm } from 'antd';
+import styled from 'styled-components';
+import { Empty, Slider, Button, Switch, Popconfirm, Spin } from 'antd';
 import { useDebounceCallback } from '@react-hook/debounce';
-import { Fallback, FallbackComponent } from 'components/common';
+import { Fallback } from 'components/common';
 import { useNodeInfo, useLocalStorageGraphMode } from 'hooks';
 import {
   AimOutlined,
@@ -31,11 +32,24 @@ import { generateStyles, formatEdge, formatNode } from '../graphUtils';
 import Details from './Details';
 import DropDownNodes from './NodeInputOutput/DropdownNodes';
 
+const CenterImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+  height: 50%;
+`;
 const GRAPH_DIRECTION = {
   LeftToRight: 'LR',
   UpToDown: 'UD',
 };
 
+const FallbackComponent = () => (
+  <CenterImage>
+    <Spin size="large" />
+  </CenterImage>
+);
+
 const calculatePercentage = (value, minValue, maxValue) => {
   if (value < minValue) {
     return 0; // Handle values less than the minimum

src/Routes/Tables/Jobs/GraphTab/index.js

@@ -1,11 +1,25 @@
 import React, { lazy, useEffect, useMemo, useReducer } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Empty } from 'antd';
-import { Fallback, FallbackComponent } from 'components/common';
+import { Empty, Spin } from 'antd';
+import { Fallback } from 'components/common';
 import { useNodeInfo, useSettings } from 'hooks';
 import { generateStyles, formatEdge, formatNode } from '../graphUtils';
 
+const CenterImage = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 100px;
+  height: 50%;
+`;
+
+const FallbackComponent = () => (
+  <CenterImage>
+    <Spin size="large" />
+  </CenterImage>
+);
+
 const Graph = lazy(() => import(`react-graph-vis`));
 
 const GraphContainer = styled.div`

src/Routes/Tables/Jobs/GridView/Graph.js

@@ -20,6 +20,7 @@ import {
   ZoomInOutlined,
   ZoomOutOutlined,
 } from '@ant-design/icons';
+/* eslint-disable import/no-cycle */
 import { useLocalStorageGraphMode } from 'hooks';
 import { generateStyles, formatEdge, formatNode } from '../graphUtils';
 
@@ -91,8 +92,8 @@ const GraphPreview = ({
     keyIndex && pipeline?.streaming?.flows
       ? Object.keys(pipeline?.streaming?.flows)[keyIndex]
       : valuesState?.streaming?.defaultFlow
-      ? valuesState?.streaming?.defaultFlow
-      : null;
+        ? valuesState?.streaming?.defaultFlow
+        : null;
 
   const { backendApiUrl } = useSelector(selectors.config);
   const [graphPreview, setGraphPreview] = useState({ nodes: [], edges: [] });