[Dataset Quality]Add logic to display degraded fields in DQ Flyout

x-pack/plugins/observability_solution/dataset_quality/common/api_types.ts

@@ -78,6 +78,20 @@ export const degradedDocsRt = rt.type({
 
 export type DegradedDocs = rt.TypeOf<typeof degradedDocsRt>;
 
+export const degradedFieldRt = rt.type({
+  name: rt.string,
+  count: rt.number,
+  lastOccurrence: rt.union([rt.null, rt.number]),
+});
+
+export type DegradedField = rt.TypeOf<typeof degradedFieldRt>;
+
+export const getDataStreamDegradedFieldsResponseRt = rt.type({
+  degradedFields: rt.array(degradedFieldRt),
+});
+
+export type DegradedFieldResponse = rt.TypeOf<typeof getDataStreamDegradedFieldsResponseRt>;
+
 export const dataStreamSettingsRt = rt.partial({
   createdOn: rt.union([rt.null, rt.number]), // rt.null is needed because `createdOn` is not available on Serverless
 });
@@ -115,8 +129,6 @@ export const dataStreamsEstimatedDataInBytesRT = rt.type({
   estimatedDataInBytes: rt.union([rt.number, rt.null]), // Null in serverless: https://github.com/elastic/kibana/issues/178954
 });
 
-export type DataStreamsEstimatedDataInBytes = rt.TypeOf<typeof dataStreamsEstimatedDataInBytesRT>;
-
 export const getDataStreamsEstimatedDataInBytesResponseRt = rt.exact(
   dataStreamsEstimatedDataInBytesRT
 );

x-pack/plugins/observability_solution/dataset_quality/common/constants.ts

@@ -17,6 +17,9 @@ export const DEGRADED_QUALITY_MINIMUM_PERCENTAGE = 0;
 export const DEFAULT_SORT_FIELD = 'title';
 export const DEFAULT_SORT_DIRECTION = 'asc';
 
+export const DEFAULT_DEGRADED_FIELD_SORT_FIELD = 'count';
+export const DEFAULT_DEGRADED_FIELD_SORT_DIRECTION = 'desc';
+
 export const NONE = 'none';
 
 export const DEFAULT_TIME_RANGE = { from: 'now-24h', to: 'now' };
@@ -33,3 +36,5 @@ export const NUMBER_FORMAT = '0,0.[000]';
 export const BYTE_NUMBER_FORMAT = '0.0 b';
 
 export const MAX_HOSTS_METRIC_VALUE = 50;
+
+export const MAX_DEGRADED_FIELDS = 1000;

x-pack/plugins/observability_solution/dataset_quality/common/data_stream_details/errors.ts

@@ -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; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+export class GetDataStreamsDetailsError extends Error {
+  constructor(message: string) {
+    super(message);
+    Object.setPrototypeOf(this, new.target.prototype);
+    this.name = 'GetDataStreamsDetailsError';
+  }
+}

x-pack/plugins/observability_solution/dataset_quality/common/data_stream_details/index.ts

@@ -0,0 +1,8 @@
+/*
+ * 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.
+ */
+
+export * from './errors';

x-pack/plugins/observability_solution/dataset_quality/common/data_streams_stats/types.ts

@@ -26,14 +26,33 @@ export type GetDataStreamsDegradedDocsStatsParams =
 export type GetDataStreamsDegradedDocsStatsQuery = GetDataStreamsDegradedDocsStatsParams['query'];
 export type GetDataStreamsDegradedDocsStatsResponse =
   APIReturnType<`GET /internal/dataset_quality/data_streams/degraded_docs`>;
-export type DataStreamDegradedDocsStatServiceResponse = DegradedDocsStatType[];
 export type DegradedDocsStatType = GetDataStreamsDegradedDocsStatsResponse['degradedDocs'][0];
+export type DataStreamDegradedDocsStatServiceResponse = DegradedDocsStatType[];
+
+/*
+Types for Degraded Fields inside a DataStream
+*/
+
+export type GetDataStreamDegradedFieldsPathParams =
+  APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/{dataStream}/degraded_fields`>['params']['path'];
+export type GetDataStreamDegradedFieldsQueryParams =
+  APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/{dataStream}/degraded_fields`>['params']['query'];
+export type GetDataStreamDegradedFieldsParams = GetDataStreamDegradedFieldsPathParams &
+  GetDataStreamDegradedFieldsQueryParams;
+
+/*
+Types for DataStream Settings
+*/
 
 export type GetDataStreamSettingsParams =
   APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/{dataStream}/settings`>['params']['path'];
 export type GetDataStreamSettingsResponse =
   APIReturnType<`GET /internal/dataset_quality/data_streams/{dataStream}/settings`>;
 
+/*
+Types for DataStream Details
+*/
+
 type GetDataStreamDetailsPathParams =
   APIClientRequestParamsOf<`GET /internal/dataset_quality/data_streams/{dataStream}/details`>['params']['path'];
 type GetDataStreamDetailsQueryParams =
@@ -55,4 +74,9 @@ export type GetIntegrationDashboardsResponse =
 export type DashboardType = GetIntegrationDashboardsResponse['dashboards'][0];
 
 export type { DataStreamStat } from './data_stream_stat';
-export type { DataStreamDetails, DataStreamSettings } from '../api_types';
+export type {
+  DataStreamDetails,
+  DataStreamSettings,
+  DegradedField,
+  DegradedFieldResponse,
+} from '../api_types';

x-pack/plugins/observability_solution/dataset_quality/common/es_fields/index.ts

@@ -6,6 +6,7 @@
  */
 
 export const _IGNORED = '_ignored';
+export const TIMESTAMP = '@timestamp';
 
 export const DATA_STREAM_DATASET = 'data_stream.dataset';
 export const DATA_STREAM_NAMESPACE = 'data_stream.namespace';

x-pack/plugins/observability_solution/dataset_quality/common/translations.ts

@@ -137,6 +137,34 @@ export const flyoutShowAllText = i18n.translate('xpack.datasetQuality.flyoutShow
   defaultMessage: 'Show all',
 });
 
+export const flyoutImprovementText = i18n.translate(
+  'xpack.datasetQuality.flyoutDegradedFieldsSectionTitle',
+  {
+    defaultMessage: 'Degraded Fields',
+  }
+);
+
+export const flyoutImprovementTooltip = i18n.translate(
+  'xpack.datasetQuality.flyoutDegradedFieldsSectionTooltip',
+  {
+    defaultMessage:
+      'Set of degraded fields in the dataset. Please not that this list may not be exhaustive.',
+  }
+);
+
+export const flyoutDegradedFieldsTableLoadingText = i18n.translate(
+  'xpack.datasetQuality.flyoutDegradedFieldsTableLoadingText',
+  {
+    defaultMessage: 'Loading degraded fields',
+  }
+);
+
+export const flyoutDegradedFieldsTableNoData = i18n.translate(
+  'xpack.datasetQuality.flyoutDegradedFieldsTableNoData',
+  {
+    defaultMessage: 'No degraded fields found',
+  }
+);
 /*
 Summary Panel
 */

x-pack/plugins/observability_solution/dataset_quality/common/types/index.ts

@@ -7,3 +7,5 @@
 
 export * from './dataset_types';
 export * from './quality_types';
+
+export type SortDirection = 'asc' | 'desc';

x-pack/plugins/observability_solution/dataset_quality/public/components/flyout/degraded_fields/columns.tsx

@@ -0,0 +1,52 @@
+/*
+ * 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 { EuiBasicTableColumn } from '@elastic/eui';
+import { FieldFormat } from '@kbn/field-formats-plugin/common';
+import { i18n } from '@kbn/i18n';
+
+import { DegradedField } from '../../../../common/api_types';
+
+const fieldColumnName = i18n.translate('xpack.datasetQuality.flyout.degradedField.field', {
+  defaultMessage: 'Field',
+});
+
+const countColumnName = i18n.translate('xpack.datasetQuality.flyout.degradedField.count', {
+  defaultMessage: 'Count',
+});
+
+const lastOccurrenceColumnName = i18n.translate(
+  'xpack.datasetQuality.flyout.degradedField.lastOccurrence',
+  {
+    defaultMessage: 'Last Occurrence',
+  }
+);
+
+export const getDegradedFieldsColumns = ({
+  dateFormatter,
+}: {
+  dateFormatter: FieldFormat;
+}): Array<EuiBasicTableColumn<DegradedField>> => [
+  {
+    name: fieldColumnName,
+    field: 'name',
+  },
+  {
+    name: countColumnName,
+    sortable: true,
+    field: 'count',
+    truncateText: true,
+  },
+  {
+    name: lastOccurrenceColumnName,
+    sortable: true,
+    field: 'lastOccurrence',
+    render: (lastOccurrence: number) => {
+      return dateFormatter.convert(lastOccurrence);
+    },
+  },
+];

x-pack/plugins/observability_solution/dataset_quality/public/components/flyout/degraded_fields/degraded_fields.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+import { EuiFlexGroup, EuiPanel, EuiTitle, EuiIconTip } from '@elastic/eui';
+import { flyoutImprovementText, flyoutImprovementTooltip } from '../../../../common/translations';
+import { DegradedFieldTable } from './table';
+
+export function DegradedFields() {
+  return (
+    <EuiPanel hasBorder grow={false}>
+      <EuiFlexGroup responsive={false} alignItems="center" gutterSize="xs">
+        <EuiTitle size="xxxs">
+          <h6>{flyoutImprovementText}</h6>
+        </EuiTitle>
+        <EuiIconTip content={flyoutImprovementTooltip} color="subdued" size="m" />
+      </EuiFlexGroup>
+      <DegradedFieldTable />
+    </EuiPanel>
+  );
+}

x-pack/plugins/observability_solution/dataset_quality/public/components/flyout/degraded_fields/table.tsx

@@ -0,0 +1,54 @@
+/*
+ * 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 { EuiBasicTable, EuiEmptyPrompt } from '@elastic/eui';
+import React from 'react';
+import { ES_FIELD_TYPES, KBN_FIELD_TYPES } from '@kbn/field-types';
+import { useDatasetQualityDegradedField } from '../../../hooks';
+import { getDegradedFieldsColumns } from './columns';
+import {
+  flyoutDegradedFieldsTableLoadingText,
+  flyoutDegradedFieldsTableNoData,
+} from '../../../../common/translations';
+
+export const DegradedFieldTable = () => {
+  const { isLoading, pagination, renderedItems, onTableChange, sort, fieldFormats } =
+    useDatasetQualityDegradedField();
+  const dateFormatter = fieldFormats.getDefaultInstance(KBN_FIELD_TYPES.DATE, [
+    ES_FIELD_TYPES.DATE,
+  ]);
+  const columns = getDegradedFieldsColumns({ dateFormatter });
+
+  return (
+    <EuiBasicTable
+      tableLayout="fixed"
+      columns={columns}
+      items={renderedItems ?? []}
+      loading={isLoading}
+      sorting={sort}
+      onChange={onTableChange}
+      pagination={pagination}
+      data-test-subj="datasetQualityFlyoutDegradedFieldTable"
+      rowProps={{
+        'data-test-subj': 'datasetQualityFlyoutDegradedTableRow',
+      }}
+      noItemsMessage={
+        isLoading ? (
+          flyoutDegradedFieldsTableLoadingText
+        ) : (
+          <EuiEmptyPrompt
+            data-test-subj="datasetQualityFlyoutDegradedTableNoData"
+            layout="vertical"
+            title={<h2>{flyoutDegradedFieldsTableNoData}</h2>}
+            hasBorder={false}
+            titleSize="m"
+          />
+        )
+      }
+    />
+  );
+};

x-pack/plugins/observability_solution/dataset_quality/public/components/flyout/flyout_summary/flyout_summary.tsx

@@ -26,6 +26,7 @@ import { useDatasetQualityContext } from '../../dataset_quality/context';
 import { FlyoutDataset, TimeRangeConfig } from '../../../state_machines/dataset_quality_controller';
 import { FlyoutSummaryHeader } from './flyout_summary_header';
 import { FlyoutSummaryKpis, FlyoutSummaryKpisLoading } from './flyout_summary_kpis';
+import { DegradedFields } from '../degraded_fields/degraded_fields';
 
 const nonAggregatableWarningTitle = i18n.translate('xpack.datasetQuality.nonAggregatable.title', {
   defaultMessage: 'Your request may take longer to complete',
@@ -173,6 +174,10 @@ export function FlyoutSummary({
         lastReloadTime={lastReloadTime}
         onTimeRangeChange={handleTimeRangeChange}
       />
+
+      <EuiSpacer />
+
+      <DegradedFields />
     </>
   );
 }

x-pack/plugins/observability_solution/dataset_quality/public/controller/public_state.ts

@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { SortField } from '../hooks';
+import { DatasetTableSortField, DegradedFieldSortField } from '../hooks';
 import {
   DatasetQualityControllerContext,
   DEFAULT_CONTEXT,
@@ -32,13 +32,25 @@ export const getContextFromPublicState = (
     sort: publicState.table?.sort
       ? {
           ...publicState.table?.sort,
-          field: publicState.table?.sort.field as SortField,
+          field: publicState.table?.sort.field as DatasetTableSortField,
         }
       : DEFAULT_CONTEXT.table.sort,
   },
   flyout: {
     ...DEFAULT_CONTEXT.flyout,
     ...publicState.flyout,
+    degradedFields: {
+      table: {
+        ...DEFAULT_CONTEXT.flyout.degradedFields.table,
+        ...publicState.flyout?.degradedFields?.table,
+        sort: publicState.flyout?.degradedFields?.table?.sort
+          ? {
+              ...publicState.flyout.degradedFields.table.sort,
+              field: publicState.flyout.degradedFields.table.sort.field as DegradedFieldSortField,
+            }
+          : DEFAULT_CONTEXT.flyout.degradedFields.table.sort,
+      },
+    },
   },
   filters: {
     ...DEFAULT_CONTEXT.filters,

x-pack/plugins/observability_solution/dataset_quality/public/controller/types.ts

@@ -11,6 +11,7 @@ import {
   WithFilters,
   WithFlyoutOptions,
   WithTableOptions,
+  DegradedFields,
 } from '../state_machines/dataset_quality_controller';
 
 export interface DatasetQualityController {
@@ -24,7 +25,19 @@ export type DatasetQualityTableOptions = Partial<
   Omit<WithTableOptions['table'], 'sort'> & { sort: TableSortOptions }
 >;
 
-export type DatasetQualityFlyoutOptions = Omit<WithFlyoutOptions['flyout'], 'datasetDetails'>;
+type DegradedFieldSortOptions = Omit<DegradedFields['table']['sort'], 'field'> & { field: string };
+
+export type DatasetQualityDegradedFieldTableOptions = Partial<
+  Omit<DegradedFields['table'], 'sort'> & {
+    sort: DegradedFieldSortOptions;
+  }
+>;
+
+export type DatasetQualityFlyoutOptions = Partial<
+  Omit<WithFlyoutOptions['flyout'], 'datasetDetails' | 'degradedFields'> & {
+    degradedFields: { table?: DatasetQualityDegradedFieldTableOptions };
+  }
+>;
 
 export type DatasetQualityFilterOptions = Partial<WithFilters['filters']>;
 

x-pack/plugins/observability_solution/dataset_quality/public/hooks/index.ts

@@ -11,3 +11,4 @@ export * from './use_degraded_docs_chart';
 export * from './use_link_to_logs_explorer';
 export * from './use_summary_panel';
 export * from './use_create_dataview';
+export * from './use_dataset_quality_degraded_field';