[Security Solution][Timeline] Add Empty view to the Timelines page

elastic · Jul 21, 2020 · dc98afc · dc98afc
1 parent 511e454
commit dc98afc
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 52 deletions.
diff --git a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.test.tsx
@@ -8,7 +8,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import React from 'react';
 
 import { useKibana } from '../../common/lib/kibana';
-import { TimelinesPageComponent } from './timelines_page';
+import { TimelinesPage } from './timelines_page';
 
 jest.mock('react-router-dom', () => {
   const originalModule = jest.requireActual('react-router-dom');
@@ -46,7 +46,7 @@ describe('TimelinesPageComponent', () => {
           },
         },
       });
-      wrapper = shallow(<TimelinesPageComponent />);
+      wrapper = shallow(<TimelinesPage />);
     });
 
     afterAll(() => {
@@ -92,7 +92,7 @@ describe('TimelinesPageComponent', () => {
           },
         },
       });
-      wrapper = shallow(<TimelinesPageComponent />);
+      wrapper = shallow(<TimelinesPage />);
     });
 
     afterAll(() => {

diff --git a/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx b/x-pack/plugins/security_solution/public/timelines/pages/timelines_page.tsx
@@ -15,6 +15,8 @@ import { WrapperPage } from '../../common/components/wrapper_page';
 import { useKibana } from '../../common/lib/kibana';
 import { SpyRoute } from '../../common/utils/route/spy_routes';
 import { useApolloClient } from '../../common/utils/apollo_context';
+import { useWithSource } from '../../common/containers/source';
+import { OverviewEmpty } from '../../overview/components/overview_empty';
 
 import { StatefulOpenTimeline } from '../components/open_timeline';
 import { NEW_TEMPLATE_TIMELINE } from '../components/timeline/properties/translations';
@@ -30,67 +32,77 @@ const TimelinesContainer = styled.div`
 
 export const DEFAULT_SEARCH_RESULTS_PER_PAGE = 10;
 
-export const TimelinesPageComponent: React.FC = () => {
+const TimelinesPageComponent: React.FC = () => {
   const { tabName } = useParams();
   const [importDataModalToggle, setImportDataModalToggle] = useState<boolean>(false);
   const onImportTimelineBtnClick = useCallback(() => {
     setImportDataModalToggle(true);
   }, [setImportDataModalToggle]);
+  const { indicesExist } = useWithSource();
 
   const apolloClient = useApolloClient();
-  const uiCapabilities = useKibana().services.application.capabilities;
-  const capabilitiesCanUserCRUD: boolean = !!uiCapabilities.siem.crud;
+  const capabilitiesCanUserCRUD: boolean = !!useKibana().services.application.capabilities.siem
+    .crud;
 
   return (
     <>
-      <WrapperPage>
-        <HeaderPage border title={i18n.PAGE_TITLE}>
-          <EuiFlexGroup gutterSize="s" alignItems="center">
-            <EuiFlexItem>
-              {capabilitiesCanUserCRUD && (
-                <EuiButton
-                  iconType="indexOpen"
-                  onClick={onImportTimelineBtnClick}
-                  data-test-subj="open-import-data-modal-btn"
-                >
-                  {i18n.ALL_TIMELINES_IMPORT_TIMELINE_TITLE}
-                </EuiButton>
-              )}
-            </EuiFlexItem>
-            {tabName === TimelineType.default ? (
-              <EuiFlexItem>
-                {capabilitiesCanUserCRUD && (
-                  <NewTimeline
-                    timelineId="timeline-1"
-                    outline={true}
-                    data-test-subj="create-default-btn"
-                  />
+      {indicesExist ? (
+        <>
+          <WrapperPage>
+            <HeaderPage border title={i18n.PAGE_TITLE}>
+              <EuiFlexGroup gutterSize="s" alignItems="center">
+                <EuiFlexItem>
+                  {capabilitiesCanUserCRUD && (
+                    <EuiButton
+                      iconType="indexOpen"
+                      onClick={onImportTimelineBtnClick}
+                      data-test-subj="open-import-data-modal-btn"
+                    >
+                      {i18n.ALL_TIMELINES_IMPORT_TIMELINE_TITLE}
+                    </EuiButton>
+                  )}
+                </EuiFlexItem>
+                {tabName === TimelineType.default ? (
+                  <EuiFlexItem>
+                    {capabilitiesCanUserCRUD && (
+                      <NewTimeline
+                        timelineId="timeline-1"
+                        outline={true}
+                        data-test-subj="create-default-btn"
+                      />
+                    )}
+                  </EuiFlexItem>
+                ) : (
+                  <EuiFlexItem>
+                    <NewTemplateTimeline
+                      outline={true}
+                      title={NEW_TEMPLATE_TIMELINE}
+                      data-test-subj="create-template-btn"
+                    />
+                  </EuiFlexItem>
                 )}
-              </EuiFlexItem>
-            ) : (
-              <EuiFlexItem>
-                <NewTemplateTimeline
-                  outline={true}
-                  title={NEW_TEMPLATE_TIMELINE}
-                  data-test-subj="create-template-btn"
-                />
-              </EuiFlexItem>
-            )}
-          </EuiFlexGroup>
-        </HeaderPage>
+              </EuiFlexGroup>
+            </HeaderPage>
 
-        <TimelinesContainer>
-          <StatefulOpenTimeline
-            apolloClient={apolloClient!}
-            defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
-            isModal={false}
-            importDataModalToggle={importDataModalToggle && capabilitiesCanUserCRUD}
-            setImportDataModalToggle={setImportDataModalToggle}
-            title={i18n.ALL_TIMELINES_PANEL_TITLE}
-            data-test-subj="stateful-open-timeline"
-          />
-        </TimelinesContainer>
-      </WrapperPage>
+            <TimelinesContainer>
+              <StatefulOpenTimeline
+                apolloClient={apolloClient!}
+                defaultPageSize={DEFAULT_SEARCH_RESULTS_PER_PAGE}
+                isModal={false}
+                importDataModalToggle={importDataModalToggle && capabilitiesCanUserCRUD}
+                setImportDataModalToggle={setImportDataModalToggle}
+                title={i18n.ALL_TIMELINES_PANEL_TITLE}
+                data-test-subj="stateful-open-timeline"
+              />
+            </TimelinesContainer>
+          </WrapperPage>
+        </>
+      ) : (
+        <WrapperPage>
+          <HeaderPage border title={i18n.PAGE_TITLE} />
+          <OverviewEmpty />
+        </WrapperPage>
+      )}
 
       <SpyRoute pageName={SecurityPageName.timelines} />
     </>