Configs table

providers config table

Author: Hubert-Szczepanski-SAP

public/locales/en.json

@@ -27,6 +27,13 @@
     "tableHeaderSynced": "Synced",
     "tableHeaderReady": "Ready"
   },
+  "ProvidersConfig": {
+    "headerProviderConfigs": "Provider Configs",
+    "tableHeaderProvider": "Provider",
+    "tableHeaderName": "Name",
+    "tableHeaderCreated": "Created",
+    "tableHeaderUsage": "Usage"
+  },
   "ControlPlaneListToolbar": {
     "buttonText": "Workspace"
   },
@@ -150,9 +157,6 @@
     "tableHeaderInstalled": "Installed",
     "tableHeaderHealthy": "Healthy"
   },
-  "ProvidersConfig": {
-    "header": "Provider Configs"
-  },
   "validationErrors": {
     "required": "This field is required!",
     "properFormatting": "Use A-Z, a-z, 0-9, hyphen (-), and period (.), but note that whitespace (spaces, tabs, etc.) is not allowed for proper compatibility.",

src/components/ControlPlane/ProvidersConfig.tsx

@@ -3,23 +3,69 @@ import { useTranslation } from 'react-i18next';
 import { AnalyticalTable, AnalyticalTableColumnDefinition, AnalyticalTableScaleWidthMode, Title } from '@ui5/webcomponents-react';
 import '@ui5/webcomponents-icons/dist/sys-enter-2';
 import '@ui5/webcomponents-icons/dist/sys-cancel-2';
+import { useProvidersConfigResource } from '../../lib/api/useApiResource';
+import { timeAgo } from '../../utils/i18n/timeAgo';
+
+type Rows = {
+  parent: string;
+  name: string;
+  usage: string;
+  created: string;
+};
 
-//empty table TBD
 export function ProvidersConfig() {
   const { t } = useTranslation();
+  const rows: Rows[] = [];
+
+  const {
+    data: providerConfigsList,
+    isLoading
+  } = useProvidersConfigResource({
+    refreshInterval: 60000, // Resources are quite expensive to fetch, so we refresh every 60 seconds
+  });
 
-  const columns: AnalyticalTableColumnDefinition[] = [];
+    if (providerConfigsList) {
+      providerConfigsList.forEach(provider => {
+        provider.items.forEach(config => {
+          rows.push({
+            parent: provider.provider,
+            name: config.metadata.name,
+            usage: config.metadata.usage ? config.metadata.usage : "0",
+            created: timeAgo.format(new Date(config.metadata.creationTimestamp)),
+          })
+        });
+      })
+    }
+  
+  const columns: AnalyticalTableColumnDefinition[] = [
+      {
+        Header: t('ProvidersConfig.tableHeaderProvider'),
+        accessor: 'parent',
+      },
+      {
+        Header: t('ProvidersConfig.tableHeaderName'),
+        accessor: 'name',
+      },
+      {
+        Header: t('ProvidersConfig.tableHeaderUsage'),
+        accessor: 'usage',
+      },
+      {
+        Header: t('ProvidersConfig.tableHeaderCreated'),
+        accessor: 'created',
+      }
+    ];
 
   return (
     <>
-      <Title level='H4'>{t('ProvidersConfig.header')}</Title>
+      <Title level='H4'>{t('ProvidersConfig.headerProviderConfigs')}</Title>
         <AnalyticalTable
           columns={columns}
-          data={[]}
+          data={rows ?? []}
           minRows={1}
-          groupBy={['name']}
+          groupBy={['parent']}
           scaleWidthMode={AnalyticalTableScaleWidthMode.Smart}
-          loading={false}
+          loading={isLoading}
           filterable
           // Prevent the table from resetting when the data changes
           retainColumnWidth

src/components/ControlPlane/ProvidersList.tsx

@@ -94,6 +94,10 @@
   background-color: #FFC933;
 }
 
+.crossplane-table-element {
+  margin-bottom: 25px;
+}
+
 .cp-panel-gitops {
   background-color: #D1EFFF;
 }

src/index.css

@@ -0,0 +1,32 @@
+import { Resource } from '../resource';
+
+export type CRDResponse = 
+  {
+    items: [{
+      metadata: {
+        name: string;
+        creationTimestamp: string;
+      };
+      status: {
+        conditions: [{
+          type: "Ready" | "Synced" | unknown;
+          status: "True" | "False";
+          lastTransitionTime: string;
+        }]
+      };
+      spec: {
+        names: {
+          kind: string;
+        },
+        versions: [{
+          name: string;
+        }],
+        group: string;
+      }
+    }];
+  }
+;
+
+export const CRDRequest: Resource<CRDResponse> = {
+  path: '/apis/apiextensions.k8s.io/v1/customresourcedefinitions',
+};

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

@@ -1,4 +1,4 @@
-import { useContext } from 'react';
+import { useContext, useEffect, useState } from 'react';
 import useSWR, { SWRConfiguration, useSWRConfig } from 'swr';
 import { fetchApiServerJson } from './fetch';
 import { ApiConfigContext } from '../../components/Shared/k8s';
@@ -7,6 +7,8 @@ import { ApiConfig } from './types/apiConfig';
 import { Resource } from './types/resource';
 import useSWRMutation, { SWRMutationConfiguration } from 'swr/mutation';
 import { MutatorOptions } from 'swr/_internal';
+import { CRDRequest, CRDResponse } from './types/crossplane/CRDList';
+import { ProviderConfigs, ProviderConfigsData, ProviderConfigsDataForRequest } from '../shared/types';
 
 export { useApiResource as default };
 
@@ -39,6 +41,119 @@ export const useApiResource = <T>(
   };
 };
 
+export const useProvidersConfigResource = (
+  config?: SWRConfiguration,
+) => {
+  const apiConfig = useContext(ApiConfigContext);
+  const { data, error, isValidating } = useSWR(
+    CRDRequest.path === null
+      ? null //TODO: is null a valid key?
+      : [CRDRequest.path, apiConfig],
+    ([path, apiConfig]) =>
+      fetchApiServerJson<CRDResponse>(
+        path,
+        apiConfig,
+        CRDRequest.jq,
+        CRDRequest.method,
+        CRDRequest.body,
+      ),
+    config,
+  );
+
+  let providerConfigsDataForRequest: ProviderConfigsDataForRequest[] = [];
+
+  const crdWithProviderConfig = data?.items.filter(x => x.spec.names.kind === "ProviderConfig");
+
+  const providerConfigsData: ProviderConfigsData[] = crdWithProviderConfig?.map((item) => {
+      return {
+        provider: item.metadata.name,
+        name: item.spec.group,
+        versions: item.spec.versions,
+      }
+    }) ?? [];
+
+  if (providerConfigsData.length > 0) {
+    providerConfigsData.forEach(item => {
+      item.versions.forEach(version => {
+        providerConfigsDataForRequest.push({
+          provider: item.provider,
+          url: item.name,
+          version: version.name
+        })
+      })
+    });
+  }
+
+    providerConfigsDataForRequest.forEach(async item => {
+      const data =
+          await fetchApiServerJson<ProviderConfigs>(
+            `/apis/${item.url ?? ""}/${item.version}/providerconfigs`,
+            apiConfig,
+            CRDRequest.jq,
+            CRDRequest.method,
+            CRDRequest.body,
+          )
+      if (data) {
+        providerConfigs.push(data);
+      }
+    })
+    
+    const providerConfigs: ProviderConfigs[] = [];
+
+    const fetchProviderConfigs = async () => {
+      try {
+        // Create an array of promises for each fetch call
+        const fetchPromises = providerConfigsDataForRequest.map(async (item) => {
+          const data = await fetchApiServerJson<ProviderConfigs>(
+            `/apis/${item.url ?? ""}/${item.version}/providerconfigs`,
+            apiConfig,
+            CRDRequest.jq,
+            CRDRequest.method,
+            CRDRequest.body
+          );
+          data.provider = item.provider
+          return data; // Return fetched data
+        });
+    
+        // Wait for all fetch operations to complete
+        const providerConfigs = await Promise.all(fetchPromises);
+    
+        // Filter out any null/undefined values and return the valid data
+        return providerConfigs.filter(config => config !== null);
+      } catch (error) {
+        console.error('Error fetching provider configs:', error);
+        return []; // Return an empty array in case of error
+      }
+    };
+    const [configs, setConfigs] = useState<ProviderConfigs[]>([]); 
+    const [isLoading, setIsLoading] = useState(true);
+
+    useEffect(() => {
+      const fetchDataAndUpdateState = async () => {
+        setIsLoading(true); 
+        try {
+          const finalData = await fetchProviderConfigs();
+
+          setConfigs(finalData);
+          if (finalData.length > 0) {
+            setIsLoading(false); 
+          }
+        } catch (err) {
+          setIsLoading(false); 
+        }
+      };
+  
+      fetchDataAndUpdateState(); 
+    }, [data]); 
+
+  return {
+    data: configs,
+    error: error as APIError,
+    isLoading: isLoading,
+    isValidating: isValidating,
+  };
+}
+
 export const useApiResourceMutation = <T>(
   resource: Resource<T>,
   config?: SWRMutationConfiguration<T, any, any, any>,

src/lib/api/useApiResource.ts

@@ -0,0 +1,31 @@
+export type ProviderConfigsData = {
+    provider: string,
+    name: string,
+    versions: [{
+      name: string
+    }]
+  }
+  
+export type ProviderConfigsDataForRequest = {
+    provider: string,
+    url: string,
+    version: string
+  }
+
+export type ProviderConfigs = {
+    provider: string,
+    items: [
+      {
+        kind: string;
+        metadata: {
+          provider: string;
+          name: string;
+          usage: string;
+          creationTimestamp: string;
+        };
+        status: {
+          count: string;
+        };
+      },
+    ];
+  }

src/lib/shared/types.ts

@@ -17,13 +17,15 @@ import {
   McpContextProvider,
   WithinManagedControlPlane,
 } from '../../lib/shared/McpContext.tsx';
-import ProvidersList from '../../components/ControlPlane/ProvidersList.tsx';
 import FluxList from '../../components/ControlPlane/FluxList.tsx';
 import { ControlPlane as ControlPlaneResource } from '../../lib/api/types/crate/controlPlanes.ts';
 import useResource from '../../lib/api/useApiResource.ts';
 import MCPHealthPopoverButton from '../../components/ControlPlane/MCPHealthPopoverButton.tsx';
 import ComponentList from '../../components/ControlPlane/ComponentList.tsx';
 import { useTranslation } from 'react-i18next';
+import { ManagedResources } from '../../components/ControlPlane/ManagedResources.tsx';
+import { Providers } from '../../components/ControlPlane/Providers.tsx';
+import { ProvidersConfig } from '../../components/ControlPlane/ProvidersConfig.tsx';
 
 export default function ControlPlaneView() {
   const { projectName, workspaceName, controlPlaneName, contextName } =
@@ -122,7 +124,9 @@ export default function ControlPlaneView() {
               }
               noAnimation
             >
-              <ProvidersList />
+              <div className='crossplane-table-element'><Providers /></div>
+              <div className='crossplane-table-element'><ProvidersConfig /></div>
+              <div className='crossplane-table-element'><ManagedResources /></div>
             </Panel>
           </ObjectPageSection>
           <ObjectPageSection