ydb-embedded-ui 4.6.0 → 4.8.0

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

@@ -5,11 +5,8 @@
     align-items: flex-end;
 
     min-height: 40px;
-    padding: 5px 20px;
+    padding: 5px 0px;
 
-    border-top: 1px solid var(--yc-color-line-generic);
-    border-bottom: 1px solid var(--yc-color-line-generic);
-    background-color: var(--yc-color-base-background);
     gap: 24px;
 
     &__left {

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

@@ -0,0 +1,59 @@
+import {useLocation} from 'react-router';
+
+import {Tabs} from '@gravity-ui/uikit';
+
+import type {TenantQueryTab} from '../../../../store/reducers/tenant/types';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {InternalLink} from '../../../../components/InternalLink/InternalLink';
+import {parseQuery} from '../../../../routes';
+
+import {TenantTabsGroups, getTenantPath} from '../../TenantPages';
+
+import i18n from '../i18n';
+
+const newQuery = {
+    id: TENANT_QUERY_TABS_ID.newQuery,
+    title: i18n('tabs.newQuery'),
+};
+const history = {
+    id: TENANT_QUERY_TABS_ID.history,
+    title: i18n('tabs.history'),
+};
+const saved = {
+    id: TENANT_QUERY_TABS_ID.saved,
+    title: i18n('tabs.saved'),
+};
+
+const queryEditorTabs = [newQuery, history, saved];
+
+interface QueryEditorTabsProps {
+    className?: string;
+    activeTab?: TenantQueryTab;
+}
+
+export const QueryTabs = ({className, activeTab}: QueryEditorTabsProps) => {
+    const location = useLocation();
+    const queryParams = parseQuery(location);
+
+    return (
+        <div className={className}>
+            <Tabs
+                size="l"
+                allowNotSelected={true}
+                activeTab={activeTab}
+                items={queryEditorTabs}
+                wrapTo={({id}, node) => {
+                    const path = getTenantPath({
+                        ...queryParams,
+                        [TenantTabsGroups.queryTab]: id,
+                    });
+                    return (
+                        <InternalLink to={path} key={id}>
+                            {node}
+                        </InternalLink>
+                    );
+                }}
+            />
+        </div>
+    );
+};

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

@@ -105,21 +105,21 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
     const renderSaveButton = (onClick) => {
         return (
             <Button onClick={onClick} disabled={saveButtonDisabled}>
-                Save query
+                {queryNameToEdit ? 'Edit query' : 'Save query'}
             </Button>
         );
     };
 
     const renderSaveDropdownMenu = () => {
         const items = [
-            {
-                action: onSaveQueryClick,
-                text: 'Save as new',
-            },
             {
                 action: onEditQueryClick,
                 text: 'Edit existing',
             },
+            {
+                action: onSaveQueryClick,
+                text: 'Save as new',
+            },
         ];
         return (
             <DropdownMenu items={items} switcher={renderSaveButton()} popupPlacement={['top']} />

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

@@ -0,0 +1,55 @@
+@import '../../../../styles/mixins.scss';
+
+.ydb-saved-queries {
+    $block: &;
+
+    overflow: auto;
+
+    height: 100%;
+    padding: 0 16px;
+
+    @include flex-container();
+    @include table-styles;
+
+    &__row {
+        cursor: pointer;
+
+        :hover {
+            #{$block}__controls {
+                display: flex;
+            }
+        }
+    }
+
+    &__query-name {
+        overflow: hidden;
+
+        white-space: pre-wrap;
+        text-overflow: ellipsis;
+    }
+
+    &__query {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__query-body {
+        overflow: hidden;
+        flex-grow: 1;
+
+        max-width: 100%;
+
+        white-space: pre;
+        text-overflow: ellipsis;
+    }
+
+    &__controls {
+        display: none;
+    }
+
+    &__dialog-query-name {
+        font-weight: 500;
+    }
+}

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

@@ -0,0 +1,150 @@
+import {MouseEvent, useState} from 'react';
+import {useDispatch} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import {Dialog, Button} from '@gravity-ui/uikit';
+import DataTable, {Column} from '@gravity-ui/react-data-table';
+
+import type {SavedQuery} from '../../../../types/store/query';
+import {setQueryNameToEdit} from '../../../../store/reducers/saveQuery';
+import {setQueryTab} from '../../../../store/reducers/tenant/tenant';
+import {TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+
+import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {IconWrapper} from '../../../../components/Icon';
+
+import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';
+
+import i18n from '../i18n';
+
+import './SavedQueries.scss';
+
+const b = block('ydb-saved-queries');
+
+interface DeleteDialogProps {
+    visible: boolean;
+    queryName: string;
+    onCancelClick: VoidFunction;
+    onConfirmClick: VoidFunction;
+}
+
+const DeleteDialog = ({visible, queryName, onCancelClick, onConfirmClick}: DeleteDialogProps) => {
+    return (
+        <Dialog
+            open={visible}
+            hasCloseButton={false}
+            size="s"
+            onClose={onCancelClick}
+            onEnterKeyDown={onConfirmClick}
+        >
+            <Dialog.Header caption={i18n('delete-dialog.header')} />
+            <Dialog.Body className={b('dialog-body')}>
+                {i18n('delete-dialog.question')}
+                <span className={b('dialog-query-name')}>{` ${queryName}?`}</span>
+            </Dialog.Body>
+            <Dialog.Footer
+                textButtonApply={i18n('delete-dialog.delete')}
+                textButtonCancel={i18n('delete-dialog.cancel')}
+                onClickButtonCancel={onCancelClick}
+                onClickButtonApply={onConfirmClick}
+            />
+        </Dialog>
+    );
+};
+
+interface SavedQueriesProps {
+    savedQueries: SavedQuery[];
+    changeUserInput: (value: {input: string}) => void;
+    onDeleteQuery: (queryName: string) => void;
+}
+
+export const SavedQueries = ({savedQueries, changeUserInput, onDeleteQuery}: SavedQueriesProps) => {
+    const dispatch = useDispatch();
+
+    const [isDeleteDialogVisible, setIsDeleteDialogVisible] = useState(false);
+    const [queryNameToDelete, setQueryNameToDelete] = useState<string>('');
+
+    const closeDeleteDialog = () => {
+        setIsDeleteDialogVisible(false);
+        setQueryNameToDelete('');
+    };
+
+    const onCancelDeleteClick = () => {
+        closeDeleteDialog();
+    };
+
+    const onConfirmDeleteClick = () => {
+        closeDeleteDialog();
+        onDeleteQuery(queryNameToDelete);
+        setQueryNameToDelete('');
+    };
+
+    const onQueryClick = (queryText: string, queryName: string) => {
+        changeUserInput({input: queryText});
+        dispatch(setQueryNameToEdit(queryName));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
+    };
+
+    const onDeleteQueryClick = (queryName: string) => {
+        return (event: MouseEvent) => {
+            event.stopPropagation();
+            setIsDeleteDialogVisible(true);
+            setQueryNameToDelete(queryName);
+        };
+    };
+
+    const columns: Column<SavedQuery>[] = [
+        {
+            name: 'name',
+            header: 'Name',
+            render: ({row: query}) => <div className={b('query-name')}>{query.name}</div>,
+            width: 200,
+        },
+        {
+            name: 'body',
+            header: 'Query Text',
+            render: ({row: query}) => (
+                <div className={b('query')}>
+                    <div className={b('query-body')}>
+                        <TruncatedQuery value={query.body} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                    </div>
+                    <span className={b('controls')}>
+                        <Button view="flat-secondary">
+                            <IconWrapper name="pencil" viewBox="0 0 24 24" />
+                        </Button>
+                        <Button view="flat-secondary" onClick={onDeleteQueryClick(query.name)}>
+                            <IconWrapper name="trash" viewBox="0 0 24 24" />
+                        </Button>
+                    </span>
+                </div>
+            ),
+            sortable: false,
+        },
+    ];
+
+    return (
+        <>
+            <div className={b()}>
+                <DataTable
+                    theme="yandex-cloud"
+                    columns={columns}
+                    data={savedQueries}
+                    settings={QUERY_TABLE_SETTINGS}
+                    emptyDataMessage={i18n('saved.empty')}
+                    rowClassName={() => b('row')}
+                    onRowClick={(row) => onQueryClick(row.body, row.name)}
+                    initialSortOrder={{
+                        columnId: 'name',
+                        order: DataTable.ASCENDING,
+                    }}
+                />
+            </div>
+            <DeleteDialog
+                visible={isDeleteDialogVisible}
+                queryName={queryNameToDelete}
+                onCancelClick={onCancelDeleteClick}
+                onConfirmClick={onConfirmDeleteClick}
+            />
+        </>
+    );
+};

package/dist/containers/Tenant/Query/i18n/en.json

@@ -0,0 +1,12 @@
+{
+  "controls.query-mode-selector_type": "Type:",
+  "tabs.newQuery": "New query",
+  "tabs.history": "History",
+  "tabs.saved": "Saved",
+  "history.empty": "History is empty",
+  "saved.empty": "There are no saved queries",
+  "delete-dialog.header": "Delete query",
+  "delete-dialog.question": "Are you sure you want to delete query",
+  "delete-dialog.delete": "Delete",
+  "delete-dialog.cancel": "Cancel"
+}

package/dist/containers/Tenant/Query/i18n/ru.json

@@ -0,0 +1,12 @@
+{
+  "controls.query-mode-selector_type": "Тип:",
+  "tabs.newQuery": "Новый запрос",
+  "tabs.history": "История",
+  "tabs.saved": "Сохраненные",
+  "history.empty": "История пуста",
+  "saved.empty": "Нет сохраненных запросов",
+  "delete-dialog.header": "Удалить запрос",
+  "delete-dialog.question": "Вы уверены что хотите удалить запрос",
+  "delete-dialog.delete": "Удалить",
+  "delete-dialog.cancel": "Отменить"
+}

package/dist/containers/Tenant/Query/utils/getPreparedResult.ts

@@ -0,0 +1,30 @@
+import type {KeyValueRow} from '../../../../types/api/query';
+import type {IQueryResult} from '../../../../types/store/query';
+
+export const getPreparedResult = (data: IQueryResult) => {
+    const columnDivider = '\t';
+    const rowDivider = '\n';
+
+    if (!data?.result?.length) {
+        return '';
+    }
+
+    const columnHeaders = Object.keys(data.result[0]);
+    const rows = Array<string[] | KeyValueRow[]>(columnHeaders).concat(data.result);
+
+    return rows
+        .map((item) => {
+            const row = [];
+
+            for (const field in item) {
+                if (typeof item[field] === 'object' || Array.isArray(item[field])) {
+                    row.push(JSON.stringify(item[field]));
+                } else {
+                    row.push(item[field]);
+                }
+            }
+
+            return row.join(columnDivider);
+        })
+        .join(rowDivider);
+};

package/dist/containers/Tenant/Tenant.scss

@@ -6,12 +6,4 @@
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     @include flex-container();
-
-    .yc-tabs {
-        overflow: initial;
-    }
-
-    &__tab-content {
-        height: calc(100% - 56px); // general tabs height
-    }
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -8,17 +8,13 @@ import type {TEvDescribeSchemeResult} from '../../types/api/schema';
 
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 import {useTypedSelector} from '../../utils/hooks';
-import routes, {createHref} from '../../routes';
-import {setHeader} from '../../store/reducers/header';
+import {setHeaderBreadcrumbs} from '../../store/reducers/header/header';
 import {disableAutorefresh, getSchema} from '../../store/reducers/schema/schema';
 import {getSchemaAcl} from '../../store/reducers/schemaAcl/schemaAcl';
 
 import SplitPane from '../../components/SplitPane';
 import {AccessDenied} from '../../components/Errors/403';
 
-import {getClusterPath} from '../Cluster/utils';
-
-import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
 import ObjectSummary from './ObjectSummary/ObjectSummary';
 import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
 
@@ -92,20 +88,7 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         if (tenantName) {
-            dispatch(
-                setHeader([
-                    {
-                        text: 'Cluster',
-                        link: getClusterPath(),
-                    },
-                    {
-                        text: tenantName.startsWith('/') ? tenantName.slice(1) : tenantName,
-                        link: createHref(routes.tenant, undefined, {
-                            name: tenantName,
-                        }),
-                    },
-                ]),
-            );
+            dispatch(setHeaderBreadcrumbs('tenant', {tenantName}));
         }
     }, [tenantName, dispatch]);
 
@@ -127,33 +110,28 @@ function Tenant(props: TenantProps) {
             {showBlockingError ? (
                 <AccessDenied />
             ) : (
-                <>
-                    <ObjectGeneralTabs />
-                    <div className={b('tab-content')}>
-                        <SplitPane
-                            defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                            defaultSizes={[25, 75]}
-                            triggerCollapse={summaryVisibilityState.triggerCollapse}
-                            triggerExpand={summaryVisibilityState.triggerExpand}
-                            minSize={[36, 200]}
-                            onSplitStartDragAdditional={onSplitStartDragAdditional}
-                        >
-                            <ObjectSummary
-                                type={preloadedPathType || currentPathType}
-                                subType={preloadedPathSubType || currentPathSubType}
-                                onCollapseSummary={onCollapseSummaryHandler}
-                                onExpandSummary={onExpandSummaryHandler}
-                                isCollapsed={summaryVisibilityState.collapsed}
-                                additionalTenantInfo={props.additionalTenantInfo}
-                            />
-                            <ObjectGeneral
-                                type={preloadedPathType || currentPathType}
-                                additionalTenantInfo={props.additionalTenantInfo}
-                                additionalNodesInfo={props.additionalNodesInfo}
-                            />
-                        </SplitPane>
-                    </div>
-                </>
+                <SplitPane
+                    defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                    defaultSizes={[25, 75]}
+                    triggerCollapse={summaryVisibilityState.triggerCollapse}
+                    triggerExpand={summaryVisibilityState.triggerExpand}
+                    minSize={[36, 200]}
+                    onSplitStartDragAdditional={onSplitStartDragAdditional}
+                >
+                    <ObjectSummary
+                        type={preloadedPathType || currentPathType}
+                        subType={preloadedPathSubType || currentPathSubType}
+                        onCollapseSummary={onCollapseSummaryHandler}
+                        onExpandSummary={onExpandSummaryHandler}
+                        isCollapsed={summaryVisibilityState.collapsed}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                    />
+                    <ObjectGeneral
+                        type={preloadedPathType || currentPathType}
+                        additionalTenantInfo={props.additionalTenantInfo}
+                        additionalNodesInfo={props.additionalNodesInfo}
+                    />
+                </SplitPane>
             )}
         </div>
     );

package/dist/containers/Tenant/TenantPages.tsx

@@ -1,5 +1,4 @@
-import {Icon} from '../../components/Icon';
-import {TENANT_GENERAL_TABS_IDS} from '../../store/reducers/tenant/constants';
+import routes, {createHref} from '../../routes';
 
 export enum TenantInfoTabsIds {
     overview = 'overview',
@@ -9,22 +8,10 @@ export enum TenantInfoTabsIds {
 
 export enum TenantTabsGroups {
     info = 'info',
-    general = 'general',
-    generalTab = 'generalTab',
+    queryTab = 'queryTab',
+    diagnosticsTab = 'diagnosticsTab',
 }
 
-export const TENANT_GENERAL_TABS = [
-    {
-        id: TENANT_GENERAL_TABS_IDS.query,
-        title: 'Query',
-        icon: <Icon name="query" viewBox="0 0 16 16" />,
-    },
-    {
-        id: TENANT_GENERAL_TABS_IDS.diagnostics,
-        title: 'Diagnostics',
-        icon: <Icon name="diagnostics" viewBox="0 0 17 16" />,
-    },
-];
 export const TENANT_INFO_TABS = [
     {
         id: TenantInfoTabsIds.overview,
@@ -42,3 +29,7 @@ export const TENANT_SCHEMA_TAB = [
         title: 'Schema',
     },
 ];
+
+export const getTenantPath = (query = {}) => {
+    return createHref(routes.tenant, undefined, query);
+};

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

@@ -0,0 +1,10 @@
+import type {Settings} from '@gravity-ui/react-data-table';
+
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+
+export const MAX_QUERY_HEIGHT = 6;
+
+export const QUERY_TABLE_SETTINGS: Settings = {
+    ...DEFAULT_TABLE_SETTINGS,
+    dynamicRenderType: 'variable',
+};

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

@@ -3,8 +3,11 @@ import type {NavigationTreeNodeType, NavigationTreeProps} from 'ydb-ui-component
 
 import {changeUserInput} from '../../../store/reducers/executeQuery';
 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, setTenantPage} from '../../../store/reducers/tenant/tenant';
+import {
+    TENANT_QUERY_TABS_ID,
+    TENANT_PAGES_IDS,
+} from '../../../store/reducers/tenant/constants';
 import createToast from '../../../utils/createToast';
 
 const createTableTemplate = (path: string) => {
@@ -37,7 +40,8 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+        dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+        dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
         setActivePath(path);
     };
 
@@ -66,7 +70,8 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TENANT_GENERAL_TABS_IDS.query));
+            dispatch(setTenantPage(TENANT_PAGES_IDS.query));
+            dispatch(setQueryTab(TENANT_QUERY_TABS_ID.newQuery));
             setActivePath(path);
         },
     };

package/dist/containers/Tenants/Tenants.js

@@ -18,7 +18,8 @@ import {AutoFetcher} from '../../utils/autofetcher';
 import routes, {createHref} from '../../routes';
 import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {withSearch} from '../../HOCS';
-import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_PAGE_KEY} from '../../utils/constants';
+import {TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
 import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
 import {
     changeFilter,
@@ -27,7 +28,7 @@ import {
 } from '../../store/reducers/settings/settings';
 
 import {clusterName} from '../../store';
-import {TenantTabsGroups, TENANT_GENERAL_TABS, TENANT_INFO_TABS} from '../Tenant/TenantPages';
+import {TenantTabsGroups, TENANT_INFO_TABS} from '../Tenant/TenantPages';
 
 import './Tenants.scss';
 
@@ -123,18 +124,22 @@ class Tenants extends React.Component {
         });
         const filteredTenants = Tenants.filterTenants(filteredTenantsBySearch, filter);
 
-        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_GENERAL_TABS[0].id;
+        const initialTenantGeneralTab = savedTenantInitialTab || TENANT_PAGES_IDS.query;
         const initialTenantInfoTab = TENANT_INFO_TABS[0].id;
 
+        const getTenantBackend = (tenant) => {
+            const backend = tenant.MonitoringEndpoint ?? tenant.backend;
+            return additionalTenantsInfo.tenantBackend
+                ? additionalTenantsInfo.tenantBackend(backend)
+                : undefined;
+        };
+
         const columns = [
             {
                 name: 'Name',
                 header: 'Database',
                 render: ({value, row}) => {
-                    const backend = row.MonitoringEndpoint ?? row.backend;
-                    const tenantBackend = additionalTenantsInfo.tenantBackend
-                        ? additionalTenantsInfo.tenantBackend(backend)
-                        : undefined;
+                    const backend = getTenantBackend(row);
                     const isExternalLink = Boolean(backend);
                     return (
                         <div className={b('name-wrapper')}>
@@ -147,7 +152,7 @@ class Tenants extends React.Component {
                                 hasClipboardButton
                                 path={createHref(routes.tenant, undefined, {
                                     name: value,
-                                    backend: tenantBackend,
+                                    backend,
                                     [TenantTabsGroups.info]: initialTenantInfoTab,
                                     [TenantTabsGroups.general]: initialTenantGeneralTab,
                                 })}
@@ -287,12 +292,20 @@ class Tenants extends React.Component {
                 header: 'Tablets States',
                 sortable: false,
                 width: 430,
-                render: ({value, row}) =>
-                    value ? (
-                        <TabletsStatistic path={row.Name} tablets={value} nodeIds={row.NodeIds} />
+                render: ({value, row}) => {
+                    const backend = getTenantBackend(row);
+
+                    return value ? (
+                        <TabletsStatistic
+                            path={row.Name}
+                            tablets={value}
+                            nodeIds={row.NodeIds}
+                            backend={backend}
+                        />
                     ) : (
                         '—'
-                    ),
+                    );
+                },
             },
         ];
 
@@ -347,7 +360,7 @@ const mapStateToProps = (state) => {
         loading,
         error,
         filter: state.settings.problemFilter,
-        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_TAB_KEY),
+        savedTenantInitialTab: getSettingValue(state, TENANT_INITIAL_PAGE_KEY),
     };
 };