Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Bug 1998563: Fix machine page columns visibility #9915

Merged
merged 1 commit into from Sep 1, 2021
Merged

Bug 1998563: Fix machine page columns visibility #9915

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
14 changes: 14 additions & 0 deletions frontend/public/components/factory/Table/VirtualizedTable.tsx
View file
Open in desktop
Expand Up @@ -52,6 +52,20 @@ const isColumnVisible = <D extends any>(
return true;
};

export type TableDataProps = {
id: string;
activeColumnIDs: Set<string>;
className?: string;
};

export const TableData: React.FC<TableDataProps> = ({ className, id, activeColumnIDs, children }) =>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this component replaces https://github.com/openshift/console/blob/master/frontend/public/components/factory/table.tsx#L217

the old one has some additional logic (isColumnVisible) which is not needed anymore as new Rows get a list of active columns so we just need to check if the id is there.

This new component also has less props & will be exposed as part of the dynamic plugin API

(activeColumnIDs.has(id) || id === '') && (
<td id={id} className={className} role="gridcell">
{children}
</td>
);
TableData.displayName = 'TableData';

export type TableColumn<D> = ICell & {
title: string;
id?: string;
Expand Down
4 changes: 2 additions & 2 deletions frontend/public/components/factory/Table/active-columns-hook.ts
View file
Open in desktop
Expand Up @@ -14,8 +14,8 @@ export const useActiveColumns = <D = any>({
columnManagementID,
}: {
columns: TableColumn<D>[];
showNamespaceOverride: boolean;
columnManagementID: string;
showNamespaceOverride?: boolean;
columnManagementID?: string;
}): [TableColumn<D>[], boolean] => {
const [tableColumns, , userSettingsLoaded] = useUserSettingsCompatibility(
COLUMN_MANAGEMENT_CONFIGMAP_KEY,
Expand Down
89 changes: 57 additions & 32 deletions frontend/public/components/machine.tsx
View file
Open in desktop
Expand Up @@ -16,7 +16,7 @@ import { MachineModel } from '../models';
import { MachineKind, referenceForModel, Selector } from '../module/k8s';
import { Conditions } from './conditions';
import NodeIPList from '@console/app/src/components/nodes/NodeIPList';
import { DetailsPage, TableData } from './factory';
import { DetailsPage } from './factory';
import ListPageFilter from './factory/ListPage/ListPageFilter';
import ListPageHeader from './factory/ListPage/ListPageHeader';
import ListPageBody from './factory/ListPage/ListPageBody';
Expand All @@ -34,57 +34,73 @@ import {
} from './utils';
import { ResourceEventStream } from './events';
import { useK8sWatchResource } from './utils/k8s-watch-hook';
import VirtualizedTable, { RowProps, TableColumn } from './factory/Table/VirtualizedTable';
import VirtualizedTable, {
RowProps,
TableColumn,
TableData,
} from './factory/Table/VirtualizedTable';
import { sortResourceByValue } from './factory/Table/sort';
import { useActiveColumns } from './factory/Table/active-columns-hook';

const { common } = Kebab.factory;
const menuActions = [...Kebab.getExtensionsActionsForKind(MachineModel), ...common];
export const machineReference = referenceForModel(MachineModel);

const tableColumnClasses = [
'',
'',
classNames('pf-m-hidden', 'pf-m-visible-on-sm'),
classNames('pf-m-hidden', 'pf-m-visible-on-md'),
classNames('pf-m-hidden', 'pf-m-visible-on-lg'),
classNames('pf-m-hidden', 'pf-m-visible-on-xl'),
classNames('pf-m-hidden', 'pf-m-visible-on-xl'),
Kebab.columnClass,
const tableColumnInfo = [
{ className: '', id: 'name' },
{ className: '', id: 'namespace' },
{ className: classNames('pf-m-hidden', 'pf-m-visible-on-sm'), id: 'nodeRef' },
{ className: classNames('pf-m-hidden', 'pf-m-visible-on-md'), id: 'phase' },
{ className: classNames('pf-m-hidden', 'pf-m-visible-on-lg'), id: 'provider' },
{ className: classNames('pf-m-hidden', 'pf-m-visible-on-xl'), id: 'region' },
{ className: classNames('pf-m-hidden', 'pf-m-visible-on-xl'), id: 'avail' },
{ className: Kebab.columnClass, id: '' },
];

const getMachineProviderState = (obj: MachineKind): string =>
obj?.status?.providerStatus?.instanceState;

const MachineTableRow: React.FC<RowProps<MachineKind>> = ({ obj }) => {
const MachineTableRow: React.FC<RowProps<MachineKind>> = ({ obj, activeColumnIDs }) => {
const nodeName = getMachineNodeName(obj);
const region = getMachineRegion(obj);
const zone = getMachineZone(obj);
const providerState = getMachineProviderState(obj);
return (
<>
<TableData className={classNames(tableColumnClasses[0], 'co-break-word')}>
<TableData
{...tableColumnInfo[0]}
className={classNames(tableColumnInfo[0].className, 'co-break-word')}
activeColumnIDs={activeColumnIDs}
>
<ResourceLink
kind={machineReference}
name={obj.metadata.name}
namespace={obj.metadata.namespace}
/>
</TableData>
<TableData
className={classNames(tableColumnClasses[1], 'co-break-word')}
columnID="namespace"
{...tableColumnInfo[1]}
className={classNames(tableColumnInfo[1].className, 'co-break-word')}
activeColumnIDs={activeColumnIDs}
>
<ResourceLink kind="Namespace" name={obj.metadata.namespace} />
</TableData>
<TableData className={tableColumnClasses[2]}>
<TableData {...tableColumnInfo[2]} activeColumnIDs={activeColumnIDs}>
{nodeName ? <NodeLink name={nodeName} /> : '-'}
</TableData>
<TableData className={tableColumnClasses[3]}>
<TableData {...tableColumnInfo[3]} activeColumnIDs={activeColumnIDs}>
<Status status={getMachinePhase(obj)} />
</TableData>
<TableData className={tableColumnClasses[4]}>{providerState ?? '-'}</TableData>
<TableData className={tableColumnClasses[5]}>{region || '-'}</TableData>
<TableData className={tableColumnClasses[6]}>{zone || '-'}</TableData>
<TableData className={tableColumnClasses[7]}>
<TableData {...tableColumnInfo[4]} activeColumnIDs={activeColumnIDs}>
{providerState ?? '-'}
</TableData>
<TableData {...tableColumnInfo[5]} activeColumnIDs={activeColumnIDs}>
{region || '-'}
</TableData>
<TableData {...tableColumnInfo[6]} activeColumnIDs={activeColumnIDs}>
{zone || '-'}
</TableData>
<TableData {...tableColumnInfo[7]} activeColumnIDs={activeColumnIDs}>
<ResourceKebab actions={menuActions} kind={machineReference} resource={obj} />
</TableData>
</>
Expand Down Expand Up @@ -179,64 +195,73 @@ type MachineListProps = {
export const MachineList: React.FC<MachineListProps> = (props) => {
const { t } = useTranslation();

const machineTableColumn = React.useMemo<TableColumn<MachineKind>[]>(
const machineTableColumns = React.useMemo<TableColumn<MachineKind>[]>(
() => [
{
title: t('public~Name'),
sort: 'metadata.name',
transforms: [sortable],
props: { className: tableColumnClasses[0] },
props: { className: tableColumnInfo[0].className },
id: tableColumnInfo[0].id,
},
{
title: t('public~Namespace'),
sort: 'metadata.namespace',
transforms: [sortable],
props: { className: tableColumnClasses[1] },
id: 'namespace',
props: { className: tableColumnInfo[1].className },
id: tableColumnInfo[1].id,
},
{
title: t('public~Node'),
sort: 'status.nodeRef.name',
transforms: [sortable],
props: { className: tableColumnClasses[2] },
props: { className: tableColumnInfo[2].className },
id: tableColumnInfo[2].id,
},
{
title: t('public~Phase'),
sort: (data, direction) => data.sort(sortResourceByValue(direction, getMachinePhase)),
transforms: [sortable],
props: { className: tableColumnClasses[3] },
props: { className: tableColumnInfo[3].className },
id: tableColumnInfo[3].id,
},
{
title: t('public~Provider state'),
sort: 'status.providerStatus.instanceState',
transforms: [sortable],
props: { className: tableColumnClasses[4] },
props: { className: tableColumnInfo[4].className },
id: tableColumnInfo[4].id,
},
{
title: t('public~Region'),
sort: "metadata.labels['machine.openshift.io/region']",
transforms: [sortable],
props: { className: tableColumnClasses[5] },
props: { className: tableColumnInfo[5].className },
id: tableColumnInfo[5].id,
},
{
title: t('public~Availability zone'),
sort: "metadata.labels['machine.openshift.io/zone']",
transforms: [sortable],
props: { className: tableColumnClasses[6] },
props: { className: tableColumnInfo[6].className },
id: tableColumnInfo[6].id,
},
{
title: '',
props: { className: tableColumnClasses[7] },
props: { className: tableColumnInfo[7].className },
id: tableColumnInfo[7].id,
},
],
[t],
);

const [columns] = useActiveColumns({ columns: machineTableColumns });

return (
<VirtualizedTable<MachineKind>
{...props}
aria-label={t('public~Machines')}
columns={machineTableColumn}
columns={columns}
Row={MachineTableRow}
/>
);
Expand Down
72 changes: 34 additions & 38 deletions frontend/public/components/pod.tsx
View file
Open in desktop
Expand Up @@ -43,7 +43,7 @@ import {
} from '../module/k8s/pods';
import { getContainerState, getContainerStatus } from '../module/k8s/container';
import { ResourceEventStream } from './events';
import { DetailsPage, TableData } from './factory';
import { DetailsPage } from './factory';
import ListPageBody from './factory/ListPage/ListPageBody';
import ListPageHeader from './factory/ListPage/ListPageHeader';
import ListPageFilter from './factory/ListPage/ListPageFilter';
Expand Down Expand Up @@ -99,7 +99,11 @@ import DashboardCardBody from '@console/shared/src/components/dashboard/dashboar
import { useK8sWatchResource } from './utils/k8s-watch-hook';
import { useListPageFilter } from './factory/ListPage/filter-hook';
import { RowFilter } from './filter-toolbar';
import VirtualizedTable, { RowProps, TableColumn } from './factory/Table/VirtualizedTable';
import VirtualizedTable, {
RowProps,
TableColumn,
TableData,
} from './factory/Table/VirtualizedTable';
import { sortResourceByValue } from './factory/Table/sort';
import { useActiveColumns } from './factory/Table/active-columns-hook';

Expand Down Expand Up @@ -324,17 +328,6 @@ const getColumns = (showNodes: boolean, t: TFunction): TableColumn<PodKind>[] =>
},
];

const getSelectedColumns = (showNodes: boolean, t: TFunction): Set<string> => {
return new Set(
getColumns(showNodes, t).reduce((acc, column) => {
if (column.id && !column.additional) {
acc.push(column.id);
}
return acc;
}, []),
);
};

const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
obj: pod,
rowData: { showNodes },
Expand All @@ -353,46 +346,49 @@ const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
const { readyCount, totalContainers } = podReadiness(pod);
const phase = podPhase(pod);
const restarts = podRestarts(pod);
const columns = activeColumnIDs?.size > 0 ? activeColumnIDs : getSelectedColumns(showNodes, t);
const resourceKind = referenceFor(pod);
const context = { [resourceKind]: pod };
return (
<>
<TableData className={podColumnInfo.name.classes}>
<TableData
className={podColumnInfo.name.classes}
id={podColumnInfo.name.id}
activeColumnIDs={activeColumnIDs}
>
<ResourceLink kind={kind} name={name} namespace={namespace} />
</TableData>
<TableData
className={classNames(podColumnInfo.namespace.classes, 'co-break-word')}
columns={columns}
columnID={podColumnInfo.namespace.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.namespace.id}
>
<ResourceLink kind="Namespace" name={namespace} />
</TableData>
<TableData
className={podColumnInfo.status.classes}
columns={columns}
columnID={podColumnInfo.status.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.status.id}
>
<PodStatus pod={pod} />
</TableData>
<TableData
className={podColumnInfo.ready.classes}
columns={columns}
columnID={podColumnInfo.ready.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.ready.id}
>
{readyCount}/{totalContainers}
</TableData>
<TableData
className={podColumnInfo.restarts.classes}
columns={columns}
columnID={podColumnInfo.restarts.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.restarts.id}
>
{restarts}
</TableData>
<TableData
className={podColumnInfo.owner.classes}
columns={columns}
columnID={podColumnInfo.owner.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.owner.id}
>
{showNodes ? (
<ResourceLink kind="Node" name={pod.spec.nodeName} namespace={namespace} />
Expand All @@ -402,47 +398,47 @@ const PodTableRow: React.FC<RowProps<PodKind, PodRowData>> = ({
</TableData>
<TableData
className={podColumnInfo.memory.classes}
columns={columns}
columnID={podColumnInfo.memory.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.memory.id}
>
{bytes ? `${formatBytesAsMiB(bytes)} MiB` : '-'}
</TableData>
<TableData
className={podColumnInfo.cpu.classes}
columns={columns}
columnID={podColumnInfo.cpu.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.cpu.id}
>
{cores ? t('public~{{numCores}} cores', { numCores: formatCores(cores) }) : '-'}
</TableData>
<TableData
className={podColumnInfo.created.classes}
columns={columns}
columnID={podColumnInfo.created.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.created.id}
>
<Timestamp timestamp={creationTimestamp} />
</TableData>
<TableData
className={podColumnInfo.node.classes}
columns={columns}
columnID={podColumnInfo.node.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.node.id}
>
<ResourceLink kind="Node" name={pod.spec.nodeName} namespace={namespace} />
</TableData>
<TableData
className={podColumnInfo.labels.classes}
columns={columns}
columnID={podColumnInfo.labels.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.labels.id}
>
<LabelList kind={kind} labels={labels} />
</TableData>
<TableData
className={podColumnInfo.ipaddress.classes}
columns={columns}
columnID={podColumnInfo.ipaddress.id}
activeColumnIDs={activeColumnIDs}
id={podColumnInfo.ipaddress.id}
>
{pod?.status?.podIP ?? '-'}
</TableData>
<TableData className={Kebab.columnClass}>
<TableData className={Kebab.columnClass} activeColumnIDs={activeColumnIDs} id="">
<LazyActionMenu context={context} isDisabled={phase === 'Terminating'} />
</TableData>
</>
Expand Down