feat(Storage): add nodes uptime filter

Author: artemmufazalov

src/components/UptimeFIlter/UptimeFilter.tsx

@@ -0,0 +1,21 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/nodes';
+
+interface UptimeFilterProps {
+    value: keyof typeof NodesUptimeFilterValues;
+    onChange: (value: string) => void;
+}
+
+export const UptimeFilter = ({value, onChange}: UptimeFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={NodesUptimeFilterValues.All}>
+                {NodesUptimeFilterTitles[NodesUptimeFilterValues.All]}
+            </RadioButton.Option>
+            <RadioButton.Option value={NodesUptimeFilterValues.SmallUptime}>
+                {NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

src/components/UptimeFIlter/index.ts

@@ -0,0 +1 @@
+export * from './UptimeFilter';

src/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() {
@@ -201,6 +206,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 +244,7 @@ class Storage extends React.Component {
             visibleEntities,
             storageType,
             usageFilter,
+            nodesUptimeFilter,
             setUsageFilter,
             usageFilterOptions,
         } = this.props;
@@ -247,6 +262,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 +284,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 +334,7 @@ function mapStateToProps(state) {
         type: storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
     } = state.storage;
 
     return {
@@ -329,6 +350,7 @@ function mapStateToProps(state) {
         storageType,
         filter,
         usageFilter,
+        nodesUptimeFilter,
         usageFilterOptions: getUsageFilterOptions(state),
     };
 }
@@ -339,6 +361,7 @@ const mapDispatchToProps = {
     setStorageFilter,
     setUsageFilter,
     setVisibleEntities: setVisibleEntities,
+    setNodesUptimeFilter,
     getNodesList,
     setStorageType,
     setHeader,

src/store/reducers/storage.js

@@ -1,10 +1,14 @@
-import {createRequestActionTypes, createApiRequest} from '../utils';
-import '../../services/api';
 import _ from 'lodash';
 import {createSelector} from 'reselect';
-import {calcUptime} from '../../utils';
+
+import {calcUptime, calcUptimeInSeconds} from '../../utils';
 import {getUsage} from '../../utils/storage';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 import {getPDiskType} from '../../utils/pdisk';
+import {HOUR_IN_SECONDS} from '../../utils/constants';
+import '../../services/api';
+
+import {createRequestActionTypes, createApiRequest} from '../utils';
 
 export const VisibleEntities = {
     All: 'All',
@@ -29,13 +33,15 @@ const SET_FILTER = 'storage/SET_FILTER';
 const SET_USAGE_FILTER = 'storage/SET_USAGE_FILTER';
 const SET_VISIBLE_GROUPS = 'storage/SET_VISIBLE_GROUPS';
 const SET_STORAGE_TYPE = 'storage/SET_STORAGE_TYPE';
+const SET_NODES_UPTIME_FILTER = 'storage/SET_NODES_UPTIME_FILTER';
 
 const initialState = {
     loading: true,
     wasLoaded: false,
     filter: '',
     usageFilter: [],
     visible: VisibleEntities.Missing,
+    nodesUptimeFilter: NodesUptimeFilterValues.All,
     type: StorageTypes.groups,
 };
 
@@ -93,6 +99,13 @@ const storage = (state = initialState, action) => {
                 error: undefined,
             };
         }
+
+        case SET_NODES_UPTIME_FILTER: {
+            return {
+                ...state,
+                nodesUptimeFilter: action.data,
+            };
+        }
         case SET_STORAGE_TYPE: {
             return {
                 ...state,
@@ -149,6 +162,13 @@ export function setVisibleEntities(value) {
     };
 }
 
+export function setNodesUptimeFilter(value) {
+    return {
+        type: SET_NODES_UPTIME_FILTER,
+        data: value,
+    };
+}
+
 export const getStoragePools = (state) => state.storage.data?.StoragePools;
 export const getStoragePoolsGroupsCount = (state) => ({
     total: state.storage.data?.TotalGroups || 0,
@@ -162,6 +182,7 @@ export const getStorageNodesCount = (state) => ({
 export const getStorageFilter = (state) => state.storage.filter;
 export const getUsageFilter = (state) => state.storage.usageFilter;
 export const getVisibleEntities = (state) => state.storage.visible;
+export const getNodesUptimeFilter = (state) => state.storage.nodesUptimeFilter;
 export const getStorageType = (state) => state.storage.type;
 export const getNodesObject = (state) =>
     _.reduce(
@@ -337,12 +358,32 @@ const filterByUsage = (entities, usage) => {
     });
 };
 
+export const filterByUptime = (nodes = [], nodesUptimeFilter) => {
+    if (nodesUptimeFilter === NodesUptimeFilterValues.All) {
+        return nodes;
+    }
+    return nodes.filter(({StartTime}) => {
+        return !StartTime || calcUptimeInSeconds(StartTime) < HOUR_IN_SECONDS;
+    });
+};
+
 export const getFilteredEntities = createSelector(
-    [getStorageFilter, getUsageFilter, getStorageType, getVisibleEntitiesList],
-    (textFilter, usageFilter, type, entities) => {
+    [
+        getStorageFilter,
+        getUsageFilter,
+        getStorageType,
+        getNodesUptimeFilter,
+        getVisibleEntitiesList,
+    ],
+    (textFilter, usageFilter, type, nodesUptimeFilter, entities) => {
         let result = entities;
         result = filterByText(result, type, textFilter);
         result = filterByUsage(result, usageFilter);
+
+        if (type === StorageTypes.nodes) {
+            result = filterByUptime(result, nodesUptimeFilter);
+        }
+
         return result;
     },
 );

src/utils/index.js

@@ -79,9 +79,13 @@ export const formatDateTime = (value) => {
     return value > 0 ? new Date(Number(value)).toUTCString() : 'N/A';
 };
 
-export const calcUptime = (milliseconds) => {
+export const calcUptimeInSeconds = (milliseconds) => {
     const currentDate = new Date();
-    return formatUptime((currentDate - Number(milliseconds)) / 1000);
+    return (currentDate - Number(milliseconds)) / 1000;
+};
+
+export const calcUptime = (milliseconds) => {
+    return formatUptime(calcUptimeInSeconds(milliseconds));
 };
 
 // determine how many nodes have status Connected "true"

src/utils/nodes.ts

@@ -0,0 +1,9 @@
+export const NodesUptimeFilterValues = {
+    All: 'All',
+    SmallUptime: 'SmallUptime',
+};
+
+export const NodesUptimeFilterTitles = {
+    [NodesUptimeFilterValues.All]: 'All',
+    [NodesUptimeFilterValues.SmallUptime]: 'Uptime < 1h',
+};