Skip to content

Commit

Permalink
fix(ColumnHeader/SortIcon): add tooltip for sort direction (+allowUno…
Browse files Browse the repository at this point in the history 
…rdered) [YTFRONT-3801]
  • Loading branch information
@ma-efremoff
ma-efremoff committed Oct 17, 2024
1 parent cf2862a commit cd14993
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 22 deletions.
9 changes: 7 additions & 2 deletions packages/ui/src/ui/components/SortIcon/SortIcon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
import React from 'react';
import cn from 'bem-cn-lite';

import format from '../../common/hammer/format';
import Icon from '../../components/Icon/Icon';
import {Tooltip} from '../../components/Tooltip/Tooltip';
import {OrderType, nextSortOrderValue} from '../../utils/sort-helpers';

import './SortIcon.scss';
Expand Down Expand Up @@ -46,9 +48,12 @@ export default class SortIcon extends React.Component<Props> {
return (
<span className={block({hidden}, className)} onClick={this.onClick}>
{label && <span className={block('label')}>{label}</span>}
<span className={block('icon')}>
<Tooltip
className={block('icon')}
content={order ? format.ReadableField(order) : 'Unordered'}
>
<Icon awesome={icon} face="solid" />
</span>
</Tooltip>
</span>
);
}
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/ui/pages/components/tabs/nodes/Nodes/NodesColumnHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ export function NodesColumnHeader(
toggleColumnSortOrder({
columnName,
withUndefined: colInfo?.withUndefined,
allowUnordered: colInfo?.allowUnordered,
tableId: COMPONENTS_NODES_TABLE_ID,
}),
);
Expand Down
133 changes: 114 additions & 19 deletions packages/ui/src/ui/pages/components/tabs/nodes/tables.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -335,9 +335,24 @@ const nodesTableProps = {
column="space"
title="Space"
options={[
{column: 'space', title: 'Progress', withUndefined: true},
{column: 'space_usage', title: 'Usage', withUndefined: true},
{column: 'space_limit', title: 'Limit', withUndefined: true},
{
column: 'space',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'space_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'space_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
/>
);
Expand Down Expand Up @@ -398,9 +413,24 @@ const nodesTableProps = {
align={align}
column="cpu"
options={[
{column: 'cpu', title: 'Progress', withUndefined: true},
{column: 'cpu_usage', title: 'Usage', withUndefined: true},
{column: 'cpu_limit', title: 'Limit', withUndefined: true},
{
column: 'cpu',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'cpu_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'cpu_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
title="CPU"
/>
Expand Down Expand Up @@ -433,9 +463,24 @@ const nodesTableProps = {
align={align}
column="gpu"
options={[
{column: 'gpu', title: 'Progress', withUndefined: true},
{column: 'gpu_usage', title: 'Usage', withUndefined: true},
{column: 'gpu_limit', title: 'Limit', withUndefined: true},
{
column: 'gpu',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'gpu_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'gpu_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
title="GPU"
/>
Expand Down Expand Up @@ -468,9 +513,24 @@ const nodesTableProps = {
column="memory"
title="Memory"
options={[
{column: 'memory', title: 'Progress', withUndefined: true},
{column: 'memory_usage', title: 'Usage', withUndefined: true},
{column: 'memory_limit', title: 'Limit', withUndefined: true},
{
column: 'memory',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'memory_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'memory_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
/>
);
Expand Down Expand Up @@ -510,9 +570,24 @@ const nodesTableProps = {
column="network"
title="Network"
options={[
{column: 'network', title: 'Progress', withUndefined: true},
{column: 'network_usage', title: 'Usage', withUndefined: true},
{column: 'network_limit', title: 'Limit', withUndefined: true},
{
column: 'network',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'network_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'network_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
/>
);
Expand Down Expand Up @@ -545,9 +620,24 @@ const nodesTableProps = {
column="repair_slots"
title="Repair slots"
options={[
{column: 'repair_slots', title: 'Progress', withUndefined: true},
{column: 'repair_slots_usage', title: 'Usage', withUndefined: true},
{column: 'repair_slots_limit', title: 'Limit', withUndefined: true},
{
column: 'repair_slots',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'repair_slots_usage',
title: 'Usage',
withUndefined: true,
allowUnordered: true,
},
{
column: 'repair_slots_limit',
title: 'Limit',
withUndefined: true,
allowUnordered: true,
},
]}
/>
);
Expand Down Expand Up @@ -580,7 +670,12 @@ const nodesTableProps = {
column="removal_slots"
title="Removal slots"
options={[
{column: 'removal_slots', title: 'Progress', withUndefined: true},
{
column: 'removal_slots',
title: 'Progress',
withUndefined: true,
allowUnordered: true,
},
{
column: 'removal_slots_usage',
title: 'Usage',
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/ui/store/actions/tables.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ export type ToggleColumnSortOrderParams = {
tableId: keyof RootState['tables'];
/** The field is ignored when **allowedOrderTypes** is defined */
withUndefined?: boolean;
/** The field is ignored when **allowedOrderTypes** is defined */
allowUnordered?: boolean;
/** When defined **withUndefined** is ignored */
allowedOrderTypes?: Array<OrderType>;
};
Expand All @@ -25,6 +27,7 @@ export function toggleColumnSortOrder({
columnName,
tableId,
withUndefined,
allowUnordered,
allowedOrderTypes,
}: ToggleColumnSortOrderParams): TablesThunkAction {
return (dispatch, getState) => {
Expand All @@ -37,7 +40,7 @@ export function toggleColumnSortOrder({
if (allowedOrderTypes?.length) {
newOrderType = calculateNextOrderValue(orderType, allowedOrderTypes);
} else {
newOrderType = nextSortOrderValue(orderType, false, withUndefined);
newOrderType = nextSortOrderValue(orderType, allowUnordered, withUndefined);
}

const newSortInfo = orderTypeToOldSortState(columnName, newOrderType);
Expand Down

0 comments on commit cd14993

Please # to comment.