feat(Nodes): add uptime filter

Author: artemmufazalov

src/containers/Nodes/Nodes.js

@@ -9,17 +9,19 @@ import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AccessDenied} from '../../components/Errors/403';
+import {UptimeFilter} from '../../components/UptimeFIlter';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {AUTO_RELOAD_INTERVAL, ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getFilteredNodes} from '../../store/reducers/clusterNodes';
-import {getNodes} from '../../store/reducers/nodes';
+import {getNodes, setNodesUptimeFilter} from '../../store/reducers/nodes';
 import {changeFilter} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {calcUptime} from '../../utils';
 import {getNodesColumns} from '../../utils/getNodesColumns';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 
 import './Nodes.scss';
 
@@ -44,12 +46,14 @@ class Nodes extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        filter: problemFilterType,
+        problemFilter: problemFilterType,
         changeFilter: PropTypes.func,
         setHeader: PropTypes.func,
         className: PropTypes.string,
         singleClusterMode: PropTypes.bool,
         additionalNodesInfo: PropTypes.object,
+        nodesUptimeFilter: PropTypes.string,
+        setNodesUptimeFilter: PropTypes.func,
     };
 
     componentDidMount() {
@@ -73,12 +77,16 @@ class Nodes extends React.Component {
         this.props.handleSearchQuery(search);
     };
 
-    handleFilterChange = (filter) => {
-        this.props.changeFilter(filter);
+    handleProblemFilterChange = (value) => {
+        this.props.changeFilter(value);
+    };
+
+    handleUptimeFilterChange = (value) => {
+        this.props.setNodesUptimeFilter(value);
     };
 
     renderControls() {
-        const {searchQuery, filter, nodes} = this.props;
+        const {nodes, searchQuery, problemFilter, nodesUptimeFilter} = this.props;
 
         return (
             <div className={b('controls')}>
@@ -90,7 +98,8 @@ class Nodes extends React.Component {
                     hasClear
                     autoFocus
                 />
-                <ProblemFilter value={filter} onChange={this.handleFilterChange} />
+                <ProblemFilter value={problemFilter} onChange={this.handleProblemFilterChange} />
+                <UptimeFilter value={nodesUptimeFilter} onChange={this.handleUptimeFilterChange} />
                 <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
             </div>
         );
@@ -99,7 +108,8 @@ class Nodes extends React.Component {
     renderTable = () => {
         const {
             nodes = [],
-            filter,
+            problemFilter,
+            nodesUptimeFilter,
             searchQuery,
             showTooltip,
             hideTooltip,
@@ -126,7 +136,7 @@ class Nodes extends React.Component {
         }));
 
         if (preparedNodes.length === 0) {
-            if (filter !== ALL) {
+            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
                 return <Illustration name="thumbsUp" width="200" />;
             }
         }
@@ -177,7 +187,7 @@ class Nodes extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {wasLoaded, loading, error} = state.nodes;
+    const {wasLoaded, loading, error, nodesUptimeFilter} = state.nodes;
 
     const nodes = getFilteredNodes(state);
     return {
@@ -186,7 +196,8 @@ const mapStateToProps = (state) => {
         wasLoaded,
         loading,
         error,
-        filter: state.settings.problemFilter,
+        problemFilter: state.settings.problemFilter,
+        nodesUptimeFilter,
     };
 };
 
@@ -196,6 +207,7 @@ const mapDispatchToProps = {
     showTooltip,
     changeFilter,
     setHeader,
+    setNodesUptimeFilter,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Nodes));

src/store/reducers/clusterNodes.js

@@ -1,7 +1,11 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
 import {createSelector} from 'reselect';
+
 import '../../services/api';
 import {ALL} from '../../utils/constants';
+import {createRequestActionTypes, createApiRequest} from '../utils';
+
+import {filterByUptime} from './storage';
+import {getNodesUptimeFilter} from './nodes';
 
 const FETCH_NODES_LIST = createRequestActionTypes('tenants', 'FETCH_NODES_LIST');
 
@@ -47,23 +51,38 @@ export function getNodesList() {
     });
 }
 
+const filterByProblemsStatus = (nodes = [], problemFilter) => {
+    if (problemFilter === ALL) {
+        return nodes;
+    }
+
+    return nodes.filter(({Overall}) => {
+        return Overall && Overall !== 'Green';
+    });
+};
+
+export const filterNodesByStatusAndUptime = (nodes = [], problemFilter, uptimeFilter) => {
+    let result = filterByProblemsStatus(nodes, problemFilter);
+    result = filterByUptime(result, uptimeFilter);
+
+    return result;
+};
+
 export const getFilteredNodes = createSelector(
-    (state) => state.nodes.data?.Tenants,
-    (state) => state.settings.problemFilter,
-    (tenants, filter) => {
+    [
+        (state) => state.nodes.data?.Tenants,
+        (state) => state.settings.problemFilter,
+        getNodesUptimeFilter,
+    ],
+    (tenants, problemFilter, uptimeFilter) => {
         const nodes = tenants?.reduce((acc, item) => {
             if (Array.isArray(item.Nodes)) {
                 return [...acc, ...item.Nodes.map((node) => ({...node, TenantName: item.Name}))];
             }
             return acc;
         }, []);
-        if (filter === ALL) {
-            return nodes;
-        }
 
-        return nodes?.filter(({Overall}) => {
-            return Overall && Overall !== 'Green';
-        });
+        return filterNodesByStatusAndUptime(nodes, problemFilter, uptimeFilter);
     },
 );
 

src/store/reducers/nodes.js

@@ -1,13 +1,16 @@
 import {createRequestActionTypes, createApiRequest} from '../utils';
 import '../../services/api';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 
 const FETCH_NODES = createRequestActionTypes('nodes', 'FETCH_NODES');
 
 const CLEAR_NODES = 'nodes/CLEAR_NODES';
+const SET_NODES_UPTIME_FILTER = 'nodes/SET_NODES_UPTIME_FILTER';
 
 const initialState = {
     loading: true,
     wasLoaded: false,
+    nodesUptimeFilter: NodesUptimeFilterValues.All,
 };
 
 const nodes = (state = initialState, action) => {
@@ -45,6 +48,10 @@ const nodes = (state = initialState, action) => {
                 error: undefined,
             };
         }
+
+        case SET_NODES_UPTIME_FILTER: {
+            return {...state, nodesUptimeFilter: action.data};
+        }
         default:
             return state;
     }
@@ -59,4 +66,11 @@ export function getNodes(path) {
 
 export const clearNodes = () => ({type: CLEAR_NODES});
 
+export const setNodesUptimeFilter = (value) => ({
+    type: SET_NODES_UPTIME_FILTER,
+    data: value,
+});
+
+export const getNodesUptimeFilter = (state) => state.nodes.nodesUptimeFilter;
+
 export default nodes;