ydb-embedded-ui 2.3.0 → 2.4.1

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/{IssueViewer.scss → IssueTree.scss}

@@ -1,56 +1,5 @@
 @import '../../../../../styles/mixins.scss';
 
-.issue {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-
-    height: 40px;
-
-    cursor: pointer;
-
-    &__field {
-        display: flex;
-        overflow: hidden;
-
-        &_status {
-            display: flex;
-
-            white-space: nowrap;
-        }
-        &_additional {
-            width: max-content;
-
-            cursor: pointer;
-
-            color: var(--yc-color-text-link);
-
-            &:hover {
-                color: var(--yc-color-text-link-hover);
-            }
-        }
-        &_message {
-            overflow: hidden;
-            flex-shrink: 0;
-
-            width: 300px;
-
-            white-space: normal;
-        }
-    }
-
-    &__field-tooltip {
-        &#{&} {
-            min-width: 500px;
-            max-width: 500px;
-        }
-    }
-
-    &__field-label {
-        color: var(--yc-color-text-secondary);
-    }
-}
-
 .indicator {
     width: 12px;
     height: 12px;
@@ -86,12 +35,12 @@
     }
 }
 
-.issue-viewer {
+.issue-tree {
     display: flex;
 
     width: 820px;
 
-    &__tree {
+    &__block {
         width: 100%;
     }
 
@@ -163,7 +112,7 @@
             padding-left: 0 !important;
         }
 
-        .issue-viewer__info-panel {
+        .issue-tree__info-panel {
             margin-left: $calculated-margin;
         }
     }

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTree.tsx

@@ -0,0 +1,87 @@
+import {useCallback, useState} from 'react';
+import cn from 'bem-cn-lite';
+import _omit from 'lodash/omit';
+
+// @ts-ignore
+import JSONTree from 'react-json-inspector';
+
+import {TreeView} from 'ydb-ui-components';
+
+import {IIssuesTree} from '../../../../../types/store/healthcheck';
+
+import {IssueTreeItem} from './IssueTreeItem';
+
+import './IssueTree.scss';
+
+const b = cn('issue-tree');
+
+interface IssuesViewerProps {
+    issueTree: IIssuesTree;
+}
+
+const IssueTree = ({issueTree}: IssuesViewerProps) => {
+    const [collapsedIssues, setCollapsedIssues] = useState<Record<string, boolean>>({});
+
+    const renderTree = useCallback(
+        (data: IIssuesTree[]) => {
+            return data.map((item) => {
+                const {id} = item;
+                const {status, message, type, reasonsItems, level, ...rest} = item;
+
+                const isCollapsed =
+                    typeof collapsedIssues[id] === 'undefined' || collapsedIssues[id];
+
+                const toggleCollapsed = () => {
+                    setCollapsedIssues((collapsedIssues) => ({
+                        ...collapsedIssues,
+                        [id]: !isCollapsed,
+                    }));
+                };
+
+                return (
+                    <TreeView
+                        key={id}
+                        name={<IssueTreeItem status={status} message={message} type={type} />}
+                        collapsed={isCollapsed}
+                        hasArrow={true}
+                        onClick={toggleCollapsed}
+                        onArrowClick={toggleCollapsed}
+                        level={level - 1}
+                    >
+                        {renderInfoPanel(_omit(rest, ['reason']))}
+                        {renderTree(reasonsItems || [])}
+                    </TreeView>
+                );
+            });
+        },
+        [issueTree, collapsedIssues],
+    );
+
+    const renderInfoPanel = useCallback(
+        (info) => {
+            if (!info) {
+                return null;
+            }
+
+            return (
+                <div className={b('info-panel')}>
+                    <JSONTree
+                        data={info}
+                        search={false}
+                        isExpanded={() => true}
+                        className={b('inspector')}
+                    />
+                </div>
+            );
+        },
+        [issueTree],
+    );
+
+    return (
+        <div className={b()}>
+            <div className={b('block')}>{renderTree([issueTree])}</div>
+        </div>
+    );
+};
+
+export default IssueTree;

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.scss

@@ -0,0 +1,50 @@
+.issue-tree-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    height: 40px;
+
+    cursor: pointer;
+
+    &__field {
+        display: flex;
+        overflow: hidden;
+
+        &_status {
+            display: flex;
+
+            white-space: nowrap;
+        }
+        &_additional {
+            width: max-content;
+
+            cursor: pointer;
+
+            color: var(--yc-color-text-link);
+
+            &:hover {
+                color: var(--yc-color-text-link-hover);
+            }
+        }
+        &_message {
+            overflow: hidden;
+            flex-shrink: 0;
+
+            width: 300px;
+
+            white-space: normal;
+        }
+    }
+
+    &__field-tooltip {
+        &#{&} {
+            min-width: 500px;
+            max-width: 500px;
+        }
+    }
+
+    &__field-label {
+        color: var(--yc-color-text-secondary);
+    }
+}

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/IssueTreeItem.tsx

@@ -0,0 +1,25 @@
+import cn from 'bem-cn-lite';
+
+import EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
+
+import './IssueTreeItem.scss';
+
+const b = cn('issue-tree-item');
+
+interface IssueRowProps {
+    status: string;
+    message: string;
+    type: string;
+    onClick?: VoidFunction;
+}
+
+export const IssueTreeItem = ({status, message, type, onClick}: IssueRowProps) => {
+    return (
+        <div className={b()} onClick={onClick}>
+            <div className={b('field', {status: true})}>
+                <EntityStatus mode="icons" status={status} name={type} />
+            </div>
+            <div className={b('field', {message: true})}>{message}</div>
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Healthcheck/IssuesViewer/IssueTreeItem/index.ts

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

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

@@ -1,4 +1,3 @@
-import {useMemo} from 'react';
 import cn from 'bem-cn-lite';
 
 import {Button, Icon} from '@gravity-ui/uikit';
@@ -6,34 +5,28 @@ import {Button, Icon} from '@gravity-ui/uikit';
 import updateArrow from '../../../../../assets/icons/update-arrow.svg';
 
 import {SelfCheckResult} from '../../../../../types/api/healthcheck';
-import type {IHealthCheck} from '../../../../../types/store/healthcheck';
+import type {IIssuesTree} from '../../../../../types/store/healthcheck';
 
-import {IssuePreview} from '../IssuePreview';
+import {PreviewItem} from './PreviewItem';
 
 import i18n from '../i18n';
 
 const b = cn('healthcheck');
 
 interface PreviewProps {
-    data?: IHealthCheck;
+    selfCheckResult: SelfCheckResult;
+    issuesTrees?: IIssuesTree[];
     loading?: boolean;
-    onUpdate: VoidFunction;
     onShowMore?: (id: string) => void;
+    onUpdate: VoidFunction;
 }
 
 export const Preview = (props: PreviewProps) => {
-    const {data, loading, onShowMore, onUpdate} = props;
+    const {selfCheckResult, issuesTrees, loading, onShowMore, onUpdate} = props;
 
-    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
     const isStatusOK = selfCheckResult === SelfCheckResult.GOOD;
 
-    const issuesLog = data?.issue_log;
-    const firstLevelIssues = useMemo(
-        () => issuesLog?.filter(({level}) => level === 1),
-        [issuesLog],
-    );
-
-    if (!data) {
+    if (!issuesTrees) {
         return null;
     }
 
@@ -58,8 +51,12 @@ export const Preview = (props: PreviewProps) => {
             <div className={b('preview-content')}>
                 {isStatusOK
                     ? i18n('status_message.ok')
-                    : firstLevelIssues?.map((issue) => (
-                          <IssuePreview key={issue.id} data={issue} onShowMore={onShowMore} />
+                    : issuesTrees?.map((issueTree) => (
+                          <PreviewItem
+                              key={issueTree.id}
+                              data={issueTree}
+                              onShowMore={onShowMore}
+                          />
                       ))}
             </div>
         );

package/dist/containers/Tenant/Diagnostics/Healthcheck/{IssuePreview/IssuePreview.tsx → Preview/PreviewItem/PreviewItem.tsx}

@@ -2,19 +2,19 @@ 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 EntityStatus from '../../../../../../components/EntityStatus/EntityStatus';
+import {IssueLog} from '../../../../../../types/api/healthcheck';
 
-import i18n from '../i18n';
+import i18n from '../../i18n';
 
 const b = cn('healthcheck');
 
-interface IssuePreviewProps {
+interface PreviewItemProps {
     data?: IssueLog;
     onShowMore?: (id: string) => void;
 }
 
-export const IssuePreview = (props: IssuePreviewProps) => {
+export const PreviewItem = (props: PreviewItemProps) => {
     const {data, onShowMore} = props;
 
     if (!data) {
@@ -27,9 +27,7 @@ export const IssuePreview = (props: IssuePreviewProps) => {
             <Text as="div" color="secondary" variant="body-2">
                 {data.message}
             </Text>
-            <Link onClick={() => onShowMore && onShowMore(data.id)}>
-                {i18n('label.show-details')}
-            </Link>
+            <Link onClick={() => onShowMore?.(data.id)}>{i18n('label.show-details')}</Link>
         </div>
     );
 };

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

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

package/dist/containers/Tenant/Preview/Preview.scss

@@ -52,7 +52,13 @@
     &__result {
         overflow: auto;
 
+        // This fixes last row display for ordinary preview (not fullscreen)
         height: calc(100% - 40px);
         padding: 0 10px;
+
+        // Fix white space footer block for fullscreen preview
+        .kv-fullscreen & {
+            height: 100%;
+        }
     }
 }

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

@@ -54,8 +54,6 @@ export const RUN_ACTIONS = [
 
 const TABLE_SETTINGS = {
     sortable: false,
-    dynamicItemSizeGetter: () => 40,
-    dynamicRenderType: 'variable',
 };
 
 const EDITOR_OPTIONS = {
@@ -511,13 +509,7 @@ function QueryEditor(props) {
     };
 
     const renderControls = () => {
-        const {
-            executeQuery,
-            explainQuery,
-            savedQueries,
-            selectRunAction,
-            setSettingValue,
-        } = props;
+        const {executeQuery, explainQuery, savedQueries, selectRunAction, setSettingValue} = props;
         const {runAction} = executeQuery;
         const runIsDisabled = !executeQuery.input || executeQuery.loading;
         const runText = _.find(RUN_ACTIONS, {value: runAction}).content;

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -15,8 +15,8 @@
         }
         &_fullscreen {
             width: 100%;
-            margin-top: 0;
-            padding: 10px;
+            margin-top: 10px;
+            padding: 0 10px 10px;
         }
     }
 

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

@@ -3,10 +3,10 @@ import {useDispatch} from 'react-redux';
 
 import {NavigationTree} from 'ydb-ui-components';
 
-import {setCurrentSchemaPath, getSchema, preloadSchema} from '../../../../store/reducers/schema';
+import {setCurrentSchemaPath, getSchema, preloadSchemas} from '../../../../store/reducers/schema';
 import {getDescribe} from '../../../../store/reducers/describe';
 import {getSchemaAcl} from '../../../../store/reducers/schemaAcl';
-import type {EPathType} from '../../../../types/api/schema';
+import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
 import {mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
@@ -29,15 +29,15 @@ export function SchemaTree(props: SchemaTreeProps) {
             .then((data) => {
                 const {PathDescription: {Children = []} = {}} = data;
 
-                dispatch(preloadSchema(path, data));
+                const preloadedData: Record<string, TEvDescribeSchemeResult> = {
+                    [path]: data
+                };
 
-                return Children.map((childData) => {
+                const childItems = 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}}),
-                    );
+                    preloadedData[`${path}/${Name}`] = {PathDescription: {Self: childData}};
 
                     return {
                         name: Name,
@@ -47,6 +47,10 @@ export function SchemaTree(props: SchemaTreeProps) {
                         expandable: true,
                     };
                 });
+
+                dispatch(preloadSchemas(preloadedData));
+
+                return childItems;
             });
 
     const handleActivePathUpdate = (activePath: string) => {

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';
@@ -129,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 />

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;