fix(ingress): handle system resources [EE-4775] (#9972)

* fix(ingress): handle system resources [EE-4775]

app/react/kubernetes/ingresses/IngressDatatable/IngressDatatable.tsx

@@ -1,16 +1,20 @@
 import { Plus, Trash2 } from 'lucide-react';
 import { useRouter } from '@uirouter/react';
+import { useMemo } from 'react';
 
 import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
 import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
 import { useAuthorizations, Authorized } from '@/react/hooks/useUser';
 import Route from '@/assets/ico/route.svg?c';
+import { DefaultDatatableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
 
 import { confirmDelete } from '@@/modals/confirm';
-import { Datatable } from '@@/datatables';
+import { Datatable, TableSettingsMenu } from '@@/datatables';
 import { Button } from '@@/buttons';
 import { Link } from '@@/Link';
-import { createPersistedStore } from '@@/datatables/types';
 import { useTableState } from '@@/datatables/useTableState';
 
 import { DeleteIngressesRequest, Ingress } from '../types';
@@ -26,26 +30,42 @@ interface SelectedIngress {
 }
 const storageKey = 'ingressClassesNameSpace';
 
-const settingsStore = createPersistedStore(storageKey);
+const settingsStore = createStore(storageKey);
 
 export function IngressDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
   const environmentId = useEnvironmentId();
 
+  const canAccessSystemResources = useAuthorizations(
+    'K8sAccessSystemNamespaces'
+  );
   const { data: namespaces, ...namespacesQuery } = useNamespaces(environmentId);
-  const ingressesQuery = useIngresses(
+  const { data: ingresses, ...ingressesQuery } = useIngresses(
     environmentId,
-    Object.keys(namespaces || {})
+    Object.keys(namespaces || {}),
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+
+  const filteredIngresses = useMemo(
+    () =>
+      ingresses?.filter(
+        (ingress) =>
+          (canAccessSystemResources && tableState.showSystemResources) ||
+          !isSystemNamespace(ingress.Namespace ?? '')
+      ) || [],
+    [ingresses, tableState, canAccessSystemResources]
   );
 
   const deleteIngressesMutation = useDeleteIngresses();
-  const tableState = useTableState(settingsStore, storageKey);
 
   const router = useRouter();
 
   return (
     <Datatable
       settingsManager={tableState}
-      dataset={ingressesQuery.data || []}
+      dataset={filteredIngresses}
       columns={columns}
       isLoading={ingressesQuery.isLoading || namespacesQuery.isLoading}
       emptyContentLabel="No supported ingresses found"
@@ -53,6 +73,21 @@ export function IngressDatatable() {
       titleIcon={Route}
       getRowId={(row) => row.Name + row.Type + row.Namespace}
       renderTableActions={tableActions}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings
+            settings={tableState}
+            hideShowSystemResources={!canAccessSystemResources}
+          />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={
+            tableState.showSystemResources || !canAccessSystemResources
+          }
+        />
+      }
       disableSelect={useCheckboxes()}
     />
   );
@@ -62,7 +97,6 @@ export function IngressDatatable() {
       <div className="ingressDatatable-actions">
         <Authorized authorizations="AzureContainerGroupDelete">
           <Button
-            className="btn-wrapper"
             color="dangerlight"
             disabled={selectedFlatRows.length === 0}
             onClick={() => handleRemoveClick(selectedFlatRows)}
@@ -77,11 +111,7 @@ export function IngressDatatable() {
             to="kubernetes.ingresses.create"
             className="space-left no-decoration"
           >
-            <Button
-              icon={Plus}
-              className="btn-wrapper vertical-center"
-              color="secondary"
-            >
+            <Button icon={Plus} color="secondary">
               Add with form
             </Button>
           </Link>
@@ -92,9 +122,7 @@ export function IngressDatatable() {
             className="space-left no-decoration"
             params={{ referrer: 'kubernetes.ingresses' }}
           >
-            <Button icon={Plus} className="btn-wrapper">
-              Create from manifest
-            </Button>
+            <Button icon={Plus}>Create from manifest</Button>
           </Link>
         </Authorized>
       </div>

app/react/kubernetes/ingresses/IngressDatatable/columns/className.tsx

@@ -3,4 +3,5 @@ import { columnHelper } from './helper';
 export const className = columnHelper.accessor('ClassName', {
   header: 'Class Name',
   id: 'className',
+  cell: ({ row }) => row.original.ClassName || '-',
 });

app/react/kubernetes/ingresses/IngressDatatable/columns/ingressRules.tsx

@@ -32,7 +32,7 @@ function Cell({ row }: CellContext<Ingress, string>) {
   }
 
   return (
-    <div className="flex flex-col gap-y-0.5">
+    <div className="flex flex-col gap-y-0.5 whitespace-nowrap">
       {paths.map((path) => (
         <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
           <span className="flex flex-nowrap items-center gap-1 px-2">

app/react/kubernetes/ingresses/IngressDatatable/columns/name.tsx

@@ -1,8 +1,10 @@
 import { CellContext } from '@tanstack/react-table';
 
 import { Authorized } from '@/react/hooks/useUser';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
 
 import { Link } from '@@/Link';
+import { Badge } from '@@/Badge';
 
 import { Ingress } from '../../types';
 
@@ -16,20 +18,29 @@ export const name = columnHelper.accessor('Name', {
 
 function Cell({ row, getValue }: CellContext<Ingress, string>) {
   const name = getValue();
+  const namespace = row.original.Namespace;
+  const isSystemIngress = isSystemNamespace(namespace);
 
   return (
-    <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
-      <Link
-        to="kubernetes.ingresses.edit"
-        params={{
-          uid: row.original.UID,
-          namespace: row.original.Namespace,
-          name,
-        }}
-        title={name}
-      >
-        {name}
-      </Link>
-    </Authorized>
+    <div className="flex whitespace-nowrap">
+      <Authorized authorizations="K8sIngressesW" childrenUnauthorized={name}>
+        <Link
+          to="kubernetes.ingresses.edit"
+          params={{
+            uid: row.original.UID,
+            namespace,
+            name,
+          }}
+          title={name}
+        >
+          {name}
+        </Link>
+      </Authorized>
+      {isSystemIngress && (
+        <Badge type="success" className="ml-2">
+          system
+        </Badge>
+      )}
+    </div>
   );
 }

app/react/kubernetes/ingresses/IngressDatatable/columns/type.tsx

@@ -3,4 +3,5 @@ import { columnHelper } from './helper';
 export const type = columnHelper.accessor('Type', {
   header: 'Type',
   id: 'type',
+  cell: ({ row }) => row.original.Type || '-',
 });