From e34b2c13d33bb01527dcce0405f8345651ea7109 Mon Sep 17 00:00:00 2001 From: Diana Payton <52059945+oddlittlebird@users.noreply.github.com> Date: Thu, 1 Apr 2021 09:17:39 -0700 Subject: [PATCH] Variables UI text edits (#32523) * 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 --- public/app/features/templating/formatRegistry.ts | 12 ++++++------ public/app/features/variables/adhoc/actions.test.ts | 6 +++--- public/app/features/variables/adhoc/actions.ts | 4 ++-- public/app/features/variables/adhoc/adapter.ts | 2 +- .../variables/constant/ConstantVariableEditor.tsx | 2 +- public/app/features/variables/constant/adapter.ts | 2 +- .../variables/custom/CustomVariableEditor.tsx | 2 +- .../datasource/DataSourceVariableEditor.tsx | 4 ++-- public/app/features/variables/datasource/adapter.ts | 4 ++-- .../variables/editor/SelectionOptionsEditor.tsx | 2 +- .../features/variables/editor/VariableEditorList.tsx | 10 +++++----- .../features/variables/inspect/NetworkGraphModal.tsx | 2 +- .../variables/interval/IntervalVariableEditor.tsx | 10 +++++----- .../variables/query/QueryVariableRefreshSelect.tsx | 4 ++-- .../features/variables/query/VariableQueryRunner.ts | 2 +- public/app/features/variables/query/actions.ts | 2 +- public/app/features/variables/query/operators.ts | 2 +- public/app/features/variables/state/actions.ts | 8 ++++---- .../variables/textbox/TextBoxVariableEditor.tsx | 2 +- 19 files changed, 41 insertions(+), 41 deletions(-) diff --git a/public/app/features/templating/formatRegistry.ts b/public/app/features/templating/formatRegistry.ts index ec88a3438fe..1934add8c23 100644 --- a/public/app/features/templating/formatRegistry.ts +++ b/public/app/features/templating/formatRegistry.ts @@ -93,7 +93,7 @@ export const formatRegistry = new Registry(() => { { 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(() => { { 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(() => { { 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(() => { { 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(() => { }, { 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); diff --git a/public/app/features/variables/adhoc/actions.test.ts b/public/app/features/variables/adhoc/actions.test.ts index 6368f60d050..82e09609227 100644 --- a/public/app/features/variables/adhoc/actions.test.ts +++ b/public/app/features/variables/adhoc/actions.test.ts @@ -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(); diff --git a/public/app/features/variables/adhoc/actions.ts b/public/app/features/variables/adhoc/actions.ts index 945a9ad413e..f6d8219f18c 100644 --- a/public/app/features/variables/adhoc/actions.ts +++ b/public/app/features/variables/adhoc/actions.ts @@ -85,7 +85,7 @@ export const changeVariableDatasource = (datasource?: string): ThunkResult 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 dispatch( changeVariableEditorExtended({ propName: 'infoText', - propValue: 'This datasource does not support adhoc filters yet.', + propValue: 'This data source does not support ad hoc filters yet.', }) ); } diff --git a/public/app/features/variables/adhoc/adapter.ts b/public/app/features/variables/adhoc/adapter.ts index 5ee2f8d5cc1..d7b6625f5a1 100644 --- a/public/app/features/variables/adhoc/adapter.ts +++ b/public/app/features/variables/adhoc/adapter.ts @@ -14,7 +14,7 @@ const noop = async () => {}; export const createAdHocVariableAdapter = (): VariableAdapter => { 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, diff --git a/public/app/features/variables/constant/ConstantVariableEditor.tsx b/public/app/features/variables/constant/ConstantVariableEditor.tsx index fdac8d6a304..2a21a6c8b5a 100644 --- a/public/app/features/variables/constant/ConstantVariableEditor.tsx +++ b/public/app/features/variables/constant/ConstantVariableEditor.tsx @@ -28,7 +28,7 @@ export class ConstantVariableEditor extends PureComponent { render() { return ( - + => { 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, diff --git a/public/app/features/variables/custom/CustomVariableEditor.tsx b/public/app/features/variables/custom/CustomVariableEditor.tsx index 375023384ca..9f73ec8f945 100644 --- a/public/app/features/variables/custom/CustomVariableEditor.tsx +++ b/public/app/features/variables/custom/CustomVariableEditor.tsx @@ -43,7 +43,7 @@ class CustomVariableEditorUnconnected extends PureComponent { render() { return ( - + { labelWidth={20} tooltip={
- 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.

Example: /^prod/ diff --git a/public/app/features/variables/datasource/adapter.ts b/public/app/features/variables/datasource/adapter.ts index 603a80070b2..d9be7815522 100644 --- a/public/app/features/variables/datasource/adapter.ts +++ b/public/app/features/variables/datasource/adapter.ts @@ -13,8 +13,8 @@ import { optionPickerFactory } from '../pickers'; export const createDataSourceVariableAdapter = (): VariableAdapter => { 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(), diff --git a/public/app/features/variables/editor/SelectionOptionsEditor.tsx b/public/app/features/variables/editor/SelectionOptionsEditor.tsx index 050bbd2afe0..c9962cd9e4f 100644 --- a/public/app/features/variables/editor/SelectionOptionsEditor.tsx +++ b/public/app/features/variables/editor/SelectionOptionsEditor.tsx @@ -42,7 +42,7 @@ export const SelectionOptionsEditor: FunctionComponent - + { __html: `

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 - - Templating documentation + + Templates and variables documentation for more information.

`, @@ -208,7 +208,7 @@ const VariableCheckIndicator: FC = ({ passed }) => ); } @@ -217,7 +217,7 @@ const VariableCheckIndicator: FC = ({ passed }) => ); }; diff --git a/public/app/features/variables/inspect/NetworkGraphModal.tsx b/public/app/features/variables/inspect/NetworkGraphModal.tsx index 53afe503487..bcabe37d643 100644 --- a/public/app/features/variables/inspect/NetworkGraphModal.tsx +++ b/public/app/features/variables/inspect/NetworkGraphModal.tsx @@ -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} > diff --git a/public/app/features/variables/interval/IntervalVariableEditor.tsx b/public/app/features/variables/interval/IntervalVariableEditor.tsx index 9bb81f29f72..3221b4b831a 100644 --- a/public/app/features/variables/interval/IntervalVariableEditor.tsx +++ b/public/app/features/variables/interval/IntervalVariableEditor.tsx @@ -61,7 +61,7 @@ export class IntervalVariableEditor extends PureComponent { return ( - + { {this.props.variable.auto ? ( @@ -87,7 +87,7 @@ export class IntervalVariableEditor extends PureComponent { 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 { 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} /> diff --git a/public/app/features/variables/query/QueryVariableRefreshSelect.tsx b/public/app/features/variables/query/QueryVariableRefreshSelect.tsx index d9342e9379d..64cab716600 100644 --- a/public/app/features/variables/query/QueryVariableRefreshSelect.tsx +++ b/public/app/features/variables/query/QueryVariableRefreshSelect.tsx @@ -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) { diff --git a/public/app/features/variables/query/VariableQueryRunner.ts b/public/app/features/variables/query/VariableQueryRunner.ts index f016f2ff5cb..e8b7daae4c2 100644 --- a/public/app/features/variables/query/VariableQueryRunner.ts +++ b/public/app/features/variables/query/VariableQueryRunner.ts @@ -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; }), diff --git a/public/app/features/variables/query/actions.ts b/public/app/features/variables/query/actions.ts index 22e24c2fb62..fb2fbf96aec 100644 --- a/public/app/features/variables/query/actions.ts +++ b/public/app/features/variables/query/actions.ts @@ -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(); diff --git a/public/app/features/variables/query/operators.ts b/public/app/features/variables/query/operators.ts index 825a651e301..1bb5df26302 100644 --- a/public/app/features/variables/query/operators.ts +++ b/public/app/features/variables/query/operators.ts @@ -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)))); diff --git a/public/app/features/variables/state/actions.ts b/public/app/features/variables/state/actions.ts index d110ea37a97..d0b001f57c3 100644 --- a/public/app/features/variables/state/actions.ts +++ b/public/app/features/variables/state/actions.ts @@ -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 }, diff --git a/public/app/features/variables/textbox/TextBoxVariableEditor.tsx b/public/app/features/variables/textbox/TextBoxVariableEditor.tsx index 89e775f1e04..4d322fac1ea 100644 --- a/public/app/features/variables/textbox/TextBoxVariableEditor.tsx +++ b/public/app/features/variables/textbox/TextBoxVariableEditor.tsx @@ -24,7 +24,7 @@ export function TextBoxVariableEditor({ onPropChange, variable: { query } }: Pro return ( - +