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/CronJobsDatatable/CronJobsDatatable.tsx

@@ -0,0 +1,202 @@
+import { useMemo } from 'react';
+import { Trash2, CalendarSync } 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 { TableSettingsMenu } from '@@/datatables';
+import { ExpandableDatatable } from '@@/datatables/ExpandableDatatable';
+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 { Job } from '../JobsDatatable/types';
+
+import { useCronJobs } from './queries/useCronJobs';
+import { columns } from './columns';
+import { CronJob } from './types';
+import { useDeleteCronJobsMutation } from './queries/useDeleteCronJobsMutation';
+import { CronJobsExecutionsInnerDatatable } from './CronJobsExecutionsInnerDatatable';
+
+const storageKey = 'cronJobs';
+
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
+
+interface CronJobsExecutionsProps {
+  item: Job[];
+  tableState: TableSettings;
+}
+
+export function CronJobsDatatable() {
+  const environmentId = useEnvironmentId();
+  const tableState = useKubeStore<TableSettings>(
+    storageKey,
+    undefined,
+    (set) => ({
+      ...filteredColumnsSettings(set),
+    })
+  );
+
+  const cronJobsQuery = useCronJobs(environmentId, {
+    refetchInterval: tableState.autoRefreshRate * 1000,
+  });
+  const cronJobsRowData = cronJobsQuery.data;
+
+  const { authorized: canAccessSystemResources } = useAuthorizations(
+    'K8sAccessSystemNamespaces'
+  );
+  const filteredCronJobs = useMemo(
+    () =>
+      tableState.showSystemResources
+        ? cronJobsRowData
+        : cronJobsRowData?.filter(
+            (cronJob) =>
+              (canAccessSystemResources && tableState.showSystemResources) ||
+              !cronJob.IsSystem
+          ),
+    [cronJobsRowData, tableState.showSystemResources, canAccessSystemResources]
+  );
+
+  return (
+    <ExpandableDatatable
+      dataset={filteredCronJobs || []}
+      columns={columns}
+      settingsManager={tableState}
+      isLoading={cronJobsQuery.isLoading}
+      title="Cron Jobs"
+      titleIcon={CalendarSync}
+      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-cronJobs-datatable"
+      extendTableOptions={mergeOptions(
+        withColumnFilters(tableState.columnFilters, tableState.setColumnFilters)
+      )}
+      getRowCanExpand={(row) => (row.original.Jobs ?? []).length > 0}
+      renderSubRow={(row) => (
+        <SubRow item={row.original.Jobs ?? []} tableState={tableState} />
+      )}
+    />
+  );
+}
+
+function SubRow({ item, tableState }: CronJobsExecutionsProps) {
+  return (
+    <tr>
+      <td colSpan={8}>
+        <CronJobsExecutionsInnerDatatable item={item} tableState={tableState} />
+      </td>
+    </tr>
+  );
+}
+
+interface SelectedCronJob {
+  Namespace: string;
+  Name: string;
+}
+
+type TableActionsProps = {
+  selectedItems: CronJob[];
+};
+
+function TableActions({ selectedItems }: TableActionsProps) {
+  const environmentId = useEnvironmentId();
+  const deleteCronJobsMutation = useDeleteCronJobsMutation(environmentId);
+  const router = useRouter();
+
+  return (
+    <Authorized authorizations="K8sCronJobsW">
+      <LoadingButton
+        className="btn-wrapper"
+        color="dangerlight"
+        disabled={selectedItems.length === 0}
+        onClick={() => handleRemoveClick(selectedItems)}
+        icon={Trash2}
+        isLoading={deleteCronJobsMutation.isLoading}
+        loadingText="Removing Cron Jobs..."
+        data-cy="k8s-cronJobs-removeCronJobButton"
+      >
+        Remove
+      </LoadingButton>
+
+      <CreateFromManifestButton
+        params={{ tab: 'cronJobs' }}
+        data-cy="k8s-cronJobs-deploy-button"
+      />
+    </Authorized>
+  );
+
+  async function handleRemoveClick(cronJobs: SelectedCronJob[]) {
+    const confirmed = await confirmDelete(
+      <>
+        <p>Are you sure you want to delete the selected Cron Jobs?</p>
+        <ul className="mt-2 max-h-96 list-inside overflow-hidden overflow-y-auto text-sm">
+          {cronJobs.map((s, index) => (
+            <li key={index}>
+              {s.Namespace}/{s.Name}
+            </li>
+          ))}
+        </ul>
+      </>
+    );
+    if (!confirmed) {
+      return null;
+    }
+
+    const payload: Record<string, string[]> = {};
+    cronJobs.forEach((r) => {
+      payload[r.Namespace] = payload[r.Namespace] || [];
+      payload[r.Namespace].push(r.Name);
+    });
+
+    deleteCronJobsMutation.mutate(
+      { environmentId, data: payload },
+      {
+        onSuccess: () => {
+          notifySuccess(
+            'Cron Jobs successfully removed',
+            cronJobs.map((r) => `${r.Namespace}/${r.Name}`).join(', ')
+          );
+          router.stateService.reload();
+        },
+        onError: (error) => {
+          notifyError(
+            'Unable to delete Cron Jobs',
+            error as Error,
+            cronJobs.map((r) => `${r.Namespace}/${r.Name}`).join(', ')
+          );
+        },
+      }
+    );
+
+    return cronJobs;
+  }
+}

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/CronJobsExecutionsInnerDatatable.tsx

@@ -0,0 +1,47 @@
+import { CalendarCheck2 } from 'lucide-react';
+
+import {
+  DefaultDatatableSettings,
+  TableSettings as KubeTableSettings,
+} from '@/react/kubernetes/datatables/DefaultDatatableSettings';
+
+import { Datatable, TableSettingsMenu } from '@@/datatables';
+import {
+  type FilteredColumnsTableSettings,
+  BasicTableSettings,
+} from '@@/datatables/types';
+import { TableState } from '@@/datatables/useTableState';
+
+import { columns } from '../JobsDatatable/columns';
+import { Job } from '../JobsDatatable/types';
+
+interface TableSettings
+  extends KubeTableSettings,
+    FilteredColumnsTableSettings {}
+
+interface CronJobsExecutionsProps {
+  item: Job[];
+  tableState: TableSettings;
+}
+
+export function CronJobsExecutionsInnerDatatable({
+  item,
+  tableState,
+}: CronJobsExecutionsProps) {
+  return (
+    <Datatable
+      dataset={item}
+      columns={columns}
+      getRowId={(row) => row.Id}
+      title="Executions"
+      titleIcon={CalendarCheck2}
+      data-cy="k8s-cronJobs-executions-datatable"
+      renderTableSettings={() => (
+        <TableSettingsMenu>
+          <DefaultDatatableSettings settings={tableState} />
+        </TableSettingsMenu>
+      )}
+      settingsManager={tableState as unknown as TableState<BasicTableSettings>}
+    />
+  );
+}

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/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/CronJobsDatatable/columns/expand.tsx

@@ -0,0 +1,10 @@
+import { buildExpandColumn } from '@@/datatables/expand-column';
+
+import { CronJob } from '../types';
+
+import { columnHelper } from './helper';
+
+export const expand = columnHelper.display({
+  ...buildExpandColumn<CronJob>(),
+  id: 'expand',
+});

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

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

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

@@ -0,0 +1,17 @@
+import { expand } from './expand';
+import { name } from './name';
+import { namespace } from './namespace';
+import { schedule } from './schedule';
+import { suspend } from './suspend';
+import { timezone } from './timezone';
+import { command } from './command';
+
+export const columns = [
+  expand,
+  name,
+  namespace,
+  command,
+  schedule,
+  suspend,
+  timezone,
+];

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/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/CronJobsDatatable/columns/namespace.tsx

@@ -0,0 +1,32 @@
+import { Row } from '@tanstack/react-table';
+
+import { filterHOC } from '@@/datatables/Filter';
+import { Link } from '@@/Link';
+
+import { CronJob } 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<CronJob>, _columnId: string, filterValue: string[]) =>
+    filterValue.length === 0 ||
+    filterValue.includes(row.original.Namespace ?? ''),
+});

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/schedule.tsx

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

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/suspend.tsx

@@ -0,0 +1,10 @@
+import { columnHelper } from './helper';
+
+export const suspend = columnHelper.accessor((row) => row.Suspend, {
+  header: 'Suspend',
+  id: 'suspend',
+  cell: ({ getValue }) => {
+    const suspended = getValue();
+    return suspended ? 'Yes' : 'No';
+  },
+});

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/columns/timezone.tsx

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

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

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

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

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

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/queries/useCronJobs.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 { CronJob } from '../types';
+
+import { queryKeys } from './query-keys';
+
+export function useCronJobs(
+  environmentId: EnvironmentId,
+  options?: { refetchInterval?: number; enabled?: boolean }
+) {
+  return useQuery(
+    queryKeys.list(environmentId),
+    async () => getAllCronJobs(environmentId),
+    {
+      ...withGlobalError('Unable to get cron jobs'),
+      refetchInterval() {
+        return options?.refetchInterval ?? false;
+      },
+      enabled: options?.enabled,
+    }
+  );
+}
+
+async function getAllCronJobs(environmentId: EnvironmentId) {
+  try {
+    const { data: cronJobs } = await axios.get<CronJob[]>(
+      `kubernetes/${environmentId}/cron_jobs`
+    );
+
+    return cronJobs;
+  } catch (e) {
+    throw parseAxiosError(e, 'Unable to get cron jobs');
+  }
+}

app/react/kubernetes/more-resources/JobsView/CronJobsDatatable/queries/useDeleteCronJobsMutation.ts

@@ -0,0 +1,34 @@
+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 useDeleteCronJobsMutation(environmentId: EnvironmentId) {
+  const queryClient = useQueryClient();
+  return useMutation(deleteCronJob, {
+    ...withInvalidate(queryClient, [queryKeys.list(environmentId)]),
+    ...withGlobalError('Unable to delete Cron Jobs'),
+  });
+}
+
+type NamespaceCronJobsMap = Record<string, string[]>;
+
+export async function deleteCronJob({
+  environmentId,
+  data,
+}: {
+  environmentId: EnvironmentId;
+  data: NamespaceCronJobsMap;
+}) {
+  try {
+    return await axios.post(
+      `kubernetes/${environmentId}/cron_jobs/delete`,
+      data
+    );
+  } catch (e) {
+    throw parseAxiosError(e, `Unable to delete Cron Jobs`);
+  }
+}

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

@@ -0,0 +1,13 @@
+import { Job } from '../JobsDatatable/types';
+
+export type CronJob = {
+  Id: string;
+  Name: string;
+  Namespace: string;
+  Command: string;
+  Schedule: string;
+  Timezone: string;
+  Suspend: boolean;
+  IsSystem?: boolean;
+  Jobs?: Job[];
+};