From 78afde9bd378ce64bd39b42a8817d9635457be8e Mon Sep 17 00:00:00 2001
From: Michael Marcialis <michael@marcial.is>
Date: Wed, 29 May 2019 11:07:40 -0400
Subject: [PATCH] [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
---
 .../__snapshots__/index.test.tsx.snap         |  5 +-
 .../components/empty_page/index.test.tsx      |  5 +-
 .../public/components/empty_page/index.tsx    | 69 +++++++++++++++----
 .../siem/public/pages/hosts/host_details.tsx  | 18 +++--
 .../siem/public/pages/hosts/hosts.test.tsx    |  6 +-
 .../plugins/siem/public/pages/hosts/hosts.tsx | 18 ++---
 .../public/pages/hosts/hosts_empty_page.tsx   | 30 ++++++++
 .../plugins/siem/public/pages/hosts/kql.tsx   |  2 +-
 .../siem/public/pages/hosts/translations.ts   | 21 +++---
 .../siem/public/pages/network/ip_details.tsx  | 19 +++--
 .../plugins/siem/public/pages/network/kql.tsx |  2 +-
 .../public/pages/network/network.test.tsx     |  6 +-
 .../siem/public/pages/network/network.tsx     | 18 ++---
 .../pages/network/network_empty_page.tsx      | 30 ++++++++
 .../siem/public/pages/network/translations.ts | 21 +++---
 .../public/pages/overview/overview.test.tsx   |  6 +-
 .../siem/public/pages/overview/overview.tsx   | 38 +++++-----
 .../public/pages/overview/translations.ts     | 17 ++---
 .../translations/translations/ja-JP.json      | 13 ----
 19 files changed, 207 insertions(+), 137 deletions(-)
 create mode 100644 x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
 create mode 100644 x-pack/plugins/siem/public/pages/network/network_empty_page.tsx

diff --git a/x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap b/x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
index 9c86cc9041348..7e1da6ae7ace3 100644
--- a/x-pack/plugins/siem/public/components/empty_page/__snapshots__/index.test.tsx.snap
+++ b/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"
 />
 `;
diff --git a/x-pack/plugins/siem/public/components/empty_page/index.test.tsx b/x-pack/plugins/siem/public/components/empty_page/index.test.tsx
index b73b505698c20..67b0c5ea64b51 100644
--- a/x-pack/plugins/siem/public/components/empty_page/index.test.tsx
+++ b/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();
diff --git a/x-pack/plugins/siem/public/components/empty_page/index.tsx b/x-pack/plugins/siem/public/components/empty_page/index.tsx
index 6b77a5397540b..fb2aafcbdfcfd 100644
--- a/x-pack/plugins/siem/public/components/empty_page/index.tsx
+++ b/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;
-`;
diff --git a/x-pack/plugins/siem/public/pages/hosts/host_details.tsx b/x-pack/plugins/siem/public/pages/hosts/host_details.tsx
index e2331778c4b4d..5667d91eeb211 100644
--- a/x-pack/plugins/siem/public/pages/hosts/host_details.tsx
+++ b/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(),
   },
   {
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx b/x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx
index a57d61ae03809..70254f65f3ed0 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts.test.tsx
+++ b/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);
   });
 });
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx b/x-pack/plugins/siem/public/pages/hosts/hosts.tsx
index 78b96b1f0d184..c03bf2a6b3232 100644
--- a/x-pack/plugins/siem/public/pages/hosts/hosts.tsx
+++ b/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>
diff --git a/x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx b/x-pack/plugins/siem/public/pages/hosts/hosts_empty_page.tsx
new file mode 100644
index 0000000000000..b6e4a4508f448
--- /dev/null
+++ b/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}
+  />
+));
diff --git a/x-pack/plugins/siem/public/pages/hosts/kql.tsx b/x-pack/plugins/siem/public/pages/hosts/kql.tsx
index 56e127014eced..cb3dc076af369 100644
--- a/x-pack/plugins/siem/public/pages/hosts/kql.tsx
+++ b/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 : ''}
           />
diff --git a/x-pack/plugins/siem/public/pages/hosts/translations.ts b/x-pack/plugins/siem/public/pages/hosts/translations.ts
index a5623fc15e668..e977d8c78c122 100644
--- a/x-pack/plugins/siem/public/pages/hosts/translations.ts
+++ b/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 KQL_PLACEHOLDER = i18n.translate('xpack.siem.hosts.kqlPlaceholder', {
+  defaultMessage: 'e.g. host.name: "foo"',
 });
 
-export const NO_AUDITBEAT_INDICES = i18n.translate('xpack.siem.hosts.noAuditBeatIndicies', {
-  defaultMessage: "Looks like you don't have any Auditbeat indices.",
+export const PAGE_TITLE = i18n.translate('xpack.siem.hosts.pageTitle', {
+  defaultMessage: 'Hosts',
 });
 
-export const KQL_PLACE_HOLDER = i18n.translate('xpack.siem.hosts.kqlPlaceHolder', {
-  defaultMessage: 'e.g. host.name: "foo"',
+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 LETS_ADD_SOME = i18n.translate('xpack.siem.hosts.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.hosts.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.hosts.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.hosts.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });
diff --git a/x-pack/plugins/siem/public/pages/network/ip_details.tsx b/x-pack/plugins/siem/public/pages/network/ip_details.tsx
index 1188b7115b71e..6dca551a6bf8e 100644
--- a/x-pack/plugins/siem/public/pages/network/ip_details.tsx
+++ b/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(),
   },
   {
diff --git a/x-pack/plugins/siem/public/pages/network/kql.tsx b/x-pack/plugins/siem/public/pages/network/kql.tsx
index 68e4a9ab78854..d9731136ddc59 100644
--- a/x-pack/plugins/siem/public/pages/network/kql.tsx
+++ b/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 : ''}
           />
diff --git a/x-pack/plugins/siem/public/pages/network/network.test.tsx b/x-pack/plugins/siem/public/pages/network/network.test.tsx
index 97efd167b6998..2363ae838cc5c 100644
--- a/x-pack/plugins/siem/public/pages/network/network.test.tsx
+++ b/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);
   });
 });
diff --git a/x-pack/plugins/siem/public/pages/network/network.tsx b/x-pack/plugins/siem/public/pages/network/network.tsx
index 953009393921a..b1026de35579f 100644
--- a/x-pack/plugins/siem/public/pages/network/network.tsx
+++ b/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>
diff --git a/x-pack/plugins/siem/public/pages/network/network_empty_page.tsx b/x-pack/plugins/siem/public/pages/network/network_empty_page.tsx
new file mode 100644
index 0000000000000..877611c4d9438
--- /dev/null
+++ b/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}
+  />
+));
diff --git a/x-pack/plugins/siem/public/pages/network/translations.ts b/x-pack/plugins/siem/public/pages/network/translations.ts
index a636a283cc045..9d5a020a745ae 100644
--- a/x-pack/plugins/siem/public/pages/network/translations.ts
+++ b/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 KQL_PLACEHOLDER = i18n.translate('xpack.siem.network.kqlPlaceholder', {
+  defaultMessage: 'e.g. source.ip: "foo"',
 });
 
-export const NO_FILEBEAT_INDICES = i18n.translate('xpack.siem.network.noFilebeatIndicies', {
-  defaultMessage: "Looks like you don't have any Filebeat indices.",
+export const PAGE_TITLE = i18n.translate('xpack.siem.network.pageTitle', {
+  defaultMessage: 'Network',
 });
 
-export const KQL_PLACE_HOLDER = i18n.translate('xpack.siem.network.kqlPlaceHolder', {
-  defaultMessage: 'e.g. source.ip: "foo"',
+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 LETS_ADD_SOME = i18n.translate('xpack.siem.network.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.network.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.network.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.network.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });
diff --git a/x-pack/plugins/siem/public/pages/overview/overview.test.tsx b/x-pack/plugins/siem/public/pages/overview/overview.test.tsx
index 3243602c122ca..04d654856ec31 100644
--- a/x-pack/plugins/siem/public/pages/overview/overview.test.tsx
+++ b/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);
     });
   });
 });
diff --git a/x-pack/plugins/siem/public/pages/overview/overview.tsx b/x-pack/plugins/siem/public/pages/overview/overview.tsx
index 05beda12f11c6..e279fce18b3be 100644
--- a/x-pack/plugins/siem/public/pages/overview/overview.tsx
+++ b/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>
+    </>
   );
 });
diff --git a/x-pack/plugins/siem/public/pages/overview/translations.ts b/x-pack/plugins/siem/public/pages/overview/translations.ts
index ee34f3e69245c..a7bd32c0031b5 100644
--- a/x-pack/plugins/siem/public/pages/overview/translations.ts
+++ b/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 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 LETS_ADD_SOME = i18n.translate('xpack.siem.overview.letsAddSome.description', {
-  defaultMessage: "Let's add some!",
+export const EMPTY_ACTION_PRIMARY = i18n.translate('xpack.siem.overview.emptyActionPrimary', {
+  defaultMessage: 'View setup instructions',
 });
 
-export const SETUP_INSTRUCTIONS = i18n.translate('xpack.siem.overview.setupInstructions', {
-  defaultMessage: 'Setup Instructions',
+export const EMPTY_ACTION_SECONDARY = i18n.translate('xpack.siem.overview.emptyActionSecondary', {
+  defaultMessage: 'Go to documentation',
 });
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
index 09767d2e89431..a842aceff61f1 100644
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@@ -9126,11 +9126,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": "ホスト表は最後に検知された順に並べられています",
@@ -9167,7 +9162,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": "方向",
@@ -9217,10 +9211,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": "登録ドメイン",
@@ -9297,15 +9287,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": "以下を経由してユーザーを受け入れました：",