modified proccess viewer

ui/src/app/app.module.ts

@@ -5,7 +5,6 @@ import { NgModule } from '@angular/core';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 
-import {NgxChartsModule} from '@swimlane/ngx-charts';
 import { ChartsModule } from 'ng2-charts';
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 
@@ -59,7 +58,6 @@ import { NewItemComponent } from './home/files/browser/new-item/new-item.compone
     NgbModule,
     HttpClientModule,
     BrowserAnimationsModule, 
-    NgxChartsModule,
     ChartsModule
   ],
   providers: [httpInterceptorProviders],

ui/src/app/home/monitoring/monitoring.component.css

@@ -1,5 +1,5 @@
 .search-box{
-    border-bottom: 1px solid green;
+    border-bottom: 1px solid rgb(200,200,200);
     margin-right: 10px;
 }
 

ui/src/app/home/monitoring/monitoring.component.html

@@ -3,7 +3,7 @@
   <div style="display: flex; justify-content: space-around; flex-wrap: wrap; padding: 20px;">
     <div>
       <div style="text-align: center; padding: 10px; font-size: 20px;">
-        <span>CPU USAGE {{cpuUsageSet[0][0].toFixed(1)}}%</span>
+        <span>CPU USAGE {{toPercent(cpu)}}%</span>
       </div>
       <div class="chart-container" style="height:200px; position: relative; width: 200px;">
         <canvas baseChart [data]="cpuUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
@@ -13,7 +13,7 @@
     </div>
     <div>
       <div style="text-align: center; padding: 10px; font-size: 20px;">
-        <span>MEMORY USAGE {{memoryUsageSet[0][0].toFixed(1)}}%</span>
+        <span>MEMORY USAGE {{toPercent(memory)}}%</span>
       </div>
       <div class="chart-container" style="height:200px; position: relative; width: 200px;">
         <canvas baseChart [data]="memoryUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
@@ -23,7 +23,7 @@
     </div>
     <div>
       <div style="text-align: center; padding: 10px; font-size: 20px;">
-        <span>DISKSPACE USAGE {{diskUsageSet[0][0].toFixed(1)}}%</span>
+        <span>DISKSPACE USAGE {{toPercent(disk)}}%</span>
       </div>
       <div class="chart-container" style="height:200px; position: relative; width: 200px;">
         <canvas baseChart [data]="diskUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
@@ -33,7 +33,7 @@
     </div>
     <div>
       <div style="text-align: center; padding: 10px; font-size: 20px;">
-        <span>SWAP USAGE {{swapUsageSet[0][0].toFixed(1)}}%</span>
+        <span>SWAP USAGE {{toPercent(swap)}}%</span>
       </div>
       <div class="chart-container" style="height:200px; position: relative; width: 200px;">
         <canvas baseChart [data]="swapUsageSet" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" [colors]="colors"
@@ -48,8 +48,8 @@
     </div>
     <div style="display: flex;">
       <div style="display: flex; padding-right: 10px;" class="search-box" tabindex="0">
-        <input type="text" class="search-text" placeholder="Search process">
-        <span>
+        <input type="text" class="search-text" placeholder="Search process" #text>
+        <span (click)="searchText=text.value;filterProcesses()">
           <i class="fa fa-search" aria-hidden="true"></i>
         </span>
       </div>
@@ -63,29 +63,69 @@
     <table class="table table-striped table-sm table-borderless" style="position: relative;">
       <thead>
         <tr>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">NAME</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">PID</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">PRIORITY</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">CPU USAGE</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">MEMORY</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">VIRTUAL MEMORY</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">USER</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">START TIME</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">STATE</th>
-          <th scope="col" style="position: sticky; top: 0px; background: white;">COMMAND</th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(0)">
+            <span>NAME</span>
+            <span *ngIf="sortingField==0&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==0&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(1)">
+            <span>PID</span>
+            <span *ngIf="sortingField==1&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==1&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(2)">
+            <span>PRIORITY</span>
+            <span *ngIf="sortingField==2&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==2&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(3)">
+            <span>CPU USAGE</span>
+            <span *ngIf="sortingField==3&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==3&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(4)">
+            <span>MEMORY</span>
+            <span *ngIf="sortingField==4&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==4&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(5)">
+            <span>VIRTUAL MEMORY</span>
+            <span *ngIf="sortingField==5&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==5&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(6)">
+            <span>USER</span>
+            <span *ngIf="sortingField==6&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==6&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(7)">
+            <span>START TIME</span>
+            <span *ngIf="sortingField==7&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==7&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(8)">
+            <span>STATE</span>
+            <span *ngIf="sortingField==8&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==8&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
+          <th scope="col" style="position: sticky; top: 0px; background: white; cursor: pointer;" (click)="setSortField(9)">
+            <span>COMMAND</span>
+            <span *ngIf="sortingField==9&&sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-down" aria-hidden="true"></i></span>
+            <span *ngIf="sortingField==9&&!sortAsc" style="padding-left: 10px;"><i class="fa fa-caret-up" aria-hidden="true"></i></span>
+          </th>
         </tr>
       </thead>
       <tbody>
-        <tr *ngFor="let proc of processList">
+        <tr *ngFor="let proc of filteredProcessList">
           <td><input type="checkbox" [checked]="proc.selected"
             (change)="proc.selected = !proc.selected" ><span style="padding-left: 10px;">{{proc.name}}</span></td>
           <td>{{proc.pid}}</td>
           <td>{{proc.priority}}</td>
-          <td>{{proc.cpuUsage}}</td>
-          <td>{{proc.memoryUsage}}</td>
-          <td>{{proc.vmUsage}}</td>
+          <td>{{toPercent(proc.cpuUsage)}}</td>
+          <td>{{formatSize(proc.memoryUsage)}}</td>
+          <td>{{formatSize(proc.vmUsage)}}</td>
           <td>{{proc.user}}</td>
-          <td>{{proc.startTime}}</td>
+          <td>{{toDate(proc.startTime)|date:'medium'}}</td>
           <td>{{proc.state}}</td>
           <td style="overflow-wrap: break-word; max-width: 200px;">
               {{proc.command}}

ui/src/app/home/monitoring/monitoring.component.ts

@@ -2,6 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { ChartType, ChartOptions } from 'chart.js';
 import { MultiDataSet, Label, Colors, Color } from 'ng2-charts';
 import { DataService } from 'src/app/data.service';
+import { utility } from '../../utility/utils';
 
 @Component({
   selector: 'app-monitoring',
@@ -32,6 +33,12 @@ export class MonitoringComponent implements OnInit {
   public swapUsageSet: MultiDataSet = [
     [0, 100]
   ];
+
+  cpu: number;
+  memory: number;
+  swap: number;
+  disk: number;
+
   public doughnutChartType: ChartType = 'doughnut';
   public options: ChartOptions = {
     maintainAspectRatio: false,
@@ -43,6 +50,10 @@ export class MonitoringComponent implements OnInit {
   timer: any;
 
   processList: any[] = [];
+  filteredProcessList: any[] = [];
+  searchText: string;
+  sortingField: number = -1;
+  sortAsc: boolean;
 
   constructor(private service: DataService) { }
 
@@ -60,6 +71,7 @@ export class MonitoringComponent implements OnInit {
       for (let proc of this.processList) {
         proc.selected = false;
       }
+      this.filterProcesses();
     });
   }
 
@@ -90,6 +102,10 @@ export class MonitoringComponent implements OnInit {
 
   public getStats() {
     this.service.getSystemStats().subscribe((resp: any) => {
+      this.cpu = resp.cpuUsed;
+      this.memory = resp.memoryUsed;
+      this.disk = resp.diskUsed;
+      this.swap = resp.swapUsed;
       this.cpuUsageSet = [
         [resp.cpuUsed, resp.cpuFree]
       ];
@@ -116,4 +132,87 @@ export class MonitoringComponent implements OnInit {
   onResize(event: any) {
   }
 
+  numberCompare(n1: number, n2: number) {
+    if (this.sortAsc) {
+      if (n1 > n2) {
+        return 1;
+      } else if (n1 < n2) {
+        return -1;
+      } else {
+        return 0;
+      }
+    } else {
+      if (n1 < n2) {
+        return 1;
+      } else if (n1 > n2) {
+        return -1;
+      } else {
+        return 0;
+      }
+    }
+  }
+
+  filterProcesses() {
+    if (this.searchText) {
+      this.filteredProcessList = [];
+      for (let item of this.processList) {
+        if (item.name.includes(this.searchText) ||
+          item.command.includes(this.searchText) ||
+          item.user.includes(this.searchText) ||
+          item.state.includes(this.searchText) ||
+          item.pid == this.searchText) {
+          this.filteredProcessList.push(item);
+        }
+      }
+    } else {
+      this.filteredProcessList = [...this.processList];
+    }
+    if (this.sortingField != -1) {
+      this.filteredProcessList.sort((a: any, b: any) => {
+        switch (this.sortingField) {
+          case 0:
+            return this.sortAsc ? a.name.localeCompare(b.name) : b.name.localeCompare(a.name);
+          case 1:
+            return this.numberCompare(a.pid, b.pid);
+          case 2:
+            return this.numberCompare(a.priority, b.priority);
+          case 3:
+            return this.numberCompare(a.cpuUsage, b.cpuUsage);
+          case 4:
+            return this.numberCompare(a.memoryUsage, b.memoryUsage);
+          case 5:
+            return this.numberCompare(a.vmUsage, b.vmUsage);
+          case 6:
+            return this.sortAsc ? a.user.localeCompare(b.user) : b.user.localeCompare(a.user);
+          case 7:
+            return this.numberCompare(a.startTime, b.startTime);
+          case 8:
+            return this.sortAsc ? a.state.localeCompare(b.state) : b.state.localeCompare(a.state);
+          case 9:
+            return this.sortAsc ? a.command.localeCompare(b.command) : b.command.localeCompare(a.command);
+        }
+      });
+    }
+  }
+
+  toPercent(p: number): string {
+    if (p) {
+      return p.toFixed(1);
+    }
+    return "";
+  }
+
+  setSortField(index: number) {
+    this.sortingField = index;
+    this.sortAsc = !this.sortAsc;
+    this.filterProcesses();
+  }
+
+  formatSize(n: number): string {
+    return utility.formatSize(n);
+  }
+
+  toDate(n:number):Date{
+    return new Date(n);
+  }
 }

ui/src/app/utility/utils.ts

@@ -1,5 +1,5 @@
-const GB = 1024 * 1024 * 1024;
-const MB = 1024 * 1024;
+const GB = 1024 * 1000 * 1000;
+const MB = 1024 * 1000;
 const KB = 1024;
 export const utility = {