From f41f939c1c3f31563dd6a33297eecb0669ae5850 Mon Sep 17 00:00:00 2001 From: Khushi Jain <57278642+khushijain21@users.noreply.github.com> Date: Tue, 14 Nov 2023 19:22:42 +0530 Subject: [PATCH] i18n: Markup up correlations forms for translations (#75264) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * correlations/forms * Update public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx Co-authored-by: Josh Hunt * Update public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx Co-authored-by: Josh Hunt * Update public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx Co-authored-by: Josh Hunt * Update public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx Co-authored-by: Josh Hunt * Added rest of filed * minor-changes * map function * retriggered * Update public/app/features/correlations/Forms/TransformationsEditor.tsx Co-authored-by: Piotr Jamróz * removed whitespace * removed whitespace * more changes --------- Co-authored-by: Josh Hunt Co-authored-by: Piotr Jamróz --- .../ConfigureCorrelationBasicInfoForm.tsx | 30 +++++-- .../Forms/ConfigureCorrelationSourceForm.tsx | 80 +++++++++++++------ .../Forms/ConfigureCorrelationTargetForm.tsx | 23 ++++-- .../Forms/CorrelationFormNavigation.tsx | 9 ++- .../correlations/Forms/QueryEditorField.tsx | 54 +++++++++---- .../Forms/TransformationEditorRow.tsx | 53 ++++++++---- .../Forms/TransformationsEditor.tsx | 13 ++- .../app/features/correlations/Forms/types.ts | 26 ++++-- public/locales/de-DE/grafana.json | 76 +++++++++++++++++- public/locales/en-US/grafana.json | 76 +++++++++++++++++- public/locales/es-ES/grafana.json | 76 +++++++++++++++++- public/locales/fr-FR/grafana.json | 76 +++++++++++++++++- public/locales/pseudo-LOCALE/grafana.json | 76 +++++++++++++++++- public/locales/zh-Hans/grafana.json | 76 +++++++++++++++++- 14 files changed, 652 insertions(+), 92 deletions(-) diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx index 7cd8fd739de..fdf12eca094 100644 --- a/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx +++ b/public/app/features/correlations/Forms/ConfigureCorrelationBasicInfoForm.tsx @@ -4,6 +4,7 @@ import { useFormContext } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; import { Field, FieldSet, Input, TextArea, useStyles2 } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; import { useCorrelationsFormContext } from './correlationsFormContext'; import { FormDTO } from './types'; @@ -25,27 +26,40 @@ export const ConfigureCorrelationBasicInfoForm = () => { return ( <> -
-

Define text that will describe the correlation.

+
+ +

Define text that will describe the correlation.

+
diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx index a76c5a2f0ea..4fad48a2310 100644 --- a/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx +++ b/public/app/features/correlations/Forms/ConfigureCorrelationSourceForm.tsx @@ -4,6 +4,7 @@ import { Controller, useFormContext } from 'react-hook-form'; import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data'; import { Card, Field, FieldSet, Input, useStyles2 } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; @@ -34,26 +35,52 @@ export const ConfigureCorrelationSourceForm = () => { const variables = getVariableUsageInfo(currentTargetQuery, {}).variables.map( (variable) => variable.variableName + (variable.fieldPath ? `.${variable.fieldPath}` : '') ); + + function VariableList() { + return ( + <> + {variables.map((name, i) => ( + + {name} + {i < variables.length - 1 ? ', ' : ''} + + ))} + + ); + } + + const dataSourceName = getDatasourceSrv().getInstanceSettings(correlation?.targetUID)?.name; return ( <>
-

- Define what data source will display the correlation, and what data will replace previously defined variables. -

+ +

+ Define what data source will display the correlation, and what data will replace previously defined + variables. +

+
( { /> {variables.length > 0 && ( - Variables used in the target query + + 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. -
- Note: Not every variable needs to be explicitly defined below. A transformation such as{' '} - logfmt will create variables for every key/value pair. + + You have used following variables in the target query: +
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. +
+ Note: Not every variable needs to be explicitly defined below. A transformation such as{' '} + logfmt will create variables for every key/value pair. +
)} diff --git a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx index 9b66bea2a4b..2b5651d1bc3 100644 --- a/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx +++ b/public/app/features/correlations/Forms/ConfigureCorrelationTargetForm.tsx @@ -3,6 +3,7 @@ import { Controller, useFormContext, useWatch } from 'react-hook-form'; import { DataSourceInstanceSettings } from '@grafana/data'; import { Field, FieldSet } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; import { DataSourcePicker } from 'app/features/datasources/components/picker/DataSourcePicker'; import { QueryEditorField } from './QueryEditorField'; @@ -16,18 +17,26 @@ export const ConfigureCorrelationTargetForm = () => { return ( <> -
-

- Define what data source the correlation will link to, and what query will run when the correlation is clicked. -

+
+ +

+ Define what data source the correlation will link to, and what query will run when the correlation is + clicked. +

+
( { const LastPageNext = !readOnly && ( ); const NextPage = ( ); @@ -26,7 +29,7 @@ export const CorrelationFormNavigation = () => { {currentPage > 0 ? ( ) : undefined} diff --git a/public/app/features/correlations/Forms/QueryEditorField.tsx b/public/app/features/correlations/Forms/QueryEditorField.tsx index f246c4fc93e..b4cb893b1ae 100644 --- a/public/app/features/correlations/Forms/QueryEditorField.tsx +++ b/public/app/features/correlations/Forms/QueryEditorField.tsx @@ -5,6 +5,7 @@ import { useAsync } from 'react-use'; import { CoreApp } from '@grafana/data'; import { getDataSourceSrv } from '@grafana/runtime'; import { Field, LoadingPlaceholder, Alert } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; interface Props { dsUid?: string; @@ -29,18 +30,20 @@ export const QueryEditorField = ({ dsUid, invalid, error, name }: Props) => { return ( - Define the query that is run when the link is clicked. You can use{' '} - - variables - {' '} - to access specific field values. + + Define the query that is run when the link is clicked. You can use{' '} + + variables + {' '} + to access specific field values. + } invalid={invalid} @@ -51,25 +54,44 @@ export const QueryEditorField = ({ dsUid, invalid, error, name }: Props) => { rules={{ validate: { hasQueryEditor: () => - QueryEditor !== undefined || 'The selected target data source must export a query editor.', + QueryEditor !== undefined || + t( + 'correlations.query-editor.control-rules', + 'The selected target data source must export a query editor.' + ), }, }} render={({ field: { value, onChange } }) => { if (dsLoading) { - return ; + return ; } if (dsError) { - return The selected data source could not be loaded.; + return ( + + + The selected data source could not be loaded. + + + ); } if (!datasource) { return ( - - Please select a target data source first. + + + Please select a target data source first. + ); } if (!QueryEditor) { - return ; + return ( + + ); } return ( <> diff --git a/public/app/features/correlations/Forms/TransformationEditorRow.tsx b/public/app/features/correlations/Forms/TransformationEditorRow.tsx index e5539204e15..f4e467651d8 100644 --- a/public/app/features/correlations/Forms/TransformationEditorRow.tsx +++ b/public/app/features/correlations/Forms/TransformationEditorRow.tsx @@ -3,9 +3,9 @@ import React, { useState } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; import { Field, Icon, IconButton, Input, Label, Select, Stack, Tooltip, useStyles2 } from '@grafana/ui'; +import { Trans, t } from 'app/core/internationalization'; import { getSupportedTransTypeDetails, getTransformOptions } from './types'; - type Props = { index: number; value: Record; @@ -28,7 +28,10 @@ const TransformationEditorRow = (props: Props) => { const [keptVals, setKeptVals] = useState<{ expression?: string; mapValue?: string }>({}); register(`config.transformations.${index}.type`, { - required: { value: true, message: 'Please select a transformation type' }, + required: { + value: true, + message: t('correlations.transform-row.transform-required', 'Please select a transformation type'), + }, }); const typeValue = useWatch({ name: `config.transformations.${index}.type`, control }); @@ -41,11 +44,17 @@ const TransformationEditorRow = (props: Props) => { - + -

The type of transformation that will be applied to the source data.

+

+ + The type of transformation that will be applied to the source data. + +

} > @@ -92,13 +101,17 @@ const TransformationEditorRow = (props: Props) => { - +

- Optional. The field to transform. If not specified, the transformation will be applied to the - results field. + + Optional. The field to transform. If not specified, the transformation will be applied to the + results field. +

} @@ -112,7 +125,7 @@ const TransformationEditorRow = (props: Props) => { {...register(`config.transformations.${index}.field`)} readOnly={readOnly} defaultValue={defaultValue.field} - label="field" + label={t('correlations.transform-row.field-input', 'field')} id={`config.transformations.${defaultValue.id}.field`} />
@@ -120,7 +133,7 @@ const TransformationEditorRow = (props: Props) => { label={