Explore/Prometheus: Update default query type option to "Both" (#28935)

* Update default option to 'both'

* Update public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Fix running of queries for both

* Update wording

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

public/app/plugins/datasource/prometheus/components/PromExploreExtraField.tsx

@@ -34,7 +34,12 @@ export const PromExploreExtraField: React.FC<PromExploreExtraFieldProps> = memo(
           )}
           )}
           aria-label="Query type field"
           aria-label="Query type field"
         >
         >
-          <InlineFormLabel width={5}>Query type</InlineFormLabel>
+          <InlineFormLabel
+            width="auto"
+            tooltip="Choose the type of query you would like to run. An instant query queries against a single point in time. A range query queries over a range of time. With both, you'll run two queries - one instant and one range. "
+          >
+            Query type
+          </InlineFormLabel>
 
 
           <RadioButtonGroup options={rangeOptions} value={queryType} onChange={onQueryTypeChange} />
           <RadioButtonGroup options={rangeOptions} value={queryType} onChange={onQueryTypeChange} />
         </div>
         </div>

public/app/plugins/datasource/prometheus/components/PromExploreQueryEditor.tsx

@@ -57,7 +57,8 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
       data={data}
       data={data}
       ExtraFieldElement={
       ExtraFieldElement={
         <PromExploreExtraField
         <PromExploreExtraField
-          queryType={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
+          // Select "both" as default option when Explore is opened. In legacy requests, range and instant can be undefined. In this case, we want to run queries with "both".
+          queryType={query.range === query.instant ? 'both' : query.instant ? 'instant' : 'range'}
           stepValue={query.interval || ''}
           stepValue={query.interval || ''}
           onQueryTypeChange={onQueryTypeChange}
           onQueryTypeChange={onQueryTypeChange}
           onStepChange={onStepChange}
           onStepChange={onStepChange}

public/app/plugins/datasource/prometheus/components/__snapshots__/PromExploreQueryEditor.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`PromExploreQueryEditor should render component 1`] = `
       onKeyDownFunc={[Function]}
       onKeyDownFunc={[Function]}
       onQueryTypeChange={[Function]}
       onQueryTypeChange={[Function]}
       onStepChange={[Function]}
       onStepChange={[Function]}
-      queryType="range"
+      queryType="both"
       stepValue="1s"
       stepValue="1s"
     />
     />
   }
   }

public/app/plugins/datasource/prometheus/datasource.ts

@@ -171,8 +171,8 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
 
 
       target.requestId = options.panelId + target.refId;
       target.requestId = options.panelId + target.refId;
 
 
-      if (target.range && target.instant) {
-        // If running both (only available in Explore) - instant and range query, prepare both targets
+      // In Explore, we run both (instant and range) queries if both are true (selected) or both are undefined (legacy Explore queries)
+      if (options.app === CoreApp.Explore && target.range === target.instant) {
         // Create instant target
         // Create instant target
         const instantTarget: any = cloneDeep(target);
         const instantTarget: any = cloneDeep(target);
         instantTarget.format = 'table';
         instantTarget.format = 'table';
@@ -194,8 +194,8 @@ export class PrometheusDatasource extends DataSourceApi<PromQuery, PromOptions>
           this.createQuery(instantTarget, options, start, end),
           this.createQuery(instantTarget, options, start, end),
           this.createQuery(rangeTarget, options, start, end)
           this.createQuery(rangeTarget, options, start, end)
         );
         );
-      } else if (target.instant && options.app === CoreApp.Explore) {
         // If running only instant query in Explore, format as table
         // If running only instant query in Explore, format as table
+      } else if (target.instant && options.app === CoreApp.Explore) {
         const instantTarget: any = cloneDeep(target);
         const instantTarget: any = cloneDeep(target);
         instantTarget.format = 'table';
         instantTarget.format = 'table';
         queries.push(this.createQuery(instantTarget, options, start, end));
         queries.push(this.createQuery(instantTarget, options, start, end));