Add Managed Resources (#2)

Author: andreaskienle

public/locales/en.json

@@ -19,6 +19,14 @@
     "tableStatusHeader": "Status",
     "tableCreatedHeader": "Created"
   },
+  "ManagedResources": {
+    "headerManagedResources": "Resources",
+    "tableHeaderKind": "Kind",
+    "tableHeaderName": "Name",
+    "tableHeaderCreated": "Created",
+    "tableHeaderSynced": "Synced",
+    "tableHeaderReady": "Ready"
+  },
   "ControlPlaneListToolbar": {
     "buttonText": "Workspace"
   },

src/components/ControlPlane/ManagedResources.tsx

@@ -0,0 +1,126 @@
+import { useTranslation } from 'react-i18next';
+import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, Icon, Title } from '@ui5/webcomponents-react';
+import useResource from '../../lib/api/useApiResource';
+import { ManagedResourcesRequest } from '../../lib/api/types/crossplane/listManagedResources';
+import { timeAgo } from '../../utils/i18n/timeAgo';
+import IllustratedError from '../Shared/IllustratedError';
+import '@ui5/webcomponents-icons/dist/sys-enter-2';
+import '@ui5/webcomponents-icons/dist/sys-cancel-2';
+
+interface CellData<T> {
+  cell: {
+    value: T | null; // null for grouping rows
+    row: {
+      original?: ResourceRow; // missing for grouping rows
+    }
+  };
+}
+
+type ResourceRow = {
+  kind: string
+  name: string
+  created: string;
+  synced: boolean;
+  syncedTransitionTime: string;
+  ready: boolean;
+  readyTransitionTime: string;
+}
+
+export function ManagedResources() {
+  const { t } = useTranslation();
+
+  let {data: managedResources, error, isLoading} = useResource(ManagedResourcesRequest, {
+    refreshInterval: 30000  // 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 rows: ResourceRow[] = managedResources?.flatMap((managedResource) =>
+    managedResource.items?.map((item) => {
+      const conditionSynced = item.status.conditions?.find((condition) => condition.type === 'Synced');
+      const conditionReady = item.status.conditions?.find((condition) => condition.type === 'Ready');
+
+      return {
+        kind: item.kind,
+        name: item.metadata.name,
+        created: timeAgo.format(new Date(item.metadata.creationTimestamp)),
+        synced: conditionSynced?.status === "True",
+        syncedTransitionTime: conditionSynced?.lastTransitionTime ?? "",
+        ready: conditionReady?.status === "True",
+        readyTransitionTime: conditionReady?.lastTransitionTime ?? "",
+      }
+    })
+  ) ?? [];
+
+
+  return (
+    <>
+      <Title level='H4'>{t('ManagedResources.headerManagedResources')}</Title>
+
+      {error && <IllustratedError error={error}/>}
+
+      {!error &&
+        <AnalyticalTable
+          columns={columns}
+          data={rows}
+          minRows={1}
+          groupBy={['kind']}
+          scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
+          loading={isLoading}
+          filterable
+          // Prevent the table from resetting when the data changes
+          retainColumnWidth
+          reactTableOptions={{
+            autoResetHiddenColumns: false,
+            autoResetPage: false,
+            autoResetExpanded: false,
+            autoResetGroupBy: false,
+            autoResetSelectedRows: false,
+            autoResetSortBy: false,
+            autoResetFilters: false,
+            autoResetRowState: false,
+            autoResetResize: false
+          }}
+        />
+      }
+    </>
+  )
+}
+
+
+interface ResourceStatusCellProps {
+  value: boolean;
+  transitionTime: string;
+}
+
+function ResourceStatusCell({ value, transitionTime }: ResourceStatusCellProps) {
+  return <Icon
+    design={value ? 'Positive' : 'Negative'}
+    name={value ? 'sys-enter-2' : 'sys-cancel-2'}
+    showTooltip={true}
+    accessibleName={timeAgo.format(new Date(transitionTime))}
+  />
+}

src/components/ControlPlane/ProvidersList.tsx

@@ -5,6 +5,7 @@ import IllustratedError from "../Shared/IllustratedError.tsx";
 import useResource from "../../lib/api/useApiResource";
 import { ListProviders } from "../../lib/api/types/crossplane/listProviders";
 import { useTranslation } from 'react-i18next';
+import { ManagedResources } from './ManagedResources';
 
 export default function ProvidersList() {
   const { data, error, isLoading } = useResource(ListProviders);
@@ -45,11 +46,8 @@ export default function ProvidersList() {
         columns={columns}
         data={[]}
       />
-      <Title level="H4">Resources</Title>
-      <ConfiguredAnalyticstable
-        columns={columns}
-        data={[]}
-      />
+
+      <ManagedResources />
     </>
   );
 }

src/lib/api/types/crossplane/listManagedResources.ts

@@ -0,0 +1,22 @@
+import { Resource } from "../resource";
+
+export type ManagedResourcesResponse = [{
+  items: [{
+    kind: string;
+    metadata: {
+      name: string;
+      creationTimestamp: string;
+    };
+    status: {
+      conditions: [{
+        type: "Ready" | "Synced" | unknown;
+        status: "True" | "False";
+        lastTransitionTime: string;
+      }]
+    };
+  }];
+}];
+
+export const ManagedResourcesRequest: Resource<ManagedResourcesResponse> = {
+  path: "/managed",
+};

src/main.tsx

@@ -5,23 +5,21 @@ import App from "./App";
 import { ThemeProvider } from "@ui5/webcomponents-react";
 import { AuthProvider } from "react-oidc-context";
 import { LoadCrateKubeConfig } from "./lib/oidc/crate.ts";
-import TimeAgo from "javascript-time-ago";
-import en from "javascript-time-ago/locale/en";
 import { SWRConfig } from "swr";
 import { ToastProvider } from "./context/ToastContext.tsx";
 import { CopyButtonProvider } from './context/CopyButtonContext.tsx';
 import { FrontendConfigProvider, LoadFrontendConfig } from "./context/FrontendConfigContext.tsx";
 import '@ui5/webcomponents-react/dist/Assets'; //used for loading themes
 import { DarkModeSystemSwitcher } from "./components/Core/DarkModeSystemSwitcher.tsx";
 import ".././i18n";
+import "./utils/i18n/timeAgo";
 import { useTranslation } from "react-i18next";
 
 (async () => {
   try {
     const frontendConfig = await LoadFrontendConfig();
     const authconfig = await LoadCrateKubeConfig(frontendConfig.backendUrl);
 
-    TimeAgo.addDefaultLocale(en);
     ReactDOM.createRoot(document.getElementById("root")!).render(
       <React.StrictMode>
         <FrontendConfigProvider config={frontendConfig}>

src/utils/i18n/timeAgo.ts

@@ -0,0 +1,5 @@
+import en from 'javascript-time-ago/locale/en';
+import TimeAgo from 'javascript-time-ago';
+
+TimeAgo.addDefaultLocale(en);
+export const timeAgo = new TimeAgo('en-US');