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

amélioration de la mat-card du système dans la page infos

Browse Source
This commit is contained in:
BENOIT Vincent
2022-11-27 21:14:59 +01:00
parent 4660f96d71
commit 50369f0373
3 changed files with 26 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,7 @@
</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>
<span style="color:{{cpu_color}}"><b>{{infos.system.cpu_usage}}%</b></span>
</div>
<div fxLayout="row" style="width:100%; margin-bottom: 0.25rem;">
<span fxFlex="50"><b>Mémoire totale:</b></span>
@@ -40,7 +40,8 @@
</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>
<span>{{infos.system.used_mem}} Mo</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>
@@ -52,7 +53,8 @@
</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>
<span>{{infos.system.used_disk}} Mo</span>
<span style="margin-left: 5px; color:{{disk_color}}"><b>({{infos.system.percent_used_disk}}%)</b></span>
</div>
</mat-card-content>
</mat-card>

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

@@ -11,6 +11,9 @@ import { ToastrService } from 'ngx-toastr';
})
export class InfosComponent implements OnInit {
infos:Info;
cpu_color:string = "green";
mem_color:string = "green";
disk_color:string = "green";
isProcessing:boolean = true;
constructor( private bs:BackendService,
@@ -21,7 +24,21 @@ export class InfosComponent implements OnInit {
this.bs.retreiveInfos().subscribe(
(data:Info) => {
this.infos = data;
console.log(this.infos);
if(data.system.percent_used_mem >= 65) {
this.mem_color = "orange";
} 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 {}
this.isProcessing = false;
}, err => {
if(err.status == 401) {

6
src/app/models/info.model.ts
View File

@@ -4,15 +4,15 @@ export interface System {
os:string;
version:string;
total_cpu:string;
cpu_usage:string;
cpu_usage:number;
total_mem:string;
avail_mem:string;
used_mem:string;
percent_used_mem:string;
percent_used_mem:number;
total_disk:string;
free_disk:string;
used_disk:string;
percent_used_disk:string;
percent_used_disk:number;
}
export interface Manufacturer {