Pyroscope: Decouple frontend (#80066)

* Decouple query options

* Decouple Variable support

* Fix after merge

public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptionGroup.tsx

@@ -0,0 +1,82 @@
+import { css } from '@emotion/css';
+import React from 'react';
+import { useToggle } from 'react-use';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Collapse, useStyles2, Stack } from '@grafana/ui';
+
+export interface Props {
+  title: string;
+  collapsedInfo: string[];
+  children: React.ReactNode;
+}
+
+export function QueryOptionGroup({ title, children, collapsedInfo }: Props) {
+  const [isOpen, toggleOpen] = useToggle(false);
+  const styles = useStyles2(getStyles);
+
+  return (
+    <div className={styles.wrapper}>
+      <Collapse
+        className={styles.collapse}
+        collapsible
+        isOpen={isOpen}
+        onToggle={toggleOpen}
+        label={
+          <Stack gap={0}>
+            <h6 className={styles.title}>{title}</h6>
+            {!isOpen && (
+              <div className={styles.description}>
+                {collapsedInfo.map((x, i) => (
+                  <span key={i}>{x}</span>
+                ))}
+              </div>
+            )}
+          </Stack>
+        }
+      >
+        <div className={styles.body}>{children}</div>
+      </Collapse>
+    </div>
+  );
+}
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    collapse: css({
+      backgroundColor: 'unset',
+      border: 'unset',
+      marginBottom: 0,
+
+      ['> button']: {
+        padding: theme.spacing(0, 1),
+      },
+    }),
+    wrapper: css({
+      width: '100%',
+      display: 'flex',
+      justifyContent: 'space-between',
+      alignItems: 'baseline',
+    }),
+    title: css({
+      flexGrow: 1,
+      overflow: 'hidden',
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      margin: 0,
+    }),
+    description: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize,
+      fontWeight: theme.typography.bodySmall.fontWeight,
+      paddingLeft: theme.spacing(2),
+      gap: theme.spacing(2),
+      display: 'flex',
+    }),
+    body: css({
+      display: 'flex',
+      gap: theme.spacing(2),
+      flexWrap: 'wrap',
+    }),
+  };
+};

public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/QueryOptions.tsx

@@ -5,10 +5,10 @@ import { CoreApp, GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
 import { useStyles2, RadioButtonGroup, MultiSelect, Input } from '@grafana/ui';
 
-import { QueryOptionGroup } from '../../prometheus/querybuilder/shared/QueryOptionGroup';
 import { Query } from '../types';
 
 import { EditorField } from './EditorField';
+import { QueryOptionGroup } from './QueryOptionGroup';
 import { Stack } from './Stack';
 
 export interface Props {

public/app/plugins/datasource/grafana-pyroscope-datasource/VariableSupport.ts

@@ -2,8 +2,6 @@ import { from, map, Observable, of } from 'rxjs';
 
 import { CustomVariableSupport, DataQueryRequest, DataQueryResponse, MetricFindValue } from '@grafana/data';
 
-import { getTimeSrv, TimeSrv } from '../../../features/dashboard/services/TimeSrv';
-
 import { VariableQueryEditor } from './VariableQueryEditor';
 import { PyroscopeDataSource } from './datasource';
 import { ProfileTypeMessage, VariableQuery } from './types';
@@ -15,10 +13,7 @@ export interface DataAPI {
 }
 
 export class VariableSupport extends CustomVariableSupport<PyroscopeDataSource> {
-  constructor(
-    private readonly dataAPI: DataAPI,
-    private readonly timeSrv: TimeSrv = getTimeSrv()
-  ) {
+  constructor(private readonly dataAPI: DataAPI) {
     super();
   }
 
@@ -26,9 +21,7 @@ export class VariableSupport extends CustomVariableSupport<PyroscopeDataSource>
 
   query(request: DataQueryRequest<VariableQuery>): Observable<DataQueryResponse> {
     if (request.targets[0].type === 'profileType') {
-      return from(
-        this.dataAPI.getProfileTypes(this.timeSrv.timeRange().from.valueOf(), this.timeSrv.timeRange().to.valueOf())
-      ).pipe(
+      return from(this.dataAPI.getProfileTypes(request.range.from.valueOf(), request.range.to.valueOf())).pipe(
         map((values) => {
           return { data: values.map<MetricFindValue>((v) => ({ text: v.label, value: v.id })) };
         })
@@ -42,8 +35,8 @@ export class VariableSupport extends CustomVariableSupport<PyroscopeDataSource>
       return from(
         this.dataAPI.getLabelNames(
           request.targets[0].profileTypeId + '{}',
-          this.timeSrv.timeRange().from.valueOf(),
-          this.timeSrv.timeRange().to.valueOf()
+          request.range.from.valueOf(),
+          request.range.to.valueOf()
         )
       ).pipe(
         map((values) => {
@@ -60,8 +53,8 @@ export class VariableSupport extends CustomVariableSupport<PyroscopeDataSource>
         this.dataAPI.getLabelValues(
           request.targets[0].profileTypeId + '{}',
           request.targets[0].labelName,
-          this.timeSrv.timeRange().from.valueOf(),
-          this.timeSrv.timeRange().to.valueOf()
+          request.range.from.valueOf(),
+          request.range.to.valueOf()
         )
       ).pipe(
         map((values) => {