ydb-embedded-ui 3.2.3 → 3.3.1

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

@@ -23,8 +23,7 @@ import Describe from './Describe/Describe';
 import HotKeys from './HotKeys/HotKeys';
 //@ts-ignore
 import {Heatmap} from '../../Heatmap';
-//@ts-ignore
-import Compute from './Compute/Compute';
+import {Nodes} from '../../Nodes';
 //@ts-ignore
 import {Tablets} from '../../Tablets';
 import {Consumers} from './Consumers';
@@ -130,8 +129,8 @@ function Diagnostics(props: DiagnosticsProps) {
             }
             case GeneralPagesIds.nodes: {
                 return (
-                    <Compute
-                        tenantName={tenantNameString}
+                    <Nodes
+                        tenantPath={tenantNameString}
                         additionalNodesInfo={props.additionalNodesInfo}
                     />
                 );

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

@@ -6,7 +6,7 @@ import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-t
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
-import InternalLink from '../../../../components/InternalLink/InternalLink';
+import {InternalLink} from '../../../../components/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
 

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

@@ -0,0 +1,69 @@
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {formatObject, InfoViewer, InfoViewerItem} from '../../../../../components/InfoViewer';
+import {
+    formatCdcStreamItem,
+    formatCommonItem,
+} from '../../../../../components/InfoViewer/formatters';
+
+import {useTypedSelector} from '../../../../../utils/hooks';
+import {selectSchemaData} from '../../../../../store/reducers/schema';
+
+import {getEntityName} from '../../../utils';
+
+import {TopicStats} from '../TopicStats';
+
+import {prepareTopicSchemaInfo} from '../utils';
+
+const prepareChangefeedInfo = (
+    changefeedData?: TEvDescribeSchemeResult,
+    topicData?: TEvDescribeSchemeResult,
+): Array<InfoViewerItem> => {
+    if (!changefeedData && !topicData) {
+        return [];
+    }
+
+    const streamDescription = changefeedData?.PathDescription?.CdcStreamDescription;
+
+    const {Mode, Format} = streamDescription || {};
+
+    const created = formatCommonItem(
+        'CreateStep',
+        changefeedData?.PathDescription?.Self?.CreateStep,
+    );
+    const changefeedInfo = formatObject(formatCdcStreamItem, {
+        Mode,
+        Format,
+    });
+    const topicInfo = prepareTopicSchemaInfo(topicData);
+
+    return [created, ...changefeedInfo, ...topicInfo];
+};
+
+interface ChangefeedProps {
+    data?: TEvDescribeSchemeResult;
+    childrenPaths?: string[];
+}
+
+/** Displays overview for CDCStream EPathType */
+export const ChangefeedInfo = ({data, childrenPaths}: ChangefeedProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
+
+    if (schemaError) {
+        return <div className="error">{schemaError.statusText}</div>;
+    }
+
+    if (!data || !pqGroupData) {
+        return <div className="error">No {entityName} data</div>;
+    }
+
+    return (
+        <div>
+            <InfoViewer title={entityName} info={prepareChangefeedInfo(data, pqGroupData)} />
+            <TopicStats />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Overview/ChangefeedInfo/index.ts

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

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

@@ -6,20 +6,17 @@ import {Loader} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import SchemaInfoViewer from '../../Schema/SchemaInfoViewer/SchemaInfoViewer';
-import {
-    CDCStreamInfo,
-    TableIndexInfo,
-    PersQueueGroupInfo,
-} from '../../../../components/InfoViewer/schemaInfo';
+import {TableIndexInfo} from '../../../../components/InfoViewer/schemaInfo';
 
-import {
-    EPathType,
-    TEvDescribeSchemeResult,
-} from '../../../../types/api/schema';
+import {TopicInfo} from './TopicInfo';
+import {ChangefeedInfo} from './ChangefeedInfo';
+
+import {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
     isTableType,
+    isPathTypeWithTopic,
 } from '../../utils/schema';
 //@ts-ignore
 import {
@@ -28,6 +25,7 @@ import {
     resetLoadingState,
     selectSchemaMergedChildrenPaths,
 } from '../../../../store/reducers/schema';
+import {getTopic} from '../../../../store/reducers/topic';
 //@ts-ignore
 import {
     getOlapStats,
@@ -122,6 +120,10 @@ function Overview({type, tenantName, className}: OverviewProps) {
                 }
                 dispatch(getOlapStats({path: schemaPath}));
             }
+
+            if (isPathTypeWithTopic(type)) {
+                dispatch(getTopic(currentSchemaPath));
+            }
         },
         [
             tenantName,
@@ -163,9 +165,9 @@ function Overview({type, tenantName, className}: OverviewProps) {
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
             [EPathType.EPathTypeCdcStream]: () => (
-                <CDCStreamInfo data={schemaData} childrenPaths={mergedChildrenPaths} />
+                <ChangefeedInfo data={schemaData} childrenPaths={mergedChildrenPaths} />
             ),
-            [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
+            [EPathType.EPathTypePersQueueGroup]: () => <TopicInfo data={schemaData} />,
         };
 
         return (
@@ -175,11 +177,11 @@ function Overview({type, tenantName, className}: OverviewProps) {
         );
     };
 
-    return (loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths) ? (
-        renderLoader()
-    ) : (
-        <div className={className}>{renderContent()}</div>
-    );
+    if ((loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths)) {
+        return renderLoader();
+    }
+
+    return <div className={className}>{renderContent()}</div>;
 }
 
 export default Overview;

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

@@ -0,0 +1,37 @@
+import type {TEvDescribeSchemeResult} from '../../../../../types/api/schema';
+
+import {InfoViewer} from '../../../../../components/InfoViewer';
+
+import {useTypedSelector} from '../../../../../utils/hooks';
+
+import {getEntityName} from '../../../utils';
+
+import {prepareTopicSchemaInfo} from '../utils';
+
+import {TopicStats} from '../TopicStats';
+
+interface TopicInfoProps {
+    data?: TEvDescribeSchemeResult;
+}
+
+/** Displays overview for PersQueueGroup EPathType */
+export const TopicInfo = ({data}: TopicInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
+    const {error: schemaError} = useTypedSelector((state) => state.schema);
+
+    if (schemaError) {
+        return <div className="error">{schemaError.statusText}</div>;
+    }
+
+    if (!data) {
+        return <div className="error">No {entityName} data</div>;
+    }
+
+    return (
+        <div>
+            <InfoViewer title={entityName} info={prepareTopicSchemaInfo(data)} />
+            <TopicStats />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Overview/TopicInfo/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/TopicStats.scss

@@ -0,0 +1,30 @@
+@import '../../../../../styles/mixins.scss';
+
+.ydb-overview-topic-stats {
+    &__title {
+        @include info-viewer-title();
+    }
+
+    .ydb-loader {
+        margin-top: 50px;
+    }
+
+    .ydb-bars {
+        margin-top: -5px;
+    }
+
+    &__info {
+        .info-viewer__label-text_multiline {
+            max-width: 150px;
+        }
+    }
+
+    &__bytes-written {
+        margin-top: 7px;
+        padding-left: 20px;
+
+        .info-viewer__label {
+            min-width: 180px;
+        }
+    }
+}

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

@@ -0,0 +1,94 @@
+import cn from 'bem-cn-lite';
+import {isEmpty} from 'lodash/fp';
+
+import type {DescribeTopicResult} from '../../../../../types/api/topic';
+
+import {Loader} from '../../../../../components/Loader';
+import {InfoViewerItem, formatObject, InfoViewer} from '../../../../../components/InfoViewer';
+
+import {
+    prepareBytesWritten,
+    formatTopicStats,
+} from '../../../../../components/InfoViewer/formatters';
+
+import {useTypedSelector} from '../../../../../utils/hooks';
+import {formatBps} from '../../../../../utils';
+
+import i18n from './i18n';
+
+import './TopicStats.scss';
+
+const b = cn('ydb-overview-topic-stats');
+
+const prepareTopicInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
+    return [
+        ...formatObject(formatTopicStats, {
+            ...data.topic_stats,
+        }),
+    ];
+};
+
+const prepareBytesWrittenInfo = (data: DescribeTopicResult): Array<InfoViewerItem> => {
+    const preparedBytes = prepareBytesWritten(data?.topic_stats?.bytes_written);
+
+    return [
+        {
+            label: 'per minute',
+            value: formatBps(preparedBytes.per_minute),
+        },
+        {
+            label: 'per hour',
+            value: formatBps(preparedBytes.per_hour),
+        },
+        {
+            label: 'per day',
+            value: formatBps(preparedBytes.per_day),
+        },
+    ];
+};
+
+export const TopicStats = () => {
+    const {data, error, loading, wasLoaded} = useTypedSelector((state) => state.topic);
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b()}>
+                <Loader size="s" />
+            </div>
+        );
+    }
+
+    // There are several backed versions with different behaviour
+    // Possible returns on older versions:
+    // 1. Error when trying to access endpoint
+    // 2. No data
+    // 3. HTML page of Internal Viewer with an error
+    // 4. Data with no topic stats
+    // 5. Topic Stats as an empty object
+    if (
+        error ||
+        !data ||
+        typeof data !== 'object' ||
+        !data.topic_stats ||
+        isEmpty(data.topic_stats)
+    ) {
+        return (
+            <div className={b()}>
+                <div className={b('title')}>Stats</div>
+                <div className="error">{i18n('notSupportedVersion')}</div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={b()}>
+            <div className={b('title')}>Stats</div>
+            <div className={b('info')}>
+                <InfoViewer info={prepareTopicInfo(data)} multilineLabels />
+            </div>
+            <div className={b('bytes-written')}>
+                <InfoViewer info={prepareBytesWrittenInfo(data)} />
+            </div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/en.json

@@ -0,0 +1,3 @@
+{
+  "notSupportedVersion": "Topic stats are not supported in the current cluster version. Update cluster version to see topic stats"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+  "notSupportedVersion": "Статистика топиков не поддерживается в текущей версии. Обновите кластер до более новой версии, чтобы увидеть статистику топиков"
+}

package/dist/containers/Tenant/Diagnostics/Overview/TopicStats/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/utils/index.ts

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

package/dist/containers/Tenant/Diagnostics/Overview/utils/prepareTopicSchemaInfo.ts

@@ -0,0 +1,42 @@
+import type {
+    TEvDescribeSchemeResult,
+    TPersQueueGroupDescription,
+    TPQTabletConfig,
+    TPQPartitionConfig,
+} from '../../../../../types/api/schema';
+
+import {formatObject, InfoViewerItem} from '../../../../../components/InfoViewer';
+import {
+    formatPQGroupItem,
+    formatPQPartitionConfig,
+    formatPQTabletConfig,
+} from '../../../../../components/InfoViewer/formatters';
+
+export const prepareTopicSchemaInfo = (data?: TEvDescribeSchemeResult): Array<InfoViewerItem> => {
+    const pqGroupData = data?.PathDescription?.PersQueueGroup;
+
+    if (!pqGroupData) {
+        return [];
+    }
+
+    const {Partitions = [], PQTabletConfig = {PartitionConfig: {LifetimeSeconds: 0}}} = pqGroupData;
+
+    const {Codecs, MeteringMode} = pqGroupData?.PQTabletConfig;
+    const {WriteSpeedInBytesPerSecond, StorageLimitBytes} =
+        pqGroupData?.PQTabletConfig?.PartitionConfig;
+
+    const pqGeneralInfo = formatObject<TPersQueueGroupDescription>(formatPQGroupItem, {
+        Partitions,
+        PQTabletConfig,
+    });
+    const pqPartitionInfo = formatObject<TPQPartitionConfig>(formatPQPartitionConfig, {
+        StorageLimitBytes,
+        WriteSpeedInBytesPerSecond,
+    });
+    const pqTabletInfo = formatObject<TPQTabletConfig>(formatPQTabletConfig, {
+        Codecs,
+        MeteringMode,
+    });
+
+    return [...pqGeneralInfo, ...pqPartitionInfo, ...pqTabletInfo];
+};

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

@@ -217,3 +217,22 @@ const pathTypeToChildless: Record<EPathType, boolean> = {
 
 export const isChildlessPathType = (type?: EPathType, subType?: EPathSubType) =>
     ((subType && pathSubTypeToChildless[subType]) || (type && pathTypeToChildless[type])) ?? false;
+
+// ====================
+
+const mapPathTypeToIsWithTopic: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeCdcStream]: true,
+    [EPathType.EPathTypePersQueueGroup]: 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,
+};
+
+export const isPathTypeWithTopic = (type?: EPathType) =>
+    (type && mapPathTypeToIsWithTopic[type]) ?? false;

package/dist/containers/UserSettings/UserSettings.scss

@@ -0,0 +1,9 @@
+.ydb-user-settings {
+    &__item-with-popup {
+        max-width: 180px;
+    }
+
+    &__popup {
+        max-width: 370px;
+    }
+}

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,15 +1,25 @@
+import {ReactNode} from 'react';
 import {connect} from 'react-redux';
+import cn from 'bem-cn-lite';
 
-import {RadioButton, Switch} from '@gravity-ui/uikit';
+import {RadioButton, Switch, HelpPopover} from '@gravity-ui/uikit';
 import {Settings} from '@gravity-ui/navigation';
 
 import favoriteFilledIcon from '../../assets/icons/star.svg';
 import flaskIcon from '../../assets/icons/flask.svg';
 
-import {INVERTED_DISKS_KEY, THEME_KEY} from '../../utils/constants';
+import {
+    INVERTED_DISKS_KEY,
+    THEME_KEY,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+} from '../../utils/constants';
 
 import {setSettingValue} from '../../store/reducers/settings';
 
+import './UserSettings.scss';
+
+const b = cn('ydb-user-settings');
+
 enum Theme {
     light = 'light',
     dark = 'dark',
@@ -25,6 +35,23 @@ function UserSettings(props: any) {
         props.setSettingValue(INVERTED_DISKS_KEY, String(value));
     };
 
+    const _onNodesEndpointChangeHandler = (value: boolean) => {
+        props.setSettingValue(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY, String(value));
+    };
+
+    const renderBreakNodesSettingsItem = (title: ReactNode) => {
+        return (
+            <div className={b('item-with-popup')}>
+                {title}
+                <HelpPopover
+                    content="Use /viewer/json/nodes endpoint for Nodes Tab in diagnostics. It returns incorrect data on older versions"
+                    contentClassName={b('popup')}
+                    hasArrow={true}
+                />
+            </div>
+        );
+    };
+
     return (
         <Settings>
             <Settings.Page
@@ -42,11 +69,7 @@ function UserSettings(props: any) {
                     </Settings.Item>
                 </Settings.Section>
             </Settings.Page>
-            <Settings.Page
-                id="experiments"
-                title="Experiments"
-                icon={{data: flaskIcon}}
-            >
+            <Settings.Page id="experiments" title="Experiments" icon={{data: flaskIcon}}>
                 <Settings.Section title="Experiments">
                     <Settings.Item title="Inverted disks space indicators">
                         <Switch
@@ -54,6 +77,15 @@ function UserSettings(props: any) {
                             onUpdate={_onInvertedDisksChangeHandler}
                         />
                     </Settings.Item>
+                    <Settings.Item
+                        title="Break the Nodes tab in Diagnostics"
+                        renderTitleComponent={renderBreakNodesSettingsItem}
+                    >
+                        <Switch
+                            checked={props.useNodesEndpointInDiagnostics}
+                            onUpdate={_onNodesEndpointChangeHandler}
+                        />
+                    </Settings.Item>
                 </Settings.Section>
             </Settings.Page>
         </Settings>
@@ -61,14 +93,12 @@ function UserSettings(props: any) {
 }
 
 const mapStateToProps = (state: any) => {
-    const {
-        theme,
-        invertedDisks,
-    } = state.settings.userSettings;
+    const {theme, invertedDisks, useNodesEndpointInDiagnostics} = state.settings.userSettings;
 
     return {
         theme,
         invertedDisks: JSON.parse(invertedDisks),
+        useNodesEndpointInDiagnostics: JSON.parse(useNodesEndpointInDiagnostics),
     };
 };
 

package/dist/services/api.d.ts

@@ -17,10 +17,14 @@ interface Window {
                 tenant: string;
                 filter: string;
                 nodeId: string;
-                type: 'Groups' | 'Nodes';
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/storage').TStorageInfo>;
+        getNodes: (
+            params: import('../types/store/nodes').INodesApiRequestParams,
+            axiosOptions?: AxiosOptions,
+        ) => Promise<import('../types/api/nodes').TNodesInfo>;
+        getCompute: (path: string) => Promise<import('../types/api/compute').TComputeInfo>;
         sendQuery: <
             Action extends import('../types/api/query').Actions,
             Schema extends import('../types/api/query').Schemas = undefined,
@@ -55,6 +59,9 @@ interface Window {
         getHeatmapData: (params: {
             path: string;
         }) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
+        getTopic: (params: {
+            path?: string;
+        }) => Promise<import('../types/api/topic').DescribeTopicResult>;
         [method: string]: Function;
     };
 }

package/dist/services/api.js

@@ -1,7 +1,6 @@
 import AxiosWrapper from '@gravity-ui/axios-wrapper';
 
 import {backend as BACKEND} from '../store';
-import {StorageTypes} from '../store/reducers/storage';
 
 const config = {withCredentials: !window.custom_backend};
 
@@ -14,9 +13,6 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
     getClusterInfo() {
         return this.get(this.getPath('/viewer/json/cluster'), {tablets: true});
     }
-    getNodes(path) {
-        return this.get(this.getPath('/viewer/json/compute?enums=true'), {path});
-    }
     getNodeInfo(id) {
         return this.get(this.getPath('/viewer/json/sysinfo?enums=true'), {
             node_id: id,
@@ -35,11 +31,27 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             storage: true,
         });
     }
-    getStorageInfo({tenant, filter, nodeId, type}, {concurrentId} = {}) {
+    getNodes({tenant, filter, storage, type = 'any', tablets = true}, {concurrentId} = {}) {
+        return this.get(
+            this.getPath('/viewer/json/nodes?enums=true'),
+            {
+                tenant,
+                with: filter,
+                storage,
+                type,
+                tablets,
+            },
+            {
+                concurrentId,
+            },
+        );
+    }
+    getCompute(path) {
+        return this.get(this.getPath('/viewer/json/compute?enums=true'), {path});
+    }
+    getStorageInfo({tenant, filter, nodeId}, {concurrentId} = {}) {
         return this.get(
-            this.getPath(
-                `/viewer/json/${type === StorageTypes.nodes ? 'nodes' : 'storage'}?enums=true`,
-            ),
+            this.getPath(`/viewer/json/storage?enums=true`),
             {
                 tenant,
                 node_id: nodeId,
@@ -129,6 +141,13 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             path,
         });
     }
+    getTopic({path}) {
+        return this.get(this.getPath('/viewer/json/describe_topic'), {
+            enums: true,
+            include_stats: true,
+            path,
+        });
+    }
     getPoolInfo(poolName) {
         return this.get(this.getPath('/viewer/json/storage'), {
             pool: poolName,

package/dist/store/reducers/index.ts

@@ -17,12 +17,13 @@ import network from './network';
 import pool from './pool';
 import tenants from './tenants';
 import tablet from './tablet';
+import topic from './topic';
 import executeQuery from './executeQuery';
 import explainQuery from './explainQuery';
 import tabletsFilters from './tabletsFilters';
 import settings from './settings';
 import preview from './preview';
-import nodesList from './clusterNodes';
+import nodesList from './nodesList';
 import describe from './describe';
 import schemaAcl from './schemaAcl';
 import executeTopQueries from './executeTopQueries';
@@ -55,6 +56,7 @@ export const rootReducer = {
     pool,
     tenants,
     tablet,
+    topic,
     executeQuery,
     explainQuery,
     tabletsFilters,