Skip to content

Commit 269af6b

Browse files
keithchongkeithchong
committed
Fix one-column layout in Sync Status Tab
Signed-off-by: Keith Chong <kykchong@redhat.com>
1 parent 4c465b0 commit 269af6b

File tree

1 file changed

+139
-130
lines changed

1 file changed

+139
-130
lines changed

‎src/gitops/components/application/ApplicationSyncStatusTab.tsx‎

Lines changed: 139 additions & 130 deletions
Original file line numberDiff line numberDiff line change
@@ -133,140 +133,149 @@ const ApplicationSyncStatusTab: React.FC<ApplicationSyncStatusTabProps> = ({ obj
133133
<Title headingLevel="h2" className="co-section-heading">
134134
{t('Sync status')}
135135
</Title>
136-
<div className="row">
137-
<div className="col-sm-6">
138-
<DescriptionList className="pf-c-description-list">
139-
<DetailsDescriptionGroup
140-
title={t('Operation')}
141-
help={t('The operation that was performed.')}
142-
>
143-
<Flex>
144-
{obj?.status?.operationState && (
145-
<FlexItem>
146-
<OperationState app={obj} />
147-
</FlexItem>
148-
)}
149-
{obj?.status?.conditions && (
150-
<FlexItem>
151-
<ConditionsPopover conditions={obj.status.conditions} />
152-
</FlexItem>
153-
)}
154-
{!obj?.status?.operationState && !obj?.status?.conditions && '-'}
155-
</Flex>
156-
</DetailsDescriptionGroup>
157-
<DescriptionListGroup className="pf-c-description-list__group">
158-
<DescriptionListTermHelpText className="pf-c-description-list__term">
159-
<Popover
160-
headerContent={<div>{t('Phase')}</div>}
161-
bodyContent={<div>{t('The operation phase.')}</div>}
162-
>
163-
<DescriptionListTermHelpTextButton>
164-
{t('Phase')}
165-
</DescriptionListTermHelpTextButton>
166-
</Popover>
167-
</DescriptionListTermHelpText>
168-
<DescriptionListDescription>
169-
{obj.status?.operationState?.phase ? obj.status?.operationState?.phase : '-'}
170-
</DescriptionListDescription>
171-
</DescriptionListGroup>
136+
<Flex
137+
justifyContent={{ default: 'justifyContentSpaceEvenly' }}
138+
direction={{ default: 'column', lg: 'row' }}
139+
>
140+
<Flex flex={{ default: 'flex_2' }}>
141+
<FlexItem>
142+
<DescriptionList className="pf-c-description-list">
143+
<DetailsDescriptionGroup
144+
title={t('Operation')}
145+
help={t('The operation that was performed.')}
146+
>
147+
<Flex>
148+
{obj?.status?.operationState && (
149+
<FlexItem>
150+
<OperationState app={obj} />
151+
</FlexItem>
152+
)}
153+
{obj?.status?.conditions && (
154+
<FlexItem>
155+
<ConditionsPopover conditions={obj.status.conditions} />
156+
</FlexItem>
157+
)}
158+
{!obj?.status?.operationState && !obj?.status?.conditions && '-'}
159+
</Flex>
160+
</DetailsDescriptionGroup>
161+
<DescriptionListGroup className="pf-c-description-list__group">
162+
<DescriptionListTermHelpText className="pf-c-description-list__term">
163+
<Popover
164+
headerContent={<div>{t('Phase')}</div>}
165+
bodyContent={<div>{t('The operation phase.')}</div>}
166+
>
167+
<DescriptionListTermHelpTextButton>
168+
{t('Phase')}
169+
</DescriptionListTermHelpTextButton>
170+
</Popover>
171+
</DescriptionListTermHelpText>
172+
<DescriptionListDescription>
173+
{obj.status?.operationState?.phase ? obj.status?.operationState?.phase : '-'}
174+
</DescriptionListDescription>
175+
</DescriptionListGroup>
172176

173-
<DescriptionListGroup className="pf-c-description-list__group">
174-
<DescriptionListTermHelpText className="pf-c-description-list__term">
175-
<Popover
176-
headerContent={<div>{t('Message')}</div>}
177-
bodyContent={<div>{t('The message from the operation.')}</div>}
178-
>
179-
<DescriptionListTermHelpTextButton>
180-
{t('Message')}
181-
</DescriptionListTermHelpTextButton>
182-
</Popover>
183-
</DescriptionListTermHelpText>
184-
<DescriptionListDescription>
185-
{obj.status?.operationState?.message ? obj.status?.operationState?.message : '-'}
186-
</DescriptionListDescription>
187-
</DescriptionListGroup>
177+
<DescriptionListGroup className="pf-c-description-list__group">
178+
<DescriptionListTermHelpText className="pf-c-description-list__term">
179+
<Popover
180+
headerContent={<div>{t('Message')}</div>}
181+
bodyContent={<div>{t('The message from the operation.')}</div>}
182+
>
183+
<DescriptionListTermHelpTextButton>
184+
{t('Message')}
185+
</DescriptionListTermHelpTextButton>
186+
</Popover>
187+
</DescriptionListTermHelpText>
188+
<DescriptionListDescription>
189+
{obj.status?.operationState?.message
190+
? obj.status?.operationState?.message
191+
: '-'}
192+
</DescriptionListDescription>
193+
</DescriptionListGroup>
188194

189-
<DescriptionListGroup className="pf-c-description-list__group">
190-
<DescriptionListTermHelpText className="pf-c-description-list__term">
191-
<Popover
192-
headerContent={<div>{t('Initiated By')}</div>}
193-
bodyContent={<div>{t('Who initiated the operation.')}</div>}
194-
>
195-
<DescriptionListTermHelpTextButton>
196-
{t('Intiated By')}
197-
</DescriptionListTermHelpTextButton>
198-
</Popover>
199-
</DescriptionListTermHelpText>
200-
<DescriptionListDescription>
201-
{obj.status?.operationState?.operation?.initiatedBy?.automated
202-
? t('automated sync policy')
203-
: obj.status?.operationState?.operation?.initiatedBy?.username || '-'}
204-
</DescriptionListDescription>
205-
</DescriptionListGroup>
206-
</DescriptionList>
207-
</div>
208-
<div className="col-sm-6">
209-
<DescriptionList className="pf-c-description-list">
210-
<DescriptionListGroup className="pf-c-description-list__group">
211-
<DescriptionListTermHelpText className="pf-c-description-list__term">
212-
<Popover
213-
headerContent={<div>{t('Started At')}</div>}
214-
bodyContent={<div>{t('When the operation was started.')}</div>}
215-
>
216-
<DescriptionListTermHelpTextButton>
217-
{t('Started At')}
218-
</DescriptionListTermHelpTextButton>
219-
</Popover>
220-
</DescriptionListTermHelpText>
221-
<DescriptionListDescription>
222-
<Timestamp timestamp={obj.status?.operationState?.startedAt} />
223-
</DescriptionListDescription>
224-
</DescriptionListGroup>
195+
<DescriptionListGroup className="pf-c-description-list__group">
196+
<DescriptionListTermHelpText className="pf-c-description-list__term">
197+
<Popover
198+
headerContent={<div>{t('Initiated By')}</div>}
199+
bodyContent={<div>{t('Who initiated the operation.')}</div>}
200+
>
201+
<DescriptionListTermHelpTextButton>
202+
{t('Intiated By')}
203+
</DescriptionListTermHelpTextButton>
204+
</Popover>
205+
</DescriptionListTermHelpText>
206+
<DescriptionListDescription>
207+
{obj.status?.operationState?.operation?.initiatedBy?.automated
208+
? t('automated sync policy')
209+
: obj.status?.operationState?.operation?.initiatedBy?.username || '-'}
210+
</DescriptionListDescription>
211+
</DescriptionListGroup>
212+
</DescriptionList>
213+
</FlexItem>
214+
</Flex>
215+
<Flex flex={{ default: 'flex_2' }} direction={{ default: 'column' }}>
216+
<FlexItem>
217+
<DescriptionList className="pf-c-description-list">
218+
<DescriptionListGroup className="pf-c-description-list__group">
219+
<DescriptionListTermHelpText className="pf-c-description-list__term">
220+
<Popover
221+
headerContent={<div>{t('Started At')}</div>}
222+
bodyContent={<div>{t('When the operation was started.')}</div>}
223+
>
224+
<DescriptionListTermHelpTextButton>
225+
{t('Started At')}
226+
</DescriptionListTermHelpTextButton>
227+
</Popover>
228+
</DescriptionListTermHelpText>
229+
<DescriptionListDescription>
230+
<Timestamp timestamp={obj.status?.operationState?.startedAt} />
231+
</DescriptionListDescription>
232+
</DescriptionListGroup>
225233

226-
<DescriptionListGroup className="pf-c-description-list__group">
227-
<DescriptionListTermHelpText className="pf-c-description-list__term">
228-
<Popover
229-
headerContent={<div>{t('Duration')}</div>}
230-
bodyContent={<div>{t('How long the operation took to complete.')}</div>}
231-
>
232-
<DescriptionListTermHelpTextButton>
233-
{t('Duration')}
234-
</DescriptionListTermHelpTextButton>
235-
</Popover>
236-
</DescriptionListTermHelpText>
237-
<DescriptionListDescription>
238-
{obj.status?.operationState?.finishedAt ? (
239-
<span>
240-
{getDuration(
241-
obj.status.operationState.startedAt,
242-
obj.status.operationState.finishedAt,
243-
) / 1000}{' '}
244-
seconds
245-
</span>
246-
) : (
247-
'-'
248-
)}
249-
</DescriptionListDescription>
250-
</DescriptionListGroup>
234+
<DescriptionListGroup className="pf-c-description-list__group">
235+
<DescriptionListTermHelpText className="pf-c-description-list__term">
236+
<Popover
237+
headerContent={<div>{t('Duration')}</div>}
238+
bodyContent={<div>{t('How long the operation took to complete.')}</div>}
239+
>
240+
<DescriptionListTermHelpTextButton>
241+
{t('Duration')}
242+
</DescriptionListTermHelpTextButton>
243+
</Popover>
244+
</DescriptionListTermHelpText>
245+
<DescriptionListDescription>
246+
{obj.status?.operationState?.finishedAt ? (
247+
<span>
248+
{getDuration(
249+
obj.status.operationState.startedAt,
250+
obj.status.operationState.finishedAt,
251+
) / 1000}{' '}
252+
seconds
253+
</span>
254+
) : (
255+
'-'
256+
)}
257+
</DescriptionListDescription>
258+
</DescriptionListGroup>
251259

252-
<DescriptionListGroup className="pf-c-description-list__group">
253-
<DescriptionListTermHelpText className="pf-c-description-list__term">
254-
<Popover
255-
headerContent={<div>{t('Finished At')}</div>}
256-
bodyContent={<div>{t('When the operation was finished.')}</div>}
257-
>
258-
<DescriptionListTermHelpTextButton>
259-
{t('Finished At')}
260-
</DescriptionListTermHelpTextButton>
261-
</Popover>
262-
</DescriptionListTermHelpText>
263-
<DescriptionListDescription>
264-
<Timestamp timestamp={obj.status?.operationState?.finishedAt} />
265-
</DescriptionListDescription>
266-
</DescriptionListGroup>
267-
</DescriptionList>
268-
</div>
269-
</div>
260+
<DescriptionListGroup className="pf-c-description-list__group">
261+
<DescriptionListTermHelpText className="pf-c-description-list__term">
262+
<Popover
263+
headerContent={<div>{t('Finished At')}</div>}
264+
bodyContent={<div>{t('When the operation was finished.')}</div>}
265+
>
266+
<DescriptionListTermHelpTextButton>
267+
{t('Finished At')}
268+
</DescriptionListTermHelpTextButton>
269+
</Popover>
270+
</DescriptionListTermHelpText>
271+
<DescriptionListDescription>
272+
<Timestamp timestamp={obj.status?.operationState?.finishedAt} />
273+
</DescriptionListDescription>
274+
</DescriptionListGroup>
275+
</DescriptionList>
276+
</FlexItem>
277+
</Flex>
278+
</Flex>
270279
</PageSection>
271280
<PageSection variant={PageSectionVariants.default}>
272281
<Title headingLevel="h2" className="co-section-heading">

0 commit comments

Comments
 (0)