Permalink
Browse files

feat(dashboard): cpu utilization by core

  • Loading branch information...
jkuri committed Sep 15, 2017
1 parent 5307093 commit f6f54f0f6bd7a1244aa1a315a15532866b4e3fa9
@@ -14,7 +14,8 @@ export function cpu(): Observable<IOutput> {
.mergeMap(() => cpuLoad())
.map((res: ICpuData) => {
return { type: 'cpu', data: res };
});
})
.share();
}

function cpuLoad(): Promise<ICpuData> {
@@ -13,7 +13,8 @@ export function memory(): Observable<IOutput> {
.mergeMap(() => getMemory())
.map((res: IMemoryData) => {
return { type: 'memory', data: res };
});
})
.share();
}

function getMemory(): Promise<IMemoryData> {
@@ -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>
@@ -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);
}
});

@@ -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

0 comments on commit f6f54f0

Please sign in to comment.