vincent/Kine-frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

amélioration de la page d'infos

Browse Source
This commit is contained in:
Vincent BENOIT
2022-11-28 11:37:22 +01:00
parent 50369f0373
commit 5a3b0df27d
4 changed files with 112 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/app/components/home/workspace/infos/infos.component.css
View File

@@ -33,3 +33,14 @@
width: 85%;
}
.control-card {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
width: 85%;
}
button {
/*display: block;*/
width: 89%;
margin-top: 1.5rem;
}

60
src/app/components/home/workspace/infos/infos.component.html
View File

@@ -6,6 +6,15 @@
<div *ngIf="!isProcessing" class="container"
fxLayout="column"
fxLayoutAlign="space-around center">
<mat-card class="info-card">
<mat-card-content class="info-content">
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="50" style="display: grid; align-items: center;"><b>Processus InterCOM:</b></span>
<div *ngIf="isAlive" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>
<div *ngIf="!isAlive" style="display: grid; align-items: center;"><mat-icon style="color: red;">cancel</mat-icon></div>
</div>
</mat-card-content>
</mat-card>
<mat-card class="sys-card">
<mat-card-header>
<mat-card-title-group class="info-title">
@@ -41,7 +50,7 @@
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="50"><b>Mémoire utilisée:</b></span>
<span>{{infos.system.used_mem}} Mo</span>
<span style="margin-left: 5px; color:{{mem_color}}"><b>({{infos.system.percent_used_mem}}%)</b></span>
<span style="margin-left: 5px; color:{{mem_color}}">(<b>{{infos.system.percent_used_mem}}%</b>)</span>
</div>
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="50"><b>Disque total:</b></span>
@@ -54,7 +63,7 @@
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="50"><b>Disque utilisé:</b></span>
<span>{{infos.system.used_disk}} Mo</span>
<span style="margin-left: 5px; color:{{disk_color}}"><b>({{infos.system.percent_used_disk}}%)</b></span>
<span style="margin-left: 5px; color:{{disk_color}}">(<b>{{infos.system.percent_used_disk}}%</b>)</span>
</div>
</mat-card-content>
</mat-card>
@@ -84,23 +93,32 @@
</div>
</mat-card-content>
</mat-card>
<h3 style="margin-left: 2rem;">Contrôle</h3>
<div fxLayout="row" style="width:100%;">
<span fxFlexOffset="5" fxFlex="30"><b>Opérateur:</b></span>
<span>{{infos.operator}}</span>
</div>
<div fxLayout="row" style="width:100%;">
<span fxFlexOffset="5" fxFlex="30"><b>Provider:</b></span>
<span>{{infos.provider}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="none center" style="width:100%;">
<span fxFlexOffset="5" fxFlex="30"><b>Signal:</b></span>
<mat-slider fxFlex="50" min="-109" max="-53" step="2" value="info.signal_dbm"></mat-slider>
<span> ({{infos.signal_qos}})</span>
</div>
<div fxLayout="row" style="width:100%;">
<span fxFlexOffset="5" fxFlex="30"><b>carte SIM:</b></span>
<div *ngIf="infos.sim_inserted"><mat-icon style="color: green;">check_circle</mat-icon></div>
<div *ngIf="!infos.sim_inserted"><mat-icon style="color: red;">cancel</mat-icon></div>
</div>
<mat-card class="control-card">
<mat-card-header>
<mat-card-title-group class="info-title">
<mat-card-title>Contrôle</mat-card-title>
</mat-card-title-group>
</mat-card-header>
<mat-card-content class="info-content">
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="40"><b>Opérateur:</b></span>
<span>{{infos.operator}}</span>
</div>
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="40"><b>Provider:</b></span>
<span>{{infos.provider}}</span>
</div>
<div fxLayout="row" fxLayoutAlign="none center" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="40"><b>Signal:</b></span>
<span>{{infos.signal_dbm}}dbm</span>
<span style="margin-left: 5px; color:{{qos_color}}">(<b>{{infos.signal_qos}}</b>)</span>
</div>
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="40" style="display: grid; align-items: center;"><b>carte SIM:</b></span>
<div *ngIf="infos.sim_inserted" style="display: grid; align-items: center;"><mat-icon style="color: green;">check_circle</mat-icon></div>
<div *ngIf="!infos.sim_inserted" style="display: grid; align-items: center;"><mat-icon style="color: red;">cancel</mat-icon></div>
</div>
</mat-card-content>
</mat-card>
<button mat-raised-button color="warn" (click)="onReboot()">Redémarrer le système</button>
</div>

39
src/app/components/home/workspace/infos/infos.component.ts
View File

@@ -14,13 +14,26 @@ export class InfosComponent implements OnInit {
cpu_color:string = "green";
mem_color:string = "green";
disk_color:string = "green";
qos_color:string = "green";
isProcessing:boolean = true;
isAlive:boolean = false;
constructor( private bs:BackendService,
private router:Router,
private toast:ToastrService ) { }
ngOnInit(): void {
this.bs.processAlive().subscribe(
data => {
console.log("data:", data);
}, err => {
if(err.status == 401) {
this.router.navigateByUrl("/login");
} else {
this.toast.error(err.error.description);
}
}
)
this.bs.retreiveInfos().subscribe(
(data:Info) => {
this.infos = data;
@@ -29,16 +42,28 @@ export class InfosComponent implements OnInit {
} else if(data.system.percent_used_mem > 80) {
this.mem_color = "red";
} else {}
if(data.system.cpu_usage >= 70) {
this.cpu_color = "orange";
} else if(data.system.cpu_usage > 80) {
this.cpu_color = "red";
} else {}
if(data.system.percent_used_disk >= 50) {
this.disk_color = "orange";
} else if(data.system.percent_used_disk > 80) {
this.disk_color = "red";
} else {}
if(data.signal_qos == "Marginal") {
this.qos_color = "red";
} else if(data.signal_qos == "OK") {
this.qos_color = "orange";
} else if(data.signal_qos == "Good") {
this.qos_color = "blue";
} else if(data.signal_qos == "Excellent") {
this.qos_color = "green";
} else {}
this.isProcessing = false;
}, err => {
if(err.status == 401) {
@@ -50,4 +75,18 @@ export class InfosComponent implements OnInit {
);
}
onReboot():void {
this.bs.rebootSys().subscribe(
data => {
this.toast.info("Redémarrage du système en cours ...");
this.router.navigateByUrl("/login");
}, err => {
if(err.status == 401) {
this.router.navigateByUrl("/login");
} else {
this.toast.error(err.error.description);
}
}
)
}
}

22
src/app/services/backend/backend.service.ts
View File

@@ -150,4 +150,26 @@ export class BackendService {
};
return this.http.get<Info>(host+"/api/configurateur/infos", options);
}
processAlive():Observable<any> {
let host=environment.host;
const options = {
headers: new HttpHeaders({
'Content-Type' : 'application/json',
}),
withCredentials: true
};
return this.http.get<any>(host+"/api/configurateur/alive", options);
}
rebootSys():Observable<any> {
let host=environment.host;
const options = {
headers: new HttpHeaders({
'Content-Type' : 'application/json',
}),
withCredentials: true
};
return this.http.post<any>(host+"/api/configurateur/reboot", {}, options);
}
}