frontend: Add /crs page to display a list of all instantiated custom resources.

frontend/src/components/App/icons.ts

@@ -311,6 +311,9 @@ const mdiIcons = {
     'expand-all': {
       body: '<path fill="currentColor" d="M18 8H8v10H6V8a2 2 0 0 1 2-2h10zm-4-6H4a2 2 0 0 0-2 2v10h2V4h10zm8 10v8a2 2 0 0 1-2 2h-8a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2m-2 3h-3v-3h-2v3h-3v2h3v3h2v-3h3z"/>',
     },
+    puzzle: {
+      body: '<path fill="currentColor" d="M20.5 11H19V7a2 2 0 0 0-2-2h-4V3.5A2.5 2.5 0 0 0 10.5 1A2.5 2.5 0 0 0 8 3.5V5H4a2 2 0 0 0-2 2v3.8h1.5c1.5 0 2.7 1.2 2.7 2.7S5 16.2 3.5 16.2H2V20a2 2 0 0 0 2 2h3.8v-1.5c0-1.5 1.2-2.7 2.7-2.7s2.7 1.2 2.7 2.7V22H17a2 2 0 0 0 2-2v-4h1.5a2.5 2.5 0 0 0 2.5-2.5a2.5 2.5 0 0 0-2.5-2.5" />',
+    },
   },
   aliases: {
     'more-vert': {

frontend/src/components/Sidebar/prepareRoutes.ts

@@ -68,10 +68,6 @@ function prepareRoutes(
           name: 'nodes',
           label: t('glossary|Nodes'),
         },
-        {
-          name: 'crds',
-          label: t('glossary|Custom Resources'),
-        },
       ],
     },
     {
@@ -234,6 +230,17 @@ function prepareRoutes(
         },
       ],
     },
+    {
+      name: 'crds',
+      label: t('glossary|Custom Resources'),
+      icon: 'mdi:puzzle',
+      subList: [
+        {
+          name: 'crs',
+          label: t('translation|Instances'),
+        },
+      ],
+    },
   ];
 
   const sidebars: { [key: string]: SidebarItemProps[] } = {

frontend/src/components/crd/CustomResourceInstancesList.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import CRD, { KubeCRD } from '../../lib/k8s/crd';
+import { Link, Loader, SectionBox } from '../common/';
+import Empty from '../common/EmptyContent';
+import { ResourceListView } from '../common/Resource';
+
+interface State {
+  crList: KubeCRD[];
+  loading: boolean;
+  crDictionary: Map<string, KubeCRD>;
+}
+
+export function CrInstanceList() {
+  const { t } = useTranslation(['glossary', 'translation']);
+  const [crds, crdsError] = CRD.useList();
+  const [state, setState] = useState<State>({
+    crList: [],
+    loading: true,
+    crDictionary: new Map<string, KubeCRD>(),
+  });
+
+  useEffect(() => {
+    const fetchCRs = async () => {
+      const allCrs: KubeCRD[] = [];
+      const newCrDictionary = new Map<string, KubeCRD>();
+
+      for (const crd of crds) {
+        const crClass = crd.makeCRClass();
+        const [crItems, crError] = await new Promise<[KubeCRD[] | null, any | null]>(resolve => {
+          crClass.apiList(
+            (items: KubeCRD[]) => resolve([items, null]),
+            (err: any) => resolve([null, err])
+          )();
+        });
+
+        if (crError) {
+          console.error('Error fetching CRs:', crError);
+          continue;
+        }
+
+        if (crItems && crItems.length > 0) {
+          allCrs.push(...crItems);
+          for (const item of crItems) {
+            newCrDictionary.set(item.metadata.name, crd);
+          }
+        }
+      }
+
+      setState({
+        crList: allCrs,
+        loading: false,
+        crDictionary: newCrDictionary,
+      });
+    };
+
+    if (crds) {
+      fetchCRs();
+    }
+  }, [crds]);
+
+  if (crdsError) {
+    return (
+      <Empty color="error">
+        {t('translation|Error getting custom resource definitions: {{ errorMessage }}', {
+          errorMessage: crdsError,
+        })}
+      </Empty>
+    );
+  }
+
+  if (state.loading) {
+    return <Loader title={t('translation|Loading custom resource instances')} />;
+  }
+
+  if (state.crList.length === 0) {
+    return <Empty>{t('translation|No custom resources found.')}</Empty>;
+  }
+
+  return (
+    <SectionBox backLink>
+      <ResourceListView
+        title="Custom Resource Instances"
+        headerProps={{
+          noNamespaceFilter: false,
+        }}
+        data={state.crList}
+        columns={[
+          {
+            label: 'Instance name',
+            getValue: cr => {
+              return cr.metadata.name;
+            },
+            render: cr => {
+              return (
+                <Link
+                  routeName="customresource"
+                  params={{
+                    crName: cr.metadata.name,
+                    crd: `${state.crDictionary.get(cr.metadata.name)?.metadata.name}`,
+                    namespace: cr.metadata.namespace || '-',
+                  }}
+                >
+                  {cr.metadata.name} {/*crd.metadata.name*/}
+                </Link>
+              );
+            },
+          },
+          {
+            label: 'CRD',
+            getValue: cr => {
+              return cr.kind;
+            },
+            render: cr => {
+              return (
+                <Link
+                  routeName="crd"
+                  params={{
+                    name: `${state.crDictionary.get(cr.metadata.name)?.metadata.name}`,
+                  }}
+                >
+                  {cr.kind} {/*crd.metadata.name*/}
+                </Link>
+              );
+            },
+          },
+          {
+            label: 'Categories',
+            getValue: cr => {
+              const categories = state.crDictionary.get(cr.metadata.name)?.jsonData!.status
+                .acceptedNames.categories;
+              return categories !== undefined ? categories.toString().split(',').join(', ') : '';
+            },
+          },
+          'namespace',
+
+          'age',
+        ]}
+      />
+    </SectionBox>
+  );
+}

frontend/src/lib/router.tsx

@@ -15,6 +15,7 @@ import { PageGrid } from '../components/common/Resource/Resource';
 import ConfigDetails from '../components/configmap/Details';
 import ConfigMapList from '../components/configmap/List';
 import CustomResourceDetails from '../components/crd/CustomResourceDetails';
+import { CrInstanceList } from '../components/crd/CustomResourceInstancesList';
 import CustomResourceList from '../components/crd/CustomResourceList';
 import CustomResourceDefinitionDetails from '../components/crd/Details';
 import CustomResourceDefinitionList from '../components/crd/List';
@@ -652,6 +653,13 @@ const defaultRoutes: {
     sidebar: 'crds',
     component: () => <CustomResourceList />,
   },
+  crs: {
+    path: '/crs',
+    exact: true,
+    name: 'CRInstances',
+    sidebar: 'crs',
+    component: () => <CrInstanceList />,
+  },
   notifications: {
     path: '/notifications',
     exact: true,