From 423abe3ceabb1262fafebaf1a108992632525710 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Piotr=20Jamr=C3=B3z?= <pm.jamroz@gmail.com>
Date: Wed, 5 Apr 2023 21:15:25 +0200
Subject: [PATCH] Correlations: Show variables used in the target query
 (#66009)

* Show variables used in the target query

* Remove redundant dot

* Add usage stats about correlations

* Revert "Add usage stats about correlations"

This reverts commit 6f0c70084a71fdef0e0f034f2cb6cf3491398ac8.
---
 .../Forms/ConfigureCorrelationSourceForm.tsx  | 36 +++++++++++++++++--
 1 file changed, 34 insertions(+), 2 deletions(-)

diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
index e6a504d0368..f60d62a118c 100644
--- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
+++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
@@ -4,9 +4,11 @@ import { Controller, useFormContext } from 'react-hook-form';
 
 import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { DataSourcePicker } from '@grafana/runtime';
-import { Field, FieldSet, Input, useStyles2 } from '@grafana/ui';
+import { Card, Field, FieldSet, Input, useStyles2 } from '@grafana/ui';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 
+import { getVariableUsageInfo } from '../../explore/utils/links';
+
 import { useCorrelationsFormContext } from './correlationsFormContext';
 import { getInputId } from './utils';
 
@@ -14,15 +16,24 @@ const getStyles = (theme: GrafanaTheme2) => ({
   label: css`
     max-width: ${theme.spacing(80)};
   `,
+  variable: css`
+    font-family: ${theme.typography.fontFamilyMonospace};
+    font-weight: ${theme.typography.fontWeightMedium};
+  `,
 });
 
 export const ConfigureCorrelationSourceForm = () => {
-  const { control, formState, register } = useFormContext();
+  const { control, formState, register, getValues } = useFormContext();
   const styles = useStyles2(getStyles);
   const withDsUID = (fn: Function) => (ds: DataSourceInstanceSettings) => fn(ds.uid);
 
   const { correlation, readOnly } = useCorrelationsFormContext();
 
+  const currentTargetQuery = getValues('config.target');
+  const variables = getVariableUsageInfo(currentTargetQuery, {}).variables.map(
+    (variable) => variable.variableName + (variable.fieldPath ? `.${variable.fieldPath}` : '')
+  );
+
   return (
     <>
       <FieldSet label="Configure source data source (3/3)">
@@ -73,6 +84,27 @@ export const ConfigureCorrelationSourceForm = () => {
             readOnly={readOnly}
           />
         </Field>
+
+        {variables.length > 0 && (
+          <Card>
+            <Card.Heading>Variables used in the target query</Card.Heading>
+            <Card.Description>
+              <div>
+                You have used following variables in the target query:{' '}
+                {variables.map((name, i) => (
+                  <span className={styles.variable} key={i}>
+                    {name}
+                    {i < variables.length - 1 ? ', ' : ''}
+                  </span>
+                ))}
+              </div>
+              <div>
+                A data point needs to provide values to all variables as fields or as transformations output to make the
+                correlation button appear in the visualization.
+              </div>
+            </Card.Description>
+          </Card>
+        )}
       </FieldSet>
     </>
   );