feat(NodesViewer): add uptime filter

Author: artemmufazalov

src/components/NodesViewer/NodesViewer.js renamed to src/containers/NodesViewer/NodesViewer.js

@@ -1,36 +1,56 @@
 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,
         searchQuery: PropTypes.string,
         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,16 +139,24 @@ 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,
     };
 };
 
 const mapDispatchToProps = {
     changeFilter,
     hideTooltip,
     showTooltip,
+    setNodesUptimeFilter,
 };
 
 const ConnectedNodesViewer = connect(mapStateToProps, mapDispatchToProps)(NodesViewer);

src/components/NodesViewer/NodesViewer.scss renamed to src/containers/NodesViewer/NodesViewer.scss

@@ -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';