feat: add top nodes by memory table (#562)

krosy1337 · web-flow · commit 0d4ccf2a8525 · 2023-10-19T14:00:51.000+03:00
diff --git a/src/containers/Nodes/getNodesColumns.tsx b/src/containers/Nodes/getNodesColumns.tsx
@@ -5,10 +5,13 @@ import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
-import {formatBytesToGigabyte} from '../../utils/dataFormatters/dataFormatters';
+import {
+    formatBytesToGigabyte,
+    formatStorageValuesToGb,
+} from '../../utils/dataFormatters/dataFormatters';
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 import type {GetNodeRefFunc} from '../../types/additionalProps';
-import {getLoadSeverityForNode} from '../../store/reducers/tenantOverview/topNodesByLoad/utils';
+import {getLoadSeverityForNode} from '../../store/reducers/nodes/utils';
 import {UsageLabel} from '../../components/UsageLabel/UsageLabel';
 
 const NODES_COLUMNS_IDS = {
@@ -23,6 +26,7 @@ const NODES_COLUMNS_IDS = {
     LoadAverage: 'LoadAverage',
     Tablets: 'Tablets',
     TopNodesLoadAverage: 'TopNodesLoadAverage',
+    TopNodesMemory: 'TopNodesMemory',
 };
 
 interface GetNodesColumnsProps {
@@ -83,6 +87,7 @@ const uptimeColumn: Column<NodesPreparedEntity> = {
     sortAccessor: ({StartTime}) => StartTime && -StartTime,
     align: DataTable.RIGHT,
     width: '110px',
+    sortable: false,
 };
 
 const memoryColumn: Column<NodesPreparedEntity> = {
@@ -149,6 +154,7 @@ const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> =>
         );
     },
     align: DataTable.LEFT,
+    sortable: false,
 });
 
 const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
@@ -168,6 +174,25 @@ const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
     sortable: false,
 };
 
+const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
+    name: NODES_COLUMNS_IDS.TopNodesMemory,
+    header: 'Memory',
+    render: ({row}) =>
+        row.MemoryUsed ? (
+            <ProgressViewer
+                value={row.MemoryUsed}
+                capacity={row.MemoryLimit}
+                formatValues={formatStorageValuesToGb}
+                colorizeProgress={true}
+            />
+        ) : (
+            '—'
+        ),
+    align: DataTable.LEFT,
+    width: '140px',
+    sortable: false,
+};
+
 export function getNodesColumns({
     tabletsPath,
     getNodeRef,
@@ -197,3 +222,17 @@ export function getTopNodesByCpuColumns(
 ): Column<NodesPreparedEntity>[] {
     return [cpuColumn, nodeIdColumn, getHostColumn(getNodeRef)];
 }
+
+export function getTopNodesByMemoryColumns({
+    tabletsPath,
+    getNodeRef,
+}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+    return [
+        nodeIdColumn,
+        getHostColumn(getNodeRef, true),
+        uptimeColumn,
+        topNodesMemoryColumn,
+        topNodesLoadAverageColumn,
+        getTabletsColumn(tabletsPath),
+    ];
+}
diff --git a/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss b/src/containers/Tenant/Diagnostics/DetailedOverview/DetailedOverview.scss
@@ -11,7 +11,6 @@
         flex-direction: column;
 
         min-width: 300px;
-        height: max-content;
     }
 
     &__modal {
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TenantMemory.tsx
@@ -0,0 +1,9 @@
+import {TopNodesByMemory} from './TopNodesByMemory';
+
+interface TenantMemoryProps {
+    path: string;
+}
+
+export function TenantMemory({path}: TenantMemoryProps) {
+    return <TopNodesByMemory path={path} />;
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantMemory/TopNodesByMemory.tsx
@@ -0,0 +1,55 @@
+import {useDispatch} from 'react-redux';
+import {useCallback} from 'react';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    getTopNodesByMemory,
+    selectTopNodesByMemory,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory';
+import type {AdditionalNodesProps} from '../../../../../types/additionalProps';
+import {getTopNodesByMemoryColumns} from '../../../../Nodes/getNodesColumns';
+import {TenantOverviewTableLayout} from '../TenantOverviewTableLayout';
+
+import i18n from '../i18n';
+
+interface TopNodesByMemoryProps {
+    path: string;
+    additionalNodesProps?: AdditionalNodesProps;
+}
+
+export function TopNodesByMemory({path, additionalNodesProps}: TopNodesByMemoryProps) {
+    const dispatch = useDispatch();
+
+    const {wasLoaded, loading, error} = useTypedSelector((state) => state.topNodesByMemory);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const topNodes = useTypedSelector(selectTopNodesByMemory);
+    const columns = getTopNodesByMemoryColumns({
+        getNodeRef: additionalNodesProps?.getNodeRef,
+    });
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopNodesByMemory({tenant: path}));
+        },
+        [dispatch, path],
+    );
+
+    useAutofetcher(fetchNodes, [fetchNodes], autorefresh);
+
+    return (
+        <TenantOverviewTableLayout
+            data={topNodes || []}
+            columns={columns}
+            title="Top nodes by memory"
+            loading={loading}
+            wasLoaded={wasLoaded}
+            error={error}
+            emptyDataMessage={i18n('top-nodes.empty-data')}
+        />
+    );
+}
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.scss
@@ -1,6 +1,9 @@
 @import '../../../../styles/mixins.scss';
 
 .tenant-overview {
+    overflow: auto;
+
+    height: 100%;
     padding-bottom: 20px;
 
     &__loader {
@@ -81,6 +84,13 @@
         line-height: var(--yc-text-body-2-line-height);
     }
 
+    &__info {
+        position: sticky;
+        left: 0;
+
+        width: max-content;
+    }
+
     &__title {
         margin-bottom: 10px;
 
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx b/src/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.tsx
@@ -16,9 +16,9 @@ import {TenantCpu} from './TenantCpu/TenantCpu';
 import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
 import {TenantStorage} from './TenantStorage/TenantStorage';
+import {TenantMemory} from './TenantMemory/TenantMemory';
 import {useHealthcheck} from './useHealthcheck';
 
-import i18n from './i18n';
 import './TenantOverview.scss';
 
 const b = cn('tenant-overview');
@@ -127,7 +127,7 @@ export function TenantOverview({
                 return <TenantStorage tenantName={tenantName} metrics={storageMetrics} />;
             }
             case TENANT_METRICS_TABS_IDS.memory: {
-                return i18n('label.under-development');
+                return <TenantMemory path={tenantName} />;
             }
             case TENANT_METRICS_TABS_IDS.healthcheck: {
                 return <HealthcheckDetails issueTrees={issueTrees} error={healthcheckError} />;
@@ -148,19 +148,21 @@ export function TenantOverview({
 
     return (
         <div className={b()}>
-            <div className={b('top-label')}>{tenantType}</div>
-            <div className={b('top')}>
-                {renderName()}
-                {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+            <div className={b('info')}>
+                <div className={b('top-label')}>{tenantType}</div>
+                <div className={b('top')}>
+                    {renderName()}
+                    {additionalTenantProps?.getMonitoringLink?.(Name, Type)}
+                </div>
+                <MetricsCards
+                    metrics={calculatedMetrics}
+                    issuesStatistics={issuesStatistics}
+                    selfCheckResult={selfCheckResult}
+                    fetchHealthcheck={fetchHealthcheck}
+                    healthcheckLoading={healthcheckLoading}
+                    healthcheckError={healthcheckError}
+                />
             </div>
-            <MetricsCards
-                metrics={calculatedMetrics}
-                issuesStatistics={issuesStatistics}
-                selfCheckResult={selfCheckResult}
-                fetchHealthcheck={fetchHealthcheck}
-                healthcheckLoading={healthcheckLoading}
-                healthcheckError={healthcheckError}
-            />
             {renderTabContent()}
         </div>
     );
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json
@@ -7,7 +7,5 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
-  "top-groups.empty-data": "No such groups",
-
-  "label.under-development": "This section is under development"
+  "top-groups.empty-data": "No such groups"
 }
diff --git a/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json b/src/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json
@@ -7,7 +7,5 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
-  "top-groups.empty-data": "Нет групп",
-
-  "label.under-development": "Этот раздел находится в разработке"
+  "top-groups.empty-data": "Нет групп"
 }
diff --git a/src/store/reducers/index.ts b/src/store/reducers/index.ts
@@ -3,6 +3,7 @@ import {combineReducers} from 'redux';
 import nodes from './nodes/nodes';
 import {topNodesByLoad} from './tenantOverview/topNodesByLoad/topNodesByLoad';
 import {topNodesByCpu} from './tenantOverview/topNodesByCpu/topNodesByCpu';
+import {topNodesByMemory} from './tenantOverview/topNodesByMemory/topNodesByMemory';
 import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
@@ -47,6 +48,7 @@ export const rootReducer = {
     nodes,
     topNodesByLoad,
     topNodesByCpu,
+    topNodesByMemory,
     cluster,
     clusterNodes,
     tenant,
diff --git a/src/store/reducers/nodes/types.ts b/src/store/reducers/nodes/types.ts
@@ -33,6 +33,7 @@ export interface NodesPreparedEntity {
     StartTime?: string;
     Uptime: string;
     MemoryUsed?: string;
+    MemoryLimit?: string;
     PoolStats?: TPoolStats[];
     LoadAverage?: number[];
     Tablets?: TFullTabletStateInfo[] | TComputeTabletStateInfo[];
diff --git a/src/store/reducers/nodes/utils.ts b/src/store/reducers/nodes/utils.ts
@@ -1,6 +1,7 @@
 import type {TComputeInfo, TComputeNodeInfo, TComputeTenantInfo} from '../../../types/api/compute';
 import type {TNodesInfo} from '../../../types/api/nodes';
 import {calcUptime} from '../../../utils/dataFormatters/dataFormatters';
+import {generateEvaluator} from '../../../utils/generateEvaluator';
 
 import type {NodesHandledResponse, NodesPreparedEntity} from './types';
 
@@ -64,3 +65,5 @@ export const prepareNodesData = (data: TNodesInfo): NodesHandledResponse => {
         FoundNodes: Number(data.FoundNodes),
     };
 };
+
+export const getLoadSeverityForNode = generateEvaluator(60, 80, ['success', 'warning', 'danger']);
diff --git a/src/store/reducers/tenantOverview/topNodesByLoad/utils.ts b/src/store/reducers/tenantOverview/topNodesByLoad/utils.ts
diff --git a/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts b/src/store/reducers/tenantOverview/topNodesByMemory/topNodesByMemory.ts
@@ -0,0 +1,87 @@
+import type {Reducer} from 'redux';
+
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
+import {createApiRequest, createRequestActionTypes} from '../../../utils';
+import {prepareNodesData} from '../../nodes/utils';
+import type {NodesApiRequestParams} from '../../nodes/types';
+import type {TopNodesByMemoryAction, TopNodesByMemoryState, TopNodesByMemorySlice} from './types';
+
+export const FETCH_TOP_NODES_BY_MEMORY = createRequestActionTypes(
+    'topNodesByMemory',
+    'FETCH_TOP_NODES_BY_MEMORY',
+);
+const SET_DATA_WAS_NOT_LOADED = 'topNodesByMemory/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+};
+
+export const topNodesByMemory: Reducer<TopNodesByMemoryState, TopNodesByMemoryAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_TOP_NODES_BY_MEMORY.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TOP_NODES_BY_MEMORY.SUCCESS: {
+            return {
+                ...state,
+                data: action.data?.Nodes,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOP_NODES_BY_MEMORY.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+const concurrentId = 'getTopNodeByMemory';
+
+export function getTopNodesByMemory({
+    type = 'any',
+    sortOrder = -1,
+    sortValue = 'Memory',
+    limit = TENANT_OVERVIEW_TABLES_LIMIT,
+    ...params
+}: NodesApiRequestParams) {
+    return createApiRequest({
+        request: window.api.getNodes(
+            {type, sortOrder, sortValue, limit, ...params},
+            {concurrentId},
+        ),
+        actions: FETCH_TOP_NODES_BY_MEMORY,
+        dataHandler: prepareNodesData,
+    });
+}
+
+export const selectTopNodesByMemory = (state: TopNodesByMemorySlice) => state.topNodesByMemory.data;
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
diff --git a/src/store/reducers/tenantOverview/topNodesByMemory/types.ts b/src/store/reducers/tenantOverview/topNodesByMemory/types.ts
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss

Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,6 @@`
`11`	`11`	`flex-direction: column;`
`12`	`12`
`13`	`13`	`min-width: 300px;`
`14`		`- height: max-content;`
`15`	`14`	`}`
`16`	`15`
`17`	`16`	`&__modal {`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,5 @@`
`7`	`7`	`"title.pools": "Pools",`
`8`	`8`	`"title.metrics": "Metrics",`
`9`	`9`
`10`		`- "top-groups.empty-data": "No such groups",`
`11`		`-`
`12`		`- "label.under-development": "This section is under development"`
	`10`	`+ "top-groups.empty-data": "No such groups"`
`13`	`11`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,5 @@`
`7`	`7`	`"title.pools": "Пулы",`
`8`	`8`	`"title.metrics": "Метрики",`
`9`	`9`
`10`		`- "top-groups.empty-data": "Нет групп",`
`11`		`-`
`12`		`- "label.under-development": "Этот раздел находится в разработке"`
	`10`	`+ "top-groups.empty-data": "Нет групп"`
`13`	`11`	`}`