Skip to content

Commit 7369e16

Browse files
adhityamamallanadhityamamallan
committed
more changes to ungrouped event
Signed-off-by: Adhitya Mamallan <[email protected]>
1 parent 7e11bfe commit 7369e16

File tree

2 files changed

+299
-7
lines changed

2 files changed

+299
-7
lines changed

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

Lines changed: 161 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,166 @@
11
import { styled as createStyled, type Theme } from 'baseui';
2+
import { type PanelOverrides } from 'baseui/accordion';
3+
import { type BadgeOverrides } from 'baseui/badge';
4+
import { type StyleObject } from 'styletron-react';
5+
6+
import { type WorkflowHistoryEventFilteringType } from '@/views/workflow-history/workflow-history-filters-type/workflow-history-filters-type.types';
7+
8+
import workflowHistoryEventFilteringTypeColorsConfig from '../config/workflow-history-event-filtering-type-colors.config';
9+
import { WORKFLOW_HISTORY_UNGROUPED_GRID_TEMPLATE_COLUMNS } from '../workflow-history-ungrouped-table/workflow-history-ungrouped-table.constants';
210

311
export const styled = {
4-
TempContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
5-
...$theme.typography.MonoParagraphXSmall,
6-
padding: $theme.sizing.scale300,
7-
...$theme.borders.border100,
12+
HeaderContent: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
13+
...$theme.typography.ParagraphSmall,
14+
display: 'flex',
15+
flexDirection: 'column',
16+
gap: $theme.sizing.scale200,
17+
paddingBottom: $theme.sizing.scale300,
18+
[$theme.mediaQuery.medium]: {
19+
display: 'grid',
20+
gridTemplateColumns: WORKFLOW_HISTORY_UNGROUPED_GRID_TEMPLATE_COLUMNS,
21+
width: '100%',
22+
alignItems: 'center',
23+
gap: $theme.sizing.scale600,
24+
paddingBottom: 0,
25+
},
26+
})),
27+
HeaderLabel: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
28+
...$theme.typography.LabelSmall,
29+
whiteSpace: 'nowrap',
30+
textOverflow: 'ellipsis',
31+
overflow: 'hidden',
832
})),
33+
StatusContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
34+
display: 'flex',
35+
gap: $theme.sizing.scale300,
36+
alignItems: 'center',
37+
})),
38+
SummarizedDetailsContainer: createStyled(
39+
'div',
40+
({ $theme }: { $theme: Theme }) => ({
41+
overflow: 'hidden',
42+
[$theme.mediaQuery.medium]: {
43+
margin: `-${$theme.sizing.scale200} 0`,
44+
},
45+
})
46+
),
47+
ActionsContainer: createStyled('div', ({ $theme }: { $theme: Theme }) => ({
48+
display: 'flex',
49+
gap: $theme.sizing.scale300,
50+
alignItems: 'center',
51+
[$theme.mediaQuery.medium]: {
52+
margin: `-${$theme.sizing.scale200} 0`,
53+
},
54+
})),
55+
GroupDetailsGridContainer: createStyled('div', {
56+
display: 'grid',
57+
gridTemplateColumns: WORKFLOW_HISTORY_UNGROUPED_GRID_TEMPLATE_COLUMNS,
58+
}),
59+
GroupDetailsNameSpacer: createStyled(
60+
'div',
61+
({ $theme }: { $theme: Theme }) => ({
62+
display: 'none',
63+
[$theme.mediaQuery.medium]: {
64+
gridColumn: '1 / span 3',
65+
},
66+
})
67+
),
68+
GroupDetailsContainer: createStyled(
69+
'div',
70+
({ $theme }: { $theme: Theme }) => ({
71+
gridColumn: '1 / -1',
72+
[$theme.mediaQuery.medium]: {
73+
gridColumn: '4 / -1',
74+
},
75+
border: `2px solid ${$theme.colors.borderOpaque}`,
76+
borderRadius: $theme.borders.radius400,
77+
padding: $theme.sizing.scale500,
78+
backgroundColor: $theme.colors.backgroundPrimary,
79+
})
80+
),
981
};
82+
83+
export const overrides = (
84+
eventFilteringType: WorkflowHistoryEventFilteringType,
85+
animateOnEnter?: boolean
86+
) => ({
87+
panel: {
88+
PanelContainer: {
89+
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
90+
borderColor: $theme.borders.border100.borderColor,
91+
borderStyle: $theme.borders.border100.borderStyle,
92+
borderRadius: 0,
93+
borderTopWidth: $theme.borders.border100.borderWidth,
94+
borderBottomWidth: 0,
95+
borderLeftWidth: 0,
96+
borderRightWidth: 0,
97+
marginTop: 0,
98+
marginBottom: 0,
99+
overflow: 'hidden',
100+
}),
101+
},
102+
Header: {
103+
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
104+
// https://github.com/uber/baseweb/blob/main/src/accordion/styled-components.ts#L50
105+
// Since the original Panel uses longhand properties, we need to use longhand in overrides
106+
paddingTop: $theme.sizing.scale300,
107+
paddingBottom: $theme.sizing.scale300,
108+
paddingLeft: $theme.sizing.scale300,
109+
paddingRight: $theme.sizing.scale300,
110+
backgroundColor: 'inherit',
111+
display: 'flex',
112+
alignItems: 'center',
113+
':hover': {
114+
backgroundColor:
115+
workflowHistoryEventFilteringTypeColorsConfig[eventFilteringType]
116+
.backgroundHighlighted,
117+
},
118+
...(animateOnEnter && {
119+
animationDuration: '2s',
120+
animationName: {
121+
from: {
122+
backgroundColor:
123+
workflowHistoryEventFilteringTypeColorsConfig[
124+
eventFilteringType
125+
].backgroundHighlighted,
126+
},
127+
to: {
128+
backgroundColor: 'inherit',
129+
},
130+
},
131+
}),
132+
}),
133+
},
134+
Content: {
135+
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
136+
// https://github.com/uber/baseweb/blob/main/src/accordion/styled-components.ts#L102
137+
// Since the original Panel uses longhand properties, we need to use longhand in overrides
138+
paddingTop: 0,
139+
paddingBottom: $theme.sizing.scale600,
140+
paddingLeft: 0,
141+
paddingRight: 0,
142+
[$theme.mediaQuery.medium]: {
143+
paddingLeft: $theme.sizing.scale700,
144+
paddingRight: $theme.sizing.scale700,
145+
},
146+
backgroundColor: 'inherit',
147+
}),
148+
},
149+
ToggleIcon: {
150+
style: {
151+
display: 'none',
152+
},
153+
},
154+
} satisfies PanelOverrides,
155+
badge: {
156+
Badge: {
157+
style: ({ $theme }: { $theme: Theme }): StyleObject => ({
158+
backgroundColor: $theme.colors.backgroundSecondary,
159+
color: $theme.colors.contentSecondary,
160+
...$theme.typography.LabelXSmall,
161+
whiteSpace: 'nowrap',
162+
marginLeft: $theme.sizing.scale100,
163+
}),
164+
},
165+
} satisfies BadgeOverrides,
166+
});

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

Lines changed: 138 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,143 @@
1-
import { styled } from './workflow-history-ungrouped-event.styles';
1+
import { useCallback, useMemo } from 'react';
2+
3+
import { Panel } from 'baseui/accordion';
4+
import { MdOutlineCircle } from 'react-icons/md';
5+
6+
import formatDate from '@/utils/data-formatters/format-date';
7+
import parseGrpcTimestamp from '@/utils/datetime/parse-grpc-timestamp';
8+
import WorkflowHistoryEventStatusBadge from '@/views/workflow-history/workflow-history-event-status-badge/workflow-history-event-status-badge';
9+
import WorkflowHistoryGroupLabel from '@/views/workflow-history/workflow-history-group-label/workflow-history-group-label';
10+
import WorkflowHistoryTimelineResetButton from '@/views/workflow-history/workflow-history-timeline-reset-button/workflow-history-timeline-reset-button';
11+
12+
import workflowHistoryEventFilteringTypeColorsConfig from '../config/workflow-history-event-filtering-type-colors.config';
13+
import generateHistoryGroupDetails from '../helpers/generate-history-group-details';
14+
import WorkflowHistoryDetailsRow from '../workflow-history-details-row/workflow-history-details-row';
15+
import getEventGroupFilteringType from '../workflow-history-event-group/helpers/get-event-group-filtering-type';
16+
import getFormattedEventsDuration from '../workflow-history-event-group-duration/helpers/get-formatted-events-duration';
17+
import WorkflowHistoryGroupDetails from '../workflow-history-group-details/workflow-history-group-details';
18+
19+
import {
20+
styled,
21+
overrides as getOverrides,
22+
} from './workflow-history-ungrouped-event.styles';
223
import { type Props } from './workflow-history-ungrouped-event.types';
324

4-
export default function WorkflowHistoryUngroupedEvent({ eventInfo }: Props) {
25+
export default function WorkflowHistoryUngroupedEvent({
26+
eventInfo,
27+
animateOnEnter,
28+
workflowStartTimeMs,
29+
onReset,
30+
decodedPageUrlParams,
31+
isExpanded,
32+
toggleIsExpanded,
33+
}: Props) {
34+
const eventFilteringType = getEventGroupFilteringType(eventInfo.eventGroup);
35+
36+
const overrides = getOverrides(eventFilteringType, animateOnEnter);
37+
38+
const handleReset = useCallback(() => {
39+
if (onReset) {
40+
onReset();
41+
}
42+
}, [onReset]);
43+
44+
const { groupDetailsEntries, summaryDetailsEntries } = useMemo(
45+
() => generateHistoryGroupDetails(eventInfo.eventGroup),
46+
[eventInfo.eventGroup]
47+
);
48+
49+
const eventSummaryDetails = summaryDetailsEntries.find(
50+
([eventId]) => eventId === eventInfo.id
51+
)?.[1].eventDetails;
52+
553
return (
6-
<styled.TempContainer>{JSON.stringify(eventInfo)}</styled.TempContainer>
54+
<Panel
55+
title={
56+
<styled.HeaderContent>
57+
<MdOutlineCircle
58+
color={
59+
workflowHistoryEventFilteringTypeColorsConfig[eventFilteringType]
60+
.content
61+
}
62+
/>
63+
<styled.HeaderLabel>{eventInfo.id}</styled.HeaderLabel>
64+
<styled.HeaderLabel>
65+
<WorkflowHistoryGroupLabel
66+
label={eventInfo.label}
67+
shortLabel={eventInfo.shortLabel}
68+
/>
69+
</styled.HeaderLabel>
70+
<styled.StatusContainer>
71+
<WorkflowHistoryEventStatusBadge
72+
statusReady={true}
73+
size="small"
74+
status={eventInfo.eventMetadata.status}
75+
/>
76+
{eventInfo.eventMetadata.label}
77+
</styled.StatusContainer>
78+
<div>
79+
{eventInfo.event.eventTime
80+
? formatDate(parseGrpcTimestamp(eventInfo.event.eventTime))
81+
: null}
82+
</div>
83+
<div>
84+
{eventInfo.event.eventTime && workflowStartTimeMs
85+
? getFormattedEventsDuration(
86+
workflowStartTimeMs,
87+
parseGrpcTimestamp(eventInfo.event.eventTime)
88+
)
89+
: null}
90+
</div>
91+
<styled.SummarizedDetailsContainer>
92+
{eventSummaryDetails && eventSummaryDetails.length > 0 ? (
93+
<WorkflowHistoryDetailsRow
94+
detailsEntries={eventSummaryDetails}
95+
{...decodedPageUrlParams}
96+
/>
97+
) : (
98+
<div />
99+
)}
100+
</styled.SummarizedDetailsContainer>
101+
<styled.ActionsContainer>
102+
{eventInfo.canReset && (
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>
112+
</styled.HeaderContent>
113+
}
114+
expanded={isExpanded}
115+
onChange={toggleIsExpanded}
116+
overrides={overrides.panel}
117+
>
118+
<styled.GroupDetailsGridContainer>
119+
<styled.GroupDetailsNameSpacer />
120+
<styled.GroupDetailsContainer>
121+
<WorkflowHistoryGroupDetails
122+
groupDetailsEntries={[
123+
[
124+
`summary_${eventInfo.eventGroup.firstEventId}`,
125+
{
126+
eventDetails: summaryDetailsEntries.flatMap(
127+
([_, eventSummaryDetails]) =>
128+
eventSummaryDetails.eventDetails
129+
),
130+
eventLabel: 'Summary',
131+
},
132+
],
133+
...groupDetailsEntries,
134+
]}
135+
initialEventId={eventInfo.id}
136+
workflowPageParams={decodedPageUrlParams}
137+
onClose={() => toggleIsExpanded()}
138+
/>
139+
</styled.GroupDetailsContainer>
140+
</styled.GroupDetailsGridContainer>
141+
</Panel>
7142
);
8143
}

0 commit comments

Comments
 (0)