81 lines
2.0 KiB
TypeScript
81 lines
2.0 KiB
TypeScript
import { Component } from '@angular/core';
|
|
import { HttpClient } from "@angular/common/http";
|
|
import { JoyrideService } from 'ngx-joyride';
|
|
import { ConfigService } from '@services/config.service';
|
|
|
|
@Component({
|
|
selector: 'app-status',
|
|
templateUrl: './status.component.html',
|
|
styleUrl: './status.component.css'
|
|
})
|
|
export class StatusComponent {
|
|
baseUrl: string;
|
|
diskUsage: any = {};
|
|
servicesStatus: any = {};
|
|
subnets: any[] = [];
|
|
diskUsageChartData: any[] = [];
|
|
loading: boolean = false;
|
|
|
|
view: [number, number] = [1100, 500];
|
|
|
|
gradient: boolean = true;
|
|
showLegend: boolean = true;
|
|
showLabels: boolean = true;
|
|
isDoughnut: boolean = true;
|
|
colorScheme: any = {
|
|
domain: ['#FF6384', '#3f51b5']
|
|
};
|
|
|
|
constructor(private http: HttpClient, private joyrideService: JoyrideService, private configService: ConfigService) {
|
|
this.baseUrl = this.configService.apiUrl;
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
this.loadStatus();
|
|
}
|
|
loadStatus(): void {
|
|
this.loading = true;
|
|
this.http.get<any>(`${this.baseUrl}/og-dhcp/status`).subscribe(data => {
|
|
this.diskUsage = data.message.disk_usage;
|
|
this.servicesStatus = data.message.services_status;
|
|
this.subnets = data.message.subnets;
|
|
|
|
this.diskUsageChartData = [
|
|
{
|
|
name: 'Usado',
|
|
value: parseFloat(this.diskUsage.used)
|
|
},
|
|
{
|
|
name: 'Disponible',
|
|
value: parseFloat(this.diskUsage.available)
|
|
}
|
|
];
|
|
this.loading = false;
|
|
}, error => {
|
|
this.loading = false;
|
|
console.error('Error fetching status', error);
|
|
});
|
|
}
|
|
|
|
getServices(): { name: string, status: string }[] {
|
|
return Object.keys(this.servicesStatus).map(key => ({
|
|
name: key,
|
|
status: this.servicesStatus[key]
|
|
}));
|
|
}
|
|
|
|
iniciarTour(): void {
|
|
this.joyrideService.startTour({
|
|
steps: [
|
|
'titleStep',
|
|
'diskUsageStep',
|
|
'servicesStatusStep',
|
|
'subnetsStep'
|
|
],
|
|
showPrevButton: true,
|
|
themeColor: '#3f51b5'
|
|
});
|
|
}
|
|
|
|
}
|