Fix: Implement Data Quality Dashboards (Incident Manager + Data Quality)

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/SummaryPanel.component.tsx

@@ -11,56 +11,110 @@
  *  limitations under the License.
  */
 import { Col, Row } from 'antd';
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
+import { ReactComponent as TestCaseAbortedIcon } from '../../../assets/svg/aborted-status.svg';
+import { ReactComponent as TestCaseIcon } from '../../../assets/svg/all-activity-v2.svg';
+import { ReactComponent as TestCaseFailedIcon } from '../../../assets/svg/failed-status.svg';
+import { ReactComponent as DataAssetsCoverageIcon } from '../../../assets/svg/ic-data-assets-coverage.svg';
+import { ReactComponent as HealthCheckIcon } from '../../../assets/svg/ic-green-heart-border.svg';
+import { ReactComponent as TestCaseSuccessIcon } from '../../../assets/svg/success-colored.svg';
 import { SummaryCard } from '../../../components/common/SummaryCard/SummaryCard.component';
+import { PRIMARY_COLOR } from '../../../constants/Color.constants';
 import { SummaryPanelProps } from './SummaryPanel.interface';
 
 export const SummaryPanel: FC<SummaryPanelProps> = ({
   testSummary: summary,
   isLoading = false,
+  showAdditionalSummary = false,
 }: SummaryPanelProps) => {
   const { t } = useTranslation();
+  const spanValue = useMemo(
+    () => (showAdditionalSummary ? 8 : 6),
+    [showAdditionalSummary]
+  );
 
   return (
     <Row wrap gutter={[16, 16]}>
-      <Col span={6}>
+      <Col span={spanValue}>
         <SummaryCard
+          inverseLabel
+          cardBackgroundClass="primary-background"
           className="h-full"
           isLoading={isLoading}
           showProgressBar={false}
           title={t('label.total-entity', { entity: t('label.test-plural') })}
+          titleIcon={
+            <TestCaseIcon color={PRIMARY_COLOR} height={16} width={16} />
+          }
           total={summary?.total ?? 0}
           value={summary?.total ?? 0}
         />
       </Col>
-      <Col span={6}>
+      <Col span={spanValue}>
         <SummaryCard
+          inverseLabel
+          cardBackgroundClass="success-background"
           isLoading={isLoading}
           title={t('label.success')}
+          titleIcon={<TestCaseSuccessIcon height={16} width={16} />}
           total={summary?.total ?? 0}
           type="success"
           value={summary?.success ?? 0}
         />
       </Col>
-      <Col span={6}>
+      <Col span={spanValue}>
         <SummaryCard
+          inverseLabel
+          cardBackgroundClass="aborted-background"
           isLoading={isLoading}
           title={t('label.aborted')}
+          titleIcon={<TestCaseAbortedIcon height={16} width={16} />}
           total={summary?.total ?? 0}
           type="aborted"
           value={summary?.aborted ?? 0}
         />
       </Col>
-      <Col span={6}>
+      <Col span={spanValue}>
         <SummaryCard
+          inverseLabel
+          cardBackgroundClass="failed-background"
           isLoading={isLoading}
           title={t('label.failed')}
+          titleIcon={<TestCaseFailedIcon height={16} width={16} />}
           total={summary?.total ?? 0}
           type="failed"
           value={summary?.failed ?? 0}
         />
       </Col>
+      {showAdditionalSummary && (
+        <>
+          <Col span={spanValue}>
+            <SummaryCard
+              inverseLabel
+              cardBackgroundClass="success-background"
+              isLoading={isLoading}
+              title={t('label.healthy-data-asset-plural')}
+              titleIcon={<HealthCheckIcon height={16} width={16} />}
+              total={summary?.totalDQEntities ?? 0}
+              type="success"
+              value={summary?.healthy ?? 0}
+            />
+          </Col>
+          <Col span={spanValue}>
+            <SummaryCard
+              inverseLabel
+              cardBackgroundClass="primary-background"
+              isLoading={isLoading}
+              title={t('label.data-asset-plural-coverage')}
+              titleIcon={<DataAssetsCoverageIcon height={16} width={16} />}
+              total={summary?.totalEntityCount ?? 0}
+              type="acknowledged"
+              value={summary?.totalDQEntities ?? 0}
+            />
+          </Col>
+        </>
+      )}
     </Row>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/SummaryPannel/SummaryPanel.interface.ts

@@ -15,4 +15,5 @@ import { TestSummary } from '../../../generated/tests/testSuite';
 export interface SummaryPanelProps {
   testSummary: TestSummary;
   isLoading?: boolean;
+  showAdditionalSummary?: boolean;
 }

openmetadata-ui/src/main/resources/ui/src/components/DataQuality/TestCases/TestCases.component.tsx

@@ -641,6 +641,7 @@ export const TestCases = () => {
       </Col>
       <Col span={24}>
         <SummaryPanel
+          showAdditionalSummary
           isLoading={isTestCaseSummaryLoading}
           testSummary={testCaseSummary}
         />

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCard.component.tsx

@@ -27,6 +27,9 @@ export const SummaryCard = ({
   showProgressBar = true,
   className,
   isLoading = false,
+  inverseLabel,
+  titleIcon,
+  cardBackgroundClass,
 }: SummaryCardProps) => {
   const percent = useMemo(() => {
     if (isNumber(value)) {
@@ -48,14 +51,17 @@ export const SummaryCard = ({
 
   return (
     <Space
-      className={classNames('summary-card', className)}
+      className={classNames('summary-card', cardBackgroundClass, className)}
       data-testid="summary-card-container">
-      <div>
-        <Typography.Paragraph
-          className="summary-card-title"
-          data-testid="summary-card-title">
-          {title}
-        </Typography.Paragraph>
+      <div className={classNames({ 'inverse-label': inverseLabel })}>
+        <Space align="center" size={8}>
+          {titleIcon}
+          <Typography.Paragraph
+            className="summary-card-title"
+            data-testid="summary-card-title">
+            {title}
+          </Typography.Paragraph>
+        </Space>
         <Typography.Paragraph
           className="summary-card-description"
           data-testid="summary-card-description">

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/SummaryCard.interface.ts

@@ -18,4 +18,11 @@ export interface SummaryCardProps {
   showProgressBar?: boolean;
   className?: string;
   isLoading?: boolean;
+  inverseLabel?: boolean;
+  titleIcon?: React.ReactElement;
+  cardBackgroundClass?:
+    | 'success-background'
+    | 'failed-background'
+    | 'aborted-background'
+    | 'primary-background';
 }

openmetadata-ui/src/main/resources/ui/src/components/common/SummaryCard/summary-card.style.less

@@ -25,6 +25,11 @@
     margin-bottom: 4px;
   }
 
+  .inverse-label {
+    display: flex;
+    flex-direction: column-reverse;
+  }
+
   .summary-card-description {
     font-weight: 500;
     font-size: 18px;
@@ -37,6 +42,19 @@
     }
   }
 
+  &.success-background {
+    background-color: @green-8;
+  }
+  &.failed-background {
+    background-color: @red-8;
+  }
+  &.aborted-background {
+    background-color: @yellow-8;
+  }
+  &.primary-background {
+    background-color: @blue-8;
+  }
+
   .new.ant-progress-circle {
     .ant-progress-circle-path {
       stroke: @blue-3 !important;

openmetadata-ui/src/main/resources/ui/src/pages/DataQuality/DataQualityProvider.tsx

@@ -22,7 +22,11 @@ import { useParams } from 'react-router-dom';
 import { INITIAL_TEST_SUMMARY } from '../../constants/TestSuite.constant';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import { TestSummary } from '../../generated/tests/testCase';
-import { fetchTestCaseSummary } from '../../rest/dataQualityDashboardAPI';
+import {
+  fetchEntityCoveredWithDQ,
+  fetchTestCaseSummary,
+  fetchTotalEntityCount,
+} from '../../rest/dataQualityDashboardAPI';
 import { transformToTestCaseStatusObject } from '../../utils/DataQuality/DataQualityUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 import {
@@ -56,14 +60,40 @@ const DataQualityProvider = ({ children }: { children: React.ReactNode }) => {
     setIsTestCaseSummaryLoading(true);
     try {
       const { data } = await fetchTestCaseSummary();
+      const { data: unhealthyData } = await fetchEntityCoveredWithDQ(
+        undefined,
+        true
+      );
+      const { data: totalDQCoverage } = await fetchEntityCoveredWithDQ(
+        undefined,
+        false
+      );
+
+      const { data: entityCount } = await fetchTotalEntityCount();
+
+      const unhealthy = parseInt(unhealthyData[0].originEntityFQN);
+      const total = parseInt(totalDQCoverage[0].originEntityFQN);
+      let totalEntityCount = parseInt(entityCount[0].fullyQualifiedName);
+
+      if (total > totalEntityCount) {
+        totalEntityCount = total;
+      }
+
       const updatedData = transformToTestCaseStatusObject(data);
-      setTestCaseSummary(updatedData);
+      setTestCaseSummary({
+        ...updatedData,
+        unhealthy,
+        healthy: total - unhealthy,
+        totalDQEntities: total,
+        totalEntityCount,
+      });
     } catch (error) {
       showErrorToast(error as AxiosError);
     } finally {
       setIsTestCaseSummaryLoading(false);
     }
   };
+
   useEffect(() => {
     if (testCasePermission?.ViewAll || testCasePermission?.ViewBasic) {
       fetchTestSummary();