feat(dashboard): cpu utilization by core

bleenco · Sep 15, 2017 · f6f54f0 · f6f54f0
1 parent 5307093
commit f6f54f0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 9 deletions.
diff --git a/src/api/stats/cpu.ts b/src/api/stats/cpu.ts
@@ -14,7 +14,8 @@ export function cpu(): Observable<IOutput> {
     .mergeMap(() => cpuLoad())
     .map((res: ICpuData) => {
       return { type: 'cpu', data: res };
-    });
+    })
+    .share();
 }
 
 function cpuLoad(): Promise<ICpuData> {

diff --git a/src/api/stats/memory.ts b/src/api/stats/memory.ts
@@ -13,7 +13,8 @@ export function memory(): Observable<IOutput> {
     .mergeMap(() => getMemory())
     .map((res: IMemoryData) => {
       return { type: 'memory', data: res };
-    });
+    })
+    .share();
 }
 
 function getMemory(): Promise<IMemoryData> {

diff --git a/src/app/components/app-dashboard/app-dashboard.component.html b/src/app/components/app-dashboard/app-dashboard.component.html
@@ -30,13 +30,6 @@ <h1>Dashboard</h1>
             </div>
           </div>
           <div class="column is-5">
-            <div class="content-box">
-              <div class="content-box-header">
-                <h2>CPU</h2>
-                <h3>Total CPU Usage</h3>
-              </div>
-              <app-progress-chart [percent]="cpuPercent"></app-progress-chart>
-            </div>
             <div class="content-box">
               <div class="content-box-header">
                 <h2>Memory</h2>
@@ -65,6 +58,28 @@ <h3>Overall Memory Consumption</h3>
                 </span>
               </div>
             </div>
+            <div class="content-box">
+              <div class="content-box-header">
+                <h2>CPU</h2>
+                <h3>Total CPU Usage</h3>
+              </div>
+              <app-progress-chart [percent]="cpuPercent"></app-progress-chart>
+            </div>
+            <div class="content-box" *ngIf="cpuCores?.length">
+              <div class="content-box-header">
+                <h2>CPU Cores</h2>
+                <h3>CPU Cores Utilization</h3>
+              </div>
+              <div class="info-data-container" *ngFor="let core of cpuCores; let i = index">
+                <span class="label-txt">Core {{ i }}</span>
+                <div class="data-progress-container green">
+                  <span class="data-progress-bar" [style.width]="core + '%'"></span>
+                </div>
+                <span class="data-txt">
+                  {{ core }}%
+                </span>
+              </div>
+            </div>
           </div>
 
         </div>

diff --git a/src/app/components/app-dashboard/app-dashboard.component.ts b/src/app/components/app-dashboard/app-dashboard.component.ts
@@ -1,6 +1,7 @@
 import { Component, OnInit, OnDestroy } from '@angular/core';
 import { StatsService } from '../../services/stats.service';
 import { Subscription } from 'rxjs/Subscription';
+import { schemeCategory20b } from 'd3';
 
 @Component({
   selector: 'app-dashboard',
@@ -9,20 +10,24 @@ import { Subscription } from 'rxjs/Subscription';
 export class AppDashboardComponent implements OnInit, OnDestroy {
   loading: boolean;
   sub: Subscription;
+  colors: string[];
   memory: { total: number, free: number, used: number };
   memoryHuman: { total: string, free: string, used: string };
   memoryPercentage: string;
   runs: { success: {}, failed: {} };
   cpuPercent: number;
+  cpuCores: number[];
 
   constructor(private statsService: StatsService) {
     this.loading = true;
 
+    this.colors = schemeCategory20b;
     this.memory = { total: null, free: null, used: null };
     this.memoryHuman = { total: null, free: null, used: null };
     this.memoryPercentage = '0';
     this.runs = { success: {}, failed: {} };
     this.cpuPercent = 0;
+    this.cpuCores = [];
   }
 
   ngOnInit() {
@@ -45,6 +50,7 @@ export class AppDashboardComponent implements OnInit, OnDestroy {
         this.memoryPercentage = Number(this.memory.used / this.memory.total * 100).toFixed(2);
       } else if (e.type === 'cpu') {
         this.cpuPercent = e.data.load;
+        this.cpuCores = e.data.cores.map(core => core.total);
       }
     });
 

diff --git a/src/app/styles/dashboard.sass b/src/app/styles/dashboard.sass
@@ -36,9 +36,14 @@
 
     .label-txt
       color: $color
+      min-width: 50px
+      font-size: 13px
+      font-weight: $weight-semibold
 
     .data-txt
       color: $color-secondary
+      min-width: 20px
+      text-align: center
 
   .data-progress-container
     height: 4px