ydb-embedded-ui 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [2.4.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.3.0...v2.4.0) (2022-10-27)
+
+
+### Features
+
+* **Diagnostics:** add consumers tab for topics ([4bb801c](https://github.com/ydb-platform/ydb-embedded-ui/commit/4bb801c0ef19dcda227c59e464b08f5e8f284c38))
+
+
+### Bug Fixes
+
+* add checks for fetch failure with no errors ([2c55107](https://github.com/ydb-platform/ydb-embedded-ui/commit/2c55107a7b47b3540ed0af66630ff85591f269a1))
+* **Nodes:** display access denied on 403 ([7832afe](https://github.com/ydb-platform/ydb-embedded-ui/commit/7832afee601a40fc8b75f83bf0ed18b01c798d71))
+* **QueryResult:** fix table display in fullscreen ([98674db](https://github.com/ydb-platform/ydb-embedded-ui/commit/98674db26b5fb09ac0d039a7779ae0c58951adde))
+* **QueryResultTable:** make preview display all rows ([0ac83d0](https://github.com/ydb-platform/ydb-embedded-ui/commit/0ac83d0258b0d0d3d2e14c06be096fe5ddce02da))
+* **Storage:** display access denied on 403 ([6d20333](https://github.com/ydb-platform/ydb-embedded-ui/commit/6d2033378956a54f05190905b0d537c6bd6c9851))
+* **TabletsFilters:** display access denied on 403 ([018be19](https://github.com/ydb-platform/ydb-embedded-ui/commit/018be199602123f1d90e58c0b95545f6accc41fb))
+
 ## [2.3.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.2.1...v2.3.0) (2022-10-24)
 
 

package/dist/components/Errors/403/AccessDenied.tsx

@@ -0,0 +1,19 @@
+import EmptyState from '../../EmptyState/EmptyState';
+import {Illustration} from '../../Illustration';
+
+import i18n from '../i18n';
+
+interface AccessDeniedProps {
+    title?: string;
+    description?: string;
+}
+
+export const AccessDenied = ({title, description}: AccessDeniedProps) => {
+    return (
+        <EmptyState
+            image={<Illustration name="403" />}
+            title={title || i18n('403.title')}
+            description={description || i18n('403.description')}
+        />
+    );
+};

package/dist/components/Errors/403/index.ts

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

package/dist/components/Errors/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "403.title": "Access denied",
+  "403.description": "You don’t have the necessary roles to view this page."
+}

package/dist/components/Errors/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-errors-access-denied';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/components/Errors/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "403.title": "Доступ запрещен",
+  "403.description": "У вас недостаточно прав для просмотра данной страницы."
+}

package/dist/components/QueryResultTable/QueryResultTable.tsx

@@ -17,6 +17,8 @@ import './QueryResultTable.scss';
 const TABLE_SETTINGS: Settings = {
     ...DEFAULT_TABLE_SETTINGS,
     stripedRows: true,
+    dynamicRenderType: 'variable',
+    dynamicItemSizeGetter: () => 40,
 };
 
 export const b = cn('ydb-query-result-table');
@@ -53,7 +55,7 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
         const column: Column<KeyValueRow> = {
             name,
             align: isNumeric(data[0][name]) ? DataTable.RIGHT : DataTable.LEFT,
-            sortAccessor: (row) => isNumeric(row[name]) ? Number(row[name]) : row[name],
+            sortAccessor: (row) => (isNumeric(row[name]) ? Number(row[name]) : row[name]),
             render: ({value}) => <Cell value={value as string} />,
         };
 
@@ -61,31 +63,28 @@ const prepareGenericColumns = (data: KeyValueRow[]) => {
     });
 };
 
-const getRowIndex = (_: unknown, index: number) => index
+const getRowIndex = (_: unknown, index: number) => index;
 
-interface QueryResultTableProps extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
+interface QueryResultTableProps
+    extends Omit<DataTableProps<KeyValueRow>, 'data' | 'columns' | 'theme'> {
     data?: KeyValueRow[];
     columns?: ColumnType[];
 }
 
 export const QueryResultTable = (props: QueryResultTableProps) => {
-    const {
-        columns: rawColumns,
-        data: rawData,
-        settings: settingsMix,
-        ...restProps
-    } = props;
+    const {columns: rawColumns, data: rawData, settings: settingsMix, ...restProps} = props;
 
     const data = useMemo(() => prepareQueryResponse(rawData), [rawData]);
     const columns = useMemo(() => {
-        return rawColumns ?
-            prepareTypedColumns(rawColumns) :
-            prepareGenericColumns(data);
+        return rawColumns ? prepareTypedColumns(rawColumns) : prepareGenericColumns(data);
     }, [data, rawColumns]);
-    const settings = useMemo(() => ({
-        ...TABLE_SETTINGS,
-        ...settingsMix,
-    }), [settingsMix]);
+    const settings = useMemo(
+        () => ({
+            ...TABLE_SETTINGS,
+            ...settingsMix,
+        }),
+        [settingsMix],
+    );
 
     // empty data is expected to be be an empty array
     // undefined data is not rendered at all
@@ -94,11 +93,7 @@ export const QueryResultTable = (props: QueryResultTableProps) => {
     }
 
     if (!columns.length) {
-        return (
-            <div className={b('message')}>
-                {i18n('empty')}
-            </div>
-        );
+        return <div className={b('message')}>{i18n('empty')}</div>;
     }
 
     return (

package/dist/{containers/Storage/StorageFilter/StorageFilter.tsx → components/Search/Search.tsx}

@@ -1,28 +1,28 @@
-import {useEffect, useRef, useState} from 'react';
+import {useRef, useEffect, useState} from 'react';
 
 import {TextInput} from '@gravity-ui/uikit';
 
-interface StorageFilterProps {
-    className?: string;
+interface SearchProps {
+    onChange: (value: string) => void;
     value?: string;
-    placeholder?: string;
-    onChange?: (value: string) => void;
+    className?: string;
     debounce?: number;
+    placeholder?: string;
 }
 
-export const StorageFilter = (props: StorageFilterProps) => {
-    const {
-        className,
-        value = '',
-        placeholder,
-        onChange,
-        debounce = 200,
-    } = props;
-    const [filterValue, setFilterValue] = useState(value);
+export const Search = ({
+    onChange,
+    value = '',
+    className,
+    debounce = 200,
+    placeholder,
+}: SearchProps) => {
+    const [searchValue, setSearchValue] = useState<string>(value);
+
     const timer = useRef<number>();
 
     useEffect(() => {
-        setFilterValue((prevValue) => {
+        setSearchValue((prevValue) => {
             if (prevValue !== value) {
                 return value;
             }
@@ -31,8 +31,8 @@ export const StorageFilter = (props: StorageFilterProps) => {
         });
     }, [value]);
 
-    const changeFilter = (newValue: string) => {
-        setFilterValue(newValue);
+    const onSearchValueChange = (newValue: string) => {
+        setSearchValue(newValue);
 
         window.clearTimeout(timer.current);
         timer.current = window.setTimeout(() => {
@@ -42,12 +42,12 @@ export const StorageFilter = (props: StorageFilterProps) => {
 
     return (
         <TextInput
-            className={className}
-            placeholder={placeholder}
-            value={filterValue}
-            onUpdate={changeFilter}
             hasClear
             autoFocus
+            className={className}
+            placeholder={placeholder}
+            value={searchValue}
+            onUpdate={onSearchValueChange}
         />
     );
-}
+};

package/dist/components/Search/index.ts

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

package/dist/containers/Nodes/Nodes.js

@@ -8,6 +8,7 @@ import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
@@ -164,6 +165,10 @@ class Nodes extends React.Component {
         if (loading && !wasLoaded) {
             return Nodes.renderLoader();
         } else if (error) {
+            if (error.status === 403) {
+                return <AccessDenied />;
+            }
+
             return <div>{error.statusText}</div>;
         } else {
             return this.renderContent();

package/dist/containers/Storage/Storage.js

@@ -5,10 +5,11 @@ import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
 import {RadioButton, Label} from '@gravity-ui/uikit';
 
-import {StorageFilter} from './StorageFilter';
+import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {
     getStorageInfo,
@@ -236,7 +237,7 @@ class Storage extends React.Component {
         return (
             <div className={b('controls')}>
                 <div className={b('search')}>
-                    <StorageFilter
+                    <Search
                         placeholder={
                             storageType === StorageTypes.groups
                                 ? 'Group ID, Pool name'
@@ -287,10 +288,17 @@ class Storage extends React.Component {
         const {loading, wasLoaded, error} = this.props;
         const showLoader = loading && !wasLoaded;
 
+        if (error) {
+            if (error.status === 403) {
+                return <AccessDenied />;
+            }
+
+            return <div className={b()}>{error.statusText}</div>;
+        }
+
         return (
             <div className={b()}>
                 {this.renderControls()}
-                {error && <div>{error.statusText}</div>}
                 {showLoader ? this.renderLoader() : this.renderDataTable()}
             </div>
         );

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -9,6 +9,7 @@ import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';
+import {AccessDenied} from '../../components/Errors/403';
 
 import {TABLET_COLOR_TO_STATES, TABLETS_STATES} from '../../utils/constants';
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
@@ -212,6 +213,10 @@ class TabletsFilters extends React.Component {
         if (loading && !wasLoaded) {
             return TabletsFilters.renderLoader();
         } else if (error && typeof error === 'object') {
+            if (error.status === 403) {
+                return <AccessDenied />;
+            }
+
             return <div>{error.statusText}</div>;
         } else {
             return this.renderContent();

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

@@ -0,0 +1,6 @@
+.ydb-consumers {
+    &__search {
+        width: 200px;
+        margin-bottom: 20px;
+    }
+}

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

@@ -0,0 +1,82 @@
+import {useEffect, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import block from 'bem-cn-lite';
+
+import DataTable, {Column} from '@yandex-cloud/react-data-table';
+
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {useAutofetcher} from '../../../../utils/hooks';
+import {Search} from '../../../../components/Search';
+import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
+
+import i18n from './i18n';
+
+import './Consumers.scss';
+
+const b = block('ydb-consumers');
+
+interface ConsumersProps {
+    path: string;
+}
+
+export const Consumers = ({path}: ConsumersProps) => {
+    const dispath = useDispatch();
+
+    const fetchData = () => {
+        dispath(getDescribe({path}));
+    };
+
+    useAutofetcher(fetchData, [path]);
+
+    const consumers = useSelector((state) => selectConsumers(state, path));
+
+    const [consumersToRender, setConsumersToRender] = useState(consumers);
+
+    useEffect(() => {
+        setConsumersToRender(consumers);
+    }, [consumers]);
+
+    const filterConsumersByName = (search: string) => {
+        const filteredConsumers = search
+            ? consumers.filter((consumer) => {
+                  const re = new RegExp(search, 'i');
+                  return re.test(consumer.name);
+              })
+            : consumers;
+
+        setConsumersToRender(filteredConsumers);
+    };
+
+    const handleSearch = (value: string) => {
+        filterConsumersByName(value);
+    };
+
+    const columns: Column<any>[] = [
+        {
+            name: 'name',
+            header: i18n('table.columns.consumerName'),
+            width: 200,
+        },
+    ];
+
+    if (consumers.length === 0) {
+        return <div>{i18n('noConsumersMessage')}</div>;
+    }
+
+    return (
+        <div className={b()}>
+            <Search
+                onChange={handleSearch}
+                placeholder={i18n('search.placeholder')}
+                className={b('search')}
+            />
+            <DataTable
+                theme="yandex-cloud"
+                settings={DEFAULT_TABLE_SETTINGS}
+                columns={columns}
+                data={consumersToRender}
+                emptyDataMessage={i18n('table.emptyDataMessage')}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/en.json

@@ -0,0 +1,6 @@
+{
+  "search.placeholder": "Consumer name",
+  "table.emptyDataMessage": "No consumers match the current search",
+  "table.columns.consumerName": "Consumer",
+  "noConsumersMessage": "This topic has no consumers"
+}

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-consumers';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/Consumers/i18n/ru.json

@@ -0,0 +1,6 @@
+{
+  "search.placeholder": "Название читателя",
+  "table.emptyDataMessage": "По заданному поиску нет читателей",
+  "table.columns.consumerName": "Читатель",
+  "noConsumersMessage": "У этого топика нет читателей"
+}

package/dist/containers/Tenant/Diagnostics/Consumers/index.ts

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

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

@@ -27,6 +27,7 @@ import Heatmap from '../../Heatmap/Heatmap';
 import Compute from './Compute/Compute';
 //@ts-ignore
 import Tablets from '../../Tablets/Tablets';
+import {Consumers} from './Consumers';
 
 import routes, {createHref} from '../../../routes';
 import type {EPathType} from '../../../types/api/schema';
@@ -151,6 +152,9 @@ function Diagnostics(props: DiagnosticsProps) {
             case GeneralPagesIds.graph: {
                 return <Heatmap path={currentItem.Path} />;
             }
+            case GeneralPagesIds.consumers: {
+                return <Consumers path={currentItem.Path} />;
+            }
             default: {
                 return <div>No data...</div>;
             }

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -1,4 +1,4 @@
-import {EPathType} from "../../../types/api/schema";
+import {EPathType} from '../../../types/api/schema';
 
 export enum GeneralPagesIds {
     'overview' = 'Overview',
@@ -11,11 +11,12 @@ export enum GeneralPagesIds {
     'describe' = 'Describe',
     'hotKeys' = 'hotKeys',
     'graph' = 'graph',
+    'consumers' = 'consumers',
 }
 
 type Page = {
-    id: GeneralPagesIds,
-    title: string,
+    id: GeneralPagesIds;
+    title: string;
 };
 
 const overview = {
@@ -66,6 +67,11 @@ const graph = {
     title: 'Graph',
 };
 
+const consumers = {
+    id: GeneralPagesIds.consumers,
+    title: 'Consumers',
+};
+
 export const DATABASE_PAGES = [
     overview,
     topQueries,
@@ -81,7 +87,8 @@ export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, descri
 
 export const DIR_PAGES = [overview, topShards, describe];
 
-export const TOPIC_PAGES = [overview, describe];
+export const CDC_STREAM_PAGES = [overview, describe];
+export const TOPIC_PAGES = [overview, consumers, describe];
 
 // verbose mapping to guarantee correct tabs for new path types
 // TS will error when a new type is added but not mapped here
@@ -97,10 +104,10 @@ const pathTypeToPages: Record<EPathType, Page[] | undefined> = {
 
     [EPathType.EPathTypeDir]: DIR_PAGES,
     [EPathType.EPathTypeTableIndex]: DIR_PAGES,
-    
-    [EPathType.EPathTypeCdcStream]: TOPIC_PAGES,
+
+    [EPathType.EPathTypeCdcStream]: CDC_STREAM_PAGES,
+
     [EPathType.EPathTypePersQueueGroup]: TOPIC_PAGES,
 };
 
-export const getPagesByType = (type?: EPathType) =>
-    (type && pathTypeToPages[type]) || DIR_PAGES;
+export const getPagesByType = (type?: EPathType) => (type && pathTypeToPages[type]) || DIR_PAGES;

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

@@ -0,0 +1,55 @@
+import cn from 'bem-cn-lite';
+
+import {Button, Icon} from '@gravity-ui/uikit';
+
+import updateArrow from '../../../../../assets/icons/update-arrow.svg';
+
+import type {IIssuesTree} from '../../../../../types/store/healthcheck';
+
+import IssueTree from '../IssuesViewer/IssueTree';
+
+import i18n from '../i18n';
+
+const b = cn('healthcheck');
+
+interface DetailsProps {
+    issueTree?: IIssuesTree;
+    loading?: boolean;
+    onUpdate: VoidFunction;
+}
+
+export const Details = (props: DetailsProps) => {
+    const {loading, onUpdate, issueTree} = props;
+
+    if (!issueTree) {
+        return null;
+    }
+
+    const renderHealthcheckHeader = () => {
+        return (
+            <div className={b('details-header')}>
+                <h3 className={b('details-header-title')}>{i18n('title.healthcheck')}</h3>
+                <div className={b('details-header-update')}>
+                    <Button size="s" onClick={onUpdate} loading={loading} view="flat-secondary">
+                        <Icon data={updateArrow} height={20} width={20} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
+    const renderHealthcheckIssues = () => {
+        return (
+            <div className={b('issues-wrapper')}>
+                <IssueTree issueTree={issueTree} />
+            </div>
+        );
+    };
+
+    return (
+        <div className={b('details')}>
+            {renderHealthcheckHeader()}
+            {renderHealthcheckIssues()}
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/Healthcheck/Details/index.ts

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

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

@@ -7,7 +7,7 @@
     // Thus we will get rid of unneeded layout shift when scrollbar appear
     min-width: 885px;
 
-    &__issues-list {
+    &__details {
         padding: 25px 20px 20px;
     }
 
@@ -15,7 +15,7 @@
         margin-bottom: 15px;
     }
 
-    &__issues {
+    &__issues-wrapper {
         overflow-x: hidden;
         overflow-y: auto;
 
@@ -32,20 +32,20 @@
         padding: 15px 0;
     }
 
-    &__issues-list-header {
+    &__details-header {
         display: flex;
         align-items: center;
 
         margin-bottom: 20px;
     }
 
-    &__issues-list-header-title {
+    &__details-header-title {
         margin: 0 10px 0 0;
 
         @include text-header-1();
     }
 
-    &__issues-list-header-update {
+    &__details-header-update {
         margin-left: 10px;
     }
 

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

@@ -4,10 +4,15 @@ import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import {getHealthcheckInfo} from '../../../../store/reducers/healthcheckInfo';
+import {SelfCheckResult} from '../../../../types/api/healthcheck';
+import {
+    getHealthcheckInfo,
+    selectIssuesTreeById,
+    selectIssuesTreesRoots,
+} from '../../../../store/reducers/healthcheckInfo';
 import {useAutofetcher} from '../../../../utils/hooks';
 
-import {IssuesList} from './IssuesList';
+import {Details} from './Details';
 import {Preview} from './Preview';
 
 import i18n from './i18n';
@@ -29,6 +34,11 @@ export const Healthcheck = (props: HealthcheckProps) => {
     const dispatch = useDispatch();
 
     const {data, loading, wasLoaded, error} = useSelector((state: any) => state.healthcheckInfo);
+    const selfCheckResult = data?.self_check_result || SelfCheckResult.UNSPECIFIED;
+
+    const issuesTreesRoots = useSelector(selectIssuesTreesRoots);
+    const expandedIssueTree = useSelector((state) => selectIssuesTreeById(state, expandedIssueId));
+
     const {autorefresh} = useSelector((state: any) => state.schema);
 
     const fetchHealthcheck = useCallback(() => {
@@ -61,15 +71,15 @@ export const Healthcheck = (props: HealthcheckProps) => {
         if (data && data['self_check_result']) {
             return preview ? (
                 <Preview
-                    data={data}
+                    issuesTrees={issuesTreesRoots}
+                    selfCheckResult={selfCheckResult}
                     loading={loading}
                     onShowMore={showMoreHandler}
                     onUpdate={fetchHealthcheck}
                 />
             ) : (
-                <IssuesList
-                    data={data}
-                    expandedIssueId={expandedIssueId}
+                <Details
+                    issueTree={expandedIssueTree}
                     loading={loading}
                     onUpdate={fetchHealthcheck}
                 />