Add logic to handle breakpoint based column display

x-pack/plugins/log_explorer/public/components/flyout_detail/flyout_highlights.tsx

@@ -34,6 +34,7 @@ import { HighlightSection } from './sub_components/highlight_section';
 import { DiscoverActionsProvider } from '../../hooks/use_discover_action';
 import { HighlightContainer } from './sub_components/highlight_container';
 import { useDimension } from '../../hooks/use_dimensions';
+import { useFlyoutColumnWidth } from '../../hooks/use_flyouot_column_width';
 
 export function FlyoutHighlights({
   formattedDoc,
@@ -46,11 +47,11 @@ export function FlyoutHighlights({
 }) {
   const elementRef = useRef<HTMLDivElement>(null);
   const [ref, dimensions] = useDimension<HTMLDivElement>(elementRef);
-  const fieldWidth = (dimensions.width - 20) / 7;
+  const { columns, fieldWidth } = useFlyoutColumnWidth(dimensions.width);
   return (
     <DiscoverActionsProvider value={actions}>
       <HighlightContainer ref={ref}>
-        <HighlightSection title={serviceAccordionTitle}>
+        <HighlightSection title={serviceAccordionTitle} columns={columns}>
           {formattedDoc[constants.SERVICE_NAME_FIELD] && (
             <HighlightField
               label={flyoutServiceLabel}
@@ -73,7 +74,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={infraAccordionTitle}>
+        <HighlightSection title={infraAccordionTitle} columns={columns}>
           {formattedDoc[constants.HOST_NAME_FIELD] && (
             <HighlightField
               label={flyoutHostNameLabel}
@@ -106,7 +107,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={cloudAccordionTitle}>
+        <HighlightSection title={cloudAccordionTitle} columns={columns}>
           {formattedDoc[constants.CLOUD_PROVIDER_FIELD] && (
             <HighlightField
               label={flyoutCloudProviderLabel}
@@ -159,7 +160,7 @@ export function FlyoutHighlights({
           )}
         </HighlightSection>
 
-        <HighlightSection title={otherAccordionTitle} showBottomRule={false}>
+        <HighlightSection title={otherAccordionTitle} showBottomRule={false} columns={columns}>
           {formattedDoc[constants.LOG_FILE_PATH_FIELD] && (
             <HighlightField
               label={flyoutLogPathFileLabel}

x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_field.tsx

@@ -5,14 +5,15 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem, EuiText } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiText, copyToClipboard } from '@elastic/eui';
 import React, { ReactNode, useMemo, useState } from 'react';
 import { HoverAction, HoverActionType } from './hover_action';
 import {
   flyoutHoverActionFilterForText,
   flyoutHoverActionFilterOutText,
   flyoutHoverActionFilterForFieldPresentText,
   flyoutHoverActionToggleColumnText,
+  flyoutHoverActionCopyToClipboardText,
 } from '../translations';
 import { useDiscoverActionsContext } from '../../../hooks/use_discover_action';
 
@@ -77,6 +78,13 @@ export function HighlightField({
         },
         display: true,
       },
+      {
+        id: 'copyToClipboardAction',
+        tooltipContent: flyoutHoverActionCopyToClipboardText,
+        iconType: 'copyClipboard',
+        onClick: () => copyToClipboard(value as string),
+        display: true,
+      },
     ],
     [filterForText, filterOutText, actions, field, value, columnAdded]
   );

x-pack/plugins/log_explorer/public/components/flyout_detail/sub_components/highlight_section.tsx

@@ -19,12 +19,14 @@ interface HighlightSectionProps {
   title: string;
   children: React.ReactNode;
   showBottomRule?: boolean;
+  columns: 1 | 2 | 3;
 }
 
 export function HighlightSection({
   title,
   children,
   showBottomRule = true,
+  columns,
 }: HighlightSectionProps) {
   const validChildren = React.Children.toArray(children).filter(Boolean);
   const shouldRenderSection = validChildren.length > 0;
@@ -51,7 +53,7 @@ export function HighlightSection({
         initialIsOpen={true}
         data-test-subj={`logExplorerFlyoutHighlightSection${title}`}
       >
-        <EuiFlexGrid columns={3}>{flexChildren}</EuiFlexGrid>
+        <EuiFlexGrid columns={columns}>{flexChildren}</EuiFlexGrid>
       </EuiAccordion>
       {showBottomRule && <EuiHorizontalRule margin="xs" />}
     </>

x-pack/plugins/log_explorer/public/components/flyout_detail/translations.ts

@@ -151,3 +151,10 @@ export const flyoutHoverActionToggleColumnText = i18n.translate(
     defaultMessage: 'Toggle column in table',
   }
 );
+
+export const flyoutHoverActionCopyToClipboardText = i18n.translate(
+  'xpack.logExplorer.flyoutDetail.value.hover.copyToClipboard',
+  {
+    defaultMessage: 'Copy to clipboard',
+  }
+);

x-pack/plugins/log_explorer/public/hooks/use_flyouot_column_width.tsx

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { useEuiTheme } from '@elastic/eui';
+
+interface FlyoutColumnWidth {
+  columns: 1 | 2 | 3;
+  fieldWidth: number;
+}
+
+export const useFlyoutColumnWidth = (width: number): FlyoutColumnWidth => {
+  const { euiTheme } = useEuiTheme();
+
+  const numberOfColumns = width > euiTheme.breakpoint.m ? 3 : width > euiTheme.breakpoint.s ? 2 : 1;
+  const widthFactor = numberOfColumns === 3 ? 2.5 : 2.2;
+  const fieldWidth = width / (numberOfColumns * widthFactor);
+
+  return {
+    columns: numberOfColumns,
+    fieldWidth,
+  };
+};