ydb-embedded-ui 4.8.2 → 4.10.0

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

@@ -0,0 +1,27 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {StorageType} from '../../../store/reducers/storage/types';
+import {STORAGE_TYPES} from '../../../store/reducers/storage/constants';
+
+const StorageTypesTitles = {
+    [STORAGE_TYPES.groups]: 'Groups',
+    [STORAGE_TYPES.nodes]: 'Nodes',
+};
+
+interface StorageTypeFilterProps {
+    value: StorageType;
+    onChange: (value: string) => void;
+}
+
+export const StorageTypeFilter = ({value, onChange}: StorageTypeFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={STORAGE_TYPES.groups}>
+                {StorageTypesTitles[STORAGE_TYPES.groups]}
+            </RadioButton.Option>
+            <RadioButton.Option value={STORAGE_TYPES.nodes}>
+                {StorageTypesTitles[STORAGE_TYPES.nodes]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/containers/Storage/StorageVisibleEntityFilter/StorageVisibleEntityFilter.tsx

@@ -0,0 +1,31 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import type {VisibleEntities} from '../../../store/reducers/storage/types';
+import {VISIBLE_ENTITIES} from '../../../store/reducers/storage/constants';
+
+export const VisibleEntitiesTitles = {
+    [VISIBLE_ENTITIES.all]: 'All',
+    [VISIBLE_ENTITIES.missing]: 'Degraded',
+    [VISIBLE_ENTITIES.space]: 'Out of Space',
+};
+
+interface StorageProblemFilterProps {
+    value: VisibleEntities;
+    onChange: (value: string) => void;
+}
+
+export const StorageVisibleEntityFilter = ({value, onChange}: StorageProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={VISIBLE_ENTITIES.missing}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.missing]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.space}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.space]}
+            </RadioButton.Option>
+            <RadioButton.Option value={VISIBLE_ENTITIES.all}>
+                {VisibleEntitiesTitles[VISIBLE_ENTITIES.all]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

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.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/{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

@@ -26,20 +26,20 @@ import {
     SAVED_QUERIES_KEY,
     QUERY_INITIAL_MODE_KEY,
     ENABLE_ADDITIONAL_QUERY_MODES,
+    LAST_USED_QUERY_ACTION_KEY,
 } from '../../../../utils/constants';
 import {useSetting} from '../../../../utils/hooks';
-import {QueryModes} from '../../../../types/store/query';
+import {QUERY_ACTIONS, QUERY_MODES} from '../../../../utils/query';
 
 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';
 import {QueryEditorControls} from '../QueryEditorControls/QueryEditorControls';
-import {OldQueryEditorControls} from '../QueryEditorControls/OldQueryEditorControls';
 
 import {getPreparedResult} from '../utils/getPreparedResult';
 
@@ -93,18 +93,21 @@ function QueryEditor(props) {
     const [isResultLoaded, setIsResultLoaded] = useState(false);
     const [queryMode, setQueryMode] = useSetting(QUERY_INITIAL_MODE_KEY);
     const [enableAdditionalQueryModes] = useSetting(ENABLE_ADDITIONAL_QUERY_MODES);
+    const [lastUsedQueryAction, setLastUsedQueryAction] = useSetting(LAST_USED_QUERY_ACTION_KEY);
 
     useEffect(() => {
-        const isNewQueryMode = queryMode !== QueryModes.script && queryMode !== QueryModes.scan;
+        const isNewQueryMode = queryMode !== QUERY_MODES.script && queryMode !== QUERY_MODES.scan;
         if (!enableAdditionalQueryModes && isNewQueryMode) {
-            setQueryMode(QueryModes.script);
+            setQueryMode(QUERY_MODES.script);
         }
     }, [enableAdditionalQueryModes, queryMode, setQueryMode]);
 
     useEffect(() => {
         if (savedPath !== path) {
+            if (savedPath) {
+                changeUserInput({input: ''});
+            }
             setTenantPath(path);
-            changeUserInput({input: ''});
         }
     }, [changeUserInput, setTenantPath, path, savedPath]);
 
@@ -170,7 +173,11 @@ function QueryEditor(props) {
         setMonacoHotKey(null);
         switch (monacoHotKey) {
             case MONACO_HOT_KEY_ACTIONS.sendQuery: {
-                return handleSendExecuteClick(queryMode);
+                if (lastUsedQueryAction === QUERY_ACTIONS.explain) {
+                    return handleGetExplainQueryClick(queryMode);
+                } else {
+                    return handleSendExecuteClick(queryMode);
+                }
             }
             case MONACO_HOT_KEY_ACTIONS.goPrev: {
                 return handlePreviousHistoryClick();
@@ -178,9 +185,6 @@ function QueryEditor(props) {
             case MONACO_HOT_KEY_ACTIONS.goNext: {
                 return handleNextHistoryClick();
             }
-            case MONACO_HOT_KEY_ACTIONS.getExplain: {
-                return handleGetExplainQueryClick();
-            }
             default: {
                 return;
             }
@@ -201,8 +205,8 @@ function QueryEditor(props) {
         editorRef.current = editor;
         editor.focus();
         editor.addAction({
-            id: 'run',
-            label: 'Run',
+            id: 'sendQuery',
+            label: 'Send query',
             keybindings: [
                 // eslint-disable-next-line no-bitwise
                 monaco.KeyMod.CtrlCmd | monaco.KeyCode.Enter,
@@ -240,22 +244,6 @@ function QueryEditor(props) {
             contextMenuOrder: 3,
             run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.goNext),
         });
-
-        editor.addAction({
-            id: 'explain',
-            label: 'Explain',
-            keybindings: [
-                // eslint-disable-next-line no-bitwise
-                monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_E,
-            ],
-            // A precondition for this action.
-            precondition: null,
-            // A rule to evaluate on top of the precondition in order to dispatch the keybindings.
-            keybindingContext: null,
-            contextMenuGroupId: CONTEXT_MENU_GROUP_ID,
-            contextMenuOrder: 4,
-            run: handleKeyBinding(MONACO_HOT_KEY_ACTIONS.getExplain),
-        });
     };
     const onChange = (newValue) => {
         props.changeUserInput({input: newValue});
@@ -270,6 +258,7 @@ function QueryEditor(props) {
             setShowPreview,
         } = props;
 
+        setLastUsedQueryAction(QUERY_ACTIONS.execute);
         setResultType(RESULT_TYPES.EXECUTE);
         sendExecuteQuery({query: input, database: path, mode});
         setIsResultLoaded(true);
@@ -290,6 +279,7 @@ function QueryEditor(props) {
             setShowPreview,
         } = props;
 
+        setLastUsedQueryAction(QUERY_ACTIONS.explain);
         setResultType(RESULT_TYPES.EXPLAIN);
         getExplainQuery({
             query: input,
@@ -392,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 = () => {
@@ -488,24 +474,8 @@ function QueryEditor(props) {
     const renderControls = () => {
         const {executeQuery, explainQuery, savedQueries} = props;
 
-        if (enableAdditionalQueryModes) {
-            return (
-                <QueryEditorControls
-                    onRunButtonClick={handleSendExecuteClick}
-                    runIsLoading={executeQuery.loading}
-                    onExplainButtonClick={handleGetExplainQueryClick}
-                    explainIsLoading={explainQuery.loading}
-                    onSaveQueryClick={onSaveQueryHandler}
-                    savedQueries={savedQueries}
-                    disabled={!executeQuery.input}
-                    onUpdateQueryMode={setQueryMode}
-                    queryMode={queryMode}
-                />
-            );
-        }
-
         return (
-            <OldQueryEditorControls
+            <QueryEditorControls
                 onRunButtonClick={handleSendExecuteClick}
                 runIsLoading={executeQuery.loading}
                 onExplainButtonClick={handleGetExplainQueryClick}
@@ -515,6 +485,8 @@ function QueryEditor(props) {
                 disabled={!executeQuery.input}
                 onUpdateQueryMode={setQueryMode}
                 queryMode={queryMode}
+                enableAdditionalQueryModes={enableAdditionalQueryModes}
+                highlitedAction={lastUsedQueryAction}
             />
         );
     };

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

@@ -15,12 +15,6 @@
     }
 
     &__run {
-        display: flex;
-        align-items: center;
-        .yc-select__option-text {
-            display: none;
-        }
-
         .yc-button__text {
             display: flex;
             justify-content: center;
@@ -29,17 +23,11 @@
         }
     }
 
-    &__select-query-action {
-        margin-left: 2px;
-    }
-
     &__mode-selector {
-        &__popup {
-            width: 120px;
-        }
+        $b: &;
 
         &__button {
-            width: 120px;
+            width: 189px;
             margin-left: 2px;
         }
 
@@ -48,7 +36,24 @@
             justify-content: space-between;
             align-items: center;
 
-            width: 100px;
+            width: 163px;
+        }
+
+        &__popup {
+            width: 189px;
+
+            &_extended {
+                width: 241px;
+            }
+        }
+
+        &_extended {
+            #{$b}__button {
+                width: 241px;
+            }
+            #{$b}__button-content {
+                width: 215px;
+            }
         }
     }
 }