[8.x] [Dataset Quality] Show dataset quality in details page (#199890) (

#199987)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Dataset Quality] Show dataset quality in details page
(#199890)](#199890)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT
[{"author":{"name":"mohamedhamed-ahmed","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-13T11:51:28Z","message":"[Dataset
Quality] Show dataset quality in details page (#199890)\n\ncloses
https://github.com/elastic/kibana/issues/197800\r\n\r\n\r\n## 📝
Summary\r\n\r\nThis PR add a new UI representation for the Dataset
Quality in the\r\nDetails page.\r\n\r\n## 🎥
Demo\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e0860fa3-cb82-44ef-bfb5-e8dcb00100f1","sha":"5dc30e775131e4768fdef48b8b31f735e7b26df2","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-logs"],"title":"[Dataset
Quality] Show dataset quality in details
page","number":199890,"url":"https://github.com/elastic/kibana/pull/199890","mergeCommit":{"message":"[Dataset
Quality] Show dataset quality in details page (#199890)\n\ncloses
https://github.com/elastic/kibana/issues/197800\r\n\r\n\r\n## 📝
Summary\r\n\r\nThis PR add a new UI representation for the Dataset
Quality in the\r\nDetails page.\r\n\r\n## 🎥
Demo\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e0860fa3-cb82-44ef-bfb5-e8dcb00100f1","sha":"5dc30e775131e4768fdef48b8b31f735e7b26df2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/199890","number":199890,"mergeCommit":{"message":"[Dataset
Quality] Show dataset quality in details page (#199890)\n\ncloses
https://github.com/elastic/kibana/issues/197800\r\n\r\n\r\n## 📝
Summary\r\n\r\nThis PR add a new UI representation for the Dataset
Quality in the\r\nDetails page.\r\n\r\n## 🎥
Demo\r\n\r\n\r\nhttps://github.com/user-attachments/assets/e0860fa3-cb82-44ef-bfb5-e8dcb00100f1","sha":"5dc30e775131e4768fdef48b8b31f735e7b26df2"}}]}]
BACKPORT-->

Co-authored-by: mohamedhamed-ahmed <[email protected]>

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

@@ -276,7 +276,10 @@ export const getDatasetQualityTableColumns = ({
       field: 'degradedDocs.percentage',
       sortable: true,
       render: (_, dataStreamStat: DataStreamStat) => (
-        <DatasetQualityIndicator isLoading={loadingDegradedStats} dataStreamStat={dataStreamStat} />
+        <DatasetQualityIndicator
+          isLoading={loadingDegradedStats}
+          quality={dataStreamStat.quality}
+        />
       ),
       width: '140px',
     },

x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/index.tsx

@@ -19,6 +19,7 @@ import {
   overviewPanelTitleResources,
 } from '../../../../../common/translations';
 import { useOverviewSummaryPanel } from '../../../../hooks/use_overview_summary_panel';
+import { DatasetQualityIndicator } from '../../../quality_indicator';
 
 // Allow for lazy loading
 // eslint-disable-next-line import/no-default-export
@@ -31,6 +32,7 @@ export default function Summary() {
     totalServicesCount,
     totalHostsCount,
     totalDegradedDocsCount,
+    quality,
   } = useOverviewSummaryPanel();
   return (
     <EuiFlexGroup gutterSize="m">
@@ -59,7 +61,16 @@ export default function Summary() {
           isLoading={isSummaryPanelLoading}
         />
       </Panel>
-      <Panel title={overviewPanelTitleDatasetQuality}>
+      <Panel
+        title={overviewPanelTitleDatasetQuality}
+        secondaryTitle={
+          <DatasetQualityIndicator
+            isLoading={isSummaryPanelLoading}
+            quality={quality}
+            textSize="xs"
+          />
+        }
+      >
         <PanelIndicator
           label={overviewPanelDatasetQualityIndicatorDegradedDocs}
           value={totalDegradedDocsCount}

x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/dataset_quality_indicator.tsx

@@ -9,18 +9,18 @@ import { EuiSkeletonRectangle, EuiFlexGroup } from '@elastic/eui';
 import React from 'react';
 import { capitalize } from 'lodash';
 import { i18n } from '@kbn/i18n';
+import { QualityIndicators } from '../../../common/types';
 import { QualityIndicator } from '.';
-import { DataStreamStat } from '../../../common/data_streams_stats/data_stream_stat';
 
 export const DatasetQualityIndicator = ({
   isLoading,
-  dataStreamStat,
+  quality,
+  textSize = 's',
 }: {
   isLoading: boolean;
-  dataStreamStat: DataStreamStat;
+  quality: QualityIndicators;
+  textSize?: 'xs' | 's' | 'm';
 }) => {
-  const { quality } = dataStreamStat;
-
   const translatedQuality = i18n.translate('xpack.datasetQuality.datasetQualityIdicator', {
     defaultMessage: '{quality}',
     values: { quality: capitalize(quality) },
@@ -29,7 +29,12 @@ export const DatasetQualityIndicator = ({
   return (
     <EuiSkeletonRectangle width="50px" height="20px" borderRadius="m" isLoading={isLoading}>
       <EuiFlexGroup alignItems="center" gutterSize="s">
-        <QualityIndicator quality={quality} description={translatedQuality} isColoredDescription />
+        <QualityIndicator
+          textSize={textSize}
+          quality={quality}
+          description={translatedQuality}
+          isColoredDescription
+        />
       </EuiFlexGroup>
     </EuiSkeletonRectangle>
   );

x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/indicator.tsx

@@ -7,16 +7,18 @@
 
 import { EuiHealth, EuiText } from '@elastic/eui';
 import React, { ReactNode } from 'react';
-import { QualityIndicators, InfoIndicators } from '../../../common/types';
+import type { QualityIndicators, InfoIndicators } from '../../../common/types';
 
 export function QualityIndicator({
   quality,
   description,
   isColoredDescription,
+  textSize = 's',
 }: {
   quality: QualityIndicators;
   description: string | ReactNode;
   isColoredDescription?: boolean;
+  textSize?: 'xs' | 's' | 'm';
 }) {
   const qualityColors: Record<QualityIndicators, InfoIndicators> = {
     poor: 'danger',
@@ -25,8 +27,8 @@ export function QualityIndicator({
   };
 
   return (
-    <EuiHealth color={qualityColors[quality]}>
-      <EuiText size="s" color={isColoredDescription ? qualityColors[quality] : 'white'}>
+    <EuiHealth color={qualityColors[quality]} textSize={textSize}>
+      <EuiText size="relative" color={isColoredDescription ? qualityColors[quality] : 'white'}>
         {description}
       </EuiText>
     </EuiHealth>

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

@@ -7,6 +7,7 @@
 
 import { useSelector } from '@xstate/react';
 import { formatNumber } from '@elastic/eui';
+import { mapPercentageToQuality } from '../../common/utils';
 import { BYTE_NUMBER_FORMAT, MAX_HOSTS_METRIC_VALUE, NUMBER_FORMAT } from '../../common/constants';
 import { useDatasetQualityDetailsContext } from '../components/dataset_quality_details/context';
 
@@ -54,6 +55,13 @@ export const useOverviewSummaryPanel = () => {
     NUMBER_FORMAT
   );
 
+  const degradedPercentage =
+    Number(totalDocsCount) > 0
+      ? (Number(totalDegradedDocsCount) / Number(totalDocsCount)) * 100
+      : 0;
+
+  const quality = mapPercentageToQuality(degradedPercentage);
+
   return {
     totalDocsCount,
     sizeInBytes,
@@ -62,6 +70,7 @@ export const useOverviewSummaryPanel = () => {
     totalHostsCount,
     isSummaryPanelLoading,
     totalDegradedDocsCount,
+    quality,
   };
 };