fixed skeleton to metrics page analytics (8e4af021) · Commits · OSL / code / org.etsi.osl.tmf.web

src/app/landing/metrics/doughnutchart/doughnutchart.component.scss

+5 −5

Original line number	Diff line number	Diff line
		@@ -18,11 +18,11 @@

		.pie-chart {
		// height: calc(20vh - 10px);
		// width: calc(20vh - 10px);
		// max-height: 170px;
		// max-width: 170px;
		min-height: 150px;
		min-width: 150px;
		width: calc(20vh - 20px);
		max-height: 170px;
		max-width: 170px;
		min-height: 80px;
		min-width: 80px;
		}

		.chart-info {

src/app/landing/metrics/metrics.component.ts

+12 −12

Original line number	Diff line number	Diff line
		@@ -169,73 +169,73 @@ export class MetricsComponent implements OnInit {
		registeredMANO: this.nfvMetricsService.getRegisteredManoProviders().pipe(
		catchError(error => {
		console.error('Failed to load registered MANO providers', error);
		return scheduled([{ registeredManoProviders: this.registeredMANO }], asyncScheduler);
		return scheduled([{ registeredManoProviders: NaN }], asyncScheduler);
		})
		),
		registeredNSDs: this.nfvMetricsService.getRegisteredNsds().pipe(
		catchError(error => {
		console.error('Failed to load registered NSDs', error);
		return scheduled([{ registeredNSDs: this.registeredNSDs }], asyncScheduler);
		return scheduled([{ registeredNSDs: NaN }], asyncScheduler);
		})
		),
		registeredVNFs: this.nfvMetricsService.getRegisteredVnfs().pipe(
		catchError(error => {
		console.error('Failed to load registered VNFs', error);
		return scheduled([{ registeredVNFs: this.registeredVNFs }], asyncScheduler);
		return scheduled([{ registeredVNFs: NaN }], asyncScheduler);
		})
		),
		registeredUsers: this.generalMetricsService.getRegisteredIndividuals().pipe(
		catchError(error => {
		console.error('Failed to load registered users', error);
		return scheduled([{ registeredIndividuals: this.registeredUsers }], asyncScheduler);
		return scheduled([{ registeredIndividuals: NaN }], asyncScheduler);
		})
		),
		publishedServiceSpecs: this.generalMetricsService.getPublishedServiceSpecifications().pipe(
		catchError(error => {
		console.error('Failed to load published specs', error);
		return scheduled([{ publishedServiceSpecifications: this.publishedServiceSpecs }], asyncScheduler);
		return scheduled([{ publishedServiceSpecifications: NaN }], asyncScheduler);
		})
		),
		registeredResourceSpecs: this.generalMetricsService.getRegisteredResourceSpecifications().pipe(
		catchError(error => {
		console.error('Failed to load resource specs', error);
		return scheduled([{ registeredResourceSpecifications: this.registeredResourceSpecs }], asyncScheduler);
		return scheduled([{ registeredResourceSpecifications: NaN }], asyncScheduler);
		})
		),
		totalCreatedServices: this.serviceMetricsService.getTotalServices().pipe(
		catchError(error => {
		console.error('Failed to load total services', error);
		return scheduled([{ totalServices: this.totalCreatedServices }], asyncScheduler);
		return scheduled([{ totalServices: NaN }], asyncScheduler);
		})
		),
		activeServices: this.serviceMetricsService.getTotalServices({ state: 'ACTIVE' }).pipe(
		catchError(error => {
		console.error('Failed to load active services', error);
		return scheduled([{ totalServices: this.activeServices }], asyncScheduler);
		return scheduled([{ totalServices: NaN }], asyncScheduler);
		})
		),
		totalResources: this.resourceMetricsService.getTotalResources().pipe(
		catchError(error => {
		console.error('Failed to load total resources', error);
		return scheduled([{ totalResources: this.totalResources }], asyncScheduler);
		return scheduled([{ totalResources: NaN }], asyncScheduler);
		})
		),
		availableResources: this.resourceMetricsService.getTotalResources({ state: 'AVAILABLE' }).pipe(
		catchError(error => {
		console.error('Failed to load available resources', error);
		return scheduled([{ totalResources: this.availableResources }], asyncScheduler);
		return scheduled([{ totalResources: NaN }], asyncScheduler);
		})
		),
		activeServiceOrders: this.serviceOrderMetricsService.getTotalActiveServiceOrders().pipe(
		catchError(error => {
		console.error('Failed to load active service orders', error);
		return scheduled([{ activeServiceOrders: this.activeServiceOrders }], asyncScheduler);
		return scheduled([{ activeServiceOrders: NaN }], asyncScheduler);
		})
		),
		totalCompletedOrders: this.serviceOrderMetricsService.getTotalServiceOrders({ state: 'COMPLETED' }).pipe(
		catchError(error => {
		console.error('Failed to load completed service orders', error);
		return scheduled([{ totalServiceOrders: this.totalCompletedOrders }], asyncScheduler);
		return scheduled([{ totalServiceOrders: NaN }], asyncScheduler);
		})
		),
		serviceOrdersTotal15days: this.serviceOrderMetricsService.getServiceOrdersGroupedByDay({ starttime, endtime }).pipe(

src/app/landing/metrics/statuscard/statuscard.component.html

+11 −9

Original line number	Diff line number	Diff line
		@@ -21,10 +21,8 @@
		</div>
		</div>
		<div class="card-main">
		<div *ngIf="isLoading" style="width: 50%; height: 50%">
		<skeleton [height]="'100%'" [width]="'100%'"></skeleton>
		</div>
		<div class="card-stats" *ngIf="!isLoading">

		<div class="card-stats">
		<div class="status-icon">
		<svg *ngIf="statusIcon==='users'" xmlns="http://www.w3.org/2000/svg" width="2rem" height="2rem" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
		<path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
		@@ -49,13 +47,17 @@
		<path d="M5 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 5 8m0-2.5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m0 5a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-1-5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0M4 8a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0m0 2.5a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0"/>
		</svg>
		</div>
		<h6 class="card-title" style="font-weight: 700" >{{statusStats}}</h6>

		<h6 class="card-title">
		<div *ngIf="isNaN(statusStats) \|\| isLoading; else apiResponded">
		<skeleton [width]="'48px'" [height]="'26px'"></skeleton>
		</div>
		<div *ngIf="isLoading" style="height: 25%; width: 100%">
		<skeleton [height]="'100%'" [width]="'100%'"></skeleton>
		<ng-template #apiResponded>
		<div class="status-stats">{{statusStats}}</div>
		</ng-template>
		</h6>

		</div>
		<p *ngIf="!isLoading" class="card-text">{{statusTitle}}</p>
		<p class="card-text">{{statusTitle}}</p>
		</div>

		</div>

src/app/landing/metrics/statuscard/statuscard.component.scss

+4 −0

Original line number	Diff line number	Diff line
		@@ -50,6 +50,10 @@
		font-size: 0.9rem;
		}

		.status-stats {
		font-weight: 700;
		}

		.portal-button {
		color: #0078AE;
		}

src/app/landing/metrics/statuscard/statuscard.component.ts

+4 −0

Original line number	Diff line number	Diff line
		@@ -20,4 +20,8 @@ export class StatusCardComponent implements OnInit {

		}

		isNaN(value: any): boolean {
		return isNaN(value);
		}

		}
		No newline at end of file