diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx index e6a504d0368..9c020a1c1e4 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 ( <>
@@ -73,6 +84,27 @@ export const ConfigureCorrelationSourceForm = () => { readOnly={readOnly} /> + + {variables.length > 0 && ( + + Variables used in the target query + +
+ You have used following variables in the target query:{' '} + {variables.map((name, i) => ( + + {name} + {i < variables.length - 1 ? ', ' : ''} + + ))} +
+
+ 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. +
+
+
+ )}
);