mirror of
https://github.com/portainer/portainer.git
synced 2025-08-10 00:05:24 +02:00
fix(app/edge-jobs): edge job results page crash at scale (#954)
This commit is contained in:
parent
d306d7a983
commit
a472de1919
27 changed files with 2595 additions and 107 deletions
|
@ -1,18 +1,16 @@
|
|||
import { List } from 'lucide-react';
|
||||
import { useMemo } from 'react';
|
||||
|
||||
import { Environment } from '@/react/portainer/environments/types';
|
||||
import { useEnvironmentList } from '@/react/portainer/environments/queries';
|
||||
import { queryOptionsFromTableState } from '@/react/common/api/listQueryParams';
|
||||
|
||||
import { Datatable } from '@@/datatables';
|
||||
import { useTableState } from '@@/datatables/useTableState';
|
||||
import { withMeta } from '@@/datatables/extend-options/withMeta';
|
||||
import { mergeOptions } from '@@/datatables/extend-options/mergeOptions';
|
||||
|
||||
import { EdgeJob, JobResult, LogsStatus } from '../../types';
|
||||
import { EdgeJob, LogsStatus } from '../../types';
|
||||
import { useJobResults } from '../../queries/jobResults/useJobResults';
|
||||
|
||||
import { columns } from './columns';
|
||||
import { columns, sortOptions } from './columns';
|
||||
import { createStore } from './datatable-store';
|
||||
|
||||
const tableKey = 'edge-job-results';
|
||||
|
@ -22,8 +20,9 @@ export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
|
|||
const tableState = useTableState(store, tableKey);
|
||||
|
||||
const jobResultsQuery = useJobResults(jobId, {
|
||||
...queryOptionsFromTableState({ ...tableState }, sortOptions),
|
||||
refetchInterval(dataset) {
|
||||
const anyCollecting = dataset?.some(
|
||||
const anyCollecting = dataset?.data.some(
|
||||
(r) => r.LogsStatus === LogsStatus.Pending
|
||||
);
|
||||
|
||||
|
@ -35,40 +34,17 @@ export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
|
|||
},
|
||||
});
|
||||
|
||||
const environmentIds = jobResultsQuery.data?.map(
|
||||
(result) => result.EndpointId
|
||||
);
|
||||
|
||||
const environmentsQuery = useEnvironmentList(
|
||||
{ endpointIds: environmentIds },
|
||||
{ enabled: !!environmentIds && !jobResultsQuery.isLoading }
|
||||
);
|
||||
|
||||
const dataset = useMemo(
|
||||
() =>
|
||||
jobResultsQuery.isLoading || environmentsQuery.isLoading
|
||||
? []
|
||||
: associateEndpointsToResults(
|
||||
jobResultsQuery.data || [],
|
||||
environmentsQuery.environments
|
||||
),
|
||||
[
|
||||
environmentsQuery.environments,
|
||||
environmentsQuery.isLoading,
|
||||
jobResultsQuery.data,
|
||||
jobResultsQuery.isLoading,
|
||||
]
|
||||
);
|
||||
const dataset = jobResultsQuery.data?.data || [];
|
||||
|
||||
return (
|
||||
<Datatable
|
||||
disableSelect
|
||||
columns={columns}
|
||||
dataset={dataset}
|
||||
isLoading={jobResultsQuery.isLoading || environmentsQuery.isLoading}
|
||||
title="Results"
|
||||
titleIcon={List}
|
||||
columns={columns}
|
||||
disableSelect
|
||||
dataset={dataset}
|
||||
settingsManager={tableState}
|
||||
isLoading={jobResultsQuery.isLoading}
|
||||
extendTableOptions={mergeOptions(
|
||||
withMeta({
|
||||
table: 'edge-job-results',
|
||||
|
@ -76,21 +52,11 @@ export function ResultsDatatable({ jobId }: { jobId: EdgeJob['Id'] }) {
|
|||
})
|
||||
)}
|
||||
data-cy="edge-job-results-datatable"
|
||||
isServerSidePagination
|
||||
page={tableState.page}
|
||||
onPageChange={tableState.setPage}
|
||||
onSearchChange={() => tableState.setPage(0)}
|
||||
totalCount={jobResultsQuery.data?.totalCount || 0}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function associateEndpointsToResults(
|
||||
results: Array<JobResult>,
|
||||
environments: Array<Environment>
|
||||
) {
|
||||
return results.map((result) => {
|
||||
const environment = environments.find(
|
||||
(environment) => environment.Id === result.EndpointId
|
||||
);
|
||||
return {
|
||||
...result,
|
||||
Endpoint: environment,
|
||||
};
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue