Loki: Updates to raw query and run query button (#47874)

* Loki: Create toggle-able raw query

* Update name

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

@@ -60,7 +60,7 @@ export function LokiQueryBuilderContainer(props: Props) {
         onChange={onVisQueryChange}
         onRunQuery={onRunQuery}
       />
-      <QueryPreview query={query.expr} />
+      {query.rawQuery && <QueryPreview query={query.expr} />}
     </>
   );
 }

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

@@ -82,29 +82,29 @@ describe('LokiQueryEditorSelector', () => {
     });
   });
 
-  // it('Can enable preview', async () => {
-  //   const { onChange } = renderWithMode(QueryEditorMode.Builder);
-  //   expect(screen.queryByLabelText('selector')).not.toBeInTheDocument();
+  it('Can enable raw query', async () => {
+    const { onChange } = renderWithMode(QueryEditorMode.Builder);
+    expect(screen.queryByLabelText('selector')).not.toBeInTheDocument();
 
-  //   screen.getByLabelText('Preview').click();
+    screen.getByLabelText('Raw query').click();
 
-  //   expect(onChange).toBeCalledWith({
-  //     refId: 'A',
-  //     expr: defaultQuery.expr,
-  //     range: true,
-  //     editorMode: QueryEditorMode.Builder,
-  //     editorPreview: true,
-  //   });
-  // });
+    expect(onChange).toBeCalledWith({
+      refId: 'A',
+      expr: defaultQuery.expr,
+      queryType: 'range',
+      editorMode: QueryEditorMode.Builder,
+      rawQuery: true,
+    });
+  });
 
-  // it('Should show preview', async () => {
-  //   renderWithProps({
-  //     editorPreview: true,
-  //     editorMode: QueryEditorMode.Builder,
-  //     expr: 'my_metric',
-  //   });
-  //   expect(screen.getByLabelText('selector').textContent).toBe('my_metric');
-  // });
+  it('Should show raw query', async () => {
+    renderWithProps({
+      rawQuery: true,
+      editorMode: QueryEditorMode.Builder,
+      expr: '{job="grafana"}',
+    });
+    expect(screen.getByLabelText('selector').textContent).toBe('{job="grafana"}');
+  });
 
   it('changes to code mode', async () => {
     const { onChange } = renderWithMode(QueryEditorMode.Builder);

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

@@ -1,10 +1,9 @@
-import { css } from '@emotion/css';
-import { GrafanaTheme2, LoadingState } from '@grafana/data';
+import { LoadingState } from '@grafana/data';
 import { EditorHeader, EditorRows, FlexItem, InlineSelect, Space } from '@grafana/experimental';
-import { Button, useStyles2, ConfirmModal } from '@grafana/ui';
+import { Button, ConfirmModal } from '@grafana/ui';
 import { QueryEditorModeToggle } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryEditorModeToggle';
 import { QueryEditorMode } from 'app/plugins/datasource/prometheus/querybuilder/shared/types';
-import React, { useCallback, useState } from 'react';
+import React, { SyntheticEvent, useCallback, useEffect, useState } from 'react';
 import { LokiQueryEditorProps } from '../../components/types';
 import { lokiQueryModeller } from '../LokiQueryModeller';
 import { getQueryWithDefaults } from '../state';
@@ -13,12 +12,15 @@ import { LokiQueryBuilderExplained } from './LokiQueryBuilderExplained';
 import { LokiQueryBuilderOptions } from './LokiQueryBuilderOptions';
 import { LokiQueryCodeEditor } from './LokiQueryCodeEditor';
 import { buildVisualQueryFromString } from '../parsing';
+import { QueryHeaderSwitch } from 'app/plugins/datasource/prometheus/querybuilder/shared/QueryHeaderSwitch';
+import { LokiQuery } from '../../types';
 
 export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props) => {
   const { onChange, onRunQuery, data } = props;
-  const styles = useStyles2(getStyles);
-  const query = getQueryWithDefaults(props.query);
   const [parseModalOpen, setParseModalOpen] = useState(false);
+  const [dataIsStale, setDataIsStale] = useState(false);
+
+  const query = getQueryWithDefaults(props.query);
 
   const onEditorModeChange = useCallback(
     (newMetricEditorMode: QueryEditorMode) => {
@@ -36,6 +38,20 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
     [onChange, query]
   );
 
+  useEffect(() => {
+    setDataIsStale(false);
+  }, [data]);
+
+  const onChangeInternal = (query: LokiQuery) => {
+    setDataIsStale(true);
+    onChange(query);
+  };
+
+  const onQueryPreviewChange = (event: SyntheticEvent<HTMLInputElement>) => {
+    const isEnabled = event.currentTarget.checked;
+    onChange({ ...query, rawQuery: isEnabled });
+  };
+
   // If no expr (ie new query) then default to builder
   const editorMode = query.editorMode ?? (query.expr ? QueryEditorMode.Code : QueryEditorMode.Builder);
   return (
@@ -52,18 +68,6 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
         onDismiss={() => setParseModalOpen(false)}
       />
       <EditorHeader>
-        <FlexItem grow={1} />
-        <Button
-          className={styles.runQuery}
-          variant="secondary"
-          size="sm"
-          fill="outline"
-          onClick={onRunQuery}
-          icon={data?.state === LoadingState.Loading ? 'fa fa-spinner' : undefined}
-          disabled={data?.state === LoadingState.Loading}
-        >
-          Run query
-        </Button>
         <InlineSelect
           value={null}
           placeholder="Query patterns"
@@ -78,6 +82,17 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
           }}
           options={lokiQueryModeller.getQueryPatterns().map((x) => ({ label: x.name, value: x }))}
         />
+        <QueryHeaderSwitch label="Raw query" value={query.rawQuery} onChange={onQueryPreviewChange} />
+        <FlexItem grow={1} />
+        <Button
+          variant={dataIsStale ? 'primary' : 'secondary'}
+          size="sm"
+          onClick={onRunQuery}
+          icon={data?.state === LoadingState.Loading ? 'fa fa-spinner' : undefined}
+          disabled={data?.state === LoadingState.Loading}
+        >
+          Run query
+        </Button>
         <QueryEditorModeToggle mode={editorMode!} onChange={onEditorModeChange} />
       </EditorHeader>
       <Space v={0.5} />
@@ -87,7 +102,7 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
           <LokiQueryBuilderContainer
             datasource={props.datasource}
             query={query}
-            onChange={onChange}
+            onChange={onChangeInternal}
             onRunQuery={props.onRunQuery}
           />
         )}
@@ -101,15 +116,3 @@ export const LokiQueryEditorSelector = React.memo<LokiQueryEditorProps>((props)
 });
 
 LokiQueryEditorSelector.displayName = 'LokiQueryEditorSelector';
-
-const getStyles = (theme: GrafanaTheme2) => {
-  return {
-    runQuery: css({
-      color: theme.colors.text.secondary,
-    }),
-    switchLabel: css({
-      color: theme.colors.text.secondary,
-      fontSize: theme.typography.bodySmall.fontSize,
-    }),
-  };
-};

public/app/plugins/datasource/loki/types.ts

@@ -42,6 +42,8 @@ export interface LokiQuery extends DataQuery {
   /* @deprecated now use queryType */
   instant?: boolean;
   editorMode?: QueryEditorMode;
+  /** Controls if the raw query text is shown */
+  rawQuery?: boolean;
 }
 
 export interface LokiOptions extends DataSourceJsonData {