feat(config): separate configmaps and secrets [EE-5078] (#9029)

app/react/kubernetes/services/ServicesView/ServicesDatatable/ServicesDatatable.tsx

@@ -0,0 +1,192 @@
+import { Shuffle, Trash2 } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+import clsx from 'clsx';
+import { Row } from '@tanstack/react-table';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import {
+  Authorized,
+  useAuthorizations,
+  useCurrentUser,
+} from '@/react/hooks/useUser';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { pluralize } from '@/portainer/helpers/strings';
+
+import { Datatable, Table, TableSettingsMenu } from '@@/datatables';
+import { confirmDelete } from '@@/modals/confirm';
+import { Button } from '@@/buttons';
+import { Link } from '@@/Link';
+import { useTableState } from '@@/datatables/useTableState';
+
+import {
+  useMutationDeleteServices,
+  useServicesForCluster,
+} from '../../service';
+import { Service } from '../../types';
+import { DefaultDatatableSettings } from '../../../datatables/DefaultDatatableSettings';
+import { isSystemNamespace } from '../../../namespaces/utils';
+import { useNamespaces } from '../../../namespaces/queries';
+import { SystemResourceDescription } from '../../../datatables/SystemResourceDescription';
+
+import { columns } from './columns';
+import { createStore } from './datatable-store';
+
+const storageKey = 'k8sServicesDatatable';
+const settingsStore = createStore(storageKey);
+
+export function ServicesDatatable() {
+  const tableState = useTableState(settingsStore, storageKey);
+  const environmentId = useEnvironmentId();
+  const { data: namespaces, ...namespacesQuery } = useNamespaces(environmentId);
+  const namespaceNames = (namespaces && Object.keys(namespaces)) || [];
+  const { data: services, ...servicesQuery } = useServicesForCluster(
+    environmentId,
+    namespaceNames,
+    {
+      autoRefreshRate: tableState.autoRefreshRate * 1000,
+    }
+  );
+
+  const readOnly = !useAuthorizations(['K8sServiceW']);
+  const { isAdmin } = useCurrentUser();
+
+  const filteredServices = services?.filter(
+    (service) =>
+      (isAdmin && tableState.showSystemResources) ||
+      !isSystemNamespace(service.Namespace)
+  );
+
+  return (
+    <Datatable
+      dataset={filteredServices || []}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={servicesQuery.isLoading || namespacesQuery.isLoading}
+      emptyContentLabel="No services found"
+      title="Services"
+      titleIcon={Shuffle}
+      getRowId={(row) => row.UID}
+      isRowSelectable={(row) => !isSystemNamespace(row.original.Namespace)}
+      disableSelect={readOnly}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings
+            settings={tableState}
+            hideShowSystemResources={!isAdmin}
+          />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources || !isAdmin}
+        />
+      }
+      renderRow={servicesRenderRow}
+    />
+  );
+}
+
+// needed to apply custom styling to the row cells and not globally.
+// required in the AC's for this ticket.
+function servicesRenderRow(row: Row<Service>, highlightedItemId?: string) {
+  return (
+    <Table.Row<Service>
+      cells={row.getVisibleCells()}
+      className={clsx('[&>td]:!py-4 [&>td]:!align-top', {
+        active: highlightedItemId === row.id,
+      })}
+    />
+  );
+}
+
+interface SelectedService {
+  Namespace: string;
+  Name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: Service[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteServicesMutation = useMutationDeleteServices(environmentId);
+  const router = useRouter();
+
+  async function handleRemoveClick(services: SelectedService[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>{`Are you sure you want to remove the selected ${pluralize(
+          services.length,
+          'service'
+        )}?`}</p>
+        <ul className="pl-6">
+          {services.map((s, index) => (
+            <li key={index}>
+              {s.Namespace}/{s.Name}
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: Record<string, string[]> = {};
+    services.forEach((service) => {
+      payload[service.Namespace] = payload[service.Namespace] || [];
+      payload[service.Namespace].push(service.Name);
+    });
+
+    deleteServicesMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Services successfully removed',
+            services.map((s) => `${s.Namespace}/${s.Name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete service(s)',
+            error as Error,
+            services.map((s) => `${s.Namespace}/${s.Name}`).join(', ')
+          );
+        },
+      }
+    );
+    return services;
+  }
+
+  return (
+    <div className="servicesDatatable-actions">
+      <Authorized authorizations="K8sServicesW">
+        <Button
+          className="btn-wrapper"
+          color="dangerlight"
+          disabled={selectedItems.length === 0}
+          onClick={() => handleRemoveClick(selectedItems)}
+          icon={Trash2}
+        >
+          Remove
+        </Button>
+
+        <Link
+          to="kubernetes.deploy"
+          params={{ referrer: 'kubernetes.services' }}
+          className="space-left hover:no-decoration"
+        >
+          <Button className="btn-wrapper" color="primary" icon="plus">
+            Create from manifest
+          </Button>
+        </Link>
+      </Authorized>
+    </div>
+  );
+}

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/ExternalIPLink.tsx

@@ -0,0 +1,22 @@
+import { ExternalLink } from 'lucide-react';
+
+import { Icon } from '@@/Icon';
+
+interface Props {
+  to: string;
+  text: string;
+}
+
+export function ExternalIPLink({ to, text }: Props) {
+  return (
+    <a
+      href={to}
+      target="_blank"
+      rel="noreferrer"
+      className="flex items-center gap-1"
+    >
+      <Icon icon={ExternalLink} />
+      <span>{text}</span>
+    </a>
+  );
+}

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/application.tsx

@@ -0,0 +1,39 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+
+import { Link } from '@@/Link';
+
+import { Service } from '../../../types';
+
+import { columnHelper } from './helper';
+
+export const application = columnHelper.accessor(
+  (row) => (row.Applications ? row.Applications[0].Name : ''),
+  {
+    header: 'Application',
+    id: 'application',
+    cell: Cell,
+  }
+);
+
+function Cell({ row, getValue }: CellContext<Service, string>) {
+  const appName = getValue();
+  const environmentId = useEnvironmentId();
+
+  return appName ? (
+    <Link
+      to="kubernetes.applications.application"
+      params={{
+        endpointId: environmentId,
+        namespace: row.original.Namespace,
+        name: appName,
+      }}
+      title={appName}
+    >
+      {appName}
+    </Link>
+  ) : (
+    '-'
+  );
+}

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/clusterIP.tsx

@@ -0,0 +1,41 @@
+import { columnHelper } from './helper';
+
+export const clusterIP = columnHelper.accessor(
+  (row) => row.ClusterIPs?.join(','),
+  {
+    header: 'Cluster IP',
+    id: 'clusterIP',
+    cell: ({ row }) => {
+      const clusterIPs = row.original.ClusterIPs;
+
+      if (!clusterIPs?.length) {
+        return '-';
+      }
+      return clusterIPs.map((ip) => <div key={ip}>{ip}</div>);
+    },
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.ClusterIPs;
+      const b = rowB.original.ClusterIPs;
+
+      const ipA = a?.[0];
+      const ipB = b?.[0];
+
+      // no ip's at top, followed by 'None', then ordered by ip
+      if (!ipA) return 1;
+      if (!ipB) return -1;
+      if (ipA === ipB) return 0;
+      if (ipA === 'None') return 1;
+      if (ipB === 'None') return -1;
+
+      // natural sort of the ip
+      return ipA.localeCompare(
+        ipB,
+        navigator.languages[0] || navigator.language,
+        {
+          numeric: true,
+          ignorePunctuation: true,
+        }
+      );
+    },
+  }
+);

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/created.tsx

@@ -0,0 +1,23 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const created = columnHelper.accessor(
+  (row) => {
+    const owner = row.Labels?.['io.portainer.kubernetes.application.owner'];
+    const date = formatDate(row.CreationTimestamp);
+    return owner ? `${date} by ${owner}` : date;
+  },
+  {
+    header: 'Created',
+    id: 'created',
+    cell: ({ row }) => {
+      const date = formatDate(row.original.CreationTimestamp);
+
+      const owner =
+        row.original.Labels?.['io.portainer.kubernetes.application.owner'];
+
+      return owner ? `${date} by ${owner}` : date;
+    },
+  }
+);

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/externalIP.tsx

@@ -0,0 +1,139 @@
+import { CellContext } from '@tanstack/react-table';
+
+import { Service } from '../../../types';
+
+import { ExternalIPLink } from './ExternalIPLink';
+import { columnHelper } from './helper';
+
+export const externalIP = columnHelper.accessor(
+  (row) => {
+    if (row.Type === 'ExternalName') {
+      return row.ExternalName || '';
+    }
+
+    if (row.ExternalIPs?.length) {
+      return row.ExternalIPs?.join(',') || '';
+    }
+
+    return row.IngressStatus?.map((status) => status.IP).join(',') || '';
+  },
+  {
+    header: 'External IP',
+    id: 'externalIP',
+    cell: Cell,
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.IngressStatus;
+      const b = rowB.original.IngressStatus;
+      const aExternal = rowA.original.ExternalIPs;
+      const bExternal = rowB.original.ExternalIPs;
+
+      const ipA = a?.[0].IP || aExternal?.[0] || rowA.original.ExternalName;
+      const ipB = b?.[0].IP || bExternal?.[0] || rowA.original.ExternalName;
+
+      if (!ipA) return 1;
+      if (!ipB) return -1;
+
+      // use a nat sort order for ip addresses
+      return ipA.localeCompare(
+        ipB,
+        navigator.languages[0] || navigator.language,
+        {
+          numeric: true,
+          ignorePunctuation: true,
+        }
+      );
+    },
+  }
+);
+
+function Cell({ row }: CellContext<Service, string>) {
+  if (row.original.Type === 'ExternalName') {
+    if (row.original.ExternalName) {
+      const linkTo = `http://${row.original.ExternalName}`;
+      return <ExternalIPLink to={linkTo} text={row.original.ExternalName} />;
+    }
+    return '-';
+  }
+
+  const [scheme, port] = getSchemeAndPort(row.original);
+  if (row.original.ExternalIPs?.length) {
+    return row.original.ExternalIPs?.map((ip, index) => {
+      // some ips come through blank
+      if (ip.length === 0) {
+        return '-';
+      }
+
+      if (scheme) {
+        let linkTo = `${scheme}://${ip}`;
+        if (port !== 80 && port !== 443) {
+          linkTo = `${linkTo}:${port}`;
+        }
+        return (
+          <div key={index}>
+            <ExternalIPLink to={linkTo} text={ip} />
+          </div>
+        );
+      }
+      return <div key={index}>{ip}</div>;
+    });
+  }
+
+  const status = row.original.IngressStatus;
+  if (status) {
+    return status?.map((status, index) => {
+      // some ips come through blank
+      if (status.IP.length === 0) {
+        return '-';
+      }
+
+      if (scheme) {
+        let linkTo = `${scheme}://${status.IP}`;
+        if (port !== 80 && port !== 443) {
+          linkTo = `${linkTo}:${port}`;
+        }
+        return (
+          <div key={index}>
+            <ExternalIPLink to={linkTo} text={status.IP} />
+          </div>
+        );
+      }
+      return <div key={index}>{status.IP}</div>;
+    });
+  }
+
+  return '-';
+}
+
+// calculate the scheme based on the ports of the service
+// favour https over http.
+function getSchemeAndPort(svc: Service): [string, number] {
+  let scheme = '';
+  let servicePort = 0;
+
+  svc.Ports?.forEach((port) => {
+    if (port.Protocol === 'TCP') {
+      switch (port.TargetPort) {
+        case '443':
+        case '8443':
+        case 'https':
+          scheme = 'https';
+          servicePort = port.Port;
+          break;
+
+        case '80':
+        case '8080':
+        case 'http':
+          if (scheme !== 'https') {
+            scheme = 'http';
+            servicePort = port.Port;
+          }
+          break;
+
+        default:
+          break;
+      }
+    }
+  });
+
+  return [scheme, servicePort];
+}

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/helper.ts

@@ -0,0 +1,5 @@
+import { createColumnHelper } from '@tanstack/react-table';
+
+import { Service } from '../../../types';
+
+export const columnHelper = createColumnHelper<Service>();

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/index.tsx

@@ -0,0 +1,21 @@
+import { name } from './name';
+import { type } from './type';
+import { namespace } from './namespace';
+import { ports } from './ports';
+import { clusterIP } from './clusterIP';
+import { externalIP } from './externalIP';
+import { targetPorts } from './targetPorts';
+import { application } from './application';
+import { created } from './created';
+
+export const columns = [
+  name,
+  application,
+  namespace,
+  type,
+  ports,
+  targetPorts,
+  clusterIP,
+  externalIP,
+  created,
+];

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/name.tsx

@@ -0,0 +1,53 @@
+import { Authorized } from '@/react/hooks/useUser';
+import { isSystemNamespace } from '@/react/kubernetes/namespaces/utils';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    let name = row.Name;
+
+    const isExternal =
+      !row.Labels || !row.Labels['io.portainer.kubernetes.application.owner'];
+    const isSystem = isSystemNamespace(row.Namespace);
+
+    if (isExternal && !isSystem) {
+      name = `${name} external`;
+    }
+
+    if (isSystem) {
+      name = `${name} system`;
+    }
+    return name;
+  },
+  {
+    header: 'Name',
+    id: 'name',
+    cell: ({ row }) => {
+      const name = row.original.Name;
+      const isSystem = isSystemNamespace(row.original.Namespace);
+
+      const isExternal =
+        !row.original.Labels ||
+        !row.original.Labels['io.portainer.kubernetes.application.owner'];
+
+      return (
+        <Authorized authorizations="K8sServiceW" childrenUnauthorized={name}>
+          {name}
+
+          {isSystem && (
+            <span className="label label-info image-tag label-margins">
+              system
+            </span>
+          )}
+
+          {isExternal && !isSystem && (
+            <span className="label label-primary image-tag label-margins">
+              external
+            </span>
+          )}
+        </Authorized>
+      );
+    },
+  }
+);

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/namespace.tsx

@@ -0,0 +1,35 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@/react/components/datatables/Filter';
+
+import { Link } from '@@/Link';
+
+import { Service } from '../../../types';
+
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor('Namespace', {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue }) => {
+    const namespace = getValue();
+
+    return (
+      <Link
+        to="kubernetes.resourcePools.resourcePool"
+        params={{
+          id: namespace,
+        }}
+        title={namespace}
+      >
+        {namespace}
+      </Link>
+    );
+  },
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 || filterValue.includes(row.original.Namespace),
+});

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/ports.tsx

@@ -0,0 +1,73 @@
+import { Tooltip } from '@@/Tip/Tooltip';
+
+import { columnHelper } from './helper';
+
+export const ports = columnHelper.accessor(
+  (row) =>
+    row.Ports.map(
+      (port) =>
+        `${port.Port}${port.NodePort !== 0 ? `:${port.NodePort}` : ''}/${
+          port.Protocol
+        }`
+    ).join(',') || '-',
+  {
+    header: () => (
+      <>
+        Ports
+        <Tooltip message="The format of Ports is port[:nodePort]/protocol. Protocol is either TCP, UDP or SCTP." />
+      </>
+    ),
+    id: 'ports',
+    cell: ({ row }) => {
+      if (!row.original.Ports.length) {
+        return '-';
+      }
+
+      return (
+        <>
+          {row.original.Ports.map((port, index) => {
+            if (port.NodePort !== 0) {
+              return (
+                <div key={index}>
+                  {port.Port}:{port.NodePort}/{port.Protocol}
+                </div>
+              );
+            }
+
+            return (
+              <div key={index}>
+                {port.Port}/{port.Protocol}
+              </div>
+            );
+          })}
+        </>
+      );
+    },
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.Ports;
+      const b = rowB.original.Ports;
+
+      if (!a.length && !b.length) return 0;
+
+      if (!a.length) return 1;
+      if (!b.length) return -1;
+
+      // sort order based on first port
+      const portA = a[0].Port;
+      const portB = b[0].Port;
+
+      if (portA === portB) {
+        // longer list of ports is considered "greater"
+        if (a.length < b.length) return -1;
+        if (a.length > b.length) return 1;
+        return 0;
+      }
+
+      // now do a regular number sort
+      if (portA < portB) return -1;
+      if (portA > portB) return 1;
+
+      return 0;
+    },
+  }
+);

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/targetPorts.tsx

@@ -0,0 +1,45 @@
+import { columnHelper } from './helper';
+
+export const targetPorts = columnHelper.accessor(
+  (row) => row.Ports.map((port) => port.TargetPort).join(','),
+  {
+    header: 'Target Ports',
+    id: 'targetPorts',
+    cell: ({ row }) => {
+      const ports = row.original.Ports.map((port) => port.TargetPort);
+      if (!ports.length) {
+        return '-';
+      }
+
+      return ports.map((port, index) => <div key={index}>{port}</div>);
+    },
+    sortingFn: (rowA, rowB) => {
+      const a = rowA.original.Ports;
+      const b = rowB.original.Ports;
+
+      if (!a.length && !b.length) return 0;
+      if (!a.length) return 1;
+      if (!b.length) return -1;
+
+      const portA = a[0].TargetPort;
+      const portB = b[0].TargetPort;
+
+      if (portA === portB) {
+        if (a.length < b.length) return -1;
+        if (a.length > b.length) return 1;
+
+        return 0;
+      }
+
+      // natural sort of the port
+      return portA.localeCompare(
+        portB,
+        navigator.languages[0] || navigator.language,
+        {
+          numeric: true,
+          ignorePunctuation: true,
+        }
+      );
+    },
+  }
+);

app/react/kubernetes/services/ServicesView/ServicesDatatable/columns/type.tsx

@@ -0,0 +1,18 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@@/datatables/Filter';
+
+import { Service } from '../../../types';
+
+import { columnHelper } from './helper';
+
+export const type = columnHelper.accessor('Type', {
+  header: 'Type',
+  id: 'type',
+  meta: {
+    filter: filterHOC('Filter by type'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Service>, columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 || filterValue.includes(row.original.Type),
+});

app/react/kubernetes/services/ServicesView/ServicesDatatable/datatable-store.ts

@@ -0,0 +1,13 @@
+import { refreshableSettings, createPersistedStore } from '@@/datatables/types';
+
+import {
+  systemResourcesSettings,
+  TableSettings,
+} from '../../../datatables/DefaultDatatableSettings';
+
+export function createStore(storageKey: string) {
+  return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
+    ...refreshableSettings(set),
+    ...systemResourcesSettings(set),
+  }));
+}

app/react/kubernetes/services/ServicesView/ServicesDatatable/index.tsx

@@ -0,0 +1 @@
+export { ServicesDatatable } from './ServicesDatatable';