flux list display

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -12,7 +12,11 @@
   "FluxList": {
     "tableNameHeader": "Name",
     "tableStatusHeader": "Status",
-    "tableCreatedHeader": "Created"
+    "tableCreatedHeader": "Created",
+    "tableVersionHeader": "Revision",
+    "noFluxError": "Please install flux to view this component",
+    "gitOpsTitle": "GitOps",
+    "kustomizationsTitle": "Kustomizations"
   },
   "ProvidersList": {
     "tableNameHeader": "Name",

src/components/ControlPlane/FluxList.tsx

@@ -3,19 +3,21 @@ import {
   AnalyticalTableColumnDefinition,
   Title,
 } from '@ui5/webcomponents-react';
-import ReactTimeAgo from 'react-time-ago';
 import IllustratedError from '../Shared/IllustratedError.tsx';
 import useResource from '../../lib/api/useApiResource';
-import { FluxGitRepo } from '../../lib/api/types/flux/listGitRepo';
+import { FluxRequest } from '../../lib/api/types/flux/listGitRepo';
 import { FluxKustomization } 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 { shortenCommitHash } from '../../lib/api/types/shared/helpers.ts';
 
 export default function FluxList() {
   const {
-    data: repoData,
+    data: gitReposData,
     error: repoErr,
     isLoading: repoIsLoading,
-  } = useResource(FluxGitRepo); //404 if component not enabled
+  } = useResource(FluxRequest); //404 if component not enabled
   const {
     data: kustmizationData,
     error: kustomizationErr,
@@ -24,43 +26,138 @@ export default function FluxList() {
 
   const { t } = useTranslation();
 
+  interface CellData<T> {
+    cell: {
+      value: T | null; // null for grouping rows
+      row: {
+        original?: FluxRows; // missing for grouping rows
+      };
+    };
+  }
+
+  type FluxRows = {
+    name: string;
+    created: string;
+    status: boolean;
+    statusUptadeTime?: string;
+  };
+
   if (repoErr) {
-    return <IllustratedError error={repoErr} />;
+    return (
+      <IllustratedError error={repoErr} title={t('FluxList.noFluxError')} />
+    );
   }
   if (kustomizationErr) {
-    return <IllustratedError error={kustomizationErr} />;
+    return (
+      <IllustratedError
+        error={kustomizationErr}
+        title={t('FluxList.noFluxError')}
+      />
+    );
   }
 
-  const columns: AnalyticalTableColumnDefinition[] = [
+  const gitReposColumns: AnalyticalTableColumnDefinition[] = [
     {
       Header: t('FluxList.tableNameHeader'),
-      accessor: 'metadata.name',
+      accessor: 'name',
     },
     {
       Header: t('FluxList.tableStatusHeader'),
-      accessor: 'status.usages',
+      accessor: 'status',
+      Cell: (cellData: CellData<FluxRows['status']>) =>
+        cellData.cell.row.original?.status != null ? (
+          <ResourceStatusCell
+            value={cellData.cell.row.original?.status}
+            transitionTime={
+              cellData.cell.row.original?.statusUptadeTime
+                ? cellData.cell.row.original?.statusUptadeTime
+                : ''
+            }
+          />
+        ) : null,
+    },
+    {
+      Header: t('FluxList.tableVersionHeader'),
+      accessor: 'revision',
     },
     {
       Header: t('FluxList.tableCreatedHeader'),
-      accessor: 'metadata.creationTimestamp',
-      Cell: (props: any) => <ReactTimeAgo date={new Date(props.cell.value)} />,
+      accessor: 'created',
     },
   ];
 
+  const kustomizationsColumns: AnalyticalTableColumnDefinition[] = [
+    {
+      Header: t('FluxList.tableNameHeader'),
+      accessor: 'name',
+    },
+    {
+      Header: t('FluxList.tableStatusHeader'),
+      accessor: 'status',
+      Cell: (cellData: CellData<FluxRows['status']>) =>
+        cellData.cell.row.original?.status != null ? (
+          <ResourceStatusCell
+            value={cellData.cell.row.original?.status}
+            transitionTime={
+              cellData.cell.row.original?.statusUptadeTime
+                ? cellData.cell.row.original?.statusUptadeTime
+                : ''
+            }
+          />
+        ) : null,
+    },
+    {
+      Header: t('FluxList.tableCreatedHeader'),
+      accessor: 'created',
+    },
+  ];
+
+  const gitReposRows: FluxRows[] =
+    gitReposData?.items?.map((item) => {
+      return {
+        name: item.metadata.name,
+        status:
+          item.status.conditions.find((x) => x.type === 'Ready')?.status ===
+          'True',
+        statusUptadeTime: item.status.conditions.find((x) => x.type === 'Ready')
+          ?.lastTransitionTime,
+        revision: shortenCommitHash(item.status.artifact.revision),
+        created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
+      };
+    }) ?? [];
+
+  const kustomizationsRows: FluxRows[] =
+    kustmizationData?.items?.map((item) => {
+      return {
+        name: item.metadata.name,
+        status:
+          item.status.conditions.find((x) => x.type === 'Ready')?.status ===
+          'True',
+        statusUptadeTime: item.status.conditions.find((x) => x.type === 'Ready')
+          ?.lastTransitionTime,
+        created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
+      };
+    }) ?? [];
+
   return (
     <>
-      <Title level="H4">Git Repos</Title>
-      <ConfiguredAnalyticstable
-        columns={columns}
-        isLoading={repoIsLoading}
-        data={repoData ?? []}
-      />
-      <Title level="H4">Kustomizations</Title>
-      <ConfiguredAnalyticstable
-        columns={columns}
-        isLoading={kustomizationIsLoading}
-        data={kustmizationData ?? []}
-      />
+      {' '}
+      <div className="crossplane-table-element">
+        <Title level="H4">{t('FluxList.gitOpsTitle')}</Title>
+        <ConfiguredAnalyticstable
+          columns={gitReposColumns}
+          isLoading={repoIsLoading}
+          data={gitReposRows}
+        />
+      </div>
+      <div className="crossplane-table-element">
+        <Title level="H4">{t('FluxList.kustomizationsTitle')}</Title>
+        <ConfiguredAnalyticstable
+          columns={kustomizationsColumns}
+          isLoading={kustomizationIsLoading}
+          data={kustomizationsRows}
+        />
+      </div>
     </>
   );
 }

src/lib/api/types/flux/listGitRepo.ts

@@ -1,6 +1,32 @@
 import { Resource } from '../resource';
 
-export const FluxGitRepo: Resource<any> = {
+export type GitReposResponse = {
+  items: [
+    {
+      spec: {
+        package: string;
+      };
+      kind: string;
+      metadata: {
+        name: string;
+        creationTimestamp: string;
+      };
+      status: {
+        artifact: {
+          revision: string;
+        };
+        conditions: [
+          {
+            status: string;
+            type: string;
+            lastTransitionTime: string;
+          },
+        ];
+      };
+    },
+  ];
+};
+
+export const FluxRequest: Resource<GitReposResponse> = {
   path: '/apis/source.toolkit.fluxcd.io/v1/gitrepositories',
-  jq: '[.items[]]',
 };

src/lib/api/types/flux/listKustomization.ts

@@ -1,6 +1,32 @@
 import { Resource } from '../resource';
 
-export const FluxKustomization: Resource<any> = {
+export type KustomizationsResponse = {
+  items: [
+    {
+      spec: {
+        package: string;
+      };
+      kind: string;
+      metadata: {
+        name: string;
+        creationTimestamp: string;
+      };
+      status: {
+        artifact: {
+          revision: string;
+        };
+        conditions: [
+          {
+            status: string;
+            type: string;
+            lastTransitionTime: string;
+          },
+        ];
+      };
+    },
+  ];
+};
+
+export const FluxKustomization: Resource<KustomizationsResponse> = {
   path: '/apis/kustomize.toolkit.fluxcd.io/v1/kustomizations',
-  jq: '[.items[]]',
 };

src/lib/api/types/shared/helpers.ts

@@ -0,0 +1,9 @@
+export function shortenCommitHash(commitHash: string): string {
+  const match = commitHash.match(/^([a-zA-Z0-9-_]+)@sha1:([a-f0-9]{40})/);
+
+  if (match && match[2]) {
+    return `${match[1]}@${match[2].slice(0, 7)}`;
+  }
+
+  return commitHash;
+}