chore(Components/Version): Add 'Job proxy' column [YTFRONT-3854]

packages/ui/src/ui/constants/components/versions/versions_v2.ts

@@ -8,6 +8,5 @@ export const DISCOVER_VERSIONS = createActionTypes(PREFIX + 'DISCOVER_VERSIONS')
 export const CHANGE_VERSION_SUMMARY_PARTIAL = 'CHANGE_VERSION_SUMMARY_PARTIAL';
 
 export const COMPONENTS_VERSIONS_DETAILED_TABLE_ID = 'components/versions/detailed';
-export const COMPONENTS_VERSIONS_SUMMARY_TABLE_ID = 'components/versions/summary';
 export const POLLING_INTERVAL = 120 * 1000;
 export const DEBOUNCE_TIME = 700;

packages/ui/src/ui/pages/components/tabs/Versions/VersionSummary.scss

@@ -30,7 +30,7 @@
 
     &__version {
         display: flex;
-        margin-top: -2px;
+        align-items: center;
     }
 
     .data-table__row {

packages/ui/src/ui/pages/components/tabs/Versions/VersionSummary.tsx

@@ -11,6 +11,7 @@ import {
     getHideOfflineValue,
     getSummarySortState,
     getVersionsSummaryData,
+    getVersionsSummaryVisibleColumns,
 } from '../../../../store/selectors/components/versions/versions_v2-ts';
 
 import hammer from '../../../../common/hammer';
@@ -25,7 +26,6 @@ import Link from '../../../../components/Link/Link';
 import ColumnHeader from '../../../../components/ColumnHeader/ColumnHeader';
 import {VersionCellWithAction} from './VersionCell';
 import {VersionSummaryItem} from '../../../../store/reducers/components/versions/versions_v2';
-import {isSupportedClusterNodeForVersions} from '../../../../store/selectors/thor/support';
 
 import './VersionSummary.scss';
 
@@ -96,18 +96,22 @@ class VersionsSummary extends React.Component<Props> {
         );
     };
 
-    makeColumnInfo(
-        key: keyof VersionSummaryItem,
-        name: string,
-        shortName?: string,
-    ): DT100.Column<VersionSummaryItem> {
+    makeColumnInfo({
+        type,
+        name,
+        shortName,
+    }: {
+        type: keyof VersionSummaryItem;
+        name: string;
+        shortName?: string;
+    }): DT100.Column<VersionSummaryItem> {
         return {
             name: shortName || name,
             title: name,
             sortable: false,
-            render: this.renderNumber.bind(this, key),
+            render: this.renderNumber.bind(this, type),
             align: 'right',
-            header: this.renderHeader(key, name, shortName),
+            header: this.renderHeader(type, name, shortName),
         };
     }
 
@@ -134,7 +138,7 @@ class VersionsSummary extends React.Component<Props> {
     };
 
     render() {
-        const {useClusterNode} = this.props;
+        const {visibleColumns} = this.props;
         const columns: Array<DT100.Column<VersionSummaryItem>> = [
             {
                 name: 'version',
@@ -143,16 +147,8 @@ class VersionsSummary extends React.Component<Props> {
                 sortAccessor: (row) => row.version,
                 header: this.renderHeader('version', 'Versions'),
             },
-            this.makeColumnInfo('primary_master', 'Primary Masters', 'Pri Masters'),
-            this.makeColumnInfo('secondary_master', 'Secondary masters', 'Sec Masters'),
-            this.makeColumnInfo('scheduler', 'Schedulers'),
-            this.makeColumnInfo('controller_agent', 'Controller Agents', 'CA'),
-            this.makeColumnInfo(useClusterNode ? 'cluster_node' : 'node', 'Nodes'),
-            this.makeColumnInfo('http_proxy', 'HTTP Proxies'),
-            this.makeColumnInfo('rpc_proxy', 'RPC Proxies'),
-            this.makeColumnInfo('online', 'Online'),
-            this.makeColumnInfo('offline', 'Offline'),
-            this.makeColumnInfo('banned', 'Banned'),
+
+            ...visibleColumns.map((item) => this.makeColumnInfo(item)),
         ];
 
         const {items, loading, loaded, checkedHideOffline} = this.props;
@@ -209,15 +205,15 @@ const mapStateToProps = (state: RootState) => {
     const items = getVersionsSummaryData(state);
     const sortState = getSummarySortState(state);
 
-    const useClusterNode = isSupportedClusterNodeForVersions(state);
+    const visibleColumns = getVersionsSummaryVisibleColumns(state);
 
     return {
         loading: loading as boolean,
         loaded: loaded as boolean,
         items,
         sortState,
         checkedHideOffline: getHideOfflineValue(state),
-        useClusterNode,
+        visibleColumns,
     };
 };
 

packages/ui/src/ui/store/reducers/components/versions/versions_v2.ts

@@ -44,7 +44,8 @@ export type HostType =
     | 'cluster_node'
     | 'http_proxy'
     | 'rpc_proxy'
-    | 'scheduler';
+    | 'scheduler'
+    | 'job_proxy';
 
 export interface VersionHostInfo {
     address: string;
@@ -57,20 +58,6 @@ export interface VersionHostInfo {
     error: unknown;
 }
 
-export const NODE_ROLES_ORDER = [
-    'primary_master',
-    'secondary_master',
-    'job_proxy',
-    'controller_agent',
-    'nodes',
-    'cluster_node',
-    'controller_agent',
-    'http_proxy',
-    'rpc_proxy',
-] as const;
-
-export type NodeRoleType = (typeof NODE_ROLES_ORDER)[number];
-
 export type VersionSummaryItem = Partial<Record<HostType, number>> &
     Record<'banned' | 'online' | 'offline', number> & {version: string};
 

packages/ui/src/ui/store/reducers/tables.js

@@ -5,10 +5,7 @@ import {
     TOGGLE_COLUMN_SORT_ORDER,
 } from '../../constants/tables';
 import {ACCOUNTS_TABLE_ID} from '../../constants/accounts/accounts';
-import {
-    COMPONENTS_VERSIONS_DETAILED_TABLE_ID,
-    COMPONENTS_VERSIONS_SUMMARY_TABLE_ID,
-} from '../../constants/components/versions/versions_v2';
+import {COMPONENTS_VERSIONS_DETAILED_TABLE_ID} from '../../constants/components/versions/versions_v2';
 import {OPERATION_JOBS_TABLE_ID} from '../../constants/operations/jobs';
 import {
     COMPONENTS_NODES_NODE_TABLE_ID,
@@ -42,7 +39,6 @@ export const initialState = {
 
     [OPERATION_JOBS_TABLE_ID]: {field: 'start_time', asc: true},
 
-    [COMPONENTS_VERSIONS_SUMMARY_TABLE_ID]: {field: 'version', asc: true},
     [COMPONENTS_VERSIONS_DETAILED_TABLE_ID]: {field: 'address', asc: true},
 
     [COMPONENTS_NODES_TABLE_ID]: {field: 'host', asc: true},

packages/ui/src/ui/store/selectors/components/versions/versions_v2-ts.ts

@@ -3,6 +3,7 @@ import {RootState} from '../../../../store/reducers';
 import {FIX_MY_TYPE, SortState} from '../../../../types';
 import {sortArrayBySortState} from '../../../../utils/sort-helpers';
 import {VersionSummaryItem} from '../../../../store/reducers/components/versions/versions_v2';
+import {isSupportedClusterNodeForVersions} from '../../../../store/selectors/thor/support';
 
 export const getSummarySortState = (
     state: RootState,
@@ -19,7 +20,7 @@ export const getVersionsSummaryData = createSelector(
     [getSummary, getSummarySortState, getHideOfflineValue],
     (summary = [], sortState, checkedHideOffline) => {
         const error = summary[summary.length - 2];
-        const total = summary[summary.length - 1];
+        const total = getTotalElementOfSummary(summary);
         let items = summary.slice(0, summary.length - 2);
 
         if (checkedHideOffline) {
@@ -37,3 +38,41 @@ export const getVersionsSummaryData = createSelector(
         return items;
     },
 );
+
+export const getVersionsSummaryVisibleColumns = createSelector(
+    [getSummary, isSupportedClusterNodeForVersions],
+    (summary = [], useClusterNode) => {
+        const visibleTypes = new Set<string>();
+        const total = getTotalElementOfSummary(summary);
+        Object.keys(total ?? {}).forEach((k) => {
+            const key = k as keyof typeof total;
+            if (total?.[key]) {
+                visibleTypes.add(key);
+            }
+        });
+        const res: Array<{type: keyof VersionSummaryItem; name: string; shortName: string}> = [];
+        function tryToAdd(type: keyof VersionSummaryItem, name: string, shortName = '') {
+            if (visibleTypes.has(type)) {
+                res.push({type, name, shortName});
+            }
+        }
+
+        tryToAdd('primary_master', 'Primary Masters', 'Pri Masters');
+        tryToAdd('secondary_master', 'Secondary masters', 'Sec Masters');
+        tryToAdd('scheduler', 'Schedulers');
+        tryToAdd('controller_agent', 'Controller Agents', 'CA');
+        tryToAdd(useClusterNode ? 'cluster_node' : 'node', 'Nodes');
+        tryToAdd('http_proxy', 'HTTP Proxies');
+        tryToAdd('rpc_proxy', 'RPC Proxies');
+        tryToAdd('job_proxy', 'Job Proxies');
+        tryToAdd('online', 'Online');
+        tryToAdd('offline', 'Offline');
+        tryToAdd('banned', 'Banned');
+
+        return res;
+    },
+);
+
+function getTotalElementOfSummary(summary: ReturnType<typeof getSummary>) {
+    return summary[summary.length - 1];
+}

packages/ui/src/ui/utils/components/versions/tables_v2.js

@@ -1,7 +1,4 @@
-import {
-    COMPONENTS_VERSIONS_DETAILED_TABLE_ID,
-    COMPONENTS_VERSIONS_SUMMARY_TABLE_ID,
-} from '../../../constants/components/versions/versions_v2';
+import {COMPONENTS_VERSIONS_DETAILED_TABLE_ID} from '../../../constants/components/versions/versions_v2';
 import {
     changeHostFilter,
     changeTypeFilter,
@@ -52,7 +49,6 @@ export const tableProps = {
                 sort: true,
                 caption: 'Version',
             },
-
             state: {
                 get(item) {
                     return item.state;
@@ -78,89 +74,6 @@ export const tableProps = {
                 sort: true,
                 caption: 'Type',
             },
-            primary_masters: {
-                get(item) {
-                    return item.primary_master || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Pri Masters',
-                title: 'Primary  Masters',
-            },
-            secondary_masters: {
-                get(item) {
-                    return item.secondary_master || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Sec Masters',
-                title: 'Secondary Masters',
-            },
-            schedulers: {
-                get(item) {
-                    return item.scheduler || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Schedulers',
-            },
-            controller_agents: {
-                get(item) {
-                    return item.controller_agent || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'CA',
-                title: 'Control Agents',
-            },
-            nodes: {
-                get(item) {
-                    return item.node || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Nodes',
-            },
-            http_proxies: {
-                get(item) {
-                    return item.http_proxy || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'HTTP Proxies',
-            },
-            rpc_proxies: {
-                get(item) {
-                    return item.rpc_proxy || 0;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'RPC Proxies',
-            },
-            online_count: {
-                get(item) {
-                    return item.online;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Online',
-            },
-            offline_count: {
-                get(item) {
-                    return item.offline;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Offline',
-            },
-            banned_count: {
-                get(item) {
-                    return item.banned;
-                },
-                align: 'right',
-                sort: true,
-                caption: 'Banned',
-            },
             error: {
                 get(item) {
                     return item.error;
@@ -179,38 +92,13 @@ export const tableProps = {
             },
         },
         sets: {
-            summary: {
-                items: [
-                    'version',
-                    'primary_masters',
-                    'secondary_masters',
-                    'schedulers',
-                    'controller_agents',
-                    'nodes',
-                    'http_proxies',
-                    'rpc_proxies',
-                    'online_count',
-                    'offline_count',
-                    'banned_count',
-                ],
-            },
             detailed: {
                 items: ['address', 'version', 'state', 'banned', 'type', 'error', 'start_time'],
             },
         },
     },
 };
 
-export const summaryTableProps = {
-    ...tableProps,
-    css: 'components-versions-summary',
-    tableId: COMPONENTS_VERSIONS_SUMMARY_TABLE_ID,
-    columns: {
-        ...tableProps.columns,
-        mode: 'summary',
-    },
-};
-
 export const detailsTableProps = {
     ...tableProps,
     tableId: COMPONENTS_VERSIONS_DETAILED_TABLE_ID,