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