ydb-embedded-ui 4.20.4 → 4.21.1

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,5 +1,6 @@
-import DataTable, {type Column} from '@gravity-ui/react-data-table';
+import DataTable, {type Column as DataTableColumn} from '@gravity-ui/react-data-table';
 
+import type {Column as VirtualTableColumn} from '../../components/VirtualTable';
 import {PoolsGraph} from '../../components/PoolsGraph/PoolsGraph';
 import {ProgressViewer} from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
@@ -34,46 +35,52 @@ interface GetNodesColumnsProps {
     getNodeRef?: GetNodeRefFunc;
 }
 
-const nodeIdColumn: Column<NodesPreparedEntity> = {
+type NodesColumn = VirtualTableColumn<NodesPreparedEntity> & DataTableColumn<NodesPreparedEntity>;
+
+const nodeIdColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.NodeId,
     header: '#',
-    width: '80px',
+    width: 80,
+    render: ({row}) => row.NodeId,
     align: DataTable.RIGHT,
     sortable: false,
 };
 
-const getHostColumn = (
-    getNodeRef?: GetNodeRefFunc,
-    fixedWidth = false,
-): Column<NodesPreparedEntity> => ({
+const getHostColumn = (getNodeRef?: GetNodeRefFunc): NodesColumn => ({
     name: NODES_COLUMNS_IDS.Host,
     render: ({row}) => {
         return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
     },
-    width: fixedWidth ? '350px' : undefined,
+    width: 350,
     align: DataTable.LEFT,
     sortable: false,
 });
 
-const dataCenterColumn: Column<NodesPreparedEntity> = {
+const getHostColumnWithUndefinedWidth = (
+    getNodeRef?: GetNodeRefFunc,
+): DataTableColumn<NodesPreparedEntity> => {
+    return {...getHostColumn(getNodeRef), width: undefined};
+};
+
+const dataCenterColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.DC,
     header: 'DC',
     align: DataTable.LEFT,
     render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
-    width: '60px',
+    width: 60,
 };
 
-const rackColumn: Column<NodesPreparedEntity> = {
+const rackColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Rack,
     header: 'Rack',
     align: DataTable.LEFT,
     render: ({row}) => (row.Rack ? row.Rack : '—'),
-    width: '80px',
+    width: 80,
 };
 
-const versionColumn: Column<NodesPreparedEntity> = {
+const versionColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Version,
-    width: '200px',
+    width: 200,
     align: DataTable.LEFT,
     render: ({row}) => {
         return <CellWithPopover content={row.Version}>{row.Version}</CellWithPopover>;
@@ -81,16 +88,17 @@ const versionColumn: Column<NodesPreparedEntity> = {
     sortable: false,
 };
 
-const uptimeColumn: Column<NodesPreparedEntity> = {
+const uptimeColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Uptime,
     header: 'Uptime',
     sortAccessor: ({StartTime}) => StartTime && -StartTime,
+    render: ({row}) => row.Uptime,
     align: DataTable.RIGHT,
-    width: '110px',
+    width: 110,
     sortable: false,
 };
 
-const memoryColumn: Column<NodesPreparedEntity> = {
+const memoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.Memory,
     header: 'Memory',
     sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
@@ -103,21 +111,21 @@ const memoryColumn: Column<NodesPreparedEntity> = {
         }
     },
     align: DataTable.RIGHT,
-    width: '120px',
+    width: 120,
 };
 
-const cpuColumn: Column<NodesPreparedEntity> = {
+const cpuColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.CPU,
     header: 'CPU',
     sortAccessor: ({PoolStats = []}) => Math.max(...PoolStats.map(({Usage}) => Number(Usage))),
     defaultOrder: DataTable.DESCENDING,
     render: ({row}) => (row.PoolStats ? <PoolsGraph pools={row.PoolStats} /> : '—'),
     align: DataTable.LEFT,
-    width: '80px',
+    width: 80,
     sortable: false,
 };
 
-const loadAverageColumn: Column<NodesPreparedEntity> = {
+const loadAverageColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.LoadAverage,
     header: 'Load average',
     sortAccessor: ({LoadAverage = []}) =>
@@ -135,13 +143,13 @@ const loadAverageColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '140px',
+    width: 140,
     sortable: false,
 };
 
-const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> => ({
+const getTabletsColumn = (tabletsPath?: string): NodesColumn => ({
     name: NODES_COLUMNS_IDS.Tablets,
-    width: '430px',
+    width: 430,
     render: ({row}) => {
         return row.Tablets ? (
             <TabletsStatistic
@@ -157,7 +165,7 @@ const getTabletsColumn = (tabletsPath?: string): Column<NodesPreparedEntity> =>
     sortable: false,
 });
 
-const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
+const topNodesLoadAverageColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesLoadAverage,
     header: 'Load',
     render: ({row}) =>
@@ -170,11 +178,11 @@ const topNodesLoadAverageColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '80px',
+    width: 80,
     sortable: false,
 };
 
-const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
+const topNodesMemoryColumn: NodesColumn = {
     name: NODES_COLUMNS_IDS.TopNodesMemory,
     header: 'Memory',
     render: ({row}) =>
@@ -189,17 +197,14 @@ const topNodesMemoryColumn: Column<NodesPreparedEntity> = {
             '—'
         ),
     align: DataTable.LEFT,
-    width: '140px',
+    width: 140,
     sortable: false,
 };
 
-export function getNodesColumns({
-    tabletsPath,
-    getNodeRef,
-}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
-        getHostColumn(getNodeRef, true),
+        getHostColumn(getNodeRef),
         dataCenterColumn,
         rackColumn,
         versionColumn,
@@ -213,23 +218,28 @@ export function getNodesColumns({
 
 export function getTopNodesByLoadColumns(
     getNodeRef?: GetNodeRefFunc,
-): Column<NodesPreparedEntity>[] {
-    return [topNodesLoadAverageColumn, nodeIdColumn, getHostColumn(getNodeRef), versionColumn];
+): DataTableColumn<NodesPreparedEntity>[] {
+    return [
+        topNodesLoadAverageColumn,
+        nodeIdColumn,
+        getHostColumnWithUndefinedWidth(getNodeRef),
+        versionColumn,
+    ];
 }
 
 export function getTopNodesByCpuColumns(
     getNodeRef?: GetNodeRefFunc,
-): Column<NodesPreparedEntity>[] {
-    return [cpuColumn, nodeIdColumn, getHostColumn(getNodeRef)];
+): DataTableColumn<NodesPreparedEntity>[] {
+    return [cpuColumn, nodeIdColumn, getHostColumnWithUndefinedWidth(getNodeRef)];
 }
 
 export function getTopNodesByMemoryColumns({
     tabletsPath,
     getNodeRef,
-}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
+}: GetNodesColumnsProps): NodesColumn[] {
     return [
         nodeIdColumn,
-        getHostColumn(getNodeRef, true),
+        getHostColumn(getNodeRef),
         uptimeColumn,
         topNodesMemoryColumn,
         topNodesLoadAverageColumn,

package/dist/containers/Tablets/Tablets.tsx

@@ -34,14 +34,9 @@ interface TabletsProps {
 export const Tablets = ({path, nodeId, className}: TabletsProps) => {
     const dispatch = useDispatch();
 
-    const {
-        data = {},
-        wasLoaded,
-        loading,
-        error,
-        stateFilter,
-        typeFilter,
-    } = useTypedSelector((state) => state.tablets);
+    const {data, wasLoaded, loading, error, stateFilter, typeFilter} = useTypedSelector(
+        (state) => state.tablets,
+    );
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
     const tablets = useMemo(() => data?.TabletStateInfo || [], [data]);

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -123,7 +123,6 @@ function Diagnostics(props: DiagnosticsProps) {
                 return (
                     <Nodes
                         path={currentSchemaPath}
-                        type={type}
                         additionalNodesProps={props.additionalNodesProps}
                     />
                 );

package/dist/containers/UserSettings/i18n/en.json

@@ -1,6 +1,6 @@
 {
   "page.general": "General",
-  "section.general": "General",
+  "section.appearance": "Appearance",
 
   "page.experiments": "Experiments",
   "section.experiments": "Experiments",
@@ -17,10 +17,10 @@
   "settings.invertedDisks.title": "Inverted disks space indicators",
 
   "settings.useNodesEndpoint.title": "Break the Nodes tab in Diagnostics",
-  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on versions before 23-1",
+  "settings.useNodesEndpoint.popover": "Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It could return incorrect data on some versions",
 
-  "settings.useBackendParamsForTables.title": "Offload tables filters and sorting to backend",
-  "settings.useBackendParamsForTables.popover": "Filter and sort Nodes and Storage tables with request params. May increase performance, but could causes additional fetches and longer loading time on older versions",
+  "settings.useBackendParamsForTables.title": "Use virtual table for cluster Nodes tab",
+  "settings.useBackendParamsForTables.popover": "Use table with data load on scroll. It will increase performance, but could work unstable",
 
   "settings.enableAdditionalQueryModes.title": "Enable additional query modes",
   "settings.enableAdditionalQueryModes.popover": "Adds 'Data', 'YQL - QueryService' and 'PostgreSQL' modes. May not work on some versions",

package/dist/containers/UserSettings/i18n/ru.json

@@ -1,6 +1,6 @@
 {
   "page.general": "Общие",
-  "section.general": "Общие",
+  "section.appearance": "Внешний вид",
 
   "page.experiments": "Эксперименты",
   "section.experiments": "Эксперименты",
@@ -17,10 +17,10 @@
   "settings.invertedDisks.title": "Инвертированные индикаторы места на дисках",
 
   "settings.useNodesEndpoint.title": "Сломать вкладку Nodes в диагностике",
-  "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на версиях до 23-1",
+  "settings.useNodesEndpoint.popover": "Использовать эндпоинт /viewer/json/nodes для вкладки Nodes в диагностике. Может возвращать некорректные данные на некоторых версиях",
 
-  "settings.useBackendParamsForTables.title": "Перенести фильтры и сортировку таблиц на бэкенд",
-  "settings.useBackendParamsForTables.popover": "Добавляет фильтрацию и сортировку таблиц Nodes и Storage с использованием параметров запроса. Может улушить производительность, но на старых версиях может привести к дополнительным запросам и большему времени ожидания загрузки",
+  "settings.useBackendParamsForTables.title": "Использовать виртуализированную таблицу для вкладки Nodes кластера",
+  "settings.useBackendParamsForTables.popover": "Использовать таблицу с загрузкой данных по скроллу. Это улучшит производительность, но может работать нестабильно",
 
   "settings.enableAdditionalQueryModes.title": "Включить дополнительные режимы выполнения запросов",
   "settings.enableAdditionalQueryModes.popover": "Добавляет режимы 'Data', 'YQL - QueryService' и 'PostgreSQL'. Может работать некорректно на некоторых версиях",

package/dist/containers/UserSettings/settings.ts

@@ -101,16 +101,15 @@ export const enableNewTenantDiagnosticsDesign: SettingProps = {
     helpPopoverContent: i18n('settings.tenantDiagnostics.popover'),
 };
 
-export const generalSection: SettingsSection = {
-    id: 'generalSection',
-    title: i18n('section.general'),
-    settings: [themeSetting],
+export const appearanceSection: SettingsSection = {
+    id: 'appearanceSection',
+    title: i18n('section.appearance'),
+    settings: [themeSetting, invertedDisksSetting],
 };
 export const experimentsSection: SettingsSection = {
     id: 'experimentsSection',
     title: i18n('section.experiments'),
     settings: [
-        invertedDisksSetting,
         useNodesEndpointSetting,
         useBackendParamsForTables,
         enableQueryModesForExplainSetting,
@@ -122,7 +121,7 @@ export const generalPage: SettingsPage = {
     id: 'generalPage',
     title: i18n('page.general'),
     icon: {data: favoriteFilledIcon, height: 14, width: 14},
-    sections: [generalSection],
+    sections: [appearanceSection],
 };
 export const experimentsPage: SettingsPage = {
     id: 'experimentsPage',

package/dist/store/reducers/nodes/nodes.ts

@@ -99,9 +99,9 @@ const nodes: Reducer<NodesState, NodesAction> = (state = initialState, action) =
 };
 const concurrentId = 'getNodes';
 
-export function getNodes({type = 'any', ...params}: NodesApiRequestParams) {
+export function getNodes({type = 'any', storage = false, ...params}: NodesApiRequestParams) {
     return createApiRequest({
-        request: window.api.getNodes({type, ...params}, {concurrentId}),
+        request: window.api.getNodes({type, storage, ...params}, {concurrentId}),
         actions: FETCH_NODES,
         dataHandler: prepareNodesData,
     });

package/dist/store/reducers/nodes/types.ts

@@ -70,6 +70,7 @@ export interface NodesGeneralRequestParams extends NodesSortParams {
 }
 
 export interface NodesApiRequestParams extends NodesGeneralRequestParams {
+    path?: string;
     tenant?: string;
     type?: NodeType;
     visibleEntities?: VisibleEntities; // "with" param

package/dist/store/reducers/settings/settings.ts

@@ -50,15 +50,15 @@ export const initialState = {
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
-            'true',
+            'false',
         ),
         [ENABLE_ADDITIONAL_QUERY_MODES]: readSavedSettingsValue(
             ENABLE_ADDITIONAL_QUERY_MODES,
-            'false',
+            'true',
         ),
         [DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS]: readSavedSettingsValue(
             DISPLAY_METRICS_CARDS_FOR_TENANT_DIAGNOSTICS,
-            'false',
+            'true',
         ),
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_PAGE_KEY]: readSavedSettingsValue(

package/dist/utils/developerUI.ts

@@ -0,0 +1,32 @@
+import {backend} from '../store';
+import {pad9} from './utils';
+
+// Current node connects with target node by itself using nodeId
+export const createDeveloperUILinkWithNodeId = (nodeId: number | string) => {
+    return `${backend}/node/${nodeId}/`;
+};
+
+interface PDiskDeveloperUILinkParams {
+    nodeId: number | string;
+    pDiskId: number | string;
+}
+
+export const createPDiskDeveloperUILink = ({nodeId, pDiskId}: PDiskDeveloperUILinkParams) => {
+    const pdiskPath = 'actors/pdisks/pdisk' + pad9(pDiskId);
+
+    return createDeveloperUILinkWithNodeId(nodeId) + pdiskPath;
+};
+
+interface VDiskDeveloperUILinkParams extends PDiskDeveloperUILinkParams {
+    vDiskSlotId: number | string;
+}
+
+export const createVDiskDeveloperUILink = ({
+    nodeId,
+    pDiskId,
+    vDiskSlotId,
+}: VDiskDeveloperUILinkParams) => {
+    const vdiskPath = 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(vDiskSlotId);
+
+    return createDeveloperUILinkWithNodeId(nodeId) + vdiskPath;
+};

package/dist/utils/hooks/useNodesRequestParams.ts

@@ -2,10 +2,9 @@ import {useMemo} from 'react';
 
 import type {NodesGeneralRequestParams} from '../../store/reducers/nodes/types';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
-import {ProblemFilterValues} from '../../store/reducers/settings/settings';
 
-import {HOUR_IN_SECONDS, USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
-import {NodesUptimeFilterValues} from '../nodes';
+import {USE_BACKEND_PARAMS_FOR_TABLES_KEY} from '../constants';
+import {NodesUptimeFilterValues, getProblemParamValue, getUptimeParamValue} from '../nodes';
 import {useSetting} from './useSetting';
 
 interface NodesRawRequestParams
@@ -27,11 +26,8 @@ export const useNodesRequestParams = ({
     // Otherwise no params will be updated, no hooks that depend on requestParams will be triggered
     return useMemo(() => {
         if (useBackendParamsForTables) {
-            const problemsOnly = problemFilter === ProblemFilterValues.PROBLEMS;
-            const uptime =
-                nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime
-                    ? HOUR_IN_SECONDS
-                    : undefined;
+            const problemsOnly = getProblemParamValue(problemFilter);
+            const uptime = getUptimeParamValue(nodesUptimeFilter);
 
             return {
                 filter,

package/dist/utils/nodes.ts

@@ -3,8 +3,12 @@ import type {TNodeInfo} from '../types/api/nodesList';
 import type {NodesPreparedEntity} from '../store/reducers/nodes/types';
 import type {NodesMap} from '../types/store/nodesList';
 import type {ValueOf} from '../types/common';
+import type {ProblemFilterValue} from '../store/reducers/settings/types';
+import {ProblemFilterValues} from '../store/reducers/settings/settings';
 import {EFlag} from '../types/api/enums';
 
+import {HOUR_IN_SECONDS} from './constants';
+
 export enum NodesUptimeFilterValues {
     'All' = 'All',
     'SmallUptime' = 'SmallUptime',
@@ -27,6 +31,14 @@ export const prepareNodesMap = (nodesList?: TNodeInfo[]) => {
     }, new Map());
 };
 
+export const getProblemParamValue = (problemFilter: ProblemFilterValue | undefined) => {
+    return problemFilter === ProblemFilterValues.PROBLEMS;
+};
+
+export const getUptimeParamValue = (nodesUptimeFilter: NodesUptimeFilterValues | undefined) => {
+    return nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime ? HOUR_IN_SECONDS : undefined;
+};
+
 /**
  * Values to sort /compute v2 and /nodes responses
  *

package/dist/utils/query.ts

@@ -175,7 +175,14 @@ export const prepareQueryResponse = (data?: KeyValueRow[]) => {
         for (const field in row) {
             if (Object.prototype.hasOwnProperty.call(row, field)) {
                 const type = typeof row[field];
-                if (type === 'object' || type === 'boolean' || Array.isArray(row[field])) {
+
+                // Although typeof null == 'object'
+                // null result should be preserved
+                if (
+                    (row[field] !== null && type === 'object') ||
+                    type === 'boolean' ||
+                    Array.isArray(row[field])
+                ) {
                     formattedData[field] = JSON.stringify(row[field]);
                 } else {
                     formattedData[field] = row[field];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.20.4",
+  "version": "4.21.1",
   "files": [
     "dist"
   ],