refactor(discover): update styles and cleanup

elastic · Sep 25, 2024 · a2cd794 · a2cd794
1 parent 690ecfa
commit a2cd794
Show file tree

Hide file tree

Showing 11 changed files with 100 additions and 122 deletions.
diff --git a/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts b/src/plugins/discover/public/application/main/hooks/grid_customisations/index.ts
@@ -8,25 +8,23 @@
  */
 
 import { useMemo } from 'react';
-import { useDiscoverServices } from '../../../../hooks/use_discover_services';
 import { useDiscoverCustomization } from '../../../../customizations';
 import { DataGridColumnsDeps, getDataGridColumnsConfiguration } from './logs';
 
 export * from './logs';
 
-type ContextualGridCustomizationParams = DataGridColumnsDeps['params'];
+type ContextualGridCustomizationParams = DataGridColumnsDeps;
 
 export const useContextualGridCustomisations = (params: ContextualGridCustomizationParams) => {
-  const { data } = useDiscoverServices();
   // TODO / NOTE: This will eventually rely on Discover's context resolution to determine which fields
   // are returned based on the data type.
   const isLogsContext = useDiscoverCustomization('data_table')?.logsEnabled;
 
   const virtualColumnsConfiguration = useMemo(() => {
     if (!isLogsContext) return null;
 
-    return getDataGridColumnsConfiguration({ data, params });
-  }, [data, isLogsContext, params]);
+    return getDataGridColumnsConfiguration(params);
+  }, [isLogsContext, params]);
 
   return virtualColumnsConfiguration;
 };
diff --git a/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx b/src/plugins/discover/public/application/main/hooks/grid_customisations/logs.tsx
@@ -15,18 +15,18 @@ import {
 
 export type DataGridColumnsDeps = CustomCellRendererDeps;
 
-export const getDataGridColumnsConfiguration = ({ data, params }: DataGridColumnsDeps) => {
+export const getDataGridColumnsConfiguration = (params: DataGridColumnsDeps) => {
   return {
-    customCellRenderer: createCustomCellRenderer({ data, params }),
+    customCellRenderer: createCustomCellRenderer(params),
     customGridColumnsConfiguration: createCustomGridColumnsConfiguration(),
   };
 };
 
 type CustomCellRendererDeps = SummaryColumnGetterDeps;
 
-export const createCustomCellRenderer = (deps: CustomCellRendererDeps) => {
+export const createCustomCellRenderer = (params: CustomCellRendererDeps) => {
   return {
-    [SOURCE_COLUMN]: getSummaryColumn(deps),
+    [SOURCE_COLUMN]: getSummaryColumn(params),
   };
 };
 

diff --git a/...iscover/public/application/main/hooks/grid_customisations/use_data_grid_cell_services.tsx b/...iscover/public/application/main/hooks/grid_customisations/use_data_grid_cell_services.tsx
diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx
@@ -26,16 +26,19 @@ import { formatJsonDocumentForContent } from './utils';
 
 interface ContentProps extends DataGridCellValueElementProps {
   isCompressed: boolean;
+  isSingleLine?: boolean;
   shouldShowFieldHandler: ShouldShowFieldInTableHandler;
 }
 
 const LogMessage = ({
   field,
   value,
+  className,
   isCompressed,
 }: {
   field: string;
   value: string;
+  className: string;
   isCompressed: boolean;
 }) => {
   const shouldRenderFieldName = field !== constants.MESSAGE_FIELD;
@@ -60,7 +63,8 @@ const LogMessage = ({
   }
 
   return (
-    <span
+    <p
+      className={className}
       data-test-subj="discoverDataTableMessageValue"
       dangerouslySetInnerHTML={{ __html: value }}
     />
@@ -72,6 +76,7 @@ export const Content = ({
   dataView,
   fieldFormats,
   isCompressed,
+  isSingleLine = false,
   row,
   shouldShowFieldHandler,
 }: ContentProps) => {
@@ -80,7 +85,12 @@ export const Content = ({
   const shouldRenderContent = !!field && !!value;
 
   return shouldRenderContent ? (
-    <LogMessage field={field} value={value} isCompressed={isCompressed} />
+    <LogMessage
+      field={field}
+      value={value}
+      isCompressed={isCompressed}
+      className={isSingleLine ? 'eui-textTruncate' : ''}
+    />
   ) : (
     <FormattedSourceDocument
       columnId={columnId}

diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/index.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/index.tsx
@@ -11,25 +11,20 @@ import React from 'react';
 import { dynamic } from '@kbn/shared-ux-utility';
 import { getShouldShowFieldHandler } from '@kbn/discover-utils';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { CellRenderersExtensionParams } from '../../../../context_awareness';
 import type { SummaryColumnProps } from './summary_column';
 
 const SummaryColumn = dynamic(() => import('./summary_column'));
 
-export interface SummaryColumnGetterDeps {
-  data: DataPublicPluginStart;
-  params: CellRenderersExtensionParams;
-}
+export type SummaryColumnGetterDeps = CellRenderersExtensionParams;
 
-export const getSummaryColumn = ({ data, params }: SummaryColumnGetterDeps) => {
+export const getSummaryColumn = (params: SummaryColumnGetterDeps) => {
   const { actions, dataView, density, rowHeight } = params;
   const shouldShowFieldHandler = createGetShouldShowFieldHandler(dataView);
 
   return (props: SummaryColumnProps) => (
     <SummaryColumn
       {...props}
-      data={data}
       density={density}
       onFilter={actions.addFilter}
       rowHeight={rowHeight}

diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/resource.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/resource.tsx
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import { EuiBadge, EuiBadgeGroup, EuiFlexGroup } from '@elastic/eui';
+import { EuiBadge, EuiFlexGroup } from '@elastic/eui';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { ResourceFieldDescriptor } from './utils';
 
@@ -21,12 +21,12 @@ interface ResourceProps {
   onFilter?: DocViewFilterFn;
 }
 
-export const Resource = ({ fields, limited = false, onFilter }: ResourceProps) => {
+export const Resource = ({ fields, limited = false, onFilter, ...props }: ResourceProps) => {
   const displayedFields = limited ? fields.slice(0, MAX_LIMITED_FIELDS_VISIBLE) : fields;
   const extraFieldsCount = limited ? fields.length - MAX_LIMITED_FIELDS_VISIBLE : 0;
 
   return (
-    <EuiFlexGroup gutterSize="s">
+    <EuiFlexGroup gutterSize="s" {...props}>
       {displayedFields.map(({ name, value, ResourceBadge, Icon }) => (
         <ResourceBadge key={name} property={name} value={value} icon={Icon} onFilter={onFilter} />
       ))}
@@ -38,15 +38,3 @@ export const Resource = ({ fields, limited = false, onFilter }: ResourceProps) =
     </EuiFlexGroup>
   );
 };
-
-export const StaticResource = ({ fields }: Pick<ResourceProps, 'fields'>) => {
-  return (
-    <EuiBadgeGroup gutterSize="s">
-      {fields.map(({ name, value, Icon }) => (
-        <EuiBadge key={name} color="hollow" iconType={Icon} iconSide="left">
-          {value}
-        </EuiBadge>
-      ))}
-    </EuiBadgeGroup>
-  );
-};
diff --git a/...plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx b/...plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx
@@ -13,7 +13,6 @@ import { dataViewMock } from '@kbn/discover-utils/src/__mocks__';
 import { fieldFormatsMock } from '@kbn/field-formats-plugin/common/mocks';
 import { render, screen } from '@testing-library/react';
 import SummaryColumn, { SummaryColumnFactoryDeps, SummaryColumnProps } from './summary_column';
-import { dataPluginMock } from '@kbn/data-plugin/public/mocks';
 import { DataGridDensity, ROWS_HEIGHT_OPTIONS } from '@kbn/unified-data-table';
 import * as constants from '../../../../../common/data_types/logs/constants';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
@@ -37,7 +36,6 @@ const renderSummary = (
         fieldFormats={fieldFormatsMock}
         setCellProps={() => {}}
         closePopover={() => {}}
-        data={dataPluginMock.createStartContract()}
         density={DataGridDensity.COMPACT}
         rowHeight={ROWS_HEIGHT_OPTIONS.single}
         onFilter={jest.fn()}

diff --git a/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx b/src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.tsx
@@ -13,7 +13,6 @@ import {
   DataGridDensity,
 } from '@kbn/unified-data-table';
 import React from 'react';
-import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { EuiCodeBlock, EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui';
 import {
   ShouldShowFieldInTableHandler,
@@ -22,14 +21,12 @@ import {
 } from '@kbn/discover-utils';
 import { JsonCodeEditor } from '@kbn/unified-doc-viewer-plugin/public';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
-import { DataGridCellServicesProvider } from '../../../../application/main/hooks/grid_customisations/use_data_grid_cell_services';
-import { Resource, StaticResource } from './resource';
+import { Resource } from './resource';
 import { Content } from './content';
 import { contentLabel, jsonLabel, resourceLabel } from '../translations';
 import { createResourceFields, formatJsonDocumentForContent } from './utils';
 
 export interface SummaryColumnFactoryDeps {
-  data: DataPublicPluginStart;
   density: DataGridDensity | undefined;
   rowHeight: number | undefined;
   shouldShowFieldHandler: ShouldShowFieldInTableHandler;
@@ -56,7 +53,7 @@ const SummaryCell = ({
   rowHeight: maybeNullishRowHeight,
   ...props
 }: SummaryColumnProps & SummaryColumnFactoryDeps) => {
-  const { data, dataView, onFilter, row } = props;
+  const { onFilter, row } = props;
 
   const density = maybeNullishDensity ?? DataGridDensity.COMPACT;
   const isCompressed = density === DataGridDensity.COMPACT;
@@ -66,24 +63,38 @@ const SummaryCell = ({
 
   const resourceFields = createResourceFields(row);
   const shouldRenderResource = resourceFields.length > 0;
-  const gutterSize = isSingleLine ? 's' : 'none';
 
-  return (
-    <DataGridCellServicesProvider services={{ data, dataView }}>
-      <EuiFlexGroup gutterSize={gutterSize} direction={isSingleLine ? 'row' : 'column'}>
-        {shouldRenderResource && (
-          <EuiFlexItem grow={false} css={{ lineHeight: 'normal', marginTop: -1 }}>
-            <Resource fields={resourceFields} limited={isSingleLine} onFilter={onFilter} />
-          </EuiFlexItem>
-        )}
-        <Content {...props} isCompressed={isCompressed} />
-      </EuiFlexGroup>
-    </DataGridCellServicesProvider>
+  return isSingleLine ? (
+    <EuiFlexGroup gutterSize="s">
+      {shouldRenderResource && (
+        <EuiFlexItem grow={false}>
+          <Resource
+            fields={resourceFields}
+            limited={isSingleLine}
+            onFilter={onFilter}
+            css={singleLineResourceCss}
+          />
+        </EuiFlexItem>
+      )}
+      <Content {...props} isCompressed={isCompressed} isSingleLine />
+    </EuiFlexGroup>
+  ) : (
+    <>
+      {shouldRenderResource && (
+        <Resource
+          fields={resourceFields}
+          limited={isSingleLine}
+          onFilter={onFilter}
+          css={multiLineResourceCss}
+        />
+      )}
+      <Content {...props} isCompressed={isCompressed} />
+    </>
   );
 };
 
 const SummaryCellPopover = (props: SummaryColumnProps & SummaryColumnFactoryDeps) => {
-  const { row, data, dataView, fieldFormats } = props;
+  const { row, dataView, fieldFormats, onFilter } = props;
 
   const resourceFields = createResourceFields(row);
   const shouldRenderResource = resourceFields.length > 0;
@@ -95,46 +106,51 @@ const SummaryCellPopover = (props: SummaryColumnProps & SummaryColumnFactoryDeps
   const shouldRenderSource = !shouldRenderContent;
 
   return (
-    <DataGridCellServicesProvider services={{ data, dataView }}>
-      <EuiFlexGroup direction="column" css={{ width: 580 }}>
-        {shouldRenderResource && (
-          <EuiFlexGroup direction="column" gutterSize="s">
-            <EuiTitle size="xxs">
-              <span>{resourceLabel}</span>
-            </EuiTitle>
-            <StaticResource fields={resourceFields} />
-          </EuiFlexGroup>
-        )}
+    <EuiFlexGroup direction="column" css={{ width: 580 }}>
+      {shouldRenderResource && (
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiTitle size="xxs">
-            <span>{contentLabel}</span>
+            <span>{resourceLabel}</span>
           </EuiTitle>
-          {shouldRenderContent && (
-            <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiText color="subdued" size="xs">
-                {field}
-              </EuiText>
-              <EuiCodeBlock
-                overflowHeight={100}
-                paddingSize="s"
-                isCopyable
-                language="txt"
-                fontSize="s"
-              >
-                {value}
-              </EuiCodeBlock>
-            </EuiFlexGroup>
-          )}
-          {shouldRenderSource && (
-            <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiText color="subdued" size="xs">
-                {jsonLabel}
-              </EuiText>
-              <JsonCodeEditor json={formatJsonDocumentForContent(row).raw} height={300} />
-            </EuiFlexGroup>
-          )}
+          <Resource fields={resourceFields} onFilter={onFilter} />
         </EuiFlexGroup>
+      )}
+      <EuiFlexGroup direction="column" gutterSize="s">
+        <EuiTitle size="xxs">
+          <span>{contentLabel}</span>
+        </EuiTitle>
+        {shouldRenderContent && (
+          <EuiFlexGroup direction="column" gutterSize="xs">
+            <EuiText color="subdued" size="xs">
+              {field}
+            </EuiText>
+            <EuiCodeBlock
+              overflowHeight={100}
+              paddingSize="s"
+              isCopyable
+              language="txt"
+              fontSize="s"
+            >
+              {value}
+            </EuiCodeBlock>
+          </EuiFlexGroup>
+        )}
+        {shouldRenderSource && (
+          <EuiFlexGroup direction="column" gutterSize="xs">
+            <EuiText color="subdued" size="xs">
+              {jsonLabel}
+            </EuiText>
+            <JsonCodeEditor json={formatJsonDocumentForContent(row).raw} height={300} />
+          </EuiFlexGroup>
+        )}
       </EuiFlexGroup>
-    </DataGridCellServicesProvider>
+    </EuiFlexGroup>
   );
 };
+
+const singleLineResourceCss = {
+  lineHeight: 'normal',
+  marginTop: -1,
+};
+
+const multiLineResourceCss = { display: 'inline-flex' };