Skip to content

Commit 50fe13a

Browse files
adhityamamallanadhityamamallan
committed
Add grouped event base
1 parent 1bce34f commit 50fe13a

10 files changed

+224
-172
lines changed

‎src/views/workflow-history-v2/workflow-history-event-group/helpers/get-event-filtering-type.ts‎

Lines changed: 0 additions & 68 deletions
This file was deleted.

‎src/views/workflow-history-v2/workflow-history-event-group/helpers/get-event-group-filtering-type.ts‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import workflowHistoryFiltersTypeConfig from '@/views/workflow-history/config/workflow-history-filters-type.config';
2+
import { type WorkflowHistoryEventFilteringType } from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
3+
import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-history.types';
4+
5+
function getEventGroupFilteringType(
6+
group: HistoryEventsGroup
7+
): WorkflowHistoryEventFilteringType {
8+
for (const [eventGroupFilterType, filterConfig] of Object.entries(
9+
workflowHistoryFiltersTypeConfig
10+
)) {
11+
if (
12+
(typeof filterConfig === 'function' && filterConfig(group)) ||
13+
group.groupType === filterConfig
14+
) {
15+
return eventGroupFilterType as WorkflowHistoryEventFilteringType;
16+
}
17+
}
18+
19+
return 'WORKFLOW';
20+
}
21+
22+
export default getEventGroupFilteringType;

‎src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.styles.ts‎

Lines changed: 52 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -6,71 +6,66 @@ import { type StyleObject } from 'styletron-react';
66
import { type WorkflowHistoryEventFilteringType } from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
77

88
import workflowHistoryEventFilteringTypeColorsConfig from '../config/workflow-history-event-filtering-type-colors.config';
9+
import { WORKFLOW_HISTORY_GROUPED_GRID_TEMPLATE_COLUMNS } from '../workflow-history-grouped-table/workflow-history-grouped-table.constants';
910

1011
export const styled = {
1112
HeaderContent: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
12-
display: 'flex',
13-
alignItems: 'center',
14-
flex: 1,
15-
minWidth: 0,
13+
...$theme.typography.ParagraphSmall,
14+
display: 'grid',
15+
gridTemplateColumns: WORKFLOW_HISTORY_GROUPED_GRID_TEMPLATE_COLUMNS,
1616
gap: $theme.sizing.scale600,
17+
width: '100%',
18+
alignItems: 'center',
1719
})),
1820
HeaderLabel: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
19-
...$theme.typography.LabelMedium,
20-
flex: 1,
21-
minWidth: 0,
21+
...$theme.typography.LabelSmall,
2222
whiteSpace: 'nowrap',
2323
textOverflow: 'ellipsis',
2424
overflow: 'hidden',
2525
})),
26-
HeaderStatus: createStyled('div', () => ({
27-
flexShrink: 0,
28-
})),
29-
HeaderSecondaryDetails: createStyled(
30-
'div',
31-
({ $theme }: { $theme: Theme }) => ({
32-
display: 'flex',
33-
alignItems: 'center',
34-
gap: $theme.sizing.scale200,
35-
flexWrap: 'wrap',
36-
flexShrink: 0,
37-
})
38-
),
39-
HeaderTime: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
40-
...$theme.typography.LabelXSmall,
41-
color: $theme.colors.contentTertiary,
42-
whiteSpace: 'nowrap',
43-
})),
44-
HeaderDuration: createStyled('div', () => ({
45-
flexShrink: 0,
26+
StatusContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
27+
display: 'flex',
28+
gap: $theme.sizing.scale300,
29+
alignItems: 'center',
4630
})),
47-
HeaderDetails: createStyled('div', () => ({
48-
flexShrink: 0,
31+
SummarizedDetailsContainer: createStyled('div', {
32+
overflow: 'hidden',
33+
}),
34+
ActionsContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
35+
display: 'flex',
36+
gap: $theme.sizing.scale300,
37+
alignItems: 'center',
38+
margin: `-${$theme.sizing.scale200} 0`,
4939
})),
5040
};
5141

5242
export const overrides = (
53-
eventFilteringType: WorkflowHistoryEventFilteringType
43+
eventFilteringType: WorkflowHistoryEventFilteringType,
44+
animateOnEnter?: boolean
5445
) => ({
5546
panel: {
5647
PanelContainer: {
5748
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
58-
...$theme.borders.border100,
49+
borderColor: $theme.borders.border100.borderColor,
50+
borderStyle: $theme.borders.border100.borderStyle,
5951
borderRadius: 0,
60-
borderWidth: '0px',
61-
marginTop: $theme.sizing.scale0,
62-
marginBottom: $theme.sizing.scale0,
52+
borderTopWidth: $theme.borders.border100.borderWidth,
53+
borderBottomWidth: 0,
54+
borderLeftWidth: 0,
55+
borderRightWidth: 0,
56+
marginTop: 0,
57+
marginBottom: 0,
6358
overflow: 'hidden',
6459
}),
6560
},
6661
Header: {
6762
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
6863
// https://github.com/uber/baseweb/blob/main/src/accordion/styled-components.ts#L50
6964
// Since the original Panel uses longhand properties, we need to use longhand in overrides
70-
paddingTop: $theme.sizing.scale200,
71-
paddingBottom: $theme.sizing.scale200,
72-
paddingLeft: $theme.sizing.scale700,
73-
paddingRight: $theme.sizing.scale700,
65+
paddingTop: $theme.sizing.scale300,
66+
paddingBottom: $theme.sizing.scale300,
67+
paddingLeft: $theme.sizing.scale300,
68+
paddingRight: $theme.sizing.scale300,
7469
backgroundColor: 'inherit',
7570
display: 'flex',
7671
alignItems: 'center',
@@ -79,6 +74,20 @@ export const overrides = (
7974
workflowHistoryEventFilteringTypeColorsConfig[eventFilteringType]
8075
.backgroundHighlighted,
8176
},
77+
...(animateOnEnter && {
78+
animationDuration: '2s',
79+
animationName: {
80+
from: {
81+
backgroundColor:
82+
workflowHistoryEventFilteringTypeColorsConfig[
83+
eventFilteringType
84+
].backgroundHighlighted,
85+
},
86+
to: {
87+
backgroundColor: 'inherit',
88+
},
89+
},
90+
}),
8291
}),
8392
},
8493
Content: {
@@ -92,6 +101,11 @@ export const overrides = (
92101
backgroundColor: 'inherit',
93102
}),
94103
},
104+
ToggleIcon: {
105+
style: {
106+
display: 'none',
107+
},
108+
},
95109
} satisfies PanelOverrides,
96110
badge: {
97111
Badge: {

‎src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.tsx‎

Lines changed: 63 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,49 +1,58 @@
1+
import { useCallback } from 'react';
2+
13
import { Panel } from 'baseui/accordion';
2-
import { Badge } from 'baseui/badge';
34
import { MdCircle } from 'react-icons/md';
45

6+
import formatDate from '@/utils/data-formatters/format-date';
57
import WorkflowHistoryEventStatusBadge from '@/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge';
6-
import WorkflowHistoryEventsDurationBadge from '@/views/workflow-history/workflow-history-events-duration-badge/workflow-history-events-duration-badge';
78
import WorkflowHistoryGroupLabel from '@/views/workflow-history/workflow-history-group-label/workflow-history-group-label';
8-
import WorkflowHistoryRemainingDurationBadge from '@/views/workflow-history/workflow-history-remaining-duration-badge/workflow-history-remaining-duration-badge';
9+
import WorkflowHistoryTimelineResetButton from '@/views/workflow-history/workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
910

1011
import workflowHistoryEventFilteringTypeColorsConfig from '../config/workflow-history-event-filtering-type-colors.config';
1112
import useEventGroupDuration from '../hooks/use-event-group-duration';
1213

13-
import getEventFilteringType from './helpers/get-event-filtering-type';
14+
import getEventGroupFilteringType from './helpers/get-event-group-filtering-type';
1415
import {
1516
overrides as getOverrides,
1617
styled,
1718
} from './workflow-history-event-group.styles';
1819
import { type Props } from './workflow-history-event-group.types';
1920

2021
export default function WorkflowHistoryEventGroup({
21-
status,
22-
label,
23-
shortLabel,
24-
timeLabel,
25-
startTimeMs,
26-
closeTimeMs,
27-
expectedEndTimeInfo,
22+
eventGroup,
23+
selected,
2824
workflowCloseTimeMs,
2925
workflowCloseStatus,
3026
workflowIsArchived,
31-
events,
32-
isLastEvent,
33-
eventsMetadata,
34-
hasMissingEvents,
3527
showLoadingMoreEvents,
3628
decodedPageUrlParams,
37-
badges,
38-
resetToDecisionEventId,
3929
onReset,
40-
selected,
30+
getIsEventExpanded,
31+
toggleIsEventExpanded,
4132
}: Props) {
42-
// Check each filter function against the event and return the one that matches, and OTHER otherwise
43-
const eventFilteringType = getEventFilteringType(events);
33+
const {
34+
status,
35+
label,
36+
shortLabel,
37+
startTimeMs,
38+
closeTimeMs,
39+
// expectedEndTimeInfo,
40+
events,
41+
eventsMetadata,
42+
hasMissingEvents,
43+
// badges,
44+
resetToDecisionEventId,
45+
} = eventGroup;
4446

45-
const overrides = getOverrides(eventFilteringType);
46-
const hasBadges = badges !== undefined && badges.length > 0;
47+
const eventFilteringType = getEventGroupFilteringType(eventGroup);
48+
49+
const overrides = getOverrides(eventFilteringType, selected);
50+
51+
const handleReset = useCallback(() => {
52+
if (onReset) {
53+
onReset();
54+
}
55+
}, [onReset]);
4756

4857
const eventGroupDuration = useEventGroupDuration({
4958
startTime: startTimeMs,
@@ -56,6 +65,8 @@ export default function WorkflowHistoryEventGroup({
5665
workflowCloseTime: workflowCloseTimeMs,
5766
});
5867

68+
const lastEventTimeMs = eventsMetadata[eventsMetadata.length - 1].timeMs;
69+
5970
return (
6071
<Panel
6172
title={
@@ -69,21 +80,46 @@ export default function WorkflowHistoryEventGroup({
6980
<styled.HeaderLabel>
7081
<WorkflowHistoryGroupLabel label={label} shortLabel={shortLabel} />
7182
</styled.HeaderLabel>
72-
<styled.HeaderStatus>
83+
<styled.StatusContainer>
7384
<WorkflowHistoryEventStatusBadge
7485
status={status}
7586
statusReady={!showLoadingMoreEvents}
76-
size="medium"
87+
size="small"
7788
/>
7889
{eventsMetadata[eventsMetadata.length - 1].label}
79-
</styled.HeaderStatus>
80-
<div>{timeLabel}</div>
90+
</styled.StatusContainer>
91+
<div>{lastEventTimeMs ? formatDate(lastEventTimeMs) : null}</div>
8192
<div>{eventGroupDuration}</div>
93+
{/* TODO: add as event details:
94+
- Existing event details
95+
- Badges
96+
- Expected end time info
97+
*/}
98+
<styled.SummarizedDetailsContainer>
99+
Placeholder for event details
100+
</styled.SummarizedDetailsContainer>
101+
<styled.ActionsContainer>
102+
{resetToDecisionEventId && (
103+
<WorkflowHistoryTimelineResetButton
104+
workflowId={decodedPageUrlParams.workflowId}
105+
runId={decodedPageUrlParams.runId}
106+
domain={decodedPageUrlParams.domain}
107+
cluster={decodedPageUrlParams.cluster}
108+
onReset={handleReset}
109+
/>
110+
)}
111+
</styled.ActionsContainer>
82112
</styled.HeaderContent>
83113
}
114+
expanded={events.some(
115+
({ eventId }) => eventId && getIsEventExpanded(eventId)
116+
)}
117+
onChange={() =>
118+
events[0].eventId && toggleIsEventExpanded(events[0].eventId)
119+
}
84120
overrides={overrides.panel}
85121
>
86-
<div>TODO</div>
122+
<div>TODO: Full event details</div>
87123
</Panel>
88124
);
89125
}

‎src/views/workflow-history-v2/workflow-history-event-group/workflow-history-event-group.types.ts‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,22 +3,10 @@ import { type HistoryEventsGroup } from '@/views/workflow-history/workflow-histo
33

44
import { type Props as WorkflowHistoryProps } from '../workflow-history-v2.types';
55

6-
export type Props = Pick<
7-
HistoryEventsGroup,
8-
| 'events'
9-
| 'eventsMetadata'
10-
| 'timeLabel'
11-
| 'label'
12-
| 'hasMissingEvents'
13-
| 'status'
14-
| 'badges'
15-
| 'resetToDecisionEventId'
16-
| 'startTimeMs'
17-
| 'closeTimeMs'
18-
| 'expectedEndTimeInfo'
19-
| 'shortLabel'
20-
> & {
21-
isLastEvent: boolean;
6+
export type Props = {
7+
eventGroup: HistoryEventsGroup;
8+
getIsEventExpanded: (eventId: string) => void;
9+
toggleIsEventExpanded: (eventId: string) => void;
2210
showLoadingMoreEvents: boolean;
2311
decodedPageUrlParams: WorkflowHistoryProps['params'];
2412
onReset?: () => void;

0 commit comments

Comments
 (0)