elastic · clintandrewhall · Oct 13, 2021 · Oct 12, 2021 · Oct 12, 2021 · Oct 12, 2021
diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.links.md
@@ -9,6 +9,7 @@
 ```typescript
 readonly links: {
         readonly settings: string;
+        readonly elasticStackGetStarted: string;
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;

diff --git a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
diff --git a/src/core/public/doc_links/doc_links_service.ts b/src/core/public/doc_links/doc_links_service.ts
@@ -26,12 +26,14 @@ export class DocLinksService {
     const PLUGIN_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/elasticsearch/plugins/${DOC_LINK_VERSION}/`;
     const APM_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/apm/`;
     const SECURITY_SOLUTION_DOCS = `${ELASTIC_WEBSITE_URL}guide/en/security/${DOC_LINK_VERSION}/`;
+    const STACK_GETTING_STARTED = `${ELASTIC_WEBSITE_URL}guide/en/elastic-stack-get-started/${DOC_LINK_VERSION}/`;
 
     return deepFreeze({
       DOC_LINK_VERSION,
       ELASTIC_WEBSITE_URL,
       links: {
         settings: `${ELASTIC_WEBSITE_URL}guide/en/kibana/${DOC_LINK_VERSION}/settings.html`,
+        elasticStackGetStarted: `${STACK_GETTING_STARTED}get-started-elastic-stack.html`,
         apm: {
           kibanaSettings: `${KIBANA_DOCS}apm-settings-in-kibana.html`,
           supportedServiceMaps: `${KIBANA_DOCS}service-maps.html#service-maps-supported`,
@@ -508,6 +510,7 @@ export interface DocLinksStart {
   readonly ELASTIC_WEBSITE_URL: string;
   readonly links: {
     readonly settings: string;
+    readonly elasticStackGetStarted: string;
     readonly apm: {
       readonly kibanaSettings: string;
       readonly supportedServiceMaps: string;

diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
@@ -478,6 +478,7 @@ export interface DocLinksStart {
     // (undocumented)
     readonly links: {
         readonly settings: string;
+        readonly elasticStackGetStarted: string;
         readonly apm: {
             readonly kibanaSettings: string;
             readonly supportedServiceMaps: string;

diff --git a/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx b/x-pack/plugins/fleet/public/applications/integrations/layouts/default.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 import React, { memo } from 'react';
-import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiImage, EuiSpacer, EuiText, EuiLink } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 import { i18n } from '@kbn/i18n';
@@ -17,7 +17,7 @@ import type { EuiTheme } from 'src/plugins/kibana_react/common';
 import { useLink } from '../../../hooks';
 import type { Section } from '../sections';
 
-import { useLinks } from '../hooks';
+import { useLinks, useStartServices } from '../hooks';
 
 import { WithHeaderLayout } from './';
 
@@ -27,10 +27,14 @@ interface Props {
 }
 
 const Illustration = styled(EuiImage)`
-  margin-bottom: -68px;
+  margin-bottom: -77px;
   position: relative;
-  top: -20px;
-  width: 80%;
+  top: -16px;
+  width: 395px;
+`;
+
+const Hero = styled.div`
+  text-align: right;
 `;
 
 const HeroImage = memo(() => {
@@ -39,21 +43,24 @@ const HeroImage = memo(() => {
   const IS_DARK_THEME = theme.darkMode;
 
   return (
-    <Illustration
-      alt={i18n.translate('xpack.fleet.epm.illustrationAltText', {
-        defaultMessage: 'Illustration of an integration',
-      })}
-      url={
-        IS_DARK_THEME
-          ? toSharedAssets('illustration_integrations_darkmode.svg')
-          : toSharedAssets('illustration_integrations_lightmode.svg')
-      }
-    />
+    <Hero>
+      <Illustration
+        alt={i18n.translate('xpack.fleet.epm.illustrationAltText', {
+          defaultMessage: 'Illustration of an integration',
+        })}
+        url={
+          IS_DARK_THEME
+            ? toSharedAssets('illustration_integrations_darkmode.svg')
+            : toSharedAssets('illustration_integrations_lightmode.svg')
+        }
+      />
+    </Hero>
   );
 });
 
 export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, children }) => {
   const { getHref } = useLink();
+  const { docLinks } = useStartServices();
 
   return (
     <WithHeaderLayout
@@ -64,7 +71,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, ch
             <h1>
               <FormattedMessage
                 id="xpack.fleet.integrationsHeaderTitle"
-                defaultMessage="Elastic Agent Integrations"
+                defaultMessage="Integrations"
               />
             </h1>
           </EuiText>
@@ -76,7 +83,16 @@ export const DefaultLayout: React.FunctionComponent<Props> = memo(({ section, ch
               <p>
                 <FormattedMessage
                   id="xpack.fleet.epm.pageSubtitle"
-                  defaultMessage="Collect data from popular apps and services using Elastic Agent"
+                  defaultMessage="Collect data from popular applications and services.  To learn more about Integrations, view {link}"
+                  values={{
+                    link: (
+                      <EuiLink target="_blank" href={docLinks.links.elasticStackGetStarted}>
+                        {i18n.translate('xpack.fleet.epm.pageSubtitleLinkText', {
+                          defaultMessage: 'Getting started with Elastic Stack',
+                        })}
+                      </EuiLink>
+                    ),
+                  }}
                 />
               </p>
             </EuiText>

diff --git a/x-pack/plugins/fleet/storybook/context/doc_links.ts b/x-pack/plugins/fleet/storybook/context/doc_links.ts
@@ -10,6 +10,8 @@ import type { DocLinksStart } from 'kibana/public';
 export const getDocLinks = () => {
   const docLinks: DocLinksStart = {
     links: {
+      elasticStackGetStarted:
+        'https://www.elastic.co/guide/en/elastic-stack-get-started/current/get-started-elastic-stack.html',
       fleet: {
         learnMoreBlog:
           'https://www.elastic.co/blog/elastic-agent-and-fleet-make-it-easier-to-integrate-your-systems-with-elastic',

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -4908,6 +4908,16 @@
     "visTypeMetric.colorModes.backgroundOptionLabel": "背景",
     "visTypeMetric.colorModes.labelsOptionLabel": "ラベル",
     "visTypeMetric.colorModes.noneOptionLabel": "なし",
+    "visTypeMetric.metricDescription": "計算結果を単独の数字として表示します。",
+    "visTypeMetric.metricTitle": "メトリック",
+    "visTypeMetric.params.color.useForLabel": "使用する色",
+    "visTypeMetric.params.rangesTitle": "範囲",
+    "visTypeMetric.params.settingsTitle": "設定",
+    "visTypeMetric.params.showTitleLabel": "タイトルを表示",
+    "visTypeMetric.params.style.fontSizeLabel": "ポイント単位のメトリックフォントサイズ",
+    "visTypeMetric.params.style.styleTitle": "スタイル",
+    "visTypeMetric.schemas.metricTitle": "メトリック",
+    "visTypeMetric.schemas.splitGroupTitle": "グループを分割",
     "expressionMetricVis.function.dimension.splitGroup": "グループを分割",
     "expressionMetricVis.function.bgFill.help": "html 16 進数コード（#123456）、html 色（red、blue）、または rgba 値（rgba（255,255,255,1））。",
     "expressionMetricVis.function.bucket.help": "バケットディメンションの構成です。",
@@ -4923,16 +4933,6 @@
     "expressionMetricVis.function.showLabels.help": "メトリック値の下にラベルを表示します。",
     "expressionMetricVis.function.subText.help": "メトリックの下に表示するカスタムテキスト",
     "expressionMetricVis.function.useRanges.help": "有効な色範囲です。",
-    "visTypeMetric.metricDescription": "計算結果を単独の数字として表示します。",
-    "visTypeMetric.metricTitle": "メトリック",
-    "visTypeMetric.params.color.useForLabel": "使用する色",
-    "visTypeMetric.params.rangesTitle": "範囲",
-    "visTypeMetric.params.settingsTitle": "設定",
-    "visTypeMetric.params.showTitleLabel": "タイトルを表示",
-    "visTypeMetric.params.style.fontSizeLabel": "ポイント単位のメトリックフォントサイズ",
-    "visTypeMetric.params.style.styleTitle": "スタイル",
-    "visTypeMetric.schemas.metricTitle": "メトリック",
-    "visTypeMetric.schemas.splitGroupTitle": "グループを分割",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.deprecation": "Visualizeの円グラフのレガシーグラフライブラリは廃止予定であり、8.0以降ではサポートされません。",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.description": "Visualizeで円グラフのレガシーグラフライブラリを有効にします。",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.name": "円グラフのレガシーグラフライブラリ",
@@ -10743,7 +10743,6 @@
     "xpack.fleet.epm.packageDetailsNav.packageCustomLinkText": "高度な設定",
     "xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "ポリシー",
     "xpack.fleet.epm.packageDetailsNav.settingsLinkText": "設定",
-    "xpack.fleet.epm.pageSubtitle": "Elasticエージェントを使用して一般的なアプリやサービスからデータを収集します",
     "xpack.fleet.epm.releaseBadge.betaDescription": "この統合は本番環境用ではありません。",
     "xpack.fleet.epm.releaseBadge.betaLabel": "ベータ",
     "xpack.fleet.epm.releaseBadge.experimentalDescription": "この統合は、急に変更されたり、将来のリリースで削除されたりする可能性があります。",

diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -4953,6 +4953,16 @@
     "visTypeMetric.colorModes.backgroundOptionLabel": "背景",
     "visTypeMetric.colorModes.labelsOptionLabel": "标签",
     "visTypeMetric.colorModes.noneOptionLabel": "无",
+    "visTypeMetric.metricDescription": "将计算结果显示为单个数字。",
+    "visTypeMetric.metricTitle": "指标",
+    "visTypeMetric.params.color.useForLabel": "将颜色用于",
+    "visTypeMetric.params.rangesTitle": "范围",
+    "visTypeMetric.params.settingsTitle": "设置",
+    "visTypeMetric.params.showTitleLabel": "显示标题",
+    "visTypeMetric.params.style.fontSizeLabel": "指标字体大小（磅）",
+    "visTypeMetric.params.style.styleTitle": "样式",
+    "visTypeMetric.schemas.metricTitle": "指标",
+    "visTypeMetric.schemas.splitGroupTitle": "拆分组",
     "expressionMetricVis.function.dimension.splitGroup": "拆分组",
     "expressionMetricVis.function.bgFill.help": "将颜色表示为 html 十六进制代码 (#123456)、html 颜色（red、blue）或 rgba 值 (rgba(255,255,255,1))。",
     "expressionMetricVis.function.bucket.help": "存储桶维度配置",
@@ -4968,16 +4978,6 @@
     "expressionMetricVis.function.showLabels.help": "在指标值下显示标签。",
     "expressionMetricVis.function.subText.help": "要在指标下显示的定制文本",
     "expressionMetricVis.function.useRanges.help": "已启用颜色范围。",
-    "visTypeMetric.metricDescription": "将计算结果显示为单个数字。",
-    "visTypeMetric.metricTitle": "指标",
-    "visTypeMetric.params.color.useForLabel": "将颜色用于",
-    "visTypeMetric.params.rangesTitle": "范围",
-    "visTypeMetric.params.settingsTitle": "设置",
-    "visTypeMetric.params.showTitleLabel": "显示标题",
-    "visTypeMetric.params.style.fontSizeLabel": "指标字体大小（磅）",
-    "visTypeMetric.params.style.styleTitle": "样式",
-    "visTypeMetric.schemas.metricTitle": "指标",
-    "visTypeMetric.schemas.splitGroupTitle": "拆分组",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.deprecation": "Visualize 中饼图的旧版图表库已弃用，自 8.0 后将不受支持。",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.description": "在 Visualize 中启用饼图的旧版图表库。",
     "visTypePie.advancedSettings.visualization.legacyPieChartsLibrary.name": "饼图旧版图表库",
@@ -10857,7 +10857,6 @@
     "xpack.fleet.epm.packageDetailsNav.packageCustomLinkText": "高级",
     "xpack.fleet.epm.packageDetailsNav.packagePoliciesLinkText": "策略",
     "xpack.fleet.epm.packageDetailsNav.settingsLinkText": "设置",
-    "xpack.fleet.epm.pageSubtitle": "使用 Elastic 代理从热门应用和服务中收集数据",
     "xpack.fleet.epm.releaseBadge.betaDescription": "在生产环境中不推荐使用此集成。",
     "xpack.fleet.epm.releaseBadge.betaLabel": "公测版",
     "xpack.fleet.epm.releaseBadge.experimentalDescription": "此集成可能有重大更改或将在未来版本中移除。",