Explore: Remove not running query for collapsed elements (#27026)

* Make graph and table collapsing just a UI thing

* Remove showingGraph and showingTable, set them defaultly to true

* Remove collaapsing for panels in Explore

* UI toggle WiP

* WIP, add query type

* Refactor, clean up

* Update tests

* Clean uo

* Update rangeAll to range and instant

* Remove console logs

* Update packages/grafana-data/src/types/datasource.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/core/utils/explore.ts

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Fix prettier error

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

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

@@ -1,7 +1,9 @@
 import React, { memo, FC } from 'react';
+import { css } from 'emotion';
 
 // Types
 import { ExploreQueryFieldProps } from '@grafana/data';
+import { RadioButtonGroup } from '@grafana/ui';
 
 import { PrometheusDatasource } from '../datasource';
 import { PromQuery, PromOptions } from '../types';
@@ -26,6 +28,19 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
     }
   }
 
+  function onQueryTypeChange(value: string) {
+    const { query, onChange } = props;
+    let nextQuery;
+    if (value === 'instant') {
+      nextQuery = { ...query, instant: true, range: false };
+    } else if (value === 'range') {
+      nextQuery = { ...query, instant: false, range: true };
+    } else {
+      nextQuery = { ...query, instant: true, range: true };
+    }
+    onChange(nextQuery);
+  }
+
   function onReturnKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
     if (e.key === 'Enter') {
       onRunQuery();
@@ -33,27 +48,62 @@ export const PromExploreQueryEditor: FC<Props> = (props: Props) => {
   }
 
   return (
-    <PromQueryField
-      datasource={datasource}
-      query={query}
-      onRunQuery={onRunQuery}
-      onChange={onChange}
-      onBlur={() => {}}
-      history={history}
-      data={data}
-      ExtraFieldElement={
-        <PromExploreExtraField
-          label={'Step'}
-          onChangeFunc={onStepChange}
-          onKeyDownFunc={onReturnKeyDown}
-          value={query.interval || ''}
-          hasTooltip={true}
-          tooltipContent={
-            'Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
-          }
-        />
-      }
-    />
+    <>
+      <PromQueryField
+        datasource={datasource}
+        query={query}
+        onRunQuery={onRunQuery}
+        onChange={onChange}
+        onBlur={() => {}}
+        history={history}
+        data={data}
+        ExtraFieldElement={
+          <PromExploreExtraField
+            label={'Step'}
+            onChangeFunc={onStepChange}
+            onKeyDownFunc={onReturnKeyDown}
+            value={query.interval || ''}
+            hasTooltip={true}
+            tooltipContent={
+              'Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)'
+            }
+          />
+        }
+      />
+      <PromExploreRadioButton
+        selected={query.range && query.instant ? 'both' : query.instant ? 'instant' : 'range'}
+        onQueryTypeChange={onQueryTypeChange}
+      />
+    </>
+  );
+};
+
+type PromExploreRadioButtonProps = {
+  selected: string;
+  onQueryTypeChange: (value: string) => void;
+};
+
+const PromExploreRadioButton: React.FunctionComponent<PromExploreRadioButtonProps> = ({
+  selected,
+  onQueryTypeChange,
+}) => {
+  const rangeOptions = [
+    { value: 'range', label: 'Range' },
+    { value: 'instant', label: 'Instant' },
+    { value: 'both', label: 'Both' },
+  ];
+
+  return (
+    <div
+      className={css`
+        display: flex;
+      `}
+    >
+      <button className={`gf-form-label gf-form-label--btn width-5`}>
+        <span className="btn-title">Query type</span>
+      </button>
+      <RadioButtonGroup options={rangeOptions} value={selected} onChange={onQueryTypeChange} />
+    </div>
   );
 };
 

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

@@ -326,7 +326,7 @@ class PromQueryField extends React.PureComponent<PromQueryFieldProps, PromQueryF
     return (
       <>
         <div className="gf-form-inline gf-form-inline--xs-view-flex-column flex-grow-1">
-          <div className="gf-form flex-shrink-0">
+          <div className="gf-form flex-shrink-0 min-width-5">
             <ButtonCascader options={metricsOptions} disabled={buttonDisabled} onChange={this.onChangeMetrics}>
               {chooserText}
             </ButtonCascader>

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

@@ -1,26 +1,43 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`PromExploreQueryEditor should render component 1`] = `
-<PromQueryField
-  ExtraFieldElement={
-    <PromExploreExtraField
-      hasTooltip={true}
-      label="Step"
-      onChangeFunc={[Function]}
-      onKeyDownFunc={[Function]}
-      tooltipContent="Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)"
-      value="1s"
-    />
-  }
-  data={
-    Object {
-      "request": Object {
-        "app": "Grafana",
-        "dashboardId": 1,
-        "interval": "1s",
-        "intervalMs": 1000,
-        "panelId": 1,
-        "range": Object {
+<Fragment>
+  <PromQueryField
+    ExtraFieldElement={
+      <PromExploreExtraField
+        hasTooltip={true}
+        label="Step"
+        onChangeFunc={[Function]}
+        onKeyDownFunc={[Function]}
+        tooltipContent="Time units can be used here, for example: 5s, 1m, 3h, 1d, 1y (Default if no unit is specified: s)"
+        value="1s"
+      />
+    }
+    data={
+      Object {
+        "request": Object {
+          "app": "Grafana",
+          "dashboardId": 1,
+          "interval": "1s",
+          "intervalMs": 1000,
+          "panelId": 1,
+          "range": Object {
+            "from": "2020-01-01T00:00:00.000Z",
+            "raw": Object {
+              "from": "2020-01-01T00:00:00.000Z",
+              "to": "2020-01-02T00:00:00.000Z",
+            },
+            "to": "2020-01-02T00:00:00.000Z",
+          },
+          "requestId": "1",
+          "scopedVars": Object {},
+          "startTime": 0,
+          "targets": Array [],
+          "timezone": "GMT",
+        },
+        "series": Array [],
+        "state": "NotStarted",
+        "timeRange": Object {
           "from": "2020-01-01T00:00:00.000Z",
           "raw": Object {
             "from": "2020-01-01T00:00:00.000Z",
@@ -28,35 +45,24 @@ exports[`PromExploreQueryEditor should render component 1`] = `
           },
           "to": "2020-01-02T00:00:00.000Z",
         },
-        "requestId": "1",
-        "scopedVars": Object {},
-        "startTime": 0,
-        "targets": Array [],
-        "timezone": "GMT",
-      },
-      "series": Array [],
-      "state": "NotStarted",
-      "timeRange": Object {
-        "from": "2020-01-01T00:00:00.000Z",
-        "raw": Object {
-          "from": "2020-01-01T00:00:00.000Z",
-          "to": "2020-01-02T00:00:00.000Z",
-        },
-        "to": "2020-01-02T00:00:00.000Z",
-      },
+      }
     }
-  }
-  datasource={Object {}}
-  history={Array []}
-  onBlur={[Function]}
-  onChange={[MockFunction]}
-  onRunQuery={[MockFunction]}
-  query={
-    Object {
-      "expr": "",
-      "interval": "1s",
-      "refId": "A",
+    datasource={Object {}}
+    history={Array []}
+    onBlur={[Function]}
+    onChange={[MockFunction]}
+    onRunQuery={[MockFunction]}
+    query={
+      Object {
+        "expr": "",
+        "interval": "1s",
+        "refId": "A",
+      }
     }
-  }
-/>
+  />
+  <PromExploreRadioButton
+    onQueryTypeChange={[Function]}
+    selected="range"
+  />
+</Fragment>
 `;