##// END OF EJS Templates
front dashboard: turn into component
ergo -
Show More

The requested changes are too big and content was truncated. Show full diff

1 NO CONTENT: modified file
The requested commit or file is too big and content was truncated. Show full diff
@@ -42,7 +42,8 b" angular.module('appenlight.controllers', ["
42 42 angular.module('appenlight.components', [
43 43 'appenlight.components.channelstream',
44 44 'appenlight.components.appenlightApp',
45 'appenlight.components.appenlightHeader'
45 'appenlight.components.appenlightHeader',
46 'appenlight.components.indexDashboardView'
46 47 ]);
47 48 angular.module('appenlight.directives', [
48 49 'appenlight.directives.c3chart',
@@ -7,51 +7,49 b''
7 7 stroke-width: 0;
8 8 opacity: 0.75;
9 9 }
10
11
12 10 </style>
13 11
14 12 <div class="row">
15 13 <div class="col-sm-12 dashboard" id="content">
16 <div ng-if="!index.stateHolder.AeUser.applications.length">
14 <div ng-if="!$ctrl.stateHolder.AeUser.applications.length">
17 15
18 16 <div ng-include="'templates/quickstart.html'"></div>
19 17
20 18 </div>
21 19
22 <div ng-if="index.stateHolder.AeUser.applications.length">
20 <div ng-if="$ctrl.stateHolder.AeUser.applications.length">
23 21
24 22 <div class="row">
25 23 <div class="col-sm-6">
26 24 <div class="panel panel-default">
27 25 <div class="panel-body">
28 26 <form class="graph-type form-inline">
29 <select ng-model="index.resource" ng-options="r.resource_id as r.resource_name for r in index.stateHolder.AeUser.applications" ng-change="index.updateSearchParams()"
27 <select ng-model="$ctrl.resource" ng-options="r.resource_id as r.resource_name for r in $ctrl.stateHolder.AeUser.applications" ng-change="$ctrl.updateSearchParams()"
30 28 class="SelectField form-control input-sm slim-input"></select>
31 29
32 <select class="SelectField form-control input-sm slim-input" ng-model="index.timeSpan"
33 ng-options="i as i.label for i in index.timeOptions | objectToOrderedArray:'minutes'" ng-change="index.updateSearchParams()"
30 <select class="SelectField form-control input-sm slim-input" ng-model="$ctrl.timeSpan"
31 ng-options="i as i.label for i in $ctrl.timeOptions | objectToOrderedArray:'minutes'" ng-change="$ctrl.updateSearchParams()"
34 32 class="SelectField"></select>
35 33
36 34
37 35 <div class="btn-group">
38 <button type="button" class="btn btn-primary btn-sm" ng-model="index.graphType.selected" ng-change="index.updateSearchParams()"
36 <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
39 37 uib-btn-radio="'requests_graphs'" data-uib-tooltip="Requests per second">
40 38 <span class="fa fa-line-chart"></span>
41 39 </button>
42 <button type="button" class="btn btn-primary btn-sm" ng-model="index.graphType.selected" ng-change="index.updateSearchParams()"
40 <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
43 41 uib-btn-radio="'response_graphs'" data-uib-tooltip="Average response time">
44 42 <span class="fa fa-random"></span>
45 43 </button>
46 <button type="button" class="btn btn-primary btn-sm" ng-model="index.graphType.selected" ng-change="index.updateSearchParams()"
44 <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
47 45 uib-btn-radio="'metrics_graphs'" data-uib-tooltip="Time spent per request">
48 46 <span class="fa fa-bar-chart-o"></span>
49 47 </button>
50 <button type="button" class="btn btn-primary btn-sm" ng-model="index.graphType.selected" ng-change="index.updateSearchParams()"
48 <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
51 49 uib-btn-radio="'report_graphs'" data-uib-tooltip="Errors">
52 50 <span class="fa fa-exclamation-triangle"></span>
53 51 </button>
54 <button type="button" class="btn btn-primary btn-sm" ng-model="index.graphType.selected" ng-change="index.updateSearchParams()"
52 <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
55 53 uib-btn-radio="'slow_report_graphs'" data-uib-tooltip="Slow reports">
56 54 <span class="fa fa-clock-o"></span>
57 55 </button>
@@ -59,52 +57,52 b''
59 57 </form>
60 58 <div class="clearfix"></div>
61 59
62 <p ng-if="index.loading.series != false" class="text-center">
60 <p ng-if="$ctrl.loading.series != false" class="text-center">
63 61 <span class="fa fa-cog fa-spin fa-5x loader"></span>
64 62 </p>
65 63
66 <div ng-if="index.loading.series == false">
67 <div ng-if="index.graphType.selected == 'requests_graphs'">
68 <c3chart data-domid="reponse_chart" data-data="index.requestsChartData" data-config="index.requestsChartConfig" update="true">
64 <div ng-if="$ctrl.loading.series == false">
65 <div ng-if="$ctrl.graphType.selected == 'requests_graphs'">
66 <c3chart data-domid="reponse_chart" data-data="$ctrl.requestsChartData" data-config="$ctrl.requestsChartConfig" update="true">
69 67 </c3chart>
70 68 </div>
71 69
72 <div ng-if="index.graphType.selected == 'response_graphs'">
73 <c3chart data-domid="reponse_chart" data-data="index.responseChartData" data-config="index.responseChartConfig" update="true">
70 <div ng-if="$ctrl.graphType.selected == 'response_graphs'">
71 <c3chart data-domid="reponse_chart" data-data="$ctrl.responseChartData" data-config="$ctrl.responseChartConfig" update="true">
74 72 </c3chart>
75 73 </div>
76 74
77 <div ng-if="index.graphType.selected == 'metrics_graphs'">
78 <c3chart data-domid="metrics_chart" data-data="index.metricsChartData" data-config="index.metricsChartConfig" update="true">
75 <div ng-if="$ctrl.graphType.selected == 'metrics_graphs'">
76 <c3chart data-domid="metrics_chart" data-data="$ctrl.metricsChartData" data-config="$ctrl.metricsChartConfig" update="true">
79 77 </c3chart>
80 78 </div>
81 <div ng-if="index.graphType.selected == 'report_graphs'">
82 <c3chart data-domid="reports_chart" data-data="index.reportChartData" data-config="index.reportChartConfig" update="true">
79 <div ng-if="$ctrl.graphType.selected == 'report_graphs'">
80 <c3chart data-domid="reports_chart" data-data="$ctrl.reportChartData" data-config="$ctrl.reportChartConfig" update="true">
83 81 </c3chart>
84 82 </div>
85 83
86 <div ng-if="index.graphType.selected == 'slow_report_graphs'">
87 <c3chart data-domid="slow_reports_chart" data-data="index.reportSlowChartData" data-config="index.reportSlowChartConfig" update="true">
84 <div ng-if="$ctrl.graphType.selected == 'slow_report_graphs'">
85 <c3chart data-domid="slow_reports_chart" data-data="$ctrl.reportSlowChartData" data-config="$ctrl.reportSlowChartConfig" update="true">
88 86 </c3chart>
89 87 </div>
90 88
91 <p ng-if="index.graphType.selected == 'requests_graphs'" class="text-center">
89 <p ng-if="$ctrl.graphType.selected == 'requests_graphs'" class="text-center">
92 90 <small>Average requests per second from all servers</small>
93 91 </p>
94 92
95 <p ng-if="index.graphType.selected == 'response_graphs'" class="text-center">
93 <p ng-if="$ctrl.graphType.selected == 'response_graphs'" class="text-center">
96 94 <small>Average response time from all servers</small>
97 95 </p>
98 96
99 <p ng-if="index.graphType.selected == 'metrics_graphs'" class="text-center">
97 <p ng-if="$ctrl.graphType.selected == 'metrics_graphs'" class="text-center">
100 98 <small>Aggregated average time spent per request - broken to layers</small>
101 99 </p>
102 100
103 <p ng-if="index.graphType.selected == 'report_graphs'" class="text-center">
101 <p ng-if="$ctrl.graphType.selected == 'report_graphs'" class="text-center">
104 102 <small>Aggregated reports sent by your application</small>
105 103 </p>
106 104
107 <p ng-if="index.graphType.selected == 'slow_report_graphs'" class="text-center">
105 <p ng-if="$ctrl.graphType.selected == 'slow_report_graphs'" class="text-center">
108 106 <small>Aggregated slow reports sent by your application</small>
109 107 </p>
110 108 </div>
@@ -117,40 +115,40 b''
117 115
118 116 <div id="server-container">
119 117
120 <div ng-if="index.loading.apdex==false" class="text-center m-b-1">
118 <div ng-if="$ctrl.loading.apdex==false" class="text-center m-b-1">
121 119
122 <a data-ui-sref="report.list({resource:index.resource, start_date:index.startDateFilter})" class="combined-stat text-center" id="error-rate">
120 <a data-ui-sref="report.list({resource:$ctrl.resource, start_date:$ctrl.startDateFilter})" class="combined-stat text-center" id="error-rate">
123 121 <small>Exceptions</small>
124 122 <br/>
125 <strong>{{ index.exceptions|numberToThousands}}</strong>
123 <strong>{{ $ctrl.exceptions|numberToThousands}}</strong>
126 124 <span class="fa fa-chevron-right"></span>
127 125 </a><!--
128 126
129 --><a data-ui-sref="report.list_slow({resource:index.resource, min_duration:4, start_date:index.startDateFilter})" class="combined-stat text-center" id="frustrating-requests" data-uib-tooltip="Requests over 4s">
127 --><a data-ui-sref="report.list_slow({resource:$ctrl.resource, min_duration:4, start_date:$ctrl.startDateFilter})" class="combined-stat text-center" id="frustrating-requests" data-uib-tooltip="Requests over 4s">
130 128 <small>Frustrating req.</small>
131 129 <br/>
132 <strong>{{index.frustratingRequests|numberToThousands}}</strong>
130 <strong>{{$ctrl.frustratingRequests|numberToThousands}}</strong>
133 131 <span class="fa fa-chevron-right"></span>
134 132 </a><!--
135 133
136 --><a data-ui-sref="report.list_slow({resource:index.resource, min_duration:1, max_duration:4, start_date:index.startDateFilter})" class="combined-stat text-center" id="tolerated-requests"
134 --><a data-ui-sref="report.list_slow({resource:$ctrl.resource, min_duration:1, max_duration:4, start_date:$ctrl.startDateFilter})" class="combined-stat text-center" id="tolerated-requests"
137 135 data-uib-tooltip="Requests under 4s">
138 136 <small>Tolerated req.</small>
139 137 <br/>
140 <strong>{{index.toleratedRequests|numberToThousands}}</strong>
138 <strong>{{$ctrl.toleratedRequests|numberToThousands}}</strong>
141 139 <span class="fa fa-chevron-right"></span>
142 140 </a><!--
143 141
144 142 --><a class="combined-stat text-center" id="satisfying-requests" data-uib-tooltip="Requests under 1s">
145 143 <small>Satisfying req.</small>
146 144 <br/>
147 <strong>{{index.satisfyingRequests|numberToThousands}}</strong>
145 <strong>{{$ctrl.satisfyingRequests|numberToThousands}}</strong>
148 146 </a><!--
149 147
150 --><a data-ui-sref="uptime({resource:index.resource})" class="combined-stat text-center" id="uptime-stats" data-uib-tooltip="Uptime">
148 --><a data-ui-sref="uptime({resource:$ctrl.resource})" class="combined-stat text-center" id="uptime-stats" data-uib-tooltip="Uptime">
151 149 <small>Uptime</small>
152 150 <br/>
153 <strong>{{index.uptimeStats}}%</strong>
151 <strong>{{$ctrl.uptimeStats}}%</strong>
154 152 <span class="fa fa-chevron-right"></span>
155 153 </a>
156 154
@@ -172,11 +170,11 b''
172 170 </tr>
173 171 </thead>
174 172 <tbody>
175 <tr ng-if="index.loading.apdex!=false" class="text-center">
173 <tr ng-if="$ctrl.loading.apdex!=false" class="text-center">
176 174 <td colspan="5"><span class="fa fa-cog fa-spin fa-5x loader"></span></td>
177 175 </tr>
178 <tr ng-repeat="server in index.apdexStats" class="{{ server | apdexValue }}"
179 ng-if="index.loading.apdex==false">
176 <tr ng-repeat="server in $ctrl.apdexStats" class="{{ server | apdexValue }}"
177 ng-if="$ctrl.loading.apdex==false">
180 178 <td><span class="fa fa-hdd-o"></span></td>
181 179 <td>
182 180 <small><strong>{{ server.name }}</strong></small>
@@ -209,10 +207,10 b''
209 207 <div class="panel-heading position-relative">
210 208 <h3 class="panel-title"><span class="fa fa-exclamation-triangle"></span> Newest errors (real-time)
211 209 </h3>
212 <a tooltip-append-to-body="true" data-uib-tooltip="Play/Pause stream" class="btn btn-primary btn-sm pause_stream" ng-model="index.stream.paused" uib-btn-checkbox>
210 <a tooltip-append-to-body="true" data-uib-tooltip="Play/Pause stream" class="btn btn-primary btn-sm pause_stream" ng-model="$ctrl.stream.paused" uib-btn-checkbox>
213 211 <span class="fa {{stream.paused ? 'fa-play' : 'fa-pause'}}"></span>
214 212 </a>
215 <a tooltip-append-to-body="true" data-uib-tooltip="Limit reports to current application" class="btn btn-primary btn-sm limit_stream" ng-model="index.stream.filtered" uib-btn-checkbox>
213 <a tooltip-append-to-body="true" data-uib-tooltip="Limit reports to current application" class="btn btn-primary btn-sm limit_stream" ng-model="$ctrl.stream.filtered" uib-btn-checkbox>
216 214 <span class="fa fa-lock"></span>
217 215 </a>
218 216
@@ -220,9 +218,9 b''
220 218 </div>
221 219 <div class="panel-body">
222 220
223 <p ng-if="index.stream.reports.length === 0">No new reports</p>
221 <p ng-if="$ctrl.stream.reports.length === 0">No new reports</p>
224 222
225 <div small-report-list reports="index.stream.reports" applications="index.applications"></div>
223 <div small-report-list reports="$ctrl.stream.reports" applications="$ctrl.applications"></div>
226 224 </div>
227 225 </div>
228 226 </div>
@@ -231,15 +229,15 b''
231 229
232 230 <div class="panel panel-default">
233 231 <div class="panel-heading">
234 <h3 class="panel-title"><span class="fa fa-sort-amount-desc"></span> Request breakdown over {{ index.timeSpan.label }}</h3>
232 <h3 class="panel-title"><span class="fa fa-sort-amount-desc"></span> Request breakdown over {{ $ctrl.timeSpan.label }}</h3>
235 233 </div>
236 234 <div class="panel-body" id="view-breakdown-container">
237 <p ng-if="index.loading.requestsBreakdown!=false" class="text-center">
235 <p ng-if="$ctrl.loading.requestsBreakdown!=false" class="text-center">
238 236 <span class="fa fa-cog fa-spin fa-5x loader"></span>
239 237 </p>
240 238
241 239 <div class="report-list">
242 <div ng-if="index.loading.requestsBreakdown==false" ng-repeat="view in index.requestsBreakdown">
240 <div ng-if="$ctrl.loading.requestsBreakdown==false" ng-repeat="view in $ctrl.requestsBreakdown">
243 241 <div class="view-info">
244 242 <div class="view-name">
245 243 <div class="bar" style="width: {{view.percentage}}%">
@@ -281,19 +279,19 b''
281 279 <div class="panel panel-default">
282 280 <div class="panel-heading">
283 281 <h3 class="panel-title">
284 <span class="fa fa-exclamation-triangle"></span> Report groups trending over {{ index.timeSpan.label }}
282 <span class="fa fa-exclamation-triangle"></span> Report groups trending over {{ $ctrl.timeSpan.label }}
285 283 </h3>
286 284 </div>
287 285 <div class="panel-body">
288 <p ng-if="index.loading.reports != false" class="text-center">
286 <p ng-if="$ctrl.loading.reports != false" class="text-center">
289 287 <span class="fa fa-cog fa-spin fa-5x loader"></span>
290 288 </p>
291 289
292 <p ng-if="index.trendingReports.length == 0 && index.loading.reports == false">
290 <p ng-if="$ctrl.trendingReports.length == 0 && $ctrl.loading.reports == false">
293 291 No reports found
294 292 </p>
295 293
296 <div small-report-group-list groups="index.trendingReports" applications="index.applications" ng-if="index.loading.reports==false"></div>
294 <div small-report-group-list groups="$ctrl.trendingReports" applications="$ctrl.applications" ng-if="$ctrl.loading.reports==false"></div>
297 295 </div>
298 296 </div>
299 297
@@ -305,18 +303,18 b''
305 303 <div class="panel panel-default">
306 304 <div class="panel-heading">
307 305 <h3 class="panel-title">
308 Most common slow calls over {{ index.timeSpan.label }}
306 Most common slow calls over {{ $ctrl.timeSpan.label }}
309 307 </h3>
310 308 </div>
311 309 <div class="panel-body">
312 310
313 <div ng-if="index.loading.slowCalls!=false" class="text-center">
311 <div ng-if="$ctrl.loading.slowCalls!=false" class="text-center">
314 312 <span class="fa fa-cog fa-spin fa-5x loader"></span>
315 313 </div>
316 314
317 <table id="slow-statements" ng-if="index.loading.slowCalls==false">
315 <table id="slow-statements" ng-if="$ctrl.loading.slowCalls==false">
318 316 <tbody>
319 <tr ng-repeat="call in index.slowCalls">
317 <tr ng-repeat="call in $ctrl.slowCalls">
320 318 <td class="occurences">
321 319 <span class="occurences" data-uib-tooltip="Occurences">{{call.occurences|numberToThousands}}</span>
322 320 </td>
@@ -17,8 +17,11 b''
17 17 // # services, and proprietary license terms, please see
18 18 // # https://rhodecode.com/licenses/
19 19
20 angular.module('appenlight.controllers')
21 .controller('IndexDashboardController', IndexDashboardController);
20 angular.module('appenlight.components.indexDashboardView', [])
21 .component('indexDashboardView', {
22 templateUrl: 'components/views/index-dashboard/index-dashboard.html',
23 controller: IndexDashboardController
24 });
22 25
23 26 IndexDashboardController.$inject = ['$rootScope', '$scope', '$location','$cookies', '$interval', 'stateHolder', 'applicationsPropertyResource', 'AeConfig'];
24 27
@@ -29,8 +29,7 b" angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', fun"
29 29
30 30 $stateProvider.state('front_dashboard', {
31 31 url: '/ui',
32 templateUrl: 'templates/dashboard.html',
33 controller: 'IndexDashboardController as index'
32 component: 'indexDashboardView'
34 33 });
35 34
36 35 $stateProvider.state('report', {
General Comments 0
You need to be logged in to leave comments. Login now