ydb-embedded-ui 2.4.4 → 2.6.0

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

@@ -1,5 +1,5 @@
-import {ReactNode, useMemo} from 'react';
-import {useDispatch, useSelector} from 'react-redux';
+import {ReactNode, useCallback, useMemo} from 'react';
+import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import {Loader} from '@gravity-ui/uikit';
@@ -13,15 +13,24 @@ import {
 } from '../../../../components/InfoViewer/schemaInfo';
 
 import {EPathType, TColumnTableDescription} from '../../../../types/api/schema';
-import {isColumnEntityType, isTableType} from '../../utils/schema';
+import {
+    isEntityWithMergedImplementation,
+    isColumnEntityType,
+    isTableType,
+} from '../../utils/schema';
 //@ts-ignore
-import {getSchema, resetLoadingState} from '../../../../store/reducers/schema';
+import {
+    getSchema,
+    getSchemaBatched,
+    resetLoadingState,
+    selectSchemaMergedChildrenPaths,
+} from '../../../../store/reducers/schema';
 //@ts-ignore
 import {
     getOlapStats,
     resetLoadingState as resetOlapLoadingState,
 } from '../../../../store/reducers/olapStats';
-import {useAutofetcher} from '../../../../utils/hooks';
+import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
@@ -60,9 +69,7 @@ interface OverviewProps {
 
 const b = cn('kv-tenant-overview');
 
-function Overview(props: OverviewProps) {
-    const {tenantName, type} = props;
-
+function Overview({type, tenantName, className}: OverviewProps) {
     const dispatch = useDispatch();
 
     const {
@@ -78,14 +85,31 @@ function Overview(props: OverviewProps) {
 
     const loading = schemaLoading || olapStatsLoading;
 
-    useAutofetcher(
-        (isBackground) => {
+    const isEntityWithMergedImpl = isEntityWithMergedImplementation(type);
+
+    // There is a circular dependency here. Fetch data depends on children paths
+    // When data in store updated on fetch request,
+    // new object is set there, so source children array is updated
+    // This updates selector, the selector returns a new array, and data is fetched again
+    // To prevent it, shallowEqual, which compares array content, was added
+    const mergedChildrenPaths = useTypedSelector(
+        (state) => selectSchemaMergedChildrenPaths(state, currentSchemaPath, type),
+        shallowEqual,
+    );
+
+    const fetchData = useCallback(
+        (isBackground: boolean) => {
             if (!isBackground) {
                 dispatch(resetLoadingState());
             }
 
             const schemaPath = currentSchemaPath || tenantName;
-            dispatch(getSchema({path: schemaPath}));
+
+            if (!isEntityWithMergedImpl) {
+                dispatch(getSchema({path: schemaPath}));
+            } else if (mergedChildrenPaths) {
+                dispatch(getSchemaBatched([schemaPath, ...mergedChildrenPaths]));
+            }
 
             if (isTableType(type) && isColumnEntityType(type)) {
                 if (!isBackground) {
@@ -94,10 +118,18 @@ function Overview(props: OverviewProps) {
                 dispatch(getOlapStats({path: schemaPath}));
             }
         },
-        [currentSchemaPath, dispatch, tenantName, type],
-        autorefresh,
+        [
+            tenantName,
+            currentSchemaPath,
+            type,
+            isEntityWithMergedImpl,
+            mergedChildrenPaths,
+            dispatch,
+        ],
     );
 
+    useAutofetcher(fetchData, [fetchData], autorefresh);
+
     const tableSchema =
         currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
 
@@ -128,7 +160,9 @@ function Overview(props: OverviewProps) {
             [EPathType.EPathTypeExtSubDomain]: undefined,
             [EPathType.EPathTypeColumnStore]: undefined,
             [EPathType.EPathTypeColumnTable]: undefined,
-            [EPathType.EPathTypeCdcStream]: () => <CDCStreamInfo data={schemaData} />,
+            [EPathType.EPathTypeCdcStream]: () => (
+                <CDCStreamInfo data={schemaData} childrenPaths={mergedChildrenPaths} />
+            ),
             [EPathType.EPathTypePersQueueGroup]: () => <PersQueueGroupInfo data={schemaData} />,
         };
 
@@ -139,10 +173,10 @@ function Overview(props: OverviewProps) {
         );
     };
 
-    return loading && !wasLoaded ? (
+    return (loading && !wasLoaded) || (isEntityWithMergedImpl && !mergedChildrenPaths) ? (
         renderLoader()
     ) : (
-        <div className={props.className}>{renderContent()}</div>
+        <div className={className}>{renderContent()}</div>
     );
 }
 

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

@@ -53,6 +53,7 @@ class TenantOverview extends React.Component {
 
     componentDidMount() {
         const {tenantName, autorefresh, getTenantInfo} = this.props;
+        getTenantInfo({path: tenantName});
         this.autofetcher = new AutoFetcher();
         if (autorefresh) {
             this.autofetcher.start();
@@ -62,12 +63,25 @@ class TenantOverview extends React.Component {
 
     componentDidUpdate(prevProps) {
         const {autorefresh, tenantName, getTenantInfo} = this.props;
-        if (autorefresh && !prevProps.autorefresh) {
-            getTenantInfo({path: tenantName});
+
+        const restartAutorefresh = () => {
             this.autofetcher.stop();
             this.autofetcher.start();
             this.autofetcher.fetch(() => getTenantInfo({path: tenantName}));
+        };
+
+        if (prevProps.tenantName !== this.props.tenantName) {
+            getTenantInfo({path: tenantName});
+            if (autorefresh) {
+                restartAutorefresh();
+            }
         }
+
+        if (autorefresh && !prevProps.autorefresh) {
+            getTenantInfo({path: tenantName});
+            restartAutorefresh();
+        }
+
         if (!autorefresh && prevProps.autorefresh) {
             this.autofetcher.stop();
         }

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

@@ -90,6 +90,7 @@ class TopQueries extends React.Component {
                 wasLoaded: false,
                 data: undefined,
             });
+            this.getTopQueries();
         }
     }
 

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

@@ -47,17 +47,23 @@ function prepareDateSizeValue(value) {
 }
 
 function stringToDataTableSortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: DataTable.DESCENDING,
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: DataTable.DESCENDING,
+        }))
+    );
 }
 
 function stringToQuerySortOrder(value) {
-    return value && value.split(',').map((columnId) => ({
-        columnId,
-        order: 'DESC',
-    }));
+    return (
+        value &&
+        value.split(',').map((columnId) => ({
+            columnId,
+            order: 'DESC',
+        }))
+    );
 }
 
 function dataTableToStringSortOrder(value = []) {
@@ -85,11 +91,13 @@ function TopShards({
 
         if (autorefresh) {
             autofetcher.start();
-            autofetcher.fetch(() => sendShardQuery({
-                database: path,
-                path: currentSchemaPath,
-                sortOrder: stringToQuerySortOrder(sortOrder),
-            }));
+            autofetcher.fetch(() =>
+                sendShardQuery({
+                    database: path,
+                    path: currentSchemaPath,
+                    sortOrder: stringToQuerySortOrder(sortOrder),
+                }),
+            );
         }
 
         return () => {

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -54,11 +54,7 @@ function ObjectGeneral(props: ObjectGeneralProps) {
         if (!tenantName) {
             return null;
         }
-        return (
-            <div className={b()}>
-                {renderTabContent()}
-            </div>
-        );
+        return <div className={b()}>{renderTabContent()}</div>;
     };
 
     return renderContent();

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
 import {Loader, RadioButton} from '@gravity-ui/uikit';
@@ -58,7 +58,7 @@ function GraphRoot(props) {
         updateComponentTheme(theme);
     }, [theme]);
 
-    const render = useCallback(() => {
+    const render = () => {
         if (version === explainVersions.v2) {
             paranoid.current = getTopology('graphRoot', data, opts, shapes);
             paranoid.current.render();
@@ -66,7 +66,7 @@ function GraphRoot(props) {
             paranoid.current = getCompactTopology('graphRoot', data, opts);
             paranoid.current.renderCompactTopology();
         }
-    }, [data, opts, shapes, version]);
+    };
 
     useEffect(() => {
         render();
@@ -86,7 +86,7 @@ function GraphRoot(props) {
         graphRoot.innerHTML = '';
 
         render();
-    }, [componentTheme, render]);
+    }, [componentTheme]);
 
     useEffect(() => {
         paranoid.current?.updateData?.(props.data);

package/dist/containers/Tenant/QueryEditor/SaveQuery/SaveQuery.js

@@ -73,10 +73,7 @@ function SaveQuery({savedQueries, onSaveQuery, saveButtonDisabled}) {
                         </div>
                     )}
                     <div className={b('dialog-row')}>
-                        <label
-                            htmlFor="queryName"
-                            className={b('field-title', 'required')}
-                        >
+                        <label htmlFor="queryName" className={b('field-title', 'required')}>
                             Query name
                         </label>
                         <div className={b('control-wrapper')}>

package/dist/containers/Tenant/Schema/SchemaInfoViewer/SchemaInfoViewer.js

@@ -44,9 +44,10 @@ const formatTableStatsItem = createInfoFormatter({
     defaultValueFormatter: formatNumber,
 });
 
-const formatTableStats = (fields) => Object.entries(fields)
-    .map(([label, value]) => formatTableStatsItem(label, value))
-    .filter(({value}) => Boolean(value));
+const formatTableStats = (fields) =>
+    Object.entries(fields)
+        .map(([label, value]) => formatTableStatsItem(label, value))
+        .filter(({value}) => Boolean(value));
 
 class SchemaInfoViewer extends React.Component {
     static propTypes = {
@@ -60,17 +61,18 @@ class SchemaInfoViewer extends React.Component {
 
         return (
             <div className={b('item')}>
-                <InfoViewer
-                    title={title}
-                    info={itemData}
-                />
+                <InfoViewer title={title} info={itemData} />
             </div>
         );
     }
 
     renderContent(data) {
         const {PathDescription = {}} = data;
-        const {TableStats = {}, TabletMetrics = {}, Table: {PartitionConfig = {}} = {}} = PathDescription;
+        const {
+            TableStats = {},
+            TabletMetrics = {},
+            Table: {PartitionConfig = {}} = {},
+        } = PathDescription;
         const {
             PartCount,
             RowCount,
@@ -127,33 +129,30 @@ class SchemaInfoViewer extends React.Component {
         ];
 
         const tabletMetricsInfo = Object.keys(TabletMetrics).map((key) =>
-            formatTabletMetricsItem(key, TabletMetrics[key])
+            formatTabletMetricsItem(key, TabletMetrics[key]),
         );
 
         const partitionConfigInfo = [];
 
         if (Array.isArray(FollowerGroups) && FollowerGroups.length > 0) {
-            partitionConfigInfo.push(...Object.keys(FollowerGroups[0]).map((key) =>
-                formatFollowerGroupItem(key, FollowerGroups[0][key])
-            ));
-        } else if (FollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('FollowerCount', FollowerCount)
+                ...Object.keys(FollowerGroups[0]).map((key) =>
+                    formatFollowerGroupItem(key, FollowerGroups[0][key]),
+                ),
             );
+        } else if (FollowerCount !== undefined) {
+            partitionConfigInfo.push(formatPartitionConfigItem('FollowerCount', FollowerCount));
         } else if (CrossDataCenterFollowerCount !== undefined) {
             partitionConfigInfo.push(
-                formatPartitionConfigItem('CrossDataCenterFollowerCount', CrossDataCenterFollowerCount)
+                formatPartitionConfigItem(
+                    'CrossDataCenterFollowerCount',
+                    CrossDataCenterFollowerCount,
+                ),
             );
         }
 
-        if ([
-            tabletMetricsInfo,
-            partitionConfigInfo,
-            tableStatsInfo.flat(),
-        ].flat().length === 0) {
-            return (
-                <div className={b('item')}>Empty</div>
-            );
+        if ([tabletMetricsInfo, partitionConfigInfo, tableStatsInfo.flat()].flat().length === 0) {
+            return <div className={b('item')}>Empty</div>;
         }
 
         return (
@@ -179,11 +178,7 @@ class SchemaInfoViewer extends React.Component {
         const {data} = this.props;
 
         if (data) {
-            return (
-                <div className={b()}>
-                    {this.renderContent(data)}
-                </div>
-            );
+            return <div className={b()}>{this.renderContent(data)}</div>;
         } else {
             return <div className="error">no schema data</div>;
         }

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.tsx

@@ -6,7 +6,7 @@ import {NavigationTree} from 'ydb-ui-components';
 import {setCurrentSchemaPath, preloadSchemas} from '../../../../store/reducers/schema';
 import type {EPathType, TEvDescribeSchemeResult} from '../../../../types/api/schema';
 
-import {mapPathTypeToNavigationTreeType} from '../../utils/schema';
+import {isChildlessPathType, mapPathTypeToNavigationTreeType} from '../../utils/schema';
 import {getActions} from '../../utils/schemaActions';
 
 interface SchemaTreeProps {
@@ -42,7 +42,7 @@ export function SchemaTree(props: SchemaTreeProps) {
                         type: mapPathTypeToNavigationTreeType(PathType, PathSubType),
                         // FIXME: should only be explicitly set to true for tables with indexes
                         // at the moment of writing there is no property to determine this, fix later
-                        expandable: true,
+                        expandable: !isChildlessPathType(PathType, PathSubType),
                     };
                 });
 

package/dist/containers/Tenant/TenantPages.tsx

@@ -14,7 +14,7 @@ export enum TenantInfoTabsIds {
 export enum TenantTabsGroups {
     info = 'info',
     general = 'general',
-    generalTab = 'generalTab'
+    generalTab = 'generalTab',
 }
 
 export const TENANT_GENERAL_TABS = [

package/dist/containers/Tenant/utils/schema.ts

@@ -88,3 +88,87 @@ const pathTypeToIsColumn: Record<EPathType, boolean> = {
 };
 
 export const isColumnEntityType = (type?: EPathType) => (type && pathTypeToIsColumn[type]) ?? false;
+
+// ====================
+
+const pathTypeToIsDatabase: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeSubDomain]: true,
+    [EPathType.EPathTypeExtSubDomain]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeColumnTable]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeCdcStream]: false,
+    [EPathType.EPathTypePersQueueGroup]: false,
+};
+
+export const isDatabaseEntityType = (type?: EPathType) =>
+    (type && pathTypeToIsDatabase[type]) ?? false;
+
+// ====================
+
+const pathTypeToIsCdcStream: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeCdcStream]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeColumnTable]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+    [EPathType.EPathTypePersQueueGroup]: false,
+};
+
+export const isCdcStreamEntityType = (type?: EPathType) =>
+    (type && pathTypeToIsCdcStream[type]) ?? false;
+
+// ====================
+
+const pathTypeToEntityWithMergedImplementation: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeCdcStream]: true,
+
+    [EPathType.EPathTypePersQueueGroup]: false,
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeColumnTable]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+};
+
+export const isEntityWithMergedImplementation = (type?: EPathType) =>
+    (type && pathTypeToEntityWithMergedImplementation[type]) ?? false;
+
+// ====================
+
+const pathSubTypeToChildless: Record<EPathSubType, boolean> = {
+    [EPathSubType.EPathSubTypeSyncIndexImplTable]: true,
+    [EPathSubType.EPathSubTypeAsyncIndexImplTable]: true,
+
+    [EPathSubType.EPathSubTypeStreamImpl]: false,
+    [EPathSubType.EPathSubTypeEmpty]: false,
+};
+
+const pathTypeToChildless: Record<EPathType, boolean> = {
+    [EPathType.EPathTypeCdcStream]: true,
+    [EPathType.EPathTypePersQueueGroup]: true,
+
+    [EPathType.EPathTypeInvalid]: false,
+    [EPathType.EPathTypeColumnStore]: false,
+    [EPathType.EPathTypeColumnTable]: false,
+    [EPathType.EPathTypeDir]: false,
+    [EPathType.EPathTypeTable]: false,
+    [EPathType.EPathTypeSubDomain]: false,
+    [EPathType.EPathTypeTableIndex]: false,
+    [EPathType.EPathTypeExtSubDomain]: false,
+};
+
+export const isChildlessPathType = (type?: EPathType, subType?: EPathSubType) =>
+    ((subType && pathSubTypeToChildless[subType]) || (type && pathTypeToChildless[type])) ?? false;

package/dist/containers/Tenant/utils/schemaActions.ts

@@ -37,9 +37,9 @@ const bindActions = (
 ) => {
     const inputQuery = (tmpl: (path: string) => string) => () => {
         dispatch(changeUserInput({input: tmpl(path)}));
-        dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+        dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
         setActivePath(path);
-    }
+    };
 
     return {
         createTable: inputQuery(createTableTemplate),
@@ -66,7 +66,7 @@ const bindActions = (
         },
         openPreview: () => {
             dispatch(setShowPreview(true));
-            dispatch(setTopLevelTab(TenantGeneralTabsIds.query))
+            dispatch(setTopLevelTab(TenantGeneralTabsIds.query));
             setActivePath(path);
         },
     };
@@ -74,27 +74,18 @@ const bindActions = (
 
 type ActionsSet = ReturnType<Required<NavigationTreeProps>['getActions']>;
 
-export const getActions = (
-    dispatch: Dispatch<any>,
-    setActivePath: (path: string) => void,
-) =>
+export const getActions =
+    (dispatch: Dispatch<any>, setActivePath: (path: string) => void) =>
     (path: string, type: NavigationTreeNodeType) => {
         const actions = bindActions(path, dispatch, setActivePath);
         const copyItem = {text: 'Copy path', action: actions.copyPath};
 
         const DIR_SET: ActionsSet = [
-            [
-                copyItem,
-            ],
-            [
-                {text: 'Create table...', action: actions.createTable},
-            ],
+            [copyItem],
+            [{text: 'Create table...', action: actions.createTable}],
         ];
         const TABLE_SET: ActionsSet = [
-            [
-                {text: 'Open preview', action: actions.openPreview},
-                copyItem,
-            ],
+            [{text: 'Open preview', action: actions.openPreview}, copyItem],
             [
                 {text: 'Alter table...', action: actions.alterTable},
                 {text: 'Select query...', action: actions.selectQuery},
@@ -102,9 +93,7 @@ export const getActions = (
             ],
         ];
 
-        const JUST_COPY: ActionsSet = [
-            copyItem,
-        ];
+        const JUST_COPY: ActionsSet = [copyItem];
 
         const EMPTY_SET: ActionsSet = [];
 

package/dist/services/api.d.ts

@@ -8,25 +8,29 @@ interface Window {
             params: {path: string},
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
+        getDescribe: (
+            params: {path: string},
+            axiosOptions?: AxiosOptions,
+        ) => Promise<import('../types/api/schema').TEvDescribeSchemeResult>;
         getStorageInfo: (
             params: {
-                tenant: string,
-                filter: string,
-                nodeId: string,
-                type: 'Groups' | 'Nodes',
+                tenant: string;
+                filter: string;
+                nodeId: string;
+                type: 'Groups' | 'Nodes';
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/storage').TStorageInfo>;
         sendQuery: <
             Action extends import('../types/api/query').Actions,
-            Schema extends import('../types/api/query').Schemas = undefined
+            Schema extends import('../types/api/query').Schemas = undefined,
         >(
             params: {
-                query?: string,
-                database?: string,
-                action?: Action,
-                stats?: string,
-                schema?: Schema,
+                query?: string;
+                database?: string;
+                action?: Action;
+                stats?: string;
+                schema?: Schema;
             },
             axiosOptions?: AxiosOptions,
         ) => Promise<import('../types/api/query').QueryAPIResponse<Action, Schema>>;
@@ -38,7 +42,9 @@ interface Window {
             query: string,
             database: string,
         ) => Promise<import('../types/api/query').QueryAPIExplainResponse<'explain-ast'>>;
-        getHealthcheckInfo: (database: string) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>,
+        getHealthcheckInfo: (
+            database: string,
+        ) => Promise<import('../types/api/healthcheck').HealthCheckAPIResponse>;
         [method: string]: Function;
     };
 }

package/dist/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);
     },
 );