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

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,
+};