refactor(kubernetes): move react codebase [EE-3349] (#7953)

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

@@ -0,0 +1,134 @@
+import { Plus, Trash2 } from 'react-feather';
+import { useRouter } from '@uirouter/react';
+
+import { useEnvironmentId } from '@/portainer/hooks/useEnvironmentId';
+import { useNamespaces } from '@/react/kubernetes/namespaces/queries';
+import { useAuthorizations, Authorized } from '@/portainer/hooks/useUser';
+import { confirmDeletionAsync } from '@/portainer/services/modal.service/confirm';
+
+import { Datatable } from '@@/datatables';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+
+import { DeleteIngressesRequest, Ingress } from '../types';
+import { useDeleteIngresses, useIngresses } from '../queries';
+
+import { createStore } from './datatable-store';
+import { useColumns } from './columns';
+
+import '../style.css';
+
+interface SelectedIngress {
+  Namespace: string;
+  Name: string;
+}
+
+const useStore = createStore('ingresses');
+
+export function IngressDataTable() {
+  const environmentId = useEnvironmentId();
+
+  const nsResult = useNamespaces(environmentId);
+  const ingressesQuery = useIngresses(
+    environmentId,
+    Object.keys(nsResult?.data || {})
+  );
+
+  const settings = useStore();
+
+  const columns = useColumns();
+  const deleteIngressesMutation = useDeleteIngresses();
+
+  const router = useRouter();
+
+  return (
+    <Datatable
+      dataset={ingressesQuery.data || []}
+      storageKey="ingressClassesNameSpace"
+      columns={columns}
+      settingsStore={settings}
+      isLoading={ingressesQuery.isLoading}
+      emptyContentLabel="No supported ingresses found"
+      titleOptions={{
+        icon: 'svg-route',
+        title: 'Ingresses',
+      }}
+      getRowId={(row) => row.Name + row.Type + row.Namespace}
+      renderTableActions={tableActions}
+      disableSelect={useCheckboxes()}
+    />
+  );
+
+  function tableActions(selectedFlatRows: Ingress[]) {
+    return (
+      <div className="ingressDatatable-actions">
+        <Authorized authorizations="AzureContainerGroupDelete">
+          <Button
+            className="btn-wrapper"
+            color="dangerlight"
+            disabled={selectedFlatRows.length === 0}
+            onClick={() =>
+              handleRemoveClick(
+                selectedFlatRows.map((row) => ({
+                  Name: row.Name,
+                  Namespace: row.Namespace,
+                }))
+              )
+            }
+            icon={Trash2}
+          >
+            Remove
+          </Button>
+        </Authorized>
+
+        <Authorized authorizations="K8sIngressesW">
+          <Link to="kubernetes.ingresses.create" className="space-left">
+            <Button
+              icon={Plus}
+              className="btn-wrapper vertical-center"
+              color="secondary"
+            >
+              Add with form
+            </Button>
+          </Link>
+        </Authorized>
+        <Authorized authorizations="K8sIngressesW">
+          <Link to="kubernetes.deploy" className="space-left">
+            <Button icon={Plus} className="btn-wrapper">
+              Create from manifest
+            </Button>
+          </Link>
+        </Authorized>
+      </div>
+    );
+  }
+
+  function useCheckboxes() {
+    return !useAuthorizations(['K8sIngressesW']);
+  }
+
+  async function handleRemoveClick(ingresses: SelectedIngress[]) {
+    const confirmed = await confirmDeletionAsync(
+      'Are you sure you want to delete the selected ingresses?'
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: DeleteIngressesRequest = {} as DeleteIngressesRequest;
+    ingresses.forEach((ingress) => {
+      payload[ingress.Namespace] = payload[ingress.Namespace] || [];
+      payload[ingress.Namespace].push(ingress.Name);
+    });
+
+    deleteIngressesMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          router.stateService.reload();
+        },
+      }
+    );
+    return ingresses;
+  }
+}

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

@@ -0,0 +1,11 @@
+import { Column } from 'react-table';
+
+import { Ingress } from '../../types';
+
+export const className: Column<Ingress> = {
+  Header: 'Class Name',
+  accessor: 'ClassName',
+  id: 'className',
+  disableFilters: true,
+  canHide: true,
+};

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

@@ -0,0 +1,11 @@
+import { useMemo } from 'react';
+
+import { name } from './name';
+import { type } from './type';
+import { namespace } from './namespace';
+import { className } from './className';
+import { ingressRules } from './ingressRules';
+
+export function useColumns() {
+  return useMemo(() => [name, namespace, className, type, ingressRules], []);
+}

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

@@ -0,0 +1,55 @@
+import { CellProps, Column } from 'react-table';
+
+import { Icon } from '@@/Icon';
+import { Badge } from '@@/Badge';
+
+import { Ingress, TLS, Path } from '../../types';
+
+function isHTTP(TLSs: TLS[], host: string) {
+  return TLSs.filter((t) => t.Hosts.indexOf(host) !== -1).length === 0;
+}
+
+function link(host: string, path: string, isHttp: boolean) {
+  if (!host) {
+    return path;
+  }
+  return (
+    <a
+      href={`${isHttp ? 'http' : 'https'}://${host}${path}`}
+      target="_blank"
+      rel="noreferrer"
+    >
+      {`${isHttp ? 'http' : 'https'}://${host}${path}`}
+    </a>
+  );
+}
+
+export const ingressRules: Column<Ingress> = {
+  Header: 'Rules and Paths',
+  accessor: 'Paths',
+  Cell: ({ row }: CellProps<Ingress, Path[]>) => {
+    const results = row.original.Paths?.map((path: Path) => {
+      const isHttp = isHTTP(row.original.TLS || [], path.Host);
+      return (
+        <div key={`${path.Host}${path.Path}${path.ServiceName}:${path.Port}`}>
+          <span className="flex px-2 flex-nowrap items-center gap-1">
+            {link(path.Host, path.Path, isHttp)}
+            <Icon icon="arrow-right" feather />
+            {`${path.ServiceName}:${path.Port}`}
+            {!path.HasService && (
+              <Badge type="warn" className="ml-1 gap-1">
+                <Icon icon="alert-triangle" feather />
+                Service doesn&apos;t exist
+              </Badge>
+            )}
+          </span>
+        </div>
+      );
+    });
+    return results || <div />;
+  },
+  id: 'ingressRules',
+  disableFilters: true,
+  canHide: true,
+  disableSortBy: true,
+};

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

@@ -0,0 +1,33 @@
+import { CellProps, Column } from 'react-table';
+
+import { Authorized } from '@/portainer/hooks/useUser';
+
+import { Link } from '@@/Link';
+
+import { Ingress } from '../../types';
+
+export const name: Column<Ingress> = {
+  Header: 'Name',
+  accessor: 'Name',
+  Cell: ({ row }: CellProps<Ingress>) => (
+    <Authorized
+      authorizations="K8sIngressesW"
+      childrenUnauthorized={row.original.Name}
+    >
+      <Link
+        to="kubernetes.ingresses.edit"
+        params={{
+          uid: row.original.UID,
+          namespace: row.original.Namespace,
+          name: row.original.Name,
+        }}
+        title={row.original.Name}
+      >
+        {row.original.Name}
+      </Link>
+    </Authorized>
+  ),
+  id: 'name',
+  disableFilters: true,
+  canHide: true,
+};

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

@@ -0,0 +1,33 @@
+import { CellProps, Column, Row } from 'react-table';
+
+import { filterHOC } from '@/react/components/datatables/Filter';
+
+import { Link } from '@@/Link';
+
+import { Ingress } from '../../types';
+
+export const namespace: Column<Ingress> = {
+  Header: 'Namespace',
+  accessor: 'Namespace',
+  Cell: ({ row }: CellProps<Ingress>) => (
+    <Link
+      to="kubernetes.resourcePools.resourcePool"
+      params={{
+        id: row.original.Namespace,
+      }}
+      title={row.original.Namespace}
+    >
+      {row.original.Namespace}
+    </Link>
+  ),
+  id: 'namespace',
+  disableFilters: false,
+  canHide: true,
+  Filter: filterHOC('Filter by namespace'),
+  filter: (rows: Row<Ingress>[], filterValue, filters) => {
+    if (filters.length === 0) {
+      return rows;
+    }
+    return rows.filter((r) => filters.includes(r.original.Namespace));
+  },
+};

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

@@ -0,0 +1,11 @@
+import { Column } from 'react-table';
+
+import { Ingress } from '../../types';
+
+export const type: Column<Ingress> = {
+  Header: 'Type',
+  accessor: 'Type',
+  id: 'type',
+  disableFilters: true,
+  canHide: true,
+};

app/react/kubernetes/ingresses/IngressDatatable/datatable-store.ts

@@ -0,0 +1,26 @@
+import create from 'zustand';
+import { persist } from 'zustand/middleware';
+
+import { keyBuilder } from '@/portainer/hooks/useLocalStorage';
+import {
+  paginationSettings,
+  sortableSettings,
+} from '@/react/components/datatables/types';
+
+import { TableSettings } from '../types';
+
+export const TRUNCATE_LENGTH = 32;
+
+export function createStore(storageKey: string) {
+  return create<TableSettings>()(
+    persist(
+      (set) => ({
+        ...sortableSettings(set),
+        ...paginationSettings(set),
+      }),
+      {
+        name: keyBuilder(storageKey),
+      }
+    )
+  );
+}

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

@@ -0,0 +1,20 @@
+import { PageHeader } from '@@/PageHeader';
+
+import { IngressDataTable } from './IngressDataTable';
+
+export function IngressesDatatableView() {
+  return (
+    <>
+      <PageHeader
+        title="Ingresses"
+        breadcrumbs={[
+          {
+            label: 'Ingresses',
+          },
+        ]}
+        reload
+      />
+      <IngressDataTable />
+    </>
+  );
+}