Skip to content

Commit 2229f9d

Browse files
adityaraj178adityaraj178
authored
feat(ui): Add hydration in status to dashboard application tiles (#24319)
Signed-off-by: Aditya Raj <[email protected]>
1 parent 5a8b427 commit 2229f9d

File tree

6 files changed

+63
-2
lines changed

6 files changed

+63
-2
lines changed

‎pkg/apiclient/application/forwarder_overwrite.go‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ var appFields = map[string]func(app *v1alpha1.Application) any{
2929
"metadata.creationTimestamp": func(app *v1alpha1.Application) any { return app.CreationTimestamp },
3030
"metadata.deletionTimestamp": func(app *v1alpha1.Application) any { return app.DeletionTimestamp },
3131
"spec": func(app *v1alpha1.Application) any { return app.Spec },
32+
"status.sourceHydrator": func(app *v1alpha1.Application) any { return app.Status.SourceHydrator },
3233
"status.sync.status": func(app *v1alpha1.Application) any { return app.Status.Sync.Status },
3334
"status.health": func(app *v1alpha1.Application) any { return app.Status.Health },
3435
"status.summary": func(app *v1alpha1.Application) any { return app.Status.Summary },

‎ui/src/app/applications/components/applications-list/applications-list.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@ const APP_FIELDS = [
3939
'metadata.deletionTimestamp',
4040
'spec',
4141
'operation.sync',
42+
'status.sourceHydrator',
4243
'status.sync.status',
4344
'status.sync.revision',
4445
'status.health',

‎ui/src/app/applications/components/applications-list/applications-summary.tsx‎

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const PieChart = require('react-svg-piechart').default;
44
import {COLORS} from '../../../shared/components';
55
import * as models from '../../../shared/models';
66
import {HealthStatusCode, SyncStatusCode} from '../../../shared/models';
7-
import {ComparisonStatusIcon, HealthStatusIcon} from '../utils';
7+
import {ComparisonStatusIcon, HealthStatusIcon, HydrateOperationPhaseIcon} from '../utils';
88

99
const healthColors = new Map<models.HealthStatusCode, string>();
1010
healthColors.set('Unknown', COLORS.health.unknown);
@@ -19,11 +19,22 @@ syncColors.set('Unknown', COLORS.sync.unknown);
1919
syncColors.set('Synced', COLORS.sync.synced);
2020
syncColors.set('OutOfSync', COLORS.sync.out_of_sync);
2121

22+
const hydratorColors = new Map<string, string>();
23+
hydratorColors.set('Hydrating', COLORS.operation.running);
24+
hydratorColors.set('Hydrated', COLORS.operation.success);
25+
hydratorColors.set('Failed', COLORS.operation.failed);
26+
hydratorColors.set('None', COLORS.sync.unknown);
27+
2228
export const ApplicationsSummary = ({applications}: {applications: models.Application[]}) => {
2329
const sync = new Map<string, number>();
2430
applications.forEach(app => sync.set(app.status.sync.status, (sync.get(app.status.sync.status) || 0) + 1));
2531
const health = new Map<string, number>();
2632
applications.forEach(app => health.set(app.status.health.status, (health.get(app.status.health.status) || 0) + 1));
33+
const hydrator = new Map<string, number>();
34+
applications.forEach(app => {
35+
const phase = app.status.sourceHydrator?.currentOperation?.phase || 'None';
36+
hydrator.set(phase, (hydrator.get(phase) || 0) + 1);
37+
});
2738

2839
const attributes = [
2940
{
@@ -38,6 +49,10 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic
3849
title: 'HEALTHY',
3950
value: applications.filter(app => app.status.health.status === 'Healthy').length
4051
},
52+
{
53+
title: 'HYDRATED',
54+
value: applications.filter(app => app.status.sourceHydrator?.currentOperation?.phase === 'Hydrated').length
55+
},
4156
{
4257
title: 'CLUSTERS',
4358
value: new Set(applications.map(app => app.spec.destination.server || app.spec.destination.name)).size
@@ -58,6 +73,11 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic
5873
title: 'Health',
5974
data: Array.from(health.keys()).map(key => ({title: key, value: health.get(key), color: healthColors.get(key as models.HealthStatusCode)})),
6075
legend: healthColors as Map<string, string>
76+
},
77+
{
78+
title: 'Hydrator',
79+
data: Array.from(hydrator.keys()).map(key => ({title: key, value: hydrator.get(key), color: hydratorColors.get(key)})),
80+
legend: hydratorColors as Map<string, string>
6181
}
6282
];
6383
return (
@@ -97,6 +117,21 @@ export const ApplicationsSummary = ({applications}: {applications: models.Applic
97117
<li style={{listStyle: 'none', whiteSpace: 'nowrap'}} key={key}>
98118
{chart.title === 'Health' && <HealthStatusIcon state={{status: key as HealthStatusCode, message: ''}} noSpin={true} />}
99119
{chart.title === 'Sync' && <ComparisonStatusIcon status={key as SyncStatusCode} noSpin={true} />}
120+
{chart.title === 'Hydrator' && key !== 'None' && (
121+
<HydrateOperationPhaseIcon
122+
operationState={{
123+
phase: key as any,
124+
startedAt: '',
125+
message: '',
126+
drySHA: '',
127+
hydratedSHA: '',
128+
sourceHydrator: {} as any
129+
}}
130+
/>
131+
)}
132+
{chart.title === 'Hydrator' && key === 'None' && (
133+
<i className='fa fa-minus-circle' style={{color: hydratorColors.get(key)}} />
134+
)}
100135
{` ${key} (${getLegendValue(key)})`}
101136
</li>
102137
))}

‎ui/src/app/applications/components/applications-list/applications-table.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,15 @@
2020
}
2121
}
2222

23+
.applications-list__table-row.applications-table-row--with-hydrator {
24+
.columns.small-4,
25+
.columns.small-6 {
26+
display: flex;
27+
flex-direction: column;
28+
justify-content: center;
29+
}
30+
}
31+
2332
.applications-table-source {
2433
display: flex;
2534
justify-content: space-between;

‎ui/src/app/applications/components/applications-list/applications-table.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,9 @@ export const ApplicationsTable = (props: {
5757
key={AppUtils.appInstanceName(app)}
5858
className={`argo-table-list__row
5959
applications-list__entry applications-list__entry--health-${app.status.health.status} ${selectedApp === i ? 'applications-tiles__selected' : ''}`}>
60-
<div className={`row applications-list__table-row`} onClick={e => ctx.navigation.goto(`/${AppUtils.getAppUrl(app)}`, {}, {event: e})}>
60+
<div
61+
className={`row applications-list__table-row ${app.status.sourceHydrator?.currentOperation ? 'applications-table-row--with-hydrator' : ''}`}
62+
onClick={e => ctx.navigation.goto(`/${AppUtils.getAppUrl(app)}`, {}, {event: e})}>
6163
<div className='columns small-4'>
6264
<div className='row'>
6365
<div className=' columns small-2'>
@@ -129,6 +131,12 @@ export const ApplicationsTable = (props: {
129131

130132
<div className='columns small-2'>
131133
<AppUtils.HealthStatusIcon state={app.status.health} /> <span>{app.status.health.status}</span> <br />
134+
{app.status.sourceHydrator?.currentOperation && (
135+
<>
136+
<AppUtils.HydrateOperationPhaseIcon operationState={app.status.sourceHydrator.currentOperation} />{' '}
137+
<span>{app.status.sourceHydrator.currentOperation.phase}</span> <br />
138+
</>
139+
)}
132140
<AppUtils.ComparisonStatusIcon status={app.status.sync.status} />
133141
<span>{app.status.sync.status}</span> <OperationState app={app} quiet={true} />
134142
<DropDownMenu

‎ui/src/app/applications/components/applications-list/applications-tiles.tsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,13 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
202202
<div className='columns small-9' qe-id='applications-tiles-health-status'>
203203
<AppUtils.HealthStatusIcon state={app.status.health} /> {app.status.health.status}
204204
&nbsp;
205+
{app.status.sourceHydrator?.currentOperation && (
206+
<>
207+
<AppUtils.HydrateOperationPhaseIcon operationState={app.status.sourceHydrator.currentOperation} />{' '}
208+
{app.status.sourceHydrator.currentOperation.phase}
209+
&nbsp;
210+
</>
211+
)}
205212
<AppUtils.ComparisonStatusIcon status={app.status.sync.status} /> {app.status.sync.status}
206213
&nbsp;
207214
<OperationState app={app} quiet={true} />

0 commit comments

Comments
 (0)