amélioration de la page d'infos

src/app/components/home/workspace/infos/infos.component.css

@@ -18,7 +18,7 @@
 	margin-bottom: 0.5rem;
 	width: 85%;
 }
- 
+
 .info-title {
 	width: 100%;
 }
@@ -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;
+}

src/app/components/home/workspace/infos/infos.component.html

@@ -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>
+	<mat-card class="control-card">
-		<div fxLayout="row" style="width:100%;">
+		<mat-card-header>
-			<span fxFlexOffset="5" fxFlex="30"><b>Opérateur:</b></span>
+			<mat-card-title-group class="info-title">
-			<span>{{infos.operator}}</span>
+				<mat-card-title>Contrôle</mat-card-title>
-		</div>
+			</mat-card-title-group>
-		<div fxLayout="row" style="width:100%;">
+		</mat-card-header>
-			<span fxFlexOffset="5" fxFlex="30"><b>Provider:</b></span>
+		<mat-card-content class="info-content">
-			<span>{{infos.provider}}</span>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-		</div>
+				<span fxFlex="40"><b>Opérateur:</b></span>
-		<div fxLayout="row" fxLayoutAlign="none center" style="width:100%;">
+				<span>{{infos.operator}}</span>
-			<span fxFlexOffset="5" fxFlex="30"><b>Signal:</b></span>
+			</div>
-			<mat-slider fxFlex="50" min="-109" max="-53" step="2" value="info.signal_dbm"></mat-slider>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-			<span> ({{infos.signal_qos}})</span>
+				<span fxFlex="40"><b>Provider:</b></span>
-		</div>
+				<span>{{infos.provider}}</span>
-		<div fxLayout="row" style="width:100%;">
+			</div>
-			<span fxFlexOffset="5" fxFlex="30"><b>carte SIM:</b></span>
+			<div fxLayout="row" fxLayoutAlign="none center" style="width:100%; margin-bottom: 0.25rem;">
-			<div *ngIf="infos.sim_inserted"><mat-icon style="color: green;">check_circle</mat-icon></div>
+				<span fxFlex="40"><b>Signal:</b></span>
-			<div *ngIf="!infos.sim_inserted"><mat-icon style="color: red;">cancel</mat-icon></div>
+				<span>{{infos.signal_dbm}}dbm</span>
-		</div>
+				<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>

src/app/components/home/workspace/infos/infos.component.ts

@@ -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);
+				}
+			}
+		)
+	}
 }

src/app/services/backend/backend.service.ts

@@ -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);
+	}
 }