Fix #4697: UI Create property URL dynamically (#5483)

* Fix #4697: UI Create property URL dynamically

* Addressing comments

openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx

@@ -532,7 +532,9 @@ const DashboardDetails = ({
                                 to={{ pathname: chart.chartUrl }}>
                                 <span className="tw-flex">
                                   <span className="tw-mr-1">
-                                    {chart.displayName}
+                                    {getEntityName(
+                                      chart as unknown as EntityReference
+                                    )}
                                   </span>
                                   <SVGIcons
                                     alt="external-link"

openmetadata-ui/src/main/resources/ui/src/pages/DashboardDetailsPage/DashboardDetailsPage.component.tsx

@@ -39,6 +39,7 @@ import {
 } from '../../axiosAPIs/feedsAPI';
 import { getLineageByFQN } from '../../axiosAPIs/lineageAPI';
 import { addLineage, deleteLineageEdge } from '../../axiosAPIs/miscAPI';
+import { getServiceByFQN } from '../../axiosAPIs/serviceAPI';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import DashboardDetails from '../../components/DashboardDetails/DashboardDetails.component';
@@ -295,6 +296,27 @@ const DashboardDetailsPage = () => {
       });
   };
 
+  const fetchServiceDetails = (type: string, fqn: string) => {
+    return new Promise<string>((resolve, reject) => {
+      getServiceByFQN(type + 's', fqn, ['owner'])
+        .then((resService: AxiosResponse) => {
+          if (resService?.data) {
+            const hostPort = resService.data.connection?.config?.hostPort || '';
+            resolve(hostPort);
+          } else {
+            throw null;
+          }
+        })
+        .catch((err: AxiosError) => {
+          showErrorToast(
+            err,
+            jsonData['api-error-messages']['fetch-dashboard-details-error']
+          );
+          reject(err);
+        });
+    });
+  };
+
   const fetchDashboardDetail = (dashboardFQN: string) => {
     setLoading(true);
     getDashboardByFqn(dashboardFQN, defaultFields)
@@ -310,12 +332,13 @@ const DashboardDetailsPage = () => {
             tags,
             owner,
             displayName,
+            name,
             charts: ChartIds,
             dashboardUrl,
             serviceType,
             version,
           } = res.data;
-          setDisplayName(displayName);
+          setDisplayName(displayName || name);
           setDashboardDetails(res.data);
           setCurrentVersion(version);
           setDashboardId(id);
@@ -352,14 +375,30 @@ const DashboardDetailsPage = () => {
             timestamp: 0,
           });
 
-          setDashboardUrl(dashboardUrl);
+          fetchServiceDetails(service.type, service.name)
-          fetchCharts(ChartIds)
+            .then((hostPort: string) => {
-            .then((chart) => setCharts(chart))
+              setDashboardUrl(hostPort + dashboardUrl);
-            .catch((error: AxiosError) => {
+              fetchCharts(ChartIds)
-              showErrorToast(
+                .then((chart) => {
-                error,
+                  const updatedCharts = (chart as ChartType[]).map(
-                jsonData['api-error-messages']['fetch-chart-error']
+                    (chartItem) => ({
-              );
+                      ...chartItem,
+                      chartUrl: hostPort + chartItem.chartUrl,
+                    })
+                  );
+                  setCharts(updatedCharts);
+                })
+                .catch((error: AxiosError) => {
+                  showErrorToast(
+                    error,
+                    jsonData['api-error-messages']['fetch-chart-error']
+                  );
+                });
+
+              setLoading(false);
+            })
+            .catch((err: AxiosError) => {
+              throw err;
             });
         } else {
           setIsError(true);
@@ -376,8 +415,6 @@ const DashboardDetailsPage = () => {
             jsonData['api-error-messages']['fetch-dashboard-details-error']
           );
         }
-      })
-      .finally(() => {
         setLoading(false);
       });
   };

openmetadata-ui/src/main/resources/ui/src/pages/PipelineDetails/PipelineDetailsPage.component.tsx

@@ -39,6 +39,7 @@ import {
   patchPipelineDetails,
   removeFollower,
 } from '../../axiosAPIs/pipelineAPI';
+import { getServiceByFQN } from '../../axiosAPIs/serviceAPI';
 import ErrorPlaceHolder from '../../components/common/error-with-placeholder/ErrorPlaceHolder';
 import { TitleBreadcrumbProps } from '../../components/common/title-breadcrumb/title-breadcrumb.interface';
 import {
@@ -248,6 +249,27 @@ const PipelineDetailsPage = () => {
       });
   };
 
+  const fetchServiceDetails = (type: string, fqn: string) => {
+    return new Promise<string>((resolve, reject) => {
+      getServiceByFQN(type + 's', fqn, ['owner'])
+        .then((resService: AxiosResponse) => {
+          if (resService?.data) {
+            const hostPort = resService.data.connection?.config?.hostPort || '';
+            resolve(hostPort);
+          } else {
+            throw null;
+          }
+        })
+        .catch((err: AxiosError) => {
+          showErrorToast(
+            err,
+            jsonData['api-error-messages']['fetch-pipeline-details-error']
+          );
+          reject(err);
+        });
+    });
+  };
+
   const fetchPipelineDetail = (pipelineFQN: string) => {
     setLoading(true);
     getPipelineByFqn(pipelineFQN, defaultFields)
@@ -264,11 +286,12 @@ const PipelineDetailsPage = () => {
             tags,
             owner,
             displayName,
+            name,
             tasks,
             pipelineUrl,
             version,
           } = res.data;
-          setDisplayName(displayName);
+          setDisplayName(displayName || name);
           setPipelineDetails(res.data);
           setCurrentVersion(version);
           setPipelineId(id);
@@ -305,8 +328,19 @@ const PipelineDetailsPage = () => {
             timestamp: 0,
           });
 
-          setPipelineUrl(pipelineUrl);
+          fetchServiceDetails(service.type, service.name)
-          setTasks(tasks);
+            .then((hostPort: string) => {
+              setPipelineUrl(hostPort + pipelineUrl);
+              const updatedTasks = (tasks as Task[]).map((task) => ({
+                ...task,
+                taskUrl: hostPort + task.taskUrl,
+              }));
+              setTasks(updatedTasks);
+              setLoading(false);
+            })
+            .catch((err: AxiosError) => {
+              throw err;
+            });
         } else {
           setIsError(true);
 
@@ -322,8 +356,8 @@ const PipelineDetailsPage = () => {
             jsonData['api-error-messages']['fetch-pipeline-details-error']
           );
         }
-      })
+        setLoading(false);
-      .finally(() => setLoading(false));
+      });
   };
 
   const fetchTabSpecificData = (tabField = '') => {