From 2c646d87cc1b3640ecfaaedcf2897cb1c2901845 Mon Sep 17 00:00:00 2001 From: yehiyam Date: Mon, 8 Mar 2021 12:40:25 +0200 Subject: [PATCH] fix-graph-crash (#145) * fix crash in graph view * fix large flowInput button * fix loading --- package.json | 5 +- src/actions/experiments.action.js | 4 - src/actions/index.js | 2 - .../common/Json/JsonTable/JsonTable.react.js | 139 +++++++++--------- src/const/application-actions.js | 1 - src/hooks/useExperiments.js | 20 +-- src/reducers/experiment.reducer.js | 11 +- 7 files changed, 76 insertions(+), 106 deletions(-) diff --git a/package.json b/package.json index f54103384..2cf64418c 100644 --- 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 index c1a091baa..cf007cca4 100644 --- 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 index b83669089..c24e77643 100644 --- 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 index d2ad742e5..c87e75bab 100644 --- 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 ( + <> + + + hidden download link + + + ); + } - if (isPureObject(obj)) { - if (key === 'flowInput' && obj.truncated) { + return ( + + {objToItem({ obj })} + + ); + } + if (Array.isArray(obj)) { return ( <> - - - hidden download link - + {obj.map((value, i) => + RenderItemByValueType({ + obj: value, + vertical, + isMargin: i !== 0 || i === obj.length - 1, + key: i, + jobId, + }) + )} ); } + return String(obj); + }; - return ( - - {objToItem({ obj })} - - ); - } - 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]) => ( + {key}}> + {isPureObject(value) && isEmptyObject(value) ? ( + {EMPTY} + ) : ( + RenderItemByValueType({ obj: value, key, jobId }) )} - - ); + + )); } - 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 ( + + {objToItem({ obj: mainObj, vertical, jobId })} + + ); }; -// Item -function objToItem({ obj, vertical, jobId }) { - return Object.entries(obj).map(([key, value]) => ( - {key}}> - {isPureObject(value) && isEmptyObject(value) ? ( - {EMPTY} - ) : ( - RenderItemByValueType({ obj: value, vertical, key, jobId }) - )} - - )); -} - -// Entry -const JsonTable = ({ obj, vertical = false, jobId, ...props }) => ( - - {objToItem({ obj, vertical, jobId })} - -); - JsonTable.propTypes = { obj: PropTypes.object, vertical: PropTypes.bool, diff --git a/src/const/application-actions.js b/src/const/application-actions.js index 4d06053d8..8d3c54c26 100644 --- 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 index b5571c0e3..e07334068 100644 --- 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 index a13d7cbb6..82702124e 100644 --- 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