Feature/display resource yaml for mcp

public/locales/en.json

@@ -264,6 +264,7 @@
     "copy": "Copy"
   },
   "yaml": {
-    "copiedToClipboard": "YAML copied to clipboard!"
+    "copiedToClipboard": "YAML copied to clipboard!",
+    "YAML": "YAML"
   }
 }

src/components/ControlPlane/FluxList.tsx

@@ -1,15 +1,21 @@
 import ConfiguredAnalyticstable from '../Shared/ConfiguredAnalyticsTable.tsx';
 import {
   AnalyticalTableColumnDefinition,
+  FlexBox,
   Title,
 } from '@ui5/webcomponents-react';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import useResource from '../../lib/api/useApiResource';
 import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
-import { FluxKustomization } from '../../lib/api/types/flux/listKustomization';
+import {
+  FluxKustomization,
+  KustomizationsResponse,
+} from '../../lib/api/types/flux/listKustomization';
 import { useTranslation } from 'react-i18next';
 import { timeAgo } from '../../utils/i18n/timeAgo.ts';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell.tsx';
+import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
+import { useMemo } from 'react';
 
 export default function FluxList() {
   const {
@@ -39,8 +45,96 @@ export default function FluxList() {
     created: string;
     isReady: boolean;
     statusUpdateTime?: string;
+    item: unknown;
   };
 
+  const gitReposColumns: AnalyticalTableColumnDefinition[] = useMemo(
+    () => [
+      {
+        Header: t('FluxList.tableNameHeader'),
+        accessor: 'name',
+        minWidth: 250,
+      },
+      {
+        Header: t('FluxList.tableCreatedHeader'),
+        accessor: 'created',
+      },
+      {
+        Header: t('FluxList.tableVersionHeader'),
+        accessor: 'revision',
+      },
+      {
+        Header: t('FluxList.tableStatusHeader'),
+        accessor: 'status',
+        width: 85,
+        hAlign: 'Center',
+        Cell: (cellData: CellData<FluxRow['isReady']>) =>
+          cellData.cell.row.original?.isReady != null ? (
+            <ResourceStatusCell
+              value={cellData.cell.row.original?.isReady}
+              transitionTime={
+                cellData.cell.row.original?.statusUpdateTime
+                  ? cellData.cell.row.original?.statusUpdateTime
+                  : ''
+              }
+            />
+          ) : null,
+      },
+      {
+        Header: t('yaml.YAML'),
+        hAlign: 'Center',
+        width: 85,
+        accessor: 'yaml',
+        Cell: (cellData: CellData<KustomizationsResponse['items']>) => (
+          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+        ),
+      },
+    ],
+    [],
+  );
+
+  const kustomizationsColumns: AnalyticalTableColumnDefinition[] = useMemo(
+    () => [
+      {
+        Header: t('FluxList.tableNameHeader'),
+        accessor: 'name',
+        minWidth: 250,
+      },
+      {
+        Header: t('FluxList.tableCreatedHeader'),
+        accessor: 'created',
+      },
+      {
+        Header: t('FluxList.tableStatusHeader'),
+        accessor: 'status',
+        width: 85,
+        hAlign: 'Center',
+        Cell: (cellData: CellData<FluxRow['isReady']>) =>
+          cellData.cell.row.original?.isReady != null ? (
+            <ResourceStatusCell
+              value={cellData.cell.row.original?.isReady}
+              transitionTime={
+                cellData.cell.row.original?.statusUpdateTime
+                  ? cellData.cell.row.original?.statusUpdateTime
+                  : ''
+              }
+            />
+          ) : null,
+      },
+
+      {
+        Header: t('yaml.YAML'),
+        hAlign: 'Center',
+        width: 85,
+        accessor: 'yaml',
+        Cell: (cellData: CellData<FluxRow>) => (
+          <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+        ),
+      },
+    ],
+    [],
+  );
+
   if (repoErr || kustomizationErr) {
     return (
       <IllustratedError
@@ -50,62 +144,6 @@ export default function FluxList() {
     );
   }
 
-  const gitReposColumns: AnalyticalTableColumnDefinition[] = [
-    {
-      Header: t('FluxList.tableNameHeader'),
-      accessor: 'name',
-    },
-    {
-      Header: t('FluxList.tableStatusHeader'),
-      accessor: 'status',
-      Cell: (cellData: CellData<FluxRow['isReady']>) =>
-        cellData.cell.row.original?.isReady != null ? (
-          <ResourceStatusCell
-            value={cellData.cell.row.original?.isReady}
-            transitionTime={
-              cellData.cell.row.original?.statusUpdateTime
-                ? cellData.cell.row.original?.statusUpdateTime
-                : ''
-            }
-          />
-        ) : null,
-    },
-    {
-      Header: t('FluxList.tableVersionHeader'),
-      accessor: 'revision',
-    },
-    {
-      Header: t('FluxList.tableCreatedHeader'),
-      accessor: 'created',
-    },
-  ];
-
-  const kustomizationsColumns: AnalyticalTableColumnDefinition[] = [
-    {
-      Header: t('FluxList.tableNameHeader'),
-      accessor: 'name',
-    },
-    {
-      Header: t('FluxList.tableStatusHeader'),
-      accessor: 'status',
-      Cell: (cellData: CellData<FluxRow['isReady']>) =>
-        cellData.cell.row.original?.isReady != null ? (
-          <ResourceStatusCell
-            value={cellData.cell.row.original?.isReady}
-            transitionTime={
-              cellData.cell.row.original?.statusUpdateTime
-                ? cellData.cell.row.original?.statusUpdateTime
-                : ''
-            }
-          />
-        ) : null,
-    },
-    {
-      Header: t('FluxList.tableCreatedHeader'),
-      accessor: 'created',
-    },
-  ];
-
   const gitReposRows: FluxRow[] =
     gitReposData?.items?.map((item) => {
       return {
@@ -117,6 +155,7 @@ export default function FluxList() {
           ?.lastTransitionTime,
         revision: shortenCommitHash(item.status.artifact?.revision ?? '-'),
         created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
+        item: item,
       };
     }) ?? [];
 
@@ -130,22 +169,28 @@ export default function FluxList() {
         statusUpdateTime: item.status.conditions.find((x) => x.type === 'Ready')
           ?.lastTransitionTime,
         created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
+        item: item,
       };
     }) ?? [];
 
   return (
     <>
-      {' '}
       <div className="crossplane-table-element">
-        <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
+        <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
+          <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
+          <YamlViewButton resourceObject={gitReposData} />
+        </FlexBox>
         <ConfiguredAnalyticstable
           columns={gitReposColumns}
           isLoading={repoIsLoading}
           data={gitReposRows}
         />
       </div>
       <div className="crossplane-table-element">
-        <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
+        <FlexBox justifyContent={'Start'} alignItems={'Center'} gap={'0.5em'}>
+          <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
+          <YamlViewButton resourceObject={kustmizationData} />
+        </FlexBox>
         <ConfiguredAnalyticstable
           columns={kustomizationsColumns}
           isLoading={kustomizationIsLoading}

src/components/ControlPlane/ManagedResources.tsx

@@ -13,6 +13,8 @@ import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
 import { resourcesInterval } from '../../lib/shared/constants';
 import { ResourceStatusCell } from '../Shared/ResourceStatusCell';
+import { YamlViewButton } from '../Yaml/YamlViewButton.tsx';
+import { useMemo } from 'react';
 
 interface CellData<T> {
   cell: {
@@ -31,6 +33,7 @@ type ResourceRow = {
   syncedTransitionTime: string;
   ready: boolean;
   readyTransitionTime: string;
+  item: unknown;
 };
 
 export function ManagedResources() {
@@ -44,42 +47,59 @@ export function ManagedResources() {
     refreshInterval: resourcesInterval, // Resources are quite expensive to fetch, so we refresh every 30 seconds
   });
 
-  const columns: AnalyticalTableColumnDefinition[] = [
-    {
-      Header: t('ManagedResources.tableHeaderKind'),
-      accessor: 'kind',
-    },
-    {
-      Header: t('ManagedResources.tableHeaderName'),
-      accessor: 'name',
-    },
-    {
-      Header: t('ManagedResources.tableHeaderCreated'),
-      accessor: 'created',
-    },
-    {
-      Header: t('ManagedResources.tableHeaderSynced'),
-      accessor: 'synced',
-      Cell: (cellData: CellData<ResourceRow['synced']>) =>
-        cellData.cell.row.original?.synced != null ? (
-          <ResourceStatusCell
-            value={cellData.cell.row.original?.synced}
-            transitionTime={cellData.cell.row.original?.syncedTransitionTime}
-          />
-        ) : null,
-    },
-    {
-      Header: t('ManagedResources.tableHeaderReady'),
-      accessor: 'ready',
-      Cell: (cellData: CellData<ResourceRow['ready']>) =>
-        cellData.cell.row.original?.ready != null ? (
-          <ResourceStatusCell
-            value={cellData.cell.row.original?.ready}
-            transitionTime={cellData.cell.row.original?.readyTransitionTime}
-          />
-        ) : null,
-    },
-  ];
+  const columns: AnalyticalTableColumnDefinition[] = useMemo(
+    () => [
+      {
+        Header: t('ManagedResources.tableHeaderKind'),
+        accessor: 'kind',
+      },
+      {
+        Header: t('ManagedResources.tableHeaderName'),
+        accessor: 'name',
+      },
+      {
+        Header: t('ManagedResources.tableHeaderCreated'),
+        accessor: 'created',
+      },
+      {
+        Header: t('ManagedResources.tableHeaderSynced'),
+        accessor: 'synced',
+        hAlign: 'Center',
+        width: 85,
+        Cell: (cellData: CellData<ResourceRow['synced']>) =>
+          cellData.cell.row.original?.synced != null ? (
+            <ResourceStatusCell
+              value={cellData.cell.row.original?.synced}
+              transitionTime={cellData.cell.row.original?.syncedTransitionTime}
+            />
+          ) : null,
+      },
+      {
+        Header: t('ManagedResources.tableHeaderReady'),
+        accessor: 'ready',
+        hAlign: 'Center',
+        width: 85,
+        Cell: (cellData: CellData<ResourceRow['ready']>) =>
+          cellData.cell.row.original?.ready != null ? (
+            <ResourceStatusCell
+              value={cellData.cell.row.original?.ready}
+              transitionTime={cellData.cell.row.original?.readyTransitionTime}
+            />
+          ) : null,
+      },
+      {
+        Header: t('yaml.YAML'),
+        hAlign: 'Center',
+        width: 85,
+        accessor: 'yaml',
+        Cell: (cellData: CellData<ResourceRow>) =>
+          !!cellData.cell.row.original?.item ? (
+            <YamlViewButton resourceObject={cellData.cell.row.original?.item} />
+          ) : undefined,
+      },
+    ],
+    [],
+  );
 
   const rows: ResourceRow[] =
     managedResources
@@ -101,6 +121,7 @@ export function ManagedResources() {
             syncedTransitionTime: conditionSynced?.lastTransitionTime ?? '',
             ready: conditionReady?.status === 'True',
             readyTransitionTime: conditionReady?.lastTransitionTime ?? '',
+            item: item,
           };
         }),
       ) ?? [];