Intercepting 500 errors and switched samples to resource id, still to be tested
diff --git a/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
new file mode 100644
index 0000000..1bcb838
--- /dev/null
+++ b/views/ngXosViews/ceilometerDashboard/src/js/samples.directive.js
@@ -0,0 +1,164 @@
+/**
+ * © OpenCORD
+ *
+ * Visit http://guide.xosproject.org/devguide/addview/ for more information
+ *
+ * Created by teone on 3/21/16.
+ */
+
+(function () {
+ 'use strict';
+
+ angular.module('xos.ceilometerDashboard')
+ .directive('ceilometerSamples', function(lodash, $stateParams){
+ return {
+ restrict: 'E',
+ scope: {},
+ bindToController: true,
+ controllerAs: 'vm',
+ templateUrl: 'templates/ceilometer-samples.tpl.html',
+ controller: function(Ceilometer) {
+
+ // console.log(Ceilometer.selectResource);
+
+ this.chartColors = [
+ '#286090',
+ '#F7464A',
+ '#46BFBD',
+ '#FDB45C',
+ '#97BBCD',
+ '#4D5360',
+ '#8c4f9f'
+ ];
+
+ this.chart = {
+ series: [],
+ labels: [],
+ data: []
+ }
+
+ Chart.defaults.global.colours = this.chartColors;
+
+ this.chartType = 'line';
+
+ if($stateParams.name && $stateParams.tenant){
+ this.name = $stateParams.name;
+ this.tenant = $stateParams.tenant;
+ // TODO rename tenant in project_id
+ }
+ else{
+ throw new Error('Missing Name and Tenant Params!');
+ }
+
+ /**
+ * Goes trough the array and format date to be used as labels
+ *
+ * @param Array data
+ * @returns Array a list of labels
+ */
+
+ this.getLabels = (data) => {
+ return data.reduce((list, item) => {
+ let date = new Date(item.timestamp);
+ list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`);
+ return list;
+ }, []);
+ };
+
+ /**
+ * Goes trough the array and return a flat array of values
+ *
+ * @param Array data
+ * @returns Array a list of values
+ */
+
+ this.getData = (data) => {
+ return data.reduce((list, item) => {
+ list.push(item.volume);
+ return list;
+ }, []);
+ }
+
+ /**
+ * 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(this.samplesList[resource_id][0]); //use the 0 as are all samples for the same resource and I need the name
+ lodash.remove(this.sampleLabels, {id: resource_id});
+ }
+
+ this.removeFromChart = (meter) => {
+ this.chart.data.splice(this.chart.series.indexOf(meter.resource_id), 1);
+ this.chart.series.splice(this.chart.series.indexOf(meter.resource_id), 1);
+ this.chartMeters.splice(lodash.findIndex(this.chartMeters, {resource_id: meter.resource_id}), 1);
+ this.sampleLabels.push({
+ id: meter.resource_id,
+ name: meter.resource_name || meter.resource_id
+ })
+ };
+
+ /**
+ * Format samples to create a list of labels and ids
+ */
+
+ this.formatSamplesLabels = (samples) => {
+
+ return lodash.uniq(samples, 'resource_id')
+ .reduce((labels, item) => {
+ labels.push({
+ id: item.resource_id,
+ name: item.resource_name || item.resource_id
+ });
+
+ return labels;
+ }, []);
+ }
+
+
+ /**
+ * Load the samples and format data
+ */
+
+ this.showSamples = () => {
+ this.loader = true;
+ // Ceilometer.getSamples(this.name, this.tenant) //fetch one
+ Ceilometer.getSamples(this.name) //fetch all
+ .then(res => {
+
+ // rename things in UI
+ res.map(m => {
+ m.resource_name = m.resource_name.replace('mysite_onos_vbng', 'ONOS_FABRIC');
+ m.resource_name = m.resource_name.replace('mysite_onos_volt', 'ONOS_CORD');
+ m.resource_name = m.resource_name.replace('mysite_vbng', 'mysite_vRouter');
+ return m;
+ });
+ // end rename things in UI
+
+ // setup data for visualization
+ this.samplesList = lodash.groupBy(res, 'resource_id');
+ this.sampleLabels = this.formatSamplesLabels(res);
+
+ // add current meter to chart
+ this.addMeterToChart(this.tenant);
+
+ })
+ .catch(err => {
+ this.error = err.data.detail;
+ })
+ .finally(() => {
+ this.loader = false;
+ });
+ };
+
+ this.showSamples();
+ }
+ }
+ });
+})();
+