Skip to content
This repository has been archived by the owner on Nov 9, 2017. It is now read-only.

Commit

Permalink
Add data for individual CPUs. Also sort startup.
Browse files Browse the repository at this point in the history
  • Loading branch information
@pilhuhn
pilhuhn committed Oct 20, 2015
1 parent 84ee1e5 commit 82e478c
Show file tree
Hide file tree
Showing 3 changed files with 185 additions and 80 deletions.
125 changes: 85 additions & 40 deletions console/src/main/scripts/plugins/metrics/html/app-details/detail-platform.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<section id="hk-platform-metrics" class="hk-tab-content">
<section id="hk-platform-metrics" class="hk-tab-content" xmlns="http://www.w3.org/1999/html">

<h3 class="pull-left">Platform Status</h3>

Expand Down Expand Up @@ -82,63 +82,108 @@ <h2>Memory Usage</h2>

<div class="panel panel-default hk-graph" ng-if="os.chartCpuData">
<h2>CPU Usage</h2>
<!-- cpu summary usage over all cpus -->
<div class="hk-graph-container hk-graph-metrics" ng-if="os.resolvedCPUData">
<!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
<hawkular-chart
data="os.chartCpuData"
chart-type="hawkularmetric"
chart-type="rhqbar"
hide-high-low-values="false"
y-axis-units="Usage (%)"
chart-height="250">
</hawkular-chart>
</div>

<!-- mini charts per cpu -->
<div ng-if="os.resolvedCPUData">
<!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
<div class="panel panel-default hk-summary">
<div class="row">

<div class="hk-resource-container" ng-repeat="cpu in os.processorList">
<div class="hk-graph-container hk-graph-metrics">
<span class="hk-data" ng-show="os.chartCpuDataMulti[cpu]">
<hawkular-chart
data="os.chartCpuDataMulti[cpu]"
chart-type="rhqbar"
hide-high-low-values="false"
y-axis-units="Usage (%)"
chart-height="150">
</hawkular-chart>
</span>
<span class="hk-data" ng-show="!os.chartCpuDataMulti[cpu]">Loading ...</span>
<span class="hk-item">{{os.processorListNames[cpu]}}</span>
</div>
</div>
</div>
</div>
</div>
</div>

<div class="panel panel-default hk-graph">
<h2>File System usage</h2>


<div class="hk-resource-container"
ng-repeat="fs in os.fileStoreList">
ng-repeat="fs in os.fileStoreList | filter: os.filter| orderBy:'properties.name':osSortInv">

<div class="panel panel-default hk-summary">
<div class="panel-heading">
<span class="hk-heading">{{fs.properties.name}}</span>
</div>
<div class="hk-panel-collapse-area" ng-class="{'hk-collapsed' : !os.expandedList[fs.id]}">
<a href="#" ng-click="os.expandedList[fs.id] = !os.expandedList[fs.id]">
<span ng-hide="os.expandedList[fs.id]">View Metrics</span>
<span ng-show="os.expandedList[fs.id]">Hide Metrics</span>
<i class="fa"
ng-class="os.expandedList[fs.id] ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></i>
</a>
</div>
<div class="panel panel-default hk-summary">
<div class="panel-heading">
<span class="hk-heading pull-left">{{fs.properties.name}}</span>
</div>
<div class="row"></div>
</div>
<div class="hk-panel-collapse-area" ng-class="{'hk-collapsed' : !os.expandedList[fs.id]}">
<a href="#" ng-click="os.expandedList[fs.id] = !os.expandedList[fs.id]">
<span ng-hide="os.expandedList[fs.id]">View Metrics</span>
<span ng-show="os.expandedList[fs.id]">Hide Metrics</span>
<i class="fa"
ng-class="os.expandedList[fs.id] ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></i>
</a>
</div>

<div class="hk-collapsible-area" ng-class="{ 'hide': !os.expandedList[fs.id]}" ng-if="os.expandedList[fs.id]">

<div class="hk-collapsible-area" ng-class="{ 'hide': !os.expandedList[fs.id]}"
ng-if="os.expandedList[fs.id]">

<div class="hk-info-top clearfix">
<h3 class="pull-left">Metrics</h3>

<div class="hk-update pull-right">
<button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>

<div class="hk-graph-container hk-graph-metrics" ng-if="os.resolvedChartFileSystemData[fs.id]">
<!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
<hawkular-chart
multi-data="os.chartFileSystemData[fs.id]"
chart-type="multiline"
y-axis-units="FS Usage (MB)"
chart-height="250">
</hawkular-chart>
</div>
<div class="hk-legend text-left hk-legend-metrics">
<div class="hk-info-top clearfix">
<h3 class="pull-left">Metrics</h3>

<div class="hk-update pull-right">
<button class="btn btn-link hk-chart-update" tooltip-trigger tooltip-placement="top" tooltip="Update chart">
<i class="fa fa-refresh"></i>
</button>
</div>
</div>

<div class="panel panel-default hk.graph" ng-if="os.resolvedChartFileSystemData[fs.id]">
<div class="hk-graph-container hk-graph-metrics">
<!-- HINT: colors for the chart can be changed in the hawkular-charts.css -->
<hawkular-chart
multi-data="os.chartFileSystemData[fs.id]"
chart-type="multiline"
y-axis-units="FS Usage (MB)"
chart-height="250">
</hawkular-chart>
</div>
<div class="hk-legend text-left hk-legend-metrics">
<div class="col-md-12">
<h4>Connection Availability</h4>
<div class="hk-graphselector hk-orange">
<input id="connavail_{{$index}}" type="checkbox"
ng-checked="!os.skipChartData[fs.id + '_Total']"
ng-click="os.toggleChartData(fs.id + '_Total')">
<label for="connavail_{{$index}}"><span>Total space</span></label>
</div>
<div class="hk-graphselector hk-blue">
<input id="conninuse_{{$index}}" type="checkbox"
ng-checked="!os.skipChartData[fs.id + '_Free']"
ng-click="os.toggleChartData(fs.id + '_Free')">
<label for="conninuse_{{$index}}"><span>Free space</span></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</section>
139 changes: 99 additions & 40 deletions console/src/main/scripts/plugins/metrics/ts/app-details/appServerPlatformDetails.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,9 @@ module HawkularMetrics {
public alertList;
public fileStoreList;
public processorList;
public processorListNames;
public chartCpuData:IChartDataPoint[];
public chartCpuDataMulti:IChartDataPoint[];
public chartFileSystemData;//:IMultiDataPoint[];
public startTimeStamp:TimestampInMillis;
public endTimeStamp:TimestampInMillis;
Expand Down Expand Up @@ -80,30 +82,30 @@ module HawkularMetrics {
this.endTimeStamp = +moment();
this.chartCpuData = [];
this.chartFileSystemData = {};
this.chartCpuDataMulti = [];
this.feedId= this.$routeParams.resourceId.split('~')[0];

if ($rootScope.currentPersona) {
this.$log.log('We have have a persona');
this.getProcessors();
this.getFileSystems();
this.getPlatformData();
this.getCPUMemoryChartData();
this.getFSChartData();
this.setup();
} else {
// currentPersona hasn't been injected to the rootScope yet, wait for it..
$rootScope.$watch('currentPersona',
(currentPersona) => currentPersona
&& this.getProcessors()
&& this.getFileSystems()
&& this.getPlatformData());
(currentPersona) => currentPersona && this.setup());
}

//this.getAlerts(this.$routeParams.resourceId, this.startTimeStamp, this.endTimeStamp);


this.autoRefresh(20);
}

private setup() {
this.getProcessors();
this.getFileSystems();
this.getPlatformData();
this.refresh();
};

private getAlerts(metricIdPrefix:string, startTime:TimestampInMillis, endTime:TimestampInMillis):void {
let pheapArray:any, nheapArray:any, garbaArray:any;
let pheapPromise = this.HawkularAlertsManager.queryAlerts({statuses:'OPEN',
Expand Down Expand Up @@ -146,10 +148,7 @@ module HawkularMetrics {

private autoRefresh(intervalInSeconds:number):void {
this.autoRefreshPromise = this.$interval(() => {
//this.getFileSystems();
this.getPlatformData();
this.getCPUMemoryChartData();
this.getFSChartData();
this.refresh();
//this.getAlerts(this.$routeParams.resourceId, this.startTimeStamp, this.endTimeStamp);
}, intervalInSeconds * 1000);

Expand All @@ -158,6 +157,14 @@ module HawkularMetrics {
});
}

private refresh() {
this.getPlatformData();
this.getCPUChartData();
this.getMemoryChartData();
this.getFSChartData();
this.getCpuChartDetailData();
};

public getFileSystems(): any {
this.$log.log('getFileSystems');
this.endTimeStamp = this.$routeParams.endTime || +moment();
Expand Down Expand Up @@ -198,12 +205,16 @@ this.$log.log('getProcessors');
let tmpResourceList = [];
this.$q.all(promises).then(() => {
this.processorList = []; // aResourceList;
this.processorListNames = [];
// Generate metric key from resource id
for (var i = 0; i < aResourceList.length;i++) {
let tmp:string = this.feedId + '~MI~R~[' + aResourceList[i].id + ']~MT~CPU Usage';
this.processorList[i] = tmp;
this.processorListNames[tmp] = aResourceList[i].id;

}
this.$log.log('Success, got CPUs ' + aResourceList.length);
this.getCPUChartData();
});
},
() => { // error
Expand Down Expand Up @@ -245,6 +256,7 @@ this.$log.log('getPlatformData');
}

public getFSChartData():void {
this.$log.log('getFSChartData');
this.endTimeStamp = this.$routeParams.endTime || +moment();
this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);

Expand All @@ -255,57 +267,105 @@ this.$log.log('getPlatformData');
let tmpChartAvailData = {};

angular.forEach(this.fileStoreList, function(res, idx) {
if (!this.skipChartData[res.id + '_Free']) {
availPromises.push(this.HawkularMetric.GaugeMetricData(tenantId).queryMetrics({
gaugeId: this.feedId + '~MI~R~[' + res.id + ']~MT~Usable Space',
start: this.startTimeStamp,
end: this.endTimeStamp, buckets: 60
gaugeId: this.feedId + '~MI~R~[' + res.id + ']~MT~Usable Space',
start: this.startTimeStamp,
end: this.endTimeStamp, buckets: 60
}, (data) => {
tmpChartAvailData[res.id] = tmpChartAvailData[res.id] || [];
tmpChartAvailData[res.id][tmpChartAvailData[res.id].length] = {
key: 'Usable Space',
color: AppServerPlatformDetailsController.USED_COLOR,
values: MetricsService.formatBucketedChartOutput(data,1/(1024*1024))
};
tmpChartAvailData[res.id] = tmpChartAvailData[res.id] || [];
tmpChartAvailData[res.id][tmpChartAvailData[res.id].length] = {
key: 'Usable Space',
color: AppServerPlatformDetailsController.USED_COLOR,
values: MetricsService.formatBucketedChartOutput(data, 1 / (1024 * 1024))
};
}, this).$promise);
}
if (!this.skipChartData[res.id + '_Total']) {
availPromises.push(this.HawkularMetric.GaugeMetricData(tenantId).queryMetrics({
gaugeId: this.feedId + '~MI~R~[' + res.id + ']~MT~Total Space',
start: this.startTimeStamp,
end: this.endTimeStamp, buckets: 60
gaugeId: this.feedId + '~MI~R~[' + res.id + ']~MT~Total Space',
start: this.startTimeStamp,
end: this.endTimeStamp,
buckets: 60
}, (data) => {
tmpChartAvailData[res.id] = tmpChartAvailData[res.id] || [];
tmpChartAvailData[res.id][tmpChartAvailData[res.id].length] = {
key: 'Total Space',
color: AppServerPlatformDetailsController.MAXIMUM_COLOR,
values: MetricsService.formatBucketedChartOutput(data,1/(1024*1024))
};
tmpChartAvailData[res.id] = tmpChartAvailData[res.id] || [];
tmpChartAvailData[res.id][tmpChartAvailData[res.id].length] = {
key: 'Total Space',
color: AppServerPlatformDetailsController.MAXIMUM_COLOR,
values: MetricsService.formatBucketedChartOutput(data, 1 / (1024 * 1024))
};
}, this).$promise);
this.$q.all(availPromises).finally(()=> {
this.chartFileSystemData[res.id] = tmpChartAvailData[res.id] || [];
this.resolvedChartFileSystemData[res.id] = true;
});
}
this.$q.all(availPromises).finally(()=> {
this.chartFileSystemData[res.id] = tmpChartAvailData[res.id] || [];
this.resolvedChartFileSystemData[res.id] = true;
});
},this);
}

public getCPUMemoryChartData():void {
public getCPUChartData():void {
this.$log.log('getCPUChartData');

let tenantId:TenantId = this.$rootScope.currentPersona.id;

this.endTimeStamp = this.$routeParams.endTime || +moment();
this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);

if (this.processorList) {
this.$log.log('Got cpus: ' + this.processorList);
if (this.processorList) {

this.HawkularMetric.GaugeMetricMultipleStats(this.$rootScope.currentPersona.id).get({
metrics: this.processorList,
start: this.startTimeStamp,
end: this.endTimeStamp,
buckets: 60
}, (resource) => {
if (resource.length) {
this.chartCpuData = MetricsService.formatBucketedChartOutput(resource,100);
this.chartCpuData = MetricsService.formatBucketedChartOutput(resource, 100);
this.resolvedCPUData = true;
}
}, this);
}
}

public getCpuChartDetailData():void {

let tenantId:TenantId = this.$rootScope.currentPersona.id;

this.endTimeStamp = this.$routeParams.endTime || +moment();
this.startTimeStamp = this.endTimeStamp - (this.$routeParams.timeOffset || 3600000);

this.$log.log('CPU Chart detail Got cpus: ' + this.processorList);
if (this.processorList) {


let cpuPromises = [];
let tmpChartData = {};
let res:string = '';

//for (var i = 0; i < this.processorList.length;i++) {
angular.forEach(this.processorList, function(res:string, idx) {
//res = this.processorList[i];

cpuPromises.push(this.HawkularMetric.GaugeMetricData(tenantId).queryMetrics({
gaugeId: res,
start: this.startTimeStamp,
end: this.endTimeStamp,
buckets: 60
}, (data) => {
this.$log.log('Loaded ' + res);
//tmpChartData[res] = MetricsService.formatBucketedChartOutput(data, 100);
this.chartCpuDataMulti[res] = MetricsService.formatBucketedChartOutput(data, 100);
}, this).$cpuPromise);
this.$q.all(cpuPromises).then(() => {
//this.chartCpuDataMulti[res] = tmpChartData[res] || [];
});
},this);
}
}

public getMemoryChartData():void {
this.$log.log('getMemoryChartData');

this.HawkularMetric.GaugeMetricData(this.$rootScope.currentPersona.id).queryMetrics({
gaugeId: this.feedId + '~MI~R~[' + 'Memory' + ']~MT~Available Memory',
Expand All @@ -322,7 +382,6 @@ this.$log.log('getPlatformData');

public toggleChartData(name): void {
this.skipChartData[name] = !this.skipChartData[name];
this.getCPUMemoryChartData();
}

}
Expand Down

0 comments on commit 82e478c

Please sign in to comment.