diff --git a/nerdlets/home/index.js b/nerdlets/home/index.js index 671afd1..9aef33f 100644 --- a/nerdlets/home/index.js +++ b/nerdlets/home/index.js @@ -140,7 +140,7 @@ const HomeNerdlet = () => { ? [ { ...ACTION_BTN_ATTRIBS.EDIT_FLOW, - onClick: () => changeMode(MODES.EDIT), + onClick: () => transitionToMode(MODES.EDIT), }, { ...ACTION_BTN_ATTRIBS.EXPORT_FLOW, @@ -191,14 +191,6 @@ const HomeNerdlet = () => { id: 'create-flow', }); - const changeMode = useCallback( - (newMode = MODES.INLINE) => - setNerdletState({ - mode: newMode, - }), - [] - ); - const flowClickHandler = useCallback( (id) => setNerdletState({ flow: { id } }), [] @@ -216,8 +208,11 @@ const HomeNerdlet = () => { setTransitionToFlow(true); transitionTimeoutId.current = setTimeout(() => { setTransitionToFlow(false); - }, 3000); - if (newMode) changeMode(newMode); + }, 1000); + if (newMode) + setNerdletState({ + mode: newMode, + }); }, []); const auditLogCloseHandler = () => setisAuditLogShown(false); @@ -252,7 +247,7 @@ const HomeNerdlet = () => { flowDoc={currentFlowDoc} onClose={backToFlowsHandler} mode={mode} - setMode={changeMode} + setMode={transitionToMode} prevNonEditMode={prevNonEditMode} flows={flows} onRefetch={flowsRefetch} diff --git a/src/components/level/index.js b/src/components/level/index.js index fa5ab00..59c663b 100644 --- a/src/components/level/index.js +++ b/src/components/level/index.js @@ -89,80 +89,109 @@ const Level = ({ validStatuses.includes(step.status)) ); - return filteredSteps.reduce( - (acc, { id, signals = [], status }, index, arr) => { - let startNextRow = false; - if ( - mode === MODES.INLINE && - ((signalExpandOption & SIGNAL_EXPAND.UNHEALTHY_ONLY && - [STATUSES.CRITICAL, STATUSES.WARNING].includes(status)) || - (signalExpandOption & SIGNAL_EXPAND.CRITICAL_ONLY && - status === STATUSES.CRITICAL) || - signalExpandOption & SIGNAL_EXPAND.ALL) - ) { - startNextRow = true; - } + return ( + filteredSteps.reduce( + (acc, { id, signals = [], status }, index, arr) => { + let startNextRow = false; + if ( + mode === MODES.INLINE && + ((signalExpandOption & SIGNAL_EXPAND.UNHEALTHY_ONLY && + [STATUSES.CRITICAL, STATUSES.WARNING].includes(status)) || + (signalExpandOption & SIGNAL_EXPAND.CRITICAL_ONLY && + status === STATUSES.CRITICAL) || + signalExpandOption & SIGNAL_EXPAND.ALL) + ) { + startNextRow = true; + } - const filteredSortedSignals = signals - .filter(({ status }) => validStatuses.includes(status)) - .sort((a, b) => { - const a1 = - orderedStatuses.indexOf(a.status) + - signalTypes.indexOf(a.type) * 0.1; + const filteredSortedSignals = signals + .filter(({ status }) => validStatuses.includes(status)) + .sort((a, b) => { + const a1 = + orderedStatuses.indexOf(a.status) + + signalTypes.indexOf(a.type) * 0.1; - const b1 = - orderedStatuses.indexOf(b.status) + - signalTypes.indexOf(b.type) * 0.1; + const b1 = + orderedStatuses.indexOf(b.status) + + signalTypes.indexOf(b.type) * 0.1; - return a1 - b1; - }); + return a1 - b1; + }); - const isLastStep = index + 1 === arr.length; - const cell = ( -
- stepDragStartHandler(e, index)} - onDragOver={(e) => stepDragOverHandler(e, index)} - onDrop={(e) => stepDropHandler(e)} - mode={mode} - saveFlow={saveFlow} - /> -
- ); - if (mode === MODES.EDIT) { - acc.rows.push( + const isLastStep = index + 1 === arr.length; + const cell = (
- {cell} + stepDragStartHandler(e, index)} + onDragOver={(e) => stepDragOverHandler(e, index)} + onDrop={(e) => stepDropHandler(e)} + mode={mode} + saveFlow={saveFlow} + />
); - } else { - if ( - (signalExpandOption & SIGNAL_EXPAND.UNHEALTHY_ONLY && - !['critical', 'warning'].includes(status)) || - (signalExpandOption & SIGNAL_EXPAND.CRITICAL_ONLY && - status !== 'critical') - ) { - if (mode === MODES.STACKED && acc.cols.length) { + if (mode === MODES.EDIT) { + acc.rows.push( +
+ {cell} +
+ ); + } else { + if ( + (signalExpandOption & SIGNAL_EXPAND.UNHEALTHY_ONLY && + !['critical', 'warning'].includes(status)) || + (signalExpandOption & SIGNAL_EXPAND.CRITICAL_ONLY && + status !== 'critical') + ) { + if (mode === MODES.STACKED && acc.cols.length) { + acc.rows.push( +
+ {[...acc.cols]} +
+ ); + acc.cols = []; + } + return isLastStep ? acc.rows : acc; + } + + acc.cols.push(cell); + + if (acc.cols.length === 2) startNextRow = true; + if (isLastStep) startNextRow = true; + if (mode === MODES.INLINE) { + if (['critical', 'warning'].includes(status)) startNextRow = true; + if ( + !isLastStep && + ['critical', 'warning'].includes(arr[index + 1].status) + ) { + startNextRow = true; + } + } + + if (startNextRow) { acc.rows.push(
- {[...acc.cols]} -
- ); - acc.cols = []; } - } - return isLastStep ? acc.rows : acc; - }, - { rows: [], cols: [] } + return acc; + }, + { rows: [], cols: [] } + )?.rows || [] ); }, [steps, mode, signalExpandOption]);