Prometheus: Refactor metrics modal to handle high cardinality metrics (#108437)

* remove redux from PromQueryBuilderContainer

* remove export

* housekeeping

* introduce MetricsModalContext to replace redux

* handle result pagination

* add search related values in context

* handle filtering

* handle search

* handle search and highlighting

* cleaning up

* better helpers

* remove unused types

* reorganize the code

* update settings

* improve search and fetch

* remove unused styles

* linting

* fix tests

* update

* lint

* i18n

* import order

* try to fix the test

* remove start call from variable editor

* fix highlighter

* fix pagination alignment

* make the entire row clickable and remove select button

* review updates

* remove settings

* use ufuzzy search

* fix tests

* use case-insensitive search

* review fixes

* fix pagination

* improve readability
This commit is contained in:
ismail simsek
2025-07-31 23:32:43 +02:00
committed by GitHub
parent 925e19acf2
commit 025d8527dd
30 changed files with 1279 additions and 1337 deletions
@@ -24,11 +24,11 @@ export function createPromDS(dataSourceID: string, name: string): void {
}
export function getResources() {
cy.intercept(/__name__/g, metricResponse);
cy.intercept(/__name__/g, metricResponse).as('getMetricNames');
cy.intercept(/metadata/g, metadataResponse);
cy.intercept(/metadata/g, metadataResponse).as('getMetadata');
cy.intercept(/labels/g, labelsResponse);
cy.intercept(/labels/g, labelsResponse).as('getLabels');
}
const metricResponse = {
@@ -138,12 +138,11 @@ describe('Prometheus query editor', () => {
it('can select a metric and provide a hint', () => {
navigateToEditor('Builder', 'prometheusBuilder');
getResources();
e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click().type('metric1');
e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().should('exist').click();
cy.wait('@getMetadata');
e2e.components.DataSource.Prometheus.queryEditor.builder.metricSelect().type('metric1');
selectOption('metric1');
e2e.components.DataSource.Prometheus.queryEditor.builder.hints().contains('hint: add rate');
});