Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 1 | 'use strict'; |
| 2 | |
| 3 | angular.module('xos.ceilometerDashboard', [ |
| 4 | 'ngResource', |
| 5 | 'ngCookies', |
| 6 | 'ngLodash', |
| 7 | 'ui.router', |
| 8 | 'xos.helpers', |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 9 | 'ngAnimate', |
Matteo Scandolo | 0f5e163 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 10 | 'chart.js', |
| 11 | 'ui.bootstrap.accordion' |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 12 | ]) |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 13 | .config(($stateProvider, $urlRouterProvider) => { |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 14 | $stateProvider |
| 15 | .state('ceilometerDashboard', { |
| 16 | url: '/', |
| 17 | template: '<ceilometer-dashboard></ceilometer-dashboard>' |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 18 | }) |
| 19 | .state('samples', { |
| 20 | url: '/:name/:tenant/samples', |
| 21 | template: '<ceilometer-samples></ceilometer-samples>' |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 22 | }); |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 23 | $urlRouterProvider.otherwise('/'); |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 24 | }) |
| 25 | .config(function($httpProvider){ |
| 26 | $httpProvider.interceptors.push('NoHyperlinks'); |
| 27 | }) |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 28 | .run(function($rootScope){ |
| 29 | $rootScope.stateName = 'ceilometerDashboard'; |
| 30 | $rootScope.$on('$stateChangeStart', (event, toState) => { |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 31 | $rootScope.stateName = toState.name; |
| 32 | }) |
| 33 | }) |
Matteo Scandolo | 5dd9418 | 2015-12-09 17:09:55 -0800 | [diff] [blame] | 34 | .service('Ceilometer', function($http, $q, lodash){ |
Matteo Scandolo | d3e696d | 2015-12-08 15:24:23 -0800 | [diff] [blame] | 35 | |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 36 | this.resourceMap = {}; |
Matteo Scandolo | d3e696d | 2015-12-08 15:24:23 -0800 | [diff] [blame] | 37 | |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 38 | this.getMeters = () => { |
| 39 | let deferred = $q.defer(); |
| 40 | |
Matteo Scandolo | 5dd9418 | 2015-12-09 17:09:55 -0800 | [diff] [blame] | 41 | $http.get('/xoslib/meters/', {cache: true}) |
| 42 | // $http.get('../meters_mock.json', {cache: true}) |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 43 | .then((res) => { |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 44 | |
| 45 | // saving resources name and ids for later user, |
| 46 | // {resource_id: resource_name} |
| 47 | // NOTE REMOVE IF NOT ANYMORE NEEDED |
| 48 | const resourceObj = lodash.groupBy(res.data, 'resource_id'); |
| 49 | this.resourceMap = lodash.reduce(Object.keys(resourceObj), (map, item) => { |
| 50 | map[item] = resourceObj[item][0].resource_name; |
| 51 | return map; |
| 52 | }, {}); |
| 53 | |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 54 | deferred.resolve(res.data) |
| 55 | }) |
| 56 | .catch((e) => { |
| 57 | deferred.reject(e); |
| 58 | }); |
| 59 | |
| 60 | return deferred.promise; |
| 61 | } |
| 62 | |
| 63 | this.getSamples = (name, tenant) => { |
| 64 | let deferred = $q.defer(); |
| 65 | |
Matteo Scandolo | 6c78843 | 2015-12-07 17:32:39 -0800 | [diff] [blame] | 66 | $http.get(`/xoslib/metersamples/`, {params: {meter: name, tenant: tenant}}) |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 67 | .then((res) => { |
| 68 | deferred.resolve(res.data) |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 69 | }) |
| 70 | .catch((e) => { |
| 71 | deferred.reject(e); |
| 72 | }); |
| 73 | |
| 74 | return deferred.promise; |
| 75 | } |
Matteo Scandolo | 5dd9418 | 2015-12-09 17:09:55 -0800 | [diff] [blame] | 76 | |
| 77 | this.getStats = (sliceName) => { |
| 78 | let deferred = $q.defer(); |
| 79 | |
| 80 | $http.get('/xoslib/meterstatistics/', {cache: true}) |
| 81 | // $http.get('../stats_mock.son', {cache: true}) |
| 82 | .then((res) => { |
| 83 | deferred.resolve(lodash.filter(res.data, {slice: sliceName})) |
| 84 | }) |
| 85 | .catch((e) => { |
| 86 | deferred.reject(e); |
| 87 | }); |
| 88 | |
| 89 | return deferred.promise; |
| 90 | }; |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 91 | }) |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 92 | .directive('ceilometerDashboard', function(lodash){ |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 93 | return { |
| 94 | restrict: 'E', |
| 95 | scope: {}, |
| 96 | bindToController: true, |
| 97 | controllerAs: 'vm', |
| 98 | templateUrl: 'templates/ceilometer-dashboard.tpl.html', |
| 99 | controller: function(Ceilometer){ |
| 100 | |
| 101 | this.loadMeters = () => { |
| 102 | this.loader = true; |
| 103 | |
| 104 | Ceilometer.getMeters() |
| 105 | .then(meters => { |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 106 | //group project by service |
| 107 | this.projects = lodash.groupBy(meters, 'service'); |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 108 | lodash.forEach(Object.keys(this.projects), (project) => { |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 109 | // inside each service group by slice |
| 110 | this.projects[project] = lodash.groupBy(this.projects[project], 'slice'); |
| 111 | lodash.forEach(Object.keys(this.projects[project]), (slice) => { |
| 112 | // inside each service => slice group by resource |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 113 | this.projects[project][slice] = lodash.groupBy(this.projects[project][slice], 'resource_name'); |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 114 | }); |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 115 | }); |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 116 | }) |
| 117 | .catch(err => { |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 118 | this.error = err.data.detail; |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 119 | }) |
| 120 | .finally(() => { |
| 121 | this.loader = false; |
| 122 | }); |
| 123 | } |
| 124 | |
| 125 | this.loadMeters(); |
| 126 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 127 | /** |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 128 | * Select the current service |
| 129 | */ |
| 130 | |
| 131 | this.selectService = (service) => { |
| 132 | //cleaning |
| 133 | this.selectedResources = null; |
| 134 | this.selectedResource = null; |
| 135 | this.selectedMeters = null; |
Matteo Scandolo | 0f5e163 | 2015-12-09 16:09:59 -0800 | [diff] [blame] | 136 | |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 137 | this.selectedService = service; |
| 138 | }; |
| 139 | |
| 140 | /** |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 141 | * Select Resources for a slice |
| 142 | * |
| 143 | * @param Array resources The list of selected resources |
| 144 | * @returns void |
| 145 | */ |
| 146 | this.selectedResources = null; |
| 147 | this.selectResources = (resources, slice) => { |
| 148 | //cleaning |
| 149 | this.selectedResources = null; |
| 150 | this.selectedResource = null; |
| 151 | this.selectedMeters = null; |
| 152 | |
| 153 | this.selectedResources = resources; |
| 154 | this.selectedSlice = slice; |
| 155 | } |
| 156 | |
| 157 | /** |
| 158 | * Select Meters for a resource |
| 159 | * |
| 160 | * @param Array meters The list of selected resources |
| 161 | * @returns void |
| 162 | */ |
| 163 | this.selectedMeters = null; |
| 164 | this.selectMeters = (meters, resource) => { |
| 165 | this.selectedMeters = meters; |
| 166 | this.selectedResource = resource; |
| 167 | } |
| 168 | |
Matteo Scandolo | e3de73d | 2015-12-04 10:14:40 -0800 | [diff] [blame] | 169 | } |
| 170 | }; |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 171 | }) |
| 172 | .directive('ceilometerSamples', function(lodash, $stateParams){ |
| 173 | return { |
| 174 | restrict: 'E', |
| 175 | scope: { |
| 176 | name: '=name', |
| 177 | tenant: '=tenant' |
| 178 | }, |
| 179 | bindToController: true, |
| 180 | controllerAs: 'vm', |
| 181 | templateUrl: 'templates/ceilometer-samples.tpl.html', |
| 182 | controller: function(Ceilometer) { |
| 183 | |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 184 | this.chartColors = [ |
Matteo Scandolo | d3e696d | 2015-12-08 15:24:23 -0800 | [diff] [blame] | 185 | '#286090', |
| 186 | '#F7464A', |
| 187 | '#46BFBD', |
| 188 | '#FDB45C', |
| 189 | '#97BBCD', |
| 190 | '#4D5360', |
| 191 | '#8c4f9f' |
| 192 | ]; |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 193 | |
| 194 | this.chart = { |
| 195 | series: [], |
| 196 | labels: [], |
| 197 | data: [] |
| 198 | } |
| 199 | |
| 200 | Chart.defaults.global.colours = this.chartColors; |
Matteo Scandolo | d3e696d | 2015-12-08 15:24:23 -0800 | [diff] [blame] | 201 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 202 | this.chartType = 'line'; |
| 203 | |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 204 | if($stateParams.name && $stateParams.tenant){ |
| 205 | this.name = $stateParams.name; |
| 206 | this.tenant = $stateParams.tenant; |
| 207 | } |
| 208 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 209 | // Mock |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 210 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 211 | /** |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 212 | * Goes trough the array and format date to be used as labels |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 213 | * |
| 214 | * @param Array data |
| 215 | * @returns Array a list of labels |
| 216 | */ |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 217 | |
Matteo Scandolo | 52193d3 | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 218 | this.getLabels = (data) => { |
| 219 | return data.reduce((list, item) => { |
| 220 | let date = new Date(item.timestamp); |
| 221 | list.push(`${date.getHours()}:${(date.getMinutes()<10?'0':'') + date.getMinutes()}:${date.getSeconds()}`); |
| 222 | return list; |
| 223 | }, []); |
| 224 | }; |
| 225 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 226 | /** |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 227 | * Goes trough the array and return a flat array of values |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 228 | * |
| 229 | * @param Array data |
| 230 | * @returns Array a list of values |
| 231 | */ |
| 232 | |
Matteo Scandolo | 52193d3 | 2015-12-05 18:44:45 -0800 | [diff] [blame] | 233 | this.getData = (data) => { |
| 234 | return data.reduce((list, item) => { |
| 235 | list.push(item.volume); |
| 236 | return list; |
| 237 | }, []); |
| 238 | } |
| 239 | |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 240 | /** |
| 241 | * Add a samples to the chart |
| 242 | * |
| 243 | * @param string resource_id |
| 244 | */ |
| 245 | this.chartMeters = []; |
| 246 | this.addMeterToChart = (resource_id) => { |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 247 | console.log(resource_id, this.samplesList); |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 248 | this.chart['labels'] = this.getLabels(lodash.sortBy(this.samplesList[resource_id], 'timestamp')); |
| 249 | this.chart['series'].push(resource_id); |
| 250 | this.chart['data'].push(this.getData(lodash.sortBy(this.samplesList[resource_id], 'timestamp'))); |
| 251 | this.chartMeters.push(resource_id); |
| 252 | lodash.remove(this.sampleLabels, {id: resource_id}); |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 253 | } |
| 254 | |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 255 | this.removeFromChart = (resource_id) => { |
| 256 | this.chart.data.splice(this.chart.series.indexOf(resource_id), 1); |
| 257 | this.chart.series.splice(this.chart.series.indexOf(resource_id), 1); |
| 258 | this.chartMeters.splice(this.chartMeters.indexOf(resource_id), 1); |
| 259 | this.sampleLabels.push({ |
| 260 | id: resource_id, |
| 261 | // TODO add resource name |
| 262 | }) |
| 263 | }; |
| 264 | |
| 265 | /** |
| 266 | * Format samples to create a list of labels and ids |
| 267 | */ |
| 268 | |
| 269 | this.formatSamplesLabels = (samples) => { |
| 270 | |
| 271 | return lodash.uniq(samples.reduce((labels, item) => { |
| 272 | labels.push({ |
| 273 | id: item.resource_id, |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 274 | name: Ceilometer.resourceMap[item.resource_id] |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 275 | }); |
| 276 | return labels; |
| 277 | }, []), item => item.id); |
| 278 | } |
| 279 | |
| 280 | |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 281 | /** |
| 282 | * Load the samples and format data |
| 283 | */ |
| 284 | |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 285 | this.showSamples = () => { |
| 286 | this.loader = true; |
Matteo Scandolo | c2d3110 | 2015-12-08 14:35:55 -0800 | [diff] [blame] | 287 | // Ceilometer.getSamples(this.name, this.tenant) //fetch one |
| 288 | Ceilometer.getSamples(this.name) //fetch all |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 289 | .then(res => { |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 290 | |
| 291 | // setup data for visualization |
Matteo Scandolo | d3e696d | 2015-12-08 15:24:23 -0800 | [diff] [blame] | 292 | this.samplesList = lodash.groupBy(res, 'resource_id'); |
Matteo Scandolo | c6a7898 | 2015-12-08 16:39:57 -0800 | [diff] [blame] | 293 | this.sampleLabels = this.formatSamplesLabels(res); |
| 294 | |
| 295 | // add current meter to chart |
| 296 | this.addMeterToChart(this.tenant); |
| 297 | |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 298 | }) |
| 299 | .catch(err => { |
Matteo Scandolo | 30c23c7 | 2015-12-09 15:23:51 -0800 | [diff] [blame] | 300 | this.error = err.data.detail; |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 301 | }) |
| 302 | .finally(() => { |
| 303 | this.loader = false; |
| 304 | }); |
| 305 | }; |
| 306 | |
| 307 | this.showSamples(); |
Matteo Scandolo | ec8ad42 | 2015-12-04 15:55:20 -0800 | [diff] [blame] | 308 | } |
| 309 | } |
Matteo Scandolo | 5dd9418 | 2015-12-09 17:09:55 -0800 | [diff] [blame] | 310 | }) |
| 311 | .directive('ceilometerStats', function(){ |
| 312 | return { |
| 313 | restrict: 'E', |
| 314 | scope: { |
| 315 | name: '=name', |
| 316 | }, |
| 317 | bindToController: true, |
| 318 | controllerAs: 'vm', |
| 319 | templateUrl: 'templates/ceilometer-stats.tpl.html', |
| 320 | controller: function($scope, Ceilometer) { |
| 321 | this.getStats = () => { |
| 322 | this.loader = true; |
| 323 | Ceilometer.getStats(this.name) |
| 324 | .then(res => { |
| 325 | this.stats = res; |
| 326 | }) |
| 327 | .catch(err => { |
| 328 | this.error = err.data; |
| 329 | }) |
| 330 | .finally(() => { |
| 331 | this.loader = false; |
| 332 | }); |
| 333 | }; |
| 334 | |
| 335 | this.getStats(); |
| 336 | |
| 337 | $scope.$watch(() => this.name, () => {this.getStats();}); |
| 338 | } |
| 339 | } |
Matteo Scandolo | 76b4e98 | 2015-12-10 10:15:20 -0800 | [diff] [blame] | 340 | }) |
| 341 | .filter('orderObjectByKey', function(lodash) { |
Matteo Scandolo | a918ea8 | 2015-12-14 14:26:20 -0800 | [diff] [blame^] | 342 | return function(items) { |
Matteo Scandolo | 76b4e98 | 2015-12-10 10:15:20 -0800 | [diff] [blame] | 343 | |
| 344 | if(!items){ |
| 345 | return; |
| 346 | } |
| 347 | |
| 348 | return lodash.reduce(Object.keys(items).reverse(), (list, key) => { |
| 349 | list[key] = items[key]; |
| 350 | return list; |
| 351 | }, {}); |
| 352 | |
| 353 | }; |
| 354 | }); |
| 355 | ; |