Prometheus: Add native histogram types metric explorer to allow filter by type (#87090)

* add native histogram type and give them the right type

* add tests for native histograms

* fix test

packages/grafana-prometheus/src/querybuilder/components/metrics-modal/MetricsModal.test.tsx

@@ -187,6 +187,38 @@ describe('MetricsModal', () => {
       expect(metricABucket).toBeInTheDocument();
     });
   });
+
+  // native histograms are given a custom type.
+  // They are histograms but are given the type 'native histogram'
+  // to distinguish then from old histograms.
+  it('displays a type for a native histogram', async () => {
+    setup(defaultQuery, listOfMetrics);
+    await waitFor(() => {
+      expect(screen.getByText('new_histogram')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('native histogram')).toBeInTheDocument();
+  });
+
+  it('has a filter for selected type', async () => {
+    setup(defaultQuery, listOfMetrics);
+
+    const selectType = screen.getByText('Filter by type');
+
+    await userEvent.click(selectType);
+
+    const nativeHistogramOption = await screen.getByText('Native histograms are different', { exact: false });
+
+    await userEvent.click(nativeHistogramOption);
+
+    const classicHistogram = await screen.queryByText('a_bucket');
+
+    expect(classicHistogram).toBeNull();
+
+    const nativeHistogram = await screen.getByText('new_histogram');
+
+    expect(nativeHistogram).toBeInTheDocument();
+  });
 });
 
 const defaultQuery: PromVisualQuery = {
@@ -195,7 +227,21 @@ const defaultQuery: PromVisualQuery = {
   operations: [],
 };
 
-const listOfMetrics: string[] = ['all-metrics', 'a_bucket', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'];
+const listOfMetrics: string[] = [
+  'all-metrics',
+  'a_bucket',
+  'new_histogram',
+  'a',
+  'b',
+  'c',
+  'd',
+  'e',
+  'f',
+  'g',
+  'h',
+  'i',
+  'j',
+];
 
 function createDatasource(withLabels?: boolean) {
   const languageProvider = new EmptyLanguageProviderMock() as unknown as PromQlLanguageProvider;
@@ -220,9 +266,13 @@ function createDatasource(withLabels?: boolean) {
         help: 'a-metric-help',
       },
       a_bucket: {
-        type: 'counter',
+        type: 'histogram',
         help: 'for functions',
       },
+      new_histogram: {
+        type: 'histogram',
+        help: 'a native histogram',
+      },
       // missing metadata for other metrics is tested for, see below
     };
   }

packages/grafana-prometheus/src/querybuilder/components/metrics-modal/state/helpers.ts

@@ -74,6 +74,12 @@ function buildMetricData(metric: string, datasource: PrometheusDatasource): Metr
     }
   });
 
+  const oldHistogramMatch = metric.match(/^\w+_bucket$|^\w+_bucket{.*}$/);
+
+  if (type === 'histogram' && !oldHistogramMatch) {
+    type = 'native histogram';
+  }
+
   const metricData: MetricData = {
     value: metric,
     type: type,
@@ -237,6 +243,11 @@ export const promTypes: PromFilterOption[] = [
     description:
       'A histogram samples observations (usually things like request durations or response sizes) and counts them in configurable buckets.',
   },
+  {
+    value: 'native histogram',
+    description:
+      'Native histograms are different from classic Prometheus histograms in a number of ways: Native histogram bucket boundaries are calculated by a formula that depends on the scale (resolution) of the native histogram, and are not user defined.',
+  },
   {
     value: 'summary',
     description: