ydb-embedded-ui 2.4.4 → 2.5.0

package/dist/{components → containers}/NodesViewer/NodesViewer.js

@@ -1,28 +1,46 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
-import _ from 'lodash';
 import {connect} from 'react-redux';
 
 import {TextInput, Label} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
-import ProblemFilter, {problemFilterType} from '../ProblemFilter/ProblemFilter';
+import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {Illustration} from '../../components/Illustration';
 
 import {withSearch} from '../../HOCS';
 import {calcUptime} from '../../utils';
-import {ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
+import {DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {changeFilter} from '../../store/reducers/settings';
+import {filterNodesByStatusAndUptime} from '../../store/reducers/clusterNodes';
+import {setNodesUptimeFilter} from '../../store/reducers/nodes';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {getNodesColumns} from '../../utils/getNodesColumns';
 
-import {Illustration} from '../Illustration';
-
 import './NodesViewer.scss';
 
 const b = cn('nodes-viewer');
 
 class NodesViewer extends React.PureComponent {
+    static selectNodesToShow(nodes, searchQuery) {
+        let preparedNodes = nodes;
+        if (nodes && Array.isArray(nodes)) {
+            preparedNodes = nodes
+                .map((node) => {
+                    node.uptime = calcUptime(node.StartTime);
+                    return node;
+                })
+                /*  Filter by nodes with the Host field.
+                If a node does not have a Host field it is also
+                included in the filter and displayed with a dash in the corresponding column
+            */
+                .filter((node) => (node.Host ? node.Host.includes(searchQuery) : true));
+        }
+        return preparedNodes;
+    }
+
     static propTypes = {
         nodes: PropTypes.array.isRequired,
         className: PropTypes.string,
@@ -30,7 +48,9 @@ class NodesViewer extends React.PureComponent {
         handleSearchQuery: PropTypes.func,
         showTooltip: PropTypes.func,
         hideTooltip: PropTypes.func,
-        filter: problemFilterType,
+        problemFilter: problemFilterType,
+        nodesUptimeFilter: PropTypes.string,
+        setNodesUptimeFilter: PropTypes.func,
         changeFilter: PropTypes.func,
         showControls: PropTypes.bool,
         additionalNodesInfo: PropTypes.object,
@@ -42,60 +62,18 @@ class NodesViewer extends React.PureComponent {
         showControls: true,
     };
 
-    state = {
-        filteredNodes: [],
-        nodesToShow: [],
+    handleProblemFilterChange = (value) => {
+        this.props.changeFilter(value);
     };
 
-    static getDerivedStateFromProps(props, state) {
-        const {nodes, filter} = props;
-        if (!_.isEqual(nodes, state.nodes)) {
-            return {
-                nodes,
-                filteredNodes: NodesViewer.filterNodes(nodes, filter),
-            };
-        }
-        return null;
-    }
-
-    static filterNodes(nodes, filter) {
-        if (filter === ALL) {
-            return nodes;
-        }
-
-        return _.filter(nodes, (node) => {
-            return node.Overall && node.Overall !== 'Green';
-        });
-    }
-
-    static selectNodesToShow(nodes, searchQuery) {
-        let preparedNodes = nodes;
-        if (nodes && Array.isArray(nodes)) {
-            preparedNodes = nodes
-                .map((node) => {
-                    node.uptime = calcUptime(node.StartTime);
-                    return node;
-                })
-                /*  Filter by nodes with the Host field.
-                If a node does not have a Host field it is also
-                included in the filter and displayed with a dash in the corresponding column
-            */
-                .filter((node) => (node.Host ? node.Host.includes(searchQuery) : true));
-        }
-        return preparedNodes;
-    }
-
-    onChangeProblemFilter = (filter) => {
-        const {nodes, changeFilter} = this.props;
-        const filteredNodes = NodesViewer.filterNodes(nodes, filter);
-
-        changeFilter(filter);
-        this.setState({filteredNodes});
+    handleUptimeFilterChange = (value) => {
+        this.props.setNodesUptimeFilter(value);
     };
 
     renderControls() {
-        const {searchQuery, handleSearchQuery, filter} = this.props;
-        const nodesToShow = NodesViewer.selectNodesToShow(this.state.filteredNodes, searchQuery);
+        const {nodes, searchQuery, handleSearchQuery, nodesUptimeFilter, problemFilter} =
+            this.props;
+        const nodesToShow = NodesViewer.selectNodesToShow(nodes, searchQuery);
 
         return (
             <div className={b('controls')}>
@@ -108,7 +86,8 @@ class NodesViewer extends React.PureComponent {
                     hasClear
                     autoFocus
                 />
-                <ProblemFilter value={filter} onChange={this.onChangeProblemFilter} />
+                <ProblemFilter value={problemFilter} onChange={this.handleProblemFilterChange} />
+                <UptimeFilter value={nodesUptimeFilter} onChange={this.handleUptimeFilterChange} />
                 <Label theme="info" size="m">{`Nodes: ${nodesToShow.length}`}</Label>
             </div>
         );
@@ -119,13 +98,13 @@ class NodesViewer extends React.PureComponent {
             className,
             searchQuery,
             path,
-            filter,
+            problemFilter,
             showControls,
             hideTooltip,
             showTooltip,
             additionalNodesInfo = {},
+            nodes,
         } = this.props;
-        const {filteredNodes = []} = this.state;
 
         const columns = getNodesColumns({
             tabletsPath: path,
@@ -134,7 +113,7 @@ class NodesViewer extends React.PureComponent {
             getNodeRef: additionalNodesInfo.getNodeRef,
         });
 
-        const nodesToShow = NodesViewer.selectNodesToShow(filteredNodes, searchQuery);
+        const nodesToShow = NodesViewer.selectNodesToShow(nodes, searchQuery);
 
         return (
             <div className={`${b()} ${className}`}>
@@ -146,7 +125,7 @@ class NodesViewer extends React.PureComponent {
                         <div className={b('table-content')}>
                             <DataTable
                                 theme="yandex-cloud"
-                                key={filter}
+                                key={problemFilter}
                                 data={nodesToShow}
                                 columns={columns}
                                 settings={DEFAULT_TABLE_SETTINGS}
@@ -160,9 +139,16 @@ class NodesViewer extends React.PureComponent {
     }
 }
 
-const mapStateToProps = (state) => {
+const mapStateToProps = (state, ownProps) => {
+    const {nodesUptimeFilter} = state.nodes;
+    const {problemFilter} = state.settings;
+
+    const nodes = filterNodesByStatusAndUptime(ownProps.nodes, problemFilter, nodesUptimeFilter);
+
     return {
-        filter: state.settings.problemFilter,
+        problemFilter,
+        nodesUptimeFilter,
+        nodes,
     };
 };
 
@@ -170,6 +156,7 @@ const mapDispatchToProps = {
     changeFilter,
     hideTooltip,
     showTooltip,
+    setNodesUptimeFilter,
 };
 
 const ConnectedNodesViewer = connect(mapStateToProps, mapDispatchToProps)(NodesViewer);

package/dist/containers/Storage/Pdisk/Pdisk.scss

@@ -1,7 +1,7 @@
 .pdisk-storage {
     position: relative;
 
-    min-width: 120px;
+    width: 120px;
 
     border-radius: 4px; // to match interactive area with disk shape
 

package/dist/containers/Storage/Storage.js

@@ -8,7 +8,9 @@ import {RadioButton, Label} from '@gravity-ui/uikit';
 import {Search} from '../../components/Search';
 import {UsageFilter} from './UsageFilter';
 import {AutoFetcher} from '../../utils/autofetcher';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {TableSkeleton} from '../../components/TableSkeleton/TableSkeleton';
+import {UptimeFilter} from '../../components/UptimeFIlter';
 import {AccessDenied} from '../../components/Errors/403';
 
 import {
@@ -22,6 +24,7 @@ import {
     getNodesObject,
     StorageTypes,
     setStorageType,
+    setNodesUptimeFilter,
     VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
@@ -66,6 +69,8 @@ class Storage extends React.Component {
         setHeader: PropTypes.func,
         tenant: PropTypes.string,
         nodeId: PropTypes.string,
+        nodesUptimeFilter: PropTypes.string,
+        setNodesUptimeFilter: PropTypes.func,
     };
 
     componentDidMount() {
@@ -166,7 +171,8 @@ class Storage extends React.Component {
     }
 
     renderDataTable() {
-        const {flatListStorageEntities, visibleEntities, nodes, storageType} = this.props;
+        const {flatListStorageEntities, visibleEntities, nodesUptimeFilter, nodes, storageType} =
+            this.props;
 
         return (
             <div className={b('table-wrapper')}>
@@ -182,9 +188,10 @@ class Storage extends React.Component {
                 {storageType === StorageTypes.nodes && (
                     <StorageNodes
                         visibleEntities={visibleEntities}
+                        nodesUptimeFilter={nodesUptimeFilter}
                         data={flatListStorageEntities}
                         tableSettings={tableSettings}
-                        onShowAll={() => this.onGroupVisibilityChange(VisibleEntities.All)}
+                        onShowAll={this.onShowAllNodes}
                     />
                 )}
             </div>
@@ -201,6 +208,15 @@ class Storage extends React.Component {
         setStorageType(value);
     };
 
+    onUptimeFilterChange = (value) => {
+        this.props.setNodesUptimeFilter(value);
+    };
+
+    onShowAllNodes = () => {
+        this.onGroupVisibilityChange(VisibleEntities.All);
+        this.onUptimeFilterChange(NodesUptimeFilterValues.All);
+    };
+
     renderEntitiesCount() {
         const {storageType, groupsCount, nodesCount, flatListStorageEntities, loading, wasLoaded} =
             this.props;
@@ -230,6 +246,7 @@ class Storage extends React.Component {
             visibleEntities,
             storageType,
             usageFilter,
+            nodesUptimeFilter,
             setUsageFilter,
             usageFilterOptions,
         } = this.props;
@@ -247,6 +264,16 @@ class Storage extends React.Component {
                         value={filter}
                     />
                 </div>
+
+                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
+                    <RadioButton.Option value={StorageTypes.groups}>
+                        {StorageTypes.groups}
+                    </RadioButton.Option>
+                    <RadioButton.Option value={StorageTypes.nodes}>
+                        {StorageTypes.nodes}
+                    </RadioButton.Option>
+                </RadioButton>
+
                 <RadioButton value={visibleEntities} onUpdate={this.onGroupVisibilityChange}>
                     <RadioButton.Option value={VisibleEntities.Missing}>
                         {VisibleEntitiesTitles[VisibleEntities.Missing]}
@@ -259,14 +286,9 @@ class Storage extends React.Component {
                     </RadioButton.Option>
                 </RadioButton>
 
-                <RadioButton value={storageType} onUpdate={this.onStorageTypeChange}>
-                    <RadioButton.Option value={StorageTypes.groups}>
-                        {StorageTypes.groups}
-                    </RadioButton.Option>
-                    <RadioButton.Option value={StorageTypes.nodes}>
-                        {StorageTypes.nodes}
-                    </RadioButton.Option>
-                </RadioButton>
+                {storageType === StorageTypes.nodes && (
+                    <UptimeFilter value={nodesUptimeFilter} onChange={this.onUptimeFilterChange} />
+                )}
 
                 {storageType === StorageTypes.groups && (
                     <UsageFilter
@@ -314,6 +336,7 @@ function mapStateToProps(state) {
         type: storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
     } = state.storage;
 
     return {
@@ -329,6 +352,7 @@ function mapStateToProps(state) {
         storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
         usageFilterOptions: getUsageFilterOptions(state),
     };
 }
@@ -339,6 +363,7 @@ const mapDispatchToProps = {
     setStorageFilter,
     setUsageFilter,
     setVisibleEntities: setVisibleEntities,
+    setNodesUptimeFilter,
     getNodesList,
     setStorageType,
     setHeader,

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

@@ -3,9 +3,9 @@
         display: flex;
         overflow-x: auto;
         overflow-y: hidden;
-        justify-content: center;
+        justify-content: left;
 
-        min-width: 500px;
+        width: max-content;
     }
     &__pdisks-item {
         flex-grow: 1;

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

@@ -5,6 +5,7 @@ import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-t
 import {Popover, PopoverBehavior} from '@gravity-ui/uikit';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
+import {NodesUptimeFilterValues} from '../../../utils/nodes';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import Pdisk from '../Pdisk/Pdisk';
@@ -28,6 +29,7 @@ interface StorageNodesProps {
     nodes: any;
     tableSettings: Settings;
     visibleEntities: keyof typeof VisibleEntities;
+    nodesUptimeFilter: keyof typeof NodesUptimeFilterValues;
     onShowAll?: VoidFunction;
 }
 
@@ -61,7 +63,13 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: StorageNodesProps) {
+function StorageNodes({
+    data,
+    tableSettings,
+    visibleEntities,
+    onShowAll,
+    nodesUptimeFilter,
+}: StorageNodesProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.NodeId,
@@ -124,23 +132,33 @@ function StorageNodes({data, tableSettings, visibleEntities, onShowAll}: Storage
 
     if (visibleEntities === VisibleEntities.Space) {
         columns = allColumns.filter((col) => col.name !== TableColumnsIds.Missing);
-
-        return (
-            <EmptyFilter
-                title={i18n('empty.out_of_space')}
-                showAll={i18n('show_all')}
-                onShowAll={onShowAll}
-            />
-        );
     }
-    if (visibleEntities === VisibleEntities.Missing) {
-        return (
-            <EmptyFilter
-                title={i18n('empty.degraded')}
-                showAll={i18n('show_all')}
-                onShowAll={onShowAll}
-            />
-        );
+
+    if (!data.length) {
+        let message;
+
+        if (visibleEntities === VisibleEntities.Space) {
+            message = i18n('empty.out_of_space');
+        }
+
+        if (visibleEntities === VisibleEntities.Missing) {
+            message = i18n('empty.degraded');
+        }
+
+        if (nodesUptimeFilter === NodesUptimeFilterValues.SmallUptime) {
+            message = i18n('empty.small_uptime');
+        }
+
+        if (
+            visibleEntities !== VisibleEntities.All &&
+            nodesUptimeFilter !== NodesUptimeFilterValues.All
+        ) {
+            message = i18n('empty.several_filters');
+        }
+
+        if (message) {
+            return <EmptyFilter title={message} showAll={i18n('show_all')} onShowAll={onShowAll} />;
+        }
     }
 
     return data ? (

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

@@ -1,6 +1,8 @@
 {
-    "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"
+  "empty.default": "No such nodes",
+  "empty.out_of_space": "No nodes with out of space errors",
+  "empty.degraded": "No degraded nodes",
+  "empty.small_uptime": "No nodes with uptime < 1h",
+  "empty.several_filters": "No nodes match current filters combination",
+  "show_all": "Show all nodes"
 }

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

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

package/dist/containers/Storage/UsageFilter/UsageFilter.scss

@@ -1,4 +1,6 @@
 .usage-filter {
+    min-width: 100px;
+
     &__option {
         flex-grow: 1;
 
@@ -10,22 +12,25 @@
         }
 
         &-meta {
-            padding: 0 5px;
             position: relative;
-            border-radius: 3px;
+
+            padding: 0 5px;
+
             font-size: var(--yc-text-caption-2-font-size);
             line-height: var(--yc-text-caption-2-line-height);
+
+            border-radius: 3px;
         }
 
         &-bar {
             position: absolute;
-            left: 0;
+            z-index: -1;
             top: 0;
             bottom: 0;
-            z-index: -1;
+            left: 0;
 
-            background-color: var(--yc-color-infographics-info-medium);
             border-radius: 3px;
+            background-color: var(--yc-color-infographics-info-medium);
         }
     }
 }

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

@@ -83,13 +83,7 @@ class Acl extends React.Component {
             return null;
         }
 
-        return (
-            <DataTable
-                columns={this.COLUMNS}
-                data={acl}
-                settings={TABLE_SETTINGS}
-            />
-        );
+        return <DataTable columns={this.COLUMNS} data={acl} settings={TABLE_SETTINGS} />;
     };
 
     renderOwner = () => {

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

@@ -7,7 +7,7 @@ import qs from 'qs';
 
 import {Loader} from '@gravity-ui/uikit';
 
-import NodesViewer from '../../../../components/NodesViewer/NodesViewer';
+import NodesViewer from '../../../NodesViewer/NodesViewer';
 
 import {backend} from '../../../../store';
 import {hideTooltip, showTooltip} from '../../../../store/reducers/tooltip';

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

@@ -1,13 +1,20 @@
-import {useEffect, useState} from 'react';
+import {useCallback, useEffect, useState} from 'react';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
 import DataTable, {Column} from '@yandex-cloud/react-data-table';
 
+import { Loader } from '../../../../components/Loader';
+import {prepareQueryError} from '../../../../utils/query';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 import {Search} from '../../../../components/Search';
-import {getDescribe, selectConsumers} from '../../../../store/reducers/describe';
+import {
+    getDescribe,
+    selectConsumers,
+    setCurrentDescribePath,
+    setDataWasNotLoaded,
+} from '../../../../store/reducers/describe';
 
 import i18n from './i18n';
 
@@ -20,14 +27,25 @@ interface ConsumersProps {
 }
 
 export const Consumers = ({path}: ConsumersProps) => {
-    const dispath = useDispatch();
+    const dispatch = useDispatch();
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+            dispatch(setCurrentDescribePath(path));
+            dispatch(getDescribe({path}));
+        },
 
-    const fetchData = () => {
-        dispath(getDescribe({path}));
-    };
+        [path, dispatch],
+    );
+
+    const {autorefresh} = useTypedSelector((state) => state.schema);
 
-    useAutofetcher(fetchData, [path]);
+    useAutofetcher(fetchData, [fetchData], autorefresh);
 
+    const {loading, wasLoaded, error} = useTypedSelector((state) => state.describe);
     const consumers = useTypedSelector((state) => selectConsumers(state, path));
 
     const [consumersToRender, setConsumersToRender] = useState(consumers);
@@ -59,8 +77,16 @@ export const Consumers = ({path}: ConsumersProps) => {
         },
     ];
 
+    if (loading && !wasLoaded) {
+        return <Loader size="m" />;
+    }
+
+    if (!loading && error) {
+        return <div className={b('message', 'error')}>{prepareQueryError(error)}</div>;
+    }
+
     if (consumers.length === 0) {
-        return <div>{i18n('noConsumersMessage')}</div>;
+        return <div className={b('message')}>{i18n('noConsumersMessage')}</div>;
     }
 
     return (

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

@@ -13,14 +13,6 @@
         padding: 10px 20px 20px 0;
     }
 
-    &__loader-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        height: 100%;
-    }
-
     &__tree {
         @include json-tree-styles();
     }

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

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import JSONTree from 'react-json-inspector';
 import 'react-json-inspector/json-inspector.css';
 
-import {Loader} from '@gravity-ui/uikit';
+import {Loader} from '../../../../components/Loader';
 
 import {prepareQueryError} from '../../../../utils/query';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
@@ -51,11 +51,7 @@ const Describe = ({tenant}: IDescribeProps) => {
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
     if (loading && !wasLoaded) {
-        return (
-            <div className={b('loader-container')}>
-                <Loader size="m" />
-            </div>
-        );
+        return <Loader size="m" />;
     }
 
     if (error) {

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

@@ -5,13 +5,6 @@
 
     height: 100%;
 
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-        align-items: center;
-    }
-
     &__header-wrapper {
         padding: 13px 20px 16px;