CloudWatch: Add deprecation tooltip to Alias field (#63115)

* CloudWatch: Add deprecation tooltip to Alias field

* Add target blank

* Add noopener noreferrer
This commit is contained in:
Shirley 2023-02-09 17:50:29 +01:00 committed by GitHub
parent 36c090416a
commit 32b96a586f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 8 deletions

View File

@ -1,7 +1,7 @@
import { debounce } from 'lodash';
import React, { FunctionComponent, useState } from 'react';
import { Input } from '@grafana/ui';
import { IconButton, Input, Tooltip } from '@grafana/ui';
export interface Props {
onChange: (alias: any) => void;
@ -19,5 +19,29 @@ export const Alias: FunctionComponent<Props> = ({ value = '', onChange, id }) =>
propagateOnChange(e.target.value);
};
return <Input id={id} type="text" value={alias} onChange={onChange} aria-label="Optional alias" />;
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Input id={id} type="text" value={alias} onChange={onChange} aria-label="Optional alias" />
<Tooltip
content={
<span>
Alias pattern will be deprecated in Grafana 10. See{' '}
<a
target="__blank"
rel="noopener noreferrer"
href="https://grafana.com/docs/grafana/latest/datasources/aws-cloudwatch/query-editor/#common-query-editor-fields"
>
documentation
</a>{' '}
for how to use dynamic labels.
</span>
}
interactive
theme="error"
placement="right"
>
<IconButton name="exclamation-triangle" variant="destructive" style={{ marginLeft: 4 }} />
</Tooltip>
</div>
);
};

View File

@ -196,12 +196,7 @@ export const MetricsQueryEditor = (props: Props) => {
></DynamicLabelsField>
</EditorField>
) : (
<EditorField
label="Alias"
width={26}
optional
tooltip="Change time series legend name using this field. See documentation for replacement variable formats."
>
<EditorField label="Alias" width={26} optional tooltip="Change time series legend name using this field.">
<Alias
id={`${query.refId}-cloudwatch-metric-query-editor-alias`}
value={migratedQuery.alias ?? ''}