[APM] Update RUM Agent tutorial (#47057)

elastic · Oct 8, 2019 · 644b0ff · 644b0ff
1 parent 69e7ee0
commit 644b0ff
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 40 deletions.
diff --git a/src/legacy/core_plugins/kibana/server/tutorials/apm/instructions/apm_agent_instructions.js b/src/legacy/core_plugins/kibana/server/tutorials/apm/instructions/apm_agent_instructions.js
@@ -304,53 +304,72 @@ export const createRackAgentInstructions = (apmServerUrl = '', secretToken = '')
 export const createJsAgentInstructions = (apmServerUrl = '') => [
   {
     title: i18n.translate('kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.title', {
-      defaultMessage: 'Enable Real User Monitoring support in the APM server',
+      defaultMessage: 'Enable Real User Monitoring support in APM server',
     }),
     textPre: i18n.translate('kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.textPre', {
-      defaultMessage: 'Please refer to [the documentation]({documentationLink}).',
-      values: { documentationLink: '{config.docs.base_url}guide/en/apm/server/{config.docs.version}/rum.html' },
+      defaultMessage: 'APM Server disables RUM support by default. See the [documentation]({documentationLink}) \
+for details on how to enable RUM support.',
+      values: { documentationLink: '{config.docs.base_url}guide/en/apm/server/{config.docs.version}/configuration-rum.html' },
     }),
   },
   {
-    title: i18n.translate('kbn.server.tutorials.apm.jsClient.install.title', {
-      defaultMessage: 'Install the APM agent',
+    title: i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.title', {
+      defaultMessage: 'Set up the Agent as a dependency',
     }),
-    textPre: i18n.translate('kbn.server.tutorials.apm.jsClient.install.textPre', {
-      defaultMessage: 'Install the APM agent for JavaScript as a dependency to your application:',
-    }),
-    commands: [`npm install @elastic/apm-rum --save`],
-  },
-  {
-    title: i18n.translate('kbn.server.tutorials.apm.jsClient.configure.title', {
-      defaultMessage: 'Configure the agent',
-    }),
-    textPre: i18n.translate('kbn.server.tutorials.apm.jsClient.configure.textPre', {
-      defaultMessage: 'Agents are libraries that run inside of your application.',
+    textPre: i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.textPre', {
+      defaultMessage: 'You can install the Agent as a dependency to your application with \
+`npm install @elastic/apm-rum --save`.\n\n\
+The Agent can then be initialized and configured in your application like this:',
     }),
     commands: `import {curlyOpen} init as initApm {curlyClose} from '@elastic/apm-rum'
 var apm = initApm({curlyOpen}
 
-  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.configure.commands.setRequiredServiceNameComment', {
+  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.commands.setRequiredServiceNameComment', {
     defaultMessage: 'Set required service name (allowed characters: a-z, A-Z, 0-9, -, _, and space)',
   })}
-  serviceName: '',
+  serviceName: 'your-app-name',
 
-  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.configure.commands.setCustomApmServerUrlComment', {
+  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.commands.setCustomApmServerUrlComment', {
     defaultMessage: 'Set custom APM Server URL (default: {defaultApmServerUrl})',
     values: { defaultApmServerUrl: 'http://localhost:8200' },
   })}
   serverUrl: '${apmServerUrl}',
 
-  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.configure.commands.setServiceVersionComment', {
-    defaultMessage: 'Set service version (required for sourcemap feature)',
+  // ${i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.commands.setServiceVersionComment', {
+    defaultMessage: 'Set service version (required for source map feature)',
   })}
   serviceVersion: ''
 {curlyClose})`.split('\n'),
-    textPost: i18n.translate('kbn.server.tutorials.apm.jsClient.configure.textPost', {
-      defaultMessage: 'See the [documentation]({documentationLink}) for advanced usage.',
-      values: { documentationLink: '{config.docs.base_url}guide/en/apm/agent/rum-js/current/index.html' },
+    textPost: i18n.translate('kbn.server.tutorials.apm.jsClient.installDependency.textPost', {
+      defaultMessage: 'Framework integrations, like React or Angular, have custom dependencies. \
+See the [integration documentation]({docLink}) for more information.',
+      values: { docLink: '{config.docs.base_url}guide/en/apm/agent/rum-js/{config.docs.version}/framework-integrations.html' },
     }),
   },
+  {
+    title: i18n.translate('kbn.server.tutorials.apm.jsClient.scriptTags.title', {
+      defaultMessage: 'Set up the Agent with Script Tags',
+    }),
+    textPre: i18n.translate('kbn.server.tutorials.apm.jsClient.scriptTags.textPre', {
+      defaultMessage: 'Alternatively, you can use Script tags to set up and configure the Agent. \
+Add a `<script>` tag to the HTML page and use the `elasticApm` global object to load and initialize the agent. \
+Don\'t forget to download the latest version of the RUM Agent from [GitHub]({GitHubLink}) or [UNPKG]({UnpkgLink}), \
+and host the file on your Server/CDN before deploying to production.',
+      values: {
+        GitHubLink: 'https://github.com/elastic/apm-agent-rum-js/releases/latest',
+        UnpkgLink: 'https://unpkg.com/@elastic/apm-rum/dist/bundles/elastic-apm-rum.umd.min.js'
+      },
+    }),
+    commands: `\
+<script src="https://your-cdn-host.com/path/to/elastic-apm-rum.umd.min.js" crossorigin></script>
+<script>
+  elasticApm.init({curlyOpen}
+    serviceName: 'your-app-name',
+    serverUrl: 'http://localhost:8200',
+  {curlyClose})
+</script>
+`.split('\n')
+  },
 ];
 
 export const createGoAgentInstructions = (apmServerUrl = '', secretToken = '') => [

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -2113,16 +2113,11 @@
     "kbn.server.tutorials.apm.javaClient.startApplication.textPost": "構成オプションと高度な用途に関しては、[ドキュメンテーション]({documentationLink}) をご覧ください。",
     "kbn.server.tutorials.apm.javaClient.startApplication.textPre": "「-javaagent」フラグを追加してエージェントをシステムプロパティで構成します。\n\n * 必要なサービス名を設定します (使用可能な文字は a-z、A-Z、0-9、-、_、スペースです)\n * カスタム APM Server URL を設定します (デフォルト: {customApmServerUrl})\n * アプリケーションのベースパッケージを設定します",
     "kbn.server.tutorials.apm.javaClient.startApplication.title": "javaagent フラグのアプリケーションの起動",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setCustomApmServerUrlComment": "カスタム APM Server URL (デフォルト: {defaultApmServerUrl})",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setRequiredServiceNameComment": "必要なサービス名を設定します (使用可能な文字は a-z、A-Z、0-9、-、_、スペースです)",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setServiceVersionComment": "サーバーバージョンを設定します (ソースマップ機能に必要)",
-    "kbn.server.tutorials.apm.jsClient.configure.textPost": "高度な用途に関しては [ドキュメンテーション]({documentationLink}) を参照してください。",
-    "kbn.server.tutorials.apm.jsClient.configure.textPre": "エージェントとは、アプリケーション内で実行されるライブラリです。",
-    "kbn.server.tutorials.apm.jsClient.configure.title": "エージェントの構成",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setCustomApmServerUrlComment": "カスタム APM Server URL (デフォルト: {defaultApmServerUrl})",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setRequiredServiceNameComment": "必要なサービス名を設定します (使用可能な文字は a-z、A-Z、0-9、-、_、スペースです)",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setServiceVersionComment": "サーバーバージョンを設定します (ソースマップ機能に必要)",
     "kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.textPre": "[ドキュメンテーション({documentationLink}) をご覧ください。",
     "kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.title": "APM Server の Real User 監視エージェントを有効にする",
-    "kbn.server.tutorials.apm.jsClient.install.textPre": "Java Script 用の APM エージェントをアプリケーションに依存関係としてインストール:",
-    "kbn.server.tutorials.apm.jsClient.install.title": "APM エージェントのインストール",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.addThisToTheFileTopComment": "アプリに読み込まれたファイルの一番上にこれを追加します",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.allowedCharactersComment": "使用できる文字は # a-z、A-Z、0-9、-、_、スペースです",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.setCustomApmServerUrlComment": "カスタム APM Server URL (デフォルト: {defaultApmServerUrl})",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -2114,16 +2114,11 @@
     "kbn.server.tutorials.apm.javaClient.startApplication.textPost": "有关配置选项和高级用法，请参阅[文档]({documentationLink})。",
     "kbn.server.tutorials.apm.javaClient.startApplication.textPre": "添加 `-javaagent` 标志并使用系统属性配置代理。\n\n * 设置所需的服务名称（允许使用的字符：a-z、A-Z、0-9、-、_ 和空格）\n * 设置定制 APM Server URL（默认值：{customApmServerUrl}）\n * 设置您的应用程序的基础软件包",
     "kbn.server.tutorials.apm.javaClient.startApplication.title": "使用 javaagent 标志设置您的应用程序",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setCustomApmServerUrlComment": "设置定制 APM Server URL（默认值：{defaultApmServerUrl}）",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setRequiredServiceNameComment": "设置所需的服务名称（允许使用的字符：a-z、A-Z、0-9、-、_ 和空格）",
-    "kbn.server.tutorials.apm.jsClient.configure.commands.setServiceVersionComment": "设置服务版本（源地图功能要求）",
-    "kbn.server.tutorials.apm.jsClient.configure.textPost": "有关高级用法，请参阅[文档]({documentationLink})。",
-    "kbn.server.tutorials.apm.jsClient.configure.textPre": "代理是在您的应用程序内运行的库。",
-    "kbn.server.tutorials.apm.jsClient.configure.title": "配置代理",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setCustomApmServerUrlComment": "设置定制 APM Server URL（默认值：{defaultApmServerUrl}）",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setRequiredServiceNameComment": "设置所需的服务名称（允许使用的字符：a-z、A-Z、0-9、-、_ 和空格）",
+    "kbn.server.tutorials.apm.jsClient.installDependency.commands.setServiceVersionComment": "设置服务版本（源地图功能要求）",
     "kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.textPre": "请参阅[文档]({documentationLink})。",
     "kbn.server.tutorials.apm.jsClient.enableRealUserMonitoring.title": "在 APM 服务器中启用真实用户 Monitoring 支持",
-    "kbn.server.tutorials.apm.jsClient.install.textPre": "将 JavaScript 的 APM 代理安装为您的应用程序的依赖项：",
-    "kbn.server.tutorials.apm.jsClient.install.title": "安装 APM 代理",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.addThisToTheFileTopComment": "将其添加到您的应用中加载的第一个文件的上面",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.allowedCharactersComment": "允许使用的字符：a-z、A-Z、0-9、-、_ 和空格",
     "kbn.server.tutorials.apm.nodeClient.configure.commands.setCustomApmServerUrlComment": "设置定制 APM Server URL（默认值：{defaultApmServerUrl}）",