added toastr service in metrics page (6ebd6c8b) · Commits · OSL / code / org.etsi.osl.tmf.web

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

+49 −23

Original line number	Diff line number	Diff line
		@@ -15,6 +15,8 @@ import { ResourcesGroupByStateItem, ServiceOrdersGroupByDayItem, ServicesGroupB
		import { asyncScheduler, forkJoin, scheduled } from 'rxjs';
		import { catchError } from 'rxjs/internal/operators/catchError';
		import * as moment from 'moment';
		import { ToastrService } from 'ngx-toastr';


		@Component({
		selector: 'app-landing',
		@@ -30,9 +32,11 @@ export class MetricsComponent implements OnInit {
		private serviceMetricsService: ServiceMetricsApiService,
		private resourceMetricsService: ResourceMetricsApiService,
		private serviceOrderMetricsService: ServiceOrderMetricsApiService,
		private nfvMetricsService: NfvMetricsApiService
		private nfvMetricsService: NfvMetricsApiService,
		private toast: ToastrService
		) { }

		apiError: boolean = false;
		isLoading: boolean = true;
		config: IAppConfig
		loggedIn: boolean
		@@ -168,85 +172,99 @@ export class MetricsComponent implements OnInit {
		forkJoin({
		registeredMANO: this.nfvMetricsService.getRegisteredManoProviders().pipe(
		catchError(error => {
		console.error('Failed to load registered MANO providers', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ registeredManoProviders: NaN }], asyncScheduler);
		})
		),
		registeredNSDs: this.nfvMetricsService.getRegisteredNsds().pipe(
		catchError(error => {
		console.error('Failed to load registered NSDs', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ registeredNSDs: NaN }], asyncScheduler);
		})
		),
		registeredVNFs: this.nfvMetricsService.getRegisteredVnfs().pipe(
		catchError(error => {
		console.error('Failed to load registered VNFs', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ registeredVNFs: NaN }], asyncScheduler);
		})
		),
		registeredUsers: this.generalMetricsService.getRegisteredIndividuals().pipe(
		catchError(error => {
		console.error('Failed to load registered users', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ registeredIndividuals: NaN }], asyncScheduler);
		})
		),
		publishedServiceSpecs: this.generalMetricsService.getPublishedServiceSpecifications().pipe(
		catchError(error => {
		console.error('Failed to load published specs', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ publishedServiceSpecifications: NaN }], asyncScheduler);
		})
		),
		registeredResourceSpecs: this.generalMetricsService.getRegisteredResourceSpecifications().pipe(
		catchError(error => {
		console.error('Failed to load resource specs', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ registeredResourceSpecifications: NaN }], asyncScheduler);
		})
		),
		totalCreatedServices: this.serviceMetricsService.getTotalServices().pipe(
		catchError(error => {
		console.error('Failed to load total services', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ totalServices: NaN }], asyncScheduler);
		})
		),
		activeServices: this.serviceMetricsService.getTotalServices({ state: 'ACTIVE' }).pipe(
		catchError(error => {
		console.error('Failed to load active services', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ totalServices: NaN }], asyncScheduler);
		})
		),
		totalResources: this.resourceMetricsService.getTotalResources().pipe(
		catchError(error => {
		console.error('Failed to load total resources', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ totalResources: NaN }], asyncScheduler);
		})
		),
		availableResources: this.resourceMetricsService.getTotalResources({ state: 'AVAILABLE' }).pipe(
		catchError(error => {
		console.error('Failed to load available resources', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ totalResources: NaN }], asyncScheduler);
		})
		),
		activeServiceOrders: this.serviceOrderMetricsService.getTotalActiveServiceOrders().pipe(
		catchError(error => {
		console.error('Failed to load active service orders', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ activeServiceOrders: NaN }], asyncScheduler);
		})
		),
		totalCompletedOrders: this.serviceOrderMetricsService.getTotalServiceOrders({ state: 'COMPLETED' }).pipe(
		catchError(error => {
		console.error('Failed to load completed service orders', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ totalServiceOrders: NaN }], asyncScheduler);
		})
		),
		serviceOrdersTotal15days: this.serviceOrderMetricsService.getServiceOrdersGroupedByDay({ starttime, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load service orders by day', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ serviceOrders:{ total: this.serviceOrdersTotal15days } }], asyncScheduler);
		})
		),
		serviceOrdersGroupedByDay: this.serviceOrderMetricsService.getServiceOrdersGroupedByDay({ starttime, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load service orders by day', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		const mockGroupByDay = this.barChartLabels.map(label => {
		const [day, month] = label.split('/').map(Number);
		const isoDate = new Date(Date.UTC(new Date().getFullYear(), month - 1, day)).toISOString();
		@@ -266,13 +284,15 @@ export class MetricsComponent implements OnInit {
		),
		serviceOrdersTotalMonth: this.serviceOrderMetricsService.getServiceOrdersGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load service orders by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ serviceOrders:{ total: this.serviceOrdersTotalMonth } }], asyncScheduler);
		})
		),
		serviceOrdersGroupedByState: this.serviceOrderMetricsService.getServiceOrdersGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load service orders by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{
		serviceOrders: {
		aggregations: {
		@@ -287,13 +307,15 @@ export class MetricsComponent implements OnInit {
		),
		resourcesTotalMonth: this.resourceMetricsService.getResourcesGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load resources by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ resources:{ total: this.resourcesTotalMonth } }], asyncScheduler);
		})
		),
		resourcesGroupedByState: this.resourceMetricsService.getResourcesGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load resources by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{
		resources: {
		aggregations: {
		@@ -308,13 +330,15 @@ export class MetricsComponent implements OnInit {
		),
		servicesTotalMonth: this.serviceMetricsService.getServicesGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load services by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{ services:{ total: this.servicesTotalMonth } }], asyncScheduler);
		})
		),
		servicesGroupedByState: this.serviceMetricsService.getServicesGroupedByState({ starttime: starttimeMonth, endtime }).pipe(
		catchError(error => {
		console.error('Failed to load services by state', error);
		this.apiError = true;
		this.toast.error('API services are not responding. Please verify service health.');
		return scheduled([{
		services: {
		aggregations: {
		@@ -344,8 +368,6 @@ export class MetricsComponent implements OnInit {
		this.resourcesTotalMonth = results.resourcesTotalMonth.resources.total;


		console.log(this.serviceOrdersTotal15days);

		this.serviceOrdersByDay = results.serviceOrdersGroupedByDay.serviceOrders.aggregations.groupByDay;
		this.barchartData.labels = this.serviceOrdersByDay.map(data =>
		new Date(data.key).toLocaleDateString('en-GB', { day: 'numeric', month: 'numeric' })
		@@ -367,6 +389,10 @@ export class MetricsComponent implements OnInit {
		.filter(item => chartLabelsServices.includes(item.key));
		this.servicesData.datasets[0].data = this.servicesByState.map(data => data.count);
		this.isLoading = false;

		if(!this.apiError) {
		this.toast.success("All data loaded successfully");
		}
		});
		}