fix(Labels): Fix "Discarded by user" error in the UI

src/pages/ProfilesExplorerView/components/SceneByVariableRepeaterGrid/components/SceneErrorState/SceneErrorState.tsx

@@ -10,7 +10,7 @@ export class SceneErrorState extends SceneObjectBase<SceneErrorStateState> {
   public static Component = ({ model }: SceneComponentProps<SceneErrorState>) => {
     const { message } = model.useState();
     return (
-      <Alert title="Query error" severity="error">
+      <Alert title="Query error!" severity="error">
         {message}
       </Alert>
     );

src/pages/ProfilesExplorerView/domain/variables/GroupByVariable/GroupByVariable.tsx

@@ -93,16 +93,14 @@ export class GroupByVariable extends QueryVariable {
       console.error(error);
 
       return (
-        <>
-          <Field label="Group by labels">
-            <div className={styles.groupByErrorContainer}>
-              <Tooltip theme="error" content={error.toString()}>
-                <Icon className={styles.iconError} name="exclamation-triangle" size="xl" />
-              </Tooltip>
-              <RefreshPicker noIntervalPicker onRefresh={model.update} isOnCanvas={false} onIntervalChanged={noOp} />
-            </div>
-          </Field>
-        </>
+        <Field label="Group by labels">
+          <div className={styles.groupByErrorContainer}>
+            <Tooltip theme="error" content={error.toString()}>
+              <Icon className={styles.iconError} name="exclamation-triangle" size="xl" />
+            </Tooltip>
+            <RefreshPicker noIntervalPicker onRefresh={model.update} isOnCanvas={false} onIntervalChanged={noOp} />
+          </div>
+        </Field>
       );
     }
 

src/pages/ProfilesExplorerView/infrastructure/labels/LabelsDataSource.ts

@@ -9,37 +9,30 @@ import {
 } from '@grafana/data';
 import { RuntimeDataSource, sceneGraph } from '@grafana/scenes';
 import { isPrivateLabel } from '@shared/components/QueryBuilder/domain/helpers/isPrivateLabel';
-import { labelsRepository } from '@shared/infrastructure/labels/labelsRepository';
+import { LabelsRepository } from '@shared/infrastructure/labels/labelsRepository';
+import { MemoryCacheClient } from '@shared/infrastructure/MemoryCacheClient';
 
 import { GroupByVariable } from '../../domain/variables/GroupByVariable/GroupByVariable';
 import { computeRoundedTimeRange } from '../../helpers/computeRoundedTimeRange';
 import { PYROSCOPE_LABELS_DATA_SOURCE } from '../pyroscope-data-sources';
 import { DataSourceProxyClientBuilder } from '../series/http/DataSourceProxyClientBuilder';
 import { LabelsApiClient } from './http/LabelsApiClient';
 
+// we instantiate a new repository here to prevent unwanted interaction with the QueryBuilder
+// indeed, when entering the "idle" state, the QueryBuilder state machine will call cancelAllLoad()
+// that will abort any ApiClient in-flight request
+const labelsRepository = new LabelsRepository({
+  apiClient: new LabelsApiClient({ dataSourceUid: '' }),
+  cacheClient: new MemoryCacheClient(),
+});
+
 export class LabelsDataSource extends RuntimeDataSource {
   static MAX_TIMESERIES_LABEL_VALUES = 10;
 
   constructor() {
     super(PYROSCOPE_LABELS_DATA_SOURCE.type, PYROSCOPE_LABELS_DATA_SOURCE.uid);
   }
 
-  async fetchLabels(dataSourceUid: string, query: string, from: number, to: number) {
-    const labelsApiClient = DataSourceProxyClientBuilder.build(dataSourceUid, LabelsApiClient) as LabelsApiClient;
-
-    labelsRepository.setApiClient(labelsApiClient);
-
-    return labelsRepository.listLabels({ query, from, to });
-  }
-
-  async fetchLabelValues(dataSourceUid: string, query: string, from: number, to: number, label: string) {
-    const labelsApiClient = DataSourceProxyClientBuilder.build(dataSourceUid, LabelsApiClient) as LabelsApiClient;
-
-    labelsRepository.setApiClient(labelsApiClient);
-
-    return labelsRepository.listLabelValues({ query, from, to, label });
-  }
-
   async query(): Promise<DataQueryResponse> {
     return {
       state: LoadingState.Done,
@@ -60,18 +53,40 @@ export class LabelsDataSource extends RuntimeDataSource {
     };
   }
 
-  async metricFindQuery(query: string, options: LegacyMetricFindQueryOptions): Promise<MetricFindValue[]> {
+  getParams(options: LegacyMetricFindQueryOptions) {
     const { scopedVars, range } = options;
     const sceneObject = scopedVars?.__sceneObject?.value as GroupByVariable;
 
+    const dataSourceUid = sceneGraph.interpolate(sceneObject, '$dataSource');
+    const serviceName = sceneGraph.interpolate(sceneObject, '$serviceName');
+    const profileMetricId = sceneGraph.interpolate(sceneObject, '$profileMetricId');
+
+    // we could interpolate ad hoc filters, but the Labels exploration type would reload all labels each time they are modified
+    // const filters = sceneGraph.interpolate(sceneObject, '$filters');
+    // const pyroscopeQuery = `${profileMetricId}{service_name="${serviceName}",${filters}}`;
+    const query = `${profileMetricId}{service_name="${serviceName}"}`;
+
+    const { from, to } = computeRoundedTimeRange(range as TimeRange);
+
+    return {
+      dataSourceUid,
+      serviceName,
+      profileMetricId,
+      query,
+      from,
+      to,
+    };
+  }
+
+  async metricFindQuery(_: string, options: LegacyMetricFindQueryOptions): Promise<MetricFindValue[]> {
+    const sceneObject = options.scopedVars?.__sceneObject?.value as GroupByVariable;
+
     // save bandwidth
     if (!sceneObject.isActive) {
       return [];
     }
 
-    const dataSourceUid = sceneGraph.interpolate(sceneObject, '$dataSource');
-    const serviceName = sceneGraph.interpolate(sceneObject, '$serviceName');
-    const profileMetricId = sceneGraph.interpolate(sceneObject, '$profileMetricId');
+    const { dataSourceUid, serviceName, profileMetricId, query, from, to } = this.getParams(options);
 
     if (!serviceName || !profileMetricId) {
       console.warn(
@@ -82,22 +97,19 @@ export class LabelsDataSource extends RuntimeDataSource {
       return [];
     }
 
-    // we could interpolate ad hoc filters, but the Service labels exploration type would reload all labels each time they are modified
-    // const filters = sceneGraph.interpolate(sceneObject, '$filters');
-    // const pyroscopeQuery = `${profileMetricId}{service_name="${serviceName}",${filters}}`;
-    const pyroscopeQuery = `${profileMetricId}{service_name="${serviceName}"}`;
-
-    const { from, to } = computeRoundedTimeRange(range as TimeRange);
+    labelsRepository.setApiClient(
+      DataSourceProxyClientBuilder.build(dataSourceUid, LabelsApiClient) as LabelsApiClient
+    );
 
-    const labels = await this.fetchLabels(dataSourceUid, pyroscopeQuery, from, to);
+    const labels = await labelsRepository.listLabels({ query, from, to });
 
     const sortedLabelsWithCounts = (
       await Promise.all(
         labels
           .filter(({ value }) => !isPrivateLabel(value))
           .sort((a, b) => a.label.localeCompare(b.label))
           .map(async ({ value }) => {
-            const values = (await this.fetchLabelValues(dataSourceUid, pyroscopeQuery, from, to, value)).map(
+            const values = (await labelsRepository.listLabelValues({ query, from, to, label: value })).map(
               ({ value }) => value
             );
             const count = values.length;

src/shared/components/QueryBuilder/domain/helpers/filtersToQuery.ts

@@ -6,9 +6,9 @@ export function filtersToQuery(query: string, filters: Filters) {
     .map((filter) => {
       const { attribute, operator, value } = filter as CompleteFilter;
 
-      if (operator.value === OperatorKind.in) {
-        return `${attribute.value}=~"${value.value}"`;
-      }
+      // if (operator.value === OperatorKind.in) {
+      //   return `${attribute.value}=~"${value.value}"`;
+      // }
 
       // TODO: use "attribute-operator" FilterKind? We still set a value for these filters that we could use here.
       if (operator.value === OperatorKind['is-empty']) {

src/shared/components/QueryBuilder/domain/helpers/queryToFilters.ts

@@ -48,23 +48,23 @@ export function queryToFilters(query: string): Filters {
         };
       }
 
-      const shouldChangeToInOperator = operator === OperatorKind['=~'] && value.includes('|');
-      if (shouldChangeToInOperator) {
-        return {
-          id: nanoid(10),
-          type: FilterKind['attribute-operator-value'],
-          active: true,
-          attribute: { value: attribute, label: attribute },
-          operator: { value: OperatorKind.in, label: OperatorKind.in },
-          value: {
-            value: value,
-            label: value
-              .split('|')
-              .map((v) => v.trim())
-              .join(', '),
-          },
-        };
-      }
+      // const shouldChangeToInOperator = operator === OperatorKind['=~'] && value.includes('|');
+      // if (shouldChangeToInOperator) {
+      //   return {
+      //     id: nanoid(10),
+      //     type: FilterKind['attribute-operator-value'],
+      //     active: true,
+      //     attribute: { value: attribute, label: attribute },
+      //     operator: { value: OperatorKind.in, label: OperatorKind.in },
+      //     value: {
+      //       value: value,
+      //       label: value
+      //         .split('|')
+      //         .map((v) => v.trim())
+      //         .join(', '),
+      //     },
+      //   };
+      // }
 
       return {
         id: nanoid(10),

src/shared/components/QueryBuilder/domain/stateMachine.ts

@@ -69,7 +69,7 @@ export function buildStateMachine(inputParams: InputParams) {
     ...defaultContext,
     inputParams,
     query,
-    // See changeInputParams() in src/overrides/components/TagsBar/QueryBuilder/domain/actions.ts
+    // See changeInputParams() in domain/actions.ts
     filters: queryToFilters(query),
   };
 

src/shared/infrastructure/labels/labelsRepository.ts

@@ -15,7 +15,7 @@ type ListLabelValuesOptions = ListLabelsOptions & {
   label: string;
 };
 
-class LabelsRepository extends AbstractRepository<LabelsApiClient, MemoryCacheClient> {
+export class LabelsRepository extends AbstractRepository<LabelsApiClient, MemoryCacheClient> {
   cacheClient: MemoryCacheClient;
 
   static isNotMetaLabelOrServiceName = (label: string) => !/^(__.+__|service_name)$/.test(label);