ydb-embedded-ui 1.14.2 → 2.1.0

package/dist/containers/Heatmap/Heatmap.js

@@ -8,7 +8,7 @@ import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 import {COLORS_RANGE_SIZE, getColorRange, getColorIndex, getCurrentMetricLimits} from './util';
 import {formatNumber} from '../../utils';
 
-import {Loader, Checkbox, Select} from '@yandex-cloud/uikit';
+import {Loader, Checkbox, Select} from '@gravity-ui/uikit';
 import {HeatmapCanvas} from './HeatmapCanvas/HeatmapCanvas';
 import {Histogram} from './Histogram/Histogram';
 import {AutoFetcher} from '../../utils/autofetcher';

package/dist/containers/Node/Node.tsx

@@ -4,7 +4,7 @@ import cn from 'bem-cn-lite';
 import {useDispatch, useSelector} from 'react-redux';
 import _ from 'lodash';
 
-import {Tabs} from '@yandex-cloud/uikit';
+import {Tabs} from '@gravity-ui/uikit';
 import {Link} from 'react-router-dom';
 
 import {TABLETS, STORAGE, NODE_PAGES, OVERVIEW, STRUCTURE} from './NodePages';

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -2,7 +2,7 @@ import {useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 
-import {ArrowToggle, Button, Popover} from '@yandex-cloud/uikit';
+import {ArrowToggle, Button, Popover} from '@gravity-ui/uikit';
 
 import DataTable, {Column, Settings} from '@yandex-cloud/react-data-table';
 

package/dist/containers/Nodes/Nodes.js

@@ -4,9 +4,10 @@ import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader, TextInput, Label} from '@yandex-cloud/uikit';
+import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {Illustration} from '../../components/Illustration';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
@@ -86,6 +87,7 @@ class Nodes extends React.Component {
                     text={searchQuery}
                     onUpdate={this.handleSearchQueryChange}
                     hasClear
+                    autoFocus
                 />
                 <ProblemFilter value={filter} onChange={this.handleFilterChange} />
                 <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
@@ -125,7 +127,7 @@ class Nodes extends React.Component {
 
         if (preparedNodes.length === 0) {
             if (filter !== ALL) {
-                return <div className="no-problem" />;
+                return <Illustration name="thumbsUp" width="200" />;
             }
         }
 

package/dist/containers/Pdisk/Pdisk.js

@@ -5,7 +5,7 @@ import qs from 'qs';
 import {connect} from 'react-redux';
 
 import {Link} from 'react-router-dom';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import InfoViewer from '../../components/InfoViewer/InfoViewer';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';

package/dist/containers/Pool/Pool.js

@@ -4,13 +4,14 @@ import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
 import _ from 'lodash';
 
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import GroupTreeViewer from '../../components/GroupTreeViewer/GroupTreeViewer';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {Illustration} from '../../components/Illustration';
 
 import {getPoolInfo} from '../../store/reducers/pool';
 import {AUTO_RELOAD_INTERVAL, ALL} from '../../utils/constants';
@@ -119,7 +120,7 @@ class Pool extends React.Component {
                     </div>
 
                     {filteredGroups.length === 0 ? (
-                        <div className="no-problem" />
+                        <Illustration name="thumbsUp" width="200" />
                     ) : (
                         <ReactList
                             itemRenderer={this.makeRenderGroups(filteredGroups)}

package/dist/containers/ReduxTooltip/ReduxTooltip.js

@@ -1,7 +1,7 @@
 import React, {useEffect} from 'react';
 import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
-import {Popup, useVirtualElementRef} from '@yandex-cloud/uikit';
+import {Popup, useVirtualElementRef} from '@gravity-ui/uikit';
 
 import {hideTooltip} from '../../store/reducers/tooltip';
 

package/dist/containers/Storage/EmptyFilter/EmptyFilter.tsx

@@ -0,0 +1,34 @@
+import {Button} from '@gravity-ui/uikit';
+
+import EmptyState from '../../../components/EmptyState/EmptyState';
+import {Illustration} from '../../../components/Illustration';
+
+import i18n from './i18n';
+
+interface EmptyFilterProps {
+    title: string;
+    message?: string;
+    showAll?: string;
+    onShowAll?: VoidFunction;
+}
+
+export const EmptyFilter = ({
+    title,
+    message = i18n('default_message'),
+    showAll = i18n('default_button_label'),
+    onShowAll,
+}: EmptyFilterProps) => (
+    <EmptyState
+        image={<Illustration name="thumbsUp" />}
+        title={title}
+        description={message}
+        actions={onShowAll && [
+            <Button
+                key="show-all"
+                onClick={onShowAll}
+            >
+                {showAll}
+            </Button>
+        ]}
+    />
+);

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

@@ -0,0 +1,4 @@
+{
+    "default_message": "Everything is fine!",
+    "default_button_label": "Show All"
+}

package/dist/containers/Storage/EmptyFilter/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-storage-empty-filter';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,4 @@
+{
+    "default_message": "Всё в порядке!",
+    "default_button_label": "Показать все"
+}

package/dist/containers/Storage/Pdisk/Pdisk.tsx

@@ -1,6 +1,6 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import cn from 'bem-cn-lite';
-import {Popup} from '@yandex-cloud/uikit';
+import {Popup} from '@gravity-ui/uikit';
 
 import type {RequiredField} from '../../../types';
 //@ts-ignore

package/dist/containers/Storage/Storage.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import DataTable from '@yandex-cloud/react-data-table';
-import {RadioButton, Label} from '@yandex-cloud/uikit';
+import {RadioButton, Label} from '@gravity-ui/uikit';
 
 import {StorageFilter} from './StorageFilter';
 import {UsageFilter} from './UsageFilter';
@@ -186,6 +186,7 @@ class Storage extends React.Component {
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
                         nodes={nodes}
+                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
                     />
                 )}
                 {storageType === StorageTypes.nodes && (
@@ -193,6 +194,7 @@ class Storage extends React.Component {
                         visibleEntities={visibleEntities}
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
+                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
                     />
                 )}
             </div>

package/dist/containers/Storage/StorageFilter/StorageFilter.tsx

@@ -1,6 +1,6 @@
 import {useEffect, useRef, useState} from 'react';
 
-import {TextInput} from '@yandex-cloud/uikit';
+import {TextInput} from '@gravity-ui/uikit';
 
 interface StorageFilterProps {
     className?: string;
@@ -47,6 +47,7 @@ export const StorageFilter = (props: StorageFilterProps) => {
             value={filterValue}
             onUpdate={changeFilter}
             hasClear
+            autoFocus
         />
     );
 }

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

@@ -1,7 +1,7 @@
 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 '@yandex-cloud/uikit';
+import {Label, Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
@@ -16,9 +16,11 @@ import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import {stringifyVdiskId} from '../../../utils';
 import {getUsage, isFullDonorData} from '../../../utils/storage';
 
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import Vdisk from '../Vdisk/Vdisk';
 import {getDegradedSeverity, getUsageSeverity} from '../utils';
 
+import i18n from './i18n';
 import './StorageGroups.scss';
 
 enum TableColumnsIds {
@@ -42,6 +44,7 @@ interface StorageGroupsProps {
     nodes: any;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
+    onShowAll?: VoidFunction;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -85,7 +88,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGroupsProps) {
+function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}: StorageGroupsProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.PoolName,
@@ -253,17 +256,35 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
     ];
 
     let columns = allColumns;
-    let emptyMessage = 'No such groups.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No groups with out of space errors.';
+
+        if (!data.length) {
+            return (
+                <EmptyFilter
+                    title={i18n('empty.out_of_space')}
+                    showAll={i18n('show_all')}
+                    onShowAll={onShowAll}
+                />
+            );
+        }
     }
 
     if (visibleEntities === VisibleEntities.Missing) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.UsedSpaceFlag);
-        emptyMessage = 'No degraded groups.';
+
+        if (!data.length) {
+            return (
+                <EmptyFilter
+                    title={i18n('empty.degraded')}
+                    showAll={i18n('show_all')}
+                    onShowAll={onShowAll}
+                />
+            );
+        }
     }
+
     return data ? (
         <DataTable
             key={visibleEntities as string}
@@ -272,7 +293,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes}: StorageGro
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage={emptyMessage}
+            emptyDataMessage={i18n('empty.default')}
         />
     ) : null;
 }

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

@@ -0,0 +1,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"
+}

package/dist/containers/Storage/StorageGroups/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-storage-groups';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

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

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

@@ -1,11 +1,15 @@
 import _ from 'lodash';
 import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
-import {Popover, PopoverBehavior} from '@yandex-cloud/uikit';
+import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
+
+import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import Pdisk from '../Pdisk/Pdisk';
 
+import i18n from './i18n';
 import './StorageNodes.scss';
 
 enum TableColumnsIds {
@@ -19,11 +23,12 @@ enum TableColumnsIds {
 type TableColumnsIdsKeys = keyof typeof TableColumnsIds;
 type TableColumnsIdsValues = typeof TableColumnsIds[TableColumnsIdsKeys];
 
-interface StorageGroupsProps {
+interface StorageNodesProps {
     data: any;
     nodes: any;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
+    onShowAll?: VoidFunction;
 }
 
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
@@ -56,7 +61,7 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps) {
+function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: StorageNodesProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.NodeId,
@@ -114,14 +119,26 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
     ];
 
     let columns = allColumns;
-    let emptyMessage = 'No such nodes.';
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-        emptyMessage = 'No nodes with out of space errors.';
+
+        return (
+            <EmptyFilter
+                title={i18n('empty.out_of_space')}
+                showAll={i18n('show_all')}
+                onShowAll={onShowAll}
+            />
+        );
     }
     if (visibleEntities === VisibleEntities.Missing) {
-        emptyMessage = 'No degraded nodes.';
+        return (
+            <EmptyFilter
+                title={i18n('empty.degraded')}
+                showAll={i18n('show_all')}
+                onShowAll={onShowAll}
+            />
+        );
     }
 
     return data ? (
@@ -132,7 +149,7 @@ function StorageNodes({data, tableSettings, visibleEntities}: StorageGroupsProps
             columns={columns}
             settings={tableSettings}
             initialSortOrder={setSortOrder(visibleEntities)}
-            emptyDataMessage={emptyMessage}
+            emptyDataMessage={i18n('empty.default')}
         />
     ) : null;
 }

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

@@ -0,0 +1,6 @@
+{
+    "empty.default": "No such nodes",
+    "empty.out_of_space": "No nodes with out of space errors",
+    "empty.degraded": "No degraded nodes",
+    "show_all": "Show all nodes"
+}

package/dist/containers/Storage/StorageNodes/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-storage-nodes';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

@@ -0,0 +1,6 @@
+{
+    "empty.default": "Нет узлов",
+    "empty.out_of_space": "Нет узлов, в которых кончается место",
+    "empty.degraded": "Нет деградировавших узлов",
+    "show_all": "Показать все узлы"
+}

package/dist/containers/Storage/UsageFilter/UsageFilter.tsx

@@ -1,7 +1,7 @@
 import {useEffect, useMemo, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 
-import {Select, SelectOption} from '@yandex-cloud/uikit';
+import {Select, SelectOption} from '@gravity-ui/uikit';
 
 import EntityStatus from "../../../components/EntityStatus/EntityStatus";
 

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

@@ -1,7 +1,7 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import {Label, Popup} from '@yandex-cloud/uikit';
+import {Label, Popup} from '@gravity-ui/uikit';
 
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import routes, {createHref} from '../../../routes';

package/dist/containers/Tablet/Tablet.js

@@ -15,7 +15,7 @@ import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import {Tag} from '../../components/Tag/Tag';
 import Icon from '../../components/Icon/Icon';
 import EmptyState from '../../components/EmptyState/EmptyState';
-import {Link as ExternalLink, Button, Loader} from '@yandex-cloud/uikit';
+import {Link as ExternalLink, Button, Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 import CriticalActionDialog from '../../components/CriticalActionDialog/CriticalActionDialog';
 import routes, {createHref} from '../../routes';

package/dist/containers/Tablets/Tablets.js

@@ -12,7 +12,7 @@ import {
 import {showTooltip, hideTooltip} from '../../store/reducers/tooltip';
 
 import Tablet from '../../components/Tablet/Tablet';
-import {Loader, Select} from '@yandex-cloud/uikit';
+import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 import {AutoFetcher} from '../../utils/autofetcher';
 

package/dist/containers/TabletsFilters/TabletsFilters.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import qs from 'qs';
 import _ from 'lodash';
 
-import {Loader, Select} from '@yandex-cloud/uikit';
+import {Loader, Select} from '@gravity-ui/uikit';
 import ReactList from 'react-list';
 
 import Tablet from '../../components/Tablet/Tablet';

package/dist/containers/Tenant/Acl/Acl.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
 

package/dist/containers/Tenant/Diagnostics/Compute/Compute.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import {withRouter} from 'react-router-dom';
 import qs from 'qs';
 
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 
 import NodesViewer from '../../../../components/NodesViewer/NodesViewer';
 

package/dist/containers/Tenant/Diagnostics/Describe/Describe.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 import {connect} from 'react-redux';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
 import {getDescribe} from '../../../../store/reducers/describe';

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

@@ -2,14 +2,13 @@ import React, {useState} from 'react';
 import {useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import {Button, Modal} from '@yandex-cloud/uikit';
+import {Button, Modal} from '@gravity-ui/uikit';
 
 import type {EPathType} from '../../../../types/api/schema';
 //@ts-ignore
 import Icon from '../../../../components/Icon/Icon';
 import Overview from '../Overview/Overview';
-//@ts-ignore
-import Healthcheck from '../Healthcheck/Healthcheck';
+import {Healthcheck} from '../Healthcheck';
 //@ts-ignore
 import TenantOverview from '../TenantOverview/TenantOverview';
 
@@ -42,7 +41,7 @@ function DetailedOverview(props: DetailedOverviewProps) {
     const renderModal = () => {
         return (
             <Modal open={isModalVisible} onClose={closeModalHandler} className={b('modal')}>
-                <Healthcheck tenant={props.tenantName} />
+                <Healthcheck tenant={props.tenantName} fetchData={false} />
                 <Button
                     className={b('close-modal-button')}
                     onClick={closeModalHandler}

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 '@yandex-cloud/uikit';
+import {Switch, Tabs} from '@gravity-ui/uikit';
 
 //@ts-ignore
 import TopQueries from './TopQueries/TopQueries';

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

@@ -2,7 +2,13 @@
 @import '../../../../styles/mixins.scss';
 
 .healthcheck {
-    padding: 25px 20px 20px;
+    &__issues-list {
+        padding: 25px 20px 20px;
+    }
+
+    &__issue-preview {
+        margin-bottom: 15px;
+    }
 
     &__issues {
         overflow-x: hidden;