Service selection: Replacing datasource resource calls with query runners

src/Components/IndexScene/IndexScene.tsx

@@ -31,17 +31,25 @@ import {
   VAR_LINE_FILTER,
   VAR_LOGS_FORMAT,
   VAR_PATTERNS,
+  VAR_SERVICE_EXPR,
+  VAR_SERVICE_EXPR_HACK,
 } from 'services/variables';
 
 import { addLastUsedDataSourceToStorage, getLastUsedDataSourceFromStorage } from 'services/store';
 import { ServiceScene } from '../ServiceScene/ServiceScene';
 import { LayoutScene } from './LayoutScene';
 import { FilterOp } from 'services/filters';
 import { getDrilldownSlug, PageSlugs } from '../../services/routing';
-import { ServiceSelectionScene } from '../ServiceSelectionScene/ServiceSelectionScene';
+import { SERVICE_NAME, ServiceSelectionScene } from '../ServiceSelectionScene/ServiceSelectionScene';
 import { LoadingPlaceholder } from '@grafana/ui';
 import { locationService } from '@grafana/runtime';
-import { renderLogQLFieldFilters, renderLogQLStreamSelector, renderPatternFilters } from 'services/query';
+import {
+  buildResourceQuery,
+  renderLogQLFieldFilters,
+  renderLogQLStreamSelector,
+  renderPatternFilters,
+} from 'services/query';
+import { getQueryRunner } from '../../services/panel';
 
 export interface AppliedPattern {
   pattern: string;
@@ -158,7 +166,14 @@ export class IndexScene extends SceneObjectBase<IndexSceneState> {
 function getContentScene(drillDownLabel?: string) {
   const slug = getDrilldownSlug();
   if (slug === PageSlugs.explore) {
-    return new ServiceSelectionScene({});
+    const $data = getQueryRunner(
+      buildResourceQuery(
+        // passing in the hack string will force the query to be re-run when the datasource changes, we'll remove it before interpolating so it should have no impact on the actual query being executed
+        `{${SERVICE_NAME}=~\`${VAR_SERVICE_EXPR}.+\` ${VAR_SERVICE_EXPR_HACK} }`,
+        'volume'
+      )
+    );
+    return new ServiceSelectionScene({ $data });
   }
 
   return new ServiceScene({ drillDownLabel });

src/Components/ServiceSelectionScene/SelectServiceButton.tsx

@@ -13,7 +13,7 @@ import {
 import { Button } from '@grafana/ui';
 import { VariableHide } from '@grafana/schema';
 import { addToFavoriteServicesInStorage } from 'services/store';
-import { getDataSourceVariable, getLabelsVariable } from 'services/variables';
+import { getDataSourceVariable, getLabelsVariable, getServiceSelectionStringVariable } from 'services/variables';
 import { SERVICE_NAME, ServiceSelectionScene } from './ServiceSelectionScene';
 import { reportAppInteraction, USER_EVENTS_ACTIONS, USER_EVENTS_PAGES } from 'services/analytics';
 import { FilterOp } from 'services/filters';
@@ -63,11 +63,9 @@ export function selectService(service: string, sceneRef: SceneObject) {
 
   setParserIfFrameExistsForService(service, sceneRef);
 
-  const serviceSelectionScene = sceneGraph.getAncestor(sceneRef, ServiceSelectionScene);
-  // Setting the service variable state triggers a re-query of the services with invalid queries, so we clear out the body state to avoid triggering queries since
-  serviceSelectionScene.setState({
-    servicesToQuery: undefined,
-  });
+  const serviceSelectionVariable = getServiceSelectionStringVariable(sceneRef);
+  // Reset the service selection search to show all services
+  serviceSelectionVariable.changeValueTo('');
 
   variable.setState({
     filters: [