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/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
index 34fba24d6c80..edf148f4cc72 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx
@@ -12,6 +12,7 @@
*/
import { ExclamationCircleFilled } from '@ant-design/icons';
import { Badge, Col, Divider, Row, Typography } from 'antd';
+import classNames from 'classnames';
import { isEmpty } from 'lodash';
import React, { useMemo } from 'react';
import { useTranslation } from 'react-i18next';
@@ -39,6 +40,8 @@ const EntityHeaderTitle = ({
color,
showName = true,
certification,
+ nameClassName = '',
+ displayNameClassName = '',
}: EntityHeaderTitleProps) => {
const { t } = useTranslation();
const location = useCustomLocation();
@@ -63,15 +66,19 @@ const EntityHeaderTitle = ({
{/* If we do not have displayName name only be shown in the bold from the below code */}
{!isEmpty(displayName) && showName ? (
+ className={classNames('entity-header-name', nameClassName)}
+ data-testid="entity-header-name"
+ ellipsis={{ tooltip: true }}>
{stringToHTML(name)}
) : null}
{/* It will render displayName fallback to name */}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
index 1430c674b295..9ba2aa4aaa1f 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.interface.ts
@@ -27,4 +27,6 @@ export interface EntityHeaderTitleProps {
isDisabled?: boolean;
showName?: boolean;
certification?: AssetCertification;
+ nameClassName?: string;
+ displayNameClassName?: string;
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less
index 1e1b65a1ce18..6185360223f5 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/entity-header-title.less
@@ -10,6 +10,17 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
+@import (reference) url('../../../styles/variables.less');
+
.ant-col.entity-header-content {
max-width: calc(100% - 100px);
+ .ant-typography-ellipsis.entity-header-name {
+ margin-bottom: 0px;
+ display: block;
+ color: @text-grey-muted;
+ }
+ .ant-typography-ellipsis.entity-header-display-name {
+ font-weight: 600;
+ font-size: 16px;
+ }
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
index 71f0c8453852..b3c4364d2006 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
@@ -38,10 +38,10 @@ import { ReactComponent as TotalDataAssetsEmptyIcon } from '../../../../assets/s
import { CHART_WIDGET_DAYS_DURATION } from '../../../../constants/constants';
import { SIZE } from '../../../../enums/common.enum';
import { WidgetWidths } from '../../../../enums/CustomizablePage.enum';
+import { SystemChartType } from '../../../../enums/DataInsight.enum';
import {
DataInsightCustomChartResult,
getChartPreviewByName,
- SystemChartType,
} from '../../../../rest/DataInsightAPI';
import { entityChartColor } from '../../../../utils/CommonUtils';
import {
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..b716a53ad307
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.interface.ts
@@ -0,0 +1,34 @@
+/*
+ * 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 '../../../enums/DataInsight.enum';
+import { ServiceInsightWidgetCommonProps } from '../ServiceInsightsTab.interface';
+
+export interface ChartData {
+ day: number;
+ count: number;
+}
+
+export interface ChartSeriesData {
+ chartType: SystemChartType;
+ data: ChartData[];
+ percentageChange: number;
+ currentCount: number;
+ isIncreased: boolean;
+}
+
+export interface PlatformInsightsWidgetProps
+ extends ServiceInsightWidgetCommonProps {
+ chartsData: ChartSeriesData[];
+ isLoading: 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..7b79cd476d03
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget.tsx
@@ -0,0 +1,139 @@
+/*
+ * 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, Typography } from 'antd';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+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 { PLATFORM_INSIGHTS_CHART } from '../../../constants/ServiceInsightsTab.constants';
+import { getTitleByChartType } from '../../../utils/ServiceInsightsTabUtils';
+import TotalDataAssetsWidget from '../TotalDataAssetsWidget/TotalDataAssetsWidget';
+import './platform-insights-widget.less';
+import { PlatformInsightsWidgetProps } from './PlatformInsightsWidget.interface';
+
+function PlatformInsightsWidget({
+ chartsData,
+ isLoading,
+ serviceName,
+}: Readonly) {
+ const { t } = useTranslation();
+
+ return (
+
+
+ {t('label.entity-insight-plural', { entity: t('label.platform') })}
+
+
+ {t('message.platform-insight-description')}
+
+
+
+
+
+
+
+ {isLoading
+ ? PLATFORM_INSIGHTS_CHART.map((chartType) => (
+
+
+
+ ))
+ : chartsData.map((chart) => (
+
+
+ {getTitleByChartType(chart.chartType)}
+
+
+
+
+ {chart.currentCount}
+
+
+ {chart.isIncreased ? (
+
+ ) : (
+
+ )}
+
+ {`${chart.percentageChange}%`}
+
+
+ {t('label.vs-last-month')}
+
+
+
+ ))}
+
+
+
+ {arrayOfWidgets.map(
+ ({ Widget, name }) =>
+ !isUndefined(Widget) && (
+
+
+
+ )
+ )}
+
+ );
+};
+
+export default ServiceInsightsTab;
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..7c842f426c4d
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ServiceInsights/TotalDataAssetsWidget/TotalDataAssetsWidget.tsx
@@ -0,0 +1,160 @@
+/*
+ * 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, Skeleton, Tooltip, Typography } from 'antd';
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { isEmpty } from 'lodash';
+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 { SIZE } from '../../../enums/common.enum';
+import { SearchIndex } from '../../../enums/search.enum';
+import { searchQuery } from '../../../rest/searchAPI';
+import { getEntityNameLabel } from '../../../utils/EntityUtils';
+import { getAssetsByServiceType } from '../../../utils/ServiceInsightsTabUtils';
+import { getServiceNameQueryFilter } from '../../../utils/ServiceUtils';
+import { getEntityIcon } from '../../../utils/TableUtils';
+import ErrorPlaceHolder from '../../common/ErrorWithPlaceholder/ErrorPlaceHolder';
+import { ServiceInsightWidgetCommonProps } from '../ServiceInsightsTab.interface';
+import './total-data-assets-widget.less';
+
+function TotalDataAssetsWidget({
+ serviceName,
+}: Readonly) {
+ const { t } = useTranslation();
+ const { serviceCategory } = useParams<{
+ serviceCategory: ServiceTypes;
+ tab: string;
+ }>();
+ 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: getServiceNameQueryFilter(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') })}
+
+
+
+ {entityCounts?.map((entity) => (
+
+
+
+
{entity.icon}
+
+
{entity.name}
+
+
+
+ {entity.value}
+
+
+ ))}
+
+
+
Editor
)
);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx
index 58cce7478ca9..63bc5b022558 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/EditKPIPage.test.tsx
@@ -15,7 +15,7 @@ import { render, screen } from '@testing-library/react';
import React from 'react';
import { MemoryRouter } from 'react-router-dom';
import EditKPIPage from './EditKPIPage';
-import { DESCRIPTION_CHART, KPI_DATA } from './KPIMock.mock';
+import { KPI_DATA } from './KPIMock.mock';
const mockPush = jest.fn();
@@ -26,12 +26,6 @@ jest.mock('react-router-dom', () => ({
useParams: jest.fn().mockReturnValue({ useParams: 'description-kpi' }),
}));
-jest.mock('../../rest/DataInsightAPI', () => ({
- getChartById: jest
- .fn()
- .mockImplementation(() => Promise.resolve(DESCRIPTION_CHART)),
-}));
-
jest.mock('../../components/common/RichTextEditor/RichTextEditor', () =>
jest.fn().mockReturnValue(Editor
)
);
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/KPIMock.mock.ts b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/KPIMock.mock.ts
index 9021defb96c0..5f3398d5efc0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/KPIMock.mock.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/KPIMock.mock.ts
@@ -13,295 +13,6 @@
import { KpiTargetType } from '../../generated/dataInsight/kpi/kpi';
-export const KPI_CHARTS = [
- {
- id: 'd2f093d4-0ca8-42b8-8721-1c2a59951b59',
- name: 'dailyActiveUsers',
- displayName: 'Daily active users on the platform',
- fullyQualifiedName: 'dailyActiveUsers',
- description: 'Display the number of users active.',
- dataIndexType: 'web_analytic_user_activity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- ],
- metrics: [
- {
- name: 'activeUsers',
- displayName: 'Number of active users',
- chartDataType: 'NUMBER',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952802,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/d2f093d4-0ca8-42b8-8721-1c2a59951b59',
- deleted: false,
- },
- {
- id: 'fbad142d-16d5-479d-bed3-67bb5fd4104d',
- name: 'mostActiveUsers',
- displayName: 'Most Active Users',
- fullyQualifiedName: 'mostActiveUsers',
- description:
- 'Displays the most active users on the platform based on page views.',
- dataIndexType: 'web_analytic_user_activity_report_data_index',
- dimensions: [
- {
- name: 'userName',
- chartDataType: 'STRING',
- },
- {
- name: 'team',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'lastSession',
- displayName: 'Last time the user visited the platform',
- chartDataType: 'INT',
- },
- {
- name: 'sessions',
- displayName: 'Total number of sessions',
- chartDataType: 'INT',
- },
- {
- name: 'avgSessionDuration',
- displayName: 'The average duration time of a session',
- chartDataType: 'FLOAT',
- },
- {
- name: 'pageViews',
- displayName: 'Total number of page view',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952821,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/fbad142d-16d5-479d-bed3-67bb5fd4104d',
- deleted: false,
- },
- {
- id: '9217560a-3fed-4c0d-85fa-d7c699feefac',
- name: 'mostViewedEntities',
- displayName: 'Most Viewed entites',
- fullyQualifiedName: 'mostViewedEntities',
- description: 'Displays the most viewed entities.',
- dataIndexType: 'web_analytic_entity_view_report_data_index',
- dimensions: [
- {
- name: 'entityFqn',
- chartDataType: 'STRING',
- },
- {
- name: 'owner',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'pageViews',
- displayName: 'Total number of page view',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952805,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/dataIanalytics/dataInsights/chartsnsight/9217560a-3fed-4c0d-85fa-d7c699feefac',
- deleted: false,
- },
- {
- id: '73d9b934-7664-4e84-8a7e-7fa00fe03f5f',
- name: 'pageViewsByEntities',
- displayName: 'Page views by entities',
- fullyQualifiedName: 'pageViewsByEntities',
- description: 'Displays the number of time an entity type was viewed.',
- dataIndexType: 'web_analytic_entity_view_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityType',
- chartDataType: 'INT',
- },
- ],
- metrics: [
- {
- name: 'pageViews',
- displayName: 'Total number of page view',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952798,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/73d9b934-7664-4e84-8a7e-7fa00fe03f5f',
- deleted: false,
- },
- {
- id: '7dc794d3-1881-408c-92fc-6182aa453bc8',
- name: 'PercentageOfEntitiesWithDescriptionByType',
- displayName: 'Percentage of Entities With Description',
- fullyQualifiedName: 'PercentageOfEntitiesWithDescriptionByType',
- description: 'Display the percentage of entities with description by type.',
- dataIndexType: 'entity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityType',
- displayName: 'Entity Type',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'completedDescriptionFraction',
- displayName: 'Percentage of Completed Description',
- chartDataType: 'PERCENTAGE',
- },
- {
- name: 'completedDescription',
- displayName: 'Entities with Completed Description',
- chartDataType: 'NUMBER',
- },
- {
- name: 'entityCount',
- displayName: 'Total Entities',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952816,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/7dc794d3-1881-408c-92fc-6182aa453bc8',
- deleted: false,
- },
- {
- id: 'd712533a-ea8c-409f-a9e3-3f68d06d7864',
- name: 'PercentageOfEntitiesWithOwnerByType',
- displayName: 'Percentage of Entities With Owner',
- fullyQualifiedName: 'PercentageOfEntitiesWithOwnerByType',
- description: 'Display the percentage of entities with owner by type.',
- dataIndexType: 'entity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityType',
- displayName: 'Entity Type',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'hasOwnerFraction',
- displayName: 'Percentage of Completed Owner',
- chartDataType: 'PERCENTAGE',
- },
- {
- name: 'hasOwner',
- displayName: 'Entities with Owner',
- chartDataType: 'NUMBER',
- },
- {
- name: 'entityCount',
- displayName: 'Total Entities',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952825,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/d712533a-ea8c-409f-a9e3-3f68d06d7864',
- deleted: false,
- },
- {
- id: '71d7f330-40d1-4c9e-b843-b5b62ff2efcd',
- name: 'TotalEntitiesByTier',
- displayName: 'Percentage of Entities With Tier',
- fullyQualifiedName: 'TotalEntitiesByTier',
- description: 'Display the percentage of entities with tier by type.',
- dataIndexType: 'entity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityTier',
- displayName: 'Entity Tier',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'entityCountFraction',
- displayName: 'Total Count of Entity',
- chartDataType: 'PERCENTAGE',
- },
- {
- name: 'entityCount',
- displayName: 'Total Entities',
- chartDataType: 'NUMBER',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952786,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/71d7f330-40d1-4c9e-b843-b5b62ff2efcd',
- deleted: false,
- },
- {
- id: 'd3eff37a-1196-4e4a-bc6a-5a81bb6504b5',
- name: 'TotalEntitiesByType',
- displayName: 'Total Entities',
- fullyQualifiedName: 'TotalEntitiesByType',
- description: 'Display the total of entities by type.',
- dataIndexType: 'entity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityType',
- displayName: 'Entity Tier',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'entityCountFraction',
- displayName: 'Total Count of Entity',
- chartDataType: 'PERCENTAGE',
- },
- {
- name: 'entityCount',
- displayName: 'Total Entities',
- chartDataType: 'NUMBER',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952810,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/d3eff37a-1196-4e4a-bc6a-5a81bb6504b5',
- deleted: false,
- },
-];
-
export const KPI_LIST = [
{
id: 'dabd01bb-095d-448e-af21-0427859b99b5',
@@ -404,48 +115,6 @@ export const KPI_DATA = {
deleted: false,
};
-export const DESCRIPTION_CHART = {
- id: '7dc794d3-1881-408c-92fc-6182aa453bc8',
- name: 'PercentageOfEntitiesWithDescriptionByType',
- displayName: 'Percentage of Entities With Description',
- fullyQualifiedName: 'PercentageOfEntitiesWithDescriptionByType',
- description: 'Display the percentage of entities with description by type.',
- dataIndexType: 'entity_report_data_index',
- dimensions: [
- {
- name: 'timestamp',
- chartDataType: 'INT',
- },
- {
- name: 'entityType',
- displayName: 'Entity Type',
- chartDataType: 'STRING',
- },
- ],
- metrics: [
- {
- name: 'completedDescriptionFraction',
- displayName: 'Percentage of Completed Description',
- chartDataType: 'PERCENTAGE',
- },
- {
- name: 'completedDescription',
- displayName: 'Entities with Completed Description',
- chartDataType: 'NUMBER',
- },
- {
- name: 'entityCount',
- displayName: 'Total Entities',
- chartDataType: 'INT',
- },
- ],
- version: 0.1,
- updatedAt: 1670231952816,
- updatedBy: 'admin',
- href: 'http://localhost:8585/api/v1/analytics/dataInsights/charts/7dc794d3-1881-408c-92fc-6182aa453bc8',
- deleted: false,
-};
-
export const MOCK_KPI_LIST_RESPONSE = {
data: [
{
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
index deb6f7ae2485..4a46bb03ba06 100644
--- a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/ServiceDetailsPage.tsx
@@ -39,6 +39,7 @@ import DataModelTable from '../../components/Dashboard/DataModel/DataModels/Data
import { DataAssetsHeader } from '../../components/DataAssets/DataAssetsHeader/DataAssetsHeader.component';
import { EntityName } from '../../components/Modals/EntityNameModal/EntityNameModal.interface';
import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
+import ServiceInsightsTab from '../../components/ServiceInsights/ServiceInsightsTab';
import Ingestion from '../../components/Settings/Services/Ingestion/Ingestion.component';
import ServiceConnectionDetails from '../../components/Settings/Services/ServiceConnectionDetails/ServiceConnectionDetails.component';
import {
@@ -127,6 +128,7 @@ import {
} from '../../utils/StringsUtils';
import { updateTierTag } from '../../utils/TagsUtils';
import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
+import './service-details-page.less';
import ServiceMainTabContent from './ServiceMainTabContent';
export type ServicePageData =
@@ -1017,28 +1019,35 @@ const ServiceDetailsPage: FunctionComponent = () => {
const showIngestionTab = userInOwnerTeam || userOwnsService || isAdminUser;
if (!isMetadataService) {
- tabs.push({
- name: getCountLabel(serviceCategory),
- key: getCountLabel(serviceCategory).toLowerCase(),
- count: paging.total,
- children: (
-
- ),
- });
+ tabs.push(
+ {
+ name: t('label.insight-plural'),
+ key: EntityTabs.INSIGHTS,
+ children: ,
+ },
+ {
+ name: getCountLabel(serviceCategory),
+ key: getCountLabel(serviceCategory).toLowerCase(),
+ count: paging.total,
+ children: (
+
+ ),
+ }
+ );
}
if (serviceCategory === ServiceCategory.DASHBOARD_SERVICES) {
@@ -1114,6 +1123,7 @@ const ServiceDetailsPage: FunctionComponent = () => {
return (
diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/service-details-page.less b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/service-details-page.less
new file mode 100644
index 000000000000..fe20112f35ce
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/pages/ServiceDetailsPage/service-details-page.less
@@ -0,0 +1,54 @@
+/*
+ * 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 (reference) '../../styles/variables.less';
+
+.service-details-page {
+ background-color: @grey-9;
+
+ /* Tabs */
+ .ant-tabs-top > .ant-tabs-nav::before {
+ display: none;
+ }
+
+ // Entity Details Page css
+ .entity-details-page-tabs {
+ .ant-tabs-nav {
+ .ant-tabs-nav-wrap {
+ overflow: initial;
+ }
+ }
+ }
+
+ .ant-tabs-tab + .ant-tabs-tab {
+ margin: 0 0 0 24px;
+ }
+
+ .ant-tabs {
+ padding: 0px 24px;
+ }
+
+ .ant-tabs-tab {
+ padding: 8px 12px 4px 12px;
+ }
+
+ .ant-tabs-nav {
+ padding: 4px 20px 8px 20px;
+ background-color: @white;
+ border-radius: @border-radius-sm;
+ }
+
+ .ant-tabs-content-holder {
+ margin-top: 16px;
+ }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/rest/DataInsightAPI.ts b/openmetadata-ui/src/main/resources/ui/src/rest/DataInsightAPI.ts
index 783e4c0adb56..e3bc55f7d9b0 100644
--- a/openmetadata-ui/src/main/resources/ui/src/rest/DataInsightAPI.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/rest/DataInsightAPI.ts
@@ -11,25 +11,11 @@
* limitations under the License.
*/
+import { SystemChartType } from '../enums/DataInsight.enum';
import { DataInsightChartResult } from '../generated/dataInsight/dataInsightChartResult';
import { ChartAggregateParam } from '../interface/data-insight.interface';
import APIClient from './index';
-export enum SystemChartType {
- TotalDataAssets = 'total_data_assets',
- PercentageOfDataAssetWithDescription = 'percentage_of_data_asset_with_description',
- PercentageOfDataAssetWithOwner = 'percentage_of_data_asset_with_owner',
- PercentageOfServiceWithDescription = 'percentage_of_service_with_description',
- PercentageOfServiceWithOwner = 'percentage_of_service_with_owner',
- TotalDataAssetsByTier = 'total_data_assets_by_tier',
- TotalDataAssetsSummaryCard = 'total_data_assets_summary_card',
- DataAssetsWithDescriptionSummaryCard = 'data_assets_with_description_summary_card',
- DataAssetsWithOwnerSummaryCard = 'data_assets_with_owner_summary_card',
- TotalDataAssetsWithTierSummaryCard = 'total_data_assets_with_tier_summary_card',
- NumberOfDataAssetWithDescription = 'number_of_data_asset_with_description_kpi',
- NumberOfDataAssetWithOwner = 'number_of_data_asset_with_owner_kpi',
-}
-
export interface DataInsightCustomChartResult {
results: Array<{ count: number; day: number; group: string }>;
}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/position.less b/openmetadata-ui/src/main/resources/ui/src/styles/position.less
index 994238ddfdc5..b254ba518bee 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/position.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/position.less
@@ -72,6 +72,9 @@
.flex-1 {
flex: 1;
}
+.flex-half {
+ flex: 0.5;
+}
.inset-0 {
top: 0px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
index 6a9d6df6922e..c3775c622e63 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/variables.less
@@ -59,6 +59,7 @@
@blue-7: #3062d4;
@blue-8: #f5f8ff;
@blue-9: #175cd3;
+@blue-10: #005bc4;
@partial-success-1: #06a4a4;
@partial-success-2: #bdeeee;
@@ -75,12 +76,19 @@
@grey-7: #9ca3af;
@grey-8: #535862;
@grey-9: #f8f9fc;
+@grey-10: #f5f5f5;
+@grey-11: #fdfdfd;
+@grey-12: #e9eaeb;
@text-grey-muted: @grey-4;
@font-size-base: 14px;
@box-shadow-base: 0px 2px 10px rgba(0, 0, 0, 0.12);
@white: #fff;
@border-radius-base: 4px;
@border-radius-xs: 8px;
+@border-radius-sm: 12px;
+@border-radius-md: 16px;
+@border-radius-lg: 20px;
+@border-radius-xl: 24px;
@checkbox-size: 14px;
@switch-height: 16px;
@switch-sm-height: 12px;
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
index 7a319a67997d..2ceed6032940 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/DataInsightUtils.tsx
@@ -54,6 +54,7 @@ import {
ENTITIES_SUMMARY_LIST,
WEB_SUMMARY_LIST,
} from '../constants/DataInsight.constants';
+import { SystemChartType } from '../enums/DataInsight.enum';
import {
DataInsightChartResult,
DataInsightChartType,
@@ -64,10 +65,7 @@ import {
DataInsightChartTooltipProps,
DataInsightTabs,
} from '../interface/data-insight.interface';
-import {
- DataInsightCustomChartResult,
- SystemChartType,
-} from '../rest/DataInsightAPI';
+import { DataInsightCustomChartResult } from '../rest/DataInsightAPI';
import { entityChartColor } from '../utils/CommonUtils';
import { axisTickFormatter } from './ChartUtils';
import { pluralize } from './CommonUtils';
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceInsightsTabUtils.tsx b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceInsightsTabUtils.tsx
new file mode 100644
index 000000000000..219b5465b204
--- /dev/null
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceInsightsTabUtils.tsx
@@ -0,0 +1,73 @@
+/*
+ * 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 { ServiceTypes } from 'Models';
+import { SystemChartType } from '../enums/DataInsight.enum';
+import { EntityType } from '../enums/entity.enum';
+import i18n from '../utils/i18next/LocalUtil';
+
+const { t } = i18n;
+
+export const getAssetsByServiceType = (serviceType: ServiceTypes): string[] => {
+ switch (serviceType) {
+ case 'databaseServices':
+ return [
+ EntityType.DATABASE,
+ EntityType.DATABASE_SCHEMA,
+ EntityType.STORED_PROCEDURE,
+ EntityType.TABLE,
+ ];
+ case 'messagingServices':
+ return [EntityType.TOPIC];
+ case 'dashboardServices':
+ return [
+ EntityType.CHART,
+ EntityType.DASHBOARD,
+ EntityType.DASHBOARD_DATA_MODEL,
+ ];
+ case 'pipelineServices':
+ return [EntityType.PIPELINE];
+ case 'mlmodelServices':
+ return [EntityType.MLMODEL];
+ case 'storageServices':
+ return [EntityType.CONTAINER];
+ case 'searchServices':
+ return [EntityType.SEARCH_SERVICE];
+ case 'apiServices':
+ return [EntityType.API_COLLECTION, EntityType.API_ENDPOINT];
+ default:
+ return [];
+ }
+};
+
+export const getTitleByChartType = (chartType: SystemChartType) => {
+ switch (chartType) {
+ case SystemChartType.DescriptionCoverage:
+ return t('label.entity-coverage', {
+ entity: t('label.description'),
+ });
+ case SystemChartType.OwnersCoverage:
+ return t('label.entity-coverage', {
+ entity: t('label.ownership'),
+ });
+ case SystemChartType.PIICoverage:
+ return t('label.entity-coverage', {
+ entity: t('label.pii-uppercase'),
+ });
+ case SystemChartType.TierCoverage:
+ return t('label.entity-coverage', {
+ entity: t('label.tier'),
+ });
+ default:
+ return '';
+ }
+};
diff --git a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
index 13be10061d6c..3a1729c726d7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
+++ b/openmetadata-ui/src/main/resources/ui/src/utils/ServiceUtilClassBase.ts
@@ -12,7 +12,9 @@
*/
import { capitalize, get, toLower } from 'lodash';
+import { ServiceTypes } from 'Models';
import MetricIcon from '../assets/svg/metric.svg';
+import PlatformInsightsWidget from '../components/ServiceInsights/PlatformInsightsWidget/PlatformInsightsWidget';
import {
AIRBYTE,
AIRFLOW,
@@ -723,6 +725,14 @@ class ServiceUtilClassBase {
return getAPIConfig(type);
}
+ public getInsightsTabWidgets(_: ServiceTypes) {
+ const widgets: Record> = {
+ PlatformInsightsWidget,
+ };
+
+ return widgets;
+ }
+
/**
* @param originalEnum will take the enum that should be converted
* @returns object with lowercase value