Recorded Queries: Adding create and add recorded query buttons to (#38049)

* add create and add buttons that will be linked to enterprise

* wip

* wip

* clean up

* Co-authored-by: Travis Patterson <masslessparticle@gmail.com>
Added Query Modal that can be accessed from enterprise.

* reset docs

* reset docs

* docs changing

* docs

* docs

* unexporting props

* added generic ways to add more query actions and create actions

* cleanup

* adding internal tag

* adding onAddQuery to props so actions can add queries

* created a single query action component

* adding partial to query

* casting dataquery

Co-authored-by: Travis Patterson <travis.patterson@grafana.com>

packages/grafana-data/src/types/config.ts

@@ -50,6 +50,7 @@ export interface FeatureToggles {
   accesscontrol: boolean;
   tempoServiceGraph: boolean;
   tempoSearch: boolean;
+  recordedQueries: boolean;
   prometheusMonaco: boolean;
   newNavigation: boolean;
 }

packages/grafana-runtime/src/config.ts

@@ -65,6 +65,7 @@ export class GrafanaBootConfig implements GrafanaConfig {
     trimDefaults: false,
     tempoServiceGraph: false,
     tempoSearch: false,
+    recordedQueries: false,
     prometheusMonaco: false,
     newNavigation: false,
   };

public/app/features/query/components/QueryActionComponent.ts

@@ -0,0 +1,32 @@
+import { DataQuery, TimeRange } from '@grafana/data';
+
+interface ActionComponentProps {
+  query?: DataQuery;
+  queries?: Array<Partial<DataQuery>>;
+  onAddQuery?: (q: DataQuery) => void;
+  timeRange?: TimeRange;
+}
+
+type QueryActionComponent = React.ComponentType<ActionComponentProps>;
+
+class QueryActionComponents {
+  extraRenderActions: QueryActionComponent[] = [];
+
+  addExtraRenderAction(extra: QueryActionComponent) {
+    this.extraRenderActions = this.extraRenderActions.concat(extra);
+  }
+
+  getAllExtraRenderAction(): QueryActionComponent[] {
+    return this.extraRenderActions;
+  }
+}
+
+/**
+ * @internal and experimental
+ */
+export const GroupActionComponents = new QueryActionComponents();
+
+/**
+ * @internal and experimental
+ */
+export const RowActionComponents = new QueryActionComponents();

public/app/features/query/components/QueryEditorRow.tsx

@@ -31,6 +31,7 @@ import { selectors } from '@grafana/e2e-selectors';
 import { PanelModel } from 'app/features/dashboard/state/PanelModel';
 import { DashboardModel } from 'app/features/dashboard/state/DashboardModel';
 import { OperationRowHelp } from 'app/core/components/QueryOperationRow/OperationRowHelp';
+import { RowActionComponents } from './QueryActionComponent';
 
 interface Props<TQuery extends DataQuery> {
   data: PanelData;
@@ -301,6 +302,18 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
     return null;
   }
 
+  renderExtraActions = () => {
+    const { query, queries, data, onAddQuery } = this.props;
+    return RowActionComponents.getAllExtraRenderAction().map((c) => {
+      return React.createElement(c, {
+        query,
+        queries,
+        timeRange: data.timeRange,
+        onAddQuery: onAddQuery as (query: DataQuery) => void,
+      });
+    });
+  };
+
   renderActions = (props: QueryOperationRowRenderProps) => {
     const { query, hideDisableQuery = false } = this.props;
     const { hasTextEditMode, datasource, showingHelp } = this.state;
@@ -327,6 +340,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
             }}
           />
         )}
+        {this.renderExtraActions()}
         <QueryOperationAction title="Duplicate query" icon="copy" onClick={this.onCopyQuery} />
         {!hideDisableQuery ? (
           <QueryOperationAction

public/app/features/query/components/QueryGroup.tsx

@@ -39,6 +39,7 @@ import { QueryGroupOptionsEditor } from './QueryGroupOptions';
 import { DashboardQueryEditor, isSharedDashboardQuery } from 'app/plugins/datasource/dashboard';
 import { css } from '@emotion/css';
 import { QueryGroupOptions } from 'app/types';
+import { GroupActionComponents } from './QueryActionComponent';
 
 interface Props {
   queryRunner: PanelQueryRunner;
@@ -327,6 +328,12 @@ export class QueryGroup extends PureComponent<Props, State> {
     return (dsSettings.meta.alerting || dsSettings.meta.mixed) === true;
   }
 
+  renderExtraActions() {
+    return GroupActionComponents.getAllExtraRenderAction().map((c) => {
+      return React.createElement(c, { onAddQuery: this.onAddQuery });
+    });
+  }
+
   renderAddQueryRow(dsSettings: DataSourceInstanceSettings, styles: QueriesTabStyles) {
     const { isAddingMixed } = this.state;
     const showAddButton = !(isAddingMixed || isSharedDashboardQuery(dsSettings.name));
@@ -356,6 +363,7 @@ export class QueryGroup extends PureComponent<Props, State> {
             </Button>
           </Tooltip>
         )}
+        {this.renderExtraActions()}
       </HorizontalGroup>
     );
   }