Adding and removing samples from chart
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
index b2c5d50..3c83532 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/css/ceilometerDashboard.css
@@ -19,7 +19,11 @@
height: 300px;
}
- /* Loader */
+ .btn-chart, .btn-chart:hover {
+ color: #fff;
+ }
+
+ /* LOADER */
.loader {
font-size: 10px;
margin: 50px auto;
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
index ab302e0..5085813 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/js/main.js
@@ -46,7 +46,7 @@
this.sliceDetails = {};
this.formatSliceDetails = (meters) => {
-
+
};
this.getMeters = () => {
@@ -151,7 +151,7 @@
templateUrl: 'templates/ceilometer-samples.tpl.html',
controller: function(Ceilometer) {
- Chart.defaults.global.colours = [
+ this.chartColors = [
'#286090',
'#F7464A',
'#46BFBD',
@@ -160,6 +160,14 @@
'#4D5360',
'#8c4f9f'
];
+
+ this.chart = {
+ series: [],
+ labels: [],
+ data: []
+ }
+
+ Chart.defaults.global.colours = this.chartColors;
this.chartType = 'line';
@@ -171,7 +179,7 @@
// Mock
/**
- * Goe trough the array and format date to be used as labels
+ * Goes trough the array and format date to be used as labels
*
* @param Array data
* @returns Array a list of labels
@@ -186,7 +194,7 @@
};
/**
- * Goe trough the array and return a flat array of values
+ * Goes trough the array and return a flat array of values
*
* @param Array data
* @returns Array a list of values
@@ -199,11 +207,46 @@
}, []);
}
- this.addMeterToChart = (project_id) => {
- this.chart['series'].push(project_id);
- this.chart['data'].push(this.getData(this.samplesList[project_id]))
+ /**
+ * Add a samples to the chart
+ *
+ * @param string resource_id
+ */
+ this.chartMeters = [];
+ this.addMeterToChart = (resource_id) => {
+ this.chart['labels'] = this.getLabels(lodash.sortBy(this.samplesList[resource_id], 'timestamp'));
+ this.chart['series'].push(resource_id);
+ this.chart['data'].push(this.getData(lodash.sortBy(this.samplesList[resource_id], 'timestamp')));
+ this.chartMeters.push(resource_id);
+ lodash.remove(this.sampleLabels, {id: resource_id});
}
+ this.removeFromChart = (resource_id) => {
+ this.chart.data.splice(this.chart.series.indexOf(resource_id), 1);
+ this.chart.series.splice(this.chart.series.indexOf(resource_id), 1);
+ this.chartMeters.splice(this.chartMeters.indexOf(resource_id), 1);
+ this.sampleLabels.push({
+ id: resource_id,
+ // TODO add resource name
+ })
+ };
+
+ /**
+ * Format samples to create a list of labels and ids
+ */
+
+ this.formatSamplesLabels = (samples) => {
+
+ return lodash.uniq(samples.reduce((labels, item) => {
+ labels.push({
+ id: item.resource_id,
+ // TODO add resource name
+ });
+ return labels;
+ }, []), item => item.id);
+ }
+
+
/**
* Load the samples and format data
*/
@@ -213,15 +256,14 @@
// Ceilometer.getSamples(this.name, this.tenant) //fetch one
Ceilometer.getSamples(this.name) //fetch all
.then(res => {
- console.log(res);
+
+ // setup data for visualization
this.samplesList = lodash.groupBy(res, 'resource_id');
- console.log(this.samplesList);
- res = lodash.sortBy(this.samplesList[this.tenant], 'timestamp');
- this.chart = {
- series: [this.tenant],
- labels: this.getLabels(res),
- data: [this.getData(res)]
- }
+ this.sampleLabels = this.formatSamplesLabels(res);
+
+ // add current meter to chart
+ this.addMeterToChart(this.tenant);
+
})
.catch(err => {
console.warn(err);
diff --git a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
index 8f1578d..9eb4638 100644
--- a/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
+++ b/xos/core/xoslib/ngXosViews/ceilometerDashboard/src/templates/ceilometer-samples.tpl.html
@@ -10,10 +10,9 @@
</a>
</div>
</div>
-
<div class="row" ng-if="!vm.loader">
<form class="form-inline col-xs-8" ng-submit="vm.addMeterToChart(vm.addMeterValue)">
- <select ng-model="vm.addMeterValue" class="form-control" ng-options="project as project for (project, meter) in vm.samplesList"></select>
+ <select ng-model="vm.addMeterValue" class="form-control" ng-options="resource.id as resource.id for resource in vm.sampleLabels"></select>
<button class="btn btn-success">
<i class="glyphicon glyphicon-plus"></i> Add
</button>
@@ -31,10 +30,12 @@
<div class="col-xs-12" ng-if="!vm.loader">
<canvas ng-if="vm.chartType === 'line'" id="line" class="chart chart-line" chart-data="vm.chart.data" chart-options="{datasetFill: false}"
- chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
+ chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
</canvas>
<canvas ng-if="vm.chartType === 'bar'" id="bar" class="chart chart-bar" chart-data="vm.chart.data"
- chart-labels="vm.chart.labels" chart-legend="true" chart-series="vm.chart.series">
- </canvas>
+ chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
+ </canvas>
+ <!-- <pre>{{vm.chartMeters | json}}</pre> -->
+ <a ng-click="vm.removeFromChart(meter)" class="btn btn-chart" ng-style="{'background-color': vm.chartColors[$index]}" ng-repeat="meter in vm.chartMeters">{{meter}}</a>
</div>
</div>
\ No newline at end of file