ydb-embedded-ui 4.6.0 → 4.7.0

package/dist/containers/Node/NodePages.ts

@@ -1,4 +1,4 @@
-import routes, {createHref} from '../../routes';
+import routes, {Query, createHref} from '../../routes';
 
 export const STORAGE = 'storage';
 export const TABLETS = 'tablets';
@@ -21,9 +21,13 @@ export const NODE_PAGES = [
     },
 ];
 
-export function getDefaultNodePath(nodeId: string | number) {
-    return createHref(routes.node, {
-        id: nodeId,
-        activeTab: OVERVIEW,
-    });
+export function getDefaultNodePath(nodeId: string | number, query: Query = {}) {
+    return createHref(
+        routes.node,
+        {
+            id: nodeId,
+            activeTab: OVERVIEW,
+        },
+        query,
+    );
 }

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -74,8 +74,8 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     switch (visibleEntities) {
         case VisibleEntities.All: {
             return {
-                columnId: TableColumnsIds.Missing,
-                order: DataTable.DESCENDING,
+                columnId: TableColumnsIds.PoolName,
+                order: DataTable.ASCENDING,
             };
         }
         case VisibleEntities.Missing: {
@@ -87,7 +87,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
         case VisibleEntities.Space: {
             return {
                 columnId: TableColumnsIds.UsedSpaceFlag,
-                order: DataTable.ASCENDING,
+                order: DataTable.DESCENDING,
             };
         }
         default: {
@@ -295,6 +295,14 @@ function StorageGroups({
 
     let columns = allColumns;
 
+    if (visibleEntities === VisibleEntities.All) {
+        columns = allColumns.filter((col) => {
+            return (
+                col.name !== TableColumnsIds.Missing && col.name !== TableColumnsIds.UsedSpaceFlag
+            );
+        });
+    }
+
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
 

package/dist/containers/Tablet/Tablet.tsx

@@ -1,16 +1,17 @@
 import {useCallback, useEffect, useRef} from 'react';
-import {useParams} from 'react-router';
+import {useLocation, useParams} from 'react-router';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 import {Link as ExternalLink} from '@gravity-ui/uikit';
 
 import {backend} from '../../store';
-import {getTablet, getTabletDescribe} from '../../store/reducers/tablet';
-import {setHeader} from '../../store/reducers/header';
-import routes, {createHref} from '../../routes';
+import {getTablet, getTabletDescribe, clearTabletData} from '../../store/reducers/tablet';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 
 import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {DEVELOPER_UI} from '../../utils/constants';
 import '../../services/api';
+import {parseQuery} from '../../routes';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {ResponseError} from '../../components/Errors/ResponseError';
@@ -19,8 +20,6 @@ import {Icon} from '../../components/Icon';
 import {EmptyState} from '../../components/EmptyState';
 import {Loader} from '../../components/Loader';
 
-import {getClusterPath} from '../Cluster/utils';
-
 import {TabletTable} from './TabletTable';
 import {TabletInfo} from './TabletInfo';
 import {TabletControls} from './TabletControls';
@@ -35,6 +34,7 @@ export const Tablet = () => {
     const isFirstDataFetchRef = useRef(true);
 
     const dispatch = useDispatch();
+    const location = useLocation();
 
     const params = useParams<{id: string}>();
     const {id} = params;
@@ -48,6 +48,25 @@ export const Tablet = () => {
         error,
     } = useTypedSelector((state) => state.tablet);
 
+    const {
+        nodeId: queryNodeId,
+        type: queryType,
+        state: queryState,
+        tenantName: queryTenantName,
+    } = parseQuery(location);
+
+    const nodeId = tablet.NodeId?.toString() || queryNodeId?.toString();
+    const tabletState = tablet.State || queryState?.toString();
+    const tabletType = tablet.Type || queryType?.toString();
+    const tenantName = tenantPath || queryTenantName?.toString();
+
+    // NOTE: should be reviewed when migrating to React 18
+    useEffect(() => {
+        return () => {
+            dispatch(clearTabletData());
+        };
+    }, [dispatch]);
+
     useEffect(() => {
         if (isFirstDataFetchRef.current && tablet && tablet.TenantId) {
             dispatch(getTabletDescribe(tablet.TenantId));
@@ -63,26 +82,15 @@ export const Tablet = () => {
 
     useEffect(() => {
         dispatch(
-            setHeader([
-                {
-                    text: 'Cluster',
-                    link: getClusterPath(),
-                },
-                {
-                    text: 'Tablets',
-                    link: createHref(routes.tabletsFilters, undefined, {
-                        nodeIds: tablet.NodeId ? [tablet.NodeId] : [],
-                        state: tablet.State,
-                        type: tablet.Type,
-                        tenantPath,
-                    }),
-                },
-                {
-                    text: tablet.TabletId ?? 'Tablet',
-                },
-            ]),
+            setHeaderBreadcrumbs('tablet', {
+                nodeIds: nodeId ? [nodeId] : [],
+                state: tabletState,
+                type: tabletType,
+                tenantName,
+                tabletId: id,
+            }),
         );
-    }, [dispatch, tenantPath, tablet]);
+    }, [dispatch, tenantName, id, nodeId, tabletState, tabletType]);
 
     const renderExternalLinks = (link: {name: string; path: string}, index: number) => {
         return (
@@ -114,7 +122,7 @@ export const Tablet = () => {
 
     const externalLinks = [
         {
-            name: 'Internal viewer - tablet',
+            name: `${DEVELOPER_UI} - tablet`,
             path: `/tablets?TabletID=${TabletId}`,
         },
     ];
@@ -138,7 +146,7 @@ export const Tablet = () => {
                         {Leader && <Tag text="Leader" type="blue" />}
                         <span className={b('loader')}>{loading && <Loader size="s" />}</span>
                     </div>
-                    <TabletInfo tablet={tablet} tenantPath={tenantPath} />
+                    <TabletInfo tablet={tablet} tenantPath={tenantName} />
                     <TabletControls tablet={tablet} fetchData={fetchData} />
                 </div>
                 <div className={b('rigth-pane')}>

package/dist/containers/Tablet/TabletInfo/TabletInfo.tsx

@@ -12,7 +12,7 @@ import {b} from '../Tablet';
 
 interface TabletInfoProps {
     tablet: TTabletStateInfo;
-    tenantPath: string;
+    tenantPath?: string;
 }
 
 export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
@@ -30,7 +30,7 @@ export const TabletInfo = ({tablet, tenantPath}: TabletInfoProps) => {
     const hasHiveId = HiveId && HiveId !== '0';
     const hasUptime = State === ETabletState.Active;
 
-    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath}];
+    const tabletInfo: InfoViewerItem[] = [{label: 'Database', value: tenantPath || '-'}];
 
     if (hasHiveId) {
         tabletInfo.push({

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -11,7 +11,7 @@ import ReactList from 'react-list';
 import {Tablet} from '../../components/Tablet';
 import {AccessDenied} from '../../components/Errors/403';
 
-import {setHeader} from '../../store/reducers/header';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {tabletColorToTabletState, tabletStates} from '../../utils/tablet';
 import {
     getTabletsInfo,
@@ -22,8 +22,6 @@ import {
     getTablets,
 } from '../../store/reducers/tabletsFilters';
 
-import {getClusterPath} from '../Cluster/utils';
-
 import './TabletsFilters.scss';
 
 const b = cn('tablets-filters');
@@ -76,7 +74,7 @@ class TabletsFilters extends React.Component {
     reloadDescriptor = -1;
 
     componentDidMount() {
-        const {setStateFilter, setTypeFilter, setHeader} = this.props;
+        const {setStateFilter, setTypeFilter, setHeaderBreadcrumbs} = this.props;
 
         const queryParams = qs.parse(this.props.location.search, {
             ignoreQueryPrefix: true,
@@ -92,15 +90,9 @@ class TabletsFilters extends React.Component {
             this.makeRequest();
         });
 
-        setHeader([
-            {
-                text: 'Cluster',
-                link: getClusterPath(),
-            },
-            {
-                text: 'Tablets'
-            }
-        ]);
+        setHeaderBreadcrumbs('tablets', {
+            tenantName: path,
+        });
     }
 
     componentDidUpdate(prevProps) {
@@ -155,7 +147,13 @@ class TabletsFilters extends React.Component {
         const {filteredTablets, size} = this.props;
 
         return (
-            <Tablet tablet={filteredTablets[index]} key={key} size={size} className={b('tablet')} />
+            <Tablet
+                tablet={filteredTablets[index]}
+                tenantName={this.state.tenantPath}
+                key={key}
+                size={size}
+                className={b('tablet')}
+            />
         );
     };
 
@@ -340,7 +338,7 @@ const mapDispatchToProps = {
     clearWasLoadingFlag,
     setStateFilter,
     setTypeFilter,
-    setHeader,
+    setHeaderBreadcrumbs,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);

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

@@ -42,7 +42,7 @@ export const columns: Column<IPreparedConsumerData>[] = [
                 <InternalLink
                     to={createHref(routes.tenant, undefined, {
                         ...queryParams,
-                        [TenantTabsGroups.generalTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
+                        [TenantTabsGroups.diagnosticsTab]: TENANT_DIAGNOSTICS_TABS_IDS.partitions,
                         selectedConsumer: row.name,
                     })}
                 >

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

@@ -3,15 +3,19 @@ $section-title-line-height: 24px;
 
 .kv-detailed-overview {
     display: flex;
-    gap: 20px;
 
+    width: 100%;
     height: 100%;
+    gap: 20px;
 
     &__section {
         display: flex;
         overflow-x: hidden;
         flex: 0 0 calc(50% - 10px);
         flex-direction: column;
+
+        min-width: 300px;
+        height: max-content;
     }
 
     &__modal {

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

@@ -176,7 +176,7 @@ function Diagnostics(props: DiagnosticsProps) {
                         wrapTo={({id}, node) => {
                             const path = createHref(routes.tenant, undefined, {
                                 ...queryParams,
-                                [TenantTabsGroups.generalTab]: id,
+                                [TenantTabsGroups.diagnosticsTab]: id,
                             });
 
                             return (

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

@@ -3,9 +3,11 @@
 @import '@gravity-ui/uikit/styles/mixins.scss';
 
 .healthcheck {
-    // Since most of the inner containers have fixed width, we can set fixed width here as well
-    // Thus we will get rid of unneeded layout shift when scrollbar appear
-    min-width: 885px;
+    &_expanded {
+        // Since most of the inner containers have fixed width, we can set fixed width here as well
+        // Thus we will get rid of unneeded layout shift when scrollbar appear
+        min-width: 885px;
+    }
 
     &__details {
         padding: 25px 20px 20px;

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

@@ -99,5 +99,5 @@ export const Healthcheck = (props: HealthcheckProps) => {
         return <div className="error">{i18n('no-data')}</div>;
     };
 
-    return <div className={b()}>{renderContent()}</div>;
+    return <div className={b({expanded: !preview})}>{renderContent()}</div>;
 };

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

@@ -105,6 +105,7 @@ class TenantOverview extends React.Component {
             PoolStats,
             StateStats = [],
             MemoryUsed,
+            Name,
             CoresUsed,
             StorageGroups,
             StorageAllocatedSize,
@@ -159,7 +160,7 @@ class TenantOverview extends React.Component {
                 <div className={b('system-tablets')}>
                     {SystemTablets &&
                         SystemTablets.map((tablet, tabletIndex) => (
-                            <Tablet key={tabletIndex} tablet={tablet} />
+                            <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
                         ))}
                 </div>
                 <div className={b('common-info')}>

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

@@ -4,7 +4,7 @@ import {useHistory, useLocation} from 'react-router';
 import qs from 'qs';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
@@ -24,27 +24,24 @@ import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries
 import type {IQueryResult} from '../../../../types/store/query';
 import type {TenantGeneralTab} from '../../../../store/reducers/tenant/types';
 
-import {TENANT_GENERAL_TABS_IDS} from '../../../../store/reducers/tenant/constants';
+import {
+    TENANT_GENERAL_TABS_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
-import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
+import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {prepareQueryError} from '../../../../utils/query';
-import routes, {createHref} from '../../../../routes';
 
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
 import {isColumnEntityType} from '../../utils/schema';
-import {TenantTabsGroups} from '../../TenantPages';
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
 
 import i18n from './i18n';
 import './TopQueries.scss';
 
 const b = cn('kv-top-queries');
 
-const TABLE_SETTINGS: Settings = {
-    ...DEFAULT_TABLE_SETTINGS,
-    dynamicRenderType: 'variable',
-};
-
-const MAX_QUERY_HEIGHT = 10;
 const COLUMNS: Column<KeyValueRow>[] = [
     {
         name: 'CPUTimeUs',
@@ -178,9 +175,10 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 ignoreQueryPrefix: true,
             });
 
-            const queryPath = createHref(routes.tenant, undefined, {
+            const queryPath = getTenantPath({
                 ...queryParams,
                 [TenantTabsGroups.general]: TENANT_GENERAL_TABS_IDS.query,
+                [TenantTabsGroups.queryTab]: TENANT_QUERY_TABS_ID.newQuery,
             });
 
             history.push(queryPath);
@@ -222,7 +220,7 @@ export const TopQueries = ({path, type}: TopQueriesProps) => {
                 <DataTable
                     columns={COLUMNS}
                     data={data}
-                    settings={TABLE_SETTINGS}
+                    settings={QUERY_TABLE_SETTINGS}
                     onRowClick={handleRowClick}
                     theme="yandex-cloud"
                 />

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -7,7 +7,7 @@ import {useThemeValue} from '@gravity-ui/uikit';
 import type {EPathType} from '../../../types/api/schema';
 import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
-import QueryEditor from '../QueryEditor/QueryEditor';
+import {Query} from '../Query/Query';
 import Diagnostics from '../Diagnostics/Diagnostics';
 
 import './ObjectGeneral.scss';
@@ -35,7 +35,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         const {type, additionalTenantInfo, additionalNodesInfo} = props;
         switch (generalTab) {
             case TENANT_GENERAL_TABS_IDS.query: {
-                return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
+                return <Query path={tenantName as string} theme={theme} type={type} />;
             }
             default: {
                 return (

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -47,8 +47,11 @@ import {
     PaneVisibilityToggleButtons,
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
-import {setTopLevelTab} from '../../../store/reducers/tenant/tenant';
-import {TENANT_GENERAL_TABS_IDS} from '../../../store/reducers/tenant/constants';
+import {setQueryTab, setTopLevelTab} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_GENERAL_TABS_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -276,6 +279,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const onOpenPreview = () => {
         dispatch(setShowPreview(true));
         dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
     };
 
     const renderCommonInfoControls = () => {

package/dist/containers/Tenant/{QueryEditor/QueryResult/QueryResult.js → Query/ExecuteResult/ExecuteResult.js}

@@ -20,9 +20,9 @@ import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpe
 import ResultIssues from '../Issues/Issues';
 import {QueryDuration} from '../QueryDuration/QueryDuration';
 
-import './QueryResult.scss';
+import './ExecuteResult.scss';
 
-const b = cn('kv-query-result');
+const b = cn('ydb-query-execute-result');
 
 const resultOptionsIds = {
     result: 'result',
@@ -34,7 +34,7 @@ const resultOptions = [
     {value: resultOptionsIds.stats, content: 'Stats'},
 ];
 
-function QueryResult(props) {
+export function ExecuteResult(props) {
     const [activeSection, setActiveSection] = useState(resultOptionsIds.result);
     const isFullscreen = useSelector((state) => state.fullscreen);
     const dispatch = useDispatch();
@@ -162,5 +162,3 @@ function QueryResult(props) {
         </React.Fragment>
     );
 }
-
-export default QueryResult;

package/dist/containers/Tenant/{QueryEditor/QueryResult/QueryResult.scss → Query/ExecuteResult/ExecuteResult.scss}

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-result {
+.ydb-query-execute-result {
     &__result {
         display: flex;
         overflow: auto;

package/dist/containers/Tenant/{QueryEditor/QueryExplain/QueryExplain.js → Query/ExplainResult/ExplainResult.js}

@@ -21,9 +21,9 @@ import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
 
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 
-import './QueryExplain.scss';
+import './ExplainResult.scss';
 
-const b = cn('kv-query-explain');
+const b = cn('ydb-query-explain-result');
 
 const EDITOR_OPTIONS = {
     automaticLayout: true,
@@ -90,7 +90,7 @@ function GraphRoot(props) {
     return <div id="graphRoot" style={{height: '100vh'}} />;
 }
 
-function QueryExplain(props) {
+export function ExplainResult(props) {
     const dispatch = useDispatch();
     const [activeOption, setActiveOption] = useState(ExplainOptionIds.schema);
 
@@ -287,5 +287,3 @@ function QueryExplain(props) {
         </React.Fragment>
     );
 }
-
-export default QueryExplain;

package/dist/containers/Tenant/{QueryEditor/QueryExplain/QueryExplain.scss → Query/ExplainResult/ExplainResult.scss}

@@ -1,6 +1,6 @@
 @import '../../../../styles/mixins.scss';
 
-.kv-query-explain {
+.ydb-query-explain-result {
     &__result {
         display: flex;
         overflow: auto;

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.scss

@@ -0,0 +1,20 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-queries-history {
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 16px;
+
+    @include flex-container();
+    @include table-styles;
+
+    &__query {
+        overflow: hidden;
+        flex-grow: 1;
+
+        cursor: pointer;
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+}

package/dist/containers/Tenant/Query/QueriesHistory/QueriesHistory.tsx

@@ -0,0 +1,60 @@
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {useTypedSelector} from '../../../../utils/hooks';
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+
+import i18n from '../i18n';
+
+import './QueriesHistory.scss';
+
+const b = block('ydb-queries-history');
+
+interface QueriesHistoryProps {
+    changeUserInput: (value: {input: string}) => void;
+}
+
+function QueriesHistory({changeUserInput}: QueriesHistoryProps) {
+    const dispatch = useDispatch();
+
+    const queriesHistory = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
+    const reversedHistory = [...queriesHistory].reverse();
+
+    const onQueryClick = (queryText: string) => {
+        changeUserInput({input: queryText});
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+
+    const columns: Column<string>[] = [
+        {
+            name: 'queryText',
+            header: 'Query Text',
+            render: ({row: query}) => (
+                <div className={b('query')}>
+                    <TruncatedQuery value={query} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                </div>
+            ),
+            sortable: false,
+        },
+    ];
+
+    return (
+        <div className={b()}>
+            <DataTable
+                theme="yandex-cloud"
+                columns={columns}
+                data={reversedHistory}
+                settings={QUERY_TABLE_SETTINGS}
+                emptyDataMessage={i18n('history.empty')}
+                onRowClick={(row) => onQueryClick(row)}
+            />
+        </div>
+    );
+}
+
+export default QueriesHistory;

package/dist/containers/Tenant/Query/Query.scss

@@ -0,0 +1,16 @@
+@import '../../../styles/mixins.scss';
+
+.ydb-query {
+    max-height: 100%;
+    @include flex-container();
+
+    &__tabs {
+        padding: 13px 20px 16px;
+    }
+
+    &__content {
+        overflow: hidden;
+
+        height: 100%;
+    }
+}