minor changes

app/src/main/java/cloudshell/app/health/SystemHealthMonitor.java

@@ -82,6 +82,17 @@ public class SystemHealthMonitor {
 		return stats;
 	}
 
+	private String formatCmd(String args) {
+		StringBuilder sb = new StringBuilder();
+		for (char ch : args.toCharArray()) {
+			if (ch == 0) {
+				sb.append(" ");
+			}
+			sb.append(ch);
+		}
+		return sb.toString();
+	}
+
 	public synchronized List<ProcessInfo> getProcessList() {
 		OSProcess[] procs = os.getProcesses(0, null, false);
 		List<ProcessInfo> list = new ArrayList<>();

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

@@ -1,5 +1,10 @@
 <div
   style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: white; z-index: 10;">
+  <div *ngIf="message" (click)="message=null" style="cursor: pointer;;padding: 10px; position: absolute; z-index: 255; top: 20px; right: 20px; opacity: 0.78; width: 250px; border-radius: 10px; box-shadow: 2px 2px 15px 5px black ;" [style.background]="error?'darkred':'green'">
+    <span style="color: white;">
+      {{message}}
+    </span>
+  </div>
   <div style="display: flex; justify-content: space-around; flex-wrap: wrap; padding: 20px;">
     <div>
       <div style="text-align: center; padding: 10px; font-size: 20px;">
@@ -135,3 +140,9 @@
     </table>
   </div>
 </div>
+
+<div *ngIf="loading" style="height: calc(100vh - 55px); width: 100vw; display: flex; flex-direction: column; position: fixed; top: 55px; left: 0px; background: rgba(0,0,0,0.1); z-index: 101; justify-content: center; align-items: center;">
+  <div class="spinner-border text-primary" style="width: 5rem; height: 5rem; font-size: 30px;" role="status">
+    <span class="sr-only">Loading...</span>
+  </div>
+</div>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, OnDestroy } from '@angular/core';
 import { ChartType, ChartOptions } from 'chart.js';
 import { MultiDataSet, Label, Colors, Color } from 'ng2-charts';
 import { DataService } from 'src/app/data.service';
@@ -12,7 +12,7 @@ import { utility } from '../../utility/utils';
     '(window:resize)': 'onResize($event)'
   }
 })
-export class MonitoringComponent implements OnInit {
+export class MonitoringComponent implements OnInit, OnDestroy {
 
   public doughnutChartLabels: Label[] = ['Used', 'Free'];
   public colors: Color[] = [
@@ -54,6 +54,9 @@ export class MonitoringComponent implements OnInit {
   searchText: string;
   sortingField: number = -1;
   sortAsc: boolean;
+  loading: boolean;
+  message: string;
+  error: boolean;
 
   constructor(private service: DataService) { }
 
@@ -65,13 +68,25 @@ export class MonitoringComponent implements OnInit {
     }, 5000);
   }
 
+  ngOnDestroy() {
+    if (this.timer) {
+      clearInterval(this.timer);
+    }
+  }
+
   public getProcStats() {
+    this.loading = true;
     this.service.getProcessList().subscribe((resp: any[]) => {
       this.processList = resp;
       for (let proc of this.processList) {
         proc.selected = false;
       }
       this.filterProcesses();
+      this.loading = false;
+    }, err => {
+      this.loading = false;
+      this.message = "Unable to get process details";
+      this.error = true;
     });
   }
 
@@ -87,12 +102,22 @@ export class MonitoringComponent implements OnInit {
       return;
     }
 
+    this.loading = true;
     this.service.killProcesses(pids).subscribe((resp: any) => {
       if (!resp.success) {
-        alert("Failed to kill");
+        //alert("Failed to kill");
+        this.message = "Failed to kill one or more selected processes";
+        this.error = true;
+        this.loading = false;
       } else {
+        this.message = "Selected processes are killed successfully";
+        this.error = false;
         this.getProcStats();
       }
+    }, err => {
+      this.message = "Failed to kill one or more selected processes";
+      this.error = true;
+      this.loading = false;
     })
   }