Skip to content

Commit 8c87219

Browse files
stefanonardostefanonardo
committed
Fix VolumeSnapshot and VolumeSnapshotContent table sorting
The Status, Size, and Source columns in the VolumeSnapshot table and Status and Size columns in VolumeSnapshotContent table were not sorting correctly because they referenced non-existent sort field names instead of using the sorts registry.
1 parent 3a13a7d commit 8c87219

10 files changed

Lines changed: 65 additions & 38 deletions

File tree

‎frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content-details.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,9 @@ import {
2020
} from '@console/internal/components/utils';
2121
import { VolumeSnapshotClassModel, VolumeSnapshotModel } from '@console/internal/models';
2222
import { referenceForModel, VolumeSnapshotContentKind } from '@console/internal/module/k8s';
23-
import { Status } from '@console/shared';
2423
import PaneBody from '@console/shared/src/components/layout/PaneBody';
25-
import { volumeSnapshotStatus } from '../../status';
24+
import { Status } from '@console/shared/src/components/status/Status';
25+
import { snapshotStatus } from '@console/shared/src/sorts/snapshot';
2626

2727
const { editYaml, events } = navFactory;
2828

@@ -43,7 +43,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
4343
<DescriptionListGroup>
4444
<DescriptionListTerm>{t('console-app~Status')}</DescriptionListTerm>
4545
<DescriptionListDescription>
46-
<Status status={volumeSnapshotStatus(obj)} />
46+
<Status status={snapshotStatus(obj)} />
4747
</DescriptionListDescription>
4848
</DescriptionListGroup>
4949
</ResourceSummary>
@@ -116,7 +116,7 @@ const VolumeSnapshotContentDetailsPage: React.FC<DetailsPageProps> = (props) =>
116116
return (
117117
<DetailsPage
118118
{...props}
119-
getResourceStatus={volumeSnapshotStatus}
119+
getResourceStatus={snapshotStatus}
120120
menuActions={Kebab.factory.common}
121121
pages={pages}
122122
/>

‎frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-content.tsx‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
TableColumn,
1313
RowProps,
1414
} from '@console/dynamic-plugin-sdk/src/lib-core';
15-
import { TableData } from '@console/internal/components/factory';
15+
import { sorts, TableData } from '@console/internal/components/factory';
1616
import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
1717
import {
1818
ResourceLink,
@@ -28,9 +28,10 @@ import {
2828
VolumeSnapshotContentModel,
2929
} from '@console/internal/models';
3030
import { referenceForModel, VolumeSnapshotContentKind } from '@console/internal/module/k8s';
31-
import { Status } from '@console/shared';
31+
import { snapshotStatus, Status } from '@console/shared';
3232
import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
33-
import { snapshotStatusFilters, volumeSnapshotStatus } from '../../status';
33+
import { snapshotStatusFilters } from '../../status';
34+
import { sortResourceByValue } from 'public/components/factory/Table/sort';
3435

3536
export const tableColumnInfo = [
3637
{ id: 'name' },
@@ -54,7 +55,7 @@ const Row: React.FC<RowProps<VolumeSnapshotContentKind>> = ({ obj }) => {
5455
<ResourceLink kind={referenceForModel(VolumeSnapshotContentModel)} name={name} />
5556
</TableData>
5657
<TableData {...tableColumnInfo[1]}>
57-
<Status status={volumeSnapshotStatus(obj)} />
58+
<Status status={snapshotStatus(obj)} />
5859
</TableData>
5960
<TableData {...tableColumnInfo[2]}>{sizeMetrics}</TableData>
6061
<TableData {...tableColumnInfo[3]}>
@@ -95,14 +96,16 @@ const VolumeSnapshotContentTable: React.FC<VolumeSnapshotContentTableProps> = (p
9596
},
9697
{
9798
title: t('console-app~Status'),
98-
sort: 'snapshotStatus',
99+
sort: (data, direction) =>
100+
data.sort(sortResourceByValue(direction, sorts.volumeSnapshotStatus)),
99101
transforms: [sortable],
100102
props: { className: tableColumnInfo[1].className },
101103
id: tableColumnInfo[1].id,
102104
},
103105
{
104106
title: t('console-app~Size'),
105-
sort: 'volumeSnapshotSize',
107+
sort: (data, direction) =>
108+
data.sort(sortResourceByValue(direction, sorts.volumeSnapshotContentSize)),
106109
transforms: [sortable],
107110
props: { className: tableColumnInfo[2].className },
108111
id: tableColumnInfo[2].id,

‎frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot-details.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ import {
3131
Status,
3232
snapshotSource,
3333
FLAGS,
34+
snapshotStatus,
3435
} from '@console/shared';
3536
import PaneBody from '@console/shared/src/components/layout/PaneBody';
3637
import { useFlag } from '@console/shared/src/hooks/flag';
37-
import { volumeSnapshotStatus } from '../../status';
3838

3939
const { editYaml, events } = navFactory;
4040

@@ -62,7 +62,7 @@ const Details: React.FC<DetailsProps> = ({ obj }) => {
6262
<DescriptionListGroup>
6363
<DescriptionListTerm>{t('console-app~Status')}</DescriptionListTerm>
6464
<DescriptionListDescription>
65-
<Status status={volumeSnapshotStatus(obj)} />
65+
<Status status={snapshotStatus(obj)} />
6666
</DescriptionListDescription>
6767
</DescriptionListGroup>
6868
</ResourceSummary>
@@ -146,7 +146,7 @@ const VolumeSnapshotDetailsPage: React.FC<DetailsPageProps> = (props) => {
146146
<DetailsPage
147147
{...props}
148148
customActionMenu={customActionMenu}
149-
getResourceStatus={volumeSnapshotStatus}
149+
getResourceStatus={snapshotStatus}
150150
pages={pages}
151151
/>
152152
);

‎frontend/packages/console-app/src/components/volume-snapshot/volume-snapshot.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
TableColumn,
1515
RowProps,
1616
} from '@console/dynamic-plugin-sdk/src/lib-core';
17-
import { TableData } from '@console/internal/components/factory';
17+
import { sorts, TableData } from '@console/internal/components/factory';
1818
import { useActiveColumns } from '@console/internal/components/factory/Table/active-columns-hook';
1919
import {
2020
ResourceLink,
@@ -45,10 +45,12 @@ import {
4545
getNamespace,
4646
snapshotSource,
4747
FLAGS,
48+
snapshotStatus,
4849
} from '@console/shared';
4950
import { Timestamp } from '@console/shared/src/components/datetime/Timestamp';
5051
import { useFlag } from '@console/shared/src/hooks/flag';
51-
import { snapshotStatusFilters, volumeSnapshotStatus } from '../../status';
52+
import { snapshotStatusFilters } from '../../status';
53+
import { sortResourceByValue } from 'public/components/factory/Table/sort';
5254

5355
const tableColumnInfo = [
5456
{ id: 'name' },
@@ -78,21 +80,24 @@ const getTableColumns = (t: TFunction, disableItems = {}): TableColumn<VolumeSna
7880
},
7981
{
8082
title: t('console-app~Status'),
81-
sort: 'snapshotStatus',
83+
sort: (data, direction) =>
84+
data.sort(sortResourceByValue(direction, sorts.volumeSnapshotStatus)),
8285
transforms: [sortable],
8386
props: { className: tableColumnInfo[2].className },
8487
id: tableColumnInfo[2].id,
8588
},
8689
{
8790
title: t('console-app~Size'),
88-
sort: 'volumeSnapshotSize',
91+
sort: (data, direction) =>
92+
data.sort(sortResourceByValue(direction, sorts.volumeSnapshotSize)),
8993
transforms: [sortable],
9094
props: { className: tableColumnInfo[3].className },
9195
id: tableColumnInfo[3].id,
9296
},
9397
{
9498
title: t('console-app~Source'),
95-
sort: 'volumeSnapshotSource',
99+
sort: (data, direction) =>
100+
data.sort(sortResourceByValue(direction, sorts.volumeSnapshotSource)),
96101
transforms: [sortable],
97102
props: { className: tableColumnInfo[4].className },
98103
id: tableColumnInfo[4].id,
@@ -154,7 +159,7 @@ const Row: React.FC<RowProps<VolumeSnapshotKind, VolumeSnapshotRowProsCustomData
154159
<ResourceLink kind={NamespaceModel.kind} name={namespace} />
155160
</TableData>
156161
<TableData {...tableColumnInfo[2]}>
157-
<Status status={volumeSnapshotStatus(obj)} />
162+
<Status status={snapshotStatus(obj)} />
158163
</TableData>
159164
<TableData {...tableColumnInfo[3]}>{sizeMetrics}</TableData>
160165
{!customData?.disableItems?.Source && (

‎frontend/packages/console-app/src/status/snapshot.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,13 @@
1-
import { TFunction } from 'i18next';
2-
import { RowFilter } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
3-
import { VolumeSnapshotStatus } from '@console/internal/module/k8s';
4-
5-
export const volumeSnapshotStatus = ({ status }: { status?: VolumeSnapshotStatus }) => {
6-
const readyToUse = status?.readyToUse;
7-
const isError = !!status?.error?.message;
8-
return readyToUse ? 'Ready' : isError ? 'Error' : 'Pending';
9-
};
1+
import type { TFunction } from 'i18next';
2+
import type { RowFilter } from '@console/dynamic-plugin-sdk/src/extensions/console-types';
3+
import { snapshotStatus } from '@console/shared/src/sorts/snapshot';
104

115
export const snapshotStatusFilters = (t: TFunction): RowFilter[] => {
126
return [
137
{
148
filterGroupName: t('console-app~Status'),
159
type: 'snapshot-status',
16-
reducer: volumeSnapshotStatus,
10+
reducer: snapshotStatus,
1711
filter: () => null,
1812
items: [
1913
{ id: 'Ready', title: 'Ready' },

‎frontend/packages/console-shared/src/components/dashboard/inventory-card/utils.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { nodeStatus } from '@console/app/src/status/node';
2-
import { volumeSnapshotStatus } from '@console/app/src/status/snapshot';
32
import { podPhaseFilterReducer } from '@console/internal/module/k8s';
4-
import { StatusGroupMapper } from './InventoryItem';
3+
import { snapshotStatus } from '@console/shared/src/sorts/snapshot';
4+
import type { StatusGroupMapper } from './InventoryItem';
55
import { InventoryStatusGroup } from './status-group';
66

77
const POD_PHASE_GROUP_MAPPING = {
@@ -69,4 +69,4 @@ export const getPVCStatusGroups: StatusGroupMapper = (resources) =>
6969
export const getPVStatusGroups: StatusGroupMapper = (resources) =>
7070
getStatusGroups(resources, PV_STATUS_GROUP_MAPPING, (pv) => pv.status.phase, 'pv-status');
7171
export const getVSStatusGroups: StatusGroupMapper = (resources) =>
72-
getStatusGroups(resources, VS_STATUS_GROUP_MAPPING, volumeSnapshotStatus, 'snapshot-status');
72+
getStatusGroups(resources, VS_STATUS_GROUP_MAPPING, snapshotStatus, 'status');

‎frontend/packages/console-shared/src/sorts/snapshot.ts‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,15 @@
1-
import { convertToBaseValue } from '@console/internal/components/utils';
2-
import { VolumeSnapshotKind } from '@console/internal/module/k8s';
1+
import { convertToBaseValue } from '@console/internal/components/utils/units';
2+
import type {
3+
VolumeSnapshotContentKind,
4+
VolumeSnapshotKind,
5+
VolumeSnapshotStatus,
6+
} from '@console/internal/module/k8s';
7+
8+
export const snapshotStatus = ({ status }: { status?: VolumeSnapshotStatus }): string => {
9+
const readyToUse = status?.readyToUse;
10+
const isError = !!status?.error?.message;
11+
return readyToUse ? 'Ready' : isError ? 'Error' : 'Pending';
12+
};
313

414
export const snapshotSize = (snapshot: VolumeSnapshotKind): number => {
515
const size = snapshot?.status?.restoreSize;
@@ -9,3 +19,7 @@ export const snapshotSize = (snapshot: VolumeSnapshotKind): number => {
919
export const snapshotSource = (snapshot: VolumeSnapshotKind): string =>
1020
snapshot.spec?.source?.persistentVolumeClaimName ??
1121
snapshot.spec?.source?.volumeSnapshotContentName;
22+
23+
export const snapshotContentSize = (snapshot: VolumeSnapshotContentKind): number => {
24+
return snapshot?.status?.restoreSize ?? 0;
25+
};

‎frontend/public/components/factory/table-filters.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as _ from 'lodash-es';
22
import * as fuzzy from 'fuzzysearch';
33
import { nodeStatus } from '@console/app/src/status/node';
4-
import { volumeSnapshotStatus } from '@console/app/src/status/snapshot';
4+
import { snapshotStatus } from '@console/shared/src/sorts/snapshot';
55
import { getNodeRoles } from '@console/shared/src/selectors/node';
66
import { getLabelsAsString } from '@console/shared/src/utils/label-filter';
77
import { Alert, Rule } from '@console/dynamic-plugin-sdk/src/api/common-types';
@@ -220,7 +220,7 @@ export const tableFilters = (isExactSearch: boolean): FilterMap => {
220220
return true;
221221
}
222222

223-
const status = volumeSnapshotStatus(snapshot);
223+
const status = snapshotStatus(snapshot);
224224
return statuses.selected.includes(status) || !_.includes(statuses.all, status);
225225
},
226226
'node-disk-name': (name, disks) => matchFn(name.selected?.[0], disks?.path),

‎frontend/public/components/factory/table.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,12 @@ import { useNavigate } from 'react-router-dom-v5-compat';
2525
import { getMachinePhase } from '@console/shared/src/selectors/machine';
2626
import { getMachineSetInstanceType } from '@console/shared/src/selectors/machineSet';
2727
import { pvcUsed } from '@console/shared/src/sorts/pvc';
28-
import { snapshotSize, snapshotSource } from '@console/shared/src/sorts/snapshot';
28+
import {
29+
snapshotContentSize,
30+
snapshotSize,
31+
snapshotSource,
32+
snapshotStatus,
33+
} from '@console/shared/src/sorts/snapshot';
2934
import { ALL_NAMESPACES_KEY } from '@console/shared/src/constants/common';
3035
import { getName } from '@console/shared/src/selectors/common';
3136
import { useDeepCompareMemoize } from '@console/shared/src/hooks/deep-compare-memoize';
@@ -46,6 +51,7 @@ import {
4651
MachineKind,
4752
VolumeSnapshotKind,
4853
ClusterOperator,
54+
VolumeSnapshotContentKind,
4955
} from '../../module/k8s/types';
5056
import { getClusterOperatorStatus } from '../../module/k8s/cluster-operator';
5157
import { getClusterOperatorVersion, getJobTypeAndCompletions } from '../../module/k8s';
@@ -82,7 +88,11 @@ const sorts = {
8288
getTemplateInstanceStatus,
8389
machinePhase: (machine: MachineKind): string => getMachinePhase(machine),
8490
pvcUsed: (pvc: K8sResourceKind): number => pvcUsed(pvc),
91+
volumeSnapshotStatus: (snapshot: VolumeSnapshotKind | VolumeSnapshotContentKind): string =>
92+
snapshotStatus(snapshot),
8593
volumeSnapshotSize: (snapshot: VolumeSnapshotKind): number => snapshotSize(snapshot),
94+
volumeSnapshotContentSize: (snapshot: VolumeSnapshotContentKind): number =>
95+
snapshotContentSize(snapshot),
8696
volumeSnapshotSource: (snapshot: VolumeSnapshotKind): string => snapshotSource(snapshot),
8797
snapshotLastRestore: (snapshot: K8sResourceKind, { restores }) =>
8898
restores[getName(snapshot)]?.status?.restoreTime,

‎frontend/public/module/k8s/types.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1078,6 +1078,7 @@ export type MachineHealthCheckKind = K8sResourceCommon & {
10781078
export type VolumeSnapshotKind = K8sResourceCommon & {
10791079
status?: VolumeSnapshotStatus & {
10801080
boundVolumeSnapshotContentName?: string;
1081+
restoreSize?: string;
10811082
};
10821083
spec: {
10831084
source: {
@@ -1091,6 +1092,7 @@ export type VolumeSnapshotKind = K8sResourceCommon & {
10911092
export type VolumeSnapshotContentKind = K8sResourceCommon & {
10921093
status: VolumeSnapshotStatus & {
10931094
snapshotHandle?: string;
1095+
restoreSize?: number;
10941096
};
10951097
spec: {
10961098
volumeSnapshotRef: {
@@ -1109,7 +1111,6 @@ export type VolumeSnapshotContentKind = K8sResourceCommon & {
11091111

11101112
export type VolumeSnapshotStatus = {
11111113
readyToUse: boolean;
1112-
restoreSize?: number;
11131114
error?: {
11141115
message: string;
11151116
time: string;

0 commit comments

Comments
 (0)