Skip to content

Commit 5b5283e

Browse files
keithchongkeithchong
committed
Add Labels column to App, AppSet, ImageUpdater list pages (#10541)
Signed-off-by: Keith Chong <kykchong@redhat.com>
1 parent 89bc2b8 commit 5b5283e

6 files changed

Lines changed: 122 additions & 16 deletions

File tree

‎src/gitops/components/imageupdater/ImageUpdaterList.tsx‎

Lines changed: 38 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useLocation } from 'react-router-dom-v5-compat';
44
import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
5+
import * as YamlFormatter from 'yaml';
56

67
import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
78
import { modelToGroupVersionKind } from '@gitops/utils/utils';
@@ -34,6 +35,7 @@ import {
3435
useShowOperandsInAllNamespaces,
3536
} from '../shared/AllNamespaces';
3637
import { GitOpsDataViewTable, useGitOpsDataViewSort } from '../shared/DataView';
38+
import MetadataLabels from '../shared/MetadataLabels';
3739

3840
import { useImageUpdaterActionsProvider } from './hooks/useImageUpdaterActionsProvider';
3941

@@ -71,6 +73,7 @@ const ImageUpdaterList: React.FC<ImageUpdaterListTabProps> = ({
7173
'images',
7274
'last-checked',
7375
'ready',
76+
'labels',
7477
'actions',
7578
].map((key) => ({ key }));
7679
}, [showNamespaceColumn]);
@@ -251,6 +254,10 @@ export const sortData = (
251254
aValue = a.status?.conditions?.find((c) => c.type === 'Ready')?.status || '';
252255
bValue = b.status?.conditions?.find((c) => c.type === 'Ready')?.status || '';
253256
break;
257+
case 'labels':
258+
aValue = YamlFormatter.stringify(a.metadata?.labels || {});
259+
bValue = YamlFormatter.stringify(b.metadata?.labels || {});
260+
break;
254261
default:
255262
return 0;
256263
}
@@ -277,7 +284,7 @@ export const useColumnsDV = (
277284
cell: t('Name'),
278285
props: {
279286
'aria-label': 'name',
280-
className: 'pf-m-width-20',
287+
className: 'pf-m-width-30',
281288
sort: getSortParams(0),
282289
style: { minWidth: '200px' },
283290
},
@@ -299,23 +306,23 @@ export const useColumnsDV = (
299306
cell: t('Apps'),
300307
props: {
301308
'aria-label': 'apps',
302-
className: 'pf-m-width-10',
309+
className: 'pf-m-width-20',
303310
sort: getSortParams(1 + i),
304311
},
305312
},
306313
{
307314
cell: t('Images'),
308315
props: {
309316
'aria-label': 'images',
310-
className: 'pf-m-width-10',
317+
className: 'pf-m-width-20',
311318
sort: getSortParams(2 + i),
312319
},
313320
},
314321
{
315322
cell: t('Last Checked'),
316323
props: {
317324
'aria-label': 'last checked',
318-
className: 'pf-m-width-15',
325+
className: 'pf-m-width-20',
319326
sort: getSortParams(3 + i),
320327
},
321328
},
@@ -327,6 +334,14 @@ export const useColumnsDV = (
327334
sort: getSortParams(4 + i),
328335
},
329336
},
337+
{
338+
cell: t('Labels'),
339+
props: {
340+
'aria-label': 'labels',
341+
className: 'pf-m-width-10',
342+
sort: getSortParams(5 + i),
343+
},
344+
},
330345
{
331346
cell: '',
332347
props: { 'aria-label': 'actions' },
@@ -400,6 +415,25 @@ export const useImageUpdaterRowsDV = (
400415
cell: readyCondition ? String(isReady) : '-',
401416
dataLabel: 'Ready',
402417
},
418+
{
419+
id: 'labels',
420+
dataLabel: 'Labels',
421+
cell: (
422+
<div>
423+
<MetadataLabels
424+
kind={
425+
ImageUpdaterModel.apiGroup +
426+
'~' +
427+
ImageUpdaterModel.apiVersion +
428+
'~' +
429+
ImageUpdaterModel.kind
430+
}
431+
labels={obj?.metadata?.labels}
432+
numLabels={3}
433+
/>
434+
</div>
435+
),
436+
},
403437
{
404438
id: 'actions-' + index,
405439
cell: <ImageUpdaterActionsCell imageUpdater={obj} index={index} />,

‎src/gitops/components/project/ProjectList.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import { useLocation } from 'react-router-dom-v5-compat';
44
import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
5+
import * as YamlFormatter from 'yaml';
56

67
import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
78
import { modelToGroupVersionKind, modelToRef } from '@gitops/utils/utils';
@@ -360,8 +361,8 @@ export const sortData = (
360361
bValue = getApplicationsCount(b, applications, appsLoaded);
361362
break;
362363
case 'labels':
363-
aValue = a.metadata?.labels || {};
364-
bValue = b.metadata?.labels || {};
364+
aValue = YamlFormatter.stringify(a.metadata?.labels || {});
365+
bValue = YamlFormatter.stringify(b.metadata?.labels || {});
365366
break;
366367
case 'last-updated':
367368
aValue = getLastUpdateTimestamp(a) || '';
@@ -422,10 +423,7 @@ export const useColumnsDV = (
422423
},
423424
{
424425
cell: t('Labels'),
425-
props: {
426-
'aria-label': 'labels',
427-
className: 'pf-m-width-20',
428-
},
426+
props: sortableHeaderProps('labels', 'pf-m-width-20', getSortParams(3 + i)),
429427
},
430428
{
431429
cell: t('Last Updated'),

‎src/gitops/components/rollout/RolloutList.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { Link } from 'react-router-dom-v5-compat';
33
import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
4+
import * as YamlFormatter from 'yaml';
45

56
import { AppProjectKind } from '@gitops/models/AppProjectModel';
67
import ActionsDropdown from '@gitops/utils/components/ActionDropDown/ActionDropDown';
@@ -250,8 +251,8 @@ export const sortData = (
250251
bValue = b.status?.readyReplicas || '';
251252
break;
252253
case 'labels':
253-
aValue = a.metadata?.labels || '';
254-
bValue = b.metadata?.labels || '';
254+
aValue = YamlFormatter.stringify(a.metadata?.labels || {});
255+
bValue = YamlFormatter.stringify(b.metadata?.labels || {});
255256
break;
256257
case 'selector':
257258
aValue = a.status?.selector || '';
@@ -323,6 +324,7 @@ export const useColumnsDV = (
323324
props: {
324325
'aria-label': 'labels',
325326
className: 'pf-m-width-15',
327+
sort: getSortParams(3 + i),
326328
},
327329
},
328330
{
@@ -415,6 +417,7 @@ export const useRolloutsRowsDV = (
415417
},
416418
{
417419
id: 'labels',
420+
dataLabel: 'Labels',
418421
cell: (
419422
<div>
420423
<MetadataLabels

‎src/gitops/components/shared/ApplicationList.tsx‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
4+
import * as YamlFormatter from 'yaml';
45

56
import { ApplicationSetKind } from '@gitops/models/ApplicationSetModel';
67
import {
@@ -44,6 +45,7 @@ import {
4445
} from './AllNamespaces';
4546
import ApplicationSetApplicationsView from './ApplicationSetApplicationsView';
4647
import { GitOpsDataViewTable, useGitOpsDataViewSort } from './DataView';
48+
import MetadataLabels from './MetadataLabels';
4749

4850
interface ApplicationProps {
4951
namespace: string;
@@ -106,6 +108,7 @@ const ApplicationList: React.FC<ApplicationProps> = ({
106108
'sync-status',
107109
'health-status',
108110
'revision',
111+
'labels',
109112
'project',
110113
'actions',
111114
].map((key) => ({ key })),
@@ -317,6 +320,10 @@ export const sortData = (
317320
aValue = a.status?.sync?.revision || '';
318321
bValue = b.status?.sync?.revision || '';
319322
break;
323+
case 'labels':
324+
aValue = YamlFormatter.stringify(a.metadata?.labels || {});
325+
bValue = YamlFormatter.stringify(b.metadata?.labels || {});
326+
break;
320327
case 'project':
321328
aValue = a.spec?.project || '';
322329
bValue = b.spec?.project || '';
@@ -431,6 +438,25 @@ const useApplicationRowsDV = (applicationsList, namespace): DataViewTr[] => {
431438
</>
432439
),
433440
},
441+
{
442+
id: 'labels',
443+
dataLabel: 'Labels',
444+
cell: (
445+
<div>
446+
<MetadataLabels
447+
kind={
448+
ApplicationModel.apiGroup +
449+
'~' +
450+
ApplicationModel.apiVersion +
451+
'~' +
452+
ApplicationModel.kind
453+
}
454+
labels={app?.metadata?.labels}
455+
numLabels={3}
456+
/>
457+
</div>
458+
),
459+
},
434460
{
435461
id: app.spec?.project,
436462
cell: app.spec?.project && (
@@ -506,12 +532,20 @@ const useColumnsDV = (
506532
sort: getSortParams(3 + i),
507533
},
508534
},
535+
{
536+
cell: t('Labels'),
537+
props: {
538+
'aria-label': 'labels',
539+
className: 'pf-m-width-20',
540+
sort: getSortParams(4 + i),
541+
},
542+
},
509543
{
510544
cell: t('App Project'),
511545
props: {
512546
'aria-label': 'project',
513547
className: 'pf-m-width-20',
514-
sort: getSortParams(4 + i),
548+
sort: getSortParams(5 + i),
515549
},
516550
},
517551
{

‎src/gitops/components/shared/ApplicationSetList.tsx‎

Lines changed: 35 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import * as React from 'react';
22
import { useTranslation } from 'react-i18next';
33
import TechPreviewBadge from 'src/plugin/import/badges/TechPreviewBadge';
4+
import * as YamlFormatter from 'yaml';
45

56
import {
67
K8sResourceCommon,
@@ -38,6 +39,7 @@ import {
3839
useShowOperandsInAllNamespaces,
3940
} from './AllNamespaces';
4041
import { GitOpsDataViewTable, useGitOpsDataViewSort } from './DataView';
42+
import MetadataLabels from './MetadataLabels';
4143

4244
const formatCreationTimestamp = (timestamp: string): string => {
4345
if (!timestamp) return '-';
@@ -147,6 +149,7 @@ const ApplicationSetList: React.FC<ApplicationSetProps> = ({
147149
'status',
148150
'generated-apps',
149151
'generators',
152+
'labels',
150153
'created-at',
151154
'actions',
152155
].map((key) => ({ key })),
@@ -362,6 +365,25 @@ const useApplicationSetRowsDV = (
362365
id: 'generators-' + index,
363366
cell: <div>{getAppSetGeneratorCount(appSet).toString()}</div>,
364367
},
368+
{
369+
id: 'labels',
370+
dataLabel: 'Labels',
371+
cell: (
372+
<div>
373+
<MetadataLabels
374+
kind={
375+
ApplicationSetModel.apiGroup +
376+
'~' +
377+
ApplicationSetModel.apiVersion +
378+
'~' +
379+
ApplicationSetModel.kind
380+
}
381+
labels={appSet?.metadata?.labels}
382+
numLabels={3}
383+
/>
384+
</div>
385+
),
386+
},
365387
{
366388
id: 'created-at-' + index,
367389
cell: <div>{formatCreationTimestamp(appSet.metadata.creationTimestamp)}</div>,
@@ -427,12 +449,20 @@ const useColumnsDV = (
427449
sort: getSortParams(3 + i),
428450
},
429451
},
452+
{
453+
cell: t('Labels'),
454+
props: {
455+
'aria-label': 'labels',
456+
className: 'pf-m-width-20',
457+
sort: getSortParams(4 + i),
458+
},
459+
},
430460
{
431461
cell: t('Created At'),
432462
props: {
433463
'aria-label': 'created at',
434464
className: 'pf-m-width-15',
435-
sort: getSortParams(4 + i),
465+
sort: getSortParams(5 + i),
436466
},
437467
},
438468
{
@@ -492,11 +522,14 @@ export const sortData = (
492522
aValue = getGeneratedAppsCount(a, applications, appsLoaded);
493523
bValue = getGeneratedAppsCount(b, applications, appsLoaded);
494524
break;
495-
496525
case 'generators':
497526
aValue = getAppSetGeneratorCount(a);
498527
bValue = getAppSetGeneratorCount(b);
499528
break;
529+
case 'labels':
530+
aValue = YamlFormatter.stringify(a.metadata?.labels || {});
531+
bValue = YamlFormatter.stringify(b.metadata?.labels || {});
532+
break;
500533
case 'created-at':
501534
aValue = new Date(a.metadata?.creationTimestamp || 0).getTime();
502535
bValue = new Date(b.metadata?.creationTimestamp || 0).getTime();

‎src/gitops/components/shared/MetadataLabels/MetadataLabels.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,11 @@ type MetadataLabelsProps = {
4141
export const MetadataLabels: React.FC<MetadataLabelsProps> = ({ kind, labels, numLabels = 10 }) => {
4242
const { t } = useGitOpsTranslation();
4343
return labels && Object.keys(labels).length > 0 ? (
44-
<LabelGroup numLabels={numLabels} className="co-label-group metadata-labels-group">
44+
<LabelGroup
45+
numLabels={numLabels}
46+
className="co-label-group metadata-labels-group"
47+
style={{ maxWidth: '200px' }}
48+
>
4549
{Object.keys(labels || {})?.map((key) => {
4650
return (
4751
<LabelL key={key} kind={kind} name={key} value={labels[key]} expand={true}>

0 commit comments

Comments
 (0)