ydb-embedded-ui 2.2.1 → 2.4.0

package/dist/containers/Storage/StorageGroups/StorageGroups.tsx

@@ -1,7 +1,9 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Icon, Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import shieldIcon from '../../../assets/icons/shield.svg';
 
 import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
@@ -25,6 +27,7 @@ import './StorageGroups.scss';
 
 enum TableColumnsIds {
     PoolName = 'PoolName',
+    Type = 'Type',
     GroupID = 'GroupID',
     Used = 'Used',
     Limit = 'Limit',
@@ -49,6 +52,7 @@ interface StorageGroupsProps {
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     PoolName: 'Pool Name',
+    Type: 'Type',
     GroupID: 'Group ID',
     Used: 'Used',
     Limit: 'Limit',
@@ -100,7 +104,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
                     <div className={b('pool-name-wrapper')}>
                         {splitted && (
                             <Popover
-                                content={<span className={b('tooltip')}>{value as string}</span>}
+                                content={value as string}
                                 placement={['right']}
                                 behavior={PopoverBehavior.Immediate}
                             >
@@ -114,6 +118,27 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.Type,
+            header: tableColumnsNames[TableColumnsIds.Type],
+            render: ({value, row}) => (
+                <>
+                    <Label>{value as string || '—'}</Label>
+                    {' '}
+                    {row.Encryption && (
+                        <Popover
+                            content={i18n('encrypted')}
+                            placement="right"
+                            behavior={PopoverBehavior.Immediate}
+                        >
+                            <Label>
+                                <Icon data={shieldIcon} />
+                            </Label>
+                        </Popover>
+                    )}
+                </>
+            ),
+        },
         {
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],

package/dist/containers/Storage/StorageGroups/i18n/en.json

@@ -2,5 +2,6 @@
     "empty.default": "No such groups",
     "empty.out_of_space": "No groups with out of space errors",
     "empty.degraded": "No degraded groups",
-    "show_all": "Show all groups"
+    "show_all": "Show all groups",
+    "encrypted": "Encrypted group"
 }

package/dist/containers/Storage/StorageGroups/i18n/ru.json

@@ -2,5 +2,6 @@
     "empty.default": "Нет групп",
     "empty.out_of_space": "Нет групп, в которых кончается место",
     "empty.degraded": "Нет деградировавших групп",
-    "show_all": "Показать все группы"
+    "show_all": "Показать все группы",
+    "encrypted": "Зашифрованная группа"
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -7,27 +7,29 @@
 
         min-width: 500px;
     }
-    &__pool-name-wrapper {
-        display: flex;
-        align-items: flex-end;
+    &__pdisks-item {
+        flex-grow: 1;
+
+        max-width: 200px;
+        margin-right: 10px;
+
+        &:last-child {
+            margin-right: 0px;
+        }
+    }
+    &__fqdn-wrapper {
+        width: 330px;
     }
-    &__pool-name {
+    &__fqdn {
         display: inline-block;
         overflow: hidden;
 
-        width: 330px;
         max-width: 330px;
 
+        vertical-align: top;
         text-overflow: ellipsis;
     }
     &__group-id {
         font-weight: 500;
     }
-    &__tooltip-wrapper {
-        display: flex;
-        align-items: center;
-    }
-    &__tooltip {
-        word-break: break-all;
-    }
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -1,9 +1,9 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
+
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
-//@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
@@ -75,13 +75,13 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
             width: 350,
             render: ({value}) => {
                 return (
-                    <div className={b('tooltip-wrapper')}>
+                    <div className={b('fqdn-wrapper')}>
                         <Popover
-                            content={<span className={b('tooltip')}>{value as string}</span>}
+                            content={value as string}
                             placement={['right']}
                             behavior={PopoverBehavior.Immediate}
                         >
-                            <span className={b('pool-name')}>{value as string}</span>
+                            <span className={b('fqdn')}>{value as string}</span>
                         </Popover>
                     </div>
                 );
@@ -108,7 +108,9 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
             render: ({value, row}) => (
                 <div className={b('pdisks-wrapper')}>
                     {_.map(value as any, (el) => (
-                        <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        <div className={b('pdisks-item')}>
+                            <Pdisk key={el.PDiskId} {...el} NodeId={row.NodeId} />
+                        </div>
                     ))}
                 </div>
             ),

package/dist/containers/Storage/Vdisk/Vdisk.js

@@ -1,17 +1,22 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
+
 import {Label, Popup} from '@gravity-ui/uikit';
 
-import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+import InternalLink from '../../../components/InternalLink/InternalLink';
+import {InfoViewer} from '../../../components/InfoViewer';
+
 import routes, {createHref} from '../../../routes';
 import {stringifyVdiskId, getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
-import {InfoViewer} from '../../../components/InfoViewer';
+import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
+
+import {STRUCTURE} from '../../Node/NodePages';
+
 import DiskStateProgressBar, {
     diskProgressColors,
 } from '../DiskStateProgressBar/DiskStateProgressBar';
-import {STRUCTURE} from '../../Node/NodePages';
 
 import {colorSeverity, NOT_AVAILABLE_SEVERITY} from '../utils';
 
@@ -225,33 +230,41 @@ function Vdisk(props) {
         const available = AvailableSize ? AvailableSize : PDisk?.AvailableSize;
 
         if (!available) {
-            return;
+            return undefined;
         }
-        return !isNaN(Number(AllocatedSize))
-            ? (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize))
-            : undefined;
+
+        return isNaN(Number(AllocatedSize))
+            ? undefined
+            : (Number(AllocatedSize) * 100) / (Number(available) + Number(AllocatedSize));
     }, [props.AllocatedSize, props.AvailableSize, props.PDisk?.AvailableSize]);
 
     return (
         <React.Fragment>
             {renderPopup()}
             <div className={b()} ref={anchor} onMouseEnter={showPopup} onMouseLeave={hidePopup}>
-                <DiskStateProgressBar
-                    diskAllocatedPercent={vdiskAllocatedPercent}
-                    severity={severity}
-                    href={
-                        props.NodeId
-                            ? createHref(
-                                routes.node,
-                                {id: props.NodeId, activeTab: STRUCTURE},
-                                {
-                                    pdiskId: props.PDisk?.PDiskId,
-                                    vdiskId: stringifyVdiskId(props.VDiskId),
-                                },
-                            )
-                            : undefined
-                    }
-                />
+                {props.NodeId ? (
+                    <InternalLink
+                        to={createHref(
+                            routes.node,
+                            {id: props.NodeId, activeTab: STRUCTURE},
+                            {
+                                pdiskId: props.PDisk?.PDiskId,
+                                vdiskId: stringifyVdiskId(props.VDiskId),
+                            },
+                        )}
+                        className={b('content')}
+                    >
+                        <DiskStateProgressBar
+                            diskAllocatedPercent={vdiskAllocatedPercent}
+                            severity={severity}
+                        />
+                    </InternalLink>
+                ) : (
+                    <DiskStateProgressBar
+                        diskAllocatedPercent={vdiskAllocatedPercent}
+                        severity={severity}
+                    />
+                )}
             </div>
         </React.Fragment>
     );

package/dist/containers/Storage/Vdisk/Vdisk.scss

@@ -1,4 +1,10 @@
 .vdisk-storage {
+    border-radius: 4px; // to match interactive area with disk shape
+
+    &__content {
+        border-radius: 4px; // to match interactive area with disk shape
+    }
+
     &__popup-wrapper {
         padding: 12px;
 

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.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';
@@ -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';
@@ -53,9 +54,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 +80,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) {
@@ -148,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>;
             }
@@ -185,6 +192,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/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;
     }