Loki: Query builder, hook up instant toggle and improve inline switch (#44704)

public/app/plugins/datasource/loki/querybuilder/components/LokiQueryEditorSelector.tsx

@@ -1,12 +1,14 @@
 import { css } from '@emotion/css';
 import { GrafanaTheme2, LoadingState } from '@grafana/data';
-import { EditorHeader, FlexItem, InlineSelect, Space, Stack } from '@grafana/experimental';
+import { EditorHeader, FlexItem, InlineSelect, Space } from '@grafana/experimental';
-import { Button, Switch, useStyles2 } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
 import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
+import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
 import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types';
-import React, { useCallback, useState } from 'react';
+import React, { SyntheticEvent, useCallback, useState } from 'react';
 import { LokiQueryEditor } from '../../components/LokiQueryEditor';
 import { LokiQueryEditorProps } from '../../components/types';
+import { LokiQueryType } from '../../types';
 import { lokiQueryModeller } from '../LokiQueryModeller';
 import { getDefaultEmptyQuery, LokiVisualQuery } from '../types';
 import { LokiQueryBuilder } from './LokiQueryBuilder';
@@ -35,6 +37,11 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
     });
   };
 
+  const onInstantChange = (event: SyntheticEvent<HTMLInputElement>) => {
+    onChange({ ...query, queryType: event.currentTarget.checked ? LokiQueryType.Instant : LokiQueryType.Range });
+    onRunQuery();
+  };
+
   // If no expr (ie new query) then default to builder
   const editorMode = query.editorMode ?? (query.expr ? QueryEditorMode.Code : QueryEditorMode.Builder);
 
@@ -53,14 +60,11 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
         >
           Run query
         </Button>
-        <Stack gap={1}>
+        <QueryHeaderSwitch
-          <label className={styles.switchLabel}>Instant</label>
+          label="Instant"
-          <Switch />
+          value={query.queryType === LokiQueryType.Instant}
-        </Stack>
+          onChange={onInstantChange}
-        <Stack gap={1}>
+        />
-          <label className={styles.switchLabel}>Exemplars</label>
-          <Switch />
-        </Stack>
         <InlineSelect
           value={null}
           placeholder="Query patterns"

public/app/plugins/datasource/prometheus/querybuilder/components/PromQueryEditorSelector.tsx

@@ -1,12 +1,13 @@
 import { css } from '@emotion/css';
 import { CoreApp, GrafanaTheme2, LoadingState } from '@grafana/data';
-import { EditorHeader, FlexItem, InlineSelect, Space, Stack } from '@grafana/experimental';
+import { EditorHeader, FlexItem, InlineSelect, Space } from '@grafana/experimental';
-import { Button, Switch, useStyles2 } from '@grafana/ui';
+import { Button, useStyles2 } from '@grafana/ui';
 import React, { SyntheticEvent, useCallback, useState } from 'react';
 import { PromQueryEditor } from '../../components/PromQueryEditor';
 import { PromQueryEditorProps } from '../../components/types';
 import { promQueryModeller } from '../PromQueryModeller';
 import { QueryEditorModeToggle } from '../shared/QueryEditorModeToggle';
+import { QueryHeaderSwitch } from '../shared/QueryHeaderSwitch';
 import { QueryEditorMode } from '../shared/types';
 import { getDefaultEmptyQuery, PromVisualQuery } from '../types';
 import { PromQueryBuilder } from './PromQueryBuilder';
@@ -66,15 +67,9 @@ export const PromQueryEditorSelector = React.memo<PromQueryEditorProps>((props)
         >
           Run query
         </Button>
-        <Stack gap={1}>
+        <QueryHeaderSwitch label="Instant" value={query.instant} onChange={onInstantChange} />
-          <label className={styles.switchLabel}>Instant</label>
-          <Switch value={query.instant} onChange={onInstantChange} />
-        </Stack>
         {showExemplarSwitch && (
-          <Stack gap={1}>
+          <QueryHeaderSwitch label="Exemplars" value={query.exemplar} onChange={onExemplarChange} />
-            <label className={styles.switchLabel}>Exemplars</label>
-            <Switch value={query.exemplar} onChange={onExemplarChange} />
-          </Stack>
         )}
         {editorMode === QueryEditorMode.Builder && (
           <>

public/app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
+import { Switch, useStyles2 } from '@grafana/ui';
+import { uniqueId } from 'lodash';
+import React, { HTMLProps, useRef } from 'react';
+
+export interface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {
+  value?: boolean;
+  label: string;
+}
+
+export function QueryHeaderSwitch({ label, ...inputProps }: Props) {
+  const switchIdRef = useRef(uniqueId(`switch-${label}`));
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Stack gap={1}>
+      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>
+        {label}
+      </label>
+      <Switch {...inputProps} id={switchIdRef.current} />
+    </Stack>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    switchLabel: css({
+      color: theme.colors.text.secondary,
+      cursor: 'pointer',
+      fontSize: theme.typography.bodySmall.fontSize,
+      '&:hover': {
+        color: theme.colors.text.primary,
+      },
+    }),
+  };
+};