From 432bf233c161e907696de06ac76209760212eaac Mon Sep 17 00:00:00 2001
From: mohamedhamed-ahmed <mohamed.ahmed@elastic.co>
Date: Wed, 13 Nov 2024 01:01:16 +0100
Subject: [PATCH] [Dataset Quality] Show dataset quality in details page

---
 .../dataset_quality/table/columns.tsx           |  5 ++++-
 .../overview/summary/index.tsx                  | 13 ++++++++++++-
 .../dataset_quality_indicator.tsx               | 17 +++++++++++------
 .../components/quality_indicator/indicator.tsx  |  8 +++++---
 .../public/hooks/use_overview_summary_panel.ts  |  9 +++++++++
 5 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/table/columns.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/table/columns.tsx
index 99fdc25382bf2..14767f4acd8f5 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality/table/columns.tsx
+++ b/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',
     },
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/index.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/index.tsx
index 752b224b6973a..897efb821ff64 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/dataset_quality_details/overview/summary/index.tsx
+++ b/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}
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/dataset_quality_indicator.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/dataset_quality_indicator.tsx
index 78c6d3bff9331..bae5dbd6aa8fd 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/dataset_quality_indicator.tsx
+++ b/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>
   );
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/indicator.tsx b/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/indicator.tsx
index 137c558dfbdd7..49ff342446071 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/components/quality_indicator/indicator.tsx
+++ b/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>
diff --git a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_overview_summary_panel.ts b/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_overview_summary_panel.ts
index 084210774f958..43cf6923075ee 100644
--- a/x-pack/plugins/observability_solution/dataset_quality/public/hooks/use_overview_summary_panel.ts
+++ b/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,
   };
 };