Skip to content

Commit 6f839e5

Browse files
lucasgorallucasgoral
authored
Feature/display resource yaml for mcp (#105)
1 parent 6cf560c commit 6f839e5

20 files changed

+556
-222
lines changed

‎public/locales/en.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -264,6 +264,7 @@
264264
"copy": "Copy"
265265
},
266266
"yaml": {
267-
"copiedToClipboard": "YAML copied to clipboard!"
267+
"copiedToClipboard": "YAML copied to clipboard!",
268+
"YAML": "YAML"
268269
}
269270
}

‎src/components/ControlPlane/FluxList.tsx‎

Lines changed: 105 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,21 @@
11
import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
22
import {
33
AnalyticalTableColumnDefinition,
4+
FlexBox,
45
Title,
56
} from '@ui5/webcomponents-react';
67
import IllustratedError from '../Shared/IllustratedError.tsx';
78
import useResource from '../../lib/api/useApiResource';
89
import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
9-
import { FluxKustomization } from '../../lib/api/types/flux/listKustomization';
10+
import {
11+
FluxKustomization,
12+
KustomizationsResponse,
13+
} from '../../lib/api/types/flux/listKustomization';
1014
import { useTranslation } from 'react-i18next';
1115
import { timeAgo } from '../../utils/i18n/timeAgo.ts';
1216
import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
17+
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
18+
import { useMemo } from 'react';
1319

1420
export default function FluxList() {
1521
const {
@@ -39,8 +45,96 @@ export default function FluxList() {
3945
created: string;
4046
isReady: boolean;
4147
statusUpdateTime?: string;
48+
item: unknown;
4249
};
4350

51+
const gitReposColumns: AnalyticalTableColumnDefinition[] = useMemo(
52+
() => [
53+
{
54+
Header: t('FluxList.tableNameHeader'),
55+
accessor: 'name',
56+
minWidth: 250,
57+
},
58+
{
59+
Header: t('FluxList.tableCreatedHeader'),
60+
accessor: 'created',
61+
},
62+
{
63+
Header: t('FluxList.tableVersionHeader'),
64+
accessor: 'revision',
65+
},
66+
{
67+
Header: t('FluxList.tableStatusHeader'),
68+
accessor: 'status',
69+
width: 85,
70+
hAlign: 'Center',
71+
Cell: (cellData: CellData<FluxRow['isReady']>) =>
72+
cellData.cell.row.original?.isReady != null ? (
73+
<ResourceStatusCell
74+
value={cellData.cell.row.original?.isReady}
75+
transitionTime={
76+
cellData.cell.row.original?.statusUpdateTime
77+
? cellData.cell.row.original?.statusUpdateTime
78+
: ''
79+
}
80+
/>
81+
) : null,
82+
},
83+
{
84+
Header: t('yaml.YAML'),
85+
hAlign: 'Center',
86+
width: 85,
87+
accessor: 'yaml',
88+
Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
89+
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
90+
),
91+
},
92+
],
93+
[],
94+
);
95+
96+
const kustomizationsColumns: AnalyticalTableColumnDefinition[] = useMemo(
97+
() => [
98+
{
99+
Header: t('FluxList.tableNameHeader'),
100+
accessor: 'name',
101+
minWidth: 250,
102+
},
103+
{
104+
Header: t('FluxList.tableCreatedHeader'),
105+
accessor: 'created',
106+
},
107+
{
108+
Header: t('FluxList.tableStatusHeader'),
109+
accessor: 'status',
110+
width: 85,
111+
hAlign: 'Center',
112+
Cell: (cellData: CellData<FluxRow['isReady']>) =>
113+
cellData.cell.row.original?.isReady != null ? (
114+
<ResourceStatusCell
115+
value={cellData.cell.row.original?.isReady}
116+
transitionTime={
117+
cellData.cell.row.original?.statusUpdateTime
118+
? cellData.cell.row.original?.statusUpdateTime
119+
: ''
120+
}
121+
/>
122+
) : null,
123+
},
124+
125+
{
126+
Header: t('yaml.YAML'),
127+
hAlign: 'Center',
128+
width: 85,
129+
accessor: 'yaml',
130+
Cell: (cellData: CellData<FluxRow>) => (
131+
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
132+
),
133+
},
134+
],
135+
[],
136+
);
137+
44138
if (repoErr || kustomizationErr) {
45139
return (
46140
<IllustratedError
@@ -50,62 +144,6 @@ export default function FluxList() {
50144
);
51145
}
52146

53-
const gitReposColumns: AnalyticalTableColumnDefinition[] = [
54-
{
55-
Header: t('FluxList.tableNameHeader'),
56-
accessor: 'name',
57-
},
58-
{
59-
Header: t('FluxList.tableStatusHeader'),
60-
accessor: 'status',
61-
Cell: (cellData: CellData<FluxRow['isReady']>) =>
62-
cellData.cell.row.original?.isReady != null ? (
63-
<ResourceStatusCell
64-
value={cellData.cell.row.original?.isReady}
65-
transitionTime={
66-
cellData.cell.row.original?.statusUpdateTime
67-
? cellData.cell.row.original?.statusUpdateTime
68-
: ''
69-
}
70-
/>
71-
) : null,
72-
},
73-
{
74-
Header: t('FluxList.tableVersionHeader'),
75-
accessor: 'revision',
76-
},
77-
{
78-
Header: t('FluxList.tableCreatedHeader'),
79-
accessor: 'created',
80-
},
81-
];
82-
83-
const kustomizationsColumns: AnalyticalTableColumnDefinition[] = [
84-
{
85-
Header: t('FluxList.tableNameHeader'),
86-
accessor: 'name',
87-
},
88-
{
89-
Header: t('FluxList.tableStatusHeader'),
90-
accessor: 'status',
91-
Cell: (cellData: CellData<FluxRow['isReady']>) =>
92-
cellData.cell.row.original?.isReady != null ? (
93-
<ResourceStatusCell
94-
value={cellData.cell.row.original?.isReady}
95-
transitionTime={
96-
cellData.cell.row.original?.statusUpdateTime
97-
? cellData.cell.row.original?.statusUpdateTime
98-
: ''
99-
}
100-
/>
101-
) : null,
102-
},
103-
{
104-
Header: t('FluxList.tableCreatedHeader'),
105-
accessor: 'created',
106-
},
107-
];
108-
109147
const gitReposRows: FluxRow[] =
110148
gitReposData?.items?.map((item) => {
111149
return {
@@ -117,6 +155,7 @@ export default function FluxList() {
117155
?.lastTransitionTime,
118156
revision: shortenCommitHash(item.status.artifact?.revision ?? '-'),
119157
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
158+
item: item,
120159
};
121160
}) ?? [];
122161

@@ -130,22 +169,28 @@ export default function FluxList() {
130169
statusUpdateTime: item.status.conditions.find((x) => x.type === 'Ready')
131170
?.lastTransitionTime,
132171
created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
172+
item: item,
133173
};
134174
}) ?? [];
135175

136176
return (
137177
<>
138-
{' '}
139178
<div className="crossplane-table-element">
140-
<Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
179+
<FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
180+
<Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
181+
<YamlViewButton resourceObject={gitReposData} />
182+
</FlexBox>
141183
<ConfiguredAnalyticstable
142184
columns={gitReposColumns}
143185
isLoading={repoIsLoading}
144186
data={gitReposRows}
145187
/>
146188
</div>
147189
<div className="crossplane-table-element">
148-
<Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
190+
<FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
191+
<Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
192+
<YamlViewButton resourceObject={kustmizationData} />
193+
</FlexBox>
149194
<ConfiguredAnalyticstable
150195
columns={kustomizationsColumns}
151196
isLoading={kustomizationIsLoading}

‎src/components/ControlPlane/ManagedResources.tsx‎

Lines changed: 57 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import '@ui5/webcomponents-icons/dist/sys-enter-2';
1313
import '@ui5/webcomponents-icons/dist/sys-cancel-2';
1414
import { resourcesInterval } from '../../lib/shared/constants';
1515
import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
16+
import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
17+
import { useMemo } from 'react';
1618

1719
interface CellData<T> {
1820
cell: {
@@ -31,6 +33,7 @@ type ResourceRow = {
3133
syncedTransitionTime: string;
3234
ready: boolean;
3335
readyTransitionTime: string;
36+
item: unknown;
3437
};
3538

3639
export function ManagedResources() {
@@ -44,42 +47,59 @@ export function ManagedResources() {
4447
refreshInterval: resourcesInterval, // Resources are quite expensive to fetch, so we refresh every 30 seconds
4548
});
4649

47-
const columns: AnalyticalTableColumnDefinition[] = [
48-
{
49-
Header: t('ManagedResources.tableHeaderKind'),
50-
accessor: 'kind',
51-
},
52-
{
53-
Header: t('ManagedResources.tableHeaderName'),
54-
accessor: 'name',
55-
},
56-
{
57-
Header: t('ManagedResources.tableHeaderCreated'),
58-
accessor: 'created',
59-
},
60-
{
61-
Header: t('ManagedResources.tableHeaderSynced'),
62-
accessor: 'synced',
63-
Cell: (cellData: CellData<ResourceRow['synced']>) =>
64-
cellData.cell.row.original?.synced != null ? (
65-
<ResourceStatusCell
66-
value={cellData.cell.row.original?.synced}
67-
transitionTime={cellData.cell.row.original?.syncedTransitionTime}
68-
/>
69-
) : null,
70-
},
71-
{
72-
Header: t('ManagedResources.tableHeaderReady'),
73-
accessor: 'ready',
74-
Cell: (cellData: CellData<ResourceRow['ready']>) =>
75-
cellData.cell.row.original?.ready != null ? (
76-
<ResourceStatusCell
77-
value={cellData.cell.row.original?.ready}
78-
transitionTime={cellData.cell.row.original?.readyTransitionTime}
79-
/>
80-
) : null,
81-
},
82-
];
50+
const columns: AnalyticalTableColumnDefinition[] = useMemo(
51+
() => [
52+
{
53+
Header: t('ManagedResources.tableHeaderKind'),
54+
accessor: 'kind',
55+
},
56+
{
57+
Header: t('ManagedResources.tableHeaderName'),
58+
accessor: 'name',
59+
},
60+
{
61+
Header: t('ManagedResources.tableHeaderCreated'),
62+
accessor: 'created',
63+
},
64+
{
65+
Header: t('ManagedResources.tableHeaderSynced'),
66+
accessor: 'synced',
67+
hAlign: 'Center',
68+
width: 85,
69+
Cell: (cellData: CellData<ResourceRow['synced']>) =>
70+
cellData.cell.row.original?.synced != null ? (
71+
<ResourceStatusCell
72+
value={cellData.cell.row.original?.synced}
73+
transitionTime={cellData.cell.row.original?.syncedTransitionTime}
74+
/>
75+
) : null,
76+
},
77+
{
78+
Header: t('ManagedResources.tableHeaderReady'),
79+
accessor: 'ready',
80+
hAlign: 'Center',
81+
width: 85,
82+
Cell: (cellData: CellData<ResourceRow['ready']>) =>
83+
cellData.cell.row.original?.ready != null ? (
84+
<ResourceStatusCell
85+
value={cellData.cell.row.original?.ready}
86+
transitionTime={cellData.cell.row.original?.readyTransitionTime}
87+
/>
88+
) : null,
89+
},
90+
{
91+
Header: t('yaml.YAML'),
92+
hAlign: 'Center',
93+
width: 85,
94+
accessor: 'yaml',
95+
Cell: (cellData: CellData<ResourceRow>) =>
96+
!!cellData.cell.row.original?.item ? (
97+
<YamlViewButton resourceObject={cellData.cell.row.original?.item} />
98+
) : undefined,
99+
},
100+
],
101+
[],
102+
);
83103

84104
const rows: ResourceRow[] =
85105
managedResources
@@ -101,6 +121,7 @@ export function ManagedResources() {
101121
syncedTransitionTime: conditionSynced?.lastTransitionTime ?? '',
102122
ready: conditionReady?.status === 'True',
103123
readyTransitionTime: conditionReady?.lastTransitionTime ?? '',
124+
item: item,
104125
};
105126
}),
106127
) ?? [];

0 commit comments

Comments
 (0)