[8.19] Remaining work attributes table (#224723)

.github/CODEOWNERS

@@ -1303,6 +1303,7 @@ packages/kbn-monaco/src/esql @elastic/kibana-esql
 /x-pack/test_serverless/functional/test_suites/observability/infra @elastic/obs-ux-infra_services-team
 /x-pack/test/api_integration/services/infraops_source_configuration.ts @elastic/obs-ux-infra_services-team @elastic/obs-ux-logs-team # Assigned per https://github.com/elastic/kibana/pull/34916
 /src/platform/plugins/shared/unified_doc_viewer/public/components/observability/traces @elastic/obs-ux-infra_services-team
+/src/platform/plugins/shared/unified_doc_viewer/public/components/observability/attributes @elastic/obs-ux-infra_services-team
 
 
 ## Logs UI code exceptions -> @elastic/obs-ux-logs-team

src/platform/packages/shared/kbn-unified-doc-viewer/src/components/field_name/field_name.tsx

@@ -19,6 +19,7 @@ import { getFieldTypeName } from '@kbn/field-utils';
 
 interface Props {
   fieldName: string;
+  displayNameOverride?: string;
   fieldType?: string;
   fieldMapping?: DataViewField;
   fieldIconProps?: Omit<FieldIconProps, 'type'>;
@@ -31,13 +32,15 @@ export function FieldName({
   fieldMapping,
   fieldType,
   fieldIconProps,
+  displayNameOverride,
   scripted = false,
   highlight = '',
 }: Props) {
   const typeName = getFieldTypeName(fieldType);
-  const displayName =
-    fieldMapping && fieldMapping.displayName ? fieldMapping.displayName : fieldName;
-  const tooltip = displayName !== fieldName ? `${displayName} (${fieldName})` : fieldName;
+  const fieldMappingDisplayName = fieldMapping?.displayName ? fieldMapping.displayName : fieldName;
+  const fieldDisplayName = displayNameOverride ?? fieldMappingDisplayName;
+
+  const tooltip = fieldDisplayName !== fieldName ? `${fieldDisplayName} (${fieldName})` : fieldName;
   const subTypeMulti = fieldMapping && getDataViewFieldSubtypeMulti(fieldMapping.spec);
   const isMultiField = !!subTypeMulti?.multi;
 
@@ -71,7 +74,7 @@ export function FieldName({
               delay="long"
               anchorClassName="eui-textBreakAll"
             >
-              <EuiHighlight search={highlight}>{displayName}</EuiHighlight>
+              <EuiHighlight search={highlight}>{fieldDisplayName}</EuiHighlight>
             </EuiToolTip>
           </EuiFlexItem>
 

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/field_row.ts

@@ -22,6 +22,7 @@ import { getDataViewFieldOrCreateFromColumnMeta } from '@kbn/data-view-utils';
 
 export class FieldRow {
   readonly name: string;
+  readonly displayNameOverride: string | undefined;
   readonly flattenedValue: unknown;
   readonly dataViewField: DataViewField | undefined;
   readonly isPinned: boolean;
@@ -41,6 +42,7 @@ export class FieldRow {
 
   constructor({
     name,
+    displayNameOverride,
     flattenedValue,
     hit,
     dataView,
@@ -49,6 +51,7 @@ export class FieldRow {
     columnsMeta,
   }: {
     name: string;
+    displayNameOverride?: string;
     flattenedValue: unknown;
     hit: DataTableRecord;
     dataView: DataView;
@@ -63,6 +66,7 @@ export class FieldRow {
     this.#isFormattedAsText = false;
 
     this.name = name;
+    this.displayNameOverride = displayNameOverride;
     this.flattenedValue = flattenedValue;
     this.dataViewField = getDataViewFieldOrCreateFromColumnMeta({
       dataView,

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table.tsx

@@ -72,7 +72,7 @@ const PAGE_SIZE_OPTIONS = [25, 50, 100, 250, 500];
 const DEFAULT_PAGE_SIZE = 25;
 const PINNED_FIELDS_KEY = 'discover:pinnedFields';
 const PAGE_SIZE = 'discover:pageSize';
-const HIDE_NULL_VALUES = 'unifiedDocViewer:hideNullValues';
+export const HIDE_NULL_VALUES = 'unifiedDocViewer:hideNullValues';
 export const SHOW_ONLY_SELECTED_FIELDS = 'unifiedDocViewer:showOnlySelectedFields';
 
 const GRID_COLUMN_FIELD_NAME = 'name';

src/platform/plugins/shared/unified_doc_viewer/public/components/doc_viewer_table/table_cell.tsx

@@ -49,13 +49,15 @@ export const TableCell: React.FC<TableCellProps> = React.memo(
       return null;
     }
 
-    const { flattenedValue, name, dataViewField, ignoredReason, fieldType } = row;
+    const { flattenedValue, name, displayNameOverride, dataViewField, ignoredReason, fieldType } =
+      row;
 
     if (columnId === 'name') {
       return (
         <div>
           <FieldName
             fieldName={name}
+            displayNameOverride={displayNameOverride}
             fieldType={fieldType}
             fieldMapping={dataViewField}
             scripted={dataViewField?.scripted}

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/attributes/doc_viewer_attributes_overview/attributes_accordion.tsx

@@ -7,17 +7,20 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 import React from 'react';
-import { EuiAccordion, EuiText, EuiNotificationBadge } from '@elastic/eui';
+import { EuiAccordion, EuiText, EuiNotificationBadge, EuiIconTip, useEuiTheme } from '@elastic/eui';
 import { DataTableColumnsMeta, DataTableRecord } from '@kbn/discover-utils';
 import { DataView } from '@kbn/data-views-plugin/common';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
 import { AttributesTable } from './attributes_table';
+import { AttributesEmptyPrompt } from './attributes_empty_prompt';
+import { AttributeField } from './attributes_overview';
 
 interface AttributesAccordionProps {
   id: string;
   title: string;
   ariaLabel: string;
-  fields: string[];
+  tooltipMessage: string;
+  fields: AttributeField[];
   hit: DataTableRecord;
   dataView: DataView;
   columns?: string[];
@@ -26,12 +29,13 @@ interface AttributesAccordionProps {
   onAddColumn?: (col: string) => void;
   onRemoveColumn?: (col: string) => void;
   filter?: DocViewFilterFn;
+  isEsqlMode: boolean;
 }
 
 export const AttributesAccordion = ({
   id,
   title,
-  ariaLabel,
+  tooltipMessage,
   fields,
   hit,
   dataView,
@@ -41,34 +45,51 @@ export const AttributesAccordion = ({
   onAddColumn,
   onRemoveColumn,
   filter,
-}: AttributesAccordionProps) => (
-  <EuiAccordion
-    id={id}
-    buttonContent={
-      <EuiText size="s">
-        <strong aria-label={ariaLabel}>{title}</strong>
-      </EuiText>
-    }
-    initialIsOpen={fields.length > 0}
-    forceState={fields.length === 0 ? 'closed' : undefined}
-    isDisabled={fields.length === 0}
-    extraAction={
-      <EuiNotificationBadge size="m" color="subdued">
-        {fields.length}
-      </EuiNotificationBadge>
-    }
-    paddingSize="m"
-  >
-    <AttributesTable
-      hit={hit}
-      dataView={dataView}
-      columns={columns}
-      columnsMeta={columnsMeta}
-      fields={fields}
-      searchTerm={searchTerm}
-      onAddColumn={onAddColumn}
-      onRemoveColumn={onRemoveColumn}
-      filter={filter}
-    />
-  </EuiAccordion>
-);
+  isEsqlMode = false,
+}: AttributesAccordionProps) => {
+  const { euiTheme } = useEuiTheme();
+  return (
+    <EuiAccordion
+      id={id}
+      buttonContent={
+        <EuiText size="s">
+          <strong css={{ marginRight: euiTheme.size.xs }}>{title}</strong>
+          <EuiIconTip
+            aria-label={tooltipMessage}
+            type="questionInCircle"
+            color="subdued"
+            size="s"
+            content={tooltipMessage}
+            iconProps={{
+              className: 'eui-alignTop',
+            }}
+          />
+        </EuiText>
+      }
+      initialIsOpen={fields.length > 0}
+      extraAction={
+        <EuiNotificationBadge size="m" color="subdued">
+          {fields.length}
+        </EuiNotificationBadge>
+      }
+      paddingSize="m"
+    >
+      {fields.length === 0 ? (
+        <AttributesEmptyPrompt />
+      ) : (
+        <AttributesTable
+          hit={hit}
+          dataView={dataView}
+          columns={columns}
+          columnsMeta={columnsMeta}
+          fields={fields}
+          searchTerm={searchTerm}
+          onAddColumn={onAddColumn}
+          onRemoveColumn={onRemoveColumn}
+          filter={filter}
+          isEsqlMode={isEsqlMode}
+        />
+      )}
+    </EuiAccordion>
+  );
+};

src/platform/plugins/shared/unified_doc_viewer/public/components/observability/attributes/doc_viewer_attributes_overview/attributes_empty_prompt.tsx

@@ -0,0 +1,51 @@
+/*
+ * 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".
+ */
+
+import React from 'react';
+import { EuiEmptyPrompt, EuiText } from '@elastic/eui';
+import { i18n } from '@kbn/i18n';
+
+export const AttributesEmptyPrompt = () => (
+  <EuiEmptyPrompt
+    layout="horizontal"
+    body={
+      <EuiText size="s" color="subdued">
+        <p>
+          {i18n.translate(
+            'unifiedDocViewer.docView.attributes.accordion.noFieldsMessage.noFieldsLabel',
+            {
+              defaultMessage: 'No attributes fields found.',
+            }
+          )}
+        </p>
+        <>
+          <strong>
+            {i18n.translate(
+              'unifiedDocViewer.docView.attributes.accordion.noFieldsMessage.tryText',
+              {
+                defaultMessage: 'Try:',
+              }
+            )}
+          </strong>
+          <ul>
+            <li>
+              {i18n.translate(
+                'unifiedDocViewer.docView.attributes.accordion.noFieldsMessage.fieldTypeFilterBullet',
+                {
+                  defaultMessage: 'Using different field filters if applicable.',
+                }
+              )}
+            </li>
+          </ul>
+        </>
+      </EuiText>
+    }
+    data-test-subj="attributesAccordionEmptyPrompt"
+  />
+);