chore(ChytTable): Short names for columns [YTFRONT-3863]

ytsaurus · Nov 29, 2023 · fad8c8f · fad8c8f
1 parent fb36d92
commit fad8c8f
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 72 deletions.
diff --git a/packages/ui/src/ui/constants/chyt-page.ts b/packages/ui/src/ui/constants/chyt-page.ts
@@ -1,3 +1,4 @@
+import type {ChytInfo} from '../store/reducers/chyt/list';
 import createActionTypes from './utils';
 
 export const CHYT_LIST = createActionTypes('CHYT_LIST');
@@ -13,3 +14,14 @@ export const ChytCliquePageTab = {
 };
 
 export const CHYT_SPECLET = createActionTypes('CHYT_SPECLET');
+
+export const CHYT_TABLE_TITLES: Partial<Record<keyof ChytInfo, string>> = {
+    alias: 'CHYT clique alias',
+    instance_count: 'Instances',
+    total_cpu: 'Cores',
+    total_memory: 'Memory',
+    speclet_modification_time: 'Modification time',
+    strawberry_state_modification_time: 'Strawberrry modification time',
+    yt_operation_finish_time: 'Finish time',
+    yt_operation_start_time: 'Start time',
+};
diff --git a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListTable.tsx
@@ -18,12 +18,13 @@ import Label from '../../../components/Label/Label';
 import {chytToggleSortState} from '../../../store/actions/chyt/list-fitlers';
 import {getCluster} from '../../../store/selectors/global';
 import {
-    getChytListColumns,
     getChytListTableItems,
     getChytListTableSortStateByName,
+    getChytListVisibleColumns,
 } from '../../../store/selectors/chyt';
 import {ChytInfo} from '../../../store/reducers/chyt/list';
 import {Page} from '../../../../shared/constants/settings';
+import {CHYT_TABLE_TITLES} from '../../../constants/chyt-page';
 
 import {CliqueState} from '../components/CliqueState';
 
@@ -33,13 +34,13 @@ import './ChytPageListTable.scss';
 const block = cn('chyt-page-list-table');
 
 function useChytListColumns(cluster: string) {
-    const checkedColumns = useSelector(getChytListColumns).filter((i) => i.checked);
+    const checkedColumns = useSelector(getChytListVisibleColumns);
 
     const columns: Array<Column<ChytInfo>> = React.useMemo(() => {
         const columnsByName = {
             instance_count: {
                 name: 'instance_count',
-                header: <ChytListHeader column="instance_count" title="Instances" />,
+                header: <ChytListHeader column="instance_count" />,
                 render({row}) {
                     return (
                         <span className={block('one-row-cell')}>
@@ -54,7 +55,7 @@ function useChytListColumns(cluster: string) {
             } as Column<ChytInfo>,
             total_cpu: {
                 name: 'cores',
-                header: <ChytListHeader column="total_cpu" title="Cores" />,
+                header: <ChytListHeader column="total_cpu" />,
                 render({row}) {
                     return (
                         <span className={block('one-row-cell')}>
@@ -69,7 +70,7 @@ function useChytListColumns(cluster: string) {
             } as Column<ChytInfo>,
             total_memory: {
                 name: 'memory',
-                header: <ChytListHeader column="total_memory" title="Memory" />,
+                header: <ChytListHeader column="total_memory" />,
                 render({row}) {
                     return (
                         <span className={block('one-row-cell')}>
@@ -99,28 +100,17 @@ function useChytListColumns(cluster: string) {
                 name: 'creation_time',
                 header: <ChytListHeader column="creation_time" withUndefined />,
                 render({row}) {
-                    const {creation_time} = row;
-                    return (
-                        <span className={block('one-row-cell')}>
-                            {creation_time ? format.DateTime(creation_time) : format.NO_VALUE}
-                        </span>
-                    );
+                    return <DateTimeCell value={row.creation_time} />;
                 },
-                width: 180,
+                width: 120,
             } as Column<ChytInfo>,
             speclet_modification_time: {
                 name: 'speclet_modification_time',
-                header: (
-                    <ChytListHeader column="speclet_modification_time" title="Modification time" />
-                ),
+                header: <ChytListHeader column="speclet_modification_time" />,
                 render({row}) {
-                    const {speclet_modification_time: value} = row;
-                    return (
-                        <span className={block('one-row-cell')}>
-                            {value ? format.DateTime(value) : format.NO_VALUE}
-                        </span>
-                    );
+                    return <DateTimeCell value={row.speclet_modification_time} />;
                 },
+                width: 120,
             } as Column<ChytInfo>,
             stage: {
                 name: 'stage',
@@ -133,66 +123,35 @@ function useChytListColumns(cluster: string) {
             } as Column<ChytInfo>,
             strawberry_state_modification_time: {
                 name: 'strawberry_state_modification_time',
-                header: (
-                    <ChytListHeader
-                        column="strawberry_state_modification_time"
-                        title="Strawberrry modification time"
-                    />
-                ),
+                header: <ChytListHeader column="strawberry_state_modification_time" />,
                 render({row}) {
-                    const {strawberry_state_modification_time: value} = row;
-                    return (
-                        <span className={block('one-row-cell')}>
-                            {value ? format.DateTime(value) : format.NO_VALUE}
-                        </span>
-                    );
+                    return <DateTimeCell value={row.strawberry_state_modification_time} />;
                 },
+                width: 120,
             } as Column<ChytInfo>,
             yt_operation_finish_time: {
                 name: 'yt_operation_finish_time',
-                header: (
-                    <ChytListHeader
-                        column="yt_operation_finish_time"
-                        title="Finish time"
-                        withUndefined
-                    />
-                ),
+                header: <ChytListHeader column="yt_operation_finish_time" withUndefined />,
                 render({row}) {
-                    const {yt_operation_finish_time: value} = row;
-                    return (
-                        <span className={block('one-row-cell')}>
-                            {value ? format.DateTime(value) : format.NO_VALUE}
-                        </span>
-                    );
+                    return <DateTimeCell value={row.yt_operation_finish_time} />;
                 },
-                width: 180,
+                width: 120,
             } as Column<ChytInfo>,
             yt_operation_start_time: {
                 name: 'yt_operation_start_time',
-                header: (
-                    <ChytListHeader
-                        column="yt_operation_start_time"
-                        title="Start time"
-                        withUndefined
-                    />
-                ),
+                header: <ChytListHeader column="yt_operation_start_time" withUndefined />,
                 render({row}) {
-                    const {yt_operation_start_time: value} = row;
-                    return (
-                        <span className={block('one-row-cell')}>
-                            {value ? format.DateTime(value) : format.NO_VALUE}
-                        </span>
-                    );
+                    return <DateTimeCell value={row.yt_operation_start_time} />;
                 },
-                width: 180,
+                width: 120,
             } as Column<ChytInfo>,
         };
 
-        const res = checkedColumns.map((i) => columnsByName[i.column]);
+        const res = checkedColumns.map((i) => columnsByName[i]);
         return [
             {
                 name: 'alias',
-                header: <ChytListHeader column="alias" title="CHYT clique alias" />,
+                header: <ChytListHeader column="alias" />,
                 render({row}) {
                     return (
                         <div>
@@ -216,7 +175,7 @@ function useChytListColumns(cluster: string) {
             } as Column<ChytInfo>,
             {
                 name: 'creator',
-                header: <ChytListHeader column="creator" title="Creator" />,
+                header: <ChytListHeader column="creator" />,
                 render({row}) {
                     return (
                         <span className={block('one-row-cell')}>
@@ -258,13 +217,16 @@ function useChytListColumns(cluster: string) {
     return columns;
 }
 
+const SHORT_TITLES: Partial<Record<keyof ChytInfo, string>> = {
+    speclet_modification_time: 'Modif. time',
+    strawberry_state_modification_time: 'SB mod. time',
+};
+
 function ChytListHeader({
     column,
-    title,
     withUndefined,
 }: {
     column: keyof ChytInfo;
-    title?: string;
     withUndefined?: boolean;
 }) {
     const dispatch = useDispatch();
@@ -274,7 +236,8 @@ function ChytListHeader({
             allowUnordered
             withUndefined={withUndefined}
             column={column}
-            title={title ?? format.ReadableField(column)}
+            title={CHYT_TABLE_TITLES[column] ?? format.ReadableField(column)}
+            shortTitle={SHORT_TITLES[column]}
             sortable
             {...sortState[column]}
             toggleSort={(col, nextOrder, options) => {
@@ -284,6 +247,21 @@ function ChytListHeader({
     );
 }
 
+function DateTimeCell({value}: {value?: string}) {
+    if (!value) {
+        return <span className={block('one-row-cell')}>{format.NO_VALUE}</span>;
+    }
+
+    const time: string = format.DateTime(value);
+    const lastSpace = time.lastIndexOf(' ');
+    return (
+        <React.Fragment>
+            <span>{time.substring(0, lastSpace)}</span>
+            <div>{time.substring(lastSpace + 1)}</div>
+        </React.Fragment>
+    );
+}
+
 function ChytPageListTable() {
     const items = useSelector(getChytListTableItems);
     const cluster = useSelector(getCluster);

diff --git a/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListToolbar.tsx b/packages/ui/src/ui/pages/chyt/ChytPageList/ChytPageListToolbar.tsx
@@ -21,6 +21,7 @@ import {
 } from '../../../store/selectors/chyt';
 import {ChytListFilters} from '../../../store/reducers/chyt/list-filters';
 import {chytSetVisibleColumns} from '../../../store/actions/chyt/list';
+import {CHYT_TABLE_TITLES} from '../../../constants/chyt-page';
 
 import './ChytPageListToolbar.scss';
 
@@ -138,7 +139,7 @@ function ChytListColumnsButton() {
             isVisible={visible}
             items={columns.map((i) => {
                 return {
-                    name: format.ReadableField(i.column),
+                    name: CHYT_TABLE_TITLES[i.column] ?? format.ReadableField(i.column),
                     checked: i.checked,
                     data: {
                         column: i.column,

diff --git a/packages/ui/src/ui/pages/chyt/components/CliqueState.tsx b/packages/ui/src/ui/pages/chyt/components/CliqueState.tsx
@@ -10,7 +10,6 @@ const THEME_MAP: Partial<
     good: 'success',
     failed: 'danger',
     active: 'success',
-    inactive: 'danger',
     pending: 'info',
 };
 

diff --git a/packages/ui/src/ui/store/actions/chyt/list.ts b/packages/ui/src/ui/store/actions/chyt/list.ts
@@ -5,7 +5,7 @@ import type {ChytListAction} from '../../reducers/chyt/list';
 import {CHYT_LIST} from '../../../constants/chyt-page';
 import CancelHelper, {isCancelled} from '../../../utils/cancel-helper';
 import {getCluster, isDeveloper} from '../../../store/selectors/global';
-import {getChytListColumns} from '../../../store/selectors/chyt';
+import {getChytListVisibleColumns} from '../../../store/selectors/chyt';
 
 import {ChytApi, chytApiAction} from './api';
 import {SettingsThunkAction, setSettingByKey} from '../settings';
@@ -19,7 +19,7 @@ export function chytLoadList(): ChytListThunkAction<void> {
         const state = getState();
         const cluster = getCluster(state);
         const isAdmin = isDeveloper(state);
-        const columns = getChytListColumns(state);
+        const columns = getChytListVisibleColumns(state);
 
         dispatch({type: CHYT_LIST.REQUEST});
 
@@ -31,7 +31,7 @@ export function chytLoadList(): ChytListThunkAction<void> {
                     'yt_operation_id' as const,
                     'creator' as const,
                     'state' as const,
-                    ...columns.map((i) => i.column),
+                    ...columns,
                 ],
             },
             {isAdmin, cancelToken: cancelHelper.removeAllAndGenerateNextToken()},

diff --git a/packages/ui/src/ui/store/selectors/chyt/index.ts b/packages/ui/src/ui/store/selectors/chyt/index.ts
@@ -60,6 +60,22 @@ export const getChytListColumnsFromSettings = (state: RootState) => {
     );
 };
 
+export const getChytListVisibleColumns = createSelector(
+    [getChytListColumnsFromSettings],
+    (columns): Array<ChytListColumns> => {
+        const userColumns = new Set(columns);
+        return compact_(
+            columns.map((k) => {
+                return CHYT_LIST_SELECTABLE_COLUMNS[
+                    k as keyof typeof CHYT_LIST_SELECTABLE_COLUMNS
+                ] && userColumns.has(k)
+                    ? (k as ChytListColumns)
+                    : null;
+            }),
+        );
+    },
+);
+
 export const getChytListColumns = createSelector(
     [getChytListColumnsFromSettings],
     (columns): Array<ChytColumnItem> => {