[8.x] [Logs Overview] Add a flyout to show category document examples (#194867)

.github/CODEOWNERS

@@ -385,6 +385,7 @@ packages/kbn-dev-proc-runner @elastic/kibana-operations
 src/plugins/dev_tools @elastic/kibana-management
 packages/kbn-dev-utils @elastic/kibana-operations
 examples/developer_examples @elastic/appex-sharedux
+packages/kbn-discover-contextual-components @elastic/obs-ux-logs-team @elastic/kibana-data-discovery
 examples/discover_customization_examples @elastic/kibana-data-discovery
 x-pack/plugins/discover_enhanced @elastic/kibana-data-discovery
 src/plugins/discover @elastic/kibana-data-discovery

.i18nrc.json

@@ -27,7 +27,7 @@
     "dataViews": "src/plugins/data_views",
     "defaultNavigation": "packages/default-nav",
     "devTools": "src/plugins/dev_tools",
-    "discover": ["src/plugins/discover", "packages/kbn-discover-utils"],
+    "discover": ["src/plugins/discover", "packages/kbn-discover-utils", "packages/kbn-discover-contextual-components"],
     "savedSearch": "src/plugins/saved_search",
     "embeddableApi": "src/plugins/embeddable",
     "presentationPanel": "src/plugins/presentation_panel",

package.json

@@ -451,6 +451,7 @@
     "@kbn/default-nav-ml": "link:packages/default-nav/ml",
     "@kbn/dev-tools-plugin": "link:src/plugins/dev_tools",
     "@kbn/developer-examples-plugin": "link:examples/developer_examples",
+    "@kbn/discover-contextual-components": "link:packages/kbn-discover-contextual-components",
     "@kbn/discover-customization-examples-plugin": "link:examples/discover_customization_examples",
     "@kbn/discover-enhanced-plugin": "link:x-pack/plugins/discover_enhanced",
     "@kbn/discover-plugin": "link:src/plugins/discover",

packages/kbn-discover-contextual-components/README.md

@@ -0,0 +1,3 @@
+# @kbn/discover-contextual-components
+
+Houses contextual (e.g. logs) components that are used by Discover.

src/plugins/discover/common/data_types/logs/display_options.ts → packages/kbn-discover-contextual-components/index.ts

@@ -7,9 +7,4 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-export interface SmartFieldGridColumnOptions {
-  type: 'smart-field';
-  smartField: 'content' | 'resource';
-  fallbackFields: string[];
-  width?: number;
-}
+export * from './src';

packages/kbn-discover-contextual-components/jest.config.js

@@ -0,0 +1,14 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-discover-contextual-components'],
+};

packages/kbn-discover-contextual-components/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-browser",
+  "id": "@kbn/discover-contextual-components",
+  "owner": ["@elastic/obs-ux-logs-team", "@elastic/kibana-data-discovery"]
+}

packages/kbn-discover-contextual-components/package.json

@@ -0,0 +1,7 @@
+{
+  "name": "@kbn/discover-contextual-components",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0",
+  "sideEffects": false
+}

src/plugins/discover/public/components/data_types/logs/cell_actions_popover.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/cell_actions_popover.tsx

@@ -24,7 +24,9 @@ import {
 import { css } from '@emotion/react';
 import { useBoolean } from '@kbn/react-hooks';
 import { euiThemeVars } from '@kbn/ui-theme';
-import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import type { SharePluginStart } from '@kbn/share-plugin/public';
+import type { CoreStart } from '@kbn/core-lifecycle-browser';
 import {
   actionFilterForText,
   actionFilterOutText,
@@ -109,30 +111,32 @@ export function CellActionsPopover({
           />
         </EuiFlexItem>
       </EuiFlexGroup>
-      <EuiPopoverFooter>
-        <EuiFlexGroup responsive={false} gutterSize="s" wrap={true}>
-          <EuiButtonEmpty
-            key="addToFilterAction"
-            size="s"
-            iconType="plusInCircle"
-            aria-label={actionFilterForText(value)}
-            onClick={makeFilterHandlerByOperator('+')}
-            data-test-subj={`dataTableCellAction_addToFilterAction_${property}`}
-          >
-            {filterForText}
-          </EuiButtonEmpty>
-          <EuiButtonEmpty
-            key="removeFromFilterAction"
-            size="s"
-            iconType="minusInCircle"
-            aria-label={actionFilterOutText(value)}
-            onClick={makeFilterHandlerByOperator('-')}
-            data-test-subj={`dataTableCellAction_removeFromFilterAction_${property}`}
-          >
-            {filterOutText}
-          </EuiButtonEmpty>
-        </EuiFlexGroup>
-      </EuiPopoverFooter>
+      {onFilter ? (
+        <EuiPopoverFooter>
+          <EuiFlexGroup responsive={false} gutterSize="s" wrap={true}>
+            <EuiButtonEmpty
+              key="addToFilterAction"
+              size="s"
+              iconType="plusInCircle"
+              aria-label={actionFilterForText(value)}
+              onClick={makeFilterHandlerByOperator('+')}
+              data-test-subj={`dataTableCellAction_addToFilterAction_${property}`}
+            >
+              {filterForText}
+            </EuiButtonEmpty>
+            <EuiButtonEmpty
+              key="removeFromFilterAction"
+              size="s"
+              iconType="minusInCircle"
+              aria-label={actionFilterOutText(value)}
+              onClick={makeFilterHandlerByOperator('-')}
+              data-test-subj={`dataTableCellAction_removeFromFilterAction_${property}`}
+            >
+              {filterOutText}
+            </EuiButtonEmpty>
+          </EuiFlexGroup>
+        </EuiPopoverFooter>
+      ) : null}
       <EuiPopoverFooter>
         <EuiCopy textToCopy={value}>
           {(copy) => (
@@ -158,13 +162,21 @@ export interface FieldBadgeWithActionsProps
   icon?: EuiBadgeProps['iconType'];
 }
 
+interface FieldBadgeWithActionsDependencies {
+  core?: CoreStart;
+  share?: SharePluginStart;
+}
+
+export type FieldBadgeWithActionsPropsAndDependencies = FieldBadgeWithActionsProps &
+  FieldBadgeWithActionsDependencies;
+
 export function FieldBadgeWithActions({
   icon,
   onFilter,
   property,
   renderValue,
   value,
-}: FieldBadgeWithActionsProps) {
+}: FieldBadgeWithActionsPropsAndDependencies) {
   return (
     <CellActionsPopover
       onFilter={onFilter}

packages/kbn-discover-contextual-components/src/data_types/logs/components/index.ts

@@ -0,0 +1,12 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export * from './summary_column';
+export * from './log_level_badge_cell/log_level_badge_cell';
+export * from './service_name_badge_with_actions';

src/plugins/discover/public/components/data_types/logs/log_level_badge_cell.test.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/log_level_badge_cell/log_level_badge_cell.test.tsx

@@ -7,12 +7,12 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import { buildDataTableRecord, DataTableRecord } from '@kbn/discover-utils';
-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 React from 'react';
 import { getLogLevelBadgeCell } from './log_level_badge_cell';
+import { dataViewMock } from '@kbn/discover-utils/src/__mocks__/data_view';
+import { DataTableRecord, buildDataTableRecord } from '@kbn/discover-utils';
 
 const renderCell = (logLevelField: string, record: DataTableRecord) => {
   const LogLevelBadgeCell = getLogLevelBadgeCell(logLevelField);

src/plugins/discover/public/components/data_types/logs/log_level_badge_cell.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/log_level_badge_cell/log_level_badge_cell.tsx

@@ -9,8 +9,8 @@
 
 import type { CSSObject } from '@emotion/react';
 import React from 'react';
+import type { DataGridCellValueElementProps } from '@kbn/unified-data-table/src/types';
 import { LogLevelBadge } from '@kbn/discover-utils';
-import type { DataGridCellValueElementProps } from '@kbn/unified-data-table';
 
 const dataTestSubj = 'logLevelBadgeCell';
 const badgeCss: CSSObject = { marginTop: '-4px' };
@@ -32,3 +32,5 @@ export const getLogLevelBadgeCell =
       />
     );
   };
+
+export type LogLevelBadgeCell = ReturnType<typeof getLogLevelBadgeCell>;

src/plugins/discover/public/components/data_types/logs/service_name_badge_with_actions.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/service_name_badge_with_actions.tsx

@@ -11,17 +11,20 @@ import React from 'react';
 import { getRouterLinkProps } from '@kbn/router-utils';
 import { EuiLink } from '@elastic/eui';
 import { OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE } from '@kbn/management-settings-ids';
-import { SharePublicStart } from '@kbn/share-plugin/public/plugin';
-import { useDiscoverServices } from '../../../hooks/use_discover_services';
-import { FieldBadgeWithActions, FieldBadgeWithActionsProps } from './cell_actions_popover';
+import type { SharePublicStart } from '@kbn/share-plugin/public/plugin';
+import {
+  FieldBadgeWithActions,
+  FieldBadgeWithActionsProps,
+  FieldBadgeWithActionsPropsAndDependencies,
+} from './cell_actions_popover';
 
 const SERVICE_ENTITY_LOCATOR = 'SERVICE_ENTITY_LOCATOR';
 
-export function ServiceNameBadgeWithActions(props: FieldBadgeWithActionsProps) {
-  const { share, core } = useDiscoverServices();
-  const canViewApm = core.application.capabilities.apm?.show || false;
+export function ServiceNameBadgeWithActions(props: FieldBadgeWithActionsPropsAndDependencies) {
+  const { share, core } = props;
+  const canViewApm = core?.application.capabilities.apm?.show || false;
   const isEntityCentricExperienceSettingEnabled = canViewApm
-    ? core.uiSettings.get(OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE)
+    ? core?.uiSettings.get(OBSERVABILITY_ENTITY_CENTRIC_EXPERIENCE)
     : false;
 
   const derivedPropsForEntityExperience = isEntityCentricExperienceSettingEnabled

src/plugins/discover/public/components/data_types/logs/summary_column/content.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/content.tsx

@@ -14,7 +14,7 @@ import {
   getLogDocumentOverview,
   getMessageFieldWithFallbacks,
 } from '@kbn/discover-utils';
-import * as constants from '../../../../../common/data_types/logs/constants';
+import { MESSAGE_FIELD } from '@kbn/discover-utils';
 import { formatJsonDocumentForContent } from './utils';
 
 interface ContentProps extends DataGridCellValueElementProps {
@@ -32,7 +32,7 @@ const LogMessage = ({
   value: string;
   className: string;
 }) => {
-  const shouldRenderFieldName = field !== constants.MESSAGE_FIELD;
+  const shouldRenderFieldName = field !== MESSAGE_FIELD;
 
   if (shouldRenderFieldName) {
     return (

packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/index.ts

@@ -0,0 +1,13 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", and the "Server Side
+ * Public License v 1"; you may not use this file except in compliance with, at
+ * your election, the "Elastic License 2.0", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export * from './content';
+export * from './resource';
+export * from './summary_column';
+export * from './utils';

src/plugins/discover/public/components/data_types/logs/summary_column/resource.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/resource.tsx

@@ -8,8 +8,8 @@
  */
 
 import React from 'react';
-import { EuiBadge, EuiFlexGroup } from '@elastic/eui';
-import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
+import { CommonProps, EuiBadge, EuiFlexGroup } from '@elastic/eui';
+import type { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { ResourceFieldDescriptor } from './utils';
 
 const MAX_LIMITED_FIELDS_VISIBLE = 3;
@@ -19,6 +19,7 @@ interface ResourceProps {
   /* When true, the column will render a predefined number of resources and indicates with a badge how many more we have */
   limited?: boolean;
   onFilter?: DocViewFilterFn;
+  css?: CommonProps['css'];
 }
 
 export const Resource = ({ fields, limited = false, onFilter, ...props }: ResourceProps) => {

src/plugins/discover/public/components/data_types/logs/summary_column/summary_column.test.tsx → packages/kbn-discover-contextual-components/src/data_types/logs/components/summary_column/summary_column.test.tsx

@@ -8,41 +8,41 @@
  */
 
 import React from 'react';
-import { buildDataTableRecord, DataTableRecord } from '@kbn/discover-utils';
-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 { 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';
-import { discoverServiceMock } from '../../../../__mocks__/services';
+import * as constants from '@kbn/discover-utils/src/data_types/logs/constants';
+import { sharePluginMock } from '@kbn/share-plugin/public/mocks';
+import { coreMock as corePluginMock } from '@kbn/core/public/mocks';
+import { DataTableRecord, buildDataTableRecord } from '@kbn/discover-utils';
+import { dataViewMock } from '@kbn/discover-utils/src/__mocks__/data_view';
 
 const renderSummary = (
   record: DataTableRecord,
   opts: Partial<SummaryColumnProps & SummaryColumnFactoryDeps> = {}
 ) => {
   render(
-    <KibanaContextProvider services={discoverServiceMock}>
-      <SummaryColumn
-        rowIndex={0}
-        colIndex={0}
-        columnId="_source"
-        isExpandable={true}
-        isExpanded={false}
-        isDetails={false}
-        row={record}
-        dataView={dataViewMock}
-        fieldFormats={fieldFormatsMock}
-        setCellProps={() => {}}
-        closePopover={() => {}}
-        density={DataGridDensity.COMPACT}
-        rowHeight={ROWS_HEIGHT_OPTIONS.single}
-        onFilter={jest.fn()}
-        shouldShowFieldHandler={() => true}
-        {...opts}
-      />
-    </KibanaContextProvider>
+    <SummaryColumn
+      rowIndex={0}
+      colIndex={0}
+      columnId="_source"
+      isExpandable={true}
+      isExpanded={false}
+      isDetails={false}
+      row={record}
+      dataView={dataViewMock}
+      fieldFormats={fieldFormatsMock}
+      setCellProps={() => {}}
+      closePopover={() => {}}
+      density={DataGridDensity.COMPACT}
+      rowHeight={ROWS_HEIGHT_OPTIONS.single}
+      onFilter={jest.fn()}
+      shouldShowFieldHandler={() => true}
+      core={corePluginMock.createStart()}
+      share={sharePluginMock.createStartContract()}
+      {...opts}
+    />
   );
 };