[Logs Overview] Add a flyout to show category document examples (#194867

) ## Summary Implements #193450. ## Discover changes ⚠️ As part of this we need to render a basic table with the log level and summary columns, which is technically context aware but only in the sense we know we want it to be a logs context up front. The "correct" solution here (or at least from recent conversations) is to use the saved search embeddable. There is upcoming work planned to move log stream component usages over to the saved search embeddable. However, currently this isn't in a place to just be dropped in without some pretty extensive work. I didn't feel comfortable doing a big push on that work as a side effort to this work, especially with a loose (if possible) 8.16 aim for this. What I've done (and which isn't ideal I appreciate) is used the start contract of the Discover plugin to export the columns / cells pre-wrapped with the Discover services. It's not ideal in the sense of dependencies, but technically Discover doesn't use logs shared. I considered Discover shared but that's for registering functionality for Discover, rather than the other way around. Eventually we'll be able to remove this and convert over to the new solution. I'm all ears to a better solution, but there's a big mismatch between the needs here and dropping in something that exists currently. Thankfully the changeset for Discover is small if we're happy to keep this temporarily. Edit: I've made some notes here: elastic/logs-dev#111 (comment) Edit: New package added here: c290819 ## Overview From a high level: - Adds a new state machine for handling "details" to show in the flyout (document examples now, plus details and a timeline later). - Hooks this up to a flyout expanded from the categories table. - Provides linking to Discover to view documents from the category in the flyout. I've also left some comments inline. ## UI / UX ![Screenshot 2024-10-10 at 15 05 21](https://github.com/user-attachments/assets/49b525b1-f730-4e90-9a84-05175edb8c40) ![flyout_open](https://github.com/user-attachments/assets/0995b952-566b-4e09-80cf-20ad94343980) ![discover_link](https://github.com/user-attachments/assets/249ef269-0105-48af-9c81-ebae1cfb1680) --------- Co-authored-by: Felix Stürmer <[email protected]> Co-authored-by: kibanamachine <[email protected]> Co-authored-by: Elastic Machine <[email protected]> Co-authored-by: Felix Stürmer <[email protected]> Co-authored-by: Julia Rechkunova <[email protected]>
elastic · Oct 24, 2024 · 6b63f7f · 6b63f7f
1 parent 48959e7
commit 6b63f7f
Show file tree

Hide file tree

Showing 71 changed files with 1,766 additions and 904 deletions.
diff --git a/.github/CODEOWNERS b/.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

diff --git a/.i18nrc.json b/.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",

diff --git a/package.json b/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",

diff --git a/packages/kbn-discover-contextual-components/README.md b/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.
diff --git a/...common/data_types/logs/display_options.ts → ...n-discover-contextual-components/index.ts b/...common/data_types/logs/display_options.ts → ...n-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';
diff --git a/packages/kbn-discover-contextual-components/jest.config.js b/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'],
+};
diff --git a/packages/kbn-discover-contextual-components/kibana.jsonc b/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"]
+}
diff --git a/packages/kbn-discover-contextual-components/package.json b/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
+}
diff --git a/.../data_types/logs/cell_actions_popover.tsx → .../logs/components/cell_actions_popover.tsx b/.../data_types/logs/cell_actions_popover.tsx → .../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}

diff --git a/packages/kbn-discover-contextual-components/src/data_types/logs/components/index.ts b/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';
diff --git a/..._types/logs/log_level_badge_cell.test.tsx → ..._badge_cell/log_level_badge_cell.test.tsx b/..._types/logs/log_level_badge_cell.test.tsx → ..._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);

diff --git a/.../data_types/logs/log_level_badge_cell.tsx → ...level_badge_cell/log_level_badge_cell.tsx b/.../data_types/logs/log_level_badge_cell.tsx → ...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>;
diff --git a/.../logs/service_name_badge_with_actions.tsx → ...nents/service_name_badge_with_actions.tsx b/.../logs/service_name_badge_with_actions.tsx → ...nents/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

diff --git a/...ata_types/logs/summary_column/content.tsx → ...ogs/components/summary_column/content.tsx b/...ata_types/logs/summary_column/content.tsx → ...ogs/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 (

diff --git a/...kbn-discover-contextual-components/src/data_types/logs/components/summary_column/index.ts b/...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';
diff --git a/...ta_types/logs/summary_column/resource.tsx → ...gs/components/summary_column/resource.tsx b/...ta_types/logs/summary_column/resource.tsx → ...gs/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) => {

diff --git a/...gs/summary_column/summary_column.test.tsx → ...ts/summary_column/summary_column.test.tsx b/...gs/summary_column/summary_column.test.tsx → ...ts/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}
+    />
   );
 };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# @kbn/discover-contextual-components

		Houses contextual (e.g. logs) components that are used by Discover.