[SECURITY SOLUTION] Bring back Drag drop in query tabs of active time…

…line (#111908) * bring back drag drop in active timeline detail view * only allow drag and drop in query tab * fix snapshot * fix bug on alert summary to remove dragdrop
elastic · Sep 13, 2021 · 35c83ba · 35c83ba
1 parent 17150b2
commit 35c83ba
Show file tree

Hide file tree

Showing 19 changed files with 247 additions and 41 deletions.
diff --git a/...k/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx b/...k/plugins/security_solution/public/common/components/event_details/alert_summary_view.tsx
@@ -117,6 +117,7 @@ const getDescription = ({
   data,
   eventId,
   fieldFromBrowserField,
+  isDraggable,
   linkValue,
   timelineId,
   values,
@@ -133,6 +134,7 @@ const getDescription = ({
         eventId={eventId}
         fieldFromBrowserField={fieldFromBrowserField}
         linkValue={linkValue}
+        isDraggable={isDraggable}
         values={values}
       />
       <ActionCell
@@ -181,11 +183,13 @@ export const getSummaryRows = ({
   browserFields,
   timelineId,
   eventId,
+  isDraggable = false,
 }: {
   data: TimelineEventsDetailsItem[];
   browserFields: BrowserFields;
   timelineId: string;
   eventId: string;
+  isDraggable?: boolean;
 }) => {
   const eventCategoryField = find({ category: 'event', field: 'event.category' }, data);
 
@@ -206,6 +210,7 @@ export const getSummaryRows = ({
         const initialDescription = {
           contextId: timelineId,
           eventId,
+          isDraggable,
           value: null,
           fieldType: 'string',
           linkValue: undefined,
@@ -304,15 +309,14 @@ const AlertSummaryViewComponent: React.FC<{
   browserFields: BrowserFields;
   data: TimelineEventsDetailsItem[];
   eventId: string;
+  isDraggable?: boolean;
   timelineId: string;
   title?: string;
-}> = ({ browserFields, data, eventId, timelineId, title }) => {
-  const summaryRows = useMemo(() => getSummaryRows({ browserFields, data, eventId, timelineId }), [
-    browserFields,
-    data,
-    eventId,
-    timelineId,
-  ]);
+}> = ({ browserFields, data, eventId, isDraggable, timelineId, title }) => {
+  const summaryRows = useMemo(
+    () => getSummaryRows({ browserFields, data, eventId, isDraggable, timelineId }),
+    [browserFields, data, eventId, isDraggable, timelineId]
+  );
 
   const ruleId = useMemo(() => {
     const item = data.find((d) => d.field === 'signal.rule.id');

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/columns.tsx
@@ -48,6 +48,7 @@ export const getColumns = ({
   timelineId,
   toggleColumn,
   getLinkValue,
+  isDraggable,
 }: {
   browserFields: BrowserFields;
   columnHeaders: ColumnHeaderOptions[];
@@ -57,6 +58,7 @@ export const getColumns = ({
   timelineId: string;
   toggleColumn: (column: ColumnHeaderOptions) => void;
   getLinkValue: (field: string) => string | null;
+  isDraggable?: boolean;
 }) => [
   {
     field: 'values',
@@ -138,6 +140,7 @@ export const getColumns = ({
           eventId={eventId}
           fieldFromBrowserField={fieldFromBrowserField}
           getLinkValue={getLinkValue}
+          isDraggable={isDraggable}
           values={values}
         />
       );

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/event_details.tsx
@@ -57,6 +57,7 @@ interface Props {
   data: TimelineEventsDetailsItem[];
   id: string;
   isAlert: boolean;
+  isDraggable?: boolean;
   timelineTabType: TimelineTabs | 'flyout';
   timelineId: string;
 }
@@ -95,6 +96,7 @@ const EventDetailsComponent: React.FC<Props> = ({
   data,
   id,
   isAlert,
+  isDraggable,
   timelineId,
   timelineTabType,
 }) => {
@@ -144,6 +146,7 @@ const EventDetailsComponent: React.FC<Props> = ({
                     data,
                     eventId: id,
                     browserFields,
+                    isDraggable,
                     timelineId,
                     title: i18n.DUCOMENT_SUMMARY,
                   }}
@@ -168,13 +171,14 @@ const EventDetailsComponent: React.FC<Props> = ({
         : undefined,
     [
       isAlert,
-      data,
       id,
+      data,
       browserFields,
+      isDraggable,
       timelineId,
-      isEnrichmentsLoading,
       enrichmentCount,
       allEnrichments,
+      isEnrichmentsLoading,
     ]
   );
 
@@ -238,13 +242,14 @@ const EventDetailsComponent: React.FC<Props> = ({
             browserFields={browserFields}
             data={data}
             eventId={id}
+            isDraggable={isDraggable}
             timelineId={timelineId}
             timelineTabType={timelineTabType}
           />
         </>
       ),
     }),
-    [browserFields, data, id, timelineId, timelineTabType]
+    [browserFields, data, id, isDraggable, timelineId, timelineTabType]
   );
 
   const jsonTab = useMemo(

diff --git a/...plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx b/...plugins/security_solution/public/common/components/event_details/event_fields_browser.tsx
@@ -34,6 +34,7 @@ interface Props {
   browserFields: BrowserFields;
   data: TimelineEventsDetailsItem[];
   eventId: string;
+  isDraggable?: boolean;
   timelineId: string;
   timelineTabType: TimelineTabs | 'flyout';
 }
@@ -136,7 +137,7 @@ const StyledEuiInMemoryTable = styled(EuiInMemoryTable as any)`
 
 /** Renders a table view or JSON view of the `ECS` `data` */
 export const EventFieldsBrowser = React.memo<Props>(
-  ({ browserFields, data, eventId, timelineTabType, timelineId }) => {
+  ({ browserFields, data, eventId, isDraggable, timelineTabType, timelineId }) => {
     const containerElement = useRef<HTMLDivElement | null>(null);
     const dispatch = useDispatch();
     const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
@@ -217,6 +218,7 @@ export const EventFieldsBrowser = React.memo<Props>(
           timelineId,
           toggleColumn,
           getLinkValue,
+          isDraggable,
         }),
       [
         browserFields,
@@ -227,6 +229,7 @@ export const EventFieldsBrowser = React.memo<Props>(
         timelineTabType,
         toggleColumn,
         getLinkValue,
+        isDraggable,
       ]
     );
 

diff --git a/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx b/x-pack/plugins/security_solution/public/common/components/event_details/helpers.tsx
@@ -59,6 +59,7 @@ export interface AlertSummaryRow {
   description: {
     data: FieldsData;
     eventId: string;
+    isDraggable?: boolean;
     fieldFromBrowserField?: BrowserField;
     linkValue: string | undefined;
     timelineId: string;

diff --git a/...ugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx b/...ugins/security_solution/public/common/components/event_details/table/field_value_cell.tsx
@@ -19,6 +19,7 @@ export interface FieldValueCellProps {
   eventId: string;
   fieldFromBrowserField?: BrowserField;
   getLinkValue?: (field: string) => string | null;
+  isDraggable?: boolean;
   linkValue?: string | null | undefined;
   values: string[] | null | undefined;
 }
@@ -30,6 +31,7 @@ export const FieldValueCell = React.memo(
     eventId,
     fieldFromBrowserField,
     getLinkValue,
+    isDraggable = false,
     linkValue,
     values,
   }: FieldValueCellProps) => {
@@ -55,7 +57,7 @@ export const FieldValueCell = React.memo(
                     fieldFormat={data.format}
                     fieldName={data.field}
                     fieldType={data.type}
-                    isDraggable={false}
+                    isDraggable={isDraggable}
                     isObjectArray={data.isObjectArray}
                     value={value}
                     linkValue={(getLinkValue && getLinkValue(data.field)) ?? linkValue}

diff --git a/x-pack/plugins/security_solution/public/network/components/details/index.tsx b/x-pack/plugins/security_solution/public/network/components/details/index.tsx
@@ -43,6 +43,7 @@ export interface IpOverviewProps {
   flowTarget: FlowTarget;
   id: string;
   ip: string;
+  isDraggable?: boolean;
   isInDetailsSidePanel: boolean;
   isLoadingAnomaliesData: boolean;
   loading: boolean;
@@ -57,6 +58,7 @@ export const IpOverview = React.memo<IpOverviewProps>(
     id,
     ip,
     data,
+    isDraggable = false,
     isInDetailsSidePanel = false, // Rather than duplicate the component, alter the structure based on it's location
     loading,
     flowTarget,
@@ -76,13 +78,14 @@ export const IpOverview = React.memo<IpOverviewProps>(
         description: locationRenderer(
           [`${flowTarget}.geo.city_name`, `${flowTarget}.geo.region_name`],
           data,
-          contextID
+          contextID,
+          isDraggable
         ),
       },
       {
         title: i18n.AUTONOMOUS_SYSTEM,
         description: typeData
-          ? autonomousSystemRenderer(typeData.autonomousSystem, flowTarget, contextID)
+          ? autonomousSystemRenderer(typeData.autonomousSystem, flowTarget, contextID, isDraggable)
           : getEmptyTagValue(),
       },
     ];
@@ -122,13 +125,15 @@ export const IpOverview = React.memo<IpOverviewProps>(
           title: i18n.HOST_ID,
           description:
             typeData && data.host
-              ? hostIdRenderer({ host: data.host, ipFilter: ip, contextID })
+              ? hostIdRenderer({ host: data.host, isDraggable, ipFilter: ip, contextID })
               : getEmptyTagValue(),
         },
         {
           title: i18n.HOST_NAME,
           description:
-            typeData && data.host ? hostNameRenderer(data.host, ip, contextID) : getEmptyTagValue(),
+            typeData && data.host
+              ? hostNameRenderer(data.host, ip, contextID, isDraggable)
+              : getEmptyTagValue(),
         },
       ],
       [

diff --git a/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx b/x-pack/plugins/security_solution/public/overview/components/host_overview/index.tsx
@@ -42,6 +42,7 @@ interface HostSummaryProps {
   data: HostItem;
   docValueFields: DocValueFields[];
   id: string;
+  isDraggable?: boolean;
   isInDetailsSidePanel: boolean;
   loading: boolean;
   isLoadingAnomaliesData: boolean;
@@ -60,6 +61,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
     docValueFields,
     endDate,
     id,
+    isDraggable = false,
     isInDetailsSidePanel = false, // Rather than duplicate the component, alter the structure based on it's location
     isLoadingAnomaliesData,
     indexNames,
@@ -77,9 +79,10 @@ export const HostOverview = React.memo<HostSummaryProps>(
           rowItems={getOr([], fieldName, fieldData)}
           attrName={fieldName}
           idPrefix={contextID ? `host-overview-${contextID}` : 'host-overview'}
+          isDraggable={isDraggable}
         />
       ),
-      [contextID]
+      [contextID, isDraggable]
     );
 
     const column: DescriptionList[] = useMemo(
@@ -88,7 +91,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
           title: i18n.HOST_ID,
           description:
             data && data.host
-              ? hostIdRenderer({ host: data.host, noLink: true })
+              ? hostIdRenderer({ host: data.host, isDraggable, noLink: true })
               : getEmptyTagValue(),
         },
         {
@@ -120,7 +123,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
             ),
         },
       ],
-      [data, docValueFields, indexNames]
+      [data, docValueFields, indexNames, isDraggable]
     );
     const firstColumn = useMemo(
       () =>
@@ -163,6 +166,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
                 rowItems={getOr([], 'host.ip', data)}
                 attrName={'host.ip'}
                 idPrefix={contextID ? `host-overview-${contextID}` : 'host-overview'}
+                isDraggable={isDraggable}
                 render={(ip) => (ip != null ? <NetworkDetailsLink ip={ip} /> : getEmptyTagValue())}
               />
             ),
@@ -198,7 +202,7 @@ export const HostOverview = React.memo<HostSummaryProps>(
           },
         ],
       ],
-      [contextID, data, firstColumn, getDefaultRenderer]
+      [contextID, data, firstColumn, getDefaultRenderer, isDraggable]
     );
     return (
       <>