ydb-embedded-ui 5.0.0 → 5.1.0

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

@@ -1,28 +1,25 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import InfoViewer from '../../../../../components/InfoViewer/InfoViewer';
 import { ProgressViewer } from '../../../../../components/ProgressViewer/ProgressViewer';
+import { LabelWithPopover } from '../../../../../components/LabelWithPopover';
 import { formatStorageValues } from '../../../../../utils/dataFormatters/dataFormatters';
-import { getSizeWithSignificantDigits } from '../../../../../utils/bytesParsers';
 import { TenantDashboard } from '../TenantDashboard/TenantDashboard';
 import '../TenantOverview.scss';
 import { storageDashboardConfig } from './storageDashboardConfig';
 import { TopTables } from './TopTables';
 import { TopGroups } from './TopGroups';
 import { b } from '../utils';
+import i18n from '../i18n';
 export function TenantStorage({ tenantName, metrics }) {
-    const { blobStorageUsed, tableStorageUsed, blobStorageLimit, tableStorageLimit } = metrics;
-    const formatValues = (value, total) => {
-        const size = getSizeWithSignificantDigits(Number(blobStorageLimit || blobStorageUsed), 0);
-        return formatStorageValues(value, total, size);
-    };
+    const { blobStorageUsed, tabletStorageUsed, blobStorageLimit, tabletStorageLimit } = metrics;
     const info = [
         {
-            label: 'Database storage',
-            value: (_jsx(ProgressViewer, { value: blobStorageUsed, capacity: blobStorageLimit, formatValues: formatValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
+            label: (_jsx(LabelWithPopover, { text: i18n('storage.tablet-storage-title'), popoverContent: i18n('storage.tablet-storage-description') })),
+            value: (_jsx(ProgressViewer, { value: tabletStorageUsed, capacity: tabletStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
         },
         {
-            label: 'Table storage',
-            value: (_jsx(ProgressViewer, { value: tableStorageUsed, capacity: tableStorageLimit, formatValues: formatValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
+            label: (_jsx(LabelWithPopover, { text: i18n('storage.db-storage-title'), popoverContent: i18n('storage.db-storage-description') })),
+            value: (_jsx(ProgressViewer, { value: blobStorageUsed, capacity: blobStorageLimit, formatValues: formatStorageValues, colorizeProgress: true, warningThreshold: 75, dangerThreshold: 85 })),
         },
     ];
     return (_jsxs(_Fragment, { children: [_jsx(TenantDashboard, { charts: storageDashboardConfig }), _jsx(InfoViewer, { className: b('storage-info'), title: "Storage details", info: info }), _jsx(TopTables, { path: tenantName }), _jsx(TopGroups, { tenant: tenantName })] }));

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

@@ -2,8 +2,6 @@
     "no-data": "No data",
     "no-pools-data": "No pools data",
     "top-nodes.empty-data": "No such nodes",
-    "title.pools": "Pools",
-    "title.metrics": "Metrics",
     "top-groups.empty-data": "No such groups",
     "top": "Top",
     "nodes": "nodes",
@@ -20,7 +18,11 @@
     "by-size": "by size",
     "charts.queries-per-second": "Queries per second",
     "charts.transaction-latency": "Transactions latencies {{percentile}}",
-    "charts.cpu-usage": "CPU usage",
-    "charts.storage-usage": "Storage usage",
-    "charts.memory-usage": "Memory usage"
+    "charts.cpu-usage": "CPU cores used",
+    "charts.storage-usage": "Tablet storage usage",
+    "charts.memory-usage": "Memory usage",
+    "storage.tablet-storage-title": "Tablet storage",
+    "storage.tablet-storage-description": "Size of user data and indexes stored in schema objects (tables, topics, etc.)",
+    "storage.db-storage-title": "Database storage",
+    "storage.db-storage-description": "Size of data stored in distributed storage with all overheads for redundancy"
 }

package/dist/containers/Tenant/Diagnostics/TenantOverview/i18n/index.js

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

package/dist/containers/Tenant/Diagnostics/TopQueries/getTopQueriesColumns.js

@@ -4,6 +4,7 @@ import DataTable from '@gravity-ui/react-data-table';
 import { formatDateTime, formatNumber } from '../../../../utils/dataFormatters/dataFormatters';
 import { generateHash } from '../../../../utils/generateHash';
 import { TruncatedQuery, OneLineQueryWithPopover, } from '../../../../components/TruncatedQuery/TruncatedQuery';
+import { parseUsToMs } from '../../../../utils/timeParsers';
 import { MAX_QUERY_HEIGHT } from '../../utils/constants';
 import './TopQueries.scss';
 const b = cn('kv-top-queries');
@@ -16,6 +17,7 @@ const TOP_QUERIES_COLUMNS_IDS = {
     UserSID: 'UserSID',
     OneLineQueryText: 'OneLineQueryText',
     QueryHash: 'QueryHash',
+    Duration: 'Duration',
 };
 const cpuTimeUsColumn = {
     name: TOP_QUERIES_COLUMNS_IDS.CPUTimeUs,
@@ -68,11 +70,19 @@ const queryHashColumn = {
     width: 130,
     sortable: false,
 };
+const durationColumn = {
+    name: TOP_QUERIES_COLUMNS_IDS.Duration,
+    header: 'Duration, ms',
+    render: ({ row }) => { var _a; return formatNumber(parseUsToMs((_a = row.Duration) !== null && _a !== void 0 ? _a : undefined)); },
+    sortAccessor: (row) => Number(row.Duration),
+    align: DataTable.RIGHT,
+};
 export const getTopQueriesColumns = () => {
     return [
         cpuTimeUsColumn,
         queryTextColumn,
         endTimeColumn,
+        durationColumn,
         readRowsColumn,
         readBytesColumn,
         userSIDColumn,

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.d.ts

@@ -3,7 +3,7 @@ import type { EPathType } from '../../../types/api/schema';
 import type { AdditionalTenantsProps, AdditionalNodesProps } from '../../../types/additionalProps';
 import './ObjectGeneral.scss';
 interface ObjectGeneralProps {
-    type?: EPathType;
+    type: EPathType;
     additionalTenantProps?: AdditionalTenantsProps;
     additionalNodesProps?: AdditionalNodesProps;
 }

package/dist/containers/Tenant/Query/Query.d.ts

@@ -2,8 +2,8 @@ import type { EPathType } from '../../../types/api/schema';
 import './Query.scss';
 interface QueryProps {
     theme: string;
-    path?: string;
-    type?: EPathType;
+    path: string;
+    type: EPathType;
 }
 export declare const Query: (props: QueryProps) => JSX.Element;
 export {};

package/dist/containers/Tenant/Query/Query.js

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
 import { useDispatch } from 'react-redux';
+import { Helmet } from 'react-helmet-async';
 import block from 'bem-cn-lite';
 import { changeUserInput } from '../../../store/reducers/executeQuery';
 import { TENANT_QUERY_TABS_ID } from '../../../store/reducers/tenant/constants';
 import { useSetting, useTypedSelector } from '../../../utils/hooks';
 import { SAVED_QUERIES_KEY } from '../../../utils/constants';
-import { QueryTabs } from './QueryTabs/QueryTabs';
+import { QueryTabs, queryEditorTabs } from './QueryTabs/QueryTabs';
 import { SavedQueries } from './SavedQueries/SavedQueries';
 import QueriesHistory from './QueriesHistory/QueriesHistory';
 import QueryEditor from './QueryEditor/QueryEditor';
@@ -22,6 +24,7 @@ export const Query = (props) => {
     const handleUserInputChange = (value) => {
         dispatch(changeUserInput(value));
     };
+    const activeTab = React.useMemo(() => queryEditorTabs.find(({ id }) => id === queryTab), [queryTab]);
     const renderContent = () => {
         switch (queryTab) {
             case TENANT_QUERY_TABS_ID.newQuery: {
@@ -38,5 +41,5 @@ export const Query = (props) => {
             }
         }
     };
-    return (_jsxs("div", Object.assign({ className: b() }, { children: [_jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", Object.assign({ className: b('content') }, { children: renderContent() }))] })));
+    return (_jsxs("div", Object.assign({ className: b() }, { children: [activeTab ? (_jsx(Helmet, { children: _jsx("title", { children: activeTab.title }) })) : null, _jsx(QueryTabs, { className: b('tabs'), activeTab: queryTab }), _jsx("div", Object.assign({ className: b('content') }, { children: renderContent() }))] })));
 };

package/dist/containers/Tenant/Query/QueryEditor/QueryEditor.d.ts

@@ -1,32 +1,30 @@
-declare var _default: import("react-redux").ConnectedComponent<typeof QueryEditor, import("react-redux").Omit<PropTypes.InferProps<{
-    sendExecuteQuery: PropTypes.Requireable<(...args: any[]) => any>;
-    changeUserInput: PropTypes.Requireable<(...args: any[]) => any>;
-    path: PropTypes.Requireable<string>;
-    response: PropTypes.Requireable<boolean | any[]>;
-    executeQuery: PropTypes.Requireable<object>;
-    explainQuery: PropTypes.Requireable<object>;
-    setMonacoHotKey: PropTypes.Requireable<(...args: any[]) => any>;
-    theme: PropTypes.Requireable<string>;
-    type: PropTypes.Requireable<string>;
-    initialQueryMode: PropTypes.Requireable<string>;
-    setTenantPath: PropTypes.Requireable<(...args: any[]) => any>;
-}>, "executeQuery" | "explainQuery" | "setTenantPath" | "sendExecuteQuery" | "setMonacoHotKey">>;
-export default _default;
-declare function QueryEditor(props: any): JSX.Element;
-declare namespace QueryEditor {
-    export { propTypes };
-}
-import PropTypes from "prop-types";
-declare namespace propTypes {
-    const sendExecuteQuery: PropTypes.Requireable<(...args: any[]) => any>;
-    const changeUserInput: PropTypes.Requireable<(...args: any[]) => any>;
-    const path: PropTypes.Requireable<string>;
-    const response: PropTypes.Requireable<boolean | any[]>;
-    const executeQuery: PropTypes.Requireable<object>;
-    const explainQuery: PropTypes.Requireable<object>;
-    const setMonacoHotKey: PropTypes.Requireable<(...args: any[]) => any>;
-    const theme: PropTypes.Requireable<string>;
-    const type: PropTypes.Requireable<string>;
-    const initialQueryMode: PropTypes.Requireable<string>;
-    const setTenantPath: PropTypes.Requireable<(...args: any[]) => any>;
+/// <reference types="react" />
+import { sendExecuteQuery, saveQueryToHistory, goToPreviousQuery, goToNextQuery, setTenantPath } from '../../../../store/reducers/executeQuery';
+import { getExplainQuery, getExplainQueryAst } from '../../../../store/reducers/explainQuery';
+import { setShowPreview } from '../../../../store/reducers/schema/schema';
+import type { ExecuteQueryState } from '../../../../types/store/executeQuery';
+import type { ExplainQueryState } from '../../../../types/store/explainQuery';
+import type { EPathType } from '../../../../types/api/schema';
+import './QueryEditor.scss';
+interface QueryEditorProps {
+    path: string;
+    sendExecuteQuery: (...args: Parameters<typeof sendExecuteQuery>) => void;
+    getExplainQuery: (...args: Parameters<typeof getExplainQuery>) => void;
+    getExplainQueryAst: (...args: Parameters<typeof getExplainQueryAst>) => void;
+    changeUserInput: (arg: {
+        input: string;
+    }) => void;
+    goToNextQuery: (...args: Parameters<typeof goToNextQuery>) => void;
+    goToPreviousQuery: (...args: Parameters<typeof goToPreviousQuery>) => void;
+    setTenantPath: (...args: Parameters<typeof setTenantPath>) => void;
+    executeQuery: ExecuteQueryState;
+    explainQuery: ExplainQueryState;
+    theme: string;
+    type: EPathType;
+    showPreview: boolean;
+    setShowPreview: (...args: Parameters<typeof setShowPreview>) => void;
+    saveQueryToHistory: (...args: Parameters<typeof saveQueryToHistory>) => void;
 }
+declare function QueryEditor(props: QueryEditorProps): JSX.Element;
+declare const _default: import("react-redux").ConnectedComponent<typeof QueryEditor, import("react-redux").Omit<QueryEditorProps, "executeQuery" | "explainQuery" | "setTenantPath" | "showPreview" | "sendExecuteQuery" | "saveQueryToHistory" | "goToPreviousQuery" | "goToNextQuery" | "getExplainQuery" | "getExplainQueryAst" | "setShowPreview">>;
+export default _default;