ydb-embedded-ui 3.3.3 → 3.4.0

package/dist/containers/Tenant/Diagnostics/TopShards/index.ts

@@ -0,0 +1 @@
+export * from './TopShards';

package/dist/containers/Tenant/utils/schema.ts

@@ -155,22 +155,7 @@ export const isDatabaseEntityType = (type?: EPathType) =>
 
 // ====================
 
-const pathTypeToIsCdcStream: Record<EPathType, boolean> = {
-    [EPathType.EPathTypeCdcStream]: true,
-
-    [EPathType.EPathTypeInvalid]: false,
-    [EPathType.EPathTypeColumnStore]: false,
-    [EPathType.EPathTypeColumnTable]: false,
-    [EPathType.EPathTypeDir]: false,
-    [EPathType.EPathTypeTable]: false,
-    [EPathType.EPathTypeSubDomain]: false,
-    [EPathType.EPathTypeTableIndex]: false,
-    [EPathType.EPathTypeExtSubDomain]: false,
-    [EPathType.EPathTypePersQueueGroup]: false,
-};
-
-export const isCdcStreamEntityType = (type?: EPathType) =>
-    (type && pathTypeToIsCdcStream[type]) ?? false;
+export const isCdcStreamEntityType = (type?: EPathType) => type === EPathType.EPathTypeCdcStream;
 
 // ====================
 

package/dist/services/api.d.ts

@@ -62,6 +62,10 @@ interface Window {
         getTopic: (params: {
             path?: string;
         }) => Promise<import('../types/api/topic').DescribeTopicResult>;
+        getConsumer: (params: {
+            path?: string;
+            consumer?: string;
+        }) => Promise<import('../types/api/consumer').DescribeConsumerResult>;
         [method: string]: Function;
     };
 }

package/dist/services/api.js

@@ -141,12 +141,28 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path,
         });
     }
-    getTopic({path}) {
-        return this.get(this.getPath('/viewer/json/describe_topic'), {
-            enums: true,
-            include_stats: true,
-            path,
-        });
+    getTopic({path}, {concurrentId} = {}) {
+        return this.get(
+            this.getPath('/viewer/json/describe_topic'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+            },
+            {concurrentId: concurrentId || 'getTopic'},
+        );
+    }
+    getConsumer({path, consumer}, {concurrentId} = {}) {
+        return this.get(
+            this.getPath('/viewer/json/describe_consumer'),
+            {
+                enums: true,
+                include_stats: true,
+                path,
+                consumer,
+            },
+            {concurrentId: concurrentId || 'getConsumer'},
+        );
     }
     getPoolInfo(poolName) {
         return this.get(this.getPath('/viewer/json/storage'), {

package/dist/store/reducers/authentication.js

@@ -34,21 +34,6 @@ const authentication = function (state = initialState, action) {
     }
 };
 
-export const setIsNotAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_UNAUTHENTICATED.SUCCESS,
-        });
-    };
-};
-export const setIsAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_AUTHENTICATED.SUCCESS,
-        });
-    };
-};
-
 export const authenticate = (user, password) => {
     return createApiRequest({
         request: window.api.authenticate(user, password),

package/dist/store/reducers/consumer.ts

@@ -0,0 +1,160 @@
+/* eslint-disable camelcase */
+import type {Reducer} from 'redux';
+import {createSelector, Selector} from 'reselect';
+
+import type {
+    IConsumerAction,
+    IConsumerRootStateSlice,
+    IConsumerState,
+    IPreparedPartitionData,
+} from '../../types/store/consumer';
+
+import '../../services/api';
+
+import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
+import {parseLag, parseTimestampToIdleTime} from '../../utils/timeParsers';
+import {isNumeric} from '../../utils/utils';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+export const FETCH_CONSUMER = createRequestActionTypes('consumer', 'FETCH_CONSUMER');
+
+const SET_DATA_WAS_NOT_LOADED = 'consumer/SET_DATA_WAS_NOT_LOADED';
+
+const initialState = {
+    loading: false,
+    wasLoaded: false,
+    data: {},
+};
+
+const consumer: Reducer<IConsumerState, IConsumerAction> = (state = initialState, action) => {
+    switch (action.type) {
+        case FETCH_CONSUMER.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_CONSUMER.SUCCESS: {
+            // On older version it can return HTML page of Internal Viewer with an error
+            if (typeof action.data !== 'object') {
+                return {...state, loading: false, error: {}};
+            }
+
+            return {
+                ...state,
+                data: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_CONSUMER.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;
+    }
+};
+
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
+export function getConsumer(path?: string, consumerName?: string) {
+    return createApiRequest({
+        request: window.api.getConsumer({path, consumer: consumerName}),
+        actions: FETCH_CONSUMER,
+    });
+}
+
+export const selectPartitions = (state: IConsumerRootStateSlice) => state.consumer.data?.partitions;
+
+export const selectPreparedPartitionsData: Selector<
+    IConsumerRootStateSlice,
+    IPreparedPartitionData[] | undefined
+> = createSelector([selectPartitions], (partitions) => {
+    return partitions?.map((partition) => {
+        // describe_consumer endpoint doesn't return zero values, so some values will be initialized with 0
+        const {partition_id = '0', partition_stats, partition_consumer_stats} = partition;
+
+        const {
+            partition_offsets,
+            store_size_bytes = '0',
+            last_write_time: partition_last_write_time,
+            max_write_time_lag: partition_write_lag,
+            bytes_written,
+            partition_node_id = 0,
+        } = partition_stats || {};
+
+        const {start: start_offset = '0', end: end_offset = '0'} = partition_offsets || {};
+
+        const {
+            last_read_offset = '0',
+            committed_offset = '0',
+            read_session_id,
+            last_read_time: consumer_last_read_time,
+            max_read_time_lag: consumer_read_lag,
+            max_write_time_lag: consumer_write_lag,
+            bytes_read,
+            reader_name,
+            connection_node_id = 0,
+        } = partition_consumer_stats || {};
+
+        const uncommitedMessages =
+            isNumeric(end_offset) && isNumeric(committed_offset)
+                ? Number(end_offset) - Number(committed_offset)
+                : 0;
+
+        const unreadMessages =
+            isNumeric(end_offset) && isNumeric(last_read_offset)
+                ? Number(end_offset) - Number(last_read_offset)
+                : 0;
+
+        return {
+            partitionId: partition_id,
+            storeSize: store_size_bytes,
+
+            writeSpeed: convertBytesObjectToSpeed(bytes_written),
+            readSpeed: convertBytesObjectToSpeed(bytes_read),
+
+            partitionWriteLag: parseLag(partition_write_lag),
+            partitionWriteIdleTime: parseTimestampToIdleTime(partition_last_write_time),
+
+            consumerWriteLag: parseLag(consumer_write_lag),
+            consumerReadLag: parseLag(consumer_read_lag),
+            consumerReadIdleTime: parseTimestampToIdleTime(consumer_last_read_time),
+
+            uncommitedMessages,
+            unreadMessages,
+
+            startOffset: start_offset,
+            endOffset: end_offset,
+            commitedOffset: committed_offset,
+
+            readSessionId: read_session_id,
+            readerName: reader_name,
+
+            partitionNodeId: partition_node_id,
+            connectionNodeId: connection_node_id,
+        };
+    });
+});
+
+export default consumer;

package/dist/store/reducers/index.ts

@@ -18,6 +18,7 @@ import pool from './pool';
 import tenants from './tenants';
 import tablet from './tablet';
 import topic from './topic';
+import consumer from './consumer';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
@@ -57,6 +58,7 @@ export const rootReducer = {
     tenants,
     tablet,
     topic,
+    consumer,
     executeQuery,
     explainQuery,
     tabletsFilters,

package/dist/store/reducers/settings.js

@@ -7,6 +7,7 @@ import {
     INVERTED_DISKS_KEY,
     ASIDE_HEADER_COMPACT_KEY,
     USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+    PARTITIONS_SELECTED_COLUMNS_KEY,
 } from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
@@ -50,6 +51,7 @@ export const initialState = {
             ASIDE_HEADER_COMPACT_KEY,
             legacyAsideNavCompactState || 'true',
         ),
+        [PARTITIONS_SELECTED_COLUMNS_KEY]: readSavedSettingsValue(PARTITIONS_SELECTED_COLUMNS_KEY),
     },
     systemSettings,
 };

package/dist/store/reducers/shardsWorkload.ts

@@ -6,6 +6,7 @@ import type {
     IShardsWorkloadFilters,
     IShardsWorkloadState,
 } from '../../types/store/shardsWorkload';
+import {EShardsWorkloadMode} from '../../types/store/shardsWorkload';
 
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -51,7 +52,7 @@ function getFiltersConditions(filters?: IShardsWorkloadFilters) {
     return conditions.join(' AND ');
 }
 
-function createShardQuery(
+function createShardQueryHistorical(
     path: string,
     filters?: IShardsWorkloadFilters,
     sortOrder?: SortOrder[],
@@ -85,6 +86,28 @@ ${orderBy}
 LIMIT 20`;
 }
 
+function createShardQueryImmediate(path: string, sortOrder?: SortOrder[], tenantName?: string) {
+    const pathSelect = tenantName
+        ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
+        : 'Path';
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize,
+    NodeId,
+    InFlightTxCount
+FROM \`.sys/partition_stats\`
+WHERE
+    Path='${path}'
+    OR Path LIKE '${path}/%'
+${orderBy}
+LIMIT 20`;
+}
+
 const queryAction = 'execute-scan';
 
 const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
@@ -147,7 +170,10 @@ export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendSh
             request: window.api.sendQuery(
                 {
                     schema: 'modern',
-                    query: createShardQuery(path, filters, sortOrder, database),
+                    query:
+                        filters?.mode === EShardsWorkloadMode.Immediate
+                            ? createShardQueryImmediate(path, sortOrder, database)
+                            : createShardQueryHistorical(path, filters, sortOrder, database),
                     database,
                     action: queryAction,
                 },

package/dist/store/reducers/topic.ts

@@ -1,16 +1,28 @@
+/* eslint-disable camelcase */
 import type {Reducer} from 'redux';
+import {createSelector, Selector} from 'reselect';
 
-import type {ITopicAction, ITopicState} from '../../types/store/topic';
+import type {
+    IPreparedConsumerData,
+    IPreparedTopicStats,
+    ITopicAction,
+    ITopicRootStateSlice,
+    ITopicState,
+} from '../../types/store/topic';
 import '../../services/api';
 
 import {createRequestActionTypes, createApiRequest} from '../utils';
+import {parseLag, parseTimestampToIdleTime} from '../../utils/timeParsers';
+import {convertBytesObjectToSpeed} from '../../utils/bytesParsers';
 
 export const FETCH_TOPIC = createRequestActionTypes('topic', 'FETCH_TOPIC');
 
+const SET_DATA_WAS_NOT_LOADED = 'topic/SET_DATA_WAS_NOT_LOADED';
+
 const initialState = {
     loading: true,
     wasLoaded: false,
-    data: {},
+    data: undefined,
 };
 
 const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action) => {
@@ -22,6 +34,11 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
             };
         }
         case FETCH_TOPIC.SUCCESS: {
+            // On older version it can return HTML page of Internal Viewer with an error
+            if (typeof action.data !== 'object') {
+                return {...state, loading: false, error: {}};
+            }
+
             return {
                 ...state,
                 data: action.data,
@@ -31,17 +48,33 @@ const topic: Reducer<ITopicState, ITopicAction> = (state = initialState, action)
             };
         }
         case FETCH_TOPIC.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;
     }
 };
 
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 export function getTopic(path?: string) {
     return createApiRequest({
         request: window.api.getTopic({path}),
@@ -49,4 +82,51 @@ export function getTopic(path?: string) {
     });
 }
 
+const selectTopicStats = (state: ITopicRootStateSlice) => state.topic.data?.topic_stats;
+const selectConsumers = (state: ITopicRootStateSlice) => state.topic.data?.consumers;
+
+export const selectPreparedTopicStats: Selector<
+    ITopicRootStateSlice,
+    IPreparedTopicStats | undefined
+> = createSelector([selectTopicStats], (rawTopicStats) => {
+    if (!rawTopicStats) {
+        return undefined;
+    }
+
+    const {
+        store_size_bytes = '0',
+        min_last_write_time,
+        max_write_time_lag,
+        bytes_written,
+    } = rawTopicStats || {};
+
+    return {
+        storeSize: store_size_bytes,
+        partitionsIdleTime: parseTimestampToIdleTime(min_last_write_time),
+        partitionsWriteLag: parseLag(max_write_time_lag),
+        writeSpeed: convertBytesObjectToSpeed(bytes_written),
+    };
+});
+
+export const selectPreparedConsumersData: Selector<
+    ITopicRootStateSlice,
+    IPreparedConsumerData[] | undefined
+> = createSelector([selectConsumers], (consumers) => {
+    return consumers?.map((consumer) => {
+        const {name, consumer_stats} = consumer || {};
+
+        const {min_partitions_last_read_time, max_read_time_lag, max_write_time_lag, bytes_read} =
+            consumer_stats || {};
+
+        return {
+            name,
+            readSpeed: convertBytesObjectToSpeed(bytes_read),
+
+            writeLag: parseLag(max_write_time_lag),
+            readLag: parseLag(max_read_time_lag),
+            readIdleTime: parseTimestampToIdleTime(min_partitions_last_read_time),
+        };
+    });
+});
+
 export default topic;

package/dist/store/state-url-mapping.js

@@ -48,6 +48,9 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        shardsMode: {
+            stateKey: 'shardsWorkload.filters.mode',
+        },
         shardsDateFrom: {
             stateKey: 'shardsWorkload.filters.from',
             type: 'number',

package/dist/types/store/consumer.ts

@@ -0,0 +1,55 @@
+import type {IProcessSpeedStats} from '../../utils/bytesParsers';
+import type {ApiRequestAction} from '../../store/utils';
+
+import {FETCH_CONSUMER, setDataWasNotLoaded} from '../../store/reducers/consumer';
+
+import type {DescribeConsumerResult} from '../api/consumer';
+import type {IResponseError} from '../api/error';
+
+// All fields should be present though they could be undefined
+export interface IPreparedPartitionData {
+    partitionId: string;
+    storeSize: string;
+
+    writeSpeed: IProcessSpeedStats;
+    readSpeed: IProcessSpeedStats;
+
+    partitionWriteLag: number;
+    partitionWriteIdleTime: number;
+
+    consumerWriteLag: number;
+    consumerReadLag: number;
+    consumerReadIdleTime: number;
+
+    uncommitedMessages: number;
+    unreadMessages: number;
+
+    startOffset: string;
+    endOffset: string;
+    commitedOffset: string;
+
+    readSessionId: string | undefined;
+    readerName: string | undefined;
+
+    partitionNodeId: number;
+    connectionNodeId: number;
+}
+
+export interface IConsumerState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: DescribeConsumerResult;
+    error?: IResponseError;
+}
+
+type IConsumerApiRequestAction = ApiRequestAction<
+    typeof FETCH_CONSUMER,
+    DescribeConsumerResult,
+    IResponseError
+>;
+
+export type IConsumerAction = IConsumerApiRequestAction | ReturnType<typeof setDataWasNotLoaded>;
+
+export interface IConsumerRootStateSlice {
+    consumer: IConsumerState;
+}

package/dist/types/store/shardsWorkload.ts

@@ -3,11 +3,17 @@ import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
 import type {IQueryResult} from './query';
 
+export enum EShardsWorkloadMode {
+    Immediate = 'immediate',
+    History = 'history',
+}
+
 export interface IShardsWorkloadFilters {
     /** ms from epoch */
     from?: number;
     /** ms from epoch */
     to?: number;
+    mode?: EShardsWorkloadMode;
 }
 
 export interface IShardsWorkloadState {

package/dist/types/store/topic.ts

@@ -1,8 +1,27 @@
-import {FETCH_TOPIC} from '../../store/reducers/topic';
+import {FETCH_TOPIC, setDataWasNotLoaded} from '../../store/reducers/topic';
 import type {ApiRequestAction} from '../../store/utils';
+import type {IProcessSpeedStats} from '../../utils/bytesParsers';
 import type {IResponseError} from '../api/error';
 import type {DescribeTopicResult} from '../api/topic';
 
+export interface IPreparedConsumerData {
+    name: string | undefined;
+    readSpeed: IProcessSpeedStats;
+
+    writeLag: number;
+    readLag: number;
+    readIdleTime: number;
+}
+
+export interface IPreparedTopicStats {
+    storeSize: string;
+
+    partitionsWriteLag: number;
+    partitionsIdleTime: number;
+
+    writeSpeed: IProcessSpeedStats;
+}
+
 export interface ITopicState {
     loading: boolean;
     wasLoaded: boolean;
@@ -10,11 +29,9 @@ export interface ITopicState {
     error?: IResponseError;
 }
 
-export type ITopicAction = ApiRequestAction<
-    typeof FETCH_TOPIC,
-    DescribeTopicResult,
-    IResponseError
->;
+export type ITopicAction =
+    | ApiRequestAction<typeof FETCH_TOPIC, DescribeTopicResult, IResponseError>
+    | ReturnType<typeof setDataWasNotLoaded>;
 
 export interface ITopicRootStateSlice {
     topic: ITopicState;

package/dist/utils/bytesParsers/convertBytesObjectToSpeed.ts

@@ -0,0 +1,24 @@
+import type {MultipleWindowsStat} from '../../types/api/consumer';
+
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from '../constants';
+
+export interface IProcessSpeedStats {
+    perMinute: number;
+    perHour: number;
+    perDay: number;
+}
+
+/**
+ * Convert data of type MultipleWindowsStat.
+ * This data format is specific for describe_topic and describe_consumer endpoints
+ */
+export const convertBytesObjectToSpeed = (
+    data: MultipleWindowsStat | undefined,
+): IProcessSpeedStats => {
+    return {
+        perMinute:
+            data && data.per_minute ? Math.round(Number(data.per_minute) / MINUTE_IN_SECONDS) : 0,
+        perHour: data && data.per_hour ? Math.round(Number(data.per_hour) / HOUR_IN_SECONDS) : 0,
+        perDay: data && data.per_day ? Math.round(Number(data.per_day) / DAY_IN_SECONDS) : 0,
+    };
+};

package/dist/utils/bytesParsers/formatBytesCustom.ts

@@ -0,0 +1,57 @@
+import {GIGABYTE, KILOBYTE, MEGABYTE} from '../constants';
+import {isNumeric} from '../utils';
+
+import i18n from './i18n';
+
+const sizes = {
+    b: {
+        value: 1,
+        label: i18n('b'),
+    },
+    kb: {
+        value: KILOBYTE,
+        label: i18n('kb'),
+    },
+    mb: {
+        value: MEGABYTE,
+        label: i18n('mb'),
+    },
+    gb: {
+        value: GIGABYTE,
+        label: i18n('gb'),
+    },
+};
+
+export type IBytesSizes = keyof typeof sizes;
+
+interface FormatBytesArgs {
+    value: number | string | undefined;
+    size?: IBytesSizes;
+    precision?: number;
+    withLabel?: boolean;
+    isSpeed?: boolean;
+}
+
+export const formatBytesCustom = ({
+    value,
+    size = 'mb',
+    precision = 0,
+    withLabel = true,
+    isSpeed = false,
+}: FormatBytesArgs) => {
+    if (!isNumeric(value)) {
+        return '';
+    }
+
+    let result = (Number(value) / sizes[size].value).toFixed(precision);
+
+    if (withLabel) {
+        result += ` ${sizes[size].label}`;
+
+        if (isSpeed) {
+            result += i18n('perSecond');
+        }
+    }
+
+    return result;
+};