[fleet] Tweak Header UI (#114704) (#115079)

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>
elastic · Oct 14, 2021 · 328b69d · 328b69d
1 parent 6f57fcd
commit 328b69d
Show file tree

Hide file tree

Showing 8 changed files with 41 additions and 20 deletions.
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`,
@@ -515,6 +517,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
@@ -479,6 +479,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
@@ -10869,7 +10869,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
@@ -10984,7 +10984,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": "此集成可能有重大更改或将在未来版本中移除。",