ydb-embedded-ui 1.13.2 → 1.14.1

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

@@ -20,9 +20,8 @@ const alterTableTemplate = (path: string) => {
     ADD COLUMN is_deleted Bool;`;
 };
 const selectQueryTemplate = (path: string) => {
-    return `SELECT \`id\`, \`name\`
+    return `SELECT *
     FROM \`${path}\`
-    ORDER BY \`id\`
     LIMIT 10;`;
 };
 const upsertQueryTemplate = (path: string) => {

package/dist/containers/Tenants/Tenants.js

@@ -14,7 +14,7 @@ import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/P
 import {AutoFetcher} from '../../utils/autofetcher';
 
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
-import {formatCPU, formatBytesToGigabyte} from '../../utils';
+import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
@@ -257,13 +257,23 @@ class Tenants extends React.Component {
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },
+            {
+                name: 'NodeIds',
+                header: 'Nodes',
+                width: 100,
+                accessor: ({NodeIds}) => NodeIds?.length || 0,
+                sortAccessor: ({NodeIds}) => NodeIds?.length || 0,
+                render: ({value}) => formatNumber(value),
+                align: DataTable.RIGHT,
+                defaultOrder: DataTable.DESCENDING,
+            },
             {
                 name: 'StorageGroups',
                 header: 'Groups',
                 width: 100,
                 sortAccessor: ({StorageGroups}) =>
                     isNaN(Number(StorageGroups)) ? 0 : Number(StorageGroups),
-                render: ({value}) => value ?? '—',
+                render: ({value}) => formatNumber(value) || '—',
                 align: DataTable.RIGHT,
                 defaultOrder: DataTable.DESCENDING,
             },

package/dist/containers/UserSettings/UserSettings.tsx

@@ -1,10 +1,11 @@
 import {connect} from 'react-redux';
 
-import {RadioButton} from '@yandex-cloud/uikit';
+import {RadioButton, Switch} from '@yandex-cloud/uikit';
 import {Settings} from '../../components/AsideNavigation/Settings';
 import favoriteFilledIcon from '../../assets/icons/star.svg';
+import flaskIcon from '../../assets/icons/flask.svg';
 //@ts-ignore
-import {THEME_KEY} from '../../utils/constants';
+import {INVERTED_DISKS_KEY, THEME_KEY} from '../../utils/constants';
 //@ts-ignore
 import {setSettingValue} from '../../store/reducers/settings';
 
@@ -19,6 +20,10 @@ function UserSettings(props: any) {
         props.setSettingValue(THEME_KEY, value);
     };
 
+    const _onInvertedDisksChangeHandler = (value: boolean) => {
+        props.setSettingValue(INVERTED_DISKS_KEY, value);
+    };
+
     return (
         <Settings>
             <Settings.Page
@@ -36,15 +41,33 @@ function UserSettings(props: any) {
                     </Settings.Item>
                 </Settings.Section>
             </Settings.Page>
+            <Settings.Page
+                id="experiments"
+                title="Experiments"
+                icon={{data: flaskIcon}}
+            >
+                <Settings.Section title="Experiments">
+                    <Settings.Item title="Inverted disks space indicators">
+                        <Switch
+                            checked={props.invertedDisks}
+                            onUpdate={_onInvertedDisksChangeHandler}
+                        />
+                    </Settings.Item>
+                </Settings.Section>
+            </Settings.Page>
         </Settings>
     );
 }
 
 const mapStateToProps = (state: any) => {
-    const {theme} = state.settings.userSettings;
+    const {
+        theme,
+        invertedDisks,
+    } = state.settings.userSettings;
 
     return {
         theme,
+        invertedDisks,
     };
 };
 

package/dist/services/api.d.ts

@@ -1,8 +1,12 @@
+type AxiosOptions = {
+    concurrentId?: string;
+};
+
 interface Window {
     api: {
         getSchema: (
             params: {path: string},
-            axiosOptions?: {concurrentId?: string},
+            axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
         getStorageInfo: (
             params: {
@@ -11,8 +15,21 @@ interface Window {
                 nodeId: string,
                 type: 'Groups' | 'Nodes',
             },
-            axiosOptions?: {concurrentId?: string},
+            axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/storage').TStorageInfo>;
+        sendQuery: <
+            Action extends import('../types/api/query').Actions,
+            Schema extends import('../types/api/query').Schemas = undefined
+        >(
+            params: {
+                query?: string,
+                database?: string,
+                action?: Action,
+                stats?: string,
+                schema?: Schema,
+            },
+            axiosOptions?: AxiosOptions,
+        ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
         [method: string]: Function;
     };
 }

package/dist/services/api.js

@@ -146,9 +146,9 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
             state: 0,
         });
     }
-    sendQuery({query, database, action, stats}, {concurrentId} = {}) {
+    sendQuery({query, database, action, stats, schema}, {concurrentId} = {}) {
         return this.post(
-            this.getPath('/viewer/json/query'),
+            this.getPath(`/viewer/json/query${schema ? `?schema=${schema}` : ''}`),
             {
                 query,
                 database,

package/dist/setupTests.js

@@ -11,3 +11,7 @@ import {i18n, Lang} from '../src/utils/i18n';
 i18n.setLang(Lang.En);
 configureYdbUiComponents({lang: Lang.En});
 configureUiKit({lang: Lang.En});
+
+// only to prevent warnings from history lib
+// all api calls in tests should be mocked
+window.custom_backend = '/';

package/dist/store/reducers/executeQuery.js

@@ -2,6 +2,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 import {getValueFromLS, parseJson} from '../../utils/utils';
 import {QUERIES_HISTORY_KEY, QUERY_INITIAL_RUN_ACTION_KEY} from '../../utils/constants';
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
 import {readSavedSettingsValue} from './settings';
 
 const MAXIMUM_QUERIES_IN_HISTORY = 20;
@@ -57,7 +58,7 @@ const executeQuery = (state = initialState, action) => {
         case SEND_QUERY.SUCCESS: {
             return {
                 ...state,
-                data: action.data.result ?? action.data,
+                data: action.data,
                 stats: action.data.stats,
                 loading: false,
                 error: undefined,
@@ -142,15 +143,9 @@ const executeQuery = (state = initialState, action) => {
 
 export const sendQuery = ({query, database, action}) => {
     return createApiRequest({
-        request: window.api.sendQuery({query, database, action, stats: 'profile'}),
+        request: window.api.sendQuery({schema: 'modern', query, database, action, stats: 'profile'}),
         actions: SEND_QUERY,
-        dataHandler: (result) => {
-            const resultData = result.result ?? result;
-            if (resultData && typeof resultData === 'string') {
-                throw 'Unexpected token in JSON.';
-            }
-            return result;
-        },
+        dataHandler: parseQueryAPIExecuteResponse,
     });
 };
 

package/dist/store/reducers/{preview.js → preview.ts}

@@ -1,15 +1,23 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
+import type {ErrorRepsonse, ExecuteActions} from '../../types/api/query';
+import type {IQueryResult} from '../../types/store/query';
+import {parseQueryAPIExecuteResponse} from '../../utils/query';
+
+import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+
 const SEND_QUERY = createRequestActionTypes('preview', 'SEND_QUERY');
-const SET_QUERY_OPTIONS = createRequestActionTypes('preview', 'SET_QUERY_OPTIONS');
+const SET_QUERY_OPTIONS = 'preview/SET_QUERY_OPTIONS';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
 };
 
-const preview = (state = initialState, action) => {
+const preview = (
+    state = initialState,
+    action: ApiRequestAction<typeof SEND_QUERY, IQueryResult, ErrorRepsonse> | ReturnType<typeof setQueryOptions>,
+) => {
     switch (action.type) {
         case SEND_QUERY.REQUEST: {
             return {
@@ -45,29 +53,25 @@ const preview = (state = initialState, action) => {
     }
 };
 
-export const sendQuery = ({query, database, action}) => {
+interface SendQueryParams {
+    query?: string;
+    database?: string;
+    action?: ExecuteActions;
+};
+
+export const sendQuery = ({query, database, action}: SendQueryParams) => {
     return createApiRequest({
-        request: window.api.sendQuery({query, database, action}),
+        request: window.api.sendQuery({schema: 'modern', query, database, action}),
         actions: SEND_QUERY,
-        dataHandler: (data) => {
-            if (!Array.isArray(data)) {
-                try {
-                    return JSON.parse(data);
-                } catch (e) {
-                    return [];
-                }
-            }
-
-            return data;
-        },
+        dataHandler: parseQueryAPIExecuteResponse,
     });
 };
 
-export function setQueryOptions(options) {
+export function setQueryOptions(options: any) {
     return {
         type: SET_QUERY_OPTIONS,
         data: options,
-    };
+    } as const;
 }
 
 export default preview;

package/dist/store/reducers/settings.js

@@ -5,6 +5,7 @@ import {
     THEME_KEY,
     TENANT_INITIAL_TAB_KEY,
     QUERY_INITIAL_RUN_ACTION_KEY,
+    INVERTED_DISKS_KEY,
 } from '../../utils/constants';
 import '../../services/api';
 import {getValueFromLS} from '../../utils/utils';
@@ -28,7 +29,8 @@ export const initialState = {
     userSettings: {
         ...defaultUserSettings,
         ...userSettings,
-        theme: readSavedSettingsValue(THEME_KEY, 'light'),
+        [THEME_KEY]: readSavedSettingsValue(THEME_KEY, 'light'),
+        [INVERTED_DISKS_KEY]: readSavedSettingsValue(INVERTED_DISKS_KEY) === 'true',
         [SAVED_QUERIES_KEY]: readSavedSettingsValue(SAVED_QUERIES_KEY, '[]'),
         [TENANT_INITIAL_TAB_KEY]: readSavedSettingsValue(TENANT_INITIAL_TAB_KEY),
         [QUERY_INITIAL_RUN_ACTION_KEY]: readSavedSettingsValue(QUERY_INITIAL_RUN_ACTION_KEY),

package/dist/store/utils.ts

@@ -0,0 +1,88 @@
+import type {Dispatch} from 'redux';
+import {AxiosResponse} from 'axios';
+
+import createToast from '../utils/createToast';
+
+import {SET_UNAUTHENTICATED} from './reducers/authentication';
+
+export const nop = (result: any) => result;
+
+export function createRequestActionTypes<Prefix extends string, Type extends string>(prefix: Prefix, type: Type) {
+    return {
+        REQUEST: `${prefix}/${type}_REQUEST`,
+        SUCCESS: `${prefix}/${type}_SUCCESS`,
+        FAILURE: `${prefix}/${type}_FAILURE`,
+    } as const;
+}
+
+const isAxiosResponse = (response: any): response is AxiosResponse => response && 'status' in response;
+
+type CreateApiRequestParams<Actions, Response, HandledResponse> = {
+    actions: Actions;
+    request: Promise<Response>;
+    dataHandler: (data: Response, getState?: () => any) => HandledResponse;
+};
+
+export function createApiRequest<
+    Actions extends ReturnType<typeof createRequestActionTypes>,
+    Response,
+    HandledResponse,
+>({actions, request, dataHandler = nop}: CreateApiRequestParams<Actions, Response, HandledResponse>) {
+    const doRequest = async function (dispatch: Dispatch, getState: () => any) {
+        dispatch({
+            type: actions.REQUEST,
+        });
+
+        try {
+            const result = await request;
+            const data = dataHandler(result, getState);
+
+            dispatch({
+                type: actions.SUCCESS,
+                data,
+            });
+
+            return data;
+        } catch (error) {
+            if (isAxiosResponse(error) && error.status === 401) {
+                dispatch({
+                    type: SET_UNAUTHENTICATED.SUCCESS,
+                });
+            } else if (isAxiosResponse(error) && error.status >= 500 && error.statusText) {
+                createToast({
+                    name: 'Request failure',
+                    title: 'Request failure',
+                    type: 'error',
+                    content: `${error.status} ${error.statusText}`,
+                });
+            }
+
+            dispatch({
+                type: actions.FAILURE,
+                error,
+            });
+
+            // TODO should probably throw the received error here, but this change requires a thorough revision of all api calls
+            return undefined;
+        }
+    };
+
+    return doRequest;
+}
+
+export type ApiRequestAction<
+    Actions extends ReturnType<typeof createRequestActionTypes>,
+    SuccessResponse = unknown,
+    ErrorResponse = unknown
+> =
+    | {
+        type: Actions['REQUEST'],
+    }
+    | {
+        type: Actions['SUCCESS'],
+        data: SuccessResponse,
+    }
+    | {
+        type: Actions['FAILURE'],
+        error: ErrorResponse,
+    };

package/dist/types/api/query.ts

@@ -0,0 +1,147 @@
+// common
+
+type Plan = Record<string, any>;
+type AST = string;
+type Stats = Record<string, any>;
+
+export interface CommonFields {
+    ast?: AST;
+    plan?: Plan;
+    stats?: Stats;
+};
+
+interface DeprecatedCommonFields {
+    stats?: Stats;
+}
+
+export interface ErrorRepsonse {
+    error?: any;
+    issues?: any;
+};
+
+export type ExecuteActions = 'execute-script' | 'execute' | 'execute-scan' | undefined;
+export type ExplainActions = 'explain' | 'explain-ast';
+export type Actions = ExecuteActions | ExplainActions;
+
+// undefined == 'classic'
+export type Schemas = 'classic' | 'modern' | 'ydb' | undefined;
+
+// ==== EXECUTE ====
+
+// common types
+
+type CellValue = string | number | null | undefined;
+
+export type KeyValueRow<T = CellValue> = {
+    [key: string]: T;
+}
+
+export type ArrayRow<T = CellValue> = Array<T>;
+
+export interface ColumnType {
+    name: string;
+    type: string;
+}
+
+// modern response
+
+export type ExecuteModernResponse = {
+    // either both fields exist, or neither one does
+    // they can be undefined for queries like `insert into`
+    result?: ArrayRow[];
+    columns?: ColumnType[];
+} & CommonFields;
+
+export type ExecuteClassicResponseDeep = {
+    // can be undefined for queries like `insert into`
+    result?: KeyValueRow[];
+} & CommonFields;
+
+// can be undefined for queries like `insert into`
+export type ExecuteClassicResponsePlain = KeyValueRow[] | undefined;
+
+export type ExecuteClassicResponse = ExecuteClassicResponseDeep | ExecuteClassicResponsePlain;
+
+export type ExecuteYdbResponse = {
+    // can be undefined for queries like `insert into`
+    result?: KeyValueRow[];
+} & CommonFields;
+
+type ExecuteResponse<Schema extends Schemas> = (
+    Schema extends 'modern'
+        ? ExecuteModernResponse
+        : Schema extends 'ydb'
+            ? ExecuteYdbResponse
+            : Schema extends 'classic' | undefined
+                ? ExecuteClassicResponse
+                : unknown
+);
+
+// deprecated response from older versions, backward compatibility
+
+type DeprecatedExecuteResponseValue =
+    | KeyValueRow[]
+    | string
+    // can be here because of a bug in the previous backend version
+    // should be ignored in parsing
+    | Plan;
+
+export type DeprecatedExecuteResponseDeep = {
+    // can be undefined for queries like `insert into`
+    result?: DeprecatedExecuteResponseValue;
+} & DeprecatedCommonFields;
+
+// can be undefined for queries like `insert into`
+export type DeprecatedExecuteResponsePlain = DeprecatedExecuteResponseValue | undefined;
+
+export type DeprecatedExecuteResponse = DeprecatedExecuteResponseDeep | DeprecatedExecuteResponsePlain;
+
+
+// ==== EXPLAIN ====
+
+// modern response
+
+type ExplainResponse = CommonFields;
+
+// deprecated response from older versions, backward compatibility
+
+type DeprecatedExplainResponse<Action extends ExplainActions> = (
+    Action extends 'explain-ast'
+        ? {ast: AST} & DeprecatedCommonFields
+        : Actions extends 'explain'
+            ? ({result: Plan} & DeprecatedCommonFields) | Plan
+            : unknown
+);
+
+
+// ==== COMBINED API RESPONSE ====
+
+export type QueryAPIExecuteResponse<Schema extends Schemas = undefined> =
+    | ExecuteResponse<Schema>
+    | DeprecatedExecuteResponse
+    | null;
+
+export type QueryAPIExplainResponse<Action extends ExplainActions> =
+    | ExplainResponse
+    | DeprecatedExplainResponse<Action>
+    | null;
+
+export type QueryAPIResponse<Action extends Actions, Schema extends Schemas = undefined> = (
+    Action extends ExecuteActions
+        ? QueryAPIExecuteResponse<Schema>
+        : Action extends ExplainActions
+            ? QueryAPIExplainResponse<Action>
+            : unknown
+);
+
+export type AnyExecuteResponse = 
+    | ExecuteModernResponse
+    | ExecuteClassicResponse
+    | ExecuteYdbResponse
+    | DeprecatedExecuteResponse;
+
+export type DeepExecuteResponse =
+    | ExecuteModernResponse
+    | ExecuteClassicResponseDeep
+    | ExecuteYdbResponse
+    | DeprecatedExecuteResponseDeep;