fix-graph-crash (#145)

* fix crash in graph view * fix large flowInput button * fix loading
kube-HPC · Mar 8, 2021 · 2c646d8 · 2c646d8
1 parent bde8e60
commit 2c646d8
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 106 deletions.
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "start:server": "node ./server/server.js",
     "storybook": "NODE_PATH=src/ start-storybook --port 9001",
     "prettify": "prettier --write src/**/*.js",
-    "lint:fix": "eslint src/**/*.js --fix"
+    "lint:fix": "eslint src/**/*.js --fix",
+    "lint": "eslint src/**/*.js"
   },
   "browserslist": {
     "production": [
@@ -102,7 +103,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "pretty-quick --staged && lint-staged"
+      "pre-commit": "npm run lint"
     }
   },
   "lint-staged": {

diff --git a/src/actions/experiments.action.js b/src/actions/experiments.action.js
@@ -5,10 +5,6 @@ export const experimentChange = value => ({
   value,
 });
 
-export const triggerExperimentLoading = () => ({
-  type: actions.EXPERIMENT_TRIGGER_LOADING,
-});
-
 export const addExperiment = ({ name, description }) => ({
   type: actions.REST_REQ_POST,
   payload: {

diff --git a/src/actions/index.js b/src/actions/index.js
@@ -14,7 +14,6 @@ import {
   addExperiment,
   deleteExperiment,
   experimentChange,
-  triggerExperimentLoading as triggerExperiment,
 } from 'actions/experiments.action';
 import { filterByType } from 'actions/filter.action';
 import { getCaching, getKubernetesLogsData } from 'actions/jobs.action';
@@ -68,7 +67,6 @@ const actions = {
   startBoard,
   stopPipeline,
   toggleViewType,
-  triggerExperiment,
   triggerUserGuide,
   updateStored,
 };

diff --git a/src/components/common/Json/JsonTable/JsonTable.react.js b/src/components/common/Json/JsonTable/JsonTable.react.js
@@ -23,97 +23,90 @@ const isEmptyObject = obj => Object.entries(obj).length === 0;
 const Margin = styled(Descriptions)`
   margin-top: ${prop('isMargin', 'none')};
 `;
-
-// Recursion Step
-const RenderItemByValueType = ({
-  obj,
-  vertical,
-  isMargin = false,
-  key,
-  jobId,
-}) => {
+// Entry
+const JsonTable = ({ obj: mainObj, vertical = false, jobId, ...props }) => {
   const socketUrl = useSelector(state => state[STATE_SOURCES.SOCKET_URL]);
   const downloadLinkRef = useRef();
   const handleDownload = useCallback(
     () => downloadLinkRef.current && downloadLinkRef.current?.click(),
     [downloadLinkRef]
   );
+  // Recursion Step
+  const RenderItemByValueType = ({ obj, isMargin = false, key }) => {
+    if (isPureObject(obj)) {
+      if (key === 'flowInput' && obj.truncated) {
+        return (
+          <>
+            <Button onClick={handleDownload}>Download</Button>
+            <a
+              style={{ display: 'none' }}
+              ref={downloadLinkRef}
+              href={`${socketUrl}/flowInput/${jobId}?download=true`}
+              download>
+              hidden download link
+            </a>
+          </>
+        );
+      }
 
-  if (isPureObject(obj)) {
-    if (key === 'flowInput' && obj.truncated) {
+      return (
+        <Margin
+          key={key}
+          column={getTotalColumns({ obj, vertical })}
+          vertical={vertical}
+          isMargin={isMargin}>
+          {objToItem({ obj })}
+        </Margin>
+      );
+    }
+    if (Array.isArray(obj)) {
       return (
         <>
-          <Button onClick={handleDownload}>Download</Button>
-          <a
-            style={{ display: 'none' }}
-            ref={downloadLinkRef}
-            href={`${socketUrl}/flowInput/${jobId}?download=true`}
-            download>
-            hidden download link
-          </a>
+          {obj.map((value, i) =>
+            RenderItemByValueType({
+              obj: value,
+              vertical,
+              isMargin: i !== 0 || i === obj.length - 1,
+              key: i,
+              jobId,
+            })
+          )}
         </>
       );
     }
+    return String(obj);
+  };
 
-    return (
-      <Margin
-        key={key}
-        column={getTotalColumns({ obj, vertical })}
-        vertical={vertical}
-        isMargin={isMargin}>
-        {objToItem({ obj })}
-      </Margin>
-    );
-  }
-  if (Array.isArray(obj)) {
-    return (
-      <>
-        {obj.map((value, i) =>
-          RenderItemByValueType({
-            obj: value,
-            vertical,
-            isMargin: i !== 0 || i === obj.length - 1,
-            key: i,
-            jobId,
-          })
+  RenderItemByValueType.propTypes = {
+    obj: PropTypes.object,
+    vertical: PropTypes.bool,
+    isMargin: PropTypes.bool,
+    key: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    jobId: PropTypes.string,
+  };
+
+  // Item
+  function objToItem({ obj }) {
+    return Object.entries(obj).map(([key, value]) => (
+      <Descriptions.Item key={key} label={<Text strong>{key}</Text>}>
+        {isPureObject(value) && isEmptyObject(value) ? (
+          <Tag>{EMPTY}</Tag>
+        ) : (
+          RenderItemByValueType({ obj: value, key, jobId })
         )}
-      </>
-    );
+      </Descriptions.Item>
+    ));
   }
-  return String(obj);
-};
 
-RenderItemByValueType.propTypes = {
-  obj: PropTypes.object,
-  vertical: PropTypes.bool,
-  isMargin: PropTypes.bool,
-  key: PropTypes.oneOf([PropTypes.string, PropTypes.number]),
-  jobId: PropTypes.string,
+  return (
+    <Descriptions
+      column={getTotalColumns({ obj: mainObj, vertical })}
+      vertical={vertical}>
+      {objToItem({ obj: mainObj, vertical, jobId })}
+    </Descriptions>
+  );
 };
 
-// Item
-function objToItem({ obj, vertical, jobId }) {
-  return Object.entries(obj).map(([key, value]) => (
-    <Descriptions.Item key={key} label={<Text strong>{key}</Text>}>
-      {isPureObject(value) && isEmptyObject(value) ? (
-        <Tag>{EMPTY}</Tag>
-      ) : (
-        RenderItemByValueType({ obj: value, vertical, key, jobId })
-      )}
-    </Descriptions.Item>
-  ));
-}
-
-// Entry
-const JsonTable = ({ obj, vertical = false, jobId, ...props }) => (
-  <Descriptions
-    column={getTotalColumns({ obj, vertical })}
-    vertical={vertical}
-    {...props}>
-    {objToItem({ obj, vertical, jobId })}
-  </Descriptions>
-);
-
 JsonTable.propTypes = {
   obj: PropTypes.object,
   vertical: PropTypes.bool,

diff --git a/src/const/application-actions.js b/src/const/application-actions.js
@@ -19,7 +19,6 @@ const actionType = {
   DRAWER_OPEN: `DRAWER_OPEN`,
   DRAWER_TOGGLE: `DRAWER_TOGGLE`,
   EXPERIMENT_CHANGE: `EXPERIMENT_CHANGE`,
-  EXPERIMENT_TRIGGER_LOADING: `EXPERIMENT_TRIGGER_LOADING`,
   EXPERIMENT_ADD: `EXPERIMENT_ADD`,
   EXPERIMENT_DELETE: `EXPERIMENT_DELETE`,
   FILTER_TYPES: `FILTER_TYPES`,

diff --git a/src/hooks/useExperiments.js b/src/hooks/useExperiments.js
@@ -1,32 +1,16 @@
 import { experimentsSchema } from 'config';
 import { LOCAL_STORAGE_KEYS, STATE_SOURCES } from 'const';
 import isEqual from 'lodash/isEqual';
-import { useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import useActions from './useActions';
 import useLocalStorage from './useLocalStorage';
 
 const useExperiments = () => {
-  const { dataSource, value, loading } = useSelector(
+  const { dataSource, value } = useSelector(
     state => state[STATE_SOURCES.EXPERIMENTS],
     isEqual
   );
-  const {
-    experimentChange,
-    addExperiment,
-    deleteExperiment,
-    triggerExperiment,
-  } = useActions();
-
-  const { experimentName } = useSelector(state => state[STATE_SOURCES.META]);
-
-  useEffect(() => {
-    if (!loading && experimentName !== value) {
-      triggerExperiment();
-    } else if (loading && experimentName === value) {
-      triggerExperiment();
-    }
-  }, [experimentName, loading, triggerExperiment, value]);
+  const { experimentChange, addExperiment, deleteExperiment } = useActions();
 
   useLocalStorage({ value, key: LOCAL_STORAGE_KEYS.EXPERIMENT });
 

diff --git a/src/reducers/experiment.reducer.js b/src/reducers/experiment.reducer.js
@@ -18,15 +18,14 @@ export const experiments = handleActions(
       currState,
       { payload: { experiments: nextExperiments } }
     ) {
-      return Immutable.merge(currState, { dataSource: nextExperiments });
+      return Immutable.merge(currState, {
+        dataSource: nextExperiments,
+        loading: false,
+      });
     },
     [actions.EXPERIMENT_CHANGE](currState, { value }) {
       const { value: lastValue } = currState;
-      return Immutable.merge(currState, { value, lastValue });
-    },
-    [actions.EXPERIMENT_TRIGGER_LOADING](currState) {
-      const { loading } = currState;
-      return Immutable.set(currState, `loading`, !loading);
+      return Immutable.merge(currState, { value, lastValue, loading: true });
     },
   },
   initial