IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Correlations: Show variables used in the target query (#66009)

Browse Source 
* Show variables used in the target query

* Remove redundant dot

* Add usage stats about correlations

* Revert "Add usage stats about correlations"

This reverts commit 6f0c70084a.
This commit is contained in:
Piotr Jamróz 2023-04-05 21:15:25 +02:00 committed by GitHub
parent 90b15d41bf
commit 423abe3cea
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 34 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx
View File

@ -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>
</>
);