refactor: remove grafanaDataSourceId from AppMetrics and related components, introduce getDataSourceDetailsFromEnvironment function

Author: AbhishekA1509

src/components/app/details/appDetails/AppDetails.tsx

@@ -817,7 +817,6 @@ export const Details: React.FC<DetailsType> = ({
                     {environment && !isVirtualEnvRef.current && (
                         <AppMetrics
                             appName={appDetails.appName}
-                            grafanaDataSourceId={appDetails.grafanaDataSourceId}
                             addExtraSpace={!isExternalToolAvailable}
                             environment={environment}
                             podMap={aggregatedNodes.nodes.Pod}

src/components/app/details/appDetails/AppMetrics.tsx

@@ -51,15 +51,14 @@ import {
     ModuleNameMap,
     URLS,
 } from '../../../../config'
-import { isDatasourceConfigured, isDatasourceHealthy } from './appDetails.service'
+import { getDataSourceDetailsFromEnvironment, isDatasourceHealthy } from './appDetails.service'
 import { getHostURLConfiguration } from '../../../../services/service'
 import PrometheusErrorImage from '../../../../assets/img/ic-error-prometheus.png'
 import HostErrorImage from '../../../../assets/img/ic-error-hosturl.png'
 import { ReactComponent as DropDownIcon } from '../../../../assets/icons/appstatus/ic-chevron-down.svg'
 import { getModuleInfo } from '../../../v2/devtronStackManager/DevtronStackManager.service'
 import { ModuleStatus } from '../../../v2/devtronStackManager/DevtronStackManager.type'
 import { APP_METRICS_CALENDAR_INPUT_DATE_FORMAT } from './constants'
-import { AppDetails } from '@Components/app/types'
 
 export const AppMetrics: React.FC<
     {
@@ -68,10 +67,10 @@ export const AppMetrics: React.FC<
         podMap: Map<string, any>
         k8sVersion
         addExtraSpace: boolean
-    } & Pick<AppDetails, 'grafanaDataSourceId'>
-> = ({ appName, podMap, k8sVersion, addExtraSpace, environment, grafanaDataSourceId }) => {
+    }
+> = ({ appName, podMap, k8sVersion, addExtraSpace, environment }) => {
     const { appTheme } = useTheme()
-    const { appMetrics, infraMetrics } = environment
+    const { appMetrics, infraMetrics, environmentName } = environment
     const [calendar, setDateRange] = useState<{ startDate: Moment; endDate: Moment }>({
         startDate: moment().subtract(5, 'minute'),
         endDate: moment(),
@@ -150,17 +149,16 @@ export const AppMetrics: React.FC<
             const hostUrlRes = await getHostURLConfiguration()
             setHostURLConfig(hostUrlRes.result)
 
-            if (grafanaDataSourceId) {
-                const [datasourceConfiguredRes, datasourceHealthyRes] = await Promise.all([
-                    isDatasourceConfigured(grafanaDataSourceId),
-                    isDatasourceHealthy(grafanaDataSourceId),
-                ])
+            const { dataSourceName, dataSourceId } = await getDataSourceDetailsFromEnvironment(environmentName)
+
+            if (dataSourceId) {
+                const datasourceHealthyRes = await isDatasourceHealthy(dataSourceId)
 
                 setDatasource({
                     isLoading: false,
                     isConfigured: true,
                     isHealthy: datasourceHealthyRes?.status.toLowerCase() === 'success',
-                    dataSourceName: datasourceConfiguredRes?.name || '',
+                    dataSourceName,
                 })
             } else {
                 setDatasource({

src/components/app/details/appDetails/appDetails.service.ts

@@ -14,16 +14,30 @@
  * limitations under the License.
  */
 
-import { ResponseType, get, trash } from '@devtron-labs/devtron-fe-common-lib'
+import { ResponseType, get, getUrlWithSearchParams, trash } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../../../config'
 import { fetchWithFullRoute } from '../../../../services/fetchWithFullRoute'
-import { ClusterConnectionResponse, DeploymentStatusDetailsResponse, ModuleConfigResponse } from './appDetails.type'
+import {
+    ClusterConnectionResponse,
+    DataSourceDetailsDTO,
+    DeploymentStatusDetailsResponse,
+    ModuleConfigResponse,
+} from './appDetails.type'
 import { AppType } from '../../../v2/appDetails/appDetails.type'
 
-export function isDatasourceConfigured(grafanaDataSourceId: number) {
-    const root = window.__ORCHESTRATOR_ROOT__.replace('/orchestrator', '')
-    const URL = `${root}/grafana/api/datasources/${grafanaDataSourceId}`
-    return fetchWithFullRoute(URL, 'GET')
+export const getDataSourceDetailsFromEnvironment = async (envName: string): Promise<DataSourceDetailsDTO> => {
+    try {
+        const {
+            result: { dataSourceName, dataSourceId },
+        } = await get<DataSourceDetailsDTO>(getUrlWithSearchParams('/health', { envName }))
+
+        return { dataSourceName, dataSourceId }
+    } catch {
+        return {
+            dataSourceName: '',
+            dataSourceId: null,
+        }
+    }
 }
 
 export function isDatasourceHealthy(datasourceId: number | string) {

src/components/app/details/appDetails/appDetails.type.ts

@@ -132,6 +132,11 @@ export interface ModuleConfigResponse extends ResponseType {
     }
 }
 
+export interface DataSourceDetailsDTO {
+    dataSourceName: string
+    dataSourceId: number
+}
+
 export interface ClusterConnectionResponse extends ResponseType {
     result?: {
         clusterReachable: boolean

src/components/app/types.ts

@@ -131,7 +131,6 @@ export interface AppDetails extends CDModalProps {
     releaseMode: ReleaseMode
     trafficSwitched?: boolean
     pcoId?: number
-    grafanaDataSourceId?: number
 }
 
 export interface LabelTag {