[8.8] [Synthetics] Disable throttling UI configuration for monitor (#…

…156798) (#157141)

# Backport

This will backport the following commits from `main` to `8.8`:
- [[Synthetics] Disable throttling UI configuration for monitor
(#156798)](#156798)

<!--- Backport version: 8.9.7 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"Shahzad","email":"shahzad31comp@gmail.com"},"sourceCommit":{"committedDate":"2023-05-09T08:49:40Z","message":"[Synthetics]
Disable throttling UI configuration for monitor
(#156798)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Dominique Clarke <dominique.clarke@elastic.co>\r\nCo-authored-by:
Vignesh Shanmugam
<vignesh.shanmugam22@gmail.com>","sha":"f0087d7f0b45d26fcd0f93a39e71389c955c675e","branchLabelMapping":{"^v8.9.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:uptime","release_note:skip","v8.8.0","v8.9.0"],"number":156798,"url":"https://github.com/elastic/kibana/pull/156798","mergeCommit":{"message":"[Synthetics]
Disable throttling UI configuration for monitor
(#156798)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Dominique Clarke <dominique.clarke@elastic.co>\r\nCo-authored-by:
Vignesh Shanmugam
<vignesh.shanmugam22@gmail.com>","sha":"f0087d7f0b45d26fcd0f93a39e71389c955c675e"}},"sourceBranch":"main","suggestedTargetBranches":["8.8"],"targetPullRequestStates":[{"branch":"8.8","label":"v8.8.0","labelRegex":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v8.9.0","labelRegex":"^v8.9.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/156798","number":156798,"mergeCommit":{"message":"[Synthetics]
Disable throttling UI configuration for monitor
(#156798)\n\nCo-authored-by: kibanamachine
<42973632+kibanamachine@users.noreply.github.com>\r\nCo-authored-by:
Dominique Clarke <dominique.clarke@elastic.co>\r\nCo-authored-by:
Vignesh Shanmugam
<vignesh.shanmugam22@gmail.com>","sha":"f0087d7f0b45d26fcd0f93a39e71389c955c675e"}}]}]
BACKPORT-->

Co-authored-by: Shahzad <shahzad31comp@gmail.com>

src/plugins/kibana_usage_collection/server/collectors/management/schema.ts

@@ -414,6 +414,10 @@ export const stackManagementSchema: MakeSchemaFrom<UsageStats> = {
     type: 'text',
     _meta: { description: 'Non-default value of setting.' },
   },
+  'observability:syntheticsThrottlingEnabled': {
+    type: 'boolean',
+    _meta: { description: 'Non-default value of setting.' },
+  },
   'observability:enableInspectEsQueries': {
     type: 'boolean',
     _meta: { description: 'Non-default value of setting.' },

src/plugins/kibana_usage_collection/server/collectors/management/types.ts

@@ -142,6 +142,7 @@ export interface UsageStats {
   hideAnnouncements: boolean;
   isDefaultIndexMigrated: boolean;
   'metrics:allowCheckingForFailedShards': boolean;
+  'observability:syntheticsThrottlingEnabled': boolean;
   'observability:apmLabsButton': boolean;
   'observability:enableAwsLambdaMetrics': boolean;
   'observability:apmProgressiveLoading': string;

src/plugins/telemetry/schema/oss_plugins.json

@@ -9148,6 +9148,12 @@
             "description": "Non-default value of setting."
           }
         },
+        "observability:syntheticsThrottlingEnabled": {
+          "type": "boolean",
+          "_meta": {
+            "description": "Non-default value of setting."
+          }
+        },
         "observability:maxSuggestions": {
           "type": "integer",
           "_meta": {

x-pack/plugins/observability/common/index.ts

@@ -35,6 +35,7 @@ export {
   apmEnableContinuousRollups,
   enableCriticalPath,
   profilingElasticsearchPlugin,
+  syntheticsThrottlingEnabled,
 } from './ui_settings_keys';
 
 export {

x-pack/plugins/observability/common/ui_settings_keys.ts

@@ -25,3 +25,4 @@ export const enableCriticalPath = 'observability:apmEnableCriticalPath';
 export const apmEnableServiceMetrics = 'observability:apmEnableServiceMetrics';
 export const apmEnableContinuousRollups = 'observability:apmEnableContinuousRollups';
 export const profilingElasticsearchPlugin = 'observability:profilingElasticsearchPlugin';
+export const syntheticsThrottlingEnabled = 'observability:syntheticsThrottlingEnabled';

x-pack/plugins/observability/public/index.ts

@@ -24,6 +24,7 @@ export type {
   ObservabilityPublicPluginsStart,
 };
 export {
+  syntheticsThrottlingEnabled,
   enableInspectEsQueries,
   enableComparisonByDefault,
   apmServiceGroupMaxNumberOfServices,

x-pack/plugins/observability/server/ui_settings.ts

@@ -28,6 +28,7 @@ import {
   enableCriticalPath,
   enableInfrastructureHostsView,
   profilingElasticsearchPlugin,
+  syntheticsThrottlingEnabled,
 } from '../common/ui_settings_keys';
 
 const betaLabel = i18n.translate('xpack.observability.uiSettings.betaLabel', {
@@ -354,4 +355,32 @@ export const uiSettings: Record<string, UiSettings> = {
     requiresPageReload: true,
     type: 'boolean',
   },
+  [syntheticsThrottlingEnabled]: {
+    category: [observabilityFeatureId],
+    name: i18n.translate('xpack.observability.syntheticsThrottlingEnabledExperimentName', {
+      defaultMessage: 'Enable Synthetics throttling (Experimental)',
+    }),
+    value: false,
+    description: i18n.translate(
+      'xpack.observability.syntheticsThrottlingEnabledExperimentDescription',
+      {
+        defaultMessage:
+          'Enable the throttling setting in Synthetics monitor configurations. Note that throttling may still not be available for your monitors even if the setting is active. Intended for internal use only. {link}',
+        values: {
+          link: throttlingDocsLink({
+            href: 'https://github.com/elastic/synthetics/blob/main/docs/throttling.md',
+          }),
+        },
+      }
+    ),
+    schema: schema.boolean(),
+    requiresPageReload: true,
+  },
 };
+
+function throttlingDocsLink({ href }: { href: string }) {
+  return `<a href="${href}" target="_blank" rel="noopener noreferrer">${i18n.translate(
+    'xpack.observability.uiSettings.throttlingDocsLinkText',
+    { defaultMessage: 'read notice here.' }
+  )}</a>`;
+}

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/fields/throttling/throttling_config_field.tsx

@@ -6,6 +6,8 @@
  */
 import React from 'react';
 import { EuiSuperSelect } from '@elastic/eui';
+import { useUiSetting } from '@kbn/kibana-react-plugin/public';
+import { syntheticsThrottlingEnabled } from '@kbn/observability-plugin/public';
 import { useConnectionProfiles } from './use_connection_profiles';
 import { ThrottlingDisabledCallout } from './throttling_disabled_callout';
 import { ThrottlingConfig } from '../../../../../../../common/runtime_types';
@@ -36,6 +38,10 @@ export const ThrottlingConfigField = (props: ThrottlingConfigFieldProps) => {
 
   const options = useConnectionProfiles(initialValue);
 
+  const isThrottlingEnabled = useUiSetting<boolean>(syntheticsThrottlingEnabled);
+
+  const isReadOnly = props.readOnly || !isThrottlingEnabled;
+
   return (
     <>
       <EuiSuperSelect
@@ -58,14 +64,14 @@ export const ThrottlingConfigField = (props: ThrottlingConfigFieldProps) => {
         defaultValue={PROFILE_VALUES_ENUM.DEFAULT}
         valueOfSelected={value?.id}
         fullWidth={props.fullWidth}
-        readOnly={props.readOnly}
+        readOnly={isReadOnly}
       />
       {isThrottlingDisabled && <ThrottlingDisabledCallout />}
       {isCustom && (
         <ThrottlingFields
           throttling={props?.value}
           setValue={props.onChange}
-          readOnly={props.readOnly}
+          readOnly={isReadOnly}
         />
       )}
     </>

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/form/field_config.tsx

@@ -11,6 +11,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { isValidNamespace } from '@kbn/fleet-plugin/common';
 import {
+  EuiIcon,
   EuiCode,
   EuiComboBoxOptionOption,
   EuiFlexGroup,
@@ -1153,9 +1154,26 @@ export const FIELD = (readOnly?: boolean): FieldMap => ({
   [ConfigKey.THROTTLING_CONFIG]: {
     fieldKey: ConfigKey.THROTTLING_CONFIG,
     component: ThrottlingWrapper,
-    label: i18n.translate('xpack.synthetics.monitorConfig.throttling.label', {
-      defaultMessage: 'Connection profile',
-    }),
+    label: (
+      <FormattedMessage
+        id="xpack.synthetics.monitorConfig.throttlingDisabled.label"
+        defaultMessage="Connection profile ( {icon} Important information about throttling: {link})"
+        values={{
+          icon: <EuiIcon type="alert" color="warning" size="s" />,
+          link: (
+            <EuiLink
+              data-test-subj="syntheticsFIELDNoticeLink"
+              href={'https://github.com/elastic/synthetics/blob/main/THROTTLING.md'}
+              target="_blank"
+            >
+              {i18n.translate('xpack.synthetics.monitorConfig.throttlingDisabled.link', {
+                defaultMessage: 'notice',
+              })}
+            </EuiLink>
+          ),
+        }}
+      />
+    ),
     required: true,
     controlled: true,
     helpText: i18n.translate('xpack.synthetics.monitorConfig.throttling.helpText', {

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_add_edit/types.ts

@@ -66,7 +66,7 @@ export type FormConfig = MonitorFields & {
 export interface FieldMeta<TFieldKey extends keyof FormConfig> {
   fieldKey: keyof FormConfig;
   component: React.ComponentType<any>;
-  label?: string;
+  label?: string | React.ReactNode;
   ariaLabel?: string;
   helpText?: string | React.ReactNode;
   hidden?: (depenencies: unknown[]) => boolean;

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/failed_tests.tsx

@@ -42,6 +42,7 @@ export const MonitorFailedTests = ({
   return (
     <>
       <ExploratoryViewEmbeddable
+        id={'failedTestsLineSeries'}
         customHeight={'120px'}
         reportType="heatmap"
         axisTitlesVisibility={{ x: false, yRight: false, yLeft: false }}

x-pack/plugins/translations/translations/fr-FR.json

@@ -34572,7 +34572,6 @@
     "xpack.synthetics.monitorConfig.textAssertion.helpText": "Prenez en considération la page chargée lorsque le texte spécifié est rendu.",
     "xpack.synthetics.monitorConfig.textAssertion.label": "Assertion de texte",
     "xpack.synthetics.monitorConfig.throttling.helpText": "Simulez la régulation du réseau (téléchargement, chargement, latence). D'autres options seront ajoutées dans une prochaine version.",
-    "xpack.synthetics.monitorConfig.throttling.label": "Profil de connexion",
     "xpack.synthetics.monitorConfig.timeout.formatError": "Le délai d'expiration n'est pas valide.",
     "xpack.synthetics.monitorConfig.timeout.greaterThan0Error": "Le délai d'expiration doit être supérieur ou égal à 0.",
     "xpack.synthetics.monitorConfig.timeout.helpText": "Temps total autorisé pour tester la connexion et l'échange de données.",

x-pack/plugins/translations/translations/ja-JP.json

@@ -34551,7 +34551,6 @@
     "xpack.synthetics.monitorConfig.textAssertion.helpText": "指定したテキストがレンダリングされるときに読み込まれるページを考慮します。",
     "xpack.synthetics.monitorConfig.textAssertion.label": "テキストアサーション",
     "xpack.synthetics.monitorConfig.throttling.helpText": "ネットワークスロットリングをシミュレートします（ダウンロード、アップロード、レイテンシ）。今後のバージョンではその他のオプションが追加されます。",
-    "xpack.synthetics.monitorConfig.throttling.label": "接続プロファイル",
     "xpack.synthetics.monitorConfig.timeout.formatError": "タイムアウトが無効です。",
     "xpack.synthetics.monitorConfig.timeout.greaterThan0Error": "タイムアウトは0以上でなければなりません。",
     "xpack.synthetics.monitorConfig.timeout.helpText": "接続のテストとデータの交換に許可された合計時間。",

x-pack/plugins/translations/translations/zh-CN.json

@@ -34568,7 +34568,6 @@
     "xpack.synthetics.monitorConfig.textAssertion.helpText": "呈现指定文本时考虑加载的页面。",
     "xpack.synthetics.monitorConfig.textAssertion.label": "文本断言",
     "xpack.synthetics.monitorConfig.throttling.helpText": "模拟网络限制（下载、上传、延迟）。将在未来版本中添加更多选项。",
-    "xpack.synthetics.monitorConfig.throttling.label": "连接配置文件",
     "xpack.synthetics.monitorConfig.timeout.formatError": "超时无效。",
     "xpack.synthetics.monitorConfig.timeout.greaterThan0Error": "超时必须大于或等于 0。",
     "xpack.synthetics.monitorConfig.timeout.helpText": "允许用于测试连接并交换数据的总时间。",