Epic: Day 1 service

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

@@ -29,6 +29,7 @@ import CustomPieChart from '../../../Visualisations/Chart/CustomPieChart.compone
 import { PieChartWidgetCommonProps } from '../../DataQuality.interface';
 
 const DataAssetsCoveragePieChartWidget = ({
+  className = '',
   chartFilter,
 }: PieChartWidgetCommonProps) => {
   const { t } = useTranslation();
@@ -116,7 +117,7 @@ const DataAssetsCoveragePieChartWidget = ({
   }, [chartFilter]);
 
   return (
-    <Card loading={isLoading}>
+    <Card className={className} loading={isLoading}>
       <div className="d-flex flex-column items-center">
         <div className="d-flex items-center gap-2">
           <DataAssetsCoverageIcon height={20} width={20} />

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

@@ -26,6 +26,7 @@ import CustomPieChart from '../../../Visualisations/Chart/CustomPieChart.compone
 import { PieChartWidgetCommonProps } from '../../DataQuality.interface';
 
 const EntityHealthStatusPieChartWidget = ({
+  className = '',
   chartFilter,
 }: PieChartWidgetCommonProps) => {
   const { t } = useTranslation();
@@ -107,7 +108,7 @@ const EntityHealthStatusPieChartWidget = ({
   }, [chartFilter]);
 
   return (
-    <Card loading={isLoading}>
+    <Card className={className} loading={isLoading}>
       <div className="d-flex flex-column items-center">
         <div className="d-flex items-center gap-2">
           <HealthCheckIcon height={20} width={20} />

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

@@ -29,6 +29,7 @@ import CustomPieChart from '../../../Visualisations/Chart/CustomPieChart.compone
 import { PieChartWidgetCommonProps } from '../../DataQuality.interface';
 
 const TestCaseStatusPieChartWidget = ({
+  className = '',
   chartFilter,
 }: PieChartWidgetCommonProps) => {
   const { t } = useTranslation();
@@ -100,6 +101,7 @@ const TestCaseStatusPieChartWidget = ({
 
   return (
     <Card
+      className={className}
       data-testid="test-case-status-pie-chart-widget"
       loading={isTestCaseSummaryLoading}>
       <div className="d-flex flex-column items-center">

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

@@ -78,6 +78,7 @@ export interface TestCaseStatusAreaChartWidgetProps {
 }
 
 export interface PieChartWidgetCommonProps {
+  className?: string;
   chartFilter?: DataQualityDashboardChartFilters;
 }
 

openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/DataQualityWidget/DataQualityWidget.tsx

@@ -0,0 +1,59 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Card, Col, Row, Typography } from 'antd';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFqn } from '../../../hooks/useFqn';
+import DataAssetsCoveragePieChartWidget from '../../DataQuality/ChartWidgets/DataAssetsCoveragePieChartWidget/DataAssetsCoveragePieChartWidget.component';
+import EntityHealthStatusPieChartWidget from '../../DataQuality/ChartWidgets/EntityHealthStatusPieChartWidget/EntityHealthStatusPieChartWidget.component';
+import TestCaseStatusPieChartWidget from '../../DataQuality/ChartWidgets/TestCaseStatusPieChartWidget/TestCaseStatusPieChartWidget.component';
+
+function DataQualityWidget() {
+  const { t } = useTranslation();
+  const { fqn: serviceName } = useFqn();
+
+  const chartFilter = useMemo(() => ({ serviceName }), [serviceName]);
+
+  return (
+    <Card className="service-insights-widget widget-flex-col">
+      <Typography.Text className="font-medium text-lg">
+        {t('label.data-quality')}
+      </Typography.Text>
+      <Typography.Text className="text-grey-muted">
+        {t('message.page-sub-header-for-data-quality')}
+      </Typography.Text>
+      <Row className="m-t-sm" gutter={[24, 24]}>
+        <Col span={8}>
+          <DataAssetsCoveragePieChartWidget
+            chartFilter={chartFilter}
+            className="widget-info-card"
+          />
+        </Col>
+        <Col span={8}>
+          <EntityHealthStatusPieChartWidget
+            chartFilter={chartFilter}
+            className="widget-info-card"
+          />
+        </Col>
+        <Col span={8}>
+          <TestCaseStatusPieChartWidget
+            chartFilter={chartFilter}
+            className="widget-info-card"
+          />
+        </Col>
+      </Row>
+    </Card>
+  );
+}
+
+export default DataQualityWidget;

openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PIIDistributionWidget/PIIDistributionWidget.tsx

@@ -0,0 +1,118 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { Card, Typography } from 'antd';
+import { AxiosError } from 'axios';
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Bar,
+  BarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  XAxis,
+  YAxis,
+} from 'recharts';
+import { GRAY_1, LIGHT_GRAY } from '../../../constants/Color.constants';
+import { useFqn } from '../../../hooks/useFqn';
+import {
+  DataInsightCustomChartResult,
+  getMultiChartsPreviewByName,
+  SystemChartType,
+} from '../../../rest/DataInsightAPI';
+import { getPIIDistributionData } from '../../../utils/PIIDistributionWidgetUtils';
+import {
+  escapeESReservedCharacters,
+  getEncodedFqn,
+} from '../../../utils/StringsUtils';
+import { RoundedCornerBar } from '../../../utils/TierDistributionWidgetUtils';
+import { showErrorToast } from '../../../utils/ToastUtils';
+
+function PIIDistributionWidget() {
+  const { t } = useTranslation();
+  const { fqn: serviceName } = useFqn();
+  const [chartsData, setChartsData] = useState<
+    DataInsightCustomChartResult['results']
+  >([]);
+
+  const fetchChartsData = async () => {
+    try {
+      const currentTimestampInMs = Date.now();
+      const threeDaysAgoTimestampInMs =
+        currentTimestampInMs - 3 * 24 * 60 * 60 * 1000;
+
+      const chartsData = await getMultiChartsPreviewByName(
+        [SystemChartType.TotalDataAssetsByTier], // TODO: change to PII distribution
+        {
+          start: threeDaysAgoTimestampInMs,
+          end: currentTimestampInMs,
+          filter: `{"query":{"bool":{"must":[{"bool":{"must":[{"term":{"service.name.keyword":"${getEncodedFqn(
+            escapeESReservedCharacters(serviceName)
+          )}"}}]}}]}}}`,
+        }
+      );
+
+      const results = getPIIDistributionData(
+        chartsData[SystemChartType.TotalDataAssetsByTier]
+      );
+
+      setChartsData(results);
+    } catch (error) {
+      showErrorToast(error as AxiosError);
+    }
+  };
+
+  useEffect(() => {
+    fetchChartsData();
+  }, []);
+
+  return (
+    <Card className="service-insights-widget widget-flex-col">
+      <Typography.Text className="font-medium text-lg">
+        {t('label.entity-distribution', { entity: t('label.pii-uppercase') })}
+      </Typography.Text>
+      <Typography.Text className="text-grey-muted">
+        {t('message.pii-distribution-description')}
+      </Typography.Text>
+
+      <ResponsiveContainer className="m-t-md" height={300} width="100%">
+        <BarChart data={chartsData}>
+          <CartesianGrid stroke={LIGHT_GRAY} vertical={false} />
+          <XAxis
+            axisLine={{
+              stroke: LIGHT_GRAY,
+            }}
+            dataKey="group"
+            tickLine={false}
+          />
+          <YAxis
+            axisLine={false}
+            stroke={GRAY_1}
+            tickLine={{
+              stroke: LIGHT_GRAY,
+            }}
+          />
+          <Bar
+            activeBar={<RoundedCornerBar />}
+            background={{ fill: LIGHT_GRAY }}
+            barSize={20}
+            dataKey="count"
+            fill="#3538CD"
+            shape={<RoundedCornerBar />}
+          />
+        </BarChart>
+      </ResponsiveContainer>
+    </Card>
+  );
+}
+
+export default PIIDistributionWidget;

openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.interface.ts

@@ -0,0 +1,26 @@
+/*
+ *  Copyright 2025 Collate.
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *  http://www.apache.org/licenses/LICENSE-2.0
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+import { SystemChartType } from '../../../rest/DataInsightAPI';
+
+export interface ChartData {
+  day: number;
+  value: number;
+}
+
+export interface ChartSeriesData {
+  chartType: SystemChartType;
+  data: ChartData[];
+  percentageChange: number;
+  currentCount: number;
+  isIncreased: boolean;
+}