[Security] Add Timeline improvements (#71506) (#71639)

elastic · Jul 14, 2020 · 970ad1f · 970ad1f
1 parent ebf2b98
commit 970ad1f
Show file tree

Hide file tree

Showing 5 changed files with 78 additions and 42 deletions.
diff --git a/x-pack/plugins/security_solution/cypress/tasks/timeline.ts b/x-pack/plugins/security_solution/cypress/tasks/timeline.ts
@@ -27,6 +27,8 @@ import {
 
 import { drag, drop } from '../tasks/common';
 
+export const hostExistsQuery = 'host.name: *';
+
 export const addDescriptionToTimeline = (description: string) => {
   cy.get(TIMELINE_DESCRIPTION).type(`${description}{enter}`);
   cy.get(DATE_PICKER_APPLY_BUTTON_TIMELINE).click().invoke('text').should('not.equal', 'Updating');
@@ -77,6 +79,7 @@ export const openTimelineSettings = () => {
 };
 
 export const populateTimeline = () => {
+  executeTimelineKQL(hostExistsQuery);
   cy.get(SERVER_SIDE_EVENT_COUNT)
     .invoke('text')
     .then((strCount) => {

diff --git a/...public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap b/...public/timelines/components/timeline/data_providers/__snapshots__/providers.test.tsx.snap
diff --git a/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx b/...olution/public/timelines/components/timeline/data_providers/add_data_provider_popover.tsx
@@ -7,6 +7,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import {
   EuiButton,
+  EuiButtonEmpty,
   EuiContextMenu,
   EuiText,
   EuiPopover,
@@ -139,21 +140,33 @@ const AddDataProviderPopoverComponent: React.FC<AddDataProviderPopoverProps> = (
     [browserFields, handleDataProviderEdited, timelineId, timelineType]
   );
 
-  const button = useMemo(
-    () => (
-      <EuiButton
+  const button = useMemo(() => {
+    if (timelineType === TimelineType.template) {
+      return (
+        <EuiButton
+          size="s"
+          onClick={handleOpenPopover}
+          data-test-subj="addFilter"
+          iconType="arrowDown"
+          fill
+          iconSide="right"
+        >
+          <EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
+        </EuiButton>
+      );
+    }
+
+    return (
+      <EuiButtonEmpty
         size="s"
         onClick={handleOpenPopover}
         data-test-subj="addFilter"
-        iconType="arrowDown"
-        fill
         iconSide="right"
       >
-        <EuiText size="s">{ADD_FIELD_LABEL}</EuiText>
-      </EuiButton>
-    ),
-    [handleOpenPopover]
-  );
+        <EuiText size="s">{`+ ${ADD_FIELD_LABEL}`}</EuiText>
+      </EuiButtonEmpty>
+    );
+  }, [handleOpenPopover, timelineType]);
 
   const content = useMemo(() => {
     if (timelineType === TimelineType.template) {

diff --git a/...ugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx b/...ugins/security_solution/public/timelines/components/timeline/data_providers/providers.tsx
@@ -82,10 +82,10 @@ const Parens = styled.span`
   `}
 `;
 
-const AndOrBadgeContainer = styled.div`
-  width: 121px;
-  display: flex;
-  justify-content: flex-end;
+const AndOrBadgeContainer = styled.div<{ hideBadge: boolean }>`
+  span {
+    visibility: ${({ hideBadge }) => (hideBadge ? 'hidden' : 'inherit')};
+  }
 `;
 
 const LastAndOrBadgeInGroup = styled.div`
@@ -113,10 +113,6 @@ const ParensContainer = styled(EuiFlexItem)`
   align-self: center;
 `;
 
-const AddDataProviderContainer = styled.div`
-  padding-right: 9px;
-`;
-
 const getDataProviderValue = (dataProvider: DataProvidersAnd) =>
   dataProvider.queryMatch.displayValue ?? dataProvider.queryMatch.value;
 
@@ -152,15 +148,9 @@ export const Providers = React.memo<Props>(
 
             <EuiFlexGroup alignItems="center" gutterSize="none">
               <OrFlexItem grow={false}>
-                {groupIndex === 0 ? (
-                  <AddDataProviderContainer>
-                    <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
-                  </AddDataProviderContainer>
-                ) : (
-                  <AndOrBadgeContainer>
-                    <AndOrBadge type="or" />
-                  </AndOrBadgeContainer>
-                )}
+                <AndOrBadgeContainer hideBadge={groupIndex === 0}>
+                  <AndOrBadge type="or" />
+                </AndOrBadgeContainer>
               </OrFlexItem>
               <ParensContainer grow={false}>
                 <Parens>{'('}</Parens>
@@ -300,6 +290,9 @@ export const Providers = React.memo<Props>(
               <ParensContainer grow={false}>
                 <Parens>{')'}</Parens>
               </ParensContainer>
+              {groupIndex === dataProviderGroups.length - 1 && (
+                <AddDataProviderPopover browserFields={browserFields} timelineId={timelineId} />
+              )}
             </EuiFlexGroup>
           </Fragment>
         ))}

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/index.tsx
@@ -266,7 +266,9 @@ const makeMapStateToProps = () => {
 
     // return events on empty search
     const kqlQueryExpression =
-      isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) ? ' ' : kqlQueryTimeline;
+      isEmpty(dataProviders) && isEmpty(kqlQueryTimeline) && timelineType === 'template'
+        ? ' '
+        : kqlQueryTimeline;
     return {
       columns,
       dataProviders,