Skip to content

Commit

Permalink
takmanager v0.9.3
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Oct 28, 2023
1 parent 5fd97d1 commit b94c82d
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 23 deletions.
12 changes: 6 additions & 6 deletions src/app/system-apps/taskmanager/taskmanager.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<thead>
<span style="height:10px; "></span>
<tr>
<th (click)="sortTable('Name', true)">
<th [style]="thStyle" (click)="sortTable('Name', true)">
<span style="margin-left:50%; height:50%">
<span *ngIf="isDescSorting('Name')">v</span>
<span *ngIf="isAscSorting('Name')">ᴧ</span>
Expand All @@ -30,7 +30,7 @@
<span style="padding-left:5px; height:50%; padding-top:5px; font-size:14px;">Status</span>
</th>
<th (click)="sortTable('CPU', true)" #cpuId>
<span [style]="setUtilHeaderSpan2section1Colors(cpuUtil)">
<span [style]="setUtilHeaderSpan2section1Colors(cpuUtil,'CPU')">
<span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
<span *ngIf="isDescSorting('CPU')">v</span>
<span *ngIf="isAscSorting('CPU')">ᴧ</span>
Expand All @@ -40,7 +40,7 @@
<span [style]="setUtilHeaderSpan3Colors(cpuUtil,'CPU')">CPU</span>
</th>
<th (click)="sortTable('Memory', true)" #memoryId>
<span [style]="setUtilHeaderSpan2section1Colors(memUtil)">
<span [style]="setUtilHeaderSpan2section1Colors(memUtil,'Memory')">
<span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
<span *ngIf="isDescSorting('Memory')">v</span>
<span *ngIf="isAscSorting('Memory')">ᴧ</span>
Expand All @@ -50,7 +50,7 @@
<span [style]="setUtilHeaderSpan3Colors(memUtil,'Memory')">Memory</span>
</th>
<th (click)="sortTable('Disk', true)" #diskId>
<span [style]="setUtilHeaderSpan2section1Colors(diskUtil)">
<span [style]="setUtilHeaderSpan2section1Colors(diskUtil,'Disk')">
<span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
<span *ngIf="isDescSorting('Disk')">v</span>
<span *ngIf="isAscSorting('Disk')">ᴧ</span>
Expand All @@ -61,7 +61,7 @@
<span [style]="setUtilHeaderSpan3Colors(diskUtil,'Disk')">Disk</span>
</th>
<th (click)="sortTable('Network', true)" #networkId>
<span [style]="setUtilHeaderSpan2section1Colors(networkUtil)">
<span [style]="setUtilHeaderSpan2section1Colors(networkUtil,'Network')">
<span style="font-size:13px; padding-left:4px; vertical-align:top; width:35%; display:inline-block;">
<span *ngIf="isDescSorting('Network')">v</span>
<span *ngIf="isAscSorting('Network')">ᴧ</span>
Expand All @@ -70,7 +70,7 @@
</span>
<span [style]="setUtilHeaderSpan3Colors(networkUtil,'Network')">Network</span>
</th>
<th (click)="sortTable('PID', true)">
<th [style]="thStyle" (click)="sortTable('PID', true)">
<span style="margin-left:50%; height:50%">
<span *ngIf="isDescSorting('PID')">v</span>
<span *ngIf="isAscSorting('PID')">ᴧ</span>
Expand Down
99 changes: 82 additions & 17 deletions src/app/system-apps/taskmanager/taskmanager.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
processId = 0;
type = ComponentType.systemComponent
displayName = 'Task Manager';
thStyle:Record<string,unknown> = {};

cpuUtil = 0;
memUtil = 0;
Expand Down Expand Up @@ -93,6 +94,9 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
if(isSortTriggered){
this._currentSortingOrder = this.isDescSorting(column) ? 'asc' : 'desc';
this._sorting = {column, order: this._currentSortingOrder };
this.thStyle = {
'background-color': '#f0f0f0'
}
}

if(column == 'CPU'){
Expand Down Expand Up @@ -120,12 +124,18 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
this.processes = this.processes.sort((objA, objB) => objB.getNetworkUsage - objA.getNetworkUsage).reverse();
}
}else if(column == 'PID'){
this.thStyle = {
'background-color': 'rgb(224, 224, 139)'
}
if(this._currentSortingOrder == 'asc'){
this.processes = this.processes.sort((objA, objB) => objB.getProcessId - objA.getProcessId);
}else{
this.processes = this.processes.sort((objA, objB) => objB.getProcessId - objA.getProcessId).reverse();
}
}else if(column == 'Name'){
this.thStyle = {
'background-color': 'rgb(224, 224, 139)'
}
if(this._currentSortingOrder == 'asc'){
this.processes = this.processes.sort((objA, objB) => {
return objA.getProcessName < objB.getProcessName ? -1 : 1
Expand Down Expand Up @@ -212,29 +222,48 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
return {};
}

setUtilHeaderSpan2section1Colors(cellValue:number){
let baseStyle:Record<string, unknown> = {}
setUtilHeaderSpan2section1Colors(cellValue:number, cellName:string){
let baseStyle:Record<string, unknown> = {};
const sortColoumn = this._sorting.column;

//acceess before it exists. So Angular is angry
// this.cpuId.nativeElement.style.border = (cellValue >= 50)? '1px solid #e18888f8': '';
// this.memroyId.nativeElement.style.border = (cellValue >= 50)? '1px solid #e18888f8': '';
// this.diskId.nativeElement.style.border = (cellValue >= 50)? '1px solid #e18888f8': '';
// this.networkId.nativeElement.style.border = (cellValue >= 50)? '1px solid #e18888f8': '';

if(cellValue < 10){
return baseStyle= {
'height':'50%',
};
}else if(cellValue >= 10){
return baseStyle = {
'height':'50%',
'background-color': (cellValue >= 90)? '#e18888f8' : '#f0f0f0',
'border-left':(cellValue >= 90)? ' #e18888f8': '',
'border-right':(cellValue >= 90)?' #e18888f8': ''
};
}
if(cellName == sortColoumn){
if(cellValue < 10){
return baseStyle= {
'height':'50%',
'background-color':'rgb(224, 224, 139)'
};
}else if(cellValue >= 10){
return baseStyle = {
'height':'50%',
'background-color': (cellValue >= 90)? '#e18888f8' : 'rgb(224, 224, 139)',
'border-left':(cellValue >= 90)? ' #e18888f8': '',
'border-right':(cellValue >= 90)?' #e18888f8': ''
};
}

}else{
if(cellValue < 10){
return baseStyle= {
'height':'50%',
};
}else if(cellValue >= 10){
return baseStyle = {
'height':'50%',
'background-color': (cellValue >= 90)? '#e18888f8' : '#f0f0f0',
'border-left':(cellValue >= 90)? ' #e18888f8': '',
'border-right':(cellValue >= 90)?' #e18888f8': ''
};
}
}
return {};
}

setUtilHeaderSpan2section2Colors(cellValue:number){
let baseStyle:Record<string, unknown> = {}

Expand Down Expand Up @@ -267,11 +296,23 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
'font-size':'14px',
'padding-right':'5px'
};

const sortColoumn = this._sorting.column;

if (cellName == 'CPU'){
if(cellValue < 10){
if(sortColoumn == cellName){
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
return baseStyle;
}else if(cellValue >= 10){
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
if(sortColoumn == cellName){
if (cellValue >= 90)
baseStyle['background-color'] = '#e18888f8';
else if (cellValue < 90 )
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
Expand All @@ -280,21 +321,37 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
if (cellName == 'Memory'){
if(cellValue < 10){
baseStyle['padding-left'] = '25%';
if(sortColoumn == cellName){
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
return baseStyle;
}else if(cellValue >= 10){

baseStyle['padding-left'] = '25%';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
if(sortColoumn == cellName){
if (cellValue >= 90)
baseStyle['background-color'] = '#e18888f8';
else if (cellValue < 90 )
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
}

if (cellName == 'Disk'){
if(cellValue < 10){
if(sortColoumn == cellName){
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
return baseStyle;
}else if(cellValue >= 10){
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
if(sortColoumn == cellName){
if (cellValue >= 90)
baseStyle['background-color'] = '#e18888f8';
else if (cellValue < 90 )
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
Expand All @@ -303,11 +360,19 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
if (cellName == 'Network'){
if(cellValue < 10){
baseStyle['padding-left'] = '24%';
if(sortColoumn == cellName){
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
return baseStyle;
}else if(cellValue >= 10){

baseStyle['padding-left'] = '24%';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
if(sortColoumn == cellName){
if (cellValue >= 90)
baseStyle['background-color'] = '#e18888f8';
else if (cellValue < 90 )
baseStyle['background-color'] = 'rgb(224, 224, 139)';
}
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
Expand Down

0 comments on commit b94c82d

Please sign in to comment.