feat(Components/Versions): display more columns of node types [YTFRON…

…T-4406]

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

@@ -1,11 +1,14 @@
 .versions-summary {
+    overflow-x: auto;
+
     .data-table__row {
         box-sizing: border-box;
         border-bottom: 1px solid var(--light-divider);
         height: 40px;
     }
 
     .data-table__head-row {
+        background-color: var(--g-color-base-background);
         border-bottom: 1px solid var(--dark-divider);
     }
 
@@ -14,11 +17,6 @@
         vertical-align: middle;
     }
 
-    .data-table__th {
-        max-width: 100px;
-        min-width: 100px;
-    }
-
     &__value {
         &_clickable {
             &:hover {
@@ -46,6 +44,7 @@
     }
 
     &__row {
+        background-color: var(--g-color-base-background);
         &_special {
             background-color: var(--light-background);
         }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {CSSProperties} from 'react';
 import {ConnectedProps, connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
@@ -149,6 +149,14 @@ class VersionsSummary extends React.Component<Props> {
                 sortable: false,
                 sortAccessor: (row) => row.version,
                 header: this.renderHeader('version', 'Versions'),
+                customStyle: () =>
+                    ({
+                        position: 'sticky',
+                        left: 0,
+                        background: 'inherit',
+                        zIndex: 1,
+                        boxShadow: 'inset -1px 0 var(--dark-divider)',
+                    }) as CSSProperties,
             },
 
             ...visibleColumns.map((item) => this.makeColumnInfo(item)),

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

@@ -11,7 +11,6 @@ import {getCluster} from '../../../../store/selectors/global';
 import {ThunkAction} from 'redux-thunk';
 import {RootState} from '../../../../store/reducers';
 import {
-    HostType,
     SummaryItem,
     VersionHostInfo,
     VersionSummaryItem,
@@ -24,7 +23,7 @@ export interface DiscoverVersionsData {
     summary: Record<'total' | 'error' | string, VersionSummary>;
 }
 
-type VersionSummary = Record<HostType, SummaryItem>;
+type VersionSummary = Record<string, SummaryItem>;
 
 type NodesThunkAction<T = void> = ThunkAction<Promise<T>, RootState, unknown, any>;
 
@@ -97,7 +96,7 @@ function prepareGroup(group: VersionSummary, version: string) {
         (acc, value, type) => {
             const {total, banned, offline} = value;
 
-            const k = type as HostType;
+            const k = type;
             acc[k] = total;
             acc.banned += banned;
             acc.offline += offline;

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

@@ -36,29 +36,18 @@ export interface SummaryItem {
 
 export type VersionHostState = 'online' | 'offline' | 'banned';
 
-export type HostType =
-    | 'controller_agent'
-    | 'primary_master'
-    | 'secondary_master'
-    | 'node'
-    | 'cluster_node'
-    | 'http_proxy'
-    | 'rpc_proxy'
-    | 'scheduler'
-    | 'job_proxy';
-
 export interface VersionHostInfo {
     address: string;
     banned: boolean;
-    type: HostType;
+    type: string;
     version: string;
     start_time: string;
     state: string;
     offline: boolean;
     error: unknown;
 }
 
-export type VersionSummaryItem = Partial<Record<HostType, number>> &
+export type VersionSummaryItem = Partial<Record<string, number>> &
     Record<'banned' | 'online' | 'offline', number> & {version: string};
 
 const ephemeralState: VersionsState = {

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

@@ -3,7 +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';
+import format from '../.../../../../../common/hammer/format';
 
 export const getSummarySortState = (
     state: RootState,
@@ -39,39 +39,33 @@ export const getVersionsSummaryData = createSelector(
     },
 );
 
-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});
-            }
+export const getVersionsSummaryVisibleColumns = createSelector([getSummary], (summary = []) => {
+    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');
+    for (const key in summary[summary.length - 1]) {
+        if (['online', 'offline', 'banned', 'version'].includes(key)) continue;
+        tryToAdd(key, format.Readable(key));
+    }
 
-        return res;
-    },
-);
+    tryToAdd('online', 'Online');
+    tryToAdd('offline', 'Offline');
+    tryToAdd('banned', 'Banned');
+
+    return res;
+});
 
 function getTotalElementOfSummary(summary: ReturnType<typeof getSummary>) {
     return summary[summary.length - 1];