From cd14993dd012c1650bb5ae9da971a8a02639358c Mon Sep 17 00:00:00 2001 From: Maksim Efremov Date: Fri, 4 Oct 2024 17:53:05 +0300 Subject: [PATCH] fix(ColumnHeader/SortIcon): add tooltip for sort direction (+allowUnordered) [YTFRONT-3801] --- .../src/ui/components/SortIcon/SortIcon.tsx | 9 +- .../tabs/nodes/Nodes/NodesColumnHeader.tsx | 1 + .../ui/pages/components/tabs/nodes/tables.tsx | 133 +++++++++++++++--- packages/ui/src/ui/store/actions/tables.ts | 5 +- 4 files changed, 126 insertions(+), 22 deletions(-) diff --git a/packages/ui/src/ui/components/SortIcon/SortIcon.tsx b/packages/ui/src/ui/components/SortIcon/SortIcon.tsx index b76171878..8fb75376d 100644 --- a/packages/ui/src/ui/components/SortIcon/SortIcon.tsx +++ b/packages/ui/src/ui/components/SortIcon/SortIcon.tsx @@ -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'; @@ -46,9 +48,12 @@ export default class SortIcon extends React.Component { return ( {label && {label}} - + - + ); } diff --git a/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/NodesColumnHeader.tsx b/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/NodesColumnHeader.tsx index 9897abfff..ed6c37559 100644 --- a/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/NodesColumnHeader.tsx +++ b/packages/ui/src/ui/pages/components/tabs/nodes/Nodes/NodesColumnHeader.tsx @@ -31,6 +31,7 @@ export function NodesColumnHeader( toggleColumnSortOrder({ columnName, withUndefined: colInfo?.withUndefined, + allowUnordered: colInfo?.allowUnordered, tableId: COMPONENTS_NODES_TABLE_ID, }), ); diff --git a/packages/ui/src/ui/pages/components/tabs/nodes/tables.tsx b/packages/ui/src/ui/pages/components/tabs/nodes/tables.tsx index 0d201ade0..33686b9ef 100644 --- a/packages/ui/src/ui/pages/components/tabs/nodes/tables.tsx +++ b/packages/ui/src/ui/pages/components/tabs/nodes/tables.tsx @@ -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, + }, ]} /> ); @@ -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" /> @@ -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" /> @@ -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, + }, ]} /> ); @@ -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, + }, ]} /> ); @@ -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, + }, ]} /> ); @@ -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', diff --git a/packages/ui/src/ui/store/actions/tables.ts b/packages/ui/src/ui/store/actions/tables.ts index 0754f8e1f..28ba02901 100644 --- a/packages/ui/src/ui/store/actions/tables.ts +++ b/packages/ui/src/ui/store/actions/tables.ts @@ -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; }; @@ -25,6 +27,7 @@ export function toggleColumnSortOrder({ columnName, tableId, withUndefined, + allowUnordered, allowedOrderTypes, }: ToggleColumnSortOrderParams): TablesThunkAction { return (dispatch, getState) => { @@ -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);