blob: 8df2a29547b7eb2414c8bf5dc46a43b38eb8005a [file] [log] [blame]
Matteo Scandolo68856082015-12-08 14:35:55 -08001<!-- <pre>{{ vm | json}}</pre> -->
2
3<div class="row">
4 <div class="col-xs-10">
5 <h1>{{vm.name | uppercase}}</h1>
6 </div>
7 <div class="col-xs-2">
8 <a ui-sref="ceilometerDashboard" class="btn btn-primary pull-right">
9 <i class="glyphicon glyphicon-arrow-left"></i> Back to list
10 </a>
11 </div>
12</div>
Matteo Scandolo98241972015-12-08 17:41:46 -080013<div class="row" ng-show="vm.loader">
14 <div class="col-xs-12">
Matteo Scandolo7b80d842015-12-04 15:55:20 -080015 <div class="loader">Loading</div>
16 </div>
Matteo Scandolo98241972015-12-08 17:41:46 -080017</div>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080018<section ng-if="!vm.loader && !vm.error">
Matteo Scandolo02f44d62016-09-19 17:17:58 -070019 <div class="row" ng-if="vm.chartType !== 'pie'">
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080020 <form class="form-inline col-xs-8" ng-submit="vm.addMeterToChart(vm.addMeterValue)">
Matteo Scandoloe5d5ebd2015-12-14 14:42:28 -080021 <select ng-model="vm.addMeterValue" class="form-control" ng-options="resource.id as resource.name for resource in vm.sampleLabels"></select>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080022 <button class="btn btn-success">
23 <i class="glyphicon glyphicon-plus"></i> Add
24 </button>
25 </form>
26 <div class="col-xs-4 text-right">
27 <a ng-click="vm.chartType = 'line'" class="btn" ng-class="{'btn-default': vm.chartType != 'bar', 'btn-primary': vm.chartType == 'line'}">Lines</a>
28 <a ng-click="vm.chartType = 'bar'" class="btn" ng-class="{'btn-default': vm.chartType != 'line', 'btn-primary': vm.chartType == 'bar'}">Bars</a>
29 </div>
Matteo Scandolo98241972015-12-08 17:41:46 -080030 </div>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080031 <div class="row" ng-if="!vm.loader">
32 <div class="col-xs-12">
33 <canvas ng-if="vm.chartType === 'line'" id="line" class="chart chart-line" chart-data="vm.chart.data" chart-options="{datasetFill: false}"
34 chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
35 </canvas>
36 <canvas ng-if="vm.chartType === 'bar'" id="bar" class="chart chart-bar" chart-data="vm.chart.data"
37 chart-labels="vm.chart.labels" chart-legend="false" chart-series="vm.chart.series">
38 </canvas>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080039 </div>
Matteo Scandolo02f44d62016-09-19 17:17:58 -070040 <!-- PIE CHART -->
41 <div class="col-xs-8" ng-if="vm.chartType === 'pie'">
42 <canvas id="pie" class="chart chart-pie"
43 chart-data="vm.chart.data" chart-labels="vm.chart.labels" chart-options="vm.chart.options">
44 </canvas>
45 </div>
46 <div class="col-xs-4" ng-if="vm.chartType === 'pie'">
47 <div class="row" ng-repeat="item in vm.chart.labels">
48 <div class="col-xs-12">
49 <span
50 class="btn btn-chart"
51 ng-style="{'background-color': vm.chartColors[$index]}">
52 {{item}}: {{vm.chart.data[$index]}}%
53 </span>
54 </div>
55 </div>
56 </div>
57 <!-- END PIE CHART -->
Matteo Scandolo7b80d842015-12-04 15:55:20 -080058 </div>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080059 <div class="row" ng-if="!vm.loader">
60 <div class="col-xs-12">
Matteo Scandoloe5d5ebd2015-12-14 14:42:28 -080061 <a ng-click="vm.removeFromChart(meter)" class="btn btn-chart" ng-style="{'background-color': vm.chartColors[$index]}" ng-repeat="meter in vm.chartMeters">
Matteo Scandolo6c6b9282015-12-15 14:37:27 -080062 {{meter.resource_name || meter.resource_id}}
Matteo Scandoloe5d5ebd2015-12-14 14:42:28 -080063 </a>
Matteo Scandoloc8f18e62015-12-09 15:23:51 -080064 </div>
65 </div>
66</section>
67<section ng-if="!vm.loader && vm.error">
68 <div class="alert alert-danger">
69 {{vm.error}}
70 </div>
71</section>