From ff46c1f75b22b7c8ae6bd9669f1347b7c18c4b49 Mon Sep 17 00:00:00 2001
From: Patryk Kopycinski <contact@patrykkopycinski.com>
Date: Thu, 12 Mar 2020 19:15:03 +0100
Subject: [PATCH] Fix Events load more

---
 .../siem/public/components/flyout/pane/index.tsx   |  5 +++--
 .../timeline/body/column_headers/column_header.tsx |  5 +++--
 .../components/timeline/body/events/index.tsx      |  2 +-
 .../public/components/timeline/footer/index.tsx    | 14 +-------------
 .../siem/public/containers/timeline/index.tsx      |  6 +++---
 5 files changed, 11 insertions(+), 21 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
index 1c9417fec24b3..3cd62cd8403cb 100644
--- a/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/flyout/pane/index.tsx
@@ -38,6 +38,8 @@ const StyledResizable = styled(Resizable)`
   flex-direction: column;
 `;
 
+const RESIZABLE_ENABLE = { left: true };
+
 const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
   children,
   flyoutHeight,
@@ -69,7 +71,6 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
   );
   const resetLastDelta = useCallback(() => setLastDelta(0), [setLastDelta]);
   const throttledResize = throttle(100, onResizeStop);
-  const resizableEnable = useMemo(() => ({ left: true }), []);
   const resizableDefaultSize = useMemo(
     () => ({
       width,
@@ -95,7 +96,7 @@ const FlyoutPaneComponent: React.FC<FlyoutPaneComponentProps> = ({
         size="l"
       >
         <StyledResizable
-          enable={resizableEnable}
+          enable={RESIZABLE_ENABLE}
           defaultSize={resizableDefaultSize}
           minWidth={minWidthPixels}
           maxWidth={`${maxWidthPercent}vw`}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx
index 926ae90ebba27..9eebf602b55e2 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/column_headers/column_header.tsx
@@ -16,6 +16,8 @@ import { Sort } from '../sort';
 
 import { Header } from './header';
 
+const RESIZABLE_ENABLE = { right: true };
+
 interface ColumneHeaderProps {
   draggableIndex: number;
   header: ColumnHeaderOptions;
@@ -39,7 +41,6 @@ const ColumnHeaderComponent: React.FC<ColumneHeaderProps> = ({
   onFilterChange,
   sort,
 }) => {
-  const resizableEnable = useMemo(() => ({ right: true }), []);
   const resizableSize = useMemo(
     () => ({
       width: header.width,
@@ -78,7 +79,7 @@ const ColumnHeaderComponent: React.FC<ColumneHeaderProps> = ({
 
   return (
     <Resizable
-      enable={resizableEnable}
+      enable={RESIZABLE_ENABLE}
       size={resizableSize}
       style={resizableStyle}
       handleComponent={resizableHandleComponent}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
index 84c4253076dc9..9e1290d572360 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/body/events/index.tsx
@@ -93,7 +93,7 @@ const EventsComponent: React.FC<Props> = ({
         getNotesByIds={getNotesByIds}
         isEventPinned={eventIsPinned({ eventId: event._id, pinnedEventIds })}
         isEventViewer={isEventViewer}
-        key={event._id}
+        key={`${event._id}_${event._index}`}
         loadingEventIds={loadingEventIds}
         maxDelay={maxDelay(i)}
         onColumnResized={onColumnResized}
diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
index 3d7da87bf020b..8b6364d320b02 100644
--- a/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/timeline/footer/index.tsx
@@ -338,18 +338,6 @@ export const FooterComponent = ({
 
 FooterComponent.displayName = 'FooterComponent';
 
-export const Footer = React.memo(
-  FooterComponent,
-  (prevProps, nextProps) =>
-    prevProps.compact === nextProps.compact &&
-    prevProps.hasNextPage === nextProps.hasNextPage &&
-    prevProps.height === nextProps.height &&
-    prevProps.isLive === nextProps.isLive &&
-    prevProps.isLoading === nextProps.isLoading &&
-    prevProps.itemsCount === nextProps.itemsCount &&
-    prevProps.itemsPerPage === nextProps.itemsPerPage &&
-    prevProps.itemsPerPageOptions === nextProps.itemsPerPageOptions &&
-    prevProps.serverSideEventCount === nextProps.serverSideEventCount
-);
+export const Footer = React.memo(FooterComponent);
 
 Footer.displayName = 'Footer';
diff --git a/x-pack/legacy/plugins/siem/public/containers/timeline/index.tsx b/x-pack/legacy/plugins/siem/public/containers/timeline/index.tsx
index ccd8babd41e68..f726ec9779dc8 100644
--- a/x-pack/legacy/plugins/siem/public/containers/timeline/index.tsx
+++ b/x-pack/legacy/plugins/siem/public/containers/timeline/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { getOr } from 'lodash/fp';
+import { getOr, uniqBy } from 'lodash/fp';
 import memoizeOne from 'memoize-one';
 import React from 'react';
 import { Query } from 'react-apollo';
@@ -137,10 +137,10 @@ class TimelineQueryComponent extends QueryTemplate<
                   ...fetchMoreResult.source,
                   Timeline: {
                     ...fetchMoreResult.source.Timeline,
-                    edges: [
+                    edges: uniqBy('node._id', [
                       ...prev.source.Timeline.edges,
                       ...fetchMoreResult.source.Timeline.edges,
-                    ],
+                    ]),
                   },
                 },
               };