From d301b6611f7a7b2571e890fae7e8a4fb2df78b6f Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Fri, 10 Jun 2022 17:31:47 -0400
Subject: [PATCH] SearchV2: move search parameters to a nested object (#50561)
 (#50635)

(cherry picked from commit b6f97e81012c2623e3c02c5aa0dbe122c987ccf5)

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
---
 pkg/tsdb/grafanads/grafana.go                 |  10 +-
 public/app/features/search/service/bluge.ts   |  24 ++--
 .../grafana/components/QueryEditor.tsx        | 105 +++++-------------
 .../grafana/components/SearchEditor.tsx       |  80 +++++++++++++
 .../app/plugins/datasource/grafana/types.ts   |   5 +-
 5 files changed, 129 insertions(+), 95 deletions(-)
 create mode 100644 public/app/plugins/datasource/grafana/components/SearchEditor.tsx

diff --git a/pkg/tsdb/grafanads/grafana.go b/pkg/tsdb/grafanads/grafana.go
index 72e4ccd3d95..14938bfc7af 100644
--- a/pkg/tsdb/grafanads/grafana.go
+++ b/pkg/tsdb/grafanads/grafana.go
@@ -156,13 +156,17 @@ func (s *Service) doRandomWalk(query backend.DataQuery) backend.DataResponse {
 }
 
 func (s *Service) doSearchQuery(ctx context.Context, req *backend.QueryDataRequest, query backend.DataQuery) backend.DataResponse {
-	q := searchV2.DashboardQuery{}
-	err := json.Unmarshal(query.JSON, &q)
+	m := requestModel{}
+	err := json.Unmarshal(query.JSON, &m)
 	if err != nil {
 		return backend.DataResponse{
 			Error: err,
 		}
 	}
+	return *s.search.DoDashboardQuery(ctx, req.PluginContext.User, req.PluginContext.OrgID, m.Search)
+}
 
-	return *s.search.DoDashboardQuery(ctx, req.PluginContext.User, req.PluginContext.OrgID, q)
+type requestModel struct {
+	QueryType string                  `json:"queryType"`
+	Search    searchV2.DashboardQuery `json:"search,omitempty"`
 }
diff --git a/public/app/features/search/service/bluge.ts b/public/app/features/search/service/bluge.ts
index 38886ba369b..cf37a55479e 100644
--- a/public/app/features/search/service/bluge.ts
+++ b/public/app/features/search/service/bluge.ts
@@ -19,13 +19,15 @@ export class BlugeSearcher implements GrafanaSearcher {
   async tags(query: SearchQuery): Promise<TermCount[]> {
     const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
     const target = {
-      ...query,
-      refId: 'A',
+      refId: 'TagsQuery',
       queryType: GrafanaQueryType.Search,
-      query: query.query ?? '*',
-      sort: undefined, // no need to sort the initial query results (not used)
-      facet: [{ field: 'tag' }],
-      limit: 1, // 0 would be better, but is ignored by the backend
+      search: {
+        ...query,
+        query: query.query ?? '*',
+        sort: undefined, // no need to sort the initial query results (not used)
+        facet: [{ field: 'tag' }],
+        limit: 1, // 0 would be better, but is ignored by the backend
+      },
     };
 
     const data = (
@@ -67,11 +69,13 @@ const nextPageSizes = 100;
 async function doSearchQuery(query: SearchQuery): Promise<QueryResponse> {
   const ds = (await getDataSourceSrv().get('-- Grafana --')) as GrafanaDatasource;
   const target = {
-    ...query,
-    refId: 'A',
+    refId: 'Search',
     queryType: GrafanaQueryType.Search,
-    query: query.query ?? '*',
-    limit: firstPageSize,
+    search: {
+      ...query,
+      query: query.query ?? '*',
+      limit: firstPageSize,
+    },
   };
   const rsp = await lastValueFrom(
     ds.query({
diff --git a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
index 668cb94b65c..a72bd5bd881 100644
--- a/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/grafana/components/QueryEditor.tsx
@@ -9,13 +9,15 @@ import {
   DataFrame,
 } from '@grafana/data';
 import { config, getBackendSrv, getDataSourceSrv } from '@grafana/runtime';
-import { InlineField, Select, Alert, Input, InlineFieldRow, CodeEditor } from '@grafana/ui';
+import { InlineField, Select, Alert, Input, InlineFieldRow } from '@grafana/ui';
 import { hasAlphaPanels } from 'app/core/config';
 import { SearchQuery } from 'app/features/search/service';
 
 import { GrafanaDatasource } from '../datasource';
 import { defaultQuery, GrafanaQuery, GrafanaQueryType } from '../types';
 
+import SearchEditor from './SearchEditor';
+
 type Props = QueryEditorProps<GrafanaDatasource, GrafanaQuery>;
 
 const labelWidth = 12;
@@ -342,103 +344,46 @@ export class QueryEditor extends PureComponent<Props, State> {
     );
   }
 
-  handleSearchEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key !== 'Enter') {
-      return;
-    }
-    this.checkAndUpdateValue('query', (e.target as any).value);
+  onSearchChange = (search: SearchQuery) => {
+    const { query, onChange, onRunQuery } = this.props;
+
+    onChange({
+      ...query,
+      search,
+    });
+    onRunQuery();
   };
 
-  handleSearchBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    this.checkAndUpdateValue('query', e.target.value);
-  };
-
-  onSaveSearchJSON = (rawSearchJSON: string) => {
-    try {
-      const json = JSON.parse(rawSearchJSON) as GrafanaQuery;
-      json.queryType = GrafanaQueryType.Search;
-      this.props.onChange(json);
-      this.props.onRunQuery();
-    } catch (ex) {
-      console.log('UNABLE TO parse search', rawSearchJSON, ex);
-    }
-  };
-
-  renderSearch() {
-    let query = (this.props.query ?? {}) as SearchQuery;
-    const emptySearchQuery: SearchQuery = {
-      query: '*',
-      location: '', // general, etc
-      ds_uid: '',
-      sort: 'score desc',
-      tags: [],
-      kind: ['dashboard', 'folder'],
-      uid: [],
-      id: [],
-      explain: true,
-      accessInfo: true,
-      facet: [{ field: 'kind' }, { field: 'tag' }, { field: 'location' }],
-      hasPreview: 'dark',
-      from: 0,
-      limit: 20,
-    };
-
-    const json = JSON.stringify(query ?? {}, null, 2);
-    for (const [key, val] of Object.entries(emptySearchQuery)) {
-      if ((query as any)[key] == null) {
-        (query as any)[key] = val;
-      }
-    }
-
-    return (
-      <>
-        <Alert title="Grafana Search" severity="info">
-          This interface to the grafana search API is experimental, and subject to change at any time without notice
-        </Alert>
-        <InlineFieldRow>
-          <InlineField label="Query" grow={true} labelWidth={labelWidth}>
-            <Input
-              placeholder="Everything"
-              defaultValue={query.query ?? ''}
-              onKeyDown={this.handleSearchEnterKey}
-              onBlur={this.handleSearchBlur}
-              spellCheck={false}
-            />
-          </InlineField>
-        </InlineFieldRow>
-        <CodeEditor
-          height={300}
-          language="json"
-          value={json}
-          onBlur={this.onSaveSearchJSON}
-          onSave={this.onSaveSearchJSON}
-          showMiniMap={true}
-          showLineNumbers={true}
-        />
-      </>
-    );
-  }
-
   render() {
     const query = {
       ...defaultQuery,
       ...this.props.query,
     };
 
+    const { queryType } = query;
+
     return (
       <>
+        {queryType === GrafanaQueryType.Search && (
+          <Alert title="Grafana Search" severity="info">
+            Using this datasource to call the new search system is experimental, and subject to change at any time
+            without notice.
+          </Alert>
+        )}
         <InlineFieldRow>
           <InlineField label="Query type" grow={true} labelWidth={labelWidth}>
             <Select
               options={this.queryTypes}
-              value={this.queryTypes.find((v) => v.value === query.queryType) || this.queryTypes[0]}
+              value={this.queryTypes.find((v) => v.value === queryType) || this.queryTypes[0]}
               onChange={this.onQueryTypeChange}
             />
           </InlineField>
         </InlineFieldRow>
-        {query.queryType === GrafanaQueryType.LiveMeasurements && this.renderMeasurementsQuery()}
-        {query.queryType === GrafanaQueryType.List && this.renderListPublicFiles()}
-        {query.queryType === GrafanaQueryType.Search && this.renderSearch()}
+        {queryType === GrafanaQueryType.LiveMeasurements && this.renderMeasurementsQuery()}
+        {queryType === GrafanaQueryType.List && this.renderListPublicFiles()}
+        {queryType === GrafanaQueryType.Search && (
+          <SearchEditor value={query.search ?? {}} onChange={this.onSearchChange} />
+        )}
       </>
     );
   }
diff --git a/public/app/plugins/datasource/grafana/components/SearchEditor.tsx b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
new file mode 100644
index 00000000000..f0a52cdbe08
--- /dev/null
+++ b/public/app/plugins/datasource/grafana/components/SearchEditor.tsx
@@ -0,0 +1,80 @@
+import React, { useEffect, useState } from 'react';
+
+import { InlineField, Input, InlineFieldRow, CodeEditor } from '@grafana/ui';
+import { SearchQuery } from 'app/features/search/service';
+
+interface Props {
+  value: SearchQuery;
+  onChange: (value: SearchQuery) => void;
+}
+
+export default function SearchEditor({ value, onChange }: Props) {
+  const [json, setJSON] = useState('');
+  const [query, setQuery] = useState(value.query ?? '');
+
+  useEffect(() => {
+    const emptySearchQuery: SearchQuery = {
+      query: '*',
+      location: '', // general, etc
+      ds_uid: '',
+      sort: '',
+      tags: [],
+      kind: [],
+      explain: false,
+      facet: [{ field: 'kind' }, { field: 'tags' }],
+      from: 0,
+      limit: 20,
+    };
+
+    setJSON(JSON.stringify({ ...emptySearchQuery, ...value }, null, 2));
+  }, [value]);
+
+  const handleSearchBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (query !== value.query) {
+      onChange({ ...value, query });
+    }
+  };
+
+  const handleSearchEnterKey = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key !== 'Enter') {
+      return;
+    }
+    handleSearchBlur(e as any);
+  };
+
+  const onSaveSearchJSON = (rawSearchJSON: string) => {
+    try {
+      const searchQuery = JSON.parse(rawSearchJSON) as SearchQuery;
+      onChange(searchQuery);
+      setQuery(searchQuery.query ?? '');
+    } catch (ex) {
+      console.log('UNABLE TO parse search', rawSearchJSON, ex);
+    }
+  };
+
+  return (
+    <>
+      <InlineFieldRow>
+        <InlineField label="Query" grow={true} labelWidth={12}>
+          <Input
+            placeholder="Everything"
+            value={query}
+            onChange={(e) => setQuery(e.currentTarget.value)}
+            onKeyDown={handleSearchEnterKey}
+            onBlur={handleSearchBlur}
+            spellCheck={false}
+          />
+        </InlineField>
+      </InlineFieldRow>
+      <CodeEditor
+        height={300}
+        language="json"
+        value={json}
+        onBlur={onSaveSearchJSON}
+        onSave={onSaveSearchJSON}
+        showMiniMap={false}
+        showLineNumbers={true}
+      />
+    </>
+  );
+}
diff --git a/public/app/plugins/datasource/grafana/types.ts b/public/app/plugins/datasource/grafana/types.ts
index 1773d251f97..76d83798fe5 100644
--- a/public/app/plugins/datasource/grafana/types.ts
+++ b/public/app/plugins/datasource/grafana/types.ts
@@ -1,5 +1,6 @@
 import { DataQuery } from '@grafana/data';
 import { LiveDataFilter } from '@grafana/runtime';
+import { SearchQuery } from 'app/features/search/service';
 
 //----------------------------------------------
 // Query
@@ -22,8 +23,8 @@ export interface GrafanaQuery extends DataQuery {
   filter?: LiveDataFilter;
   buffer?: number;
   path?: string; // for list and read
-  query?: string; // for query endpoint
-} // NOTE, query will have more field!!!
+  search?: SearchQuery;
+}
 
 export const defaultQuery: GrafanaQuery = {
   refId: 'A',