ydb-embedded-ui 4.15.0 → 4.16.0

package/dist/store/reducers/settings/settings.ts

@@ -14,10 +14,12 @@ import {
     CLUSTER_INFO_HIDDEN_KEY,
     LAST_USED_QUERY_ACTION_KEY,
     USE_BACKEND_PARAMS_FOR_TABLES_KEY,
+    LANGUAGE_KEY,
 } from '../../../utils/constants';
 import '../../../services/api';
-import {getValueFromLS, parseJson} from '../../../utils/utils';
+import {parseJson} from '../../../utils/utils';
 import {QUERY_ACTIONS, QUERY_MODES} from '../../../utils/query';
+import {readSavedSettingsValue, systemSettings, userSettings} from '../../../utils/settings';
 
 import {TENANT_PAGES_IDS} from '../tenant/constants';
 
@@ -38,20 +40,12 @@ export const ProblemFilterValues = {
     PROBLEMS: 'With problems',
 } as const;
 
-const userSettings = window.userSettings || {};
-const systemSettings = window.systemSettings || {};
-
-export function readSavedSettingsValue(key: string, defaultValue?: string) {
-    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
-
-    return savedValue ?? defaultValue;
-}
-
 export const initialState = {
     problemFilter: ProblemFilterValues.ALL,
     userSettings: {
         ...userSettings,
         [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'system'),
+        [LANGUAGE_KEY]: readSavedSettingsValue(LANGUAGE_KEY),
         [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY, 'false'),
         [USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY]: readSavedSettingsValue(
             USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,

package/dist/store/reducers/tenant/tenant.ts

@@ -20,6 +20,7 @@ const SET_QUERY_TAB = 'tenant/SET_QUERY_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 const SET_SUMMARY_TAB = 'tenant/SET_SUMMARY_TAB';
 const CLEAR_TENANT = 'tenant/CLEAR_TENANT';
+const SET_DATA_WAS_NOT_LOADED = 'tenant/SET_DATA_WAS_NOT_LOADED';
 
 const initialState = {loading: false, wasLoaded: false};
 
@@ -43,6 +44,10 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
         }
 
         case FETCH_TENANT.FAILURE: {
+            if (action.error?.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
@@ -84,6 +89,13 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
             };
         }
 
+        case SET_DATA_WAS_NOT_LOADED: {
+            return {
+                ...state,
+                wasLoaded: false,
+            };
+        }
+
         default:
             return state;
     }
@@ -91,7 +103,7 @@ const tenantReducer: Reducer<TenantState, TenantAction> = (state = initialState,
 
 export const getTenantInfo = ({path}: {path: string}) => {
     return createApiRequest({
-        request: window.api.getTenantInfo({path}),
+        request: window.api.getTenantInfo({path}, {concurrentId: 'getTenantInfo'}),
         actions: FETCH_TENANT,
         dataHandler: (tenantData): TTenant | undefined => {
             return tenantData.TenantInfo?.[0];
@@ -131,4 +143,10 @@ export function setSummaryTab(tab: TenantSummaryTab) {
     } as const;
 }
 
+export const setDataWasNotLoaded = () => {
+    return {
+        type: SET_DATA_WAS_NOT_LOADED,
+    } as const;
+};
+
 export default tenantReducer;

package/dist/store/reducers/tenant/types.ts

@@ -16,6 +16,7 @@ import {
     setQueryTab,
     setSummaryTab,
     setTenantPage,
+    setDataWasNotLoaded,
 } from './tenant';
 
 export type TenantPage = ValueOf<typeof TENANT_PAGES_IDS>;
@@ -41,4 +42,5 @@ export type TenantAction =
     | ReturnType<typeof setTenantPage>
     | ReturnType<typeof setQueryTab>
     | ReturnType<typeof setDiagnosticsTab>
-    | ReturnType<typeof setSummaryTab>;
+    | ReturnType<typeof setSummaryTab>
+    | ReturnType<typeof setDataWasNotLoaded>;

package/dist/store/reducers/tenants/selectors.ts

@@ -24,7 +24,7 @@ const filterTenantsByProblems = (tenants: PreparedTenant[], problemFilter: Probl
 const filteredTenantsBySearch = (tenants: PreparedTenant[], searchQuery: string) => {
     return tenants.filter((item) => {
         const re = new RegExp(escapeRegExp(searchQuery), 'i');
-        return re.test(item.Name) || re.test(item.controlPlaneName);
+        return re.test(item.Name || '') || re.test(item.controlPlaneName);
     });
 };
 

package/dist/store/reducers/tenants/utils.ts

@@ -2,8 +2,8 @@ import type {TTenant} from '../../../types/api/tenant';
 import {isNumeric} from '../../../utils/utils';
 
 const getControlPlaneValue = (tenant: TTenant) => {
-    const parts = tenant.Name.split('/');
-    const defaultValue = parts.length ? parts[parts.length - 1] : '—';
+    const parts = tenant.Name?.split('/');
+    const defaultValue = parts?.length ? parts[parts.length - 1] : '—';
     const controlPlaneName = tenant.ControlPlane?.name;
 
     return controlPlaneName ?? defaultValue;

package/dist/types/api/tenant.ts

@@ -22,38 +22,38 @@ export interface TTenantInfo {
 }
 
 export interface TTenant {
-    Name: string;
-    Id: string;
-    Type: ETenantType;
-    State: State;
+    Name?: string;
+    Id?: string;
+    Type?: ETenantType;
+    State?: State;
     StateStats?: THiveDomainStatsStateCount[];
-    Metrics: TMetrics;
+    Metrics?: TMetrics;
     NodeIds?: number[];
-    AliveNodes: number;
-    Resources: TTenantResources;
+    AliveNodes?: number;
+    Resources?: TTenantResources;
     /** uint64 */
-    CreateTime: string;
-    Owner: string;
+    CreateTime?: string;
+    Owner?: string;
     Users?: string[];
     PoolStats?: TPoolStats[];
-    UserAttributes: Record<string, string>;
-    Overall: EFlag;
+    UserAttributes?: Record<string, string>;
+    Overall?: EFlag;
     SystemTablets?: TTabletStateInfo[];
-    ResourceId: string;
+    ResourceId?: string;
     Tablets?: TTabletStateInfo[];
     /** uint64 */
-    StorageAllocatedSize: string;
+    StorageAllocatedSize?: string;
     /** uint64 */
-    StorageMinAvailableSize: string;
+    StorageMinAvailableSize?: string;
     Nodes?: TSystemStateInfo[];
     /** uint64 */
-    MemoryUsed: string;
+    MemoryUsed?: string;
     /** uint64 */
-    MemoryLimit: string;
+    MemoryLimit?: string;
     /** double */
-    CoresUsed: number;
+    CoresUsed?: number;
     /** uint64 */
-    StorageGroups: string;
+    StorageGroups?: string;
 
     MonitoringEndpoint?: string; // additional
     ControlPlane?: ControlPlane; // additional
@@ -139,11 +139,10 @@ enum State {
     'CONFIGURING' = 'CONFIGURING',
 }
 
-enum ETabletVolatileState {
+export enum ETabletVolatileState {
     'TABLET_VOLATILE_STATE_UNKNOWN' = 'TABLET_VOLATILE_STATE_UNKNOWN',
     'TABLET_VOLATILE_STATE_STOPPED' = 'TABLET_VOLATILE_STATE_STOPPED',
     'TABLET_VOLATILE_STATE_BOOTING' = 'TABLET_VOLATILE_STATE_BOOTING',
     'TABLET_VOLATILE_STATE_STARTING' = 'TABLET_VOLATILE_STATE_STARTING',
     'TABLET_VOLATILE_STATE_RUNNING' = 'TABLET_VOLATILE_STATE_RUNNING',
-    '_TABLET_VOLATILE_STATE_BLOCKED' = '_TABLET_VOLATILE_STATE_BLOCKED',
 }

package/dist/types/store/executeQuery.ts

@@ -14,11 +14,17 @@ import type {IQueryResult, QueryError, QueryErrorResponse} from './query';
 
 export type MonacoHotKeyAction = ValueOf<typeof MONACO_HOT_KEY_ACTIONS>;
 
+export interface QueryInHistory {
+    queryText: string;
+    syntax?: string;
+}
+
 export interface ExecuteQueryState {
     loading: boolean;
     input: string;
     history: {
-        queries: string[];
+        // String type for backward compatibility
+        queries: (QueryInHistory | string)[];
         currentIndex: number;
     };
     monacoHotKey: null | MonacoHotKeyAction;
@@ -38,3 +44,7 @@ export type ExecuteQueryAction =
     | ReturnType<typeof saveQueryToHistory>
     | ReturnType<typeof setMonacoHotKey>
     | ReturnType<typeof setTenantPath>;
+
+export interface ExecuteQueryStateSlice {
+    executeQuery: ExecuteQueryState;
+}

package/dist/types/store/query.ts

@@ -1,4 +1,4 @@
-import {QUERY_ACTIONS, QUERY_MODES} from '../../utils/query';
+import {QUERY_ACTIONS, QUERY_MODES, QUERY_SYNTAX} from '../../utils/query';
 
 import type {IResponseError, NetworkError} from '../api/error';
 import type {
@@ -29,6 +29,7 @@ export type QueryError = NetworkError | QueryErrorResponse;
 
 export type QueryAction = ValueOf<typeof QUERY_ACTIONS>;
 export type QueryMode = ValueOf<typeof QUERY_MODES>;
+export type QuerySyntax = ValueOf<typeof QUERY_SYNTAX>;
 
 export interface SavedQuery {
     name: string;

package/dist/utils/autofetcher.ts

@@ -1,4 +1,11 @@
 export class AutoFetcher {
+    static DEFAULT_TIMEOUT = 30000;
+    static MIN_TIMEOUT = 30000;
+    timeout: number;
+    active: boolean;
+    timer: undefined | ReturnType<typeof setTimeout>;
+    launchCounter: number;
+
     constructor() {
         this.timeout = AutoFetcher.DEFAULT_TIMEOUT;
         this.active = true;
@@ -52,11 +59,4 @@ export class AutoFetcher {
         this.launchCounter++;
         this.active = true;
     }
-
-    static DEFAULT_TIMEOUT = 30000;
-    static MIN_TIMEOUT = 30000;
-    timeout: number;
-    active: boolean;
-    timer: undefined | ReturnType<typeof setTimeout>;
-    launchCounter: number;
 }

package/dist/utils/constants.ts

@@ -25,7 +25,6 @@ export const TABLET_STATES = {
     TABLET_VOLATILE_STATE_BOOTING: 'booting',
     TABLET_VOLATILE_STATE_STARTING: 'starting',
     TABLET_VOLATILE_STATE_RUNNING: 'running',
-    TABLET_VOLATILE_STATE_BLOCKED: 'blocked',
 };
 
 export const TABLET_COLORS = {
@@ -81,9 +80,11 @@ export const COLORS_PRIORITY = {
 // ==== Titles ====
 export const DEVELOPER_UI_TITLE = 'Developer UI';
 export const CLUSTER_DEFAULT_TITLE = 'Cluster';
+export const TENANT_DEFAULT_TITLE = 'Database';
 
 // ==== Settings ====
 export const THEME_KEY = 'theme';
+export const LANGUAGE_KEY = 'language';
 export const INVERTED_DISKS_KEY = 'invertedDisks';
 export const USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY = 'useNodesEndpointInDiagnostics';
 export const ENABLE_ADDITIONAL_QUERY_MODES = 'enableAdditionalQueryModes';

package/dist/utils/hooks/i18n/en.json

@@ -1,3 +1,3 @@
 {
-  "useQueryModes.queryModeCannotBeSet": "Query mode \"{{mode}}\" cannot be set. You need to turn in additional query modes in settings to enable it"
+  "useQueryModes.queryModeCannotBeSet": "Query mode '{{mode}}' cannot be set. You need to turn in additional query modes in settings to enable it"
 }

package/dist/utils/hooks/i18n/ru.json

@@ -1,3 +1,3 @@
 {
-  "useQueryModes.queryModeCannotBeSet": "Режим выполнения запроса \"{{mode}}\" недоступен. Вам необходимо включить дополнительные режимы выполнения запросов в настройках"
+  "useQueryModes.queryModeCannotBeSet": "Режим выполнения запроса '{{mode}}' недоступен. Вам необходимо включить дополнительные режимы выполнения запросов в настройках"
 }

package/dist/utils/hooks/useQueryModes.ts

@@ -1,6 +1,6 @@
 import type {QueryMode} from '../../types/store/query';
 import {ENABLE_ADDITIONAL_QUERY_MODES, QUERY_INITIAL_MODE_KEY} from '../constants';
-import {isNewQueryMode} from '../query';
+import {QUERY_MODES_TITLES, isNewQueryMode} from '../query';
 import createToast from '../createToast';
 import {useSetting} from './useSetting';
 import i18n from './i18n';
@@ -18,7 +18,9 @@ export const useQueryModes = (): [QueryMode, SetQueryModeIfAvailable] => {
         if (isNewQueryMode(value) && !enableAdditionalQueryModes) {
             createToast({
                 name: 'QueryModeCannotBeSet',
-                title: errorMessage ?? i18n('useQueryModes.queryModeCannotBeSet', {mode: value}),
+                title:
+                    errorMessage ??
+                    i18n('useQueryModes.queryModeCannotBeSet', {mode: QUERY_MODES_TITLES[value]}),
                 type: 'error',
             });
 

package/dist/utils/i18n/i18n.ts

@@ -2,15 +2,21 @@ import {I18N} from '@gravity-ui/i18n';
 import {configure as configureUiKit} from '@gravity-ui/uikit';
 import {configure as configureYdbUiComponents} from 'ydb-ui-components';
 
+import {LANGUAGE_KEY} from '../constants';
+import {readSavedSettingsValue} from '../settings';
+
 enum Lang {
     En = 'en',
     Ru = 'ru',
 }
 
+const defaultLang = Lang.En;
+const currentLang = readSavedSettingsValue(LANGUAGE_KEY, defaultLang);
+
 const i18n = new I18N();
 
-i18n.setLang(Lang.En);
-configureYdbUiComponents({lang: Lang.En});
-configureUiKit({lang: Lang.En});
+i18n.setLang(currentLang);
+configureYdbUiComponents({lang: currentLang});
+configureUiKit({lang: currentLang});
 
-export {i18n, Lang};
+export {i18n, Lang, currentLang, defaultLang};

package/dist/utils/query.ts

@@ -19,6 +19,20 @@ export const QUERY_MODES = {
     script: 'script',
     data: 'data',
     query: 'query',
+    pg: 'pg',
+} as const;
+
+export const QUERY_MODES_TITLES: Record<QueryMode, string> = {
+    scan: 'Scan',
+    script: 'YQL Script',
+    data: 'Data',
+    query: 'YQL - QueryService',
+    pg: 'PostgreSQL',
+} as const;
+
+export const QUERY_SYNTAX = {
+    yql: 'yql_v1',
+    pg: 'pg',
 } as const;
 
 export const isNewQueryMode = (value: QueryMode) => {

package/dist/utils/settings.ts

@@ -0,0 +1,10 @@
+import {getValueFromLS} from './utils';
+
+export const userSettings = window.userSettings || {};
+export const systemSettings = window.systemSettings || {};
+
+export function readSavedSettingsValue(key: string, defaultValue?: string) {
+    const savedValue = window.web_version ? userSettings[key] : getValueFromLS(key);
+
+    return savedValue ?? defaultValue;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "4.15.0",
+  "version": "4.16.0",
   "files": [
     "dist"
   ],

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

@@ -1,33 +0,0 @@
-import cn from 'bem-cn-lite';
-
-import {Link, Text} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
-import {IssueLog} from '../../../../../../types/api/healthcheck';
-
-import i18n from '../../i18n';
-
-const b = cn('healthcheck');
-
-interface PreviewItemProps {
-    data?: IssueLog;
-    onShowMore?: (id: string) => void;
-}
-
-export const PreviewItem = (props: PreviewItemProps) => {
-    const {data, onShowMore} = props;
-
-    if (!data) {
-        return null;
-    }
-
-    return (
-        <div className={b('issue-preview')}>
-            <EntityStatus mode="icons" status={data.status} name={data.type} />
-            <Text as="div" color="secondary" variant="body-2">
-                {data.message}
-            </Text>
-            <Link onClick={() => onShowMore?.(data.id)}>{i18n('label.show-details')}</Link>
-        </div>
-    );
-};

package/dist/containers/Tenant/Diagnostics/Healthcheck/Preview/PreviewItem/index.ts

@@ -1 +0,0 @@
-export * from './PreviewItem';

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

@@ -1,213 +0,0 @@
-import React from 'react';
-import {connect} from 'react-redux';
-import cn from 'bem-cn-lite';
-import PropTypes from 'prop-types';
-import {Loader} from '@gravity-ui/uikit';
-
-import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
-import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
-import {PoolUsage} from '../../../../components/PoolUsage/PoolUsage';
-import {Tablet} from '../../../../components/Tablet';
-
-import {getTenantInfo} from '../../../../store/reducers/tenant/tenant';
-
-import {formatCPU} from '../../../../utils';
-import {bytesToGB} from '../../../../utils/utils';
-import {TABLET_STATES} from '../../../../utils/constants';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-
-import {mapDatabaseTypeToDBName} from '../../utils/schema';
-
-import './TenantOverview.scss';
-
-const b = cn('tenant-overview');
-
-const renderName = (tenant) => {
-    if (tenant) {
-        const {Name} = tenant;
-        return (
-            <div className={b('tenant-name-wrapper')}>
-                <EntityStatus
-                    status={tenant.State}
-                    name={Name}
-                    withLeftTrim
-                    hasClipboardButton
-                    clipboardButtonAlwaysVisible
-                />
-            </div>
-        );
-    }
-
-    return <div>no tenant data</div>;
-};
-
-class TenantOverview extends React.Component {
-    static propTypes = {
-        loading: PropTypes.bool,
-        autorefresh: PropTypes.bool,
-        tenant: PropTypes.object,
-        systemTablets: PropTypes.array,
-        additionalTenantInfo: PropTypes.func,
-        tenantName: PropTypes.string,
-    };
-
-    autofetcher;
-
-    componentDidMount() {
-        const {tenantName, autorefresh, getTenantInfo} = this.props;
-        getTenantInfo({path: tenantName});
-        this.autofetcher = new AutoFetcher();
-        if (autorefresh) {
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => getTenantInfo({path: tenantName}));
-        }
-    }
-
-    componentDidUpdate(prevProps) {
-        const {autorefresh, tenantName, getTenantInfo} = this.props;
-
-        const restartAutorefresh = () => {
-            this.autofetcher.stop();
-            this.autofetcher.start();
-            this.autofetcher.fetch(() => getTenantInfo({path: tenantName}));
-        };
-
-        if (prevProps.tenantName !== this.props.tenantName) {
-            getTenantInfo({path: tenantName});
-            if (autorefresh) {
-                restartAutorefresh();
-            }
-        }
-
-        if (autorefresh && !prevProps.autorefresh) {
-            getTenantInfo({path: tenantName});
-            restartAutorefresh();
-        }
-
-        if (!autorefresh && prevProps.autorefresh) {
-            this.autofetcher.stop();
-        }
-    }
-
-    componentWillUnmount() {
-        this.autofetcher.stop();
-    }
-
-    renderLoader = () => {
-        return (
-            <div className={b('loader')}>
-                <Loader size="m" />
-            </div>
-        );
-    };
-
-    render() {
-        const {tenant, loading} = this.props;
-        const {
-            Metrics = {},
-            PoolStats,
-            StateStats = [],
-            MemoryUsed,
-            Name,
-            CoresUsed,
-            StorageGroups,
-            StorageAllocatedSize,
-            Type,
-            SystemTablets,
-        } = tenant;
-
-        const tenantName = mapDatabaseTypeToDBName(Type);
-        const memoryRaw = MemoryUsed ?? Metrics.Memory;
-
-        const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
-        const storage = (Metrics.Storage && bytesToGB(Metrics.Storage)) || 'no data';
-        const storageGroups = StorageGroups ?? 'no data';
-        const blobStorage = (StorageAllocatedSize && bytesToGB(StorageAllocatedSize)) || 'no data';
-        const storageEfficiency =
-            Metrics.Storage && StorageAllocatedSize
-                ? `${((Metrics.Storage * 100) / StorageAllocatedSize).toFixed(2)}%`
-                : 'no data';
-
-        const cpuRaw = CoresUsed !== undefined ? Number(CoresUsed) * 1_000_000 : Metrics.CPU;
-
-        const cpu = formatCPU(cpuRaw);
-
-        const metricsInfo = [
-            {label: 'Type', value: Type},
-            {label: 'Memory', value: memory},
-            {label: 'CPU', value: cpu},
-            {label: 'Tablet storage', value: storage},
-            {label: 'Storage groups', value: storageGroups},
-            {label: 'Blob storage', value: blobStorage},
-            {label: 'Storage efficiency', value: storageEfficiency},
-        ];
-
-        const tabletsInfo = StateStats.map((info) => ({
-            label: TABLET_STATES[info.VolatileState],
-            value: info.Count,
-        }));
-
-        return loading ? (
-            this.renderLoader()
-        ) : (
-            <div className={b()}>
-                <div className={b('top-label')}>{tenantName}</div>
-                <div className={b('top')}>
-                    {renderName(tenant)}
-                    {this.props.additionalTenantInfo &&
-                        this.props.additionalTenantInfo(
-                            this.props.tenant.Name,
-                            this.props.tenant.Type,
-                        )}
-                </div>
-                <div className={b('system-tablets')}>
-                    {SystemTablets &&
-                        SystemTablets.map((tablet, tabletIndex) => (
-                            <Tablet key={tabletIndex} tablet={tablet} tenantName={Name} />
-                        ))}
-                </div>
-                <div className={b('common-info')}>
-                    <div>
-                        <div className={b('section-title')}>Pools</div>
-                        {PoolStats ? (
-                            <div className={b('section', {pools: true})}>
-                                {PoolStats.map((pool, poolIndex) => (
-                                    <PoolUsage key={poolIndex} data={pool} />
-                                ))}
-                            </div>
-                        ) : (
-                            <div className="error">no pools data</div>
-                        )}
-                    </div>
-                    <InfoViewer
-                        title="Metrics"
-                        className={b('section', {metrics: true})}
-                        info={metricsInfo}
-                    />
-
-                    <div className={b('section')}>
-                        <InfoViewer info={tabletsInfo} title="Tablets" />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-function mapStateToProps(state) {
-    const {tenant = {}, loading, error: {status} = {}} = state.tenant;
-    const {autorefresh} = state.schema;
-
-    return {
-        tenant,
-        loading,
-        status,
-        autorefresh,
-    };
-}
-
-const mapDispatchToProps = {
-    getTenantInfo,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(TenantOverview);