ydb-embedded-ui 2.4.4 → 2.6.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/Pdisk/Pdisk.tsx

@@ -8,7 +8,7 @@ import InternalLink from '../../../components/InternalLink/InternalLink';
 
 import routes, {createHref} from '../../../routes';
 import type {RequiredField} from '../../../types';
-import {TPDiskStateInfo, TPDiskState} from '../../../types/api/storage';
+import {TPDiskStateInfo, TPDiskState} from '../../../types/api/pdisk';
 import {getPDiskId} from '../../../utils';
 import {getPDiskType} from '../../../utils/pdisk';
 import {bytesToGB} from '../../../utils/utils';
@@ -96,9 +96,7 @@ function Pdisk(props: PDiskProps) {
         Realtime &&
             errorColors.includes(Realtime) &&
             pdiskData.push({label: 'Realtime', value: Realtime});
-        Device &&
-            errorColors.includes(Device) &&
-            pdiskData.push({label: 'Device', value: Device});
+        Device && errorColors.includes(Device) && pdiskData.push({label: 'Device', value: Device});
         return pdiskData;
     };
     /* eslint-enable */
@@ -113,11 +111,7 @@ function Pdisk(props: PDiskProps) {
             // matches the default offset for popup with arrow out of a sense of beauty
             offset={[0, 12]}
         >
-            <InfoViewer
-                title="PDisk"
-                info={preparePdiskData()}
-                size="s"
-            />
+            <InfoViewer title="PDisk" info={preparePdiskData()} size="s" />
         </Popup>
     );
 

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

@@ -2,7 +2,7 @@ import {MemoryRouter} from 'react-router-dom';
 
 import {renderWithStore} from '../../../../utils/tests/providers';
 
-import {TPDiskState} from '../../../../types/api/storage'
+import {TPDiskState} from '../../../../types/api/pdisk'
 
 import PDisk from '../Pdisk'
 

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,8 @@ import {
     getNodesObject,
     StorageTypes,
     setStorageType,
+    setNodesUptimeFilter,
+    setDataWasNotLoaded,
     VisibleEntitiesTitles,
     getStoragePoolsGroupsCount,
     getStorageNodesCount,
@@ -66,6 +70,9 @@ class Storage extends React.Component {
         setHeader: PropTypes.func,
         tenant: PropTypes.string,
         nodeId: PropTypes.string,
+        nodesUptimeFilter: PropTypes.string,
+        setNodesUptimeFilter: PropTypes.func,
+        setDataWasNotLoaded: PropTypes.func,
     };
 
     componentDidMount() {
@@ -101,7 +108,8 @@ class Storage extends React.Component {
     }
 
     componentDidUpdate(prevProps) {
-        const {visibleEntities, storageType, autorefresh, database} = this.props;
+        const {visibleEntities, storageType, autorefresh, database, tenant, setDataWasNotLoaded} =
+            this.props;
 
         const startFetch = () => {
             this.getStorageInfo({
@@ -139,6 +147,12 @@ class Storage extends React.Component {
                 restartAutorefresh();
             }
         }
+
+        if (tenant !== prevProps.tenant) {
+            setDataWasNotLoaded();
+            startFetch();
+            restartAutorefresh();
+        }
     }
 
     componentWillUnmount() {
@@ -166,7 +180,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 +197,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 +217,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 +255,7 @@ class Storage extends React.Component {
             visibleEntities,
             storageType,
             usageFilter,
+            nodesUptimeFilter,
             setUsageFilter,
             usageFilterOptions,
         } = this.props;
@@ -247,6 +273,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 +295,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 +345,7 @@ function mapStateToProps(state) {
         type: storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
     } = state.storage;
 
     return {
@@ -329,6 +361,7 @@ function mapStateToProps(state) {
         storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
         usageFilterOptions: getUsageFilterOptions(state),
     };
 }
@@ -339,9 +372,11 @@ const mapDispatchToProps = {
     setStorageFilter,
     setUsageFilter,
     setVisibleEntities: setVisibleEntities,
+    setNodesUptimeFilter,
     getNodesList,
     setStorageType,
     setHeader,
+    setDataWasNotLoaded,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Storage);

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

@@ -9,7 +9,7 @@ import {Stack} from '../../../components/Stack/Stack';
 //@ts-ignore
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
 
-import {TVDiskStateInfo} from '../../../types/api/storage';
+import {TVDiskStateInfo} from '../../../types/api/vdisk';
 //@ts-ignore
 import {VisibleEntities} from '../../../store/reducers/storage';
 //@ts-ignore
@@ -92,7 +92,13 @@ function setSortOrder(visibleEntities: keyof typeof VisibleEntities): SortOrder
     }
 }
 
-function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}: StorageGroupsProps) {
+function StorageGroups({
+    data,
+    tableSettings,
+    visibleEntities,
+    nodes,
+    onShowAll,
+}: StorageGroupsProps) {
     const allColumns: Column<any>[] = [
         {
             name: TableColumnsIds.PoolName,
@@ -123,7 +129,7 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             header: tableColumnsNames[TableColumnsIds.Type],
             render: ({value, row}) => (
                 <>
-                    <Label>{value as string || '—'}</Label>
+                    <Label>{(value as string) || '—'}</Label>
                     {' '}
                     {row.Encryption && (
                         <Popover
@@ -143,9 +149,8 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             name: TableColumnsIds.Missing,
             header: tableColumnsNames[TableColumnsIds.Missing],
             width: 100,
-            render: ({value, row}) => value ? (
-                <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label>
-            ) : '-',
+            render: ({value, row}) =>
+                value ? <Label theme={getDegradedSeverity(row)}>Degraded: {value}</Label> : '-',
             align: DataTable.LEFT,
             defaultOrder: DataTable.DESCENDING,
         },
@@ -164,10 +169,12 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
                     >
                         {usage}%
                     </Label>
-                ) : '-';
+                ) : (
+                    '-'
+                );
             },
             // without a limit exclude usage from sort to display at the bottom
-            sortAccessor: (row) => row.Limit ? getUsage(row) : null,
+            sortAccessor: (row) => (row.Limit ? getUsage(row) : null),
             align: DataTable.LEFT,
         },
         {
@@ -241,35 +248,35 @@ function StorageGroups({data, tableSettings, visibleEntities, nodes, onShowAll}:
             render: ({value, row}) => (
                 <div className={b('vdisks-wrapper')}>
                     {_.map(value as TVDiskStateInfo[], (el) => {
-                        const donors = Array.isArray(el.Donors) ? el.Donors.filter(isFullDonorData) : [];
+                        const donors = Array.isArray(el.Donors)
+                            ? el.Donors.filter(isFullDonorData)
+                            : [];
 
-                        return (
-                            donors.length > 0 ? (
-                                <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
-                                    <Vdisk
-                                        {...el}
-                                        PoolName={row[TableColumnsIds.PoolName]}
-                                        nodes={nodes}
-                                    />
-                                    {donors.map((donor) => (
-                                        <Vdisk
-                                            {...donor}
-                                            // donor and acceptor are always in the same group
-                                            PoolName={row[TableColumnsIds.PoolName]}
-                                            nodes={nodes}
-                                            key={stringifyVdiskId(donor.VDiskId)}
-                                        />
-                                    ))}
-                                </Stack>
-                            ) : (
-                                <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                        return donors.length > 0 ? (
+                            <Stack className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                                {donors.map((donor) => (
                                     <Vdisk
-                                        {...el}
+                                        {...donor}
+                                        // donor and acceptor are always in the same group
                                         PoolName={row[TableColumnsIds.PoolName]}
                                         nodes={nodes}
+                                        key={stringifyVdiskId(donor.VDiskId)}
                                     />
-                                </div>
-                            )
+                                ))}
+                            </Stack>
+                        ) : (
+                            <div className={b('vdisks-item')} key={stringifyVdiskId(el.VDiskId)}>
+                                <Vdisk
+                                    {...el}
+                                    PoolName={row[TableColumnsIds.PoolName]}
+                                    nodes={nodes}
+                                />
+                            </div>
                         );
                     })}
                 </div>

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": "Показать все узлы"
 }