From b3363543eadeb1eb02c6b6df6cbe237992b90f60 Mon Sep 17 00:00:00 2001 From: Nick Richmond <5732000+NWRichmond@users.noreply.github.com> Date: Mon, 26 Feb 2024 11:56:40 -0500 Subject: [PATCH] Prometheus: avoid unnecessary network requests (#83342) * perf: avoid unnecessary network requests * test: restore mocks to undo `jest.replaceProperty` * chore: mirror updates for Prometheus library --- .../components/PromQueryBuilder.test.tsx | 28 ++++++++++++++++++- .../components/PromQueryBuilder.tsx | 12 ++++---- .../components/PromQueryBuilder.test.tsx | 28 ++++++++++++++++++- .../components/PromQueryBuilder.tsx | 12 ++++---- 4 files changed, 66 insertions(+), 14 deletions(-) diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.test.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.test.tsx index 7223993ff88..54f44c46f13 100644 --- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.test.tsx +++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.test.tsx @@ -11,7 +11,7 @@ import { QueryHint, TimeRange, } from '@grafana/data'; -import { TemplateSrv } from '@grafana/runtime'; +import { config, TemplateSrv } from '@grafana/runtime'; import { PrometheusDatasource } from '../../datasource'; import PromQlLanguageProvider from '../../language_provider'; @@ -59,6 +59,10 @@ const bugQuery: PromVisualQuery = { ], }; +afterEach(() => { + jest.restoreAllMocks(); +}); + describe('PromQueryBuilder', () => { it('shows empty just with metric selected', async () => { setup(); @@ -104,6 +108,28 @@ describe('PromQueryBuilder', () => { await waitFor(() => expect(datasource.getVariables).toBeCalled()); }); + it('checks if the LLM plugin is enabled when the `prometheusPromQAIL` feature is enabled', async () => { + jest.replaceProperty(config, 'featureToggles', { + prometheusPromQAIL: true, + }); + const mockIsLLMPluginEnabled = jest.fn(); + mockIsLLMPluginEnabled.mockResolvedValue(true); + jest.spyOn(require('./promQail/state/helpers'), 'isLLMPluginEnabled').mockImplementation(mockIsLLMPluginEnabled); + setup(); + await waitFor(() => expect(mockIsLLMPluginEnabled).toHaveBeenCalledTimes(1)); + }); + + it('does not check if the LLM plugin is enabled when the `prometheusPromQAIL` feature is disabled', async () => { + jest.replaceProperty(config, 'featureToggles', { + prometheusPromQAIL: false, + }); + const mockIsLLMPluginEnabled = jest.fn(); + mockIsLLMPluginEnabled.mockResolvedValue(true); + jest.spyOn(require('./promQail/state/helpers'), 'isLLMPluginEnabled').mockImplementation(mockIsLLMPluginEnabled); + setup(); + await waitFor(() => expect(mockIsLLMPluginEnabled).toHaveBeenCalledTimes(0)); + }); + // it('tries to load labels when metric selected', async () => { const { languageProvider } = setup(); diff --git a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx index 1a34a75b985..e05b1c2caa2 100644 --- a/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx +++ b/packages/grafana-prometheus/src/querybuilder/components/PromQueryBuilder.tsx @@ -36,15 +36,12 @@ export interface PromQueryBuilderProps { showExplain: boolean; } -// initial commit for hackathon-2023-08-promqail -// AI/ML + Prometheus -const prometheusPromQAIL = config.featureToggles.prometheusPromQAIL; - export const PromQueryBuilder = React.memo((props) => { const { datasource, query, onChange, onRunQuery, data, showExplain } = props; const [highlightedOp, setHighlightedOp] = useState(); const [showDrawer, setShowDrawer] = useState(false); const [llmAppEnabled, updateLlmAppEnabled] = useState(false); + const { prometheusPromQAIL } = config.featureToggles; // AI/ML + Prometheus const lang = { grammar: promqlGrammar, name: 'promql' }; @@ -55,8 +52,11 @@ export const PromQueryBuilder = React.memo((props) => { const check = await isLLMPluginEnabled(); updateLlmAppEnabled(check); } - checkLlms(); - }, []); + + if (prometheusPromQAIL) { + checkLlms(); + } + }, [prometheusPromQAIL]); return ( <> diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx index 7223993ff88..54f44c46f13 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.test.tsx @@ -11,7 +11,7 @@ import { QueryHint, TimeRange, } from '@grafana/data'; -import { TemplateSrv } from '@grafana/runtime'; +import { config, TemplateSrv } from '@grafana/runtime'; import { PrometheusDatasource } from '../../datasource'; import PromQlLanguageProvider from '../../language_provider'; @@ -59,6 +59,10 @@ const bugQuery: PromVisualQuery = { ], }; +afterEach(() => { + jest.restoreAllMocks(); +}); + describe('PromQueryBuilder', () => { it('shows empty just with metric selected', async () => { setup(); @@ -104,6 +108,28 @@ describe('PromQueryBuilder', () => { await waitFor(() => expect(datasource.getVariables).toBeCalled()); }); + it('checks if the LLM plugin is enabled when the `prometheusPromQAIL` feature is enabled', async () => { + jest.replaceProperty(config, 'featureToggles', { + prometheusPromQAIL: true, + }); + const mockIsLLMPluginEnabled = jest.fn(); + mockIsLLMPluginEnabled.mockResolvedValue(true); + jest.spyOn(require('./promQail/state/helpers'), 'isLLMPluginEnabled').mockImplementation(mockIsLLMPluginEnabled); + setup(); + await waitFor(() => expect(mockIsLLMPluginEnabled).toHaveBeenCalledTimes(1)); + }); + + it('does not check if the LLM plugin is enabled when the `prometheusPromQAIL` feature is disabled', async () => { + jest.replaceProperty(config, 'featureToggles', { + prometheusPromQAIL: false, + }); + const mockIsLLMPluginEnabled = jest.fn(); + mockIsLLMPluginEnabled.mockResolvedValue(true); + jest.spyOn(require('./promQail/state/helpers'), 'isLLMPluginEnabled').mockImplementation(mockIsLLMPluginEnabled); + setup(); + await waitFor(() => expect(mockIsLLMPluginEnabled).toHaveBeenCalledTimes(0)); + }); + // it('tries to load labels when metric selected', async () => { const { languageProvider } = setup(); diff --git a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx index 44b71460c72..cb67f375e77 100644 --- a/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx +++ b/public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryBuilder.tsx @@ -36,15 +36,12 @@ export interface Props { showExplain: boolean; } -// initial commit for hackathon-2023-08-promqail -// AI/ML + Prometheus -const prometheusPromQAIL = config.featureToggles.prometheusPromQAIL; - export const PromQueryBuilder = React.memo((props) => { const { datasource, query, onChange, onRunQuery, data, showExplain } = props; const [highlightedOp, setHighlightedOp] = useState(); const [showDrawer, setShowDrawer] = useState(false); const [llmAppEnabled, updateLlmAppEnabled] = useState(false); + const { prometheusPromQAIL } = config.featureToggles; // AI/ML + Prometheus const lang = { grammar: promqlGrammar, name: 'promql' }; @@ -55,8 +52,11 @@ export const PromQueryBuilder = React.memo((props) => { const check = await isLLMPluginEnabled(); updateLlmAppEnabled(check); } - checkLlms(); - }, []); + + if (prometheusPromQAIL) { + checkLlms(); + } + }, [prometheusPromQAIL]); return ( <>