ydb-embedded-ui 3.2.2 → 3.3.0

package/dist/types/api/schema.ts

@@ -479,7 +479,7 @@ interface TKeyComponentSchema {
     TypeId?: number;
 }
 
-enum EMeteringMode {
+export enum EMeteringMode {
     METERING_MODE_RESERVED_CAPACITY = 'METERING_MODE_RESERVED_CAPACITY',
     METERING_MODE_REQUEST_UNITS = 'METERING_MODE_REQUEST_UNITS',
 }
@@ -526,7 +526,7 @@ interface TMirrorPartitionConfig {
     SyncWriteTime?: boolean;
 }
 
-interface TPQPartitionConfig {
+export interface TPQPartitionConfig {
     MaxCountInPartition?: number;
     /** int64 */
     MaxSizeInPartition?: string;
@@ -559,7 +559,7 @@ interface TPQPartitionConfig {
     MirrorFrom?: TMirrorPartitionConfig;
 }
 
-interface TPQTabletConfig {
+export interface TPQTabletConfig {
     /** uint64 */
     CacheSize?: string;
     PartitionConfig: TPQPartitionConfig;

package/dist/types/api/topic.ts

@@ -1,5 +1,6 @@
 /* eslint-disable camelcase */
 
+import {IProtobufTimeObject} from './common';
 import {Consumer, Entry, MultipleWindowsStat, PartitionStats, SupportedCodecs} from './consumer';
 
 /**
@@ -27,7 +28,7 @@ export interface DescribeTopicResult {
      *
      * How long data in partition should be stored.
      */
-    retention_period?: string;
+    retention_period?: string | IProtobufTimeObject;
 
     /**
      * int64
@@ -98,7 +99,7 @@ interface PartitionInfo {
     partition_stats?: PartitionStats;
 }
 
-interface TopicStats {
+export interface TopicStats {
     /**
      * int64
      *
@@ -111,14 +112,14 @@ interface TopicStats {
      *
      * Minimum of timestamps of last write among all partitions.
      */
-    min_last_write_time?: string;
+    min_last_write_time?: string | IProtobufTimeObject;
 
     /**
      * google.protobuf.Duration
      *
      * Maximum of differences between write timestamp and create timestamp for all messages, written during last minute.
      */
-    max_write_time_lag?: string;
+    max_write_time_lag?: string | IProtobufTimeObject;
 
     /** How much bytes were written statistics. */
     bytes_written?: MultipleWindowsStat;

package/dist/types/api/vdisk.ts

@@ -10,6 +10,7 @@ export interface TVDiskStateInfo {
     CreateTime?: string;
     /** uint64 */
     ChangeTime?: string;
+    PDiskId?: number;
     PDisk?: TPDiskStateInfo;
     VDiskSlotId?: number;
     /** uint64 */
@@ -113,7 +114,7 @@ interface TRank {
     Flag?: EFlag;
 }
 
-enum EVDiskState {
+export enum EVDiskState {
     Initial = 'Initial',
     LocalRecoveryError = 'LocalRecoveryError',
     SyncGuidRecovery = 'SyncGuidRecovery',

package/dist/types/store/nodes.ts

@@ -1,30 +1,80 @@
+import type {IResponseError} from '../api/error';
+import type {TEndpoint, TPoolStats} from '../api/nodes';
+import type {TTabletStateInfo as TComputeTabletStateInfo} from '../api/compute';
+import type {TTabletStateInfo as TFullTabletStateInfo} from '../api/tablet';
+import type {EFlag} from '../api/enums';
+
 import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {
     FETCH_NODES,
-    clearNodes,
+    resetNodesState,
     setDataWasNotLoaded,
     setNodesUptimeFilter,
+    setSearchValue,
 } from '../../store/reducers/nodes';
 import {ApiRequestAction} from '../../store/utils';
-import {IResponseError} from '../api/error';
-import {TNodesInfo} from '../api/nodes';
+
+// Since nodes from different endpoints can have different types,
+// This type describes fields, that are expected by tables with nodes
+export interface INodesPreparedEntity {
+    NodeId: number;
+    Host?: string;
+    SystemState?: EFlag;
+    DataCenter?: string;
+    Rack?: string;
+    Version?: string;
+    StartTime?: string;
+    Uptime: string;
+    MemoryUsed?: string;
+    PoolStats?: TPoolStats[];
+    LoadAverage?: number[];
+    Tablets?: TFullTabletStateInfo[] | TComputeTabletStateInfo[];
+    TenantName?: string;
+    Endpoints?: TEndpoint[];
+}
 
 export interface INodesState {
     loading: boolean;
     wasLoaded: boolean;
     nodesUptimeFilter: NodesUptimeFilterValues;
-    data?: TNodesInfo;
+    searchValue: string;
+    data?: INodesPreparedEntity[];
+    totalNodes?: number;
     error?: IResponseError;
 }
 
-type INodesApiRequestAction = ApiRequestAction<typeof FETCH_NODES, TNodesInfo, IResponseError>;
+type INodesApiRequestNodeType = 'static' | 'dynamic' | 'any';
+
+// Space - out of space nodes
+// Missing - nodes with missing disks
+type INodesApiRequestProblemType = 'missing' | 'space';
+
+export interface INodesApiRequestParams {
+    tenant?: string;
+    type?: INodesApiRequestNodeType;
+    filter?: INodesApiRequestProblemType;
+    storage?: boolean;
+    tablets?: boolean;
+}
+
+export interface INodesHandledResponse {
+    Nodes?: INodesPreparedEntity[];
+    TotalNodes: number;
+}
+
+type INodesApiRequestAction = ApiRequestAction<
+    typeof FETCH_NODES,
+    INodesHandledResponse,
+    IResponseError
+>;
 
 export type INodesAction =
     | INodesApiRequestAction
     | (
-          | ReturnType<typeof clearNodes>
           | ReturnType<typeof setDataWasNotLoaded>
           | ReturnType<typeof setNodesUptimeFilter>
+          | ReturnType<typeof setSearchValue>
+          | ReturnType<typeof resetNodesState>
       );
 
 export interface INodesRootStateSlice {

package/dist/types/store/tooltip.ts

@@ -11,7 +11,7 @@ export interface ITooltipPositions {
 export interface ITooltipState {
     toolTipVisible: boolean;
     positions?: ITooltipPositions;
-    currentHoveredRef?: EventTarget;
+    currentHoveredRef?: EventTarget | null;
     template: (data: any) => JSX.Element;
     templateType: ITooltipTemplateType;
     data?: any;

package/dist/types/store/topic.ts

@@ -0,0 +1,21 @@
+import {FETCH_TOPIC} from '../../store/reducers/topic';
+import type {ApiRequestAction} from '../../store/utils';
+import type {IResponseError} from '../api/error';
+import type {DescribeTopicResult} from '../api/topic';
+
+export interface ITopicState {
+    loading: boolean;
+    wasLoaded: boolean;
+    data?: DescribeTopicResult;
+    error?: IResponseError;
+}
+
+export type ITopicAction = ApiRequestAction<
+    typeof FETCH_TOPIC,
+    DescribeTopicResult,
+    IResponseError
+>;
+
+export interface ITopicRootStateSlice {
+    topic: ITopicState;
+}

package/dist/utils/constants.ts

@@ -14,9 +14,12 @@ export const GIGABYTE = 1_000_000_000;
 export const TERABYTE = 1_000_000_000_000;
 export const GROUP = 'group';
 
-export const HOUR_IN_SECONDS = 60 * 60;
+export const MINUTE_IN_SECONDS = 60;
+export const HOUR_IN_SECONDS = 60 * MINUTE_IN_SECONDS;
 export const DAY_IN_SECONDS = 24 * HOUR_IN_SECONDS;
 
+export const MS_IN_NANOSECONDS = 1000000;
+
 export const TABLET_STATES = {
     TABLET_VOLATILE_STATE_UNKNOWN: 'unknown',
     TABLET_VOLATILE_STATE_STOPPED: 'stopped',
@@ -89,6 +92,7 @@ export type IProblemFilterValues = typeof ALL | typeof PROBLEMS;
 
 export const THEME_KEY = 'theme';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
+export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
 export const SAVED_QUERIES_KEY = 'saved_queries';
 export const ASIDE_HEADER_COMPACT_KEY = 'asideHeaderCompact';
 export const QUERIES_HISTORY_KEY = 'queries_history';

package/dist/utils/i18n/i18n.ts

@@ -1,8 +1,16 @@
 import {I18N} from '@gravity-ui/i18n';
+import {configure as configureUiKit} from '@gravity-ui/uikit';
+import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 
-export enum Lang {
+enum Lang {
     En = 'en',
     Ru = 'ru',
 }
 
-export const i18n = new I18N();
+const i18n = new I18N();
+
+i18n.setLang(Lang.En);
+configureYdbUiComponents({lang: Lang.En});
+configureUiKit({lang: Lang.En});
+
+export {i18n, Lang};

package/dist/utils/index.js

@@ -2,7 +2,7 @@ import numeral from 'numeral';
 import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
 
 import {i18n} from './i18n';
-import {MEGABYTE, TERABYTE, DAY_IN_SECONDS, GIGABYTE} from './constants';
+import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
 import {isNumeric} from './utils';
 
 numeral.locale(i18n.lang);

package/dist/utils/timeParsers/__test__/formatDuration.test.ts

@@ -0,0 +1,50 @@
+import {formatDurationToShortTimeFormat} from '../formatDuration';
+import i18n from '../i18n';
+
+describe('formatDurationToShortTimeFormat', () => {
+    // 1 - ms
+    const timeWithMs = 123;
+    const formattedTimeWithMs = i18n('ms', {seconds: 0, ms: 123});
+
+    // 2 - seconds and ms
+    const timeWithSecondsAndMsInMs = 12345;
+    const formattedTimeWithSecondsAndMs = i18n('secMs', {seconds: 12, ms: 345});
+
+    // 3 - minutes
+    const timeWithMinutesInMs = 754567;
+    const formattedTimeWithMinutes = i18n('minSec', {minutes: 12, seconds: 34});
+
+    // 4 - hours
+    const timeWithHoursInMs = 9245678;
+    const formattedTimeWithHours = i18n('hoursMin', {hours: 2, minutes: 34});
+
+    // 5 - days
+    const timeWithDaysInMs = 439234123;
+    const formattedTimeWithDays = i18n('daysHours', {days: 5, hours: 2});
+
+    // 6 - zero
+    const formattedZero = i18n('ms', {seconds: 0, ms: 0});
+
+    it('should return ms on values less than second', () => {
+        expect(formatDurationToShortTimeFormat(timeWithMs)).toEqual(formattedTimeWithMs);
+    });
+    it('should return seconds and ms', () => {
+        expect(formatDurationToShortTimeFormat(timeWithSecondsAndMsInMs)).toEqual(
+            formattedTimeWithSecondsAndMs,
+        );
+    });
+    it('should return minutes and seconds', () => {
+        expect(formatDurationToShortTimeFormat(timeWithMinutesInMs)).toEqual(
+            formattedTimeWithMinutes,
+        );
+    });
+    it('should return hours and minutes', () => {
+        expect(formatDurationToShortTimeFormat(timeWithHoursInMs)).toEqual(formattedTimeWithHours);
+    });
+    it('should return days and hours', () => {
+        expect(formatDurationToShortTimeFormat(timeWithDaysInMs)).toEqual(formattedTimeWithDays);
+    });
+    it('should process zero values', () => {
+        expect(formatDurationToShortTimeFormat(0)).toEqual(formattedZero);
+    });
+});

package/dist/utils/timeParsers/__test__/protobuf.test.ts

@@ -0,0 +1,74 @@
+import {
+    parseProtobufDurationToMs,
+    parseProtobufTimeObjectToMs,
+    parseProtobufTimestampToMs,
+} from '../';
+
+describe('Protobuf time parsers', () => {
+    // 1 - nanoseconds only
+    const timeObjectWithNanoseconds = {
+        nanos: 123000000,
+    };
+    const timeWithNanosecondsInMs = 123;
+
+    // 2 - seconds only
+    const timeObjectWithSeconds = {
+        seconds: '12',
+    };
+    const timeWithSecondsInMs = 12000;
+    const stringDurationSeconds = '12s';
+
+    // 3 - days
+    const timeObjectWithDays = {
+        seconds: '439234',
+        nanos: 123000000,
+    };
+    const timeWithDaysInMs = 439234123;
+
+    // 4 - TimeStamp
+    const timestamp = '2023-01-16T14:26:34.466Z';
+    const timestampInMs = 1673879194466;
+    const timestampObject = {
+        seconds: '1673879194',
+        nanos: 466000000,
+    };
+
+    describe('parseProtobufTimeObjectToMs', () => {
+        it('should work with timestamp object values', () => {
+            expect(parseProtobufTimeObjectToMs(timeObjectWithDays)).toEqual(timeWithDaysInMs);
+        });
+        it('should work with timestamp object without seconds', () => {
+            expect(parseProtobufTimeObjectToMs(timeObjectWithNanoseconds)).toEqual(
+                timeWithNanosecondsInMs,
+            );
+        });
+        it('should work with timestamp object without nanos', () => {
+            expect(parseProtobufTimeObjectToMs(timeObjectWithSeconds)).toEqual(timeWithSecondsInMs);
+        });
+        it('should work with empty object values', () => {
+            expect(parseProtobufTimeObjectToMs({})).toEqual(0);
+        });
+    });
+    describe('parseProtobufTimestampToMs', () => {
+        it('should work with string date values', () => {
+            expect(parseProtobufTimestampToMs(timestamp)).toEqual(timestampInMs);
+        });
+        it('should work with timestamp object values', () => {
+            expect(parseProtobufTimestampToMs(timestampObject)).toEqual(timestampInMs);
+        });
+        it('should work with empty object values', () => {
+            expect(parseProtobufTimestampToMs({})).toEqual(0);
+        });
+    });
+    describe('parseProtobufDurationToMs', () => {
+        it('should work with string values', () => {
+            expect(parseProtobufDurationToMs(stringDurationSeconds)).toEqual(timeWithSecondsInMs);
+        });
+        it('should work with duration object values', () => {
+            expect(parseProtobufDurationToMs(timeObjectWithDays)).toEqual(timeWithDaysInMs);
+        });
+        it('should work with empty object values', () => {
+            expect(parseProtobufDurationToMs({})).toEqual(0);
+        });
+    });
+});

package/dist/utils/timeParsers/formatDuration.ts

@@ -0,0 +1,46 @@
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS} from '../constants';
+
+import i18n from './i18n';
+
+/**
+ * Process time difference in ms and returns formated time.
+ * Only two major values are returned (days & hours, hours & minutes, minutes & seconds, etc.)
+ */
+export const formatDurationToShortTimeFormat = (value: number) => {
+    const ms = value % 1000;
+    let remain = Math.floor(value / 1000);
+
+    const days = Math.floor(remain / DAY_IN_SECONDS);
+    remain = remain % DAY_IN_SECONDS;
+
+    const hours = Math.floor(remain / HOUR_IN_SECONDS);
+    remain = remain % HOUR_IN_SECONDS;
+
+    const minutes = Math.floor(remain / 60);
+    remain = remain % 60;
+
+    const seconds = remain;
+
+    const duration = {
+        days,
+        hours,
+        minutes,
+        seconds,
+        ms,
+    };
+
+    if (days > 0) {
+        return i18n('daysHours', duration);
+    }
+    if (hours > 0) {
+        return i18n('hoursMin', duration);
+    }
+    if (minutes > 0) {
+        return i18n('minSec', duration);
+    }
+    if (seconds > 0) {
+        return i18n('secMs', duration);
+    }
+
+    return i18n('ms', duration);
+};

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

@@ -0,0 +1,7 @@
+{
+  "daysHours": "{{days}}d {{hours}}h",
+  "hoursMin": "{{hours}}h {{minutes}}m",
+  "minSec": "{{minutes}}m {{seconds}}s",
+  "secMs": "{{seconds}}s {{ms}}ms",
+  "ms": "{{ms}}ms"
+}

package/dist/utils/timeParsers/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-time-parsers';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,7 @@
+{
+  "daysHours": "{{days}}д {{hours}}ч",
+  "hoursMin": "{{hours}}ч {{minutes}}м",
+  "minSec": "{{minutes}}м {{seconds}}с",
+  "secMs": "{{seconds}}с {{ms}}мс",
+  "ms": "{{ms}}мс"
+}

package/dist/utils/timeParsers/index.ts

@@ -0,0 +1,2 @@
+export * from './formatDuration';
+export * from './protobuf';

package/dist/utils/timeParsers/protobuf.ts

@@ -0,0 +1,36 @@
+import type {IProtobufTimeObject} from '../../types/api/common';
+
+import {MS_IN_NANOSECONDS} from '../constants';
+
+/**
+ * Parses Google.protobuf Duration and Timestamp represented by objects
+ */
+export const parseProtobufTimeObjectToMs = (value: IProtobufTimeObject): number => {
+    const secondsInMs = value.seconds ? Number(value.seconds) * 1000 : 0;
+    const nanosecondsInMs = value.nanos ? value.nanos / MS_IN_NANOSECONDS : 0;
+    return secondsInMs + nanosecondsInMs;
+};
+
+/**
+ * Parses Google.protobuf Timestamp to ms.
+ * Timestamp could be represented as object or as date string
+ */
+export const parseProtobufTimestampToMs = (value: string | IProtobufTimeObject) => {
+    if (typeof value === 'string') {
+        return Date.parse(value);
+    } else {
+        return parseProtobufTimeObjectToMs(value);
+    }
+};
+
+/**
+ * Parses Google.protobuf Duration to ms.
+ * Duration could be represented as object or as string with format '12345s'
+ */
+export const parseProtobufDurationToMs = (value: string | IProtobufTimeObject) => {
+    if (typeof value === 'string') {
+        return parseInt(value, 10) * 1000;
+    } else {
+        return parseProtobufTimeObjectToMs(value);
+    }
+};

package/package.json

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

package/dist/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,48 +0,0 @@
-import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
-import {useTypedSelector} from '../../../utils/hooks';
-import {selectSchemaData} from '../../../store/reducers/schema';
-import {getEntityName} from '../../../containers/Tenant/utils';
-
-import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
-import {InfoViewer, InfoViewerItem} from '..';
-
-const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set(['Mode', 'Format']);
-
-interface CDCStreamInfoProps {
-    data?: TEvDescribeSchemeResult;
-    childrenPaths?: string[];
-}
-
-export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
-    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
-
-    const entityName = getEntityName(data?.PathDescription);
-
-    if (!data || !pqGroupData) {
-        return <div className="error">No {entityName} data</div>;
-    }
-
-    const cdcStream = data.PathDescription?.CdcStreamDescription;
-    const pqGroup = pqGroupData?.PathDescription?.PersQueueGroup;
-
-    const info: Array<InfoViewerItem> = [];
-
-    info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
-
-    let key: keyof TCdcStreamDescription;
-    for (key in cdcStream) {
-        if (DISPLAYED_FIELDS.has(key)) {
-            info.push(formatCdcStreamItem(key, cdcStream?.[key]));
-        }
-    }
-
-    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
-    info.push(
-        formatPQGroupItem(
-            'PQTabletConfig',
-            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
-        ),
-    );
-
-    return <InfoViewer title={entityName} info={info} />;
-};

package/dist/components/InfoViewer/schemaInfo/PersQueueGroupInfo.tsx

@@ -1,30 +0,0 @@
-import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
-import {getEntityName} from '../../../containers/Tenant/utils';
-
-import {formatPQGroupItem} from '../formatters';
-import {InfoViewer, InfoViewerItem} from '..';
-
-interface PersQueueGrouopInfoProps {
-    data?: TEvDescribeSchemeResult;
-}
-
-export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
-    const entityName = getEntityName(data?.PathDescription);
-
-    if (!data) {
-        return <div className="error">No {entityName} data</div>;
-    }
-
-    const pqGroup = data.PathDescription?.PersQueueGroup;
-    const info: Array<InfoViewerItem> = [];
-
-    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
-    info.push(
-        formatPQGroupItem(
-            'PQTabletConfig',
-            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
-        ),
-    );
-
-    return <InfoViewer title={entityName} info={info} />;
-};

package/dist/components/InternalLink/InternalLink.js

@@ -1,23 +0,0 @@
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import {Link} from 'react-router-dom';
-
-const bLink = cn('yc-link');
-
-export default function InternalLink({to, children, onClick, className}) {
-    return to ? (
-        <Link className={bLink({view: 'normal'}, className)} to={to} onClick={onClick}>
-            {children}
-        </Link>
-    ) : (
-        children
-    );
-}
-
-InternalLink.propTypes = {
-    to: PropTypes.string.isRequired,
-    children: PropTypes.node,
-    onClick: PropTypes.func,
-    className: PropTypes.string,
-};