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>