diff --git a/console2/src/components/molecules/ProcessToolbar/index.tsx b/console2/src/components/molecules/ProcessToolbar/index.tsx index 3107e56f87..6634376340 100644 --- a/console2/src/components/molecules/ProcessToolbar/index.tsx +++ b/console2/src/components/molecules/ProcessToolbar/index.tsx @@ -30,7 +30,7 @@ interface ExternalProps { const ProcessToolbar = ({ children }: ExternalProps) => { return ( - {children} + {children} ); }; diff --git a/console2/src/components/organisms/ProcessLogActivityV2/index.tsx b/console2/src/components/organisms/ProcessLogActivityV2/index.tsx index 344607a555..9c971e310f 100644 --- a/console2/src/components/organisms/ProcessLogActivityV2/index.tsx +++ b/console2/src/components/organisms/ProcessLogActivityV2/index.tsx @@ -25,12 +25,19 @@ import { ConcordId } from '../../../api/common'; import { isFinal, ProcessStatus } from '../../../api/process'; import './styles.css'; -import { listLogSegments as apiListLogSegments, LogSegmentEntry } from '../../../api/process/log'; +import {listLogSegments as apiListLogSegments, LogSegmentEntry, SegmentStatus} from '../../../api/process/log'; import { usePolling } from '../../../api/usePolling'; import { RequestErrorActivity } from '../../organisms'; import LogSegmentActivity from './LogSegmentActivity'; import { FormWizardAction, ProcessToolbar } from '../../molecules'; -import { Button, Divider, Popup, Radio } from 'semantic-ui-react'; +import { + Button, + Divider, + Dropdown, + DropdownProps, + Popup, + Radio, +} from 'semantic-ui-react'; import { LogProcessorOptions } from '../../../state/data/processes/logs/processors'; import { Route } from 'react-router'; import { FormListEntry, list as apiListForms } from '../../../api/process/form'; @@ -47,6 +54,38 @@ const DEFAULT_OPTS: LogOptions = { segmentOptions: DEFAULT_SEGMENT_OPTS }; +const LOG_SEGMENT_STATUS_OPTS = [ + { + key: 'ALL', + text: 'All logs', + value: 'ALL', + }, + { + key: SegmentStatus.OK, + text: SegmentStatus.OK, + value: SegmentStatus.OK, + icon: {name: 'circle', color: 'green'}, + }, + { + key: SegmentStatus.FAILED, + text: SegmentStatus.FAILED, + value: SegmentStatus.FAILED, + icon: {name: 'close', color: 'red'}, + }, + { + key: SegmentStatus.RUNNING, + text: SegmentStatus.RUNNING, + value: SegmentStatus.RUNNING, + icon: {name: 'spinner', color: 'teal'}, + }, + { + key: SegmentStatus.SUSPENDED, + text: SegmentStatus.SUSPENDED, + value: SegmentStatus.SUSPENDED, + icon: {name: 'hourglass half', color: 'blue'}, + }, +] + interface LogOptions { expandAllSegments: boolean; showSystemSegment: boolean; @@ -72,6 +111,12 @@ const ProcessLogActivityV2 = ({ const [logOpts, setLogOptions] = useState(getStoredOpts()); const [forms, setForms] = useState([]); + const [logSegmentStatusFilter, setLogSegmentStatusFilter] = useState(LOG_SEGMENT_STATUS_OPTS[0].value); + + const handleLogSegmentStatusFilterChange = useCallback((e: React.SyntheticEvent, data: DropdownProps) => { + setLogSegmentStatusFilter(data.value as string); + }, []); + const segmentOptsHandler = useCallback((o: LogProcessorOptions) => { setLogOptions((prev) => { return { ...prev, segmentOptions: o }; @@ -119,6 +164,20 @@ const ProcessLogActivityV2 = ({ return ( <> + + +
+ {forms.length > 0 && processStatus === ProcessStatus.SUSPENDED && (
logOpts.showSystemSegment || (!logOpts.showSystemSegment && value.id !== 0) ) + .filter( + (value) => logSegmentStatusFilter === 'ALL' || value.status === undefined || logSegmentStatusFilter === value.status + ) .map((s) => { return (