ydb-embedded-ui 4.9.0 → 4.10.1

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,9 +1,8 @@
-import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 
-import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import type {PreparedStorageNode, VisibleEntities} from '../../../store/reducers/storage/types';
 
 import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
 import {
@@ -25,7 +24,7 @@ enum TableColumnsIds {
     FQDN = 'FQDN',
     DataCenter = 'DataCenter',
     Rack = 'Rack',
-    uptime = 'uptime',
+    Uptime = 'Uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
 }
@@ -34,8 +33,7 @@ type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
 interface StorageNodesProps {
-    data: any;
-    nodes: any;
+    data: PreparedStorageNode[];
     tableSettings: Settings;
     visibleEntities: VisibleEntities;
     nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
@@ -48,7 +46,7 @@ const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     FQDN: 'FQDN',
     DataCenter: 'DC',
     Rack: 'Rack',
-    uptime: 'Uptime',
+    Uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
 };
@@ -75,7 +73,7 @@ function setSortOrder(visibleEntities: VisibleEntities): SortOrder | undefined {
     }
 }
 
-function StorageNodes({
+export function StorageNodes({
     data,
     tableSettings,
     visibleEntities,
@@ -85,7 +83,7 @@ function StorageNodes({
 }: StorageNodesProps) {
     const getNodeRef = additionalNodesInfo?.getNodeRef;
 
-    const allColumns: Column<any>[] = [
+    const allColumns: Column<PreparedStorageNode>[] = [
         {
             name: TableColumnsIds.NodeId,
             header: tableColumnsNames[TableColumnsIds.NodeId],
@@ -114,8 +112,8 @@ function StorageNodes({
             align: DataTable.LEFT,
         },
         {
-            name: TableColumnsIds.uptime,
-            header: tableColumnsNames[TableColumnsIds.uptime],
+            name: TableColumnsIds.Uptime,
+            header: tableColumnsNames[TableColumnsIds.Uptime],
             width: 130,
             sortAccessor: ({StartTime}) => (StartTime ? -StartTime : 0),
             align: DataTable.RIGHT,
@@ -131,11 +129,11 @@ function StorageNodes({
             name: TableColumnsIds.PDisks,
             className: b('pdisks-column'),
             header: tableColumnsNames[TableColumnsIds.PDisks],
-            render: ({value, row}) => (
+            render: ({row}) => (
                 <div className={b('pdisks-wrapper')}>
-                    {_.map(value as any, (el) => (
-                        <div className={b('pdisks-item')} key={el.PDiskId}>
-                            <PDisk data={el} nodeId={row.NodeId} />
+                    {row.PDisks?.map((pDisk) => (
+                        <div className={b('pdisks-item')} key={pDisk.PDiskId}>
+                            <PDisk data={pDisk} nodeId={row.NodeId} />
                         </div>
                     ))}
                 </div>
@@ -195,5 +193,3 @@ function StorageNodes({
         />
     ) : null;
 }
-
-export default StorageNodes;

package/dist/containers/Storage/StorageTypeFilter/StorageTypeFilter.tsx

@@ -13,9 +13,11 @@ interface StorageTypeFilterProps {
     onChange: (value: string) => void;
 }
 
+const storageTypeFilterQa = 'storage-type-filter';
+
 export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} qa={storageTypeFilterQa}>
             <RadioButton.Option value={STORAGE_TYPES.groups}>
                 {StorageTypesTitles[STORAGE_TYPES.groups]}
             </RadioButton.Option>

package/dist/containers/Storage/{StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx → StorageVisibleEntitiesFilter/StorageVisibleEntitiesFilter.tsx}

@@ -14,9 +14,11 @@ interface StorageProblemFilterProps {
     onChange: (value: string) => void;
 }
 
-export const StorageVisibleEntityFilter = ({value, onChange}: StorageProblemFilterProps) => {
+const storageVisibleEntitiesFilterQa = 'storage-visible-entities-filter';
+
+export const StorageVisibleEntitiesFilter = ({value, onChange}: StorageProblemFilterProps) => {
     return (
-        <RadioButton value={value} onUpdate={onChange}>
+        <RadioButton value={value} onUpdate={onChange} qa={storageVisibleEntitiesFilterQa}>
             <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
                 {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
             </RadioButton.Option>

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -13,6 +13,7 @@
 
         &-meta {
             position: relative;
+            z-index: 0;
 
             padding: 0 5px;
 

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -3,7 +3,7 @@ import cn from 'bem-cn-lite';
 
 import {Select, SelectOption} from '@gravity-ui/uikit';
 
-import EntityStatus from "../../../components/EntityStatus/EntityStatus";
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
 import {getUsageSeverityForEntityStatus} from '../utils';
 
@@ -27,14 +27,7 @@ interface UsageFilterProps {
 const b = cn('usage-filter');
 
 export const UsageFilter = (props: UsageFilterProps) => {
-    const {
-        className,
-        value = [],
-        groups = [],
-        onChange,
-        debounce = 200,
-        disabled,
-    } = props;
+    const {className, value = [], groups = [], onChange, debounce = 200, disabled} = props;
 
     const [filterValue, setFilterValue] = useState(value);
     const timer = useRef<number>();
@@ -50,11 +43,15 @@ export const UsageFilter = (props: UsageFilterProps) => {
         });
     }, [value]);
 
-    const options = useMemo(() => groups.map(({threshold, count}) => ({
-        value: String(threshold),
-        text: `${threshold}%`,
-        data: {count}
-    })), [groups]);
+    const options = useMemo(
+        () =>
+            groups.map(({threshold, count}) => ({
+                value: String(threshold),
+                text: `${threshold}%`,
+                data: {count},
+            })),
+        [groups],
+    );
 
     const handleUpdate = (newValue: string[]) => {
         setFilterValue(newValue);
@@ -67,17 +64,20 @@ export const UsageFilter = (props: UsageFilterProps) => {
 
     const maxWidth = Math.max(...groups.map(({count}) => count));
 
-    const renderOption = ({value, data, text}: SelectOption) => (
+    const renderOption = ({value: optionValue, data, text}: SelectOption) => (
         <div className={b('option')}>
             <EntityStatus
                 className={b('option-title')}
-                status={getUsageSeverityForEntityStatus(Number(value))}
+                status={getUsageSeverityForEntityStatus(Number(optionValue))}
                 name={text}
                 size="xs"
             />
             <div className={b('option-meta')}>
                 {i18n('groups_count', {count: data.count})}
-                <div className={b('option-bar')} style={{width: `${data.count / maxWidth * 100}%`}} />
+                <div
+                    className={b('option-bar')}
+                    style={{width: `${(data.count / maxWidth) * 100}%`}}
+                />
             </div>
         </div>
     );

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

@@ -39,11 +39,15 @@
         width: 100%;
         padding: 0 20px;
 
-        & .global-storage,
-        & .ydb-nodes {
+        .ydb-table-with-controls-layout {
             &__controls {
+                height: 46px;
                 padding-top: 0;
             }
+
+            .data-table__sticky_moving {
+                top: 46px !important;
+            }
         }
     }
 }

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

@@ -13,14 +13,14 @@ import {useTypedSelector} from '../../../utils/hooks';
 import routes, {createHref} from '../../../routes';
 import type {TenantDiagnosticsTab} from '../../../store/reducers/tenant/types';
 import {enableAutorefresh, disableAutorefresh} from '../../../store/reducers/schema/schema';
-import { setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
+import {setDiagnosticsTab} from '../../../store/reducers/tenant/tenant';
 import {TENANT_DIAGNOSTICS_TABS_IDS} from '../../../store/reducers/tenant/constants';
 
 import {Loader} from '../../../components/Loader';
 
 import {Heatmap} from '../../Heatmap';
 import {Nodes} from '../../Nodes';
-import Storage from '../../Storage/Storage';
+import {Storage} from '../../Storage/Storage';
 import {Tablets} from '../../Tablets';
 
 import Describe from './Describe/Describe';
@@ -130,7 +130,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 return <Tablets path={currentSchemaPath} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.storage: {
-                return <Storage tenant={tenantNameString} database={true} />;
+                return <Storage tenant={tenantNameString} />;
             }
             case TENANT_DIAGNOSTICS_TABS_IDS.network: {
                 return <Network path={tenantNameString} />;

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

@@ -27,10 +27,13 @@ const renderName = (tenant) => {
         const {Name} = tenant;
         return (
             <div className={b('tenant-name-wrapper')}>
-                <EntityStatus status={tenant.State} />
-                <span className={b('tenant-name-trim')}>
-                    <span className={b('tenant-name')}>{Name}</span>
-                </span>
+                <EntityStatus
+                    status={tenant.State}
+                    name={Name}
+                    withLeftTrim
+                    hasClipboardButton
+                    clipboardButtonAlwaysVisible
+                />
             </div>
         );
     }

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

@@ -10,21 +10,6 @@
         display: flex;
         overflow: hidden;
         align-items: center;
-
-        & .yc-link {
-            display: flex;
-        }
-    }
-    &__tenant-name-trim {
-        overflow: hidden;
-
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        direction: rtl;
-    }
-
-    &__tenant-name {
-        unicode-bidi: plaintext;
     }
 
     &__top {

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

@@ -9,7 +9,7 @@ import {Loader} from '@gravity-ui/uikit';
 
 import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {Search} from '../../../../components/Search';
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+import {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 
 import {changeUserInput} from '../../../../store/reducers/executeQuery';
 import {
@@ -23,7 +23,11 @@ import type {EPathType} from '../../../../types/api/schema';
 import type {ITopQueriesFilters} from '../../../../types/store/executeTopQueries';
 import type {IQueryResult} from '../../../../types/store/query';
 
-import {TENANT_PAGE, TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../../store/reducers/tenant/constants';
+import {
+    TENANT_PAGE,
+    TENANT_PAGES_IDS,
+    TENANT_QUERY_TABS_ID,
+} from '../../../../store/reducers/tenant/constants';
 import {formatDateTime, formatNumber} from '../../../../utils';
 import {HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -50,7 +54,10 @@ const COLUMNS: Column<KeyValueRow>[] = [
         sortable: false,
         render: ({row}) => (
             <div className={b('query')}>
-                <TruncatedQuery value={row.QueryText} maxQueryHeight={MAX_QUERY_HEIGHT} />
+                <TruncatedQuery
+                    value={row.QueryText?.toString()}
+                    maxQueryHeight={MAX_QUERY_HEIGHT}
+                />
             </div>
         ),
     },

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -26,7 +26,7 @@
 
     &__action-button {
         position: absolute;
-        top: 8px; // centered relative to the heading
+        top: 19px; // centered relative to the heading
         right: 5px; // centered relative to the collapsed panel
 
         background-color: var(--yc-color-base-background);
@@ -51,20 +51,11 @@
         flex: 1 1 auto;
 
         height: 100%;
-        padding: 0 12px 12px;
+        padding: 0 12px 12px 16px;
     }
 
     &__tree-header {
-        display: flex;
-        flex: 0 0 auto;
-        justify-content: space-between;
-        align-items: center;
-
-        padding: 12px 12px 8px;
-    }
-
-    &__tree-title {
-        font-weight: 600;
+        padding: 23px 12px 17px 20px;
     }
 
     &__sticky-top {

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

@@ -48,10 +48,7 @@ import {
 } from '../utils/paneVisibilityToggleHelpers';
 import {setShowPreview} from '../../../store/reducers/schema/schema';
 import {setQueryTab, setTenantPage} from '../../../store/reducers/tenant/tenant';
-import {
-    TENANT_PAGES_IDS,
-    TENANT_QUERY_TABS_ID,
-} from '../../../store/reducers/tenant/constants';
+import {TENANT_PAGES_IDS, TENANT_QUERY_TABS_ID} from '../../../store/reducers/tenant/constants';
 
 import './ObjectSummary.scss';
 
@@ -246,9 +243,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
     const renderTree = () => {
         return (
             <div className={b('tree-wrapper')}>
-                <div className={b('tree-header')}>
-                    <div className={b('tree-title')}>Navigation</div>
-                </div>
+                <div className={b('tree-header')}>Navigation</div>
                 <div className={b('tree')}>
                     {pathData && (
                         <SchemaTree

package/dist/containers/Tenant/{Preview → Query/Preview}/Preview.scss

@@ -1,4 +1,4 @@
-@import '../../../styles/mixins.scss';
+@import '../../../../styles/mixins.scss';
 
 .kv-preview {
     height: 100%;

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

@@ -0,0 +1,121 @@
+import {useCallback} from 'react';
+import {useDispatch} from 'react-redux';
+import cn from 'bem-cn-lite';
+
+import {Loader, Button} from '@gravity-ui/uikit';
+
+import type {EPathType} from '../../../../types/api/schema';
+import {sendQuery, setQueryOptions} from '../../../../store/reducers/preview';
+import {setShowPreview} from '../../../../store/reducers/schema/schema';
+import {prepareQueryError} from '../../../../utils/query';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
+
+import {Icon} from '../../../../components/Icon';
+import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryResultTable} from '../../../../components/QueryResultTable';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+
+import {isTableType} from '../../utils/schema';
+
+import i18n from '../i18n';
+
+import './Preview.scss';
+
+const b = cn('kv-preview');
+
+interface PreviewProps {
+    database: string;
+    type: EPathType | undefined;
+}
+
+export const Preview = ({database, type}: PreviewProps) => {
+    const dispatch = useDispatch();
+
+    const {data = {}, loading, error, wasLoaded} = useTypedSelector((state) => state.preview);
+    const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
+    const isFullscreen = useTypedSelector((state) => state.fullscreen);
+
+    const sendQueryForPreview = useCallback(
+        (isBackground) => {
+            if (!isTableType(type)) {
+                return;
+            }
+
+            if (!isBackground) {
+                dispatch(
+                    setQueryOptions({
+                        wasLoaded: false,
+                        data: undefined,
+                    }),
+                );
+            }
+
+            const query = `--!syntax_v1\nselect * from \`${currentSchemaPath}\` limit 32`;
+
+            dispatch(
+                sendQuery({
+                    query,
+                    database,
+                    action: 'execute-scan',
+                }),
+            );
+        },
+        [dispatch, database, currentSchemaPath, type],
+    );
+
+    useAutofetcher(sendQueryForPreview, [sendQueryForPreview], autorefresh);
+
+    const handleClosePreview = () => {
+        dispatch(setShowPreview(false));
+    };
+
+    const renderHeader = () => {
+        return (
+            <div className={b('header')}>
+                <div className={b('title')}>
+                    {i18n('preview.title')}{' '}
+                    <div className={b('table-name')}>{currentSchemaPath}</div>
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(error)} />
+                    <Button
+                        view="flat-secondary"
+                        onClick={handleClosePreview}
+                        title={i18n('preview.close')}
+                    >
+                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return (
+            <div className={b('loader-container')}>
+                <Loader size="m" />
+            </div>
+        );
+    }
+
+    let message;
+
+    if (!isTableType(type)) {
+        message = <div className={b('message-container')}>{i18n('preview.not-available')}</div>;
+    } else if (error) {
+        message = <div className={b('message-container')}>{prepareQueryError(error)}</div>;
+    }
+
+    const content = message ?? (
+        <div className={b('result')}>
+            <QueryResultTable data={data.result} columns={data.columns} />
+        </div>
+    );
+
+    return (
+        <div className={b()}>
+            {renderHeader()}
+            {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
+        </div>
+    );
+};

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

@@ -3,7 +3,7 @@ import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@gravity-ui/react-data-table';
 
-import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
+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';

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

@@ -35,7 +35,7 @@ import {
     PaneVisibilityActionTypes,
     paneVisibilityToggleReducerCreator,
 } from '../../utils/paneVisibilityToggleHelpers';
-import Preview from '../../Preview/Preview';
+import {Preview} from '../Preview/Preview';
 
 import {ExecuteResult} from '../ExecuteResult/ExecuteResult';
 import {ExplainResult} from '../ExplainResult/ExplainResult';
@@ -104,8 +104,10 @@ function QueryEditor(props) {
 
     useEffect(() => {
         if (savedPath !== path) {
+            if (savedPath) {
+                changeUserInput({input: ''});
+            }
             setTenantPath(path);
-            changeUserInput({input: ''});
         }
     }, [changeUserInput, setTenantPath, path, savedPath]);
 
@@ -380,12 +382,8 @@ function QueryEditor(props) {
     };
 
     const renderPreview = () => {
-        const {path, type, currentSchema = {}} = props;
-        const partCount = currentSchema?.PathDescription?.TableStats?.PartCount;
-        // onExpandResultHandler();
-        return (
-            <Preview database={path} table={currentSchema.Path} type={type} partCount={partCount} />
-        );
+        const {path, type} = props;
+        return <Preview database={path} type={type} />;
     };
 
     const handlePreviousHistoryClick = () => {

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

@@ -10,7 +10,7 @@ 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 {TruncatedQuery} from '../../../../components/TruncatedQuery/TruncatedQuery';
 import {IconWrapper} from '../../../../components/Icon';
 
 import {MAX_QUERY_HEIGHT, QUERY_TABLE_SETTINGS} from '../../utils/constants';

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

@@ -1,12 +1,19 @@
 {
   "controls.query-mode-selector_type": "Query type:",
-  "tabs.newQuery": "New query",
+
+  "tabs.newQuery": "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"
+  "delete-dialog.cancel": "Cancel",
+
+  "preview.title": "Preview",
+  "preview.not-available": "Preview is not available",
+  "preview.close": "Close preview"
 }

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

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

package/dist/containers/Tenants/Tenants.scss

@@ -1,9 +1,6 @@
 @import '../../styles/mixins.scss';
 
 .tenants {
-    height: 100%;
-    @include flex-container();
-
     &__format-label {
         margin-right: 15px;
     }
@@ -28,16 +25,7 @@
         }
     }
 
-    &__controls {
-        @include controls();
-    }
-
-    &__table-wrapper {
-        overflow: auto;
-        flex-grow: 1;
-
-        @include freeze-nth-column(1);
-
+    &__table {
         @include table-styles;
     }