Add stats and quota information for cluster table view
Change-Id: I8d3fa946667429eb9b7581858a586f6cb783fa5b
This commit is contained in:
Shu Muto
parent
1972ddfe8e
commit
7f06143158
@ -0,0 +1,94 @@
|
|||||||
|
/**
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||||
|
* not use this file except in compliance with the License. You may obtain
|
||||||
|
* a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @ngdoc controller
|
||||||
|
* @name clusterStatsController
|
||||||
|
* @ngController
|
||||||
|
*
|
||||||
|
* @description
|
||||||
|
* Controller to show stats and quota charts for cluster in cluster table view
|
||||||
|
*/
|
||||||
|
angular
|
||||||
|
.module('horizon.dashboard.container-infra.clusters')
|
||||||
|
.controller(
|
||||||
|
'horizon.dashboard.container-infra.clusters.clusterStatsController',
|
||||||
|
clusterStatsController);
|
||||||
|
|
||||||
|
clusterStatsController.$inject = [
|
||||||
|
'$q',
|
||||||
|
'$scope',
|
||||||
|
'horizon.app.core.openstack-service-api.magnum',
|
||||||
|
'horizon.app.core.openstack-service-api.userSession'
|
||||||
|
];
|
||||||
|
|
||||||
|
function clusterStatsController($q, $scope, magnum, userSession) {
|
||||||
|
var ctrl = this;
|
||||||
|
ctrl.chartSettings = {
|
||||||
|
innerRadius: 24,
|
||||||
|
outerRadius: 48,
|
||||||
|
titleClass: "pie-chart-title-medium",
|
||||||
|
showTitle: false,
|
||||||
|
showLabel: true,
|
||||||
|
showLegend: false,
|
||||||
|
tooltipIcon: 'fa-square'
|
||||||
|
};
|
||||||
|
// Chart data is watched by pie-chart directive.
|
||||||
|
// So to refresh chart after retrieving data, update whole of 'data' array.
|
||||||
|
ctrl.chartDataClusters = {
|
||||||
|
maxLimit: 20,
|
||||||
|
data: []
|
||||||
|
};
|
||||||
|
// container for temporal chart data
|
||||||
|
var dataClusters = [];
|
||||||
|
userSession.get().then(onGetUserSession);
|
||||||
|
|
||||||
|
function onGetUserSession(session) {
|
||||||
|
ctrl.projectId = session.project_id;
|
||||||
|
magnum.getStats().then(onGetStats);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGetStats(response) {
|
||||||
|
ctrl.stats = response.data.stats;
|
||||||
|
dataClusters = [
|
||||||
|
{label: gettext("Exists"), value: response.data.stats.clusters, colorClass: "exists"},
|
||||||
|
{label: gettext("Margin"), value: 20 - response.data.stats.clusters, colorClass: "margin"}
|
||||||
|
];
|
||||||
|
magnum.getQuota(ctrl.projectId, "Cluster", true).then(onGetQuotaCluster, onGetQuotaCluster);
|
||||||
|
}
|
||||||
|
|
||||||
|
function onGetQuotaCluster(response) {
|
||||||
|
// set data for clusters chart
|
||||||
|
var sum = dataClusters[0].value;
|
||||||
|
var max = dataClusters[1].value;
|
||||||
|
if (response.data.hard_limit) {
|
||||||
|
max = response.data.hard_limit;
|
||||||
|
dataClusters[1].value = max - sum;
|
||||||
|
}
|
||||||
|
var percent = Math.round(sum / max * 100);
|
||||||
|
var overMax = percent > 100;
|
||||||
|
ctrl.chartDataClusters = {
|
||||||
|
title: gettext("Clusters"),
|
||||||
|
label: percent + '%',
|
||||||
|
maxLimit: max,
|
||||||
|
overMax: overMax,
|
||||||
|
data: dataClusters
|
||||||
|
};
|
||||||
|
ctrl.quota = {clusters: max};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})();
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
/**
|
||||||
|
* Licensed under the Apache License, Version 2.0 (the "License"); you may
|
||||||
|
* not use this file except in compliance with the License. You may obtain
|
||||||
|
* a copy of the License at
|
||||||
|
*
|
||||||
|
* http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
*
|
||||||
|
* Unless required by applicable law or agreed to in writing, software
|
||||||
|
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
|
||||||
|
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
|
||||||
|
* License for the specific language governing permissions and limitations
|
||||||
|
* under the License.
|
||||||
|
*/
|
||||||
|
|
||||||
|
(function() {
|
||||||
|
'use strict';
|
||||||
|
describe('horizon.dashboard.container-infra.clusters', function() {
|
||||||
|
var magnum, userSession, controller, $scope, $q, deferredSession, deferred, deferredQuota;
|
||||||
|
|
||||||
|
beforeEach(module('horizon.framework'));
|
||||||
|
beforeEach(module('horizon.app.core.openstack-service-api'));
|
||||||
|
beforeEach(module('horizon.dashboard.container-infra.clusters'));
|
||||||
|
|
||||||
|
beforeEach(inject(function ($injector, _$rootScope_, _$q_) {
|
||||||
|
$q = _$q_;
|
||||||
|
$scope = _$rootScope_.$new();
|
||||||
|
magnum = $injector.get('horizon.app.core.openstack-service-api.magnum');
|
||||||
|
userSession = $injector.get('horizon.app.core.openstack-service-api.userSession');
|
||||||
|
controller = $injector.get('$controller');
|
||||||
|
deferredSession = $q.defer();
|
||||||
|
deferredSession.resolve({project_id: "1"});
|
||||||
|
spyOn(userSession, 'get').and.returnValue(deferredSession.promise);
|
||||||
|
deferred = $q.defer();
|
||||||
|
deferred.resolve({data: {stats: {clusters: 1}}});
|
||||||
|
spyOn(magnum, 'getStats').and.returnValue(deferred.promise);
|
||||||
|
createController($scope);
|
||||||
|
}));
|
||||||
|
|
||||||
|
function createController($scoped) {
|
||||||
|
return controller(
|
||||||
|
'horizon.dashboard.container-infra.clusters.clusterStatsController',
|
||||||
|
{
|
||||||
|
$q: $q,
|
||||||
|
$scope: $scoped,
|
||||||
|
magnum: magnum,
|
||||||
|
userSession: userSession
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
it('should load user session', function() {
|
||||||
|
expect(userSession.get).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should load stats and quotas', function() {
|
||||||
|
deferredQuota = $q.defer();
|
||||||
|
deferredQuota.resolve({data: {hard_limit: 20}});
|
||||||
|
spyOn(magnum, 'getQuota').and.returnValue(deferredQuota.promise);
|
||||||
|
|
||||||
|
$scope.$apply();
|
||||||
|
expect(magnum.getStats).toHaveBeenCalled();
|
||||||
|
expect(magnum.getQuota).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should load stats and default quotas', function() {
|
||||||
|
deferredQuota = $q.defer();
|
||||||
|
deferredQuota.resolve({data: {hard_limit: null}});
|
||||||
|
spyOn(magnum, 'getQuota').and.returnValue(deferredQuota.promise);
|
||||||
|
|
||||||
|
$scope.$apply();
|
||||||
|
expect(magnum.getStats).toHaveBeenCalled();
|
||||||
|
expect(magnum.getQuota).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -0,0 +1,45 @@
|
|||||||
|
.pie-chart {
|
||||||
|
display: block;
|
||||||
|
.svg-pie-chart {
|
||||||
|
.slice {
|
||||||
|
&.exists {
|
||||||
|
fill: lighten(blue, 20%);
|
||||||
|
}
|
||||||
|
&.margin {
|
||||||
|
fill: $gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie-chart-legend {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 20px;
|
||||||
|
.slice-legend {
|
||||||
|
.slice-key {
|
||||||
|
&.exists {
|
||||||
|
background-color: lighten(blue, 20%);
|
||||||
|
}
|
||||||
|
&.margin {
|
||||||
|
background-color: $gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chartless {
|
||||||
|
&.exists {
|
||||||
|
color: lighten(blue, 20%);
|
||||||
|
}
|
||||||
|
&.margin {
|
||||||
|
color: $gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chart-tooltip {
|
||||||
|
span.fa {
|
||||||
|
&.exists {
|
||||||
|
color: lighten(blue, 20%);
|
||||||
|
}
|
||||||
|
&.margin {
|
||||||
|
color: $gray-lighter;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,4 +1,27 @@
|
|||||||
<hz-resource-panel resource-type-name="OS::Magnum::Cluster">
|
<hz-resource-panel resource-type-name="OS::Magnum::Cluster">
|
||||||
|
<div ng-controller="horizon.dashboard.container-infra.clusters.clusterStatsController as ctrl">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-12 detail">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-md-6">
|
||||||
|
<pie-chart chart-data="ctrl.chartDataClusters"
|
||||||
|
chart-settings="ctrl.chartSettings"></pie-chart>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
<h3 translate>Stats</h3>
|
||||||
|
<hr>
|
||||||
|
<dl class="dl-horizontal">
|
||||||
|
<dt translate>Clusters</dt>
|
||||||
|
<dd translate>Used {$ ctrl.stats.clusters $} of {$ ctrl.quota.clusters $}</dd>
|
||||||
|
<dt translate>Nodes</dt>
|
||||||
|
<dd>{$ ctrl.stats.nodes $}</dd>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<hr>
|
||||||
<hz-resource-table resource-type-name="OS::Magnum::Cluster"
|
<hz-resource-table resource-type-name="OS::Magnum::Cluster"
|
||||||
track-by="trackBy"></hz-resource-table>
|
track-by="trackBy"></hz-resource-table>
|
||||||
</hz-resource-panel>
|
</hz-resource-panel>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user