ydb-embedded-ui 3.3.1 → 3.3.3

package/dist/containers/Tenant/QueryEditor/QueryEditor.js

@@ -91,6 +91,8 @@ const initialTenantCommonInfoState = {
 function QueryEditor(props) {
     const [resultType, setResultType] = useState(RESULT_TYPES.EXECUTE);
 
+    const [isResultLoaded, setIsResultLoaded] = useState(false);
+
     const [resultVisibilityState, dispatchResultVisibilityState] = useReducer(
         paneVisibilityToggleReducerCreator(DEFAULT_IS_QUERY_RESULT_COLLAPSED),
         initialTenantCommonInfoState,
@@ -117,11 +119,12 @@ function QueryEditor(props) {
     }, []);
 
     useEffect(() => {
-        const {showPreview} = props;
-        if (showPreview && resultVisibilityState.collapsed) {
+        if (props.showPreview || isResultLoaded) {
             dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+        } else {
+            dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
         }
-    }, [props.showPreview, resultVisibilityState.collapsed]);
+    }, [props.showPreview, isResultLoaded]);
 
     useEffect(() => {
         const {
@@ -254,6 +257,7 @@ function QueryEditor(props) {
 
         setResultType(RESULT_TYPES.EXECUTE);
         sendQuery({query: input, database: path, action: runAction});
+        setIsResultLoaded(true);
         setShowPreview(false);
 
         const {queries, currentIndex} = history;
@@ -272,6 +276,7 @@ function QueryEditor(props) {
         } = props;
         setResultType(RESULT_TYPES.EXPLAIN);
         getExplainQuery({query: input, database: path});
+        setIsResultLoaded(true);
         setShowPreview(false);
         dispatchResultVisibilityState(PaneVisibilityActionTypes.triggerExpand);
     };

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -1,28 +1,33 @@
 import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
-import {Loader, RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
-import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
+import 'react-json-inspector/json-inspector.css';
+
 import {
     TextOverflow,
     getYdbPlanNodeShape,
     getCompactTopology,
     getTopology,
-} from '@yandex-cloud/paranoid';
-import {renderExplainNode} from '../../../../utils';
-import {explainVersions} from '../../../../store/reducers/explainQuery';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+} from '@gravity-ui/paranoid';
+import {Loader, RadioButton} from '@gravity-ui/uikit';
+
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 
-import 'react-json-inspector/json-inspector.css';
-import './QueryExplain.scss';
-import {useDispatch, useSelector} from 'react-redux';
+import {explainVersions} from '../../../../store/reducers/explainQuery';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
+import {renderExplainNode} from '../../../../utils';
+import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
+
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+
+import './QueryExplain.scss';
+
 const b = cn('kv-query-explain');
 
 const EDITOR_OPTIONS = {
@@ -263,7 +268,7 @@ function QueryExplain(props) {
                 {!props.loading && (
                     <React.Fragment>
                         <div className={b('controls-right')}>
-                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            <QueryExecutionStatus error={props.error} />
                             {!props.error && (
                                 <React.Fragment>
                                     <Divider />

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.js

@@ -1,20 +1,26 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
+import {RadioButton} from '@gravity-ui/uikit';
+
 import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
 import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
+
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
-import './QueryResult.scss';
+import {prepareQueryError} from '../../../../utils/query';
+
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+
 import ResultIssues from '../Issues/Issues';
 
+import './QueryResult.scss';
+
 const b = cn('kv-query-result');
 
 const resultOptionsIds = {
@@ -94,31 +100,39 @@ function QueryResult(props) {
     };
 
     const renderIssues = () => {
-        const error = props.error?.data;
-
-        const hasIssues = error?.issues && Array.isArray(error.issues);
-
-        return hasIssues ? (
-            <React.Fragment>
-                <ResultIssues data={error} />
-                {isFullscreen && (
-                    <Fullscreen>
-                        <div className={b('result', {fullscreen: true})}>
-                            <ResultIssues data={error} />
-                        </div>
-                    </Fullscreen>
-                )}
-            </React.Fragment>
-        ) : (
-            <span>{error?.data ?? error}</span>
-        );
+        const error = props.error;
+
+        const hasIssues = error?.data?.issues && Array.isArray(error.data.issues);
+
+        if (hasIssues) {
+            return (
+                <React.Fragment>
+                    <ResultIssues data={error.data} />
+                    {isFullscreen && (
+                        <Fullscreen>
+                            <div className={b('result', {fullscreen: true})}>
+                                <ResultIssues data={error.data} />
+                            </div>
+                        </Fullscreen>
+                    )}
+                </React.Fragment>
+            )
+        }
+
+        if (error) {
+            return (
+                <div className={b('error')}>
+                    {prepareQueryError(error)}
+                </div>
+            );
+        }
     };
 
     return (
         <React.Fragment>
             <div className={b('controls')}>
                 <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+                    <QueryExecutionStatus error={props.error} />
 
                     {props.stats && !props.error && (
                         <React.Fragment>

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -20,6 +20,10 @@
         }
     }
 
+    &__error {
+        padding: 15px 10px;
+    }
+
     &__controls {
         position: sticky;
         z-index: 2;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import find from 'lodash/find';
 
 import Icon from '../../../../components/Icon/Icon';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import './SchemaViewer.scss';
 

package/dist/containers/Tenants/Tenants.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 import {escapeRegExp} from 'lodash/fp';
 
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
@@ -218,8 +218,9 @@ class Tenants extends React.Component {
                 },
                 accessor: ({Metrics = {}, CoresUsed}) => {
                     if (!isNaN(Number(CoresUsed))) {
-                        const cores = Math.round(Number(CoresUsed) * 100) / 100;
-                        return cores || '—';
+                        return Number(CoresUsed) * 100 > 1
+                            ? formatCPU(Number(CoresUsed) * 1_000_000)
+                            : '—';
                     } else {
                         return Number(Metrics.CPU) ? formatCPU(Number(Metrics.CPU)) : '—';
                     }

package/dist/routes.ts

@@ -16,6 +16,7 @@ const routes = {
     tablet: '/tablet/:id',
     tabletsFilters: '/tabletsFilters',
     clusterPage: '/clusters/:name',
+    auth: '/auth',
 };
 
 export const CLUSTER_PAGES = {

package/dist/services/api.js

@@ -185,7 +185,10 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 timeout: 600000,
             },
             null,
-            {concurrentId},
+            {
+                concurrentId,
+                timeout: 9 * 60 * 1000,
+            },
         );
     }
     getExplainQuery(query, database) {

package/dist/store/reducers/shardsWorkload.ts

@@ -77,7 +77,8 @@ function createShardQuery(
     DataSize,
     NodeId,
     PeakTime,
-    InFlightTxCount
+    InFlightTxCount,
+    IntervalEnd
 FROM \`.sys/top_partitions_one_hour\`
 WHERE ${where}
 ${orderBy}

package/dist/store/reducers/storage.js

@@ -420,7 +420,7 @@ export const getUsageFilterOptions = createSelector(getVisibleEntitiesList, (ent
     entities.forEach((entity) => {
         const usage = getUsage(entity, 5);
 
-        if (!Object.hasOwn(items, usage)) {
+        if (!Object.prototype.hasOwnProperty.call(items, usage)) {
             items[usage] = 0;
         }
 

package/dist/utils/constants.ts

@@ -1,4 +1,4 @@
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 
 const SECOND = 1000;
 

package/dist/utils/index.js

@@ -1,6 +1,8 @@
 import numeral from 'numeral';
 import locales from 'numeral/locales'; // eslint-disable-line no-unused-vars
 
+import {dateTimeParse} from '@gravity-ui/date-utils';
+
 import {i18n} from './i18n';
 import {MEGABYTE, TERABYTE, GIGABYTE, DAY_IN_SECONDS} from './constants';
 import {isNumeric} from './utils';
@@ -76,7 +78,7 @@ export const formatDateTime = (value) => {
         return '';
     }
 
-    return value > 0 ? new Date(Number(value)).toUTCString() : 'N/A';
+    return value > 0 ? dateTimeParse(Number(value)).format('YYYY-MM-DD HH:mm') : 'N/A';
 };
 
 export const calcUptimeInSeconds = (milliseconds) => {

package/dist/utils/prepareQueryExplain.ts

@@ -5,7 +5,7 @@ import {
     TopologyNodeDataStatsSection,
     ExplainPlanNodeData,
     TopologyNodeDataStatsItem,
-} from '@yandex-cloud/paranoid';
+} from '@gravity-ui/paranoid';
 
 interface PlanOperator {
     Name: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.3.1",
+  "version": "3.3.3",
   "files": [
     "dist"
   ],
@@ -10,10 +10,11 @@
   },
   "dependencies": {
     "@gravity-ui/axios-wrapper": "^1.3.0",
+    "@gravity-ui/date-utils": "^1.1.1",
     "@gravity-ui/i18n": "^1.0.0",
     "@gravity-ui/navigation": "^0.3.1",
-    "@yandex-cloud/paranoid": "^1.3.0",
-    "@yandex-cloud/react-data-table": "^1.0.2",
+    "@gravity-ui/paranoid": "^1.4.0",
+    "@gravity-ui/react-data-table": "^1.0.3",
     "axios": "0.19.2",
     "bem-cn-lite": "4.0.0",
     "history": "4.10.1",
@@ -107,6 +108,7 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.8.3",
     "@types/lodash": "^4.14.178",
+    "@types/numeral": "^2.0.2",
     "@types/qs": "^6.9.7",
     "@types/react": "^17.0.44",
     "@types/react-dom": "^17.0.11",

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

@@ -1,13 +0,0 @@
-.kv-tenant-overview {
-    &__title {
-        margin: 0;
-        margin-bottom: 15px;
-
-        font-weight: 600;
-    }
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-    }
-}

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -1,201 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import cn from 'bem-cn-lite';
-
-import {formatCPU, formatBytes, formatNumber, formatBps, formatDateTime} from '../../../../utils';
-
-import {InfoViewer, createInfoFormatter} from '../../../../components/InfoViewer';
-
-import {getEntityName} from '../../utils';
-
-import './SchemaInfoViewer.scss';
-
-const b = cn('schema-info-viewer');
-
-const formatTabletMetricsItem = createInfoFormatter({
-    values: {
-        CPU: formatCPU,
-        Memory: formatBytes,
-        Storage: formatBytes,
-        Network: formatBps,
-        ReadThroughput: formatBps,
-        WriteThroughput: formatBps,
-    },
-    defaultValueFormatter: formatNumber,
-});
-
-const formatFollowerGroupItem = createInfoFormatter({
-    values: {
-        FollowerCount: formatNumber,
-    },
-});
-
-const formatPartitionConfigItem = createInfoFormatter({
-    values: {
-        FollowerCount: formatNumber,
-        CrossDataCenterFollowerCount: formatNumber,
-    },
-});
-
-const formatTableStatsItem = createInfoFormatter({
-    values: {
-        DataSize: formatBytes,
-        IndexSize: formatBytes,
-        LastAccessTime: formatDateTime,
-        LastUpdateTime: formatDateTime,
-    },
-    defaultValueFormatter: formatNumber,
-});
-
-const formatTableStats = (fields) =>
-    Object.entries(fields)
-        .map(([label, value]) => formatTableStatsItem(label, value))
-        .filter(({value}) => Boolean(value));
-
-class SchemaInfoViewer extends React.Component {
-    static propTypes = {
-        data: PropTypes.object.isRequired,
-    };
-
-    renderItem(itemData, title) {
-        if (!Array.isArray(itemData) || !itemData.length) {
-            return null;
-        }
-
-        return (
-            <div className={b('item')}>
-                <InfoViewer title={title} info={itemData} />
-            </div>
-        );
-    }
-
-    renderContent(data) {
-        const {PathDescription = {}} = data;
-        const entityName = getEntityName(PathDescription);
-
-        const {
-            TableStats = {},
-            TabletMetrics = {},
-            Table: {PartitionConfig = {}} = {},
-        } = PathDescription;
-        const {
-            PartCount,
-            RowCount,
-            DataSize,
-            IndexSize,
-
-            LastAccessTime,
-            LastUpdateTime,
-
-            ImmediateTxCompleted,
-            PlannedTxCompleted,
-            TxRejectedByOverload,
-            TxRejectedBySpace,
-            TxCompleteLagMsec,
-            InFlightTxCount,
-
-            RowUpdates,
-            RowDeletes,
-            RowReads,
-            RangeReads,
-            RangeReadRows,
-
-            ...restTableStats
-        } = TableStats;
-        const {FollowerGroups, FollowerCount, CrossDataCenterFollowerCount} = PartitionConfig;
-
-        const generalTableInfo = formatTableStats({
-            PartCount,
-            RowCount,
-            DataSize,
-            IndexSize,
-            ...restTableStats,
-        });
-
-        const tableStatsInfo = [
-            formatTableStats({
-                LastAccessTime,
-                LastUpdateTime,
-            }),
-            formatTableStats({
-                ImmediateTxCompleted,
-                PlannedTxCompleted,
-                TxRejectedByOverload,
-                TxRejectedBySpace,
-                TxCompleteLagMsec,
-                InFlightTxCount,
-            }),
-            formatTableStats({
-                RowUpdates,
-                RowDeletes,
-                RowReads,
-                RangeReads,
-                RangeReadRows,
-            }),
-        ];
-
-        const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
-            formatTabletMetricsItem(key, TabletMetrics[key]),
-        );
-
-        const partitionConfigInfo = [];
-
-        if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
-            partitionConfigInfo.push(
-                ...Object.keys(FollowerGroups[0]).map((key) =>
-                    formatFollowerGroupItem(key, FollowerGroups[0][key]),
-                ),
-            );
-        } else if (FollowerCount !== undefined) {
-            partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
-        } else if (CrossDataCenterFollowerCount !== undefined) {
-            partitionConfigInfo.push(
-                formatPartitionConfigItem(
-                    'CrossDataCenterFollowerCount',
-                    CrossDataCenterFollowerCount,
-                ),
-            );
-        }
-
-        if (
-            [generalTableInfo, tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat()
-                .length === 0
-        ) {
-            return <div className={b('title')}>{entityName}</div>;
-        }
-
-        return (
-            <div>
-                <div>{this.renderItem(generalTableInfo, entityName)}</div>
-                <div className={b('row')}>
-                    {tabletMetricsInfo.length > 0 || partitionConfigInfo.length > 0 ? (
-                        <div className={b('col')}>
-                            {this.renderItem(tabletMetricsInfo, 'Tablet Metrics')}
-                            {this.renderItem(partitionConfigInfo, 'Partition Config')}
-                        </div>
-                    ) : null}
-                    <div className={b('col')}>
-                        {tableStatsInfo.map((info, index) => (
-                            <React.Fragment key={index}>
-                                {this.renderItem(info, index === 0 ? 'Table Stats' : undefined)}
-                            </React.Fragment>
-                        ))}
-                    </div>
-                </div>
-            </div>
-        );
-    }
-
-    render() {
-        const {data} = this.props;
-        const entityName = getEntityName(data?.PathDescription);
-
-        if (data) {
-            return <div className={b()}>{this.renderContent(data)}</div>;
-        } else {
-            return <div className="error">No {entityName} data</div>;
-        }
-    }
-}
-
-export default SchemaInfoViewer;