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

Co-authored-by: Clint Andrew Hall <clint.hall@elastic.co>
2025-04-24 01:38:56 -04:00 · 2021-10-14 17:02:16 -04:00 · 2021-10-14 17:02:16 -04:00 · 328b69daf9
commit 328b69daf9
parent 6f57fcd1bb
8 changed files with 41 additions and 20 deletions
--- 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;
--- a/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
+++ b/docs/development/core/public/kibana-plugin-core-public.doclinksstart.md
--- 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;
--- 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;
--- 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>
--- 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',
--- 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": "この統合は、急に変更されたり、将来のリリースで削除されたりする可能性があります。",
--- 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": "此集成可能有重大更改或将在未来版本中移除。",