taskmanager v0.9.1

chinonso098 · Oct 28, 2023 · 628c9f7 · 628c9f7
1 parent 19d7752
commit 628c9f7
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 26 deletions.
diff --git a/src/app/system-apps/taskmanager/taskmanager.component.css b/src/app/system-apps/taskmanager/taskmanager.component.css
@@ -140,7 +140,7 @@
     margin-right: 5px;
     font-size: 13px;
     text-align: left; /* Header text alignment */
-    border: 1px solid #ccc; /* Cell border */
+    border: 1px solid #1a127b; /* Cell border */
     border-top:none; border-bottom:none;
   }
 

diff --git a/src/app/system-apps/taskmanager/taskmanager.component.html b/src/app/system-apps/taskmanager/taskmanager.component.html
@@ -31,35 +31,48 @@
                             <span style="padding-left:5px; height:33%; padding-top:5px; font-size:14px;">Status</span>
                           </th>
                           <th (click)="sortTable('CPU', true)">
-                            <span style="margin-left:50%; height:33%">
-                              <span *ngIf="isDescSorting('CPU')">▼</span>
-                              <span *ngIf="isAscSorting('CPU')">▲</span>
+                            <span style="margin-left:50%; height:33%"></span>
+                            <span [style]="setUtilHeaderSpan2section1Colors(cpuUtil)">
+                              <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
+                                <span *ngIf="isDescSorting('CPU')">ᴧ</span>
+                                <span *ngIf="isAscSorting('CPU')">v</span>
+                              </span>
+                              <span [style]="setUtilHeaderSpan2section2Colors(cpuUtil)">{{cpuUtil}}%</span>
                             </span>
-                            <span [style]="setUtilHeaderSpan2Colors(cpuUtil)" >{{cpuUtil}}%</span>
                             <span [style]="setUtilHeaderSpan3Colors(cpuUtil,'CPU')">CPU</span>
                           </th>
-                          <th (click)="sortTable('Memory', true)" #memorySpan>
-                            <span style="margin-left:50%; height:33%">
-                              <span *ngIf="isDescSorting('Memory')">▼</span>
-                              <span *ngIf="isAscSorting('Memory')">▲</span>
+                          <th (click)="sortTable('Memory', true)">
+                            <span style="margin-left:50%; height:33%"></span>
+                            <span [style]="setUtilHeaderSpan2section1Colors(memUtil)">
+                              <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
+                                <span *ngIf="isDescSorting('Memory')">ᴧ</span>
+                                <span *ngIf="isAscSorting('Memory')">v</span>
+                              </span>
+                              <span [style]="setUtilHeaderSpan2section2Colors(memUtil)">{{memUtil}}%</span>
                             </span>
-                            <span [style]="setUtilHeaderSpan2Colors(memUtil)">{{memUtil}}%</span>
                             <span [style]="setUtilHeaderSpan3Colors(memUtil,'Memory')">Memory</span>
                           </th>
-                          <th (click)="sortTable('Disk', true)" #diskSpan>               
-                            <span style="margin-left:50%; height:33%">
-                              <span *ngIf="isDescSorting('Disk')">▼</span>
-                              <span *ngIf="isAscSorting('Disk')">▲</span>
+                          <th (click)="sortTable('Disk', true)">               
+                            <span style="margin-left:50%; height:33%"></span>
+                            <span [style]="setUtilHeaderSpan2section1Colors(diskUtil)">
+                              <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
+                                <span *ngIf="isDescSorting('Disk')">ᴧ</span>
+                                <span *ngIf="isAscSorting('Disk')">v</span>
+                              </span>
+
+                              <span [style]="setUtilHeaderSpan2section2Colors(diskUtil)">{{diskUtil}}%</span>
                             </span>
-                            <span [style]="setUtilHeaderSpan2Colors(diskUtil)">{{diskUtil}}%</span>
                             <span [style]="setUtilHeaderSpan3Colors(diskUtil,'Disk')">Disk</span>
                           </th>
-                          <th (click)="sortTable('Network', true)" #newtorkSpan>                                        
-                            <span style="margin-left:50%; height:33%">
-                              <span *ngIf="isDescSorting('Network')">▼</span>
-                              <span *ngIf="isAscSorting('Network')">▲</span>
+                          <th (click)="sortTable('Network', true)">                                        
+                            <span style="margin-left:50%; height:33%"></span>
+                            <span [style]="setUtilHeaderSpan2section1Colors(networkUtil)">
+                              <span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
+                                <span *ngIf="isDescSorting('Network')">ᴧ</span>
+                                <span *ngIf="isAscSorting('Network')">v</span>
+                              </span>
+                              <span [style]="setUtilHeaderSpan2section2Colors(networkUtil)">{{networkUtil}}%</span>
                             </span>
-                            <span [style]="setUtilHeaderSpan2Colors(networkUtil)">{{networkUtil}}%</span>
                             <span [style]="setUtilHeaderSpan3Colors(networkUtil,'Network')">Network</span>
                           </th>
                           <th (click)="sortTable('PID', true)">               

diff --git a/src/app/system-apps/taskmanager/taskmanager.component.ts b/src/app/system-apps/taskmanager/taskmanager.component.ts
@@ -207,28 +207,82 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
     return {};
   }
 
-  setUtilHeaderSpan2Colors(cellValue:number){
+  setUtilColoumnColors1(cellValue:number){
+    let  baseStyle: Record<string, unknown> = {};
+    if(cellValue <= 2.5){
+     return baseStyle = {
+        'text-align':'right',
+        'background-color': 'rgb(224, 224, 139)',
+        'border-left':this.cpuUtil > 50 ? ' #e18888f8': '',
+        'border-right':this.cpuUtil > 50 ?' #e18888f8': ''
+      };
+    }else if(cellValue > 2.5 && cellValue <= 5){
+      return baseStyle = {
+        'text-align':'right',
+        'background-color': 'orange',
+        'border-left':this.cpuUtil > 50 ? ' #e18888f8': '',
+        'border-right':this.cpuUtil > 50 ?' #e18888f8': ''
+      };
+    }else if(cellValue > 5.0 && cellValue <= 7.5){
+      return baseStyle = {
+        'text-align':'right',
+        'background-color': 'orangered',
+        'border-left':this.cpuUtil > 50 ? ' #e18888f8': '',
+        'border-right':this.cpuUtil > 50 ?' #e18888f8': ''
+      };
+    }else if (cellValue > 7.5){
+      return baseStyle = {
+        'text-align':'right',
+        'background-color': 'red', 
+        'border-left':this.cpuUtil > 50 ? ' #e18888f8': '',
+        'border-right':this.cpuUtil > 50 ?' #e18888f8': ''
+      };
+    }
+    return {};
+  }
+
+  setUtilHeaderSpan2section1Colors(cellValue:number){
     let baseStyle:Record<string, unknown> = {}
 
     if(cellValue < 10){
      return baseStyle= {
-        'padding-left':'60%',
+        'height':'33%',
+      };
+    }else if(cellValue >= 10){
+      return baseStyle = {
+        'height':'33%',
+        'background-color': (cellValue >= 50)?  '#e18888f8' : '#f0f0f0',
+        'border-left':(cellValue >= 50)? ' #e18888f8': '',
+        'border-right':(cellValue >= 50)?' #e18888f8': ''
+      };
+    }
+    return {};
+  }
+  setUtilHeaderSpan2section2Colors(cellValue:number){
+    let baseStyle:Record<string, unknown> = {}
+
+    if(cellValue < 10){
+     return baseStyle= {
+        'padding-left':'22%',
+        'display':'inline-block',
         'height':'33%',
         'font-size':'large',
+        'width':'65%'
       };
     }else if(cellValue >= 10){
       return baseStyle = {
-        'padding-left':'47%',
+        'padding-left':'9%',
+        'display':'inline-block',
         'height':'33%',
         'font-size':'large',
-        'background-color': cellValue >= 50 ? '#e18888f8' : '#f0f0f0',
-        'border-left':this.cpuUtil > 50 ? ' #e18888f8': '',
-        'border-right':this.cpuUtil > 50 ?' #e18888f8': ''
+        'width':'65%'
       };
     }
     return {};
   }
 
+
+
   setUtilHeaderSpan3Colors(cellValue:number, cellName:string){
 
     const baseStyle:Record<string, unknown> =  {