[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
elastic · May 29, 2019 · 78afde9 · 78afde9
1 parent 38eb16d
commit 78afde9
Show file tree

Hide file tree

Showing 19 changed files with 207 additions and 137 deletions.
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
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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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 : ''}
           />