ydb-embedded-ui 4.18.0 → 4.19.0

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

@@ -14,6 +14,7 @@ import {getTenantInfo, setDataWasNotLoaded} from '../../../../store/reducers/ten
 import {calculateTenantMetrics} from '../../../../store/reducers/tenants/utils';
 import {HealthcheckDetails} from './Healthcheck/HealthcheckDetails';
 import {MetricsCards, type TenantMetrics} from './MetricsCards/MetricsCards';
+import {TenantStorage} from './TenantStorage/TenantStorage';
 import {useHealthcheck} from './useHealthcheck';
 
 import i18n from './i18n';
@@ -70,16 +71,31 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
 
     const tenantType = mapDatabaseTypeToDBName(Type);
 
-    const {cpu, storage, memory, cpuLimit, storageLimit, memoryLimit} =
-        calculateTenantMetrics(tenant);
+    const {
+        cpu,
+        blobStorage,
+        tableStorage,
+        memory,
+        cpuUsage,
+        blobStorageLimit,
+        tableStorageLimit,
+        memoryLimit,
+    } = calculateTenantMetrics(tenant);
 
     const calculatedMetrics: TenantMetrics = {
         memoryUsed: memory,
         memoryLimit,
         cpuUsed: cpu,
-        cpuLimit,
-        storageUsed: storage,
-        storageLimit,
+        cpuUsage,
+        storageUsed: blobStorage,
+        storageLimit: blobStorageLimit,
+    };
+
+    const storageMetrics = {
+        blobStorageUsed: blobStorage,
+        blobStorageLimit,
+        tableStorageUsed: tableStorage,
+        tableStorageLimit,
     };
 
     const renderName = () => {
@@ -102,7 +118,7 @@ export function TenantOverview({tenantName, additionalTenantProps}: TenantOvervi
                 return i18n('label.under-development');
             }
             case TENANT_METRICS_TABS_IDS.storage: {
-                return i18n('label.under-development');
+                return <TenantStorage tenantName={tenantName} metrics={storageMetrics} />;
             }
             case TENANT_METRICS_TABS_IDS.memory: {
                 return i18n('label.under-development');

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TenantStorage.scss

@@ -0,0 +1,41 @@
+@import '../../../../../styles/mixins.scss';
+
+.tenant-overview-storage {
+    &__info {
+        margin-bottom: 36px;
+    }
+
+    &__title {
+        margin-bottom: 10px;
+
+        font-size: var(--yc-text-body-2-font-size);
+        font-weight: 700;
+        line-height: var(--yc-text-body-2-line-height);
+    }
+
+    &__table {
+        width: var(--diagnostics-section-table-width);
+        @include table-styles;
+
+        &:not(:last-child) {
+            margin-bottom: var(--diagnostics-section-margin);
+        }
+
+        th {
+            height: 40px;
+
+            vertical-align: middle;
+        }
+    }
+
+    &__cell-with-popover-wrapper {
+        display: flex;
+    }
+
+    &__cell-with-popover {
+        overflow: hidden;
+
+        white-space: nowrap;
+        text-overflow: ellipsis;
+    }
+}

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

@@ -0,0 +1,68 @@
+import cn from 'bem-cn-lite';
+
+import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
+import {ProgressViewer} from '../../../../../components/ProgressViewer/ProgressViewer';
+import {formatStorageValues} from '../../../../../utils/dataFormatters/dataFormatters';
+import {getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
+import {TopTables} from './TopTables';
+import {TopGroups} from './TopGroups';
+import './TenantStorage.scss';
+
+const b = cn('tenant-overview-storage');
+
+export interface TenantStorageMetrics {
+    blobStorageUsed?: number;
+    blobStorageLimit?: number;
+    tableStorageUsed?: number;
+    tableStorageLimit?: number;
+}
+
+interface TenantStorageProps {
+    tenantName: string;
+    metrics: TenantStorageMetrics;
+}
+
+export function TenantStorage({tenantName, metrics}: TenantStorageProps) {
+    const {blobStorageUsed, tableStorageUsed, blobStorageLimit, tableStorageLimit} = metrics;
+    const formatValues = (value?: number, total?: number) => {
+        const size = getSizeWithSignificantDigits(Number(blobStorageLimit || blobStorageUsed), 0);
+
+        return formatStorageValues(value, total, size);
+    };
+
+    const info = [
+        {
+            label: 'Database storage',
+            value: (
+                <ProgressViewer
+                    value={blobStorageUsed}
+                    capacity={blobStorageLimit}
+                    formatValues={formatValues}
+                    colorizeProgress={true}
+                    warningThreshold={75}
+                    dangerThreshold={85}
+                />
+            ),
+        },
+        {
+            label: 'Table storage',
+            value: (
+                <ProgressViewer
+                    value={tableStorageUsed}
+                    capacity={tableStorageLimit}
+                    formatValues={formatValues}
+                    colorizeProgress={true}
+                    warningThreshold={75}
+                    dangerThreshold={85}
+                />
+            ),
+        },
+    ];
+    return (
+        <>
+            <InfoViewer className={b('info')} title="Storage details" info={info} />
+            <TopTables path={tenantName} />
+            <TopGroups tenant={tenantName} />
+        </>
+    );
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopGroups.tsx

@@ -0,0 +1,76 @@
+import cn from 'bem-cn-lite';
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+
+import DataTable from '@gravity-ui/react-data-table';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
+import {
+    setDataWasNotLoaded,
+    getTopStorageGroups,
+    selectTopStorageGroups,
+} from '../../../../../store/reducers/tenantOverview/topStorageGroups/topStorageGroups';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
+import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
+import {getStorageTopGroupsColumns} from '../../../../Storage/StorageGroups/getStorageGroupsColumns';
+import i18n from '../i18n';
+
+const b = cn('tenant-overview-storage');
+
+interface TopGroupsProps {
+    tenant?: string;
+}
+
+export function TopGroups({tenant}: TopGroupsProps) {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.topStorageGroups);
+    const topGroups = useTypedSelector(selectTopStorageGroups);
+
+    const columns = getStorageTopGroupsColumns();
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(getTopStorageGroups({tenant}));
+        },
+        [dispatch, tenant],
+    );
+
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} />;
+        }
+
+        if (loading && !wasLoaded) {
+            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
+        }
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                data={topGroups || []}
+                columns={columns}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+                emptyDataMessage={i18n('top-groups.empty-data')}
+            />
+        );
+    };
+
+    return (
+        <>
+            <div className={b('title')}>Top groups by usage</div>
+            <div className={b('table')}>{renderContent()}</div>
+        </>
+    );
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantStorage/TopTables.tsx

@@ -0,0 +1,105 @@
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+import {Popover} from '@gravity-ui/uikit';
+
+import {useAutofetcher, useTypedSelector} from '../../../../../utils/hooks';
+import {
+    fetchTopTables,
+    setDataWasNotLoaded,
+} from '../../../../../store/reducers/tenantOverview/executeTopTables/executeTopTables';
+import {
+    TENANT_OVERVIEW_TABLES_LIMIT,
+    TENANT_OVERVIEW_TABLES_SETTINGS,
+} from '../../../../../utils/constants';
+import type {KeyValueRow} from '../../../../../types/api/query';
+import {formatBytes, getSizeWithSignificantDigits} from '../../../../../utils/bytesParsers';
+import {TableSkeleton} from '../../../../../components/TableSkeleton/TableSkeleton';
+import {ResponseError} from '../../../../../components/Errors/ResponseError';
+
+import './TenantStorage.scss';
+
+const b = cn('tenant-overview-storage');
+
+interface TopTablesProps {
+    path: string;
+}
+
+export function TopTables({path}: TopTablesProps) {
+    const dispatch = useDispatch();
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const {
+        loading,
+        wasLoaded,
+        error,
+        data: {result: data = undefined} = {},
+    } = useTypedSelector((state) => state.executeTopTables);
+
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            dispatch(fetchTopTables(path));
+        },
+        [dispatch, path],
+        autorefresh,
+    );
+
+    const formatSize = (value?: number) => {
+        const size = getSizeWithSignificantDigits(data?.length ? Number(data[0].Size) : 0, 0);
+
+        return formatBytes({value, size, precision: 1});
+    };
+
+    const columns: Column<KeyValueRow>[] = [
+        {
+            name: 'Size',
+            width: 80,
+            sortable: false,
+            render: ({row}) => formatSize(Number(row.Size)),
+            align: DataTable.RIGHT,
+        },
+        {
+            name: 'Path',
+            sortable: false,
+            render: ({row}) => (
+                <div className={b('cell-with-popover-wrapper')}>
+                    <Popover className={b('cell-with-popover')} content={row.Path}>
+                        {row.Path}
+                    </Popover>
+                </div>
+            ),
+        },
+    ];
+
+    const renderContent = () => {
+        if (error) {
+            return <ResponseError error={error} />;
+        }
+
+        if (loading && !wasLoaded) {
+            return <TableSkeleton rows={TENANT_OVERVIEW_TABLES_LIMIT} />;
+        }
+
+        return (
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                settings={TENANT_OVERVIEW_TABLES_SETTINGS}
+                data={data || []}
+            />
+        );
+    };
+
+    return (
+        <>
+            <div className={b('title')}>Top tables by size</div>
+            <div className={b('table')}>{renderContent()}</div>
+        </>
+    );
+}

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/en.json

@@ -5,5 +5,7 @@
   "title.pools": "Pools",
   "title.metrics": "Metrics",
 
+  "top-groups.empty-data": "No such groups",
+
   "label.under-development": "This section is under development"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/ru.json

@@ -5,5 +5,7 @@
   "title.pools": "Пулы",
   "title.metrics": "Метрики",
 
+  "top-groups.empty-data": "Нет групп",
+
   "label.under-development": "Этот раздел находится в разработке"
 }

package/dist/containers/Versions/NodesTable/NodesTable.tsx

@@ -94,6 +94,7 @@ const columns: Column<PreparedClusterNode>[] = [
                 <ProgressViewer
                     value={row.LoadAverage[0]}
                     percents={true}
+                    capacity={100}
                     colorizeProgress={true}
                 />
             ) : (

package/dist/store/reducers/index.ts

@@ -5,6 +5,7 @@ import cluster from './cluster/cluster';
 import clusterNodes from './clusterNodes/clusterNodes';
 import tenant from './tenant/tenant';
 import storage from './storage/storage';
+import topStorageGroups from './tenantOverview/topStorageGroups/topStorageGroups';
 import node from './node/node';
 import tooltip from './tooltip';
 import tablets from './tablets';
@@ -26,6 +27,7 @@ import nodesList from './nodesList';
 import describe from './describe';
 import schemaAcl from './schemaAcl/schemaAcl';
 import executeTopQueries from './executeTopQueries';
+import executeTopTables from './tenantOverview/executeTopTables/executeTopTables';
 import healthcheckInfo from './healthcheckInfo';
 import shardsWorkload from './shardsWorkload';
 import hotKeys from './hotKeys';
@@ -43,6 +45,7 @@ export const rootReducer = {
     clusterNodes,
     tenant,
     storage,
+    topStorageGroups,
     node,
     tooltip,
     tablets,
@@ -65,6 +68,7 @@ export const rootReducer = {
     describe,
     schemaAcl,
     executeTopQueries,
+    executeTopTables,
     healthcheckInfo,
     shardsWorkload,
     hotKeys,

package/dist/store/reducers/storage/utils.ts

@@ -3,6 +3,7 @@ import type {
     TStorageGroupInfo,
     TStorageGroupInfoV2,
     TStorageInfo,
+    TStoragePoolInfo,
 } from '../../../types/api/storage';
 import {EVDiskState, type TVDiskStateInfo} from '../../../types/api/vdisk';
 import {TPDiskState} from '../../../types/api/pdisk';
@@ -146,6 +147,24 @@ const prepareStorageGroupDataV2 = (group: TStorageGroupInfoV2): PreparedStorageG
     };
 };
 
+export const prepareStorageGroups = (
+    StorageGroups?: TStorageGroupInfoV2[],
+    StoragePools?: TStoragePoolInfo[],
+) => {
+    let preparedGroups: PreparedStorageGroup[] = [];
+    if (StorageGroups) {
+        preparedGroups = StorageGroups.map(prepareStorageGroupDataV2);
+    } else {
+        StoragePools?.forEach((pool) => {
+            pool.Groups?.forEach((group) => {
+                preparedGroups.push(prepareStorageGroupData(group, pool.Name));
+            });
+        });
+    }
+
+    return preparedGroups;
+};
+
 // ==== Prepare nodes ====
 
 const prepareStorageNodeData = (node: TNodeInfo): PreparedStorageNode => {
@@ -187,17 +206,7 @@ export const prepareStorageNodesResponse = (data: TNodesInfo): PreparedStorageRe
 export const prepareStorageGroupsResponse = (data: TStorageInfo): PreparedStorageResponse => {
     const {StoragePools, StorageGroups, TotalGroups, FoundGroups} = data;
 
-    let preparedGroups: PreparedStorageGroup[] = [];
-
-    if (StorageGroups) {
-        preparedGroups = StorageGroups.map(prepareStorageGroupDataV2);
-    } else {
-        StoragePools?.forEach((pool) => {
-            pool.Groups?.forEach((group) => {
-                preparedGroups.push(prepareStorageGroupData(group, pool.Name));
-            });
-        });
-    }
+    const preparedGroups = prepareStorageGroups(StorageGroups, StoragePools);
 
     return {
         groups: preparedGroups,

package/dist/store/reducers/tenantOverview/executeTopTables/executeTopTables.ts

@@ -0,0 +1,93 @@
+import type {Reducer} from 'redux';
+
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
+import {parseQueryAPIExecuteResponse} from '../../../../utils/query';
+import {createApiRequest, createRequestActionTypes} from '../../../utils';
+import type {TopTablesAction, TopTablesState} from './types';
+
+export const FETCH_TOP_TABLES = createRequestActionTypes('top-tables', 'FETCH_TOP_TABLES');
+const SET_DATA_WAS_NOT_LOADED = 'top-tables/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+};
+
+const getQueryText = (path: string) => {
+    return `
+SELECT
+    Path, SUM(DataSize) as Size
+FROM \`${path}/.sys/partition_stats\`
+GROUP BY Path
+    ORDER BY Size DESC
+    LIMIT ${TENANT_OVERVIEW_TABLES_LIMIT}
+`;
+};
+
+const executeTopTables: Reducer<TopTablesState, TopTablesAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_TOP_TABLES.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOP_TABLES.SUCCESS: {
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                error: undefined,
+                wasLoaded: true,
+            };
+        }
+        // 401 Unauthorized error is handled by GenericAPI
+        case FETCH_TOP_TABLES.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+            return {
+                ...state,
+                error: action.error || 'Unauthorized',
+                loading: false,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED:
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        default:
+            return state;
+    }
+};
+
+export const fetchTopTables = (database: string) => {
+    return createApiRequest({
+        request: window.api.sendQuery(
+            {
+                schema: 'modern',
+                query: getQueryText(database),
+                database,
+                action: 'execute-scan',
+            },
+            {
+                concurrentId: 'executeTopTables',
+            },
+        ),
+        actions: FETCH_TOP_TABLES,
+        dataHandler: parseQueryAPIExecuteResponse,
+    });
+};
+
+export function setDataWasNotLoaded() {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+}
+
+export default executeTopTables;

package/dist/store/reducers/tenantOverview/executeTopTables/types.ts

@@ -0,0 +1,14 @@
+import type {IQueryResult, QueryErrorResponse} from '../../../../types/store/query';
+import type {ApiRequestAction} from '../../../utils';
+import {FETCH_TOP_TABLES, setDataWasNotLoaded} from './executeTopTables';
+
+export interface TopTablesState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: IQueryResult;
+    error?: QueryErrorResponse;
+}
+
+export type TopTablesAction =
+    | ApiRequestAction<typeof FETCH_TOP_TABLES, IQueryResult, QueryErrorResponse>
+    | ReturnType<typeof setDataWasNotLoaded>;

package/dist/store/reducers/tenantOverview/topStorageGroups/topStorageGroups.ts

@@ -0,0 +1,98 @@
+import type {Reducer} from 'redux';
+
+import {TENANT_OVERVIEW_TABLES_LIMIT} from '../../../../utils/constants';
+import {EVersion} from '../../../../types/api/storage';
+import {createApiRequest, createRequestActionTypes} from '../../../utils';
+import type {StorageApiRequestParams} from '../../storage/types';
+import type {
+    TopStorageGroupsAction,
+    TopStorageGroupsState,
+    TopStorageGroupsStateSlice,
+} from './types';
+import {prepareTopStorageGroupsResponse} from './utils';
+
+export const FETCH_TOP_STORAGE_GROUPS = createRequestActionTypes(
+    'topStorageGroups',
+    'FETCH_TOP_STORAGE_GROUPS',
+);
+
+const SET_DATA_WAS_NOT_LOADED = 'topStorageGroups/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: true,
+    wasLoaded: false,
+};
+
+const topStorageGroups: Reducer<TopStorageGroupsState, TopStorageGroupsAction> = (
+    state = initialState,
+    action,
+) => {
+    switch (action.type) {
+        case FETCH_TOP_STORAGE_GROUPS.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_TOP_STORAGE_GROUPS.SUCCESS: {
+            return {
+                ...state,
+                data: action.data.groups,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_TOP_STORAGE_GROUPS.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+                wasLoaded: true,
+            };
+        }
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+export const getTopStorageGroups = ({
+    tenant,
+    visibleEntities = 'all',
+    nodeId,
+    sortOrder = -1,
+    sortValue = 'Usage',
+    limit = TENANT_OVERVIEW_TABLES_LIMIT,
+    version = EVersion.v2,
+    ...params
+}: StorageApiRequestParams) => {
+    return createApiRequest({
+        request: window.api.getStorageInfo(
+            {tenant, visibleEntities, nodeId, version, sortOrder, sortValue, limit, ...params},
+            {concurrentId: 'getTopStorageGroups'},
+        ),
+        actions: FETCH_TOP_STORAGE_GROUPS,
+        dataHandler: prepareTopStorageGroupsResponse,
+    });
+};
+
+export const selectTopStorageGroups = (state: TopStorageGroupsStateSlice) =>
+    state.topStorageGroups.data;
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
+export default topStorageGroups;

package/dist/store/reducers/tenantOverview/topStorageGroups/types.ts

@@ -0,0 +1,29 @@
+import type {IResponseError} from '../../../../types/api/error';
+import type {ApiRequestAction} from '../../../utils';
+import type {PreparedStorageGroup} from '../../storage/types';
+import {FETCH_TOP_STORAGE_GROUPS, setDataWasNotLoaded} from './topStorageGroups';
+
+export interface TopStorageGroupsState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: PreparedStorageGroup[];
+    error?: IResponseError;
+}
+
+export interface PreparedTopStorageGroupsResponse {
+    groups?: PreparedStorageGroup[];
+}
+
+type GetTopStorageGroupApiRequestAction = ApiRequestAction<
+    typeof FETCH_TOP_STORAGE_GROUPS,
+    PreparedTopStorageGroupsResponse,
+    IResponseError
+>;
+
+export type TopStorageGroupsAction =
+    | GetTopStorageGroupApiRequestAction
+    | ReturnType<typeof setDataWasNotLoaded>;
+
+export interface TopStorageGroupsStateSlice {
+    topStorageGroups: TopStorageGroupsState;
+}