feat(kubernetes): support for jobs and cron jobs - r8s-182 (#260)

Co-authored-by: James Carppe <85850129+jamescarppe@users.noreply.github.com>
Co-authored-by: Anthony Lapenna <anthony.lapenna@portainer.io>
Co-authored-by: andres-portainer <91705312+andres-portainer@users.noreply.github.com>
Co-authored-by: Oscar Zhou <100548325+oscarzhou-portainer@users.noreply.github.com>
Co-authored-by: Yajith Dayarathna <yajith.dayarathna@portainer.io>
Co-authored-by: LP B <xAt0mZ@users.noreply.github.com>
Co-authored-by: oscarzhou <oscar.zhou@portainer.io>
Co-authored-by: testA113 <aliharriss1995@gmail.com>

app/react/kubernetes/more-resources/JobsView/JobsDatatable/JobsDatatable.tsx

@@ -0,0 +1,181 @@
+import { useMemo } from 'react';
+import { Trash2, CalendarCheck2 } from 'lucide-react';
+import { useRouter } from '@uirouter/react';
+
+import { useEnvironmentId } from '@/react/hooks/useEnvironmentId';
+import { Authorized, useAuthorizations } from '@/react/hooks/useUser';
+import { notifyError, notifySuccess } from '@/portainer/services/notifications';
+import { SystemResourceDescription } from '@/react/kubernetes/datatables/SystemResourceDescription';
+import {
+  DefaultDatatableSettings,
+  TableSettings as KubeTableSettings,
+} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+import { useKubeStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
+import { CreateFromManifestButton } from '@/react/kubernetes/components/CreateFromManifestButton';
+
+import { confirmDelete } from '@@/modals/confirm';
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import { LoadingButton } from '@@/buttons';
+import {
+  type FilteredColumnsTableSettings,
+  filteredColumnsSettings,
+} from '@@/datatables/types';
+import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
+import { withColumnFilters } from '@@/datatables/extend-options/withColumnFilters';
+
+import { useJobs } from './queries/useJobs';
+import { columns } from './columns';
+import { Job } from './types';
+import { useDeleteJobsMutation } from './queries/useDeleteJobsMutation';
+
+const storageKey = 'jobs';
+
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
+
+export function JobsDatatable() {
+  const environmentId = useEnvironmentId();
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
+
+  const jobsQuery = useJobs(environmentId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const jobsRowData = jobsQuery.data;
+
+  const { authorized: canAccessSystemResources } = useAuthorizations(
+    'K8sAccessSystemNamespaces'
+  );
+  const filteredJobs = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? jobsRowData
+        : jobsRowData?.filter(
+            (job) =>
+              // show everything if we can access system resources and the table is set to show them
+              (canAccessSystemResources && tableState.showSystemResources) ||
+              // otherwise, only show non-system resources
+              !job.IsSystem
+          ),
+    [jobsRowData, tableState.showSystemResources, canAccessSystemResources]
+  );
+
+  return (
+    <Datatable
+      dataset={filteredJobs || []}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={jobsQuery.isLoading}
+      title="Jobs"
+      titleIcon={CalendarCheck2}
+      getRowId={(row) => row.Id}
+      isRowSelectable={(row) => !row.original.IsSystem}
+      renderTableActions={(selectedRows) => (
+        <TableActions selectedItems={selectedRows} />
+      )}
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
+      )}
+      description={
+        <SystemResourceDescription
+          showSystemResources={tableState.showSystemResources}
+        />
+      }
+      data-cy="k8s-jobs-datatable"
+      extendTableOptions={mergeOptions(
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
+      )}
+    />
+  );
+}
+
+interface SelectedJob {
+  Namespace: string;
+  Name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: Job[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteJobsMutation = useDeleteJobsMutation(environmentId);
+  const router = useRouter();
+
+  return (
+    <Authorized authorizations="K8sCronJobsW">
+      <LoadingButton
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={() => handleRemoveClick(selectedItems)}
+        icon={Trash2}
+        isLoading={deleteJobsMutation.isLoading}
+        loadingText="Removing jobs..."
+        data-cy="k8s-jobs-removeJobButton"
+      >
+        Remove
+      </LoadingButton>
+
+      <CreateFromManifestButton
+        params={{ tab: 'jobs' }}
+        data-cy="k8s-jobs-deploy-button"
+      />
+    </Authorized>
+  );
+
+  async function handleRemoveClick(jobs: SelectedJob[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>Are you sure you want to delete the selected job(s)?</p>
+        <ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
+          {jobs.map((s, index) => (
+            <li key={index}>
+              {s.Namespace}/{s.Name}
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: Record<string, string[]> = {};
+    jobs.forEach((r) => {
+      payload[r.Namespace] = payload[r.Namespace] || [];
+      payload[r.Namespace].push(r.Name);
+    });
+
+    deleteJobsMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Jobs successfully removed',
+            jobs.map((r) => `${r.Namespace}/${r.Name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete jobs',
+            error as Error,
+            jobs.map((r) => `${r.Namespace}/${r.Name}`).join(', ')
+          );
+        },
+      }
+    );
+
+    return jobs;
+  }
+}

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/actions.tsx

@@ -0,0 +1,30 @@
+import { FileText } from 'lucide-react';
+
+import { Link } from '@@/Link';
+import { Icon } from '@@/Icon';
+
+import { columnHelper } from './helper';
+
+export const actions = columnHelper.accessor(() => '', {
+  header: 'Actions',
+  id: 'actions',
+  enableSorting: false,
+  cell: ({ row: { original: job } }) => (
+    <div className="flex gap-x-2">
+      <Link
+        className="flex items-center gap-1"
+        to="kubernetes.applications.application.logs"
+        params={{
+          name: job.PodName,
+          namespace: job.Namespace,
+          pod: job.PodName,
+          container: job.Container?.name,
+        }}
+        data-cy={`job-logs-${job.Namespace}-${job.Name}-${job.Container?.name}`}
+      >
+        <Icon icon={FileText} />
+        Logs
+      </Link>
+    </div>
+  ),
+});

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/command.tsx

@@ -0,0 +1,7 @@
+import { columnHelper } from './helper';
+
+export const command = columnHelper.accessor((row) => row.Command, {
+  header: 'Command',
+  id: 'command',
+  cell: ({ getValue }) => getValue(),
+});

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/duration.tsx

@@ -0,0 +1,7 @@
+import { columnHelper } from './helper';
+
+export const duration = columnHelper.accessor((row) => row.Duration, {
+  header: 'Duration',
+  id: 'duration',
+  cell: ({ getValue }) => getValue(),
+});

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/finished.tsx

@@ -0,0 +1,7 @@
+import { columnHelper } from './helper';
+
+export const finished = columnHelper.accessor((row) => row.FinishTime, {
+  header: 'Finished',
+  id: 'finished',
+  cell: ({ getValue }) => getValue(),
+});

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/helper.ts

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

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/index.tsx

@@ -0,0 +1,19 @@
+import { name } from './name';
+import { namespace } from './namespace';
+import { started } from './started';
+import { finished } from './finished';
+import { duration } from './duration';
+import { status } from './status';
+import { actions } from './actions';
+import { command } from './command';
+
+export const columns = [
+  name,
+  namespace,
+  command,
+  status,
+  started,
+  finished,
+  duration,
+  actions,
+];

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/name.tsx

@@ -0,0 +1,23 @@
+import { SystemBadge } from '@@/Badge/SystemBadge';
+
+import { columnHelper } from './helper';
+
+export const name = columnHelper.accessor(
+  (row) => {
+    let result = row.Name;
+    if (row.IsSystem) {
+      result += ' system';
+    }
+    return result;
+  },
+  {
+    header: 'Name',
+    id: 'name',
+    cell: ({ row }) => (
+      <div className="flex gap-2">
+        {row.original.Name}
+        {row.original.IsSystem && <SystemBadge />}
+      </div>
+    ),
+  }
+);

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/namespace.tsx

@@ -0,0 +1,32 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@@/datatables/Filter';
+import { Link } from '@@/Link';
+
+import { Job } from '../types';
+
+import { columnHelper } from './helper';
+
+export const namespace = columnHelper.accessor((row) => row.Namespace, {
+  header: 'Namespace',
+  id: 'namespace',
+  cell: ({ getValue, row }) => (
+    <Link
+      to="kubernetes.resourcePools.resourcePool"
+      params={{
+        id: getValue(),
+      }}
+      title={getValue()}
+      data-cy={`cronJob-namespace-link-${row.original.Name}`}
+    >
+      {getValue()}
+    </Link>
+  ),
+  meta: {
+    filter: filterHOC('Filter by namespace'),
+  },
+  enableColumnFilter: true,
+  filterFn: (row: Row<Job>, _columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.Namespace ?? ''),
+});

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/started.tsx

@@ -0,0 +1,12 @@
+import { formatDate } from '@/portainer/filters/filters';
+
+import { columnHelper } from './helper';
+
+export const started = columnHelper.accessor(
+  (row) => formatDate(row.StartTime),
+  {
+    header: 'Started',
+    id: 'started',
+    cell: ({ getValue }) => getValue(),
+  }
+);

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/status.module.css

@@ -0,0 +1,13 @@
+.status-indicator {
+  padding: 0 !important;
+  margin-right: 1ch;
+  border-radius: 50%;
+  background-color: var(--red-3);
+  height: 10px;
+  width: 10px;
+  display: inline-block;
+}
+
+.status-indicator.ok {
+  background-color: var(--green-3);
+}

app/react/kubernetes/more-resources/JobsView/JobsDatatable/columns/status.tsx

@@ -0,0 +1,48 @@
+import { CellContext } from '@tanstack/react-table';
+import { HelpCircle } from 'lucide-react';
+import clsx from 'clsx';
+
+import { TooltipWithChildren } from '@@/Tip/TooltipWithChildren';
+
+import { Job } from '../types';
+
+import { columnHelper } from './helper';
+import styles from './status.module.css';
+
+export const status = columnHelper.accessor((row) => row.Status, {
+  header: 'Status',
+  id: 'status',
+  cell: Cell,
+});
+
+function Cell({ row: { original: item } }: CellContext<Job, string>) {
+  return (
+    <>
+      <span
+        className={clsx([
+          styles.statusIndicator,
+          {
+            [styles.ok]: item.Status !== 'Failed',
+          },
+        ])}
+      />
+      {item.Status}
+      {item.Status === 'Failed' && (
+        <span className="ml-1">
+          <TooltipWithChildren
+            message={
+              <div>
+                <span>{item.FailedReason}</span>
+              </div>
+            }
+            position="bottom"
+          >
+            <span className="vertical-center text-muted inline-flex whitespace-nowrap text-base">
+              <HelpCircle className="lucide" aria-hidden="true" />
+            </span>
+          </TooltipWithChildren>
+        </span>
+      )}
+    </>
+  );
+}

app/react/kubernetes/more-resources/JobsView/JobsDatatable/index.tsx

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

app/react/kubernetes/more-resources/JobsView/JobsDatatable/queries/query-keys.ts

@@ -0,0 +1,6 @@
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+export const queryKeys = {
+  list: (environmentId: EnvironmentId) =>
+    ['environments', environmentId, 'kubernetes', 'jobs'] as const,
+};

app/react/kubernetes/more-resources/JobsView/JobsDatatable/queries/useDeleteJobsMutation.ts

@@ -0,0 +1,31 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import { withGlobalError, withInvalidate } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { queryKeys } from './query-keys';
+
+export function useDeleteJobsMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+  return useMutation(deleteJob, {
+    ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
+    ...withGlobalError('Unable to delete Jobs'),
+  });
+}
+
+type NamespaceJobsMap = Record<string, string[]>;
+
+export async function deleteJob({
+  environmentId,
+  data,
+}: {
+  environmentId: EnvironmentId;
+  data: NamespaceJobsMap;
+}) {
+  try {
+    return await axios.post(`kubernetes/${environmentId}/jobs/delete`, data);
+  } catch (e) {
+    throw parseAxiosError(e, `Unable to delete Jobs`);
+  }
+}

app/react/kubernetes/more-resources/JobsView/JobsDatatable/queries/useJobs.ts

@@ -0,0 +1,38 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { withGlobalError } from '@/react-tools/react-query';
+import axios, { parseAxiosError } from '@/portainer/services/axios';
+import { EnvironmentId } from '@/react/portainer/environments/types';
+
+import { Job } from '../types';
+
+import { queryKeys } from './query-keys';
+
+export function useJobs(
+  environmentId: EnvironmentId,
+  options?: { refetchInterval?: number; enabled?: boolean }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getAllJobs(environmentId),
+    {
+      ...withGlobalError('Unable to get Jobs'),
+      refetchInterval() {
+        return options?.refetchInterval ?? false;
+      },
+      enabled: options?.enabled,
+    }
+  );
+}
+
+async function getAllJobs(environmentId: EnvironmentId) {
+  try {
+    const { data: jobs } = await axios.get<Job[]>(
+      `kubernetes/${environmentId}/jobs`
+    );
+
+    return jobs;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get Jobs');
+  }
+}

app/react/kubernetes/more-resources/JobsView/JobsDatatable/types.ts

@@ -0,0 +1,18 @@
+import { Container } from 'kubernetes-types/core/v1';
+
+export type Job = {
+  Id: string;
+  Namespace: string;
+  Name: string;
+  PodName: string;
+  Container?: Container;
+  Command?: string;
+  BackoffLimit?: number;
+  Completions?: number;
+  StartTime?: string;
+  FinishTime?: string;
+  Duration?: number;
+  Status?: string;
+  FailedReason?: string;
+  IsSystem?: boolean;
+};