Portal dashboard fails requesting information

src/app/app.module.ts

@@ -45,6 +45,7 @@ import { DashboardComponent } from './dashboard/dashboard.component';
 import { UsersComponent } from './users/users.component';
 
 import { AuthenticationModule } from './authentication/authentication.module';
+import { DashboardModule } from './dashboard/dashboard.module';
 import { ValidationAndVerificationModule } from './validation-and-verification/validation-and-verification.module';
 import { ServicePlatformModule } from './service-platform/service-platform.module';
 import { ServiceManagementModule } from './service-management/service-management.module';
@@ -56,24 +57,25 @@ import { PageNotFoundComponent } from './page-not-found/page-not-found.component
 import { SdkModule } from './sdk/sdk.module';
 
 @NgModule({
-	declarations: [ AppComponent, MenuComponent, IndexComponent, DashboardComponent, UsersComponent, PageNotFoundComponent ],
+	declarations: [ AppComponent, MenuComponent, IndexComponent, UsersComponent, PageNotFoundComponent ],
 	imports: [
 		BrowserAnimationsModule,
 		AppRoutingModule,
 		FormsModule,
 		ReactiveFormsModule,
 		AngularMaterialModule,
 		HttpClientModule,
+		DashboardModule,
 		ValidationAndVerificationModule,
 		ServiceManagementModule,
 		ServicePlatformModule,
 		PlatformsModule,
 		SettingsModule,
 		SharedModule,
 		AuthenticationModule,
-		SdkModule
+		SdkModule,
 	],
-	providers: [{ provide: LOCALE_ID, useValue: 'en' }],
-	bootstrap: [AppComponent]
+	providers: [ { provide: LOCALE_ID, useValue: 'en' } ],
+	bootstrap: [ AppComponent ]
 })
 export class AppModule { }

src/app/dashboard/dashboard.component.html

@@ -6,16 +6,16 @@ <h3 class="title3" i18n="@@platformMetrics">Platform metrics</h3>
 
 			<div class="same-row">
 				<div class="same-column">
-					<iframe class="platform-disk-usage" frameborder="0" [src]="getSPGraphUrl(8)"></iframe>
+					<iframe class="platform-disk-usage" frameborder="0" [src]="getGraphUrl(8)"></iframe>
 					<div class="same-row">
-						<iframe class="platform-cpu-usage" frameborder="0" [src]="getSPGraphUrl(2)"></iframe>
-						<iframe class="platform-memory-usage" frameborder="0" [src]="getSPGraphUrl(3)"></iframe>
+						<iframe class="platform-cpu-usage" frameborder="0" [src]="getGraphUrl(2)"></iframe>
+						<iframe class="platform-memory-usage" frameborder="0" [src]="getGraphUrl(3)"></iframe>
 					</div>
 				</div>
 
 				<div class="same-column platform-gauge-graphs">
-					<iframe class="medium-gauge-graph cpu-usage" frameborder="0" [src]="getSPGraphUrl(17)"></iframe>
-					<iframe class="medium-gauge-graph memory-usage" frameborder="0" [src]="getSPGraphUrl(20)"></iframe>
+					<iframe class="medium-gauge-graph cpu-usage" frameborder="0" [src]="getGraphUrl(17)"></iframe>
+					<iframe class="medium-gauge-graph memory-usage" frameborder="0" [src]="getGraphUrl(20)"></iframe>
 				</div>
 			</div>
 		</div>
@@ -81,7 +81,7 @@ <h3 class="title3" i18n="@@runningInstances">Running instances</h3>
 		<div class="same-column dashboard-service-alerts">
 			<h3 class="title3" i18n="@@serviceAlerts">Service alerts</h3>
 
-			<iframe class="small-gauge-graph policy-alerts" frameborder="0" [src]="getSPGraphUrl(26)"></iframe>
+			<iframe class="small-gauge-graph policy-alerts" frameborder="0" [src]="getGraphUrl(26)"></iframe>
 			<div class="text-box small">
 				<span class="title" i18n="@@policyAlerts">Policy alerts</span>
 				<span class="number">{{ dashboardData['policyAlerts'] }}</span>
@@ -91,9 +91,9 @@ <h3 class="title3" i18n="@@serviceAlerts">Service alerts</h3>
 		<div class="same-column dashboard-licenses">
 			<h3 class="title3" i18n="@@licenses">Licenses</h3>
 
-			<iframe class="small-gauge-graph" frameborder="0" [src]="getSPGraphUrl(23)"></iframe>
-			<iframe class="small-gauge-graph" frameborder="0" [src]="getSPGraphUrl(24)"></iframe>
-			<iframe class="small-gauge-graph" frameborder="0" [src]="getSPGraphUrl(25)"></iframe>
+			<iframe class="small-gauge-graph" frameborder="0" [src]="getGraphUrl(23)"></iframe>
+			<iframe class="small-gauge-graph" frameborder="0" [src]="getGraphUrl(24)"></iframe>
+			<iframe class="small-gauge-graph" frameborder="0" [src]="getGraphUrl(25)"></iframe>
 		</div>
 	</div>
 </div>
@@ -106,16 +106,16 @@ <h3 class="title3" i18n="@@platformMetrics">Platform metrics</h3>
 
 			<div class="same-row">
 				<div class="same-column">
-					<iframe class="platform-disk-usage" frameborder="0" [src]="getVNVGraphUrl(8)"></iframe>
+					<iframe class="platform-disk-usage" frameborder="0" [src]="getGraphUrl(8)"></iframe>
 					<div class="same-row">
-						<iframe class="platform-cpu-usage" frameborder="0" [src]="getVNVGraphUrl(2)"></iframe>
-						<iframe class="platform-memory-usage" frameborder="0" [src]="getVNVGraphUrl(3)"></iframe>
+						<iframe class="platform-cpu-usage" frameborder="0" [src]="getGraphUrl(2)"></iframe>
+						<iframe class="platform-memory-usage" frameborder="0" [src]="getGraphUrl(3)"></iframe>
 					</div>
 				</div>
 
 				<div class="same-column platform-gauge-graphs">
-					<iframe class="medium-gauge-graph cpu-usage" frameborder="0" [src]="getVNVGraphUrl(17)"></iframe>
-					<iframe class="medium-gauge-graph memory-usage" frameborder="0" [src]="getVNVGraphUrl(20)"></iframe>
+					<iframe class="medium-gauge-graph cpu-usage" frameborder="0" [src]="getGraphUrl(17)"></iframe>
+					<iframe class="medium-gauge-graph memory-usage" frameborder="0" [src]="getGraphUrl(20)"></iframe>
 				</div>
 			</div>
 		</div>

src/app/dashboard/dashboard.component.ts

@@ -3,6 +3,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 
 import { ConfigService } from '../shared/services/config/config.service';
 import { CommonService } from '../shared/services/common/common.service';
+import { DashboardService } from './dashboard.service';
 
 @Component({
 	selector: 'app-dashboard',
@@ -15,37 +16,35 @@ export class DashboardComponent implements OnInit {
 	dashboardData = { };
 	uptime: string;
 	environment: string;
+	vimData: object;
+	metricName = 'vm_mem_perc';
 
 	constructor(
 		private sanitizer: DomSanitizer,
 		private config: ConfigService,
 		private commonService: CommonService,
-		private configService: ConfigService) { }
+		private configService: ConfigService,
+		private dashboardService: DashboardService,
+	) { }
 
 	ngOnInit() {
 		this.environment = this.configService.environment;
+		this.requestVimUUID();
 
 		this.environment === 'SP' ?
 			this.getSPDashboardData()
 			: this.getVNVDashboardData();
 	}
 
-	getSPGraphUrl(panelId) {
-		return this.sanitizer.bypassSecurityTrustResourceUrl(`${ this.config.baseSP }${ this.config.graphs }/d-solo/sp_dash/sp?orgId=1&` +
-			`panelId=${ panelId }&` +
-			`var-id=341f4d56-8e66-cfae-6fb3-1143fff11091&` +
-			`var-entity=vm&` +
-			`var-env=pre-int-sp%3A341f4d56-8e66-cfae-6fb3-1143fff11091&` +
-			`theme=light&` +
-			`refresh=${ this.refreshRateGraphs }`);
+	async requestVimUUID() {
+		this.vimData = await this.dashboardService.getVimUuid(this.metricName);
 	}
-
-	getVNVGraphUrl(panelId) {
-		return this.sanitizer.bypassSecurityTrustResourceUrl(`${ this.config.baseVNV }${ this.config.graphs }/d-solo/sp_dash/sp?orgId=1&` +
+	getGraphUrl(panelId) {
+		return this.sanitizer.bypassSecurityTrustResourceUrl(`${ this.config.base }${ this.config.graphs }/d-solo/sp_dash/sp?orgId=1&` +
 			`panelId=${ panelId }&` +
-			`var-id=4fd837f6-5f49-11dc-a9ed-000ea629289b&` +
+			`var-id=${ this.vimData[ 'vimUUID' ] }&` +
 			`var-entity=vm&` +
-			`var-env=pre-int-vnv-bcn.5gtango.eu%3A4fd837f6-5f49-11dc-a9ed-000ea629289b&` +
+			`var-env=${ this.vimData[ 'vimEnv' ] }&` +
 			`theme=light&` +
 			`refresh=${ this.refreshRateGraphs }`);
 	}

src/app/dashboard/dashboard.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AppRoutingModule } from '../app-routing.module';
+
+import { DashboardComponent } from './dashboard.component';
+
+import { DashboardService } from './dashboard.service';
+
+@NgModule({
+	declarations: [
+		DashboardComponent
+	],
+	imports: [
+		CommonModule,
+		AppRoutingModule,
+	],
+	providers: [ DashboardService ]
+})
+export class DashboardModule { }

src/app/dashboard/dashboard.service.ts

@@ -0,0 +1,47 @@
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders } from '@angular/common/http';
+
+import { ConfigService } from '../shared/services/config/config.service';
+import { AuthService } from '../authentication/auth.service';
+
+@Injectable()
+export class DashboardService {
+	authHeaders: HttpHeaders;
+
+	constructor(
+		private authService: AuthService,
+		private config: ConfigService,
+		private http: HttpClient
+	) { }
+
+	/**
+	 * Retrieves the VIM UUID required to build the graphs URL
+	 *
+	 * @param metric One metric name to get the VIM UUID from Prometheus metrics information
+	 *
+	 */
+	async getVimUuid(metric) {
+		const headers = this.authService.getAuthHeaders();
+		const url = this.config.base + this.config.monitoringMetricsByName + metric;
+
+		try {
+			const response = await this.http.get(url, { headers: headers }).toPromise();
+			if (response[ 'metrics' ][ 'result' ] instanceof Array) {
+				const resultingMetric = response[ 'metrics' ][ 'result' ].find(item => {
+					const location = item.metric.exported_instance.split(':')[ 0 ];
+					const metricName = item.metric.__name__;
+					if (this.config.base.includes(location) && metricName === metric) {
+						return item;
+					}
+				})[ 'metric' ];
+				return resultingMetric ?
+					{ vimUUID: resultingMetric[ 'resource_id' ], vimEnv: resultingMetric[ 'exported_instance' ] }
+					: { };
+			} else {
+				return { };
+			}
+		} catch (error) {
+			console.error(error);
+		}
+	}
+}

src/app/shared/services/config/config.service.ts

@@ -54,6 +54,7 @@ export class ConfigService extends Config {
 	platformSettings = 'settings/platforms';
 	graphs = 'monitoring/graphs';
 	monitoringData = 'monitoring/data/services';
+	monitoringMetricsByName = 'monitoring/data/prometheus/metrics/name/';
 	monitoringTargets = 'monitoring/data/prometheus/targets';
 	analyticsResult = 'analytics/results/';
 	analyticResult = 'analytic/results';