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

* Fix #4697: UI Create property URL dynamically

* Addressing comments
This commit is contained in:
darth-coder00 2022-06-17 17:58:34 +05:30 committed by GitHub
parent 1d6b7e8525
commit bf1d738f55
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 90 additions and 17 deletions

View File

@ -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"

View File

@ -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);
fetchCharts(ChartIds)
.then((chart) => setCharts(chart))
.catch((error: AxiosError) => {
showErrorToast(
error,
jsonData['api-error-messages']['fetch-chart-error']
);
fetchServiceDetails(service.type, service.name)
.then((hostPort: string) => {
setDashboardUrl(hostPort + dashboardUrl);
fetchCharts(ChartIds)
.then((chart) => {
const updatedCharts = (chart as ChartType[]).map(
(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);
});
};

View File

@ -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);
setTasks(tasks);
fetchServiceDetails(service.type, service.name)
.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']
);
}
})
.finally(() => setLoading(false));
setLoading(false);
});
};
const fetchTabSpecificData = (tabField = '') => {