diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/DataQuality.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/DataQuality.interface.ts
index bdf772293500..56930c269c7f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/DataQuality.interface.ts
+++ b/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;
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/DataQualityWidget/DataQualityWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/DataQualityWidget/DataQualityWidget.tsx
new file mode 100644
index 000000000000..4c6cfebd7337
--- /dev/null
+++ b/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 (
+
+
+ {t('label.data-quality')}
+
+
+ {t('message.page-sub-header-for-data-quality')}
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default DataQualityWidget;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PIIDistributionWidget/PIIDistributionWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PIIDistributionWidget/PIIDistributionWidget.tsx
new file mode 100644
index 000000000000..375fc8ac987f
--- /dev/null
+++ b/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 (
+
+
+ {t('label.entity-distribution', { entity: t('label.pii-uppercase') })}
+
+
+ {t('message.pii-distribution-description')}
+
+
+
+
+
+
+
+ }
+ background={{ fill: LIGHT_GRAY }}
+ barSize={20}
+ dataKey="count"
+ fill="#3538CD"
+ shape={}
+ />
+
+
+
+ );
+}
+
+export default PIIDistributionWidget;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.interface.ts
new file mode 100644
index 000000000000..e70eb68aa06e
--- /dev/null
+++ b/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;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.tsx
new file mode 100644
index 000000000000..d19d76643890
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.tsx
@@ -0,0 +1,225 @@
+/*
+ * 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 { AxiosError } from 'axios';
+import { last, round } from 'lodash';
+import { ServiceTypes } from 'Models';
+import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useParams } from 'react-router-dom';
+import { Area, AreaChart, ResponsiveContainer } from 'recharts';
+import { ReactComponent as ArrowDown } from '../../../assets/svg/down-full-arrow.svg';
+import { ReactComponent as ArrowUp } from '../../../assets/svg/up-full-arrow.svg';
+import { GREEN_1, RED_1 } from '../../../constants/Color.constants';
+import { useFqn } from '../../../hooks/useFqn';
+import {
+ getMultiChartsPreviewByName,
+ SystemChartType,
+} from '../../../rest/DataInsightAPI';
+import {
+ aggregateChartsDataByType,
+ getSummaryChartName,
+ getTitleByChartType,
+} from '../../../utils/PlatformInsightsWidgetUtils';
+import {
+ escapeESReservedCharacters,
+ getEncodedFqn,
+} from '../../../utils/StringsUtils';
+import { showErrorToast } from '../../../utils/ToastUtils';
+import TotalDataAssetsWidget from '../TotalDataAssetsWidget/TotalDataAssetsWidget';
+import './platform-insights-widget.less';
+import { ChartSeriesData } from './PlatformInsightsWidget.interface';
+
+function PlatformInsightsWidget() {
+ const { serviceCategory } = useParams<{
+ serviceCategory: ServiceTypes;
+ tab: string;
+ }>();
+ const { fqn: serviceName } = useFqn();
+ const { t } = useTranslation();
+ const [chartsData, setChartsData] = useState
([]);
+
+ const fetchChartsData = async () => {
+ try {
+ const currentTimestampInMs = Date.now();
+ const threeDaysAgoTimestampInMs =
+ currentTimestampInMs - 3 * 24 * 60 * 60 * 1000;
+
+ const chartsData = await getMultiChartsPreviewByName(
+ [
+ SystemChartType.PercentageOfServiceWithDescription, // TODO: Replace this with PII chart
+ SystemChartType.NumberOfDataAssetWithDescription,
+ SystemChartType.NumberOfDataAssetWithOwner,
+ SystemChartType.TotalDataAssetsWithTierSummaryCard,
+ SystemChartType.PercentageOfDataAssetWithDescription,
+ SystemChartType.PercentageOfDataAssetWithOwner,
+ SystemChartType.TotalDataAssetsByTier,
+ ],
+ {
+ start: threeDaysAgoTimestampInMs,
+ end: currentTimestampInMs,
+ filter: `{"query":{"bool":{"must":[{"bool":{"must":[{"term":{"service.name.keyword":"${getEncodedFqn(
+ escapeESReservedCharacters(serviceName)
+ )}"}}]}}]}}}`,
+ }
+ );
+
+ const results = [
+ SystemChartType.PercentageOfDataAssetWithDescription,
+ SystemChartType.PercentageOfServiceWithDescription, // TODO: Replace this with PII chart
+ SystemChartType.TotalDataAssetsByTier,
+ SystemChartType.PercentageOfDataAssetWithOwner,
+ ].map((chartType) => {
+ const chartData = chartsData[chartType];
+ const summaryChartName = getSummaryChartName(chartType);
+ const summaryChartData = chartsData[summaryChartName];
+
+ const data = aggregateChartsDataByType(
+ chartData,
+ serviceCategory,
+ chartType
+ );
+
+ const firstDayValue = data.length > 1 ? data[0]?.value : 0;
+ const lastDayValue = data[data.length - 1]?.value;
+
+ const percentageChange =
+ ((lastDayValue - firstDayValue) /
+ (firstDayValue === 0 ? 1 : firstDayValue)) *
+ 100;
+
+ const isIncreased = lastDayValue >= firstDayValue;
+
+ return {
+ chartType,
+ data,
+ isIncreased,
+ percentageChange: isNaN(percentageChange)
+ ? 0
+ : round(Math.abs(percentageChange), 2),
+ currentCount: round(last(summaryChartData.results)?.count ?? 0, 2),
+ };
+ });
+
+ setChartsData(results);
+ } catch (error) {
+ showErrorToast(error as AxiosError);
+ }
+ };
+
+ useEffect(() => {
+ fetchChartsData();
+ }, []);
+
+ const { otherChartsData } = useMemo(
+ () => ({
+ otherChartsData: chartsData.filter(
+ (chart) => chart.chartType !== SystemChartType.TotalDataAssets
+ ),
+ }),
+ [chartsData]
+ );
+
+ return (
+
+
+ {t('label.entity-insight-plural', { entity: t('label.platform') })}
+
+
+ {t('message.platform-insight-description')}
+
+
+
+
+
+
+
+ {otherChartsData.map((chart) => (
+
+
+ {getTitleByChartType(chart.chartType)}
+
+
+
+
+ {chart.currentCount}
+
+
+ {chart.isIncreased ? (
+
+ ) : (
+
+ )}
+
+ {`${chart.percentageChange}%`}
+
+
+ {t('label.vs-last-month')}
+
+
+
+ ))}
+
+
+
+ );
+}
+
+export default PlatformInsightsWidget;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/platform-insights-widget.less b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/platform-insights-widget.less
new file mode 100644
index 000000000000..02d9d1dab5ff
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/platform-insights-widget.less
@@ -0,0 +1,36 @@
+/*
+ * 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 '../../../styles/variables.less';
+
+.platform-insights-card {
+ .other-charts-container {
+ display: grid;
+ grid-template-rows: repeat(2, 1fr);
+ grid-template-columns: repeat(2, 1fr);
+ gap: 16px;
+ }
+
+ .other-charts-card.ant-card {
+ .ant-card-body {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ &::before,
+ &::after {
+ display: none;
+ }
+ }
+ }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.interface.ts
new file mode 100644
index 000000000000..69bd0c1d61af
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.interface.ts
@@ -0,0 +1,18 @@
+/*
+ * 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 { ServicesType } from '../../interface/service.interface';
+
+export interface ServiceInsightsTabProps {
+ serviceDetails: ServicesType;
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.tsx
new file mode 100644
index 000000000000..81abbbb2401d
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/ServiceInsightsTab.tsx
@@ -0,0 +1,42 @@
+/*
+ * 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 { Col, Row } from 'antd';
+import React from 'react';
+import DataQualityWidget from './DataQualityWidget/DataQualityWidget';
+import PIIDistributionWidget from './PIIDistributionWidget/PIIDistributionWidget';
+import PlatformInsightsWidget from './PlatformInsightsWidget/PlatformInsightsWidget';
+import './service-insights-tab.less';
+import { ServiceInsightsTabProps } from './ServiceInsightsTab.interface';
+import TierDistributionWidget from './TierDistributionWidget/TierDistributionWidget';
+
+const ServiceInsightsTab: React.FC = () => {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default ServiceInsightsTab;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TierDistributionWidget/TierDistributionWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TierDistributionWidget/TierDistributionWidget.tsx
new file mode 100644
index 000000000000..f6590b77f758
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TierDistributionWidget/TierDistributionWidget.tsx
@@ -0,0 +1,122 @@
+/*
+ * 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 {
+ escapeESReservedCharacters,
+ getEncodedFqn,
+} from '../../../utils/StringsUtils';
+import {
+ getTierDistributionData,
+ RoundedCornerBar,
+} from '../../../utils/TierDistributionWidgetUtils';
+import { showErrorToast } from '../../../utils/ToastUtils';
+
+function TierDistributionWidget() {
+ 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],
+ {
+ start: threeDaysAgoTimestampInMs,
+ end: currentTimestampInMs,
+ filter: `{"query":{"bool":{"must":[{"bool":{"must":[{"term":{"service.name.keyword":"${getEncodedFqn(
+ escapeESReservedCharacters(serviceName)
+ )}"}}]}}]}}}`,
+ }
+ );
+
+ const results = getTierDistributionData(
+ chartsData[SystemChartType.TotalDataAssetsByTier]
+ );
+
+ setChartsData(results);
+ } catch (error) {
+ showErrorToast(error as AxiosError);
+ }
+ };
+
+ useEffect(() => {
+ fetchChartsData();
+ }, []);
+
+ return (
+
+
+
+ {t('label.entity-distribution', { entity: t('label.tier') })}
+
+
+ {t('message.tier-distribution-description')}
+
+
+
+
+
+
+
+
+ }
+ background={{ fill: LIGHT_GRAY }}
+ barSize={20}
+ dataKey="count"
+ fill="#3538CD"
+ shape={}
+ />
+
+
+
+ );
+}
+
+export default TierDistributionWidget;
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TotalDataAssetsWidget/TotalDataAssetsWidget.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TotalDataAssetsWidget/TotalDataAssetsWidget.tsx
new file mode 100644
index 000000000000..9d080da4eb2d
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TotalDataAssetsWidget/TotalDataAssetsWidget.tsx
@@ -0,0 +1,165 @@
+/*
+ * 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, Skeleton, Tooltip, Typography } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { ServiceTypes } from 'Models';
+import { useParams } from 'react-router-dom';
+import { Cell, Pie, PieChart, ResponsiveContainer } from 'recharts';
+import { ReactComponent as PieChartIcon } from '../../../assets/svg/pie-chart.svg';
+import { WHITE_SMOKE } from '../../../constants/Color.constants';
+import { totalDataAssetsWidgetColors } from '../../../constants/TotalDataAssetsWidget.constants';
+import { SearchIndex } from '../../../enums/search.enum';
+import { useFqn } from '../../../hooks/useFqn';
+import { searchQuery } from '../../../rest/searchAPI';
+import { getEntityNameLabel } from '../../../utils/EntityUtils';
+import { getAssetsByServiceType } from '../../../utils/PlatformInsightsWidgetUtils';
+import {
+ escapeESReservedCharacters,
+ getEncodedFqn,
+} from '../../../utils/StringsUtils';
+import { getEntityIcon } from '../../../utils/TableUtils';
+import './total-data-assets-widget.less';
+
+function TotalDataAssetsWidget() {
+ const { t } = useTranslation();
+ const { serviceCategory } = useParams<{
+ serviceCategory: ServiceTypes;
+ tab: string;
+ }>();
+ const { fqn: serviceName } = useFqn();
+ const [loadingCount, setLoadingCount] = useState(0);
+ const [entityCounts, setEntityCounts] =
+ useState<
+ Array<{ name: string; value: number; fill: string; icon: JSX.Element }>
+ >();
+
+ const getDataAssetsCount = useCallback(async () => {
+ try {
+ setLoadingCount((count) => count + 1);
+ const response = await searchQuery({
+ queryFilter: {
+ query: {
+ bool: {
+ must: [
+ {
+ term: {
+ 'service.name.keyword': getEncodedFqn(
+ escapeESReservedCharacters(serviceName)
+ ),
+ },
+ },
+ ],
+ },
+ },
+ },
+ searchIndex: SearchIndex.ALL,
+ });
+
+ const assets = getAssetsByServiceType(serviceCategory);
+
+ const buckets = response.aggregations['entityType'].buckets.filter(
+ (bucket) => assets.includes(bucket.key)
+ );
+
+ const entityCountsArray = buckets.map((bucket, index) => ({
+ name: getEntityNameLabel(bucket.key),
+ value: bucket.doc_count ?? 0,
+ fill: totalDataAssetsWidgetColors[index],
+ icon: getEntityIcon(bucket.key, '', { height: 16, width: 16 }) ?? <>,
+ }));
+
+ setEntityCounts(entityCountsArray);
+ } catch {
+ // Error
+ } finally {
+ setLoadingCount((count) => count - 1);
+ }
+ }, []);
+
+ useEffect(() => {
+ getDataAssetsCount();
+ }, []);
+
+ return (
+
+
+
+
+
+
+
+ {t('label.total-entity', { entity: t('label.data-asset-plural') })}
+
+
+
+ 0}>
+
+
+ {entityCounts?.map((entity) => (
+
+
+
+
{entity.icon}
+
+
{entity.name}
+
+
+
+ {entity.value}
+
+
+ ))}
+
+
+