UI : Data Insight KPI improvements (#8945)

openmetadata-ui/src/main/resources/ui/src/components/DataInsightDetail/DataInsightDetail.less

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-@label-color: #37352f90;
+@label-color: #6b7280;
 @summary-card-bg-hover: #f0f1f3;
 
 .data-insight-card {

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -269,9 +269,9 @@
     "interval-unit": "Interval Unit",
     "select-teams": "Select Teams",
     "select-tiers": "Select Tiers",
-    "kpi-list": "Kpi list",
-    "kpi-name": "Kpi name",
-    "kpi-display-name": "Kpi display name",
+    "kpi-list": "KPI list",
+    "kpi-name": "KPI name",
+    "kpi-display-name": "KPI display name",
     "data-insight-chart": "Data insight chart",
     "data-assets": "Data Assets",
     "app-analytics": "App Analytics",
@@ -347,7 +347,7 @@
     "data-insight-chart-required": "Data insight chart is required",
     "metric-type-required": "Metric type is required",
     "metric-value-required": "Metric value is required",
-    "no-kpi-found": "No Kpi found with name {{name}}",
+    "no-kpi-found": "No KPI found with name {{name}}",
     "no-kpi-available-add-new-one": "No kpi's are available, add one by clicking Add KPI button.",
     "delete-action-description": "Deleting this {{entityType}} will permanently remove its metadata from OpenMetadata.",
     "restore-action-description": "Restoring this {{entityType}} will restore its metadata in OpenMetadata.",
@@ -369,7 +369,8 @@
     "no-permission-for-action": "You do not have the necessary permissions to perform this action.",
     "no-permission-to-view": "You do not have the necessary permissions to view this data.",
     "no-schema-data-available": " No schema data available",
-    "no-data-available-for-selected-filter": "No data found. Try changing the filters."
+    "no-data-available-for-selected-filter": "No data found. Try changing the filters.",
+    "all-charts-are-mapped": "All charts are mapped with existing KPIs."
   },
   "server": {
     "no-followed-entities": "You have not followed anything yet.",

openmetadata-ui/src/main/resources/ui/src/pages/KPIPage/AddKPIPage.tsx

@@ -37,7 +37,7 @@ import TitleBreadcrumb from '../../components/common/title-breadcrumb/title-brea
 import './KPIPage.less';
 
 import { t } from 'i18next';
-import { postKPI } from '../../axiosAPIs/KpiAPI';
+import { getListKPIs, postKPI } from '../../axiosAPIs/KpiAPI';
 import { ROUTES } from '../../constants/constants';
 import {
   KPI_DATES,
@@ -58,6 +58,7 @@ import {
   DataType,
 } from '../../generated/dataInsight/dataInsightChart';
 import { DataInsightChartType } from '../../generated/dataInsight/dataInsightChartResult';
+import { Kpi } from '../../generated/dataInsight/kpi/kpi';
 import { KpiDate, KpiDates } from '../../interface/data-insight.interface';
 import { isUrlFriendlyName } from '../../utils/CommonUtils';
 import {
@@ -96,6 +97,7 @@ const AddKPIPage = () => {
   const [metricValue, setMetricValue] = useState<number>(0);
   const [isCreatingKPI, setIsCreatingKPI] = useState<boolean>(false);
   const [kpiDates, setKpiDates] = useState<KpiDates>(KPI_DATES);
+  const [kpiList, setKpiList] = useState<Array<Kpi>>([]);
 
   const metricTypes = useMemo(
     () =>
@@ -108,6 +110,14 @@ const AddKPIPage = () => {
     [selectedChart]
   );
 
+  const chartOptions = useMemo(() => {
+    return dataInsightCharts.filter(
+      (chart) =>
+        // only show unmapped charts
+        !kpiList.find((kpi) => kpi.dataInsightChart.name === chart.name)
+    );
+  }, [kpiList, dataInsightCharts]);
+
   const fetchCharts = async () => {
     try {
       const response = await getListDataInsightCharts();
@@ -122,6 +132,17 @@ const AddKPIPage = () => {
     }
   };
 
+  const fetchKpiList = async () => {
+    try {
+      const response = await getListKPIs({
+        fields: 'dataInsightChart',
+      });
+      setKpiList(response.data);
+    } catch (err) {
+      setKpiList([]);
+    }
+  };
+
   const handleChartSelect = (value: string) => {
     const selectedChartValue = dataInsightCharts.find(
       (chart) => chart.id === value
@@ -180,6 +201,7 @@ const AddKPIPage = () => {
 
   useEffect(() => {
     fetchCharts();
+    fetchKpiList();
   }, []);
 
   return (
@@ -249,10 +271,11 @@ const AddKPIPage = () => {
               ]}>
               <Select
                 data-testid="dataInsightChart"
+                notFoundContent={t('message.all-charts-are-mapped')}
                 placeholder={t('label.select-a-chart')}
                 value={selectedChart?.id}
                 onChange={handleChartSelect}>
-                {dataInsightCharts.map((chart) => (
+                {chartOptions.map((chart) => (
                   <Option key={chart.id}>
                     {chart.displayName || chart.name}
                   </Option>