From 4aef5230f636e86cb6d500f3219674e6339fe81f Mon Sep 17 00:00:00 2001 From: Ziv Glik Date: Wed, 30 Nov 2022 09:24:46 +0200 Subject: [PATCH 1/4] clean old code --- .../Base/Header/ConnectionStatus.react.js | 35 ---- src/Routes/Base/Header/HelpBar.react.js | 23 ++- src/Routes/Base/Header/ViewType.react.js | 2 +- src/Routes/Base/Header/index.js | 9 +- src/Routes/SidebarRight/Bar.js | 1 + .../DataSources/EditDrawer/Body/QueryMode.js | 10 +- .../EditDrawer/Body/useActiveSnapshot.js | 2 - src/Routes/Tables/Jobs/GraphTab/index.js | 1 + src/Routes/Tables/Jobs/useJobsFunctions.js | 8 +- .../Tables/Jobs/useJobsFunctionsLimit.js | 8 +- src/cache.js | 36 ----- src/hooks/index.js | 8 - src/hooks/useAlgorithm.js | 22 --- src/hooks/useConnectionStatus.js | 7 - src/hooks/useErrorLogs.js | 48 ------ src/hooks/useExperiments.js | 78 --------- src/hooks/useJobs.js | 44 ----- src/hooks/useLogs.js | 18 --- src/hooks/usePipeline.js | 11 -- src/hooks/useStats.js | 9 -- src/hooks/useStorage.js | 9 -- src/hooks/useWizardAddPipeline.js | 12 +- src/index.js | 1 - src/middleware/socket.middleware.js | 153 ------------------ src/reducers/index.js | 8 +- src/reducers/meta.reducer.js | 30 ---- src/styles/themes/HelperThemes.js | 5 + 27 files changed, 52 insertions(+), 546 deletions(-) delete mode 100644 src/Routes/Base/Header/ConnectionStatus.react.js delete mode 100644 src/hooks/useAlgorithm.js delete mode 100644 src/hooks/useConnectionStatus.js delete mode 100644 src/hooks/useErrorLogs.js delete mode 100644 src/hooks/useExperiments.js delete mode 100644 src/hooks/useJobs.js delete mode 100644 src/hooks/useLogs.js delete mode 100644 src/hooks/useStats.js delete mode 100644 src/hooks/useStorage.js delete mode 100644 src/middleware/socket.middleware.js delete mode 100644 src/reducers/meta.reducer.js diff --git a/src/Routes/Base/Header/ConnectionStatus.react.js b/src/Routes/Base/Header/ConnectionStatus.react.js deleted file mode 100644 index b5df88490..000000000 --- a/src/Routes/Base/Header/ConnectionStatus.react.js +++ /dev/null @@ -1,35 +0,0 @@ -import { DisconnectOutlined } from '@ant-design/icons'; -import { Tag as AntTag, Tooltip, Typography } from 'antd'; -import { useConnectionStatus } from 'hooks'; -import React from 'react'; -import styled from 'styled-components'; - -const Tag = styled(AntTag)` - position: absolute; - right: 1em; - top: 50%; - transform: translateY(-50%); -`; - -const Content = styled.span` - white-space: nowrap; -`; - -const ConnectionStatus = () => { - const { isSocketConnected } = useConnectionStatus(); - - return ( - !isSocketConnected && ( - - - - Offline Mode - - - - - ) - ); -}; - -export default ConnectionStatus; diff --git a/src/Routes/Base/Header/HelpBar.react.js b/src/Routes/Base/Header/HelpBar.react.js index 3f8658144..53217f44b 100644 --- a/src/Routes/Base/Header/HelpBar.react.js +++ b/src/Routes/Base/Header/HelpBar.react.js @@ -16,7 +16,10 @@ import { useActions, useLeftSidebar, useSiteThemeMode } from 'hooks'; import { FlexBox, Icons } from 'components/common'; import { appInfo } from 'config'; import { ReactComponent as IconSwagger } from 'images/swagger.svg'; -import { iconsThemes } from '../../../styles/themes/HelperThemes'; +import { + iconsThemes, + iconsThemesTitle, +} from '../../../styles/themes/HelperThemes'; import InactiveModeTag from './InactiveMode'; import Settings from './Settings/Settings.react'; import ExperimentPicker from './ExperimentPicker.react'; @@ -58,6 +61,7 @@ const HelpBar = () => { @@ -68,23 +72,30 @@ const HelpBar = () => { /> } placement="bottomRight" trigger="click"> - } /> + } /> + } + type={} onClick={openUrl(appInfo.websiteUrl)} /> + } + type={} onClick={openUrl(appInfo.githubUrl)} /> } + type={} onClick={openUrl(appInfo.swaggerUrl)} styleIcon={{ height: '25px' }} /> - } onClick={onGuideClick} /> + + } + onClick={onGuideClick} + /> + {hkubeSystemVersion} ); diff --git a/src/Routes/Base/Header/ViewType.react.js b/src/Routes/Base/Header/ViewType.react.js index e0aa5ce52..d67a7dd9d 100644 --- a/src/Routes/Base/Header/ViewType.react.js +++ b/src/Routes/Base/Header/ViewType.react.js @@ -18,7 +18,7 @@ const ViewType = () => { }, [location, isGridView, query]); return ( - + ); diff --git a/src/Routes/Base/Header/index.js b/src/Routes/Base/Header/index.js index c15b6e9dc..92bfb4376 100644 --- a/src/Routes/Base/Header/index.js +++ b/src/Routes/Base/Header/index.js @@ -58,6 +58,7 @@ const FilterButton = () => { return ( !showFilterByProp && ( { filterToggeledVar(!filterToggeledVar()); @@ -81,7 +82,13 @@ const Header = () => { : } + type={ + isCollapsed ? ( + + ) : ( + + ) + } onClick={toggle} /> diff --git a/src/Routes/SidebarRight/Bar.js b/src/Routes/SidebarRight/Bar.js index 92cf952f1..df70f60ef 100644 --- a/src/Routes/SidebarRight/Bar.js +++ b/src/Routes/SidebarRight/Bar.js @@ -77,6 +77,7 @@ const SidebarRight = ({ isTop, className }) => { ), key: `${name}`, + title: `${name}`, }); } ); diff --git a/src/Routes/Tables/DataSources/EditDrawer/Body/QueryMode.js b/src/Routes/Tables/DataSources/EditDrawer/Body/QueryMode.js index 4eb851515..3a0e4b196 100644 --- a/src/Routes/Tables/DataSources/EditDrawer/Body/QueryMode.js +++ b/src/Routes/Tables/DataSources/EditDrawer/Body/QueryMode.js @@ -122,11 +122,7 @@ const QueryMode = ({ dataSource, onDownload }) => { }, [dispatch, dataSource, form, setPending, goTo]); return ( -
+ { + rules={[{ message: 'please enter a query', required: true }]}> diff --git a/src/Routes/Tables/DataSources/EditDrawer/Body/useActiveSnapshot.js b/src/Routes/Tables/DataSources/EditDrawer/Body/useActiveSnapshot.js index 1b15e0991..306cb61c6 100644 --- a/src/Routes/Tables/DataSources/EditDrawer/Body/useActiveSnapshot.js +++ b/src/Routes/Tables/DataSources/EditDrawer/Body/useActiveSnapshot.js @@ -1,10 +1,8 @@ import { useMemo } from 'react'; import { useParams } from 'react-router-dom'; -// import useSnapshots from 'hooks/dataSources/useSnapshots'; import { useSnapshots } from 'hooks/graphql'; /** @param {{ dataSourceName: string }} props */ const useActiveSnapshot = ({ dataSourceName }) => { - // const { isReady, ...snapshots } = useSnapshots({ dataSourceName }); const { isReady, snapshots } = useSnapshots({ dataSourceName }); const { snapshotName } = useParams(); diff --git a/src/Routes/Tables/Jobs/GraphTab/index.js b/src/Routes/Tables/Jobs/GraphTab/index.js index 368bd856f..6c5782c39 100644 --- a/src/Routes/Tables/Jobs/GraphTab/index.js +++ b/src/Routes/Tables/Jobs/GraphTab/index.js @@ -126,6 +126,7 @@ const GraphTab = ({ graph, pipeline }) => { {isValidGraph ? ( showGraph ? ( + {console.log(adaptedGraph, events)} { const el = document.querySelector('.ant-table-body'); @@ -40,7 +39,6 @@ const useJobsFunctions = () => { const [isGraphLoad, setIsGraphLoad] = useState(true); const { goTo } = usePath(); - const { columns } = useJobs(); const mergedParams = useMemo(() => { const iJobs = instanceFilters.jobs; @@ -315,7 +313,7 @@ const useJobsFunctions = () => { isGraphLoad, isTableLoad, onRow, - columns, + columns: jobColumns, _dataSource, }; }; diff --git a/src/Routes/Tables/Jobs/useJobsFunctionsLimit.js b/src/Routes/Tables/Jobs/useJobsFunctionsLimit.js index 8e7349091..ff89dceb3 100644 --- a/src/Routes/Tables/Jobs/useJobsFunctionsLimit.js +++ b/src/Routes/Tables/Jobs/useJobsFunctionsLimit.js @@ -1,6 +1,6 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useDebouncedCallback } from 'use-debounce'; -import { useJobs, usePolling } from 'hooks'; +import { usePolling } from 'hooks'; import { useQuery, useReactiveVar } from '@apollo/client'; import { filterToggeledVar, @@ -12,8 +12,7 @@ import { JOB_QUERY, JOB_QUERY_GRAPH } from 'graphql/queries'; import moment from 'moment'; import usePath from './usePath'; - -export { default as jobColumns } from './jobColumns'; +import jobColumns from './jobColumns'; const topTableScroll = () => { const el = document.querySelector('.ant-table-body'); @@ -50,7 +49,6 @@ const useJobsFunctionsLimit = () => { const [changeDs, setChangeDs] = useState(0); const [isGetMore, setIsGetMore] = useState(true); const { goTo } = usePath(); - const { columns } = useJobs(); const mergedParams = useMemo(() => { const iJobs = instanceFilters.jobs; @@ -262,7 +260,7 @@ const useJobsFunctionsLimit = () => { isGraphLoad, isTableLoad, onRow, - columns, + columns: jobColumns, _dataSource, setLimitGetJobs, }; diff --git a/src/cache.js b/src/cache.js index 6b44af5b2..3b856c81f 100644 --- a/src/cache.js +++ b/src/cache.js @@ -79,42 +79,6 @@ const cache = new InMemoryCache({ return merged; } - if (false) { - // scroll jobs - // the cursor remove was done to avoid uncorrect equality since the cursor is a unneeded field for the query - const { cursor, ...rest } = args; - - if (!_.isEqual(rest, existing?.query)) { - // if is not equal then it means that the existing value is not relevant anymore - // eslint-disable-next-line - existing = { jobs: [], cursor: '' }; - } - - const merged = { - cursor: incoming.cursor, - query: rest, - jobs: - incoming?.jobs && - _.unionBy( - Object.values(existing?.jobs), - Object.values(incoming?.jobs), - 'key' - ).sort((a, b) => - a.pipeline.startTime > b.pipeline.startTime ? -1 : 1 - ), - }; - merged.jobs && - Object.values(merged.jobs).forEach((a, i) => { - if (Object.values(incoming.jobs).find(b => b.key === a.key)) { - merged.jobs[i] = Object.values(incoming.jobs).find( - b => b.key === a.key - ); - } - }); - - return merged; - } - return incoming.jobs; }, }, diff --git a/src/hooks/index.js b/src/hooks/index.js index ef45c2e16..fee3ef4d6 100644 --- a/src/hooks/index.js +++ b/src/hooks/index.js @@ -3,24 +3,16 @@ import useDataSources from './dataSources/useDataSources'; import useDataSourceVersions from './dataSources/useVersions'; export { default as useActions } from './useActions'; -export { default as useAlgorithm } from './useAlgorithm'; export { default as useBoards } from './useBoards'; -export { default as useConnectionStatus } from './useConnectionStatus'; export { default as useDrawer } from './useDrawer'; export { default as useDrawerEditor } from './useDrawerEditor.react'; -export { default as useErrorLogs } from './useErrorLogs'; -export { default as useStorage } from './useStorage'; -export { default as useExperiments } from './useExperiments'; export { default as useFilters } from './useFilters'; -export { default as useJobs } from './useJobs'; export { default as useLeftSidebar } from './useLeftSidebar.react'; export { default as useLocalStorage } from './useLocalStorage'; -export { default as useLogs } from './useLogs'; export { default as useNodeInfo } from './useNodeInfo'; export { default as usePipeline } from './usePipeline'; export { default as useReadme } from './useReadme'; export { default as useSettings } from './useSettings'; -export { default as useStats } from './useStats'; export { default as useTraceData } from './useTraceData'; export { default as useVersions } from './useVersions'; export { default as useSiteThemeMode } from './useSiteThemeMode.react'; diff --git a/src/hooks/useAlgorithm.js b/src/hooks/useAlgorithm.js deleted file mode 100644 index 77a66c083..000000000 --- a/src/hooks/useAlgorithm.js +++ /dev/null @@ -1,22 +0,0 @@ -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; -import { useFilter } from 'hooks/useSearch'; -import { nodeKind } from '@hkube/consts'; - -const useAlgorithm = () => { - const algorithmsCollection = useSelector(selectors.algorithms.collection.all); - - const buildsSource = useSelector(selectors.algorithms.builds.entities); - const filtered = useFilter( - algorithmsCollection.filter(a => !a.kind || a.kind === nodeKind.Algorithm), - ['name', 'algorithmImage'] - ); - const collection = filtered.map(item => ({ - ...item, - builds: buildsSource[item.name], - })); - - return { collection, algorithmsCollection }; -}; - -export default useAlgorithm; diff --git a/src/hooks/useConnectionStatus.js b/src/hooks/useConnectionStatus.js deleted file mode 100644 index 5564668e1..000000000 --- a/src/hooks/useConnectionStatus.js +++ /dev/null @@ -1,7 +0,0 @@ -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; - -export default function useConnectionStatus() { - const { hasData, isSocketConnected } = useSelector(selectors.connection); - return { isDataAvailable: hasData, isSocketConnected }; -} diff --git a/src/hooks/useErrorLogs.js b/src/hooks/useErrorLogs.js deleted file mode 100644 index 917e0ed1d..000000000 --- a/src/hooks/useErrorLogs.js +++ /dev/null @@ -1,48 +0,0 @@ -import { useState, useCallback } from 'react'; -import { useSelector } from 'react-redux'; -import { createStore } from 'reusable'; -import { setLsItem, getLsItem } from 'utils/localStorage'; -import LOCAL_STORAGE_KEYS from 'const/local-storage'; -import { selectors } from 'reducers'; -// import { usePolling } from 'hooks'; -// import { useQuery } from '@apollo/client'; -// import { ALGORITHMS_QUERY } from 'qraphql/queries'; - -/** @typedef {import('reducers/ErrorLog').ErrorLog} ErrorLog */ - -/** - * @param {ErrorLog[]} logs - * @param {number} lastMax - */ -const countAboveMax = (logs, lastMax) => - logs.reduce( - (total, { timestamp }) => total + (timestamp > lastMax ? 1 : 0), - 0 - ); - -const initialCounter = Number( - getLsItem(LOCAL_STORAGE_KEYS.LAST_WARNING_TIMESTAMP) || 0 -); - -const useErrorLogs = () => { - const dataSource = useSelector(selectors.errorLogs); - // const query = useQuery(ALGORITHMS_QUERY); - // usePolling(query, 10000); - const [lastTimeStamp, setLastTimeStamp] = useState(initialCounter); - - const totalNewWarnings = countAboveMax(dataSource, lastTimeStamp); - - const clearCounter = useCallback(() => { - const nextTimeStamp = new Date().getTime(); - setLastTimeStamp(nextTimeStamp); - setLsItem(LOCAL_STORAGE_KEYS.LAST_WARNING_TIMESTAMP, nextTimeStamp); - }, [setLastTimeStamp]); - - return { - dataSource, - totalNewWarnings, - clearCounter, - }; -}; - -export default createStore(useErrorLogs); diff --git a/src/hooks/useExperiments.js b/src/hooks/useExperiments.js deleted file mode 100644 index d15a8dc1d..000000000 --- a/src/hooks/useExperiments.js +++ /dev/null @@ -1,78 +0,0 @@ -import { useEffect, useMemo, useCallback } from 'react'; -import { useSelector } from 'react-redux'; -import { useLocation, useHistory } from 'react-router-dom'; -import { selectors } from 'reducers'; -import useActions from './useActions'; - -export const schema = { - DEFAULT: 'main', - SHOW_ALL: 'show-all', -}; - -// used on the socket middleware -export const getExperimentName = search => { - const query = new URLSearchParams(search); - return query.get('experiment') || schema.DEFAULT; -}; - -const useExperiments = () => { - const location = useLocation(); - const history = useHistory(); - const { pathname, search } = location; - - const query = useMemo(() => new URLSearchParams(search), [search]); - const experimentId = useMemo(() => query.get('experiment') || 'main', [ - query, - ]); - - const { collection: experiments, loading } = useSelector( - selectors.experiments.all - ); - - const setExperiment = useCallback( - id => { - id === 'main' ? query.delete('experiment') : query.set('experiment', id); - history.push(`${pathname}?${query.toString()}`); - }, - [query, history, pathname] - ); - - const { - addExperiment, - deleteExperiment, - changeExperiment, - setExperimentLoading, - } = useActions(); - - const experimentName = useSelector(selectors.meta.experimentName); - - useEffect(() => { - changeExperiment(experimentId); - }, [changeExperiment, experimentId]); - - useEffect(() => { - if (!(loading ^ (experimentName === experimentId))) - setExperimentLoading({ to: true }); - }, [experimentName, loading, setExperimentLoading, experimentId]); - - /* moves the default experiment to the top of the list */ - const sortedExperiments = useMemo( - () => - experiments - .slice() - .sort((a, b) => - a.name === schema.DEFAULT ? -1 : b.name === schema.DEFAULT ? 1 : 0 - ), - [experiments] - ); - - return { - experiments: sortedExperiments, - add: addExperiment, - remove: deleteExperiment, - setExperiment, - experimentId, - }; -}; - -export default useExperiments; diff --git a/src/hooks/useJobs.js b/src/hooks/useJobs.js deleted file mode 100644 index c4f2b229c..000000000 --- a/src/hooks/useJobs.js +++ /dev/null @@ -1,44 +0,0 @@ -import { useMemo } from 'react'; -import { useSelector } from 'react-redux'; -import { createStore } from 'reusable'; -import useFilters from 'hooks/useFilters'; -import { jobColumns } from 'Routes/Tables/Jobs'; -import { selectors } from 'reducers'; -import lodash from 'lodash'; - -const searchableKeys = ['key', 'pipeline.name']; -const useJobs = () => { - const collection = useSelector(selectors.jobs.all); - const searchFilter = useSelector(selectors.autoCompleteFilter); - const { filters } = useFilters(); - - const filtered = useMemo(() => { - if (searchFilter === '' && filters.length === 0) return collection; - - return collection.filter(item => { - // custom filter instead of useSearch to avoid looping the array twice - if ( - searchFilter !== '' && - !searchableKeys.some(key => - lodash.get(item, key, '').includes(searchFilter) - ) - ) { - return false; - } - if (filters.length === 0) return true; - // avoid running through the tags if there aren't enough anyway - if (item.pipeline.types.length < filters.length) return false; - return filters.every(tag => item.pipeline.types.includes(tag)); - }); - }, [collection, searchFilter, filters]); - - const loading = useSelector(selectors.experiments.loadingState); - - return { - dataSource: filtered, - columns: jobColumns, - loading, - }; -}; - -export default createStore(useJobs); diff --git a/src/hooks/useLogs.js b/src/hooks/useLogs.js deleted file mode 100644 index b2abd23f5..000000000 --- a/src/hooks/useLogs.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createStore } from 'reusable'; -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; -import { useMemo } from 'react'; -import useActions from './useActions'; - -const useLogs = () => { - const { getKubernetesLogsData } = useActions(); - - const logs = useSelector(selectors.jobs.logs); - const _logs = useMemo(() => logs.map((value, key) => ({ key, ...value })), [ - logs, - ]); - - return { logs: _logs, getLogs: getKubernetesLogsData }; -}; - -export default createStore(useLogs); diff --git a/src/hooks/usePipeline.js b/src/hooks/usePipeline.js index ecb0d2d0b..6b98db3ad 100644 --- a/src/hooks/usePipeline.js +++ b/src/hooks/usePipeline.js @@ -1,19 +1,11 @@ import { useCallback } from 'react'; -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; import { message } from 'antd'; import client from 'client'; import successMsg from 'config/schema/success-messages.schema'; import { useHistory } from 'react-router-dom'; import useActions from './useActions'; -import { useFilter } from './useSearch'; const usePipeline = () => { - const collection = useSelector(selectors.pipelines.collection.all); - const pipelinesCollection = useSelector(selectors.pipelines.collection.all); - - const dataStats = useSelector(selectors.pipelines.stats.all); - const filtered = useFilter(collection, ['name']); const { updateStored, execStored } = useActions(); const history = useHistory(); @@ -84,9 +76,6 @@ const usePipeline = () => { ); return { - collection: filtered, - pipelinesCollection, - dataStats, updateCron, rerunPipeline, addPipeline, diff --git a/src/hooks/useStats.js b/src/hooks/useStats.js deleted file mode 100644 index d2bf57ac2..000000000 --- a/src/hooks/useStats.js +++ /dev/null @@ -1,9 +0,0 @@ -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; - -const useStats = () => { - const [cpu, memory, gpu] = useSelector(selectors.nodeStatistics); - return { cpu, memory, gpu }; -}; - -export default useStats; diff --git a/src/hooks/useStorage.js b/src/hooks/useStorage.js deleted file mode 100644 index 2f8079f3a..000000000 --- a/src/hooks/useStorage.js +++ /dev/null @@ -1,9 +0,0 @@ -import { useSelector } from 'react-redux'; -import { selectors } from 'reducers'; - -const useStorage = () => { - const storage = useSelector(selectors.storage); - return { storage }; -}; - -export default useStorage; diff --git a/src/hooks/useWizardAddPipeline.js b/src/hooks/useWizardAddPipeline.js index e8c95bbbe..b923c22aa 100644 --- a/src/hooks/useWizardAddPipeline.js +++ b/src/hooks/useWizardAddPipeline.js @@ -133,12 +133,18 @@ const useWizardAddPipeline = ( if (isEdit) { if (isRunPipeline) { - runPipeline(cleanDeep(formattedData)); + runPipeline(cleanDeep(formattedData, { emptyArrays: false })); } else { - updatePipeline(cleanDeep(formattedData), LOCAL_STORAGE_KEY); + updatePipeline( + cleanDeep(formattedData, { emptyArrays: false }), + LOCAL_STORAGE_KEY + ); } } else { - addPipeline(cleanDeep(formattedData), LOCAL_STORAGE_KEY); + addPipeline( + cleanDeep(formattedData, { emptyArrays: false }), + LOCAL_STORAGE_KEY + ); } // prevent re-saving to localStorage diff --git a/src/index.js b/src/index.js index 275f5120a..5444eb211 100644 --- a/src/index.js +++ b/src/index.js @@ -23,7 +23,6 @@ const ConfigProvider = () => { }, [dispatch]); const { hasConfig } = useSelector(selectors.config); - // const apolloClient2 = useApolloClient(); return hasConfig ? ( diff --git a/src/middleware/socket.middleware.js b/src/middleware/socket.middleware.js deleted file mode 100644 index 7ed8f9582..000000000 --- a/src/middleware/socket.middleware.js +++ /dev/null @@ -1,153 +0,0 @@ -import io from 'socket.io-client'; -import { setConnectionStatus } from 'actions/connection.action'; -import AT from 'const/application-actions'; -import { COLOR } from 'styles/colors'; -import { getExperimentName } from 'hooks/useExperiments'; - -/** @typedef {SocketIOClient.Socket} Socket */ - -const currentTopicRegistered = {}; - -const success = (payload, action) => ({ - type: action.payload.actionType, - meta: action.meta, - payload, -}); - -const changeConnectionStatus = isSocketConnected => - setConnectionStatus({ isSocketConnected }); - -const connectionsEvents = { - CONNECTION: 'connect', - RECONNECT: 'reconnect', - EXPERIMENT_REGISTER: 'experiment-register', -}; - -const noConnectionEvents = [ - 'disconnect', - 'connect_error', - 'connect_timeout', - 'error', - 'reconnect_attempt', - 'reconnecting', - 'reconnect_error', - 'reconnect_failed', -]; -// this value is used for un-subscribing the previous experiment -let lastExperimentId = null; - -/** @type {(experimentName: string) => string} */ -const formatSocketRoomName = experimentName => - experimentName ? `experiment:${experimentName}` : null; - -/** @param {{ socket: Socket; name: string; lastRoom: string }} props */ -const connectToRoom = ({ socket, name }) => { - console.info( - ` - %cDisconnecting%c from socket room: %c${lastExperimentId} - %cConnecting%c to socket room: %c${name}, - `, - 'font-weight: bold;', - '', - 'font-style: italic;', - 'font-weight: bold;', - '', - 'font-style: italic;' - ); - socket.emit(connectionsEvents.EXPERIMENT_REGISTER, { - name: formatSocketRoomName(name), - lastRoom: formatSocketRoomName(lastExperimentId), - }); - lastExperimentId = name; - console.info( - `%cSOCKET Connected, id=${socket.id}`, - `background: ${COLOR.grey}; color: ${COLOR.blue}` - ); -}; - -const socketMiddleware = ({ dispatch }) => { - /** @type {Socket} */ - let socket = null; - return next => action => { - if (action.type === `${AT.SOCKET_GET_CONFIG}_SUCCESS`) { - if (socket) socket.close(); - const { monitorBackend } = action.payload.config; - - const url = monitorBackend.useLocation - ? window.location.origin - : `${monitorBackend.schema}${monitorBackend.host}:${monitorBackend.port}`; - - socket = io(url, { - path: monitorBackend.socketIoPath, - transports: ['websocket'], - }); - - Object.values(connectionsEvents).forEach(event => { - socket.on(event, args => { - console.info( - args - ? `initializing socket event: ${event}, with args: ${JSON.stringify( - args - )}` - : `initializing socket event: ${event}, with no args` - ); - - if ( - [ - connectionsEvents.CONNECTION, - connectionsEvents.EXPERIMENT_REGISTER, - ].includes(event) - ) { - const experimentName = getExperimentName(window.location.search); - connectToRoom({ - socket, - name: experimentName, - }); - } else { - console.info(`${event}, ${args}`); - } - dispatch(changeConnectionStatus(socket.connected)); - }); - }); - - noConnectionEvents.forEach(event => { - socket.on(event, args => { - console.info(`${event}, ${args}`); - dispatch(changeConnectionStatus(socket.connected)); - }); - }); - - Object.keys(currentTopicRegistered).forEach(act => - socket.on(currentTopicRegistered[act].payload.topic, data => { - const isSocketConnected = socket.connected; - if (data && !isSocketConnected) { - dispatch(changeConnectionStatus(isSocketConnected)); - } - dispatch(success(data, currentTopicRegistered[act])); - }) - ); - } - if (action.type === AT.SOCKET_INIT) { - // verify if topic is already registered in-order to prevent duplicate registration - if (Object.keys(currentTopicRegistered).includes(action.payload.topic)) { - console.warn( - `socket middleware: trying to register topic ${action.payload.topic} twice` - ); - } else { - if (socket !== null) { - socket.on(action.payload.topic, data => - dispatch(success(data, action)) - ); - } - currentTopicRegistered[action.payload.topic] = action; - } - } - - if (action.type === AT.EXPERIMENT_CHANGE) { - connectToRoom({ socket, name: action.payload }); - } - return next(action); - }; -}; - -export default socketMiddleware; diff --git a/src/reducers/index.js b/src/reducers/index.js index b9fc39b00..8fac6e885 100644 --- a/src/reducers/index.js +++ b/src/reducers/index.js @@ -35,10 +35,7 @@ import { reducer as experiments, selectors as experimentsSelectors, } from 'reducers/experiment.reducer'; -import { - reducer as meta, - selectors as metaSelectors, -} from 'reducers/meta.reducer'; + import { reducer as queue, selectors as queueSelectors, @@ -74,7 +71,7 @@ import { const store = { algorithms, - meta, + queue, boards, connection, @@ -106,7 +103,6 @@ export const selectors = { errorLogs: errorLogsSelectors, connection: connectionSelectors, experiments: experimentsSelectors, - meta: metaSelectors, nodeStatistics: nodeStatisticsSelectors, config: configSelectors, storage: storageSelectors, diff --git a/src/reducers/meta.reducer.js b/src/reducers/meta.reducer.js deleted file mode 100644 index bc905e8d8..000000000 --- a/src/reducers/meta.reducer.js +++ /dev/null @@ -1,30 +0,0 @@ -import { createSlice } from '@reduxjs/toolkit'; -import { schema } from 'hooks/useExperiments'; -import actions from 'const/application-actions'; -/** - * @typedef {{ meta: MetaState }} State - * @typedef {typeof initialState} MetaState - */ -const initialState = { - experimentName: schema.DEFAULT, -}; -// holds the experiment name *sent from the server* -// used to validate the right experiment is displayed -const meta = createSlice({ - name: 'meta', - initialState, - reducers: {}, - extraReducers: { - [actions.SOCKET_GET_DATA]: (state, { payload: { meta: nextMeta } }) => ({ - ...state, - ...nextMeta, - }), - }, -}); - -export const { reducer } = meta; - -export const selectors = { - /** @param {State} state */ - experimentName: state => state.meta.experimentName, -}; diff --git a/src/styles/themes/HelperThemes.js b/src/styles/themes/HelperThemes.js index cd281a603..9257165f4 100644 --- a/src/styles/themes/HelperThemes.js +++ b/src/styles/themes/HelperThemes.js @@ -7,6 +7,11 @@ export const iconsThemes = { DARK: , }; +export const iconsThemesTitle = { + LIGHT: 'Switch to Dark Mode', + DARK: 'Switch to Light Mode', +}; + export const headCssUrlThemes = { LIGHT: 'antd/dist/antd.css', DARK: 'antd/dist/antd.dark.css', From 7480005d2930b4c6092f3258d93b2c7bab906e2e Mon Sep 17 00:00:00 2001 From: Ziv Glik Date: Sun, 4 Dec 2022 11:58:39 +0200 Subject: [PATCH 2/4] test replace word monitor to api server --- scripts/staging-template.yaml | 16 ++++++++-------- server/setupConfig.js | 8 ++++---- src/setupProxy.js | 6 +++--- 3 files changed, 15 insertions(+), 15 deletions(-) diff --git a/scripts/staging-template.yaml b/scripts/staging-template.yaml index e13f5ec9d..cd5ce09db 100644 --- a/scripts/staging-template.yaml +++ b/scripts/staging-template.yaml @@ -20,30 +20,30 @@ spec: spec: containers: - env: - - name: MONITOR_BACKEND_PATH + - name: API_SERVER_BACKEND_PATH valueFrom: configMapKeyRef: - key: MONITOR_BACKEND_PATH + key: API_SERVER_BACKEND_PATH name: simulator-configmap - name: MONITOR_BACKEND_PATH_SOCKETIO valueFrom: configMapKeyRef: key: MONITOR_BACKEND_PATH_SOCKETIO name: simulator-configmap - - name: MONITOR_BACKEND_USE_LOCATION + - name: API_SERVER_BACKEND_USE_LOCATION valueFrom: configMapKeyRef: - key: MONITOR_BACKEND_USE_LOCATION + key: API_SERVER_BACKEND_USE_LOCATION name: simulator-configmap - - name: MONITOR_BACKEND_HOST + - name: API_SERVER_BACKEND_HOST valueFrom: configMapKeyRef: - key: MONITOR_BACKEND_HOST + key: API_SERVER_BACKEND_HOST name: simulator-configmap - - name: MONITOR_BACKEND_PORT + - name: API_SERVER_BACKEND_PORT valueFrom: configMapKeyRef: - key: MONITOR_BACKEND_PORT + key: API_SERVER_BACKEND_PORT name: simulator-configmap - name: isSecure valueFrom: diff --git a/server/setupConfig.js b/server/setupConfig.js index 909ba93f7..835c6a58a 100644 --- a/server/setupConfig.js +++ b/server/setupConfig.js @@ -22,10 +22,10 @@ const BOARD_PORT = process.env.BOARD_PORT || '3005'; const indexHtml = path.join(__dirname, '../build', 'index.html'); const monitorBackend = { - useLocation: parseBool(process.env.MONITOR_BACKEND_USE_LOCATION), - host: process.env.MONITOR_BACKEND_HOST || 'localhost', - port: process.env.MONITOR_BACKEND_PORT || '30010', - path: process.env.MONITOR_BACKEND_PATH || '', + useLocation: parseBool(process.env.API_SERVER_BACKEND_USE_LOCATION), + host: process.env.API_SERVER_BACKEND_HOST || 'localhost', + port: process.env.API_SERVER_BACKEND_PORT || '30010', + path: process.env.API_SERVER_BACKEND_PATH || '', socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', schema: process.env.isSecure ? 'https://' : 'http://', }; diff --git a/src/setupProxy.js b/src/setupProxy.js index ec5370798..9378a5701 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -7,9 +7,9 @@ module.exports = app => { hkubeSystemVersion: process.env.HKUBE_SYSTEM_VERSION, baseUrl: packageJSON.homepage, monitorBackend: { - host: process.env.MONITOR_BACKEND_HOST || 'localhost', - port: process.env.MONITOR_BACKEND_PORT || '30010', - path: process.env.MONITOR_BACKEND_PATH || '', + host: process.env.API_SERVER_BACKEND_HOST || 'localhost', + port: process.env.API_SERVER_BACKEND_PORT || '30010', + path: process.env.API_SERVER_BACKEND_PATH || '', socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', schema: process.env.isSecure ? 'https://' : 'http://', }, From 1f3c7e36f9d45c22cd4d9434768e7bb4320d33d0 Mon Sep 17 00:00:00 2001 From: Ziv Glik Date: Sun, 4 Dec 2022 15:54:01 +0200 Subject: [PATCH 3/4] remove MONITOR_BACKEND_PATH_SOCKETIO --- scripts/staging-template.yaml | 5 ----- server/setupConfig.js | 2 +- src/setupProxy.js | 2 +- 3 files changed, 2 insertions(+), 7 deletions(-) diff --git a/scripts/staging-template.yaml b/scripts/staging-template.yaml index cd5ce09db..85f78f632 100644 --- a/scripts/staging-template.yaml +++ b/scripts/staging-template.yaml @@ -25,11 +25,6 @@ spec: configMapKeyRef: key: API_SERVER_BACKEND_PATH name: simulator-configmap - - name: MONITOR_BACKEND_PATH_SOCKETIO - valueFrom: - configMapKeyRef: - key: MONITOR_BACKEND_PATH_SOCKETIO - name: simulator-configmap - name: API_SERVER_BACKEND_USE_LOCATION valueFrom: configMapKeyRef: diff --git a/server/setupConfig.js b/server/setupConfig.js index 835c6a58a..d3bd74913 100644 --- a/server/setupConfig.js +++ b/server/setupConfig.js @@ -26,7 +26,7 @@ const monitorBackend = { host: process.env.API_SERVER_BACKEND_HOST || 'localhost', port: process.env.API_SERVER_BACKEND_PORT || '30010', path: process.env.API_SERVER_BACKEND_PATH || '', - socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', + // socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', schema: process.env.isSecure ? 'https://' : 'http://', }; diff --git a/src/setupProxy.js b/src/setupProxy.js index 9378a5701..0153ddcc3 100644 --- a/src/setupProxy.js +++ b/src/setupProxy.js @@ -10,7 +10,7 @@ module.exports = app => { host: process.env.API_SERVER_BACKEND_HOST || 'localhost', port: process.env.API_SERVER_BACKEND_PORT || '30010', path: process.env.API_SERVER_BACKEND_PATH || '', - socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', + // socketIoPath: process.env.MONITOR_BACKEND_PATH_SOCKETIO || '', schema: process.env.isSecure ? 'https://' : 'http://', }, board: { From cc670e014addfc982b2e3df86b470c9219904cfc Mon Sep 17 00:00:00 2001 From: Ziv Glik Date: Sun, 4 Dec 2022 17:37:04 +0200 Subject: [PATCH 4/4] replace MONITOR_BACKEND_IS_SECURE --- scripts/staging-template.yaml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/staging-template.yaml b/scripts/staging-template.yaml index 85f78f632..bd3d86443 100644 --- a/scripts/staging-template.yaml +++ b/scripts/staging-template.yaml @@ -43,7 +43,7 @@ spec: - name: isSecure valueFrom: configMapKeyRef: - key: MONITOR_BACKEND_IS_SECURE + key: API_SERVER_BACKEND_IS_SECURE name: simulator-configmap - name: BOARD_PATH valueFrom: