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,