Portainer
/
portainer
mirror of https://github.com/portainer/portainer.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

refactor(app): app events datatable [EE-5355] (#10024)

pull/10047/head
Ali 2023-08-14 05:09:40 +12:00 committed by GitHub
parent 0eaf296e1b
commit c472fe9c18
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 277 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/kubernetes/react/components/index.ts
View File

@ -15,6 +15,7 @@ import { withUIRouter } from '@/react-tools/withUIRouter';
import {
ApplicationSummaryWidget,
ApplicationDetailsWidget,
ApplicationEventsDatatable,
} from '@/react/kubernetes/applications/DetailsView';
import { withUserProvider } from '@/react/test-utils/withUserProvider';
import { withFormValidation } from '@/react-tools/withFormValidation';
@ -109,9 +110,21 @@ export const ngModule = angular
[]
)
)
.component(
'applicationEventsDatatable',
r2a(
withUIRouter(
withReactQuery(withUserProvider(ApplicationEventsDatatable))
),
[]
)
)
.component(
'kubernetesApplicationPlacementsDatatable',
r2a(withCurrentUser(PlacementsDatatable), ['dataset', 'onRefresh'])
r2a(withUIRouter(withCurrentUser(PlacementsDatatable)), [
'dataset',
'onRefresh',
])
);
export const componentsModule = ngModule.name;

11
app/kubernetes/views/applications/edit/application.html
View File

@ -56,16 +56,7 @@
{{ ctrl.state.eventWarningCount }} warning(s)
</div>
</uib-tab-heading>
<kubernetes-events-datatable
title-text="Events"
title-icon="history"
dataset="ctrl.events"
table-key="kubernetes.application.events"
order-by="Date"
reverse-order="true"
loading="ctrl.state.eventsLoading"
refresh-callback="ctrl.getEvents"
></kubernetes-events-datatable>
<application-events-datatable />
</uib-tab>
<uib-tab index="3" ng-if="ctrl.application.Yaml" select="ctrl.showEditor()" classes="btn-sm">

2
app/react/components/Badge/Badge.tsx
View File

@ -1,7 +1,7 @@
import clsx from 'clsx';
import { PropsWithChildren } from 'react';
type BadgeType = 'success' | 'danger' | 'warn' | 'info';
export type BadgeType = 'success' | 'danger' | 'warn' | 'info';
export interface Props {
type?: BadgeType;

1
app/react/components/Badge/index.ts
View File

@ -1 +1,2 @@
export { Badge } from './Badge';
export type { BadgeType } from './Badge';

2
app/react/components/datatables/ExpandableDatatableRow.tsx
View File

@ -24,7 +24,7 @@ export function ExpandableDatatableTableRow<D extends Record<string, unknown>>({
cells={cells}
onClick={expandOnClick ? () => row.toggleExpanded() : undefined}
/>
{row.getIsExpanded() && (
{row.getIsExpanded() && row.getCanExpand() && (
<tr>
{!disableSelect && <td />}
<td colSpan={disableSelect ? cells.length : cells.length - 1}>

2
app/react/components/datatables/expand-column.tsx
View File

@ -9,7 +9,7 @@ export function buildExpandColumn<
return {
id: 'expand',
header: ({ table }) => {
const hasExpandableItems = table.getExpandedRowModel().rows.length > 0;
const hasExpandableItems = table.getCanSomeRowsExpand();
return (
hasExpandableItems && (

85
app/react/kubernetes/applications/DetailsView/ApplicationEventsDatatable.tsx Normal file
View File

@ -0,0 +1,85 @@
import { useCurrentStateAndParams } from '@uirouter/react';
import { useMemo } from 'react';
import { createStore } from '@/react/kubernetes/datatables/default-kube-datatable-store';
import { useTableState } from '@@/datatables/useTableState';
import {
useApplication,
useApplicationPods,
useApplicationServices,
} from '../application.queries';
import { EventsDatatable } from '../../components/KubernetesEventsDatatable';
import { useNamespaceEventsQuery } from './useNamespaceEventsQuery';
const storageKey = 'k8sAppEventsDatatable';
const settingsStore = createStore(storageKey, { id: 'Date', desc: true });
export function ApplicationEventsDatatable() {
const tableState = useTableState(settingsStore, storageKey);
const {
params: {
namespace,
name,
'resource-type': resourceType,
endpointId: environmentId,
},
} = useCurrentStateAndParams();
const { data: application, ...applicationQuery } = useApplication(
environmentId,
namespace,
name,
resourceType
);
const { data: services, ...servicesQuery } = useApplicationServices(
environmentId,
namespace,
name,
application
);
const { data: pods, ...podsQuery } = useApplicationPods(
environmentId,
namespace,
name,
application
);
const { data: events, ...eventsQuery } = useNamespaceEventsQuery(
environmentId,
namespace,
{
autoRefreshRate: tableState.autoRefreshRate * 1000,
}
);
// related events are events that have the application id, or the id of a service or pod from the application
const relatedEvents = useMemo(() => {
const serviceIds = services?.map((service) => service?.metadata?.uid);
const podIds = pods?.map((pod) => pod?.metadata?.uid);
return (
events?.filter(
(event) =>
event.involvedObject.uid === application?.metadata?.uid ||
serviceIds?.includes(event.involvedObject.uid) ||
podIds?.includes(event.involvedObject.uid)
) || []
);
}, [application?.metadata?.uid, events, pods, services]);
return (
<EventsDatatable
dataset={relatedEvents}
tableState={tableState}
isLoading={
applicationQuery.isLoading ||
eventsQuery.isLoading ||
servicesQuery.isLoading ||
podsQuery.isLoading
}
data-cy="k8sAppDetail-eventsTable"
noWidget
/>
);
}

1
app/react/kubernetes/applications/DetailsView/index.ts
View File

@ -1,2 +1,3 @@
export { ApplicationSummaryWidget } from './ApplicationSummaryWidget';
export { ApplicationDetailsWidget } from './ApplicationDetailsWidget/ApplicationDetailsWidget';
export { ApplicationEventsDatatable } from './ApplicationEventsDatatable';

51
app/react/kubernetes/applications/DetailsView/useNamespaceEventsQuery.ts Normal file
View File

@ -0,0 +1,51 @@
import { EventList } from 'kubernetes-types/core/v1';
import { useQuery } from 'react-query';
import { EnvironmentId } from '@/react/portainer/environments/types';
import axios, { parseAxiosError } from '@/portainer/services/axios';
import { withError } from '@/react-tools/react-query';
async function getNamespaceEvents(
environmentId: EnvironmentId,
namespace: string,
labelSelector?: string
) {
try {
const { data } = await axios.get<EventList>(
`/endpoints/${environmentId}/kubernetes/api/v1/namespaces/${namespace}/events`,
{
params: {
labelSelector,
},
}
);
return data.items;
} catch (e) {
throw parseAxiosError(e as Error, 'Unable to retrieve events');
}
}
export function useNamespaceEventsQuery(
environmentId: EnvironmentId,
namespace: string,
options?: { autoRefreshRate?: number },
labelSelector?: string
) {
return useQuery(
[
'environments',
environmentId,
'kubernetes',
'events',
namespace,
labelSelector,
],
() => getNamespaceEvents(environmentId, namespace, labelSelector),
{
...withError('Unable to retrieve events'),
refetchInterval() {
return options?.autoRefreshRate ?? false;
},
}
);
}

2
app/react/kubernetes/applications/ItemView/PlacementsDatatable/columns/status.tsx
View File

@ -5,7 +5,9 @@ import { Icon } from '@@/Icon';
import { columnHelper } from './helper';
export const status = columnHelper.accessor('AcceptsApplication', {
header: '',
id: 'status',
enableSorting: false,
cell: ({ getValue }) => {
const acceptsApplication = getValue();
return (

51
app/react/kubernetes/components/KubernetesEventsDatatable/EventsDatatable.tsx Normal file
View File

@ -0,0 +1,51 @@
import { Event } from 'kubernetes-types/core/v1';
import { History } from 'lucide-react';
import { IndexOptional } from '@/react/kubernetes/configs/types';
import { TableSettings } from '@/react/kubernetes/datatables/DefaultDatatableSettings';
import { Datatable, TableSettingsMenu } from '@@/datatables';
import { TableSettingsMenuAutoRefresh } from '@@/datatables/TableSettingsMenuAutoRefresh';
import { TableState } from '@@/datatables/useTableState';
import { columns } from './columns';
type Props = {
dataset: Event[];
tableState: TableState<TableSettings>;
isLoading: boolean;
'data-cy': string;
noWidget: boolean;
};
export function EventsDatatable({
dataset,
tableState,
isLoading,
'data-cy': dataCy,
noWidget,
}: Props) {
return (
<Datatable<IndexOptional<Event>>
dataset={dataset}
columns={columns}
settingsManager={tableState}
isLoading={isLoading}
emptyContentLabel="No event available."
title="Events"
titleIcon={History}
getRowId={(row) => row.metadata?.uid || ''}
disableSelect
renderTableSettings={() => (
<TableSettingsMenu>
<TableSettingsMenuAutoRefresh
value={tableState.autoRefreshRate}
onChange={(value) => tableState.setAutoRefreshRate(value)}
/>
</TableSettingsMenu>
)}
data-cy={dataCy}
noWidget={noWidget}
/>
);
}

11
app/react/kubernetes/components/KubernetesEventsDatatable/columns/date.tsx Normal file
View File

@ -0,0 +1,11 @@
import { formatDate } from '@/portainer/filters/filters';
import { columnHelper } from './helper';
export const date = columnHelper.accessor(
(event) => formatDate(event.lastTimestamp || event.eventTime),
{
header: 'Date',
id: 'Date',
}
);

21
app/react/kubernetes/components/KubernetesEventsDatatable/columns/eventType.tsx Normal file
View File

@ -0,0 +1,21 @@
import { Badge, BadgeType } from '@@/Badge';
import { columnHelper } from './helper';
export const eventType = columnHelper.accessor('type', {
header: 'Type',
cell: ({ getValue }) => (
<Badge type={getBadgeColor(getValue())}>{getValue()}</Badge>
),
});
function getBadgeColor(status?: string): BadgeType {
switch (status?.toLowerCase()) {
case 'normal':
return 'info';
case 'warning':
return 'warn';
default:
return 'danger';
}
}

4
app/react/kubernetes/components/KubernetesEventsDatatable/columns/helper.ts Normal file
View File

@ -0,0 +1,4 @@
import { createColumnHelper } from '@tanstack/react-table';
import { Event } from 'kubernetes-types/core/v1';
export const columnHelper = createColumnHelper<Event>();

6
app/react/kubernetes/components/KubernetesEventsDatatable/columns/index.ts Normal file
View File

@ -0,0 +1,6 @@
import { date } from './date';
import { kind } from './kind';
import { eventType } from './eventType';
import { message } from './message';
export const columns = [date, kind, eventType, message];

8
app/react/kubernetes/components/KubernetesEventsDatatable/columns/kind.tsx Normal file
View File

@ -0,0 +1,8 @@
import { columnHelper } from './helper';
export const kind = columnHelper.accessor(
(event) => event.involvedObject.kind,
{
header: 'Kind',
}
);

5
app/react/kubernetes/components/KubernetesEventsDatatable/columns/message.tsx Normal file
View File

@ -0,0 +1,5 @@
import { columnHelper } from './helper';
export const message = columnHelper.accessor('message', {
header: 'Message',
});

1
app/react/kubernetes/components/KubernetesEventsDatatable/index.ts Normal file
View File

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

17
app/react/kubernetes/datatables/default-kube-datatable-store.ts
View File

@ -5,9 +5,16 @@ import {
TableSettings,
} from './DefaultDatatableSettings';
export function createStore(storageKey: string) {
return createPersistedStore<TableSettings>(storageKey, 'name', (set) => ({
...refreshableSettings(set),
...systemResourcesSettings(set),
}));
export function createStore(
storageKey: string,
initialSortBy: string | { id: string; desc: boolean } = 'name'
) {
return createPersistedStore<TableSettings>(
storageKey,
initialSortBy,
(set) => ({
...refreshableSettings(set),
...systemResourcesSettings(set),
})
);
}