taskmanger 0.3

src/app/system-apps/taskmanager/sorting.interface.ts

@@ -0,0 +1,4 @@
+export interface SortingInterface {
+    column: string;
+    order: 'asc' | 'desc';
+  }

src/app/system-apps/taskmanager/taskmanager.component.css

@@ -5,6 +5,7 @@
 
     border: 1px solid #ccc; /* Add a border to the card */
     border-radius: 1px; /* Add rounded corners to the card */
+    overflow-x:auto;
   }
 
   /* Custom styles for the card-body */
@@ -92,6 +93,8 @@
     min-width: 25%; /* Set the table width to 100% of its container */
     margin: 10px 0; /* Add margin above and below the table */
     font-family: Arial, sans-serif; /* Set the font family for the table */
+    table-layout: auto;
+    width: 100%;
   }
 
   /* Custom styles for table headers */

src/app/system-apps/taskmanager/taskmanager.component.html

@@ -4,16 +4,13 @@
           <div class='table-responsive'>
             <table class='table' *ngIf = 'processes.length > 0' >
               <thead>
-                <tr>
-                  <th>
-                      Name
+                <tr>             
+                  <th *ngFor="let column of columns"
+                            (click)="sortTable(column)">
+                    {{ column }}
+                    <span *ngIf="isDescSorting(column)">▼</span>
+                    <span *ngIf="isAscSorting(column)">▲</span>
                   </th>
-                  <th>
-                    <!-- <i class="fa fa-sort-alpha-asc" aria-hidden="true"></i> -->
-                     Type
-                  </th>
-                  <th> Process Id  </th>
-                  <th>Has Windows</th>
                 </tr>
               </thead>
               <tbody>
@@ -27,6 +24,8 @@
                     <td>{{ process.getType}}</td>
                     <td>{{ process.getProcessId}}</td>
                     <td>{{ process.getHasWindow}}</td>
+                    <td>{{ process.getCpuUsage}}%</td>
+                    <td>{{ process.getMemoryUsage}}MB</td>
                   </tr>
               </tbody>
             </table>

src/app/system-apps/taskmanager/taskmanager.component.ts

@@ -5,6 +5,8 @@ import { RunningProcessService } from 'src/app/shared/system-service/running.pro
 import { BaseComponent } from 'src/app/system-base/base/base.component';
 import { ComponentType } from 'src/app/system-files/component.types';
 import { Process } from 'src/app/system-files/process';
+import { SortingInterface } from './sorting.interface';
+import { UserInterface } from './user.interface';
 
 @Component({
   selector: 'cos-taskmanager',
@@ -18,32 +20,45 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy {
   private _processListChangeSub!: Subscription;
 
   processes:Process[] =[];
+  columns: Array<keyof UserInterface> = ['name','type','process_id','has_window','cpu','memory'];
 
   hasWindow = true;
   icon = 'osdrive/icons/taskmanger.png';
   name = 'taskmanager';
   processId = 0;
   type = ComponentType.systemComponent
   displayName = 'Task Manager'
+  sorting:SortingInterface ={
+    column: 'id',
+    order: 'asc',
+  }
 
   constructor( processIdService:ProcessIDService,runningProcessService:RunningProcessService) { 
     this._processIdService = processIdService;
     this._runningProcessService = runningProcessService;
     this.processId = this._processIdService.getNewProcessId()
     this._runningProcessService.addProcess(this.getComponentDetail());
+
 
     this._processListChangeSub = this._runningProcessService.processListChangeNotify.subscribe(() =>{this.updateRunningProcess();})
-
   }
 
 
   ngOnInit(): void {
    this.processes = this._runningProcessService.getProcesses();
- }
+  }
 
  ngOnDestroy(): void {
   this._processListChangeSub?.unsubscribe();
-}
+ }
+
+  isDescSorting(column: string): boolean {
+    return this.sorting.column === column && this.sorting.order === 'desc';
+  }
+
+  isAscSorting(column: string): boolean {
+    return this.sorting.column === column && this.sorting.order === 'asc';
+  }
 
   setTaskMangrWindowToFocus(pid: number):void {
     this._runningProcessService.focusOnCurrentProcessNotify.next(pid);
@@ -53,6 +68,22 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy {
     this.processes = this._runningProcessService.getProcesses();
   }
 
+  sortTable(column: string): void {
+    const futureSortingOrder = this.isDescSorting(column) ? 'asc' : 'desc';
+    this.sorting = {
+      column,
+      order: futureSortingOrder,
+    };
+    if(column == 'cpu'){
+      this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getCpuUsage - objA.getCpuUsage)
+    } else if (column == 'memory'){
+      this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getMemoryUsage - objA.getMemoryUsage)
+    }else if(column == 'process_id'){
+      this.processes = this._runningProcessService.getProcesses().sort((objA, objB) => objB.getProcessId - objA.getProcessId)
+    }
+
+  }
+
   private getComponentDetail():Process{
     return new Process(this.processId, this.name, this.icon, this.hasWindow, this.type)
   }

src/app/system-apps/taskmanager/user.interface.ts

@@ -0,0 +1,9 @@
+export interface UserInterface {
+    name: string;
+    type: string;
+    process_id: number;
+    has_window:boolean;
+    cpu:number;
+    memory:number;
+
+  }

src/app/system-files/process.ts

@@ -5,6 +5,8 @@ export class Process{
     private _icon:string;
     private _hasWindow:boolean;
     private _type:string;
+    private _cpuUsage:number;
+    private _memoryUsage:number;
     private _processTrigger:unknown;
 
     constructor(processId:number, processName:string, icon:string, hasWindow:boolean, type:string, processTrigger?:unknown){
@@ -14,6 +16,8 @@ export class Process{
         this._hasWindow = hasWindow;
         this._type = type;
         this._processTrigger = processTrigger || null;
+        this._cpuUsage = 0;
+        this._memoryUsage = 2;
     }
 
     public get getProcessId(){
@@ -24,10 +28,18 @@ export class Process{
         return this._processName;
     }
 
-    get getIcon(){
+    public get getIcon(){
         return this._icon;
     }
 
+    public get getCpuUsage(){
+        return this._cpuUsage;
+    }
+
+    public get getMemoryUsage(){
+        return this._memoryUsage;
+    }
+
     public get getHasWindow(){
         return this._hasWindow;
     }
@@ -39,5 +51,12 @@ export class Process{
     public get getProcessTrigger(){
         return this._processTrigger;
     }
+
+    public set setCpuUsage(cpuUage:number){
+        this._cpuUsage = cpuUage;
+    }
 
+    public set setMemoryUsage(memoryUsage:number){
+        this._memoryUsage = memoryUsage;
+    }
 }