Files
graylog2-server/graylog2-web-interface/test/WrappingContainer.tsx
Dennis Oelkers 26721094f8 Migrate MetricsStore and GlobalThroughputStore from Reflux to React Query (#25247)
* Migrate MetricsStore and GlobalThroughputStore from Reflux to React Query

Replace the Reflux-based MetricsStore and GlobalThroughputStore with a
shared MetricsProvider context that batches all metric subscriptions into
a single react-query POST to /cluster/metrics/multiple. This eliminates
Reflux from the metrics subsystem entirely.

New infrastructure:
- src/types/metrics.ts: shared metric type definitions
- src/contexts/MetricsProvider.tsx: batching context with ref-counted
  subscriptions, 2s refetchInterval, fetchPeriodically
- src/hooks/useMetrics.ts: useMetrics, useNodeMetrics, useMetricsNames,
  useGlobalThroughput hooks

Migrated 22 consumer files from useStore(MetricsStore) + MetricsActions
add/remove pattern to the new hooks. Deleted MetricsStore,
GlobalThroughputStore, and GlobalThroughputStore.test.ts.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix MetricsContext singleton for cross-bundle compatibility

The MetricsContext was created with plain createContext(), causing
enterprise plugin bundles to get a separate context instance. Use the
singleton pattern (matching NodesContext, StreamsContext, etc.) so the
same context instance is shared across all bundles.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix remaining MetricsStore type import in InputThroughputUtils

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add MetricsProvider to test WrappingContainer

Tests rendering components that use useMetrics (e.g. Navigation with
GlobalThroughput) need MetricsProvider in the test wrapper, matching
how it's provided in the app via LoggedInPage.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Add useMetric and useNodeMetric convenience hooks for single metrics

Avoids the repetitive `useMemo(() => [name], [name])` wrapper pattern
when subscribing to a single metric name.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Use asMock helper in PipelineProcessingErrors test

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* Fix type errors in PipelineProcessingErrors test mock data

Add missing `full_name` and `name` properties to mock meter metrics
to satisfy the `BaseMetric<MeterMetric>` type requirements.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Ousmane SAMBA <ousmane@graylog.com>
2026-03-10 10:45:46 +01:00

50 lines
1.5 KiB
TypeScript

/*
* Copyright (C) 2020 Graylog, Inc.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the Server Side Public License, version 1,
* as published by MongoDB, Inc.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* Server Side Public License for more details.
*
* You should have received a copy of the Server Side Public License
* along with this program. If not, see
* <http://www.mongodb.com/licensing/server-side-public-license>.
*/
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import DefaultQueryParamProvider from 'routing/DefaultQueryParamProvider';
import MetricsContext from 'contexts/MetricsContext';
import DefaultQueryClientProvider from './DefaultQueryClientProvider';
import DefaultProviders from './DefaultProviders';
type Props = {
children: React.ReactNode;
};
const noopMetricsContext = {
metrics: {},
isLoading: false,
subscribe: () => {},
unsubscribe: () => {},
};
const WrappingContainer = ({ children }: Props) => (
<DefaultQueryClientProvider>
<MetricsContext.Provider value={noopMetricsContext}>
<MemoryRouter>
<DefaultQueryParamProvider>
<DefaultProviders env="test">{children}</DefaultProviders>
</DefaultQueryParamProvider>
</MemoryRouter>
</MetricsContext.Provider>
</DefaultQueryClientProvider>
);
export default WrappingContainer;