ydb-embedded-ui 2.2.1 → 2.3.0

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

@@ -5,6 +5,13 @@
 
     height: 100%;
 
+    &__loader {
+        display: flex;
+        flex-grow: 1;
+        justify-content: center;
+        align-items: center;
+    }
+
     &__header-wrapper {
         padding: 13px 20px 16px;
 

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

@@ -5,7 +5,7 @@ import {Link} from 'react-router-dom';
 import {useDispatch, useSelector} from 'react-redux';
 import {useLocation} from 'react-router';
 
-import {Switch, Tabs} from '@gravity-ui/uikit';
+import {Loader, Switch, Tabs} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';
@@ -53,9 +53,9 @@ function Diagnostics(props: DiagnosticsProps) {
         currentSchema: currentItem = {},
         autorefresh,
     } = useSelector((state: any) => state.schema);
-    const {
-        diagnosticsTab = GeneralPagesIds.overview,
-    } = useSelector((state: any) => state.tenant);
+    const {diagnosticsTab = GeneralPagesIds.overview, wasLoaded} = useSelector(
+        (state: any) => state.tenant,
+    );
 
     const location = useLocation();
 
@@ -79,14 +79,17 @@ function Diagnostics(props: DiagnosticsProps) {
         dispatch(setDiagnosticsTab(tab));
     };
     const activeTab = useMemo(() => {
-        if (pages.find((el) => el.id === diagnosticsTab)) {
-            return diagnosticsTab;
-        } else {
-            const newPage = pages[0].id;
-            forwardToDiagnosticTab(newPage);
-            return newPage;
+        if (wasLoaded) {
+            if (pages.find((el) => el.id === diagnosticsTab)) {
+                return diagnosticsTab;
+            } else {
+                const newPage = pages[0].id;
+                forwardToDiagnosticTab(newPage);
+                return newPage;
+            }
         }
-    }, [pages, diagnosticsTab]);
+        return undefined;
+    }, [pages, diagnosticsTab, wasLoaded]);
 
     const onAutorefreshToggle = (value: boolean) => {
         if (value) {
@@ -185,6 +188,17 @@ function Diagnostics(props: DiagnosticsProps) {
         );
     };
 
+    // Loader prevents incorrect loading of tabs
+    // After tabs are initially loaded it is no longer needed
+    // Thus there is no also "loading" check as in other parts of the project
+    if (!wasLoaded) {
+        return (
+            <div className={b('loader')}>
+                <Loader size="l" />
+            </div>
+        );
+    }
+
     return (
         <div className={b()}>
             {renderTabs()}

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

@@ -15,9 +15,12 @@ import {
 import {EPathType} from '../../../../types/api/schema';
 import {isColumnEntityType, isTableType} from '../../utils/schema';
 //@ts-ignore
-import {getSchema} from '../../../../store/reducers/schema';
+import {getSchema, resetLoadingState} from '../../../../store/reducers/schema';
 //@ts-ignore
-import {getOlapStats} from '../../../../store/reducers/olapStats';
+import {
+    getOlapStats,
+    resetLoadingState as resetOlapLoadingState,
+} from '../../../../store/reducers/olapStats';
 import {useAutofetcher} from '../../../../utils/hooks';
 
 import './Overview.scss';
@@ -64,24 +67,36 @@ function Overview(props: OverviewProps) {
 
     const {
         currentSchema: currentItem = {},
-        loading,
+        loading: schemaLoading,
         wasLoaded,
         autorefresh,
         currentSchemaPath,
     } = useSelector((state: any) => state.schema);
 
-    const {
-        data: { result: olapStats } = { result: undefined },
-    } = useSelector((state: any) => state.olapStats);
+    const {data: {result: olapStats} = {result: undefined}, loading: olapStatsLoading} =
+        useSelector((state: any) => state.olapStats);
+
+    const loading = schemaLoading || olapStatsLoading;
 
-    useAutofetcher(() => {
-        const schemaPath = currentSchemaPath || tenantName;
-        dispatch(getSchema({path: schemaPath}));
+    useAutofetcher(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(resetLoadingState());
+            }
 
-        if (isTableType(type) && isColumnEntityType(type)) {
-            dispatch(getOlapStats({path: schemaPath}));
-        }
-    }, [currentSchemaPath, dispatch, tenantName, type], autorefresh);
+            const schemaPath = currentSchemaPath || tenantName;
+            dispatch(getSchema({path: schemaPath}));
+
+            if (isTableType(type) && isColumnEntityType(type)) {
+                if (!isBackground) {
+                    dispatch(resetOlapLoadingState());
+                }
+                dispatch(getOlapStats({path: schemaPath}));
+            }
+        },
+        [currentSchemaPath, dispatch, tenantName, type],
+        autorefresh,
+    );
 
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
@@ -116,17 +131,17 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
-        return (type && pathTypeToComponent[type]?.()) || (
-            <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+        return (
+            (type && pathTypeToComponent[type]?.()) || (
+                <SchemaInfoViewer fullPath={currentItem.Path} data={schemaData} />
+            )
         );
-    }
+    };
 
     return loading && !wasLoaded ? (
         renderLoader()
     ) : (
-        <div className={props.className}>
-            {renderContent()}
-        </div>
+        <div className={props.className}>{renderContent()}</div>
     );
 }
 

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

@@ -83,7 +83,7 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
                             <TextInput
                                 id="queryName"
                                 placeholder="Enter query name"
-                                text={queryName}
+                                value={queryName}
                                 onUpdate={onQueryNameChange}
                                 hasClear
                                 autoFocus

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

@@ -3,7 +3,7 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, getSchema, preloadSchema} from '../../../../store/reducers/schema';
 import {getDescribe} from '../../../../store/reducers/describe';
 import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
 import type {EPathType} from '../../../../types/api/schema';
@@ -19,28 +19,35 @@ interface SchemaTreeProps {
 }
 
 export function SchemaTree(props: SchemaTreeProps) {
-    const {
-        rootPath,
-        rootName,
-        rootType,
-        currentPath,
-    } = props;
+    const {rootPath, rootName, rootType, currentPath} = props;
 
     const dispatch = useDispatch();
 
-    const fetchPath = (path: string) => window.api.getSchema(
-        {path},
-        {concurrentId: `NavigationTree.getSchema|${path}`},
-    )
-        .then(({PathDescription: {Children = []} = {}}) => {
-            return Children.map(({Name = '', PathType, PathSubType}) => ({
-                name: Name,
-                type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
-                // FIXME: should only be explicitly set to true for tables with indexes
-                // at the moment of writing there is no property to determine this, fix later
-                expandable: true,
-            }));
-        });
+    const fetchPath = (path: string) =>
+        window.api
+            .getSchema({path}, {concurrentId: `NavigationTree.getSchema|${path}`})
+            .then((data) => {
+                const {PathDescription: {Children = []} = {}} = data;
+
+                dispatch(preloadSchema(path, data));
+
+                return Children.map((childData) => {
+                    const {Name = '', PathType, PathSubType} = childData;
+
+                    // not full data, but it contains PathType, which ensures seamless switch between nodes
+                    dispatch(
+                        preloadSchema(`${path}/${Name}`, {PathDescription: {Self: childData}}),
+                    );
+
+                    return {
+                        name: Name,
+                        type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
+                        // FIXME: should only be explicitly set to true for tables with indexes
+                        // at the moment of writing there is no property to determine this, fix later
+                        expandable: true,
+                    };
+                });
+            });
 
     const handleActivePathUpdate = (activePath: string) => {
         dispatch(setCurrentSchemaPath(activePath));

package/dist/containers/Tenant/Tenant.tsx

@@ -16,7 +16,7 @@ import SplitPane from '../../components/SplitPane';
 //@ts-ignore
 import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
 //@ts-ignore
-import {disableAutorefresh, getSchema} from '../../store/reducers/schema';
+import {disableAutorefresh, getSchema, resetLoadingState} from '../../store/reducers/schema';
 //@ts-ignore
 import {getSchemaAcl} from '../../store/reducers/schemaAcl';
 import {
@@ -57,6 +57,13 @@ function Tenant(props: TenantProps) {
         (state: any) => state.schema,
     );
 
+    const {PathType: preloadedPathType, PathSubType: preloadedPathSubType} = useSelector(
+        (state: any) => state.schema.data[currentSchemaPath]?.PathDescription?.Self || {},
+    );
+
+    const {PathType: currentPathType, PathSubType: currentPathSubType} =
+        (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
+
     const {data: {status: tenantStatus = 200} = {}} = useSelector((state: any) => state.tenant);
     const {error: {status: schemaStatus = 200} = {}} = useSelector((state: any) => state.schema);
 
@@ -73,6 +80,7 @@ function Tenant(props: TenantProps) {
 
     useEffect(() => {
         const schemaPath = currentSchemaPath || tenantName;
+        dispatch(resetLoadingState());
         dispatch(getSchema({path: tenantName}));
         dispatch(getSchema({path: schemaPath}));
         dispatch(getSchemaAcl({path: schemaPath}));
@@ -105,11 +113,6 @@ function Tenant(props: TenantProps) {
         };
     }, [tenantName, dispatch]);
 
-    const {
-        PathType: currentPathType,
-        PathSubType: currentPathSubType,
-    } = (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
-
     const onCollapseSummaryHandler = () => {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -144,15 +147,15 @@ function Tenant(props: TenantProps) {
                             onSplitStartDragAdditional={onSplitStartDragAdditional}
                         >
                             <ObjectSummary
-                                type={currentPathType}
-                                subType={currentPathSubType}
+                                type={preloadedPathType || currentPathType}
+                                subType={preloadedPathSubType || currentPathSubType}
                                 onCollapseSummary={onCollapseSummaryHandler}
                                 onExpandSummary={onExpandSummaryHandler}
                                 isCollapsed={summaryVisibilityState.collapsed}
                                 additionalTenantInfo={props.additionalTenantInfo}
                             />
                             <ObjectGeneral
-                                type={currentPathType}
+                                type={preloadedPathType || currentPathType}
                                 additionalTenantInfo={props.additionalTenantInfo}
                                 additionalNodesInfo={props.additionalNodesInfo}
                             />

package/dist/containers/Tenants/Tenants.js

@@ -95,7 +95,7 @@ class Tenants extends React.Component {
                 <TextInput
                     className={b('search')}
                     placeholder="Database name"
-                    text={searchQuery}
+                    value={searchQuery}
                     onUpdate={handleSearchQuery}
                     hasClear
                     autoFocus

package/dist/store/reducers/olapStats.js

@@ -6,6 +6,7 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 
 const FETCH_OLAP_STATS = createRequestActionTypes('query', 'SEND_OLAP_STATS_QUERY');
 const SET_OLAP_STATS_OPTIONS = createRequestActionTypes('query', 'SET_OLAP_STATS_OPTIONS');
+const RESET_LOADING_STATE = 'olapStats/RESET_LOADING_STATE';
 
 const initialState = {
     loading: false,
@@ -48,6 +49,12 @@ const olapStats = (state = initialState, action) => {
                 ...state,
                 ...action.data,
             };
+        case RESET_LOADING_STATE: {
+            return {
+                ...state,
+                wasLoaded: initialState.wasLoaded,
+            };
+        }
         default:
             return state;
     }
@@ -73,4 +80,10 @@ export function setOlapStatsOptions(options) {
     };
 }
 
+export function resetLoadingState() {
+    return {
+        type: RESET_LOADING_STATE,
+    };
+}
+
 export default olapStats;

package/dist/store/reducers/schema.js

@@ -2,10 +2,12 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
 
 const FETCH_SCHEMA = createRequestActionTypes('schema', 'FETCH_SCHEMA');
+const PRELOAD_SCHEMA = 'schema/PRELOAD_SCHEMA';
 const SET_SCHEMA = 'schema/SET_SCHEMA';
 const SET_SHOW_PREVIEW = 'schema/SET_SHOW_PREVIEW';
 const ENABLE_AUTOREFRESH = 'schema/ENABLE_AUTOREFRESH';
 const DISABLE_AUTOREFRESH = 'schema/DISABLE_AUTOREFRESH';
+const RESET_LOADING_STATE = 'schema/RESET_LOADING_STATE';
 
 export const initialState = {
     loading: true,
@@ -42,16 +44,34 @@ const schema = function z(state = initialState, action) {
             };
         }
         case FETCH_SCHEMA.FAILURE: {
+            if (action.error.isCancelled) {
+                return state;
+            }
+
             return {
                 ...state,
                 error: action.error,
                 loading: false,
             };
         }
+        case PRELOAD_SCHEMA: {
+            if (state.data[action.path]) {
+                return state;
+            }
+
+            return {
+                ...state,
+                data: {
+                    ...state.data,
+                    [action.path]: action.data,
+                },
+            };
+        }
         case SET_SCHEMA: {
             return {
                 ...state,
                 currentSchemaPath: action.data,
+                wasLoaded: false,
             };
         }
         case ENABLE_AUTOREFRESH: {
@@ -72,6 +92,12 @@ const schema = function z(state = initialState, action) {
                 showPreview: action.data,
             };
         }
+        case RESET_LOADING_STATE: {
+            return {
+                ...state,
+                wasLoaded: initialState.wasLoaded,
+            };
+        }
         default:
             return state;
     }
@@ -106,4 +132,20 @@ export function setShowPreview(value) {
         data: value,
     };
 }
+
+// only stores the passed data if the path doesn't exist yet
+export function preloadSchema(path, data) {
+    return {
+        type: PRELOAD_SCHEMA,
+        path,
+        data,
+    };
+}
+
+export function resetLoadingState() {
+    return {
+        type: RESET_LOADING_STATE,
+    };
+}
+
 export default schema;

package/dist/store/reducers/storage.js

@@ -4,6 +4,7 @@ import _ from 'lodash';
 import {createSelector} from 'reselect';
 import {calcUptime} from '../../utils';
 import {getUsage} from '../../utils/storage';
+import {getPDiskType} from '../../utils/pdisk';
 
 export const VisibleEntities = {
     All: 'All',
@@ -56,10 +57,17 @@ const storage = function z(state = initialState, action) {
             };
         }
         case FETCH_STORAGE.FAILURE: {
+            if (action.error.isCancelled) {
+                return {
+                    ...state,
+                };
+            }
+
             return {
                 ...state,
                 error: action.error,
                 loading: false,
+                wasLoaded: true,
             };
         }
         case SET_INITIAL: {
@@ -229,6 +237,10 @@ export const getFlatListStorageGroups = createSelector([getStoragePools], (stora
                         },
                         0,
                     );
+                    const mediaType = group.VDisks?.reduce((type, vdisk) => {
+                        const currentType = getPDiskType(vdisk.PDisk || {});
+                        return currentType && (currentType === type || type === '') ? currentType : 'Mixed';
+                    }, '');
                     return [
                         ...acc,
                         {
@@ -240,6 +252,7 @@ export const getFlatListStorageGroups = createSelector([getStoragePools], (stora
                             Limit: limitSizeBytes,
                             Missing: missing,
                             UsedSpaceFlag,
+                            Type: mediaType || null,
                         },
                     ];
                 },
@@ -334,25 +347,22 @@ export const getFilteredEntities = createSelector(
     },
 );
 
-export const getUsageFilterOptions = createSelector(
-    getVisibleEntitiesList,
-    (entities) => {
-        const items = {};
+export const getUsageFilterOptions = createSelector(getVisibleEntitiesList, (entities) => {
+    const items = {};
 
-        entities.forEach((entity) => {
-            const usage = getUsage(entity, 5);
+    entities.forEach((entity) => {
+        const usage = getUsage(entity, 5);
 
-            if (!Object.hasOwn(items, usage)) {
-                items[usage] = 0;
-            }
+        if (!Object.hasOwn(items, usage)) {
+            items[usage] = 0;
+        }
 
-            items[usage] += 1;
-        });
+        items[usage] += 1;
+    });
 
-        return Object.entries(items)
-            .map(([threshold, count]) => ({threshold, count}))
-            .sort((a, b) => b.threshold - a.threshold);
-    },
-);
+    return Object.entries(items)
+        .map(([threshold, count]) => ({threshold, count}))
+        .sort((a, b) => b.threshold - a.threshold);
+});
 
 export default storage;

package/dist/store/reducers/tenant.js

@@ -6,7 +6,7 @@ const FETCH_TENANT = createRequestActionTypes('tenant', 'FETCH_TENANT');
 const SET_TOP_LEVEL_TAB = 'tenant/SET_TOP_LEVEL_TAB';
 const SET_DIAGNOSTICS_TAB = 'tenant/SET_DIAGNOSTICS_TAB';
 
-const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
+const tenantReducer = (state = {loading: false, wasLoaded: false, tenant: {}}, action) => {
     switch (action.type) {
         case FETCH_TENANT.REQUEST: {
             return {
@@ -23,6 +23,7 @@ const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
                 tenant,
                 tenantNodes,
                 loading: false,
+                wasLoaded: true,
                 error: undefined,
             };
         }
@@ -32,6 +33,7 @@ const tenantReducer = (state = {loading: false, tenant: {}}, action) => {
                 ...state,
                 data: action.error,
                 loading: false,
+                wasLoaded: true,
             };
         }
 

package/dist/styles/mixins.scss

@@ -150,7 +150,7 @@
         background-color: var(--yc-color-base-background);
     }
     .data-table__row:hover .data-table__td:nth-child(#{$nth}) {
-        background-color: var(--yc-color-base-float-hover) !important;
+        background-color: var(--ydb-data-table-color-hover) !important;
     }
 }
 

package/dist/types/api/storage.ts

@@ -172,28 +172,53 @@ export interface TVDiskStateInfo {
 }
 
 export interface TBSGroupStateInfo {
-    /** uint32 */
-    GroupID?: string;
+    GroupID?: number;
     ErasureSpecies?: string;
     VDisks?: TVDiskStateInfo[];
     /** uint64 */
     ChangeTime?: string;
-    /** uint32 */
-    NodeId?: string; // filled during merge
-    /** uint32 */
-    GroupGeneration?: string;
+    NodeId?: number;
+    GroupGeneration?: number;
     Overall?: EFlag;
     Latency?: EFlag;
-    /** uint32 */
-    Count?: string; // filled during group count
-    StoragePoolName?: string; // from BS_CONTROLLER
+    Count?: number;
+    StoragePoolName?: string;
+    /** uint64 */
+    AllocatedSize?: string;
+    /** uint64 */
+    AvailableSize?: string;
+    /** uint64 */
+    ReadThroughput?: string;
+    /** uint64 */
+    WriteThroughput?: string;
+    Encryption?: boolean;
+}
+
+interface THiveStorageGroupStats {
+    GroupID?: number;
+    /** uint64 */
+    AcquiredUnits?: string;
+    AcquiredIOPS?: number;
+    /** uint64 */
+    AcquiredThroughput?: string;
+    /** uint64 */
+    AcquiredSize?: string;
+    MaximumIOPS?: number;
+    /** uint64 */
+    MaximumThroughput?: string;
+    /** uint64 */
+    MaximumSize?: string;
+    /** uint64 */
+    AllocatedSize?: string;
+    /** uint64 */
+    AvailableSize?: string;
 }
 
 export interface TStoragePoolInfo {
     Overall?: EFlag;
     Name?: string;
     Kind?: string;
-    Groups?: TBSGroupStateInfo[];
+    Groups?: (TBSGroupStateInfo & THiveStorageGroupStats)[];
     /** uint64 */
     AcquiredUnits?: string;
     AcquiredIOPS?: number;

package/dist/types/store/storage.ts

@@ -8,4 +8,5 @@ export interface IStoragePoolGroup extends TBSGroupStateInfo {
     Limit: number;
     Missing: number;
     UsedSpaceFlag: number;
+    Type: string | null;
 }

package/dist/utils/hooks/useAutofetcher.ts

@@ -2,7 +2,11 @@ import {DependencyList, useEffect, useRef} from 'react';
 
 import {AutoFetcher} from '../autofetcher';
 
-export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, enabled = true) => {
+export const useAutofetcher = (
+    fetchData: (isBackground: boolean) => void,
+    deps: DependencyList,
+    enabled = true,
+) => {
     const ref = useRef<AutoFetcher | null>(null);
 
     if (ref.current === null) {
@@ -12,14 +16,16 @@ export const useAutofetcher = (fetchData: VoidFunction, deps: DependencyList, en
     const autofetcher = ref.current;
 
     // initial fetch
-    useEffect(fetchData, deps); // eslint-disable-line react-hooks/exhaustive-deps
+    useEffect(() => {
+        fetchData(false);
+    }, deps); // eslint-disable-line react-hooks/exhaustive-deps
 
     useEffect(() => {
         autofetcher.stop();
 
         if (enabled) {
             autofetcher.start();
-            autofetcher.fetch(fetchData);
+            autofetcher.fetch(() => fetchData(true));
         }
 
         return () => {

package/package.json

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