[7.2] [SIEM] Update Empty Page Messages (#37251) (#37384)

* [SIEM] Update Empty Page Messages (#37251)

* update EmptyPage comp and text on all pages

* change proptype from `string` to `IconType`

* update tests and snapshots

* remove translation imports

* restore `align-self` styles for IE11 centering

* proper apostrophe and string in single quotes, per frank

* update host and ip details

* DRYing up host and network empty page message

* fix localization

* fixing localization again

* fix localizations again again

x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap

@@ -2,9 +2,8 @@
 
 exports[`renders correctly 1`] = `
 <Component
-  actionLabel="Do Something"
-  actionUrl="my/url/from/nowwhere"
-  message="My awesome message"
+  actionPrimaryLabel="Do Something"
+  actionPrimaryUrl="my/url/from/nowwhere"
   title="My Super Title"
 />
 `;

x-pack/plugins/siem/public/components/empty_page/index.test.tsx

@@ -13,10 +13,9 @@ import { EmptyPage } from './index';
 test('renders correctly', () => {
   const EmptyComponent = shallow(
     <EmptyPage
+      actionPrimaryLabel="Do Something"
+      actionPrimaryUrl="my/url/from/nowwhere"
       title="My Super Title"
-      message="My awesome message"
-      actionLabel="Do Something"
-      actionUrl="my/url/from/nowwhere"
     />
   );
   expect(toJson(EmptyComponent)).toMatchSnapshot();

x-pack/plugins/siem/public/components/empty_page/index.tsx

@@ -4,34 +4,73 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { EuiButton, EuiEmptyPrompt, EuiFlexGroup, EuiFlexItem, IconType } from '@elastic/eui';
 import React from 'react';
 import { pure } from 'recompose';
 import styled from 'styled-components';
 
+const EmptyPrompt = styled(EuiEmptyPrompt)`
+  align-self: center; // Corrects horizontal centering in IE11
+`;
+
 interface EmptyPageProps {
-  message: string;
-  title: string;
-  actionLabel: string;
-  actionUrl: string;
+  actionPrimaryIcon?: IconType;
+  actionPrimaryLabel: string;
+  actionPrimaryTarget?: string;
+  actionPrimaryUrl: string;
+  actionSecondaryIcon?: IconType;
+  actionSecondaryLabel?: string;
+  actionSecondaryTarget?: string;
+  actionSecondaryUrl?: string;
   'data-test-subj'?: string;
+  message?: string;
+  title: string;
 }
 
 export const EmptyPage = pure<EmptyPageProps>(
-  ({ actionLabel, actionUrl, message, title, ...rest }) => (
-    <CenteredEmptyPrompt
+  ({
+    actionPrimaryIcon,
+    actionPrimaryLabel,
+    actionPrimaryTarget,
+    actionPrimaryUrl,
+    actionSecondaryIcon,
+    actionSecondaryLabel,
+    actionSecondaryTarget,
+    actionSecondaryUrl,
+    message,
+    title,
+    ...rest
+  }) => (
+    <EmptyPrompt
       title={<h2>{title}</h2>}
-      body={<p>{message}</p>}
+      body={message && <p>{message}</p>}
       actions={
-        <EuiButton href={actionUrl} color="primary" fill>
-          {actionLabel}
-        </EuiButton>
+        <EuiFlexGroup>
+          <EuiFlexItem>
+            <EuiButton
+              fill
+              href={actionPrimaryUrl}
+              iconType={actionPrimaryIcon}
+              target={actionPrimaryTarget}
+            >
+              {actionPrimaryLabel}
+            </EuiButton>
+          </EuiFlexItem>
+
+          {actionSecondaryLabel && actionSecondaryUrl && (
+            <EuiFlexItem>
+              <EuiButton
+                href={actionSecondaryUrl}
+                iconType={actionSecondaryIcon}
+                target={actionSecondaryTarget}
+              >
+                {actionSecondaryLabel}
+              </EuiButton>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
       }
       {...rest}
     />
   )
 );
-
-const CenteredEmptyPrompt = styled(EuiEmptyPrompt)`
-  align-self: center;
-`;

x-pack/plugins/siem/public/pages/hosts/host_details.tsx

@@ -10,11 +10,10 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 import { pure } from 'recompose';
-import chrome, { Breadcrumb } from 'ui/chrome';
+import { Breadcrumb } from 'ui/chrome';
 import { StaticIndexPattern } from 'ui/index_patterns';
 
 import { ESTermQuery } from '../../../common/typed_json';
-import { EmptyPage } from '../../components/empty_page';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
@@ -33,11 +32,11 @@ import { LastEventIndexKey } from '../../graphql/types';
 import { convertKueryToElasticSearchQuery, escapeQueryValue } from '../../lib/keury';
 import { hostsModel, hostsSelectors, State } from '../../store';
 
+import { HostsEmptyPage } from './hosts_empty_page';
 import { HostsKql } from './kql';
 import * as i18n from './translations';
 import { UrlStateContainer } from '../../components/url_state';
 
-const basePath = chrome.getBasePath();
 const type = hostsModel.HostsType.details;
 
 const HostOverviewManage = manageQuery(HostOverview);
@@ -190,12 +189,11 @@ const HostDetailsComponent = pure<HostDetailsComponentProps>(
             </GlobalTime>
           </StickyContainer>
         ) : (
-          <EmptyPage
-            title={i18n.NO_AUDITBEAT_INDICES}
-            message={i18n.LETS_ADD_SOME}
-            actionLabel={i18n.SETUP_INSTRUCTIONS}
-            actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
-          />
+          <>
+            <HeaderPage title={hostName} />
+
+            <HostsEmptyPage />
+          </>
         )
       }
     </WithSource>
@@ -213,7 +211,7 @@ export const HostDetails = connect(makeMapStateToProps)(HostDetailsComponent);
 
 export const getBreadcrumbs = (hostId: string): Breadcrumb[] => [
   {
-    text: i18n.HOSTS,
+    text: i18n.PAGE_TITLE,
     href: getHostsUrl(),
   },
   {

x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx

@@ -16,8 +16,6 @@ import { TestProviders } from '../../mock';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { cloneDeep } from 'lodash/fp';
 
-import * as i18n from './translations';
-
 jest.mock('ui/documentation_links', () => ({
   documentationLinks: {
     kibana: 'http://www.example.com',
@@ -89,7 +87,7 @@ describe('Hosts - rendering', () => {
     // Why => https://github.com/apollographql/react-apollo/issues/1711
     await new Promise(resolve => setTimeout(resolve));
     wrapper.update();
-    expect(wrapper.text()).toContain(i18n.SETUP_INSTRUCTIONS);
+    expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(true);
   });
 
   test('it DOES NOT render the Setup Instructions text when an index is available', async () => {
@@ -106,6 +104,6 @@ describe('Hosts - rendering', () => {
     // Why => https://github.com/apollographql/react-apollo/issues/1711
     await new Promise(resolve => setTimeout(resolve));
     wrapper.update();
-    expect(wrapper.text()).not.toContain(i18n.SETUP_INSTRUCTIONS);
+    expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(false);
   });
 });

x-pack/plugins/siem/public/pages/hosts/hosts.tsx

@@ -10,9 +10,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 import { pure } from 'recompose';
-import chrome from 'ui/chrome';
 
-import { EmptyPage } from '../../components/empty_page';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
@@ -34,12 +32,11 @@ import { UncommonProcessesQuery } from '../../containers/uncommon_processes';
 import { LastEventIndexKey } from '../../graphql/types';
 import { hostsModel, hostsSelectors, State } from '../../store';
 
+import { HostsEmptyPage } from './hosts_empty_page';
 import { HostsKql } from './kql';
 import * as i18n from './translations';
 import { UrlStateContainer } from '../../components/url_state';
 
-const basePath = chrome.getBasePath();
-
 const AuthenticationTableManage = manageQuery(AuthenticationTable);
 const HostsTableManage = manageQuery(HostsTable);
 const EventsTableManage = manageQuery(EventsTable);
@@ -63,7 +60,7 @@ const HostsComponent = pure<HostsComponentProps>(({ filterQuery }) => (
 
           <HeaderPage
             subtitle={<LastEventTime indexKey={LastEventIndexKey.hosts} />}
-            title={i18n.HOSTS}
+            title={i18n.PAGE_TITLE}
           />
 
           <GlobalTime>
@@ -200,12 +197,11 @@ const HostsComponent = pure<HostsComponentProps>(({ filterQuery }) => (
           </GlobalTime>
         </StickyContainer>
       ) : (
-        <EmptyPage
-          title={i18n.NO_AUDITBEAT_INDICES}
-          message={i18n.LETS_ADD_SOME}
-          actionLabel={i18n.SETUP_INSTRUCTIONS}
-          actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
-        />
+        <>
+          <HeaderPage title={i18n.PAGE_TITLE} />
+
+          <HostsEmptyPage />
+        </>
       )
     }
   </WithSource>

x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { pure } from 'recompose';
+import chrome from 'ui/chrome';
+import { documentationLinks } from 'ui/documentation_links';
+
+import { EmptyPage } from '../../components/empty_page';
+
+import * as i18n from './translations';
+
+const basePath = chrome.getBasePath();
+
+export const HostsEmptyPage = pure(() => (
+  <EmptyPage
+    actionPrimaryIcon="gear"
+    actionPrimaryLabel={i18n.EMPTY_ACTION_PRIMARY}
+    actionPrimaryUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
+    actionSecondaryIcon="popout"
+    actionSecondaryLabel={i18n.EMPTY_ACTION_SECONDARY}
+    actionSecondaryTarget="_blank"
+    actionSecondaryUrl={documentationLinks.siem}
+    data-test-subj="empty-page"
+    title={i18n.EMPTY_TITLE}
+  />
+));

x-pack/plugins/siem/public/pages/hosts/kql.tsx

@@ -36,7 +36,7 @@ export const HostsKql = pure<HostsKqlProps>(({ indexPattern, type }) => (
             loadSuggestions={loadSuggestions}
             onChange={setFilterQueryDraftFromKueryExpression}
             onSubmit={applyFilterQueryFromKueryExpression}
-            placeholder={i18n.KQL_PLACE_HOLDER}
+            placeholder={i18n.KQL_PLACEHOLDER}
             suggestions={suggestions}
             value={filterQueryDraft ? filterQueryDraft.expression : ''}
           />

x-pack/plugins/siem/public/pages/hosts/translations.ts

@@ -6,22 +6,23 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const HOSTS = i18n.translate('xpack.siem.hosts.hosts', {
-  defaultMessage: 'Hosts',
-});
-
-export const NO_AUDITBEAT_INDICES = i18n.translate('xpack.siem.hosts.noAuditBeatIndicies', {
-  defaultMessage: "Looks like you don't have any Auditbeat indices.",
-});
-
-export const KQL_PLACE_HOLDER = i18n.translate('xpack.siem.hosts.kqlPlaceHolder', {
+export const KQL_PLACEHOLDER = i18n.translate('xpack.siem.hosts.kqlPlaceholder', {
   defaultMessage: 'e.g. host.name: "foo"',
 });
 
-export const LETS_ADD_SOME = i18n.translate('xpack.siem.hosts.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const PAGE_TITLE = i18n.translate('xpack.siem.hosts.pageTitle', {
+  defaultMessage: 'Hosts',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.hosts.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_TITLE = i18n.translate('xpack.siem.hosts.emptyTitle', {
+  defaultMessage:
+    'It looks like you don’t have any indices relevant to hosts in the SIEM application',
+});
+
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.hosts.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
+});
+
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.hosts.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });

x-pack/plugins/siem/public/pages/network/ip_details.tsx

@@ -10,9 +10,8 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 import { pure } from 'recompose';
-import chrome, { Breadcrumb } from 'ui/chrome';
+import { Breadcrumb } from 'ui/chrome';
 
-import { EmptyPage } from '../../components/empty_page';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
@@ -31,14 +30,13 @@ import { networkModel, networkSelectors, State } from '../../store';
 import { TlsTable } from '../../components/page/network/tls_table';
 
 import { NetworkKql } from './kql';
+import { NetworkEmptyPage } from './network_empty_page';
 import * as i18n from './translations';
 import { TlsQuery } from '../../containers/tls';
 import { UsersTable } from '../../components/page/network/users_table';
 import { UsersQuery } from '../../containers/users';
 import { UrlStateContainer } from '../../components/url_state';
 
-const basePath = chrome.getBasePath();
-
 const DomainsTableManage = manageQuery(DomainsTable);
 const TlsTableManage = manageQuery(TlsTable);
 const UsersTableManage = manageQuery(UsersTable);
@@ -183,12 +181,11 @@ const IPDetailsComponent = pure<IPDetailsComponentProps>(
             </GlobalTime>
           </StickyContainer>
         ) : (
-          <EmptyPage
-            title={i18n.NO_FILEBEAT_INDICES}
-            message={i18n.LETS_ADD_SOME}
-            actionLabel={i18n.SETUP_INSTRUCTIONS}
-            actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
-          />
+          <>
+            <HeaderPage title={ip} />
+
+            <NetworkEmptyPage />
+          </>
         )
       }
     </WithSource>
@@ -208,7 +205,7 @@ export const IPDetails = connect(makeMapStateToProps)(IPDetailsComponent);
 
 export const getBreadcrumbs = (ip: string): Breadcrumb[] => [
   {
-    text: i18n.NETWORK,
+    text: i18n.PAGE_TITLE,
     href: getNetworkUrl(),
   },
   {

x-pack/plugins/siem/public/pages/network/kql.tsx

@@ -36,7 +36,7 @@ export const NetworkKql = pure<NetworkKqlProps>(({ indexPattern, type }) => (
             loadSuggestions={loadSuggestions}
             onChange={setFilterQueryDraftFromKueryExpression}
             onSubmit={applyFilterQueryFromKueryExpression}
-            placeholder={i18n.KQL_PLACE_HOLDER}
+            placeholder={i18n.KQL_PLACEHOLDER}
             suggestions={suggestions}
             value={filterQueryDraft ? filterQueryDraft.expression : ''}
           />

x-pack/plugins/siem/public/pages/network/network.test.tsx

@@ -16,8 +16,6 @@ import { TestProviders } from '../../mock';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { cloneDeep } from 'lodash/fp';
 
-import * as i18n from './translations';
-
 jest.mock('ui/documentation_links', () => ({
   documentationLinks: {
     kibana: 'http://www.example.com',
@@ -90,7 +88,7 @@ describe('rendering - rendering', () => {
     // Why => https://github.com/apollographql/react-apollo/issues/1711
     await new Promise(resolve => setTimeout(resolve));
     wrapper.update();
-    expect(wrapper.text()).toContain(i18n.SETUP_INSTRUCTIONS);
+    expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(true);
   });
 
   test('it DOES NOT render the Setup Instructions text when an index is available', async () => {
@@ -107,6 +105,6 @@ describe('rendering - rendering', () => {
     // Why => https://github.com/apollographql/react-apollo/issues/1711
     await new Promise(resolve => setTimeout(resolve));
     wrapper.update();
-    expect(wrapper.text()).not.toContain(i18n.SETUP_INSTRUCTIONS);
+    expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(false);
   });
 });

x-pack/plugins/siem/public/pages/network/network.tsx

@@ -10,9 +10,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { StickyContainer } from 'react-sticky';
 import { pure } from 'recompose';
-import chrome from 'ui/chrome';
 
-import { EmptyPage } from '../../components/empty_page';
 import { FiltersGlobal } from '../../components/filters_global';
 import { HeaderPage } from '../../components/header_page';
 import { LastEventTime } from '../../components/last_event_time';
@@ -28,11 +26,10 @@ import { LastEventIndexKey } from '../../graphql/types';
 import { networkModel, networkSelectors, State } from '../../store';
 
 import { NetworkKql } from './kql';
+import { NetworkEmptyPage } from './network_empty_page';
 import * as i18n from './translations';
 import { UrlStateContainer } from '../../components/url_state';
 
-const basePath = chrome.getBasePath();
-
 const NetworkTopNFlowTableManage = manageQuery(NetworkTopNFlowTable);
 const NetworkDnsTableManage = manageQuery(NetworkDnsTable);
 const KpiNetworkComponentManage = manageQuery(KpiNetworkComponent);
@@ -53,7 +50,7 @@ const NetworkComponent = pure<NetworkComponentProps>(({ filterQuery }) => (
 
           <HeaderPage
             subtitle={<LastEventTime indexKey={LastEventIndexKey.network} />}
-            title={i18n.NETWORK}
+            title={i18n.PAGE_TITLE}
           />
 
           <GlobalTime>
@@ -131,12 +128,11 @@ const NetworkComponent = pure<NetworkComponentProps>(({ filterQuery }) => (
           </GlobalTime>
         </StickyContainer>
       ) : (
-        <EmptyPage
-          title={i18n.NO_FILEBEAT_INDICES}
-          message={i18n.LETS_ADD_SOME}
-          actionLabel={i18n.SETUP_INSTRUCTIONS}
-          actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
-        />
+        <>
+          <HeaderPage title={i18n.PAGE_TITLE} />
+
+          <NetworkEmptyPage />
+        </>
       )
     }
   </WithSource>

x-pack/plugins/siem/public/pages/network/network_empty_page.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { pure } from 'recompose';
+import chrome from 'ui/chrome';
+import { documentationLinks } from 'ui/documentation_links';
+
+import { EmptyPage } from '../../components/empty_page';
+
+import * as i18n from './translations';
+
+const basePath = chrome.getBasePath();
+
+export const NetworkEmptyPage = pure(() => (
+  <EmptyPage
+    actionPrimaryIcon="gear"
+    actionPrimaryLabel={i18n.EMPTY_ACTION_PRIMARY}
+    actionPrimaryUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
+    actionSecondaryIcon="popout"
+    actionSecondaryLabel={i18n.EMPTY_ACTION_SECONDARY}
+    actionSecondaryTarget="_blank"
+    actionSecondaryUrl={documentationLinks.siem}
+    data-test-subj="empty-page"
+    title={i18n.EMPTY_TITLE}
+  />
+));

x-pack/plugins/siem/public/pages/network/translations.ts

@@ -6,22 +6,23 @@
 
 import { i18n } from '@kbn/i18n';
 
-export const NETWORK = i18n.translate('xpack.siem.network', {
-  defaultMessage: 'Network',
-});
-
-export const NO_FILEBEAT_INDICES = i18n.translate('xpack.siem.network.noFilebeatIndicies', {
-  defaultMessage: "Looks like you don't have any Filebeat indices.",
-});
-
-export const KQL_PLACE_HOLDER = i18n.translate('xpack.siem.network.kqlPlaceHolder', {
+export const KQL_PLACEHOLDER = i18n.translate('xpack.siem.network.kqlPlaceholder', {
   defaultMessage: 'e.g. source.ip: "foo"',
 });
 
-export const LETS_ADD_SOME = i18n.translate('xpack.siem.network.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const PAGE_TITLE = i18n.translate('xpack.siem.network.pageTitle', {
+  defaultMessage: 'Network',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.network.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_TITLE = i18n.translate('xpack.siem.network.emptyTitle', {
+  defaultMessage:
+    'It looks like you don’t have any indices relevant to network in the SIEM application',
+});
+
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.network.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
+});
+
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.network.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });

x-pack/plugins/siem/public/pages/overview/overview.test.tsx

@@ -14,8 +14,6 @@ import { TestProviders } from '../../mock';
 import { MockedProvider } from 'react-apollo/test-utils';
 import { cloneDeep } from 'lodash/fp';
 
-import * as i18n from './translations';
-
 jest.mock('ui/documentation_links', () => ({
   documentationLinks: {
     kibana: 'http://www.example.com',
@@ -53,7 +51,7 @@ describe('Overview', () => {
       // Why => https://github.com/apollographql/react-apollo/issues/1711
       await new Promise(resolve => setTimeout(resolve));
       wrapper.update();
-      expect(wrapper.text()).toContain(i18n.SETUP_INSTRUCTIONS);
+      expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(true);
     });
 
     test('it DOES NOT render the Getting started text when an index is available', async () => {
@@ -68,7 +66,7 @@ describe('Overview', () => {
       // Why => https://github.com/apollographql/react-apollo/issues/1711
       await new Promise(resolve => setTimeout(resolve));
       wrapper.update();
-      expect(wrapper.text()).not.toContain(i18n.SETUP_INSTRUCTIONS);
+      expect(wrapper.find('[data-test-subj="empty-page"]').exists()).toBe(false);
     });
   });
 });

x-pack/plugins/siem/public/pages/overview/overview.tsx

@@ -9,6 +9,7 @@ import moment from 'moment';
 import React from 'react';
 import { pure } from 'recompose';
 import chrome from 'ui/chrome';
+import { documentationLinks } from 'ui/documentation_links';
 
 import { HeaderPage } from '../../components/header_page';
 import { OverviewHost } from '../../components/page/overview/overview_host';
@@ -29,12 +30,12 @@ export const OverviewComponent = pure(() => {
   const dateStart = dateEnd - dateRange;
 
   return (
-    <WithSource sourceId="default">
-      {({ indicesExist }) =>
-        indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
-          <>
-            <HeaderPage subtitle={i18n.PAGE_SUBTITLE} title={i18n.PAGE_TITLE} />
+    <>
+      <HeaderPage subtitle={i18n.PAGE_SUBTITLE} title={i18n.PAGE_TITLE} />
 
+      <WithSource sourceId="default">
+        {({ indicesExist }) =>
+          indicesExistOrDataTemporarilyUnavailable(indicesExist) ? (
             <GlobalTime>
               {({ setQuery }) => (
                 <EuiFlexGroup>
@@ -44,16 +45,21 @@ export const OverviewComponent = pure(() => {
                 </EuiFlexGroup>
               )}
             </GlobalTime>
-          </>
-        ) : (
-          <EmptyPage
-            title={i18n.NO_FILEBEAT_INDICES}
-            message={i18n.LETS_ADD_SOME}
-            actionLabel={i18n.SETUP_INSTRUCTIONS}
-            actionUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
-          />
-        )
-      }
-    </WithSource>
+          ) : (
+            <EmptyPage
+              actionPrimaryIcon="gear"
+              actionPrimaryLabel={i18n.EMPTY_ACTION_PRIMARY}
+              actionPrimaryUrl={`${basePath}/app/kibana#/home/tutorial_directory/security`}
+              actionSecondaryIcon="popout"
+              actionSecondaryLabel={i18n.EMPTY_ACTION_SECONDARY}
+              actionSecondaryTarget="_blank"
+              actionSecondaryUrl={documentationLinks.siem}
+              data-test-subj="empty-page"
+              title={i18n.EMPTY_TITLE}
+            />
+          )
+        }
+      </WithSource>
+    </>
   );
 });

x-pack/plugins/siem/public/pages/overview/translations.ts

@@ -14,17 +14,14 @@ export const PAGE_SUBTITLE = i18n.translate('xpack.siem.overview.pageSubtitle',
   defaultMessage: 'Security Information & Event Management with the Elastic Stack',
 });
 
-export const NO_FILEBEAT_INDICES = i18n.translate(
-  'xpack.siem.overview.network.noFilebeatIndicies',
-  {
-    defaultMessage: "Looks like you don't have any Filebeat and Auditbeat indices.",
-  }
-);
-
-export const LETS_ADD_SOME = i18n.translate('xpack.siem.overview.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const EMPTY_TITLE = i18n.translate('xpack.siem.overview.emptyTitle', {
+  defaultMessage: 'It looks like you don’t have any indices relevant to the SIEM application',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.overview.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.overview.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
+});
+
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.overview.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });

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

@@ -9162,11 +9162,6 @@
     "xpack.siem.host.details.overview.platformTitle": "プラットフォーム",
     "xpack.siem.host.details.overview.regionTitle": "地域",
     "xpack.siem.host.details.versionLabel": "バージョン",
-    "xpack.siem.hosts.hosts": "ホスト",
-    "xpack.siem.hosts.kqlPlaceHolder": "検索… (例: host.name:\"foo\" AND process.name:\"bar\")",
-    "xpack.siem.hosts.letsAddSome.description": "追加しましょう！",
-    "xpack.siem.hosts.noAuditBeatIndicies": "Auditbeat モジュールがないようです。",
-    "xpack.siem.hosts.setupInstructions": "セットアップの手順",
     "xpack.siem.hostsTable.firstLastSeenToolTip": "選択された日付範囲に比較して",
     "xpack.siem.hostsTable.firstSeenTitle": "初回の検知",
     "xpack.siem.hostsTable.helperTooltip": "ホスト表は最後に検知された順に並べられています",
@@ -9203,7 +9198,6 @@
     "xpack.siem.navigation.network": "ネットワーク",
     "xpack.siem.navigation.overview": "概要",
     "xpack.siem.navigation.timelines": "タイムライン",
-    "xpack.siem.network": "ネットワーク",
     "xpack.siem.network.ipDetails.domainsTable.bidirectionalDropDownOptionLabel": "双方向",
     "xpack.siem.network.ipDetails.domainsTable.columns.bytesTitle": "バイト",
     "xpack.siem.network.ipDetails.domainsTable.columns.directionTitle": "方向",
@@ -9253,10 +9247,6 @@
     "xpack.siem.network.ipDetails.usersTable.rows": "{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}",
     "xpack.siem.network.ipDetails.usersTable.unit": "{totalCount, plural, =1 {User} other {Users}}",
     "xpack.siem.network.ipDetails.usersTable.usersTitle": "ユーザー",
-    "xpack.siem.network.kqlPlaceHolder": "検索… (例: network.name:\"foo\" AND process.name:\"bar\")",
-    "xpack.siem.network.letsAddSome.description": "追加しましょう！",
-    "xpack.siem.network.noFilebeatIndicies": "Filebeat インデックスがないようです。",
-    "xpack.siem.network.setupInstructions": "セットアップの手順",
     "xpack.siem.networkDnsTable.column.bytesInTitle": "受信 DNS バイト",
     "xpack.siem.networkDnsTable.column.bytesOutTitle": "送信 DNS バイト",
     "xpack.siem.networkDnsTable.column.registeredDomain": "登録ドメイン",
@@ -9333,15 +9323,12 @@
     "xpack.siem.overview.fileBeatZeekTitle": "Filebeat Zeek",
     "xpack.siem.overview.hostsAction": "ホストを表示",
     "xpack.siem.overview.hostsTitle": "ホスト投入インデックス",
-    "xpack.siem.overview.letsAddSome.description": "追加しましょう！",
-    "xpack.siem.overview.network.noFilebeatIndicies": "Filebeat と Auditbeat のインデックスがないようです。",
     "xpack.siem.overview.networkAction": "ネットワークを表示",
     "xpack.siem.overview.networkTitle": "ネットワーク投入インデックス",
     "xpack.siem.overview.packetBeatDnsTitle": "Packetbeat DNS",
     "xpack.siem.overview.packetBeatFlowTitle": "Packetbeat フロー",
     "xpack.siem.overview.pageSubtitle": "Elastic Stack のセキュリティ情報およびイベント管理",
     "xpack.siem.overview.pageTitle": "SIEM",
-    "xpack.siem.overview.setupInstructions": "セットアップの手順",
     "xpack.siem.overview.startedTitle": "はじめに",
     "xpack.siem.source.destination.packetsLabel": "パケット",
     "xpack.siem.system.acceptedDescription": "以下を経由してユーザーを受け入れました：",

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

@@ -9162,11 +9162,6 @@
     "xpack.siem.host.details.overview.platformTitle": "平台",
     "xpack.siem.host.details.overview.regionTitle": "地区",
     "xpack.siem.host.details.versionLabel": "版本",
-    "xpack.siem.hosts.hosts": "主机",
-    "xpack.siem.hosts.kqlPlaceHolder": "搜索……（例如 host.name:\"foo\" AND process.name:\"bar\"）",
-    "xpack.siem.hosts.letsAddSome.description": "让我们添加一些！",
-    "xpack.siem.hosts.noAuditBeatIndicies": "似乎您没有任何 Auditbeat 索引。",
-    "xpack.siem.hosts.setupInstructions": "设置说明",
     "xpack.siem.hostsTable.firstLastSeenToolTip": "相对于选定日期范围",
     "xpack.siem.hostsTable.firstSeenTitle": "首次看到时间",
     "xpack.siem.hostsTable.helperTooltip": "主机表已按最后看到时间排序",
@@ -9203,7 +9198,6 @@
     "xpack.siem.navigation.network": "网络",
     "xpack.siem.navigation.overview": "概览",
     "xpack.siem.navigation.timelines": "时间线",
-    "xpack.siem.network": "网络",
     "xpack.siem.network.ipDetails.domainsTable.bidirectionalDropDownOptionLabel": "双向",
     "xpack.siem.network.ipDetails.domainsTable.columns.bytesTitle": "字节",
     "xpack.siem.network.ipDetails.domainsTable.columns.directionTitle": "方向",
@@ -9253,10 +9247,6 @@
     "xpack.siem.network.ipDetails.usersTable.rows": "{numRows} {numRows, plural, =0 {rows} =1 {row} other {rows}}",
     "xpack.siem.network.ipDetails.usersTable.unit": "{totalCount, plural, =1 {User} other {Users}}",
     "xpack.siem.network.ipDetails.usersTable.usersTitle": "用户",
-    "xpack.siem.network.kqlPlaceHolder": "搜索……（例如 network.name:\"foo\" AND process.name:\"bar\"）",
-    "xpack.siem.network.letsAddSome.description": "让我们添加一些！",
-    "xpack.siem.network.noFilebeatIndicies": "似乎您没有任何 Filebeat 索引。",
-    "xpack.siem.network.setupInstructions": "设置说明",
     "xpack.siem.networkDnsTable.column.bytesInTitle": "DNS 传入字节",
     "xpack.siem.networkDnsTable.column.bytesOutTitle": "DNS 传出字节",
     "xpack.siem.networkDnsTable.column.registeredDomain": "已注册域",
@@ -9333,15 +9323,12 @@
     "xpack.siem.overview.fileBeatZeekTitle": "Filebeat Zeek",
     "xpack.siem.overview.hostsAction": "查看主机",
     "xpack.siem.overview.hostsTitle": "主机采集索引",
-    "xpack.siem.overview.letsAddSome.description": "让我们添加一些！",
-    "xpack.siem.overview.network.noFilebeatIndicies": "似乎您没有任何 Filebeat 和 Auditbeat 索引。",
     "xpack.siem.overview.networkAction": "查看网络",
     "xpack.siem.overview.networkTitle": "网络采集索引",
     "xpack.siem.overview.packetBeatDnsTitle": "Packetbeat DNS",
     "xpack.siem.overview.packetBeatFlowTitle": "Packetbeat 流",
     "xpack.siem.overview.pageSubtitle": "Elastic Stack 的安全信息和事件管理功能",
     "xpack.siem.overview.pageTitle": "SIEM",
-    "xpack.siem.overview.setupInstructions": "设置说明",
     "xpack.siem.overview.startedTitle": "入门",
     "xpack.siem.source.destination.packetsLabel": "pkts",
     "xpack.siem.system.acceptedDescription": "已接受该用户 - 通过",