Skip to content

Commit 3134c85

Browse files
lokanandaprabhucursoragent
authored and
karthikjeeyar
committed
feat(orchestrator): add card height mode config for workflow run page (#2386)
* feat(orchestrator): add card height mode config Expose a workflow instance page option to switch between fixed card heights and content-based sizing, with a new hook and changeset entry. Co-authored-by: Cursor <cursoragent@cursor.com> * fix(orchestrator): simplify layout and warn on invalid mode Refactor the workflow instance layout to reuse card components and rename the height mode flag for clarity, and warn when config values are unexpected before falling back to fixed mode. Made-with: Cursor --------- Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 8b96efc commit 3134c85

File tree

4 files changed

+144
-54
lines changed

4 files changed

+144
-54
lines changed

‎workspaces/orchestrator/.changeset/workflow-instance-card-height.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@red-hat-developer-hub/backstage-plugin-orchestrator': patch
3+
'@red-hat-developer-hub/backstage-plugin-orchestrator-common': patch
4+
---
5+
6+
Add workflow instance card height mode config for fixed or content-based layouts.

‎workspaces/orchestrator/plugins/orchestrator-common/config.d.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,5 +103,19 @@ export interface Config {
103103
value: string;
104104
}>;
105105
};
106+
/**
107+
* UI configuration for the workflow instance page.
108+
* @visibility frontend
109+
*/
110+
workflowInstancePage?: {
111+
/**
112+
* Controls card height behavior on the workflow instance page.
113+
* "fixed" keeps the current fixed-height cards with internal scrolling.
114+
* "content" lets cards expand to fit their content.
115+
* Default: fixed
116+
* @visibility frontend
117+
*/
118+
cardHeightMode?: 'fixed' | 'content';
119+
};
106120
};
107121
}

‎workspaces/orchestrator/plugins/orchestrator/src/components/WorkflowInstancePage/WorkflowInstancePageContent.tsx‎

Lines changed: 92 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ import {
3636
import { orchestratorApiRef } from '../../api/api';
3737
import { VALUE_UNAVAILABLE } from '../../constants';
3838
import { useTranslation } from '../../hooks/useTranslation';
39+
import { useWorkflowInstanceCardHeightMode } from '../../hooks/useWorkflowInstanceCardHeightMode';
3940
import { formatDuration } from '../../utils/DurationUtils';
4041
import { WorkflowRunDetail } from '../types/WorkflowRunDetail';
4142
import { VariablesDialog } from './VariablesDialog';
@@ -102,6 +103,11 @@ export const WorkflowInstancePageContent: React.FC<{
102103
const { t } = useTranslation();
103104
const { classes } = useStyles();
104105
const orchestratorApi = useApi(orchestratorApiRef);
106+
const cardHeightMode = useWorkflowInstanceCardHeightMode();
107+
const isFixedHeightMode = cardHeightMode !== 'content';
108+
const topRowClassName = isFixedHeightMode ? classes.topRowCard : '';
109+
const bottomRowClassName = isFixedHeightMode ? classes.bottomRowCard : '';
110+
const cardOverflowClassName = isFixedHeightMode ? classes.cardClassName : '';
105111

106112
const details = useMemo(
107113
() => mapProcessInstanceToDetails(instance, t),
@@ -161,6 +167,61 @@ export const WorkflowInstancePageContent: React.FC<{
161167
</Link>
162168
);
163169

170+
const detailsCard = (
171+
<InfoCard
172+
title={
173+
<div className={classes.titleContainer}>
174+
<Typography
175+
component="span"
176+
variant="h5"
177+
className={classes.detailsTitle}
178+
>
179+
{t('common.details')}
180+
</Typography>
181+
{viewVariables}
182+
</div>
183+
}
184+
divider={false}
185+
className={topRowClassName}
186+
cardClassName={cardOverflowClassName}
187+
>
188+
<WorkflowRunDetails details={details} />
189+
</InfoCard>
190+
);
191+
192+
const resultCard = (
193+
<WorkflowResult
194+
className={topRowClassName}
195+
cardClassName={cardOverflowClassName}
196+
instance={instance}
197+
/>
198+
);
199+
200+
const inputsCard = (
201+
<WorkflowInputs
202+
className={bottomRowClassName}
203+
cardClassName={cardOverflowClassName}
204+
value={value}
205+
loading={loading}
206+
responseError={responseError}
207+
/>
208+
);
209+
210+
const progressCard = (
211+
<InfoCard
212+
title={t('workflow.progress')}
213+
divider={false}
214+
className={bottomRowClassName}
215+
cardClassName={cardOverflowClassName}
216+
>
217+
<WorkflowProgress
218+
workflowError={instance.error}
219+
workflowNodes={instance.nodes}
220+
workflowStatus={instance.state}
221+
/>
222+
</InfoCard>
223+
);
224+
164225
return (
165226
<Content noPadding>
166227
<VariablesDialog
@@ -169,60 +230,37 @@ export const WorkflowInstancePageContent: React.FC<{
169230
instanceVariables={instanceVariables}
170231
/>
171232
<Grid container spacing={2}>
172-
<Grid item xs={6}>
173-
<InfoCard
174-
title={
175-
<div className={classes.titleContainer}>
176-
<Typography
177-
component="span"
178-
variant="h5"
179-
className={classes.detailsTitle}
180-
>
181-
{t('common.details')}
182-
</Typography>
183-
{viewVariables}
184-
</div>
185-
}
186-
divider={false}
187-
className={classes.topRowCard}
188-
cardClassName={classes.cardClassName}
189-
>
190-
<WorkflowRunDetails details={details} />
191-
</InfoCard>
192-
</Grid>
193-
194-
<Grid item xs={6}>
195-
<WorkflowResult
196-
className={classes.topRowCard}
197-
cardClassName={classes.cardClassName}
198-
instance={instance}
199-
/>
200-
</Grid>
201-
202-
<Grid item xs={6}>
203-
<WorkflowInputs
204-
className={classes.bottomRowCard}
205-
cardClassName={classes.cardClassName}
206-
value={value}
207-
loading={loading}
208-
responseError={responseError}
209-
/>
210-
</Grid>
211-
212-
<Grid item xs={6}>
213-
<InfoCard
214-
title={t('workflow.progress')}
215-
divider={false}
216-
className={classes.bottomRowCard}
217-
cardClassName={classes.cardClassName}
218-
>
219-
<WorkflowProgress
220-
workflowError={instance.error}
221-
workflowNodes={instance.nodes}
222-
workflowStatus={instance.state}
223-
/>
224-
</InfoCard>
225-
</Grid>
233+
{isFixedHeightMode ? (
234+
<>
235+
<Grid item xs={6}>
236+
{detailsCard}
237+
</Grid>
238+
<Grid item xs={6}>
239+
{resultCard}
240+
</Grid>
241+
<Grid item xs={6}>
242+
{inputsCard}
243+
</Grid>
244+
<Grid item xs={6}>
245+
{progressCard}
246+
</Grid>
247+
</>
248+
) : (
249+
<>
250+
<Grid item xs={6}>
251+
<Grid container spacing={2} direction="column">
252+
<Grid item>{detailsCard}</Grid>
253+
<Grid item>{inputsCard}</Grid>
254+
</Grid>
255+
</Grid>
256+
<Grid item xs={6}>
257+
<Grid container spacing={2} direction="column">
258+
<Grid item>{resultCard}</Grid>
259+
<Grid item>{progressCard}</Grid>
260+
</Grid>
261+
</Grid>
262+
</>
263+
)}
226264
</Grid>
227265
</Content>
228266
);

‎workspaces/orchestrator/plugins/orchestrator/src/hooks/useWorkflowInstanceCardHeightMode.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/*
2+
* Copyright Red Hat, Inc.
3+
*
4+
* Licensed under the Apache License, Version 2.0 (the "License");
5+
* you may not use this file except in compliance with the License.
6+
* You may obtain a copy of the License at
7+
*
8+
* http://www.apache.org/licenses/LICENSE-2.0
9+
*
10+
* Unless required by applicable law or agreed to in writing, software
11+
* distributed under the License is distributed on an "AS IS" BASIS,
12+
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
* See the License for the specific language governing permissions and
14+
* limitations under the License.
15+
*/
16+
import { configApiRef, useApi } from '@backstage/core-plugin-api';
17+
18+
export type WorkflowInstanceCardHeightMode = 'fixed' | 'content';
19+
20+
export function useWorkflowInstanceCardHeightMode(): WorkflowInstanceCardHeightMode {
21+
const config = useApi(configApiRef);
22+
const value = config.getOptionalString(
23+
'orchestrator.workflowInstancePage.cardHeightMode',
24+
);
25+
26+
if (value && value !== 'fixed' && value !== 'content') {
27+
// eslint-disable-next-line no-console
28+
console.warn(`Unknown cardHeightMode "${value}", falling back to "fixed"`);
29+
}
30+
31+
return value === 'content' ? 'content' : 'fixed';
32+
}

0 commit comments

Comments
 (0)
⚡