ydb-embedded-ui 3.3.4 → 3.4.0

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/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/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;
+};

package/dist/utils/bytesParsers/i18n/en.json

@@ -0,0 +1,7 @@
+{
+  "b": "B",
+  "kb": "KB",
+  "mb": "MB",
+  "gb": "GB",
+  "perSecond": "/s"
+}

package/dist/utils/bytesParsers/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-bytes-parsers';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/utils/bytesParsers/i18n/ru.json

@@ -0,0 +1,7 @@
+{
+  "b": "Б",
+  "kb": "КБ",
+  "mb": "МБ",
+  "gb": "ГБ",
+  "perSecond": "/с"
+}

package/dist/utils/bytesParsers/index.ts

@@ -0,0 +1,2 @@
+export * from './formatBytesCustom';
+export * from './convertBytesObjectToSpeed';

package/dist/utils/constants.ts

@@ -9,6 +9,7 @@ export const AUTO_RELOAD_INTERVAL = 10 * SECOND;
 // by agreement, display all byte values in decimal scale
 // values in data are always in bytes, never in higher units,
 // therefore there is no issue arbitrary converting them in UI
+export const KILOBYTE = 1_000;
 export const MEGABYTE = 1_000_000;
 export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
@@ -118,3 +119,5 @@ export const DEFAULT_TABLE_SETTINGS = {
 
 export const TENANT_INITIAL_TAB_KEY = 'saved_tenant_initial_tab';
 export const QUERY_INITIAL_RUN_ACTION_KEY = 'query_initial_run_action';
+
+export const PARTITIONS_SELECTED_COLUMNS_KEY = 'partitionsSelectedColumns';

package/dist/utils/index.js

@@ -9,6 +9,8 @@ import {isNumeric} from './utils';
 
 numeral.locale(i18n.lang);
 
+// Here you can't control displayed size and precision
+// If you need more custom format, use formatBytesCustom instead
 export const formatBytes = (bytes) => {
     if (!isNumeric(bytes)) {
         return '';
@@ -42,6 +44,10 @@ export const formatUptime = (seconds) => {
     return uptime;
 };
 
+export const formatMsToUptime = (ms) => {
+    return formatUptime(ms / 1000);
+};
+
 export const formatIOPS = (value, capacity) => {
     return [Math.floor(value), Math.floor(capacity) + ' IOPS'];
 };

package/dist/utils/storage.ts

@@ -1,8 +1,8 @@
 import type {TVSlotId, TVDiskStateInfo} from '../types/api/vdisk';
 import type {IStoragePoolGroup} from '../types/store/storage';
 
-export const isFullDonorData = (donor: TVDiskStateInfo | TVSlotId): donor is TVDiskStateInfo =>
-    'VDiskId' in donor;
+export const isFullVDiksData = (disk: TVDiskStateInfo | TVSlotId): disk is TVDiskStateInfo =>
+    'VDiskId' in disk;
 
 export const getUsage = (data: IStoragePoolGroup, step = 1) => {
     // if limit is 0, display 0

package/dist/utils/timeParsers/index.ts

@@ -1,2 +1,3 @@
 export * from './formatDuration';
-export * from './protobuf';
+export * from './protobufParsers';
+export * from './parsers';

package/dist/utils/timeParsers/parsers.ts

@@ -0,0 +1,18 @@
+import type {IProtobufTimeObject} from '../../types/api/common';
+
+import {parseProtobufDurationToMs, parseProtobufTimestampToMs} from '.';
+
+export const parseLag = (value: string | IProtobufTimeObject | undefined) =>
+    value ? parseProtobufDurationToMs(value) : 0;
+
+export const parseTimestampToIdleTime = (value: string | IProtobufTimeObject | undefined) => {
+    if (!value) {
+        return 0;
+    }
+
+    const duration = Date.now() - parseProtobufTimestampToMs(value);
+
+    // Duration could be negative because of the difference between server and local time
+    // Usually it below 100ms, so it could be omitted
+    return duration < 0 ? 0 : duration;
+};

package/dist/utils/utils.js

@@ -76,9 +76,9 @@ export function bytesToGB(bytes, shouldRound) {
 
 export function pad9(val) {
     const len = String(val).length;
-    let result = val
+    let result = val;
     for (let i = len; i < 9; i++) {
-        result = "0" + result;
+        result = '0' + result;
     }
     return result;
 }
@@ -88,4 +88,4 @@ export function isNumeric(value) {
     // - isNaN treats true/false/''/etc. as numbers, parseFloat fixes this
     // - parseFloat treats '123qwe' as number, isNaN fixes this
     return !isNaN(value) && !isNaN(parseFloat(value));
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.3.4",
+  "version": "3.4.0",
   "files": [
     "dist"
   ],
@@ -39,7 +39,7 @@
     "reselect": "4.1.6",
     "sass": "1.32.8",
     "web-vitals": "1.1.2",
-    "ydb-ui-components": "^3.0.2"
+    "ydb-ui-components": "^3.0.3"
   },
   "scripts": {
     "start": "react-app-rewired start",