Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-24 07:49:41 +02:00
Code Issues Releases Activity

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

Browse source 
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>
This commit is contained in:
Steven Kang 2025-01-10 13:21:27 +13:00 • committed by GitHub
parent 24fdb1f600
commit d32b0f8b7e
51 changed files with 1786 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

181
app/react/kubernetes/more-resources/JobsView/JobsDatatable/JobsDatatable.tsx Normal file
View file

@ -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;
}
}