Skip to content

Commit

Permalink
taskmanager 0.9.2
Browse files Browse the repository at this point in the history
  • Loading branch information
@chinonso098
chinonso098 committed Oct 28, 2023
1 parent 628c9f7 commit 5fd97d1
Show file tree
Hide file tree
Showing 3 changed files with 63 additions and 94 deletions.
14 changes: 7 additions & 7 deletions src/app/system-apps/taskmanager/taskmanager.component.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -108,9 +108,9 @@
text-align: left; /* Header text alignment */
font-weight:lighter; /* Header text bold */
font-size: 13px;
height: 70px;
min-width: 75px;
border: 2px solid #ccc; /* Cell border */
height: 60px;
min-width: 90px;
border: 1px solid #ccc; /* Cell border */
border-top: none;
vertical-align: middle;

Expand Down Expand Up @@ -140,7 +140,7 @@
margin-right: 5px;
font-size: 13px;
text-align: left; /* Header text alignment */
border: 1px solid #1a127b; /* Cell border */
border: 1px solid #ccc; /* Cell border #1a127b*/
border-top:none; border-bottom:none;
}

Expand All @@ -151,9 +151,9 @@

/* Custom styles for .table-responsive (Optional) */
.table-responsive {
max-width: 100%; /* Set a maximum width for the responsive container */
min-width: 400px;
overflow: auto; /* Enable horizontal scrolling when needed */
max-width: 100%; /* Set a maximum width for the responsive container */
min-width: 400px;
overflow: auto; /* Enable horizontal scrolling when needed */
}


Expand Down
64 changes: 29 additions & 35 deletions src/app/system-apps/taskmanager/taskmanager.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,75 +13,69 @@
<div class='table-responsive'>
<table class='table' *ngIf = 'processes.length > 0' >
<thead>
<span style="height:10px; "></span>
<tr>
<th (click)="sortTable('Name', true)">
<span style="margin-left:50%; height:33%">
<span *ngIf="isDescSorting('Name')">▼</span>
<span *ngIf="isAscSorting('Name')">▲</span>
<span style="margin-left:50%; height:50%">
<span *ngIf="isDescSorting('Name')">v</span>
<span *ngIf="isAscSorting('Name')">ᴧ</span>
</span>
<span style="height:33%;"></span>
<span style="padding-left:5px; height:33%; padding-top:5px; font-size:14px;">Name</span>
<span style="padding-left:5px; height:50%; padding-top:5px; font-size:14px;">Name</span>
</th>
<th>
<span style="margin-left:50%; height:33%">
<span *ngIf="isDescSorting('Status')">▼</span>
<span *ngIf="isAscSorting('Status')">▲</span>
<span style="margin-left:50%; height:50%">
<span *ngIf="isDescSorting('Status')">v</span>
<span *ngIf="isAscSorting('Status')">ᴧ</span>
</span>
<span style="height:33%;"></span>
<span style="padding-left:5px; height:33%; padding-top:5px; font-size:14px;">Status</span>
<span style="padding-left:5px; height:50%; padding-top:5px; font-size:14px;">Status</span>
</th>
<th (click)="sortTable('CPU', true)">
<span style="margin-left:50%; height:33%"></span>
<th (click)="sortTable('CPU', true)" #cpuId>
<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 *ngIf="isDescSorting('CPU')">v</span>
<span *ngIf="isAscSorting('CPU')">ᴧ</span>
</span>
<span [style]="setUtilHeaderSpan2section2Colors(cpuUtil)">{{cpuUtil}}%</span>
</span>
<span [style]="setUtilHeaderSpan3Colors(cpuUtil,'CPU')">CPU</span>
</th>
<th (click)="sortTable('Memory', true)">
<span style="margin-left:50%; height:33%"></span>
<th (click)="sortTable('Memory', true)" #memoryId>
<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 *ngIf="isDescSorting('Memory')">v</span>
<span *ngIf="isAscSorting('Memory')">ᴧ</span>
</span>
<span [style]="setUtilHeaderSpan2section2Colors(memUtil)">{{memUtil}}%</span>
</span>
<span [style]="setUtilHeaderSpan3Colors(memUtil,'Memory')">Memory</span>
</th>
<th (click)="sortTable('Disk', true)">
<span style="margin-left:50%; height:33%"></span>
<th (click)="sortTable('Disk', true)" #diskId>
<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 *ngIf="isDescSorting('Disk')">v</span>
<span *ngIf="isAscSorting('Disk')">ᴧ</span>
</span>

<span [style]="setUtilHeaderSpan2section2Colors(diskUtil)">{{diskUtil}}%</span>
</span>
<span [style]="setUtilHeaderSpan3Colors(diskUtil,'Disk')">Disk</span>
</th>
<th (click)="sortTable('Network', true)">
<span style="margin-left:50%; height:33%"></span>
<th (click)="sortTable('Network', true)" #networkId>
<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 *ngIf="isDescSorting('Network')">v</span>
<span *ngIf="isAscSorting('Network')">ᴧ</span>
</span>
<span [style]="setUtilHeaderSpan2section2Colors(networkUtil)">{{networkUtil}}%</span>
</span>
<span [style]="setUtilHeaderSpan3Colors(networkUtil,'Network')">Network</span>
</th>
<th (click)="sortTable('PID', true)">
<span style="margin-left:50%; height:33%">
<span *ngIf="isDescSorting('PID')">▼</span>
<span *ngIf="isAscSorting('PID')">▲</span>
<span style="margin-left:50%; height:50%">
<span *ngIf="isDescSorting('PID')">v</span>
<span *ngIf="isAscSorting('PID')">ᴧ</span>
</span>
<span style="height:33%;"></span>
<span style="padding-left:55%; height:33%; padding-top:5px; font-size:14px; padding-right:5px;">PID</span>
<span style="padding-left:55%; height:50%; padding-top:5px; font-size:14px; padding-right:5px;">PID</span>
</th>
</tr>
</thead>
Expand All @@ -94,10 +88,10 @@
</figure>
</td>
<td>{{ process.getStatus}}</td>
<td [style]="setUtilColoumnColors(process.getCpuUsage)">{{ process.getCpuUsage}}%</td>
<td [style]="setUtilColoumnColors(process.getMemoryUsage)">{{ process.getMemoryUsage}} MB</td>
<td [style]="setUtilColoumnColors(process.getDiskUsage)">{{ process.getDiskUsage}} MB/s</td>
<td [style]="setUtilColoumnColors(process.getNetworkUsage)">{{ process.getNetworkUsage}} Mbps</td>
<td [style]="setUtilColoumnColors(process.getCpuUsage)" #cpuId>{{ process.getCpuUsage}}%</td>
<td [style]="setUtilColoumnColors(process.getMemoryUsage)" #memoryId>{{ process.getMemoryUsage}} MB</td>
<td [style]="setUtilColoumnColors(process.getDiskUsage)" #diskId>{{ process.getDiskUsage}} MB/s</td>
<td [style]="setUtilColoumnColors(process.getNetworkUsage)" #networkId>{{ process.getNetworkUsage}} Mbps</td>
<td style="text-align:right">{{ process.getProcessId}}</td>
</tr>
</tbody>
Expand Down
79 changes: 27 additions & 52 deletions src/app/system-apps/taskmanager/taskmanager.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ import { SortingInterface } from './sorting.interface';
})
export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,AfterViewInit {

//acceess before it exists. So Angular is angry
// @ViewChild('cpuId',{ static: true }) cpuId!: ElementRef;
// @ViewChild('memroyId',{ static: true }) memroyId!: ElementRef;
// @ViewChild('diskId',{ static: true }) diskId!: ElementRef;
// @ViewChild('networkId',{ static: true }) networkId!: ElementRef;

private _processIdService:ProcessIDService;
private _runningProcessService:RunningProcessService;
Expand Down Expand Up @@ -207,53 +212,25 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
return {};
}

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> = {}

//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':'33%',
'height':'50%',
};
}else if(cellValue >= 10){
return baseStyle = {
'height':'33%',
'background-color': (cellValue >= 50)? '#e18888f8' : '#f0f0f0',
'border-left':(cellValue >= 50)? ' #e18888f8': '',
'border-right':(cellValue >= 50)?' #e18888f8': ''
'height':'50%',
'background-color': (cellValue >= 90)? '#e18888f8' : '#f0f0f0',
'border-left':(cellValue >= 90)? ' #e18888f8': '',
'border-right':(cellValue >= 90)?' #e18888f8': ''
};
}
return {};
Expand All @@ -265,29 +242,27 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
return baseStyle= {
'padding-left':'22%',
'display':'inline-block',
'height':'33%',
'height':'50%',
'font-size':'large',
'width':'65%'
};
}else if(cellValue >= 10){
return baseStyle = {
'padding-left':'9%',
'display':'inline-block',
'height':'33%',
'height':'50%',
'font-size':'large',
'width':'65%'
};
}
return {};
}



setUtilHeaderSpan3Colors(cellValue:number, cellName:string){

const baseStyle:Record<string, unknown> = {
'padding-left':'55%',
'height':'33%',
'height':'50%',
'padding-top':'5px',
'font-size':'14px',
'padding-right':'5px'
Expand All @@ -296,8 +271,8 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
if(cellValue < 10){
return baseStyle;
}else if(cellValue >= 10){
baseStyle['background-color'] = (cellValue >= 50) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 50) ? '#e18888f8' : '';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
}
Expand All @@ -309,8 +284,8 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
}else if(cellValue >= 10){

baseStyle['padding-left'] = '25%';
baseStyle['background-color'] = (cellValue >= 50) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 50) ? '#e18888f8' : '';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
}
Expand All @@ -319,8 +294,8 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
if(cellValue < 10){
return baseStyle;
}else if(cellValue >= 10){
baseStyle['background-color'] = (cellValue >= 50) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 50) ? '#e18888f8' : '';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
}
Expand All @@ -332,8 +307,8 @@ export class TaskmanagerComponent implements BaseComponent,OnInit,OnDestroy,Afte
}else if(cellValue >= 10){

baseStyle['padding-left'] = '24%';
baseStyle['background-color'] = (cellValue >= 50) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 50) ? '#e18888f8' : '';
baseStyle['background-color'] = (cellValue >= 90) ? '#e18888f8' : '#f0f0f0';
baseStyle['border'] = (cellValue >= 90) ? '#e18888f8' : '';
return baseStyle;
}
}
Expand Down

0 comments on commit 5fd97d1

Please sign in to comment.