ydb-embedded-ui 2.2.1 → 2.4.0

package/dist/containers/Tenant/Tenant.tsx

@@ -4,8 +4,7 @@ import cn from 'bem-cn-lite';
 import {useLocation} from 'react-router';
 import qs from 'qs';
 
-import EmptyState from '../../components/EmptyState/EmptyState';
-import {Illustration} from '../../components/Illustration';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {setHeader} from '../../store/reducers/header';
 import ObjectGeneralTabs from './ObjectGeneralTabs/ObjectGeneralTabs';
@@ -16,7 +15,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 +56,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 +79,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 +112,6 @@ function Tenant(props: TenantProps) {
         };
     }, [tenantName, dispatch]);
 
-    const {
-        PathType: currentPathType,
-        PathSubType: currentPathSubType,
-    } = (currentItem as TEvDescribeSchemeResult).PathDescription?.Self || {};
-
     const onCollapseSummaryHandler = () => {
         dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerCollapse);
     };
@@ -126,11 +128,7 @@ function Tenant(props: TenantProps) {
     return (
         <div className={b()}>
             {showBlockingError ? (
-                <EmptyState
-                    image={<Illustration name="403" />}
-                    title="Access denied"
-                    description="You don’t have the necessary roles to view this page."
-                />
+                <AccessDenied />
             ) : (
                 <>
                     <ObjectGeneralTabs />
@@ -144,15 +142,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/describe.ts

@@ -0,0 +1,71 @@
+import {createSelector} from 'reselect';
+
+import '../../services/api';
+import {TEvDescribeSchemeResult} from '../../types/api/schema';
+import {IConsumer} from '../../types/api/consumers';
+import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+
+const FETCH_DESCRIBE = createRequestActionTypes('describe', 'FETCH_DESCRIBE');
+
+const describe = (
+    state = {loading: false, wasLoaded: false, data: {}},
+    action: ApiRequestAction<typeof FETCH_DESCRIBE, TEvDescribeSchemeResult, unknown>,
+) => {
+    switch (action.type) {
+        case FETCH_DESCRIBE.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_DESCRIBE.SUCCESS: {
+            let newData;
+
+            if (action.data.Path) {
+                newData = JSON.parse(JSON.stringify(state.data));
+                newData[action.data.Path] = action.data;
+            } else {
+                newData = state.data;
+            }
+
+            return {
+                ...state,
+                data: newData,
+                currentDescribe: action.data,
+                loading: false,
+                wasLoaded: true,
+                error: undefined,
+            };
+        }
+        case FETCH_DESCRIBE.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+// Consumers selectors
+const selectConsumersNames = (state: any, path: string): string[] | undefined =>
+    state.describe.data[path]?.PathDescription?.PersQueueGroup?.PQTabletConfig?.ReadRules;
+
+export const selectConsumers = createSelector(selectConsumersNames, (names = []): IConsumer[] => {
+    const consumers = names.map((name) => {
+        return {name};
+    });
+
+    return consumers;
+});
+
+export function getDescribe({path}: {path: string}) {
+    return createApiRequest({
+        request: window.api.getDescribe({path}),
+        actions: FETCH_DESCRIBE,
+    });
+}
+
+export default describe;

package/dist/store/reducers/healthcheckInfo.ts

@@ -0,0 +1,123 @@
+import _flow from 'lodash/fp/flow';
+import _sortBy from 'lodash/fp/sortBy';
+import _uniqBy from 'lodash/fp/uniqBy';
+import _omit from 'lodash/omit';
+import {createSelector} from 'reselect';
+
+import {IIssuesTree} from '../../types/store/healthcheck';
+import {HealthCheckAPIResponse, IssueLog, StatusFlag} from '../../types/api/healthcheck';
+
+import '../../services/api';
+import {createRequestActionTypes, createApiRequest, ApiRequestAction} from '../utils';
+
+const FETCH_HEALTHCHECK = createRequestActionTypes('cluster', 'FETCH_HEALTHCHECK');
+
+const initialState = {loading: false, wasLoaded: false};
+
+const healthcheckInfo = function (
+    state = initialState,
+    action: ApiRequestAction<typeof FETCH_HEALTHCHECK, HealthCheckAPIResponse, unknown>,
+) {
+    switch (action.type) {
+        case FETCH_HEALTHCHECK.REQUEST: {
+            return {
+                ...state,
+                loading: true,
+            };
+        }
+        case FETCH_HEALTHCHECK.SUCCESS: {
+            const {data} = action;
+
+            return {
+                ...state,
+                data,
+                wasLoaded: true,
+                loading: false,
+                error: undefined,
+            };
+        }
+        case FETCH_HEALTHCHECK.FAILURE: {
+            return {
+                ...state,
+                error: action.error,
+                loading: false,
+            };
+        }
+        default:
+            return state;
+    }
+};
+
+const mapStatusToPriority: Partial<Record<StatusFlag, number>> = {
+    RED: 0,
+    ORANGE: 1,
+    YELLOW: 2,
+    BLUE: 3,
+    GREEN: 4,
+};
+
+const getReasonsForIssue = ({issue, data}: {issue: IssueLog; data: IssueLog[]}) => {
+    return data.filter((item) => issue.reason && issue.reason.indexOf(item.id) !== -1);
+};
+
+const getRoots = (data: IssueLog[]) => {
+    let roots = data.filter((item) => {
+        return !data.find((issue) => issue.reason && issue.reason.indexOf(item.id) !== -1);
+    });
+
+    roots = _flow([
+        _uniqBy((item: IssueLog) => item.id),
+        _sortBy(({status}: {status: StatusFlag}) => mapStatusToPriority[status]),
+    ])(roots);
+
+    return roots;
+};
+
+const getInvertedConsequencesTree = ({
+    data,
+    roots,
+}: {
+    data: IssueLog[];
+    roots?: IssueLog[];
+}): IIssuesTree[] => {
+    return roots
+        ? roots.map((issue) => {
+              const reasonsItems = getInvertedConsequencesTree({
+                  roots: getReasonsForIssue({issue, data}),
+                  data,
+              });
+
+              return {
+                  ...issue,
+                  reasonsItems,
+              };
+          })
+        : [];
+};
+
+const getIssuesLog = (state: any): IssueLog[] | undefined => state.healthcheckInfo.data?.issue_log;
+
+export const selectIssuesTreesRoots = createSelector(getIssuesLog, (issues = []) =>
+    getRoots(issues),
+);
+
+export const selectIssuesTrees = createSelector(
+    [getIssuesLog, selectIssuesTreesRoots],
+    (data = [], roots = []) => {
+        return getInvertedConsequencesTree({data, roots});
+    },
+);
+
+export const selectIssuesTreeById = createSelector(
+    [selectIssuesTrees, (_: any, id: string | undefined) => id],
+    (issuesTrees = [], id) => issuesTrees.find((issuesTree: IIssuesTree) => issuesTree.id === id),
+);
+
+export function getHealthcheckInfo(database: string) {
+    return createApiRequest({
+        request: window.api.getHealthcheckInfo(database),
+        actions: FETCH_HEALTHCHECK,
+    });
+}
+
+export default healthcheckInfo;

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,
@@ -16,7 +18,7 @@ export const initialState = {
     showPreview: false,
 };
 
-const schema = function z(state = initialState, action) {
+const schema = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_SCHEMA.REQUEST: {
             return {
@@ -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',
@@ -38,7 +39,7 @@ const initialState = {
     type: StorageTypes.groups,
 };
 
-const storage = function z(state = initialState, action) {
+const storage = (state = initialState, action) => {
     switch (action.type) {
         case FETCH_STORAGE.REQUEST: {
             return {
@@ -56,10 +57,15 @@ 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 +235,12 @@ 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/store/utils.ts

@@ -7,7 +7,10 @@ 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) {
+export function createRequestActionTypes<Prefix extends string, Type extends string>(
+    prefix: Prefix,
+    type: Type,
+) {
     return {
         REQUEST: `${prefix}/${type}_REQUEST`,
         SUCCESS: `${prefix}/${type}_SUCCESS`,
@@ -15,19 +18,24 @@ export function createRequestActionTypes<Prefix extends string, Type extends str
     } as const;
 }
 
-const isAxiosResponse = (response: any): response is AxiosResponse => response && 'status' in response;
+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;
+    dataHandler?: (data: Response, getState?: () => any) => HandledResponse;
 };
 
 export function createApiRequest<
     Actions extends ReturnType<typeof createRequestActionTypes>,
     Response,
     HandledResponse,
->({actions, request, dataHandler = nop}: CreateApiRequestParams<Actions, Response, HandledResponse>) {
+>({
+    actions,
+    request,
+    dataHandler = nop,
+}: CreateApiRequestParams<Actions, Response, HandledResponse>) {
     const doRequest = async function (dispatch: Dispatch, getState: () => any) {
         dispatch({
             type: actions.REQUEST,
@@ -73,16 +81,16 @@ export function createApiRequest<
 export type ApiRequestAction<
     Actions extends ReturnType<typeof createRequestActionTypes>,
     SuccessResponse = unknown,
-    ErrorResponse = unknown
+    ErrorResponse = unknown,
 > =
     | {
-        type: Actions['REQUEST'],
-    }
+          type: Actions['REQUEST'];
+      }
     | {
-        type: Actions['SUCCESS'],
-        data: SuccessResponse,
-    }
+          type: Actions['SUCCESS'];
+          data: SuccessResponse;
+      }
     | {
-        type: Actions['FAILURE'],
-        error: ErrorResponse,
-    };
+          type: Actions['FAILURE'];
+          error: ErrorResponse;
+      };

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/consumers.ts

@@ -0,0 +1,3 @@
+export interface IConsumer {
+    name: string;
+}

package/dist/types/api/healthcheck.ts

@@ -6,7 +6,7 @@ export enum SelfCheckResult {
     EMERGENCY = 'EMERGENCY',
 }
 
-enum StatusFlag {
+export enum StatusFlag {
     UNSPECIFIED = 'UNSPECIFIED',
     GREY = 'GREY',
     GREEN = 'GREEN',

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;