ydb-embedded-ui 1.13.1 → 1.14.0

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -1,3 +1,4 @@
+import {useEffect} from 'react';
 import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
@@ -13,7 +14,7 @@ import {getActions} from '../../utils/schemaActions';
 interface SchemaTreeProps {
     rootPath: string;
     rootName: string;
-    rootType: EPathType;
+    rootType?: EPathType;
     currentPath: string;
 }
 
@@ -48,6 +49,13 @@ export function SchemaTree(props: SchemaTreeProps) {
         dispatch(getSchemaAcl({path: activePath}));
     };
 
+    useEffect(() => {
+        // if the cached path is not in the current tree, show root
+        if (!currentPath.startsWith(rootPath)) {
+            handleActivePathUpdate(rootPath);
+        }
+    }, []);
+
     return (
         <NavigationTree
             rootState={{

package/dist/containers/Tenant/Tenant.scss

@@ -11,55 +11,7 @@
         overflow: initial;
     }
 
-    &__loader {
-        display: flex;
-        flex: 1 1 auto;
-        justify-content: center;
-        align-items: center;
-    }
-
-    &__content {
-        overflow: auto;
-        @include flex-container();
-    }
-
-    &__storage {
-        overflow: auto;
-
-        height: 100%;
-        padding-left: 20px;
-    }
-
-    &__row {
-        display: flex;
-        align-items: flex-start;
-
-        &_schema {
-            height: 100%;
-        }
-
-        &_schema-tags {
-            align-items: center;
-        }
-    }
-
-    &__schema-wrapper {
-        overflow: auto;
-
-        min-width: 300px;
-        height: 100%;
-        padding-top: 15px;
-        padding-left: 8px;
-    }
-
-    &__schema-tabs-wrapper {
-        overflow: auto;
-
-        width: 100%;
-        height: 100%;
-        padding: 15px 0 0 15px;
-
-        border-left: 1px solid rgba(0, 0, 0, 0.07);
-        @include flex-container();
+    &__tab-content {
+        height: calc(100% - 56px); // general tabs height
     }
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -134,28 +134,30 @@ function Tenant(props: TenantProps) {
             ) : (
                 <>
                     <ObjectGeneralTabs />
-                    <SplitPane
-                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
-                        defaultSizes={[25, 75]}
-                        triggerCollapse={summaryVisibilityState.triggerCollapse}
-                        triggerExpand={summaryVisibilityState.triggerExpand}
-                        minSize={[36, 200]}
-                        onSplitStartDragAdditional={onSplitStartDragAdditional}
-                    >
-                        <ObjectSummary
-                            type={currentPathType}
-                            subType={currentPathSubType}
-                            onCollapseSummary={onCollapseSummaryHandler}
-                            onExpandSummary={onExpandSummaryHandler}
-                            isCollapsed={summaryVisibilityState.collapsed}
-                            additionalTenantInfo={props.additionalTenantInfo}
-                        />
-                        <ObjectGeneral
-                            type={currentPathType}
-                            additionalTenantInfo={props.additionalTenantInfo}
-                            additionalNodesInfo={props.additionalNodesInfo}
-                        />
-                    </SplitPane>
+                    <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={currentPathType}
+                                subType={currentPathSubType}
+                                onCollapseSummary={onCollapseSummaryHandler}
+                                onExpandSummary={onExpandSummaryHandler}
+                                isCollapsed={summaryVisibilityState.collapsed}
+                                additionalTenantInfo={props.additionalTenantInfo}
+                            />
+                            <ObjectGeneral
+                                type={currentPathType}
+                                additionalTenantInfo={props.additionalTenantInfo}
+                                additionalNodesInfo={props.additionalNodesInfo}
+                            />
+                        </SplitPane>
+                    </div>
                 </>
             )}
         </div>

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

@@ -29,6 +29,7 @@ const pathTypeToNodeType: Record<EPathType, NavigationTreeNodeType | undefined>
     [EPathType.EPathTypeColumnTable]: 'column_table',
 
     [EPathType.EPathTypeCdcStream]: 'topic',
+    [EPathType.EPathTypePersQueueGroup]: 'topic',
 };
 
 export const mapPathTypeToNavigationTreeType = (
@@ -51,6 +52,7 @@ const pathTypeToIsTable: Record<EPathType, boolean> = {
     [EPathType.EPathTypeExtSubDomain]: false,
     [EPathType.EPathTypeColumnStore]: false,
     [EPathType.EPathTypeCdcStream]: false,
+    [EPathType.EPathTypePersQueueGroup]: false,
 };
 
 export const isTableType = (pathType?: EPathType) =>
@@ -82,6 +84,7 @@ const pathTypeToIsColumn: Record<EPathType, boolean> = {
     [EPathType.EPathTypeTableIndex]: false,
     [EPathType.EPathTypeExtSubDomain]: false,
     [EPathType.EPathTypeCdcStream]: false,
+    [EPathType.EPathTypePersQueueGroup]: false,
 };
 
 export const isColumnEntityType = (type?: EPathType) =>

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,
+                sortAccessor: ({NodeIds}) => NodeIds.length,
+                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,
+    };