amélioration de la page infos pour l'affichage des informations systèmes

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

@@ -6,32 +6,6 @@
 <div *ngIf="!isProcessing" class="container"
 	fxLayout="column"
 	fxLayoutAlign="space-around center">
-	<mat-card class="info-card">
-		<mat-card-header>
-			<mat-card-title-group class="info-title">
-				<mat-card-title>Module GSM</mat-card-title>
-				<img mat-card-sm-image src="/assets/img/GNSS_GSM_GPS_rpi.png">
-			</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="30"><b>Fabricant:</b></span>
-				<span>{{infos.manufacturer.identification}}</span>
-			</div>
-			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>Modèle:</b></span>
-				<span>{{infos.manufacturer.model}}</span>
-			</div>
-			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>Révision matérielle:</b></span>
-				<span>{{infos.manufacturer.hardware_rev}}</span>
-			</div>
-			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>Numéro de série:</b></span>
-				<span>{{infos.manufacturer.serial_number}}</span>
-			</div>
-		</mat-card-content>
-	</mat-card>
 	<mat-card class="sys-card">
 		<mat-card-header>
 			<mat-card-title-group class="info-title">
@@ -41,17 +15,71 @@
 		</mat-card-header>
 		<mat-card-content class="info-content">
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>Architecture:</b></span>
+				<span fxFlex="50"><b>Architecture:</b></span>
 				<span>{{infos.system.arch}}</span>
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>Machine:</b></span>
+				<span fxFlex="50"><b>Machine:</b></span>
 				<span>{{infos.system.machine}}</span>
 			</div>
 			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
-				<span fxFlex="30"><b>OS:</b></span>
+				<span fxFlex="50"><b>OS:</b></span>
 				<span>{{infos.system.os}} {{infos.system.version}}</span>
 			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Usage CPU:</b></span>
+				<span>{{infos.system.cpu_usage}}%</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Mémoire totale:</b></span>
+				<span>{{infos.system.total_mem}} Mo</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Mémoire disponible:</b></span>
+				<span>{{infos.system.avail_mem}} Mo</span>
+			</div>
+			<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 - {{infos.system.percent_used_mem}}%</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Disque total:</b></span>
+				<span>{{infos.system.total_disk}} Mo</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Disque libre:</b></span>
+				<span>{{infos.system.free_disk}} Mo</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="50"><b>Disque utilisé:</b></span>
+				<span>{{infos.system.used_disk}} Mo - {{infos.system.percent_used_disk}}%</span>
+			</div>
+		</mat-card-content>
+	</mat-card>
+	<mat-card class="info-card">
+		<mat-card-header>
+			<mat-card-title-group class="info-title">
+				<mat-card-title>Module GSM</mat-card-title>
+				<img mat-card-sm-image src="/assets/img/GNSS_GSM_GPS_rpi.png">
+			</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="45"><b>Fabricant:</b></span>
+				<span>{{infos.manufacturer.identification}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="45"><b>Modèle:</b></span>
+				<span>{{infos.manufacturer.model}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="45"><b>Révision matérielle:</b></span>
+				<span>{{infos.manufacturer.hardware_rev}}</span>
+			</div>
+			<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
+				<span fxFlex="45"><b>Numéro de série:</b></span>
+				<span>{{infos.manufacturer.serial_number}}</span>
+			</div>
 		</mat-card-content>
 	</mat-card>
 		<h3 style="margin-left: 2rem;">Contrôle</h3>

src/app/models/info.model.ts

@@ -3,6 +3,16 @@ export interface System {
 	machine:string;
 	os:string;
 	version:string;
+	total_cpu:string;
+	cpu_usage:string;
+	total_mem:string;
+	avail_mem:string;
+	used_mem:string;
+	percent_used_mem:string;
+	total_disk:string;
+	free_disk:string;
+	used_disk:string;
+	percent_used_disk:string;
 }
 
 export interface Manufacturer {