IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Variables UI text edits (#32523)

Browse Source 
* Update formatRegistry.ts

* text edits

* Update adapter.ts

* Update adapter.ts

* text edits

* Update SelectionOptionsEditor.tsx

* Update CustomVariableEditor.tsx

* Update DataSourceVariableEditor.tsx

* Update IntervalVariableEditor.tsx

* Update VariableEditorList.tsx

* Update adapter.ts

* Update actions.ts

* Update NetworkGraphModal.tsx

* Update actions.ts

* Update operators.ts

* text edits
This commit is contained in:
Diana Payton 2021-04-01 09:17:39 -07:00 committed by GitHub
parent a3d1cf03a9
commit e34b2c13d3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
19 changed files with 41 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
public/app/features/templating/formatRegistry.ts
View File

@ -93,7 +93,7 @@ export const formatRegistry = new Registry<FormatRegistryItem>(() => {
{
id: 'csv',
name: 'Csv',
description: 'Comma separated values',
description: 'Comma-separated values',
formatter: ({ value }) => {
if (isArray(value)) {
return value.join(',');
@ -123,7 +123,7 @@ export const formatRegistry = new Registry<FormatRegistryItem>(() => {
{
id: 'percentencode',
name: 'Percent encode',
description: 'Useful for url escaping values',
description: 'Useful for URL escaping values',
formatter: ({ value }) => {
// like glob, but url escaped
if (isArray(value)) {
@ -193,7 +193,7 @@ export const formatRegistry = new Registry<FormatRegistryItem>(() => {
{
id: 'glob',
name: 'Glob',
description: 'Format multi valued variables using glob syntax, example {value1,value2}',
description: 'Format multi-valued variables using glob syntax, example {value1,value2}',
formatter: ({ value }) => {
if (isArray(value) && value.length > 1) {
return '{' + value.join(',') + '}';
@ -204,7 +204,7 @@ export const formatRegistry = new Registry<FormatRegistryItem>(() => {
{
id: 'text',
name: 'Text',
description: 'Format variables in their text representation. Example in multi variable scenario A + B + C.',
description: 'Format variables in their text representation. Example in multi-variable scenario A + B + C.',
formatter: (options, variable) => {
if (typeof options.text === 'string') {
return options.value === ALL_VARIABLE_VALUE ? ALL_VARIABLE_TEXT : options.text;
@ -221,9 +221,9 @@ export const formatRegistry = new Registry<FormatRegistryItem>(() => {
},
{
id: 'queryparam',
name: 'Query Parameter',
name: 'Query parameter',
description:
'Format variables as url parameter. Example in multi variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.',
'Format variables as URL parameters. Example in multi-variable scenario A + B + C => var-foo=A&var-foo=B&var-foo=C.',
formatter: (options, variable) => {
const { name, type } = variable;
const adapter = variableAdapters.get(type);

6
public/app/features/variables/adhoc/actions.test.ts
View File

@ -383,7 +383,7 @@ describe('adhoc actions', () => {
describe('when changeVariableDatasource is dispatched with unsupported datasource', () => {
it('then correct actions are dispatched', async () => {
const datasource = 'mysql';
const loadingText = 'Adhoc filters are applied automatically to all queries that target this datasource';
const loadingText = 'Ad hoc filters are applied automatically to all queries that target this data source';
const variable = adHocBuilder().withId('Filters').withName('Filters').withDatasource('influxdb').build();
getDatasource.mockRestore();
@ -400,7 +400,7 @@ describe('adhoc actions', () => {
changeVariableProp(toVariablePayload(variable, { propName: 'datasource', propValue: datasource })),
changeVariableEditorExtended({
propName: 'infoText',
propValue: 'This datasource does not support adhoc filters yet.',
propValue: 'This data source does not support ad hoc filters yet.',
})
);
});
@ -409,7 +409,7 @@ describe('adhoc actions', () => {
describe('when changeVariableDatasource is dispatched with datasource', () => {
it('then correct actions are dispatched', async () => {
const datasource = 'elasticsearch';
const loadingText = 'Adhoc filters are applied automatically to all queries that target this datasource';
const loadingText = 'Ad hoc filters are applied automatically to all queries that target this data source';
const variable = adHocBuilder().withId('Filters').withName('Filters').withDatasource('influxdb').build();
getDatasource.mockRestore();

4
public/app/features/variables/adhoc/actions.ts
View File

@ -85,7 +85,7 @@ export const changeVariableDatasource = (datasource?: string): ThunkResult<void>
const { editor } = getState().templating;
const variable = getVariable(editor.id, getState());
const loadingText = 'Adhoc filters are applied automatically to all queries that target this datasource';
const loadingText = 'Ad hoc filters are applied automatically to all queries that target this data source';
dispatch(
changeVariableEditorExtended({
@ -101,7 +101,7 @@ export const changeVariableDatasource = (datasource?: string): ThunkResult<void>
dispatch(
changeVariableEditorExtended({
propName: 'infoText',
propValue: 'This datasource does not support adhoc filters yet.',
propValue: 'This data source does not support ad hoc filters yet.',
})
);
}

2
public/app/features/variables/adhoc/adapter.ts
View File

@ -14,7 +14,7 @@ const noop = async () => {};
export const createAdHocVariableAdapter = (): VariableAdapter<AdHocVariableModel> => {
return {
id: 'adhoc',
description: 'Add key/value filters on the fly',
description: 'Add key/value filters on the fly.',
name: 'Ad hoc filters',
initialState: initialAdHocVariableModelState,
reducer: adHocVariableReducer,

2
public/app/features/variables/constant/ConstantVariableEditor.tsx
View File

@ -28,7 +28,7 @@ export class ConstantVariableEditor extends PureComponent<Props> {
render() {
return (
<VerticalGroup spacing="xs">
<VariableSectionHeader name="Constant Options" />
<VariableSectionHeader name="Constant options" />
<VariableTextField
value={this.props.variable.query}
name="Value"

2
public/app/features/variables/constant/adapter.ts
View File

@ -12,7 +12,7 @@ import { optionPickerFactory } from '../pickers';
export const createConstantVariableAdapter = (): VariableAdapter<ConstantVariableModel> => {
return {
id: 'constant',
description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share',
description: 'Define a hidden constant variable, useful for metric prefixes in dashboards you want to share.',
name: 'Constant',
initialState: initialConstantVariableModelState,
reducer: constantVariableReducer,

2
public/app/features/variables/custom/CustomVariableEditor.tsx
View File

@ -43,7 +43,7 @@ class CustomVariableEditorUnconnected extends PureComponent<Props> {
render() {
return (
<VerticalGroup spacing="xs">
<VariableSectionHeader name="Custom Options" />
<VariableSectionHeader name="Custom options" />
<VerticalGroup spacing="md">
<VerticalGroup spacing="none">
<VariableTextAreaField

4
public/app/features/variables/datasource/DataSourceVariableEditor.tsx
View File

@ -96,8 +96,8 @@ export class DataSourceVariableEditorUnConnected extends PureComponent<Props> {
labelWidth={20}
tooltip={
<div>
Regex filter for which data source instances to choose from in the variable value dropdown. Leave
empty for all.
Regex filter for which data source instances to choose from in the variable value list. Leave empty
for all.
<br />
<br />
Example: <code>/^prod/</code>

4
public/app/features/variables/datasource/adapter.ts
View File

@ -13,8 +13,8 @@ import { optionPickerFactory } from '../pickers';
export const createDataSourceVariableAdapter = (): VariableAdapter<DataSourceVariableModel> => {
return {
id: 'datasource',
description: 'Enabled you to dynamically switch the datasource for multiple panels',
name: 'Datasource',
description: 'Enabled you to dynamically switch the data source for multiple panels.',
name: 'Data source',
initialState: initialDataSourceVariableModelState,
reducer: dataSourceVariableReducer,
picker: optionPickerFactory<DataSourceVariableModel>(),

2
public/app/features/variables/editor/SelectionOptionsEditor.tsx
View File

@ -42,7 +42,7 @@ export const SelectionOptionsEditor: FunctionComponent<SelectionOptionsEditorPro
return (
<VerticalGroup spacing="none">
<VariableSectionHeader name="Selection Options" />
<VariableSectionHeader name="Selection options" />
<InlineFieldRow>
<VariableSwitchField
value={variable.multi}

10
public/app/features/variables/editor/VariableEditorList.tsx
View File

@ -64,10 +64,10 @@ export class VariableEditorList extends PureComponent<Props> {
__html: ` <p>
Variables enable more interactive and dynamic dashboards. Instead of hard-coding things like server
or sensor names in your metric queries you can use variables in their place. Variables are shown as
dropdown select boxes at the top of the dashboard. These dropdowns make it easy to change the data
list boxes at the top of the dashboard. These drop-down lists make it easy to change the data
being displayed in your dashboard. Check out the
<a class="external-link" href="http://docs.grafana.org/reference/templating/" target="_blank">
Templating documentation
<a class="external-link" href="https://grafana.com/docs/grafana/latest/variables/" target="_blank">
Templates and variables documentation
</a>
for more information.
</p>`,
@ -208,7 +208,7 @@ const VariableCheckIndicator: FC<VariableCheckIndicatorProps> = ({ passed }) =>
<Icon
name="check"
className={style.iconPassed}
title="This variable is referenced by other variables or dashboard"
title="This variable is referenced by other variables or dashboard."
/>
);
}
@ -217,7 +217,7 @@ const VariableCheckIndicator: FC<VariableCheckIndicatorProps> = ({ passed }) =>
<Icon
name="exclamation-triangle"
className={style.iconFailed}
title="This variable is not referenced by any variable or dashboard"
title="This variable is not referenced by any variable or dashboard."
/>
);
};

2
public/app/features/variables/inspect/NetworkGraphModal.tsx
View File

@ -33,7 +33,7 @@ export function NetworkGraphModal({ edges, nodes, show: propsShow, title, childr
isOpen={show}
title={title}
icon="info-circle"
iconTooltip="The graph can be moved, zoomed in and zoomed out."
iconTooltip="The graph can be moved, zoomed in, and zoomed out."
onClickBackdrop={onClose}
onDismiss={onClose}
>

10
public/app/features/variables/interval/IntervalVariableEditor.tsx
View File

@ -61,7 +61,7 @@ export class IntervalVariableEditor extends PureComponent<Props> {
return (
<VerticalGroup spacing="xs">
<VariableSectionHeader name="Interval Options" />
<VariableSectionHeader name="Interval options" />
<VerticalGroup spacing="none">
<VariableTextField
value={this.props.variable.query}
@ -76,8 +76,8 @@ export class IntervalVariableEditor extends PureComponent<Props> {
<InlineFieldRow>
<VariableSwitchField
value={this.props.variable.auto}
name="Auto Option"
tooltip="Interval will be dynamically calculated by dividing time range by the count specified"
name="Auto option"
tooltip="Dynamically calculates interval by dividing time range by the count specified."
onChange={this.onAutoChange}
/>
{this.props.variable.auto ? (
@ -87,7 +87,7 @@ export class IntervalVariableEditor extends PureComponent<Props> {
value={stepValue}
options={stepOptions}
onChange={this.onAutoCountChanged}
tooltip="How many times should the current time range be divided to calculate the value"
tooltip="How many times the current time range should be divided to calculate the value."
labelWidth={7}
width={9}
/>
@ -96,7 +96,7 @@ export class IntervalVariableEditor extends PureComponent<Props> {
name="Min interval"
placeholder="10s"
onChange={this.onAutoMinChanged}
tooltip="The calculated value will not go below this threshold"
tooltip="The calculated value will not go below this threshold."
labelWidth={13}
width={11}
/>

4
public/app/features/variables/query/QueryVariableRefreshSelect.tsx
View File

@ -11,8 +11,8 @@ interface Props {
const REFRESH_OPTIONS = [
{ label: 'Never', value: VariableRefresh.never },
{ label: 'On Dashboard Load', value: VariableRefresh.onDashboardLoad },
{ label: 'On Time Range Change', value: VariableRefresh.onTimeRangeChanged },
{ label: 'On dashboard load', value: VariableRefresh.onDashboardLoad },
{ label: 'On time range change', value: VariableRefresh.onTimeRangeChanged },
];
export function QueryVariableRefreshSelect({ onChange, refresh }: PropsWithChildren<Props>) {

2
public/app/features/variables/query/VariableQueryRunner.ts
View File

@ -119,7 +119,7 @@ export class VariableQueryRunner {
.runRequest(runnerArgs, request)
.pipe(
filter(() => {
// lets check if we started another batch during the execution of the observable. If so we just want to abort the rest.
// Lets check if we started another batch during the execution of the observable. If so we just want to abort the rest.
const afterUid = getState().templating.transaction.uid;
return beforeUid === afterUid;
}),

2
public/app/features/variables/query/actions.ts
View File

@ -23,7 +23,7 @@ export const updateQueryVariableOptions = (
}
const datasource = await getDataSourceSrv().get(variableInState.datasource ?? '');
// we need to await the result from variableQueryRunner before moving on otherwise variables dependent on this
// We need to await the result from variableQueryRunner before moving on otherwise variables dependent on this
// variable will have the wrong current value as input
await new Promise((resolve, reject) => {
const subscription: Subscription = new Subscription();

2
public/app/features/variables/query/operators.ts
View File

@ -162,7 +162,7 @@ export function validateVariableSelection(args: {
// If we are searching options there is no need to validate selection state
// This condition was added to as validateVariableSelectionState will update the current value of the variable
// So after search and selection the current value is already update so no setValue, refresh & url update is performed
// So after search and selection the current value is already update so no setValue, refresh and URL update is performed
// The if statement below fixes https://github.com/grafana/grafana/issues/25671
if (!searchFilter) {
return from(dispatch(validateVariableSelectionState(toVariableIdentifier(variable))));

8
public/app/features/variables/state/actions.ts
View File

@ -263,7 +263,7 @@ export const processVariable = (
}
}
// for variables that aren't updated via url or refresh let's simulate the same state changes
// for variables that aren't updated via URL or refresh, let's simulate the same state changes
dispatch(completeVariableLoading(identifier));
};
};
@ -296,7 +296,7 @@ export const setOptionFromUrl = (
if (!variableFromState) {
throw new Error(`Couldn't find variable with name: ${variable.name}`);
}
// Simple case. Value in url matches existing options text or value.
// Simple case. Value in URL matches existing options text or value.
let option = variableFromState.options.find((op) => {
return op.text === stringUrlValue || op.value === stringUrlValue;
});
@ -327,13 +327,13 @@ export const setOptionFromUrl = (
}, []);
}
// It is possible that we did not match the value to any existing option. In that case the url value will be
// It is possible that we did not match the value to any existing option. In that case the URL value will be
// used anyway for both text and value.
option = { text: defaultText, value: defaultValue, selected: false };
}
if (isMulti(variableFromState)) {
// In case variable is multiple choice, we cast to array to preserve the same behaviour as when selecting
// In case variable is multiple choice, we cast to array to preserve the same behavior as when selecting
// the option directly, which will return even single value in an array.
option = alignCurrentWithMulti(
{ text: castArray(option.text), value: castArray(option.value), selected: false },

2
public/app/features/variables/textbox/TextBoxVariableEditor.tsx
View File

@ -24,7 +24,7 @@ export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Pro
return (
<VerticalGroup spacing="xs">
<VariableSectionHeader name="Text Options" />
<VariableSectionHeader name="Text options" />
<VariableTextField
value={query}
name="Default value"