Show More
index-dashboard.html
346 lines
| 18.5 KiB
| text/html
|
HtmlLexer
r0 | <style type="text/css"> | |||
#metrics_chart .c3-line { | ||||
stroke-width: 0px; | ||||
} | ||||
#metrics_chart .c3-area { | ||||
stroke-width: 0; | ||||
opacity: 0.75; | ||||
} | ||||
</style> | ||||
<div class="row"> | ||||
<div class="col-sm-12 dashboard" id="content"> | ||||
r75 | <div ng-if="!$ctrl.stateHolder.AeUser.applications.length"> | |||
r0 | ||||
<div ng-include="'templates/quickstart.html'"></div> | ||||
</div> | ||||
r75 | <div ng-if="$ctrl.stateHolder.AeUser.applications.length"> | |||
r0 | ||||
<div class="row"> | ||||
<div class="col-sm-6"> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-body"> | ||||
<form class="graph-type form-inline"> | ||||
r75 | <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()" | |||
r0 | class="SelectField form-control input-sm slim-input"></select> | |||
r75 | <select class="SelectField form-control input-sm slim-input" ng-model="$ctrl.timeSpan" | |||
ng-options="i as i.label for i in $ctrl.timeOptions | objectToOrderedArray:'minutes'" ng-change="$ctrl.updateSearchParams()" | ||||
r0 | class="SelectField"></select> | |||
<div class="btn-group"> | ||||
r75 | <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()" | |||
r0 | uib-btn-radio="'requests_graphs'" data-uib-tooltip="Requests per second"> | |||
<span class="fa fa-line-chart"></span> | ||||
</button> | ||||
r75 | <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()" | |||
r0 | uib-btn-radio="'response_graphs'" data-uib-tooltip="Average response time"> | |||
<span class="fa fa-random"></span> | ||||
</button> | ||||
r75 | <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()" | |||
r0 | uib-btn-radio="'metrics_graphs'" data-uib-tooltip="Time spent per request"> | |||
<span class="fa fa-bar-chart-o"></span> | ||||
</button> | ||||
r75 | <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()" | |||
r0 | uib-btn-radio="'report_graphs'" data-uib-tooltip="Errors"> | |||
<span class="fa fa-exclamation-triangle"></span> | ||||
</button> | ||||
r75 | <button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()" | |||
r0 | uib-btn-radio="'slow_report_graphs'" data-uib-tooltip="Slow reports"> | |||
<span class="fa fa-clock-o"></span> | ||||
</button> | ||||
</div> | ||||
</form> | ||||
<div class="clearfix"></div> | ||||
r75 | <p ng-if="$ctrl.loading.series != false" class="text-center"> | |||
r0 | <span class="fa fa-cog fa-spin fa-5x loader"></span> | |||
</p> | ||||
r75 | <div ng-if="$ctrl.loading.series == false"> | |||
<div ng-if="$ctrl.graphType.selected == 'requests_graphs'"> | ||||
<c3chart data-domid="reponse_chart" data-data="$ctrl.requestsChartData" data-config="$ctrl.requestsChartConfig" update="true"> | ||||
r0 | </c3chart> | |||
</div> | ||||
r75 | <div ng-if="$ctrl.graphType.selected == 'response_graphs'"> | |||
<c3chart data-domid="reponse_chart" data-data="$ctrl.responseChartData" data-config="$ctrl.responseChartConfig" update="true"> | ||||
r0 | </c3chart> | |||
</div> | ||||
r75 | <div ng-if="$ctrl.graphType.selected == 'metrics_graphs'"> | |||
<c3chart data-domid="metrics_chart" data-data="$ctrl.metricsChartData" data-config="$ctrl.metricsChartConfig" update="true"> | ||||
r0 | </c3chart> | |||
</div> | ||||
r75 | <div ng-if="$ctrl.graphType.selected == 'report_graphs'"> | |||
<c3chart data-domid="reports_chart" data-data="$ctrl.reportChartData" data-config="$ctrl.reportChartConfig" update="true"> | ||||
r0 | </c3chart> | |||
</div> | ||||
r75 | <div ng-if="$ctrl.graphType.selected == 'slow_report_graphs'"> | |||
<c3chart data-domid="slow_reports_chart" data-data="$ctrl.reportSlowChartData" data-config="$ctrl.reportSlowChartConfig" update="true"> | ||||
r0 | </c3chart> | |||
</div> | ||||
r75 | <p ng-if="$ctrl.graphType.selected == 'requests_graphs'" class="text-center"> | |||
r0 | <small>Average requests per second from all servers</small> | |||
</p> | ||||
r75 | <p ng-if="$ctrl.graphType.selected == 'response_graphs'" class="text-center"> | |||
r0 | <small>Average response time from all servers</small> | |||
</p> | ||||
r75 | <p ng-if="$ctrl.graphType.selected == 'metrics_graphs'" class="text-center"> | |||
r0 | <small>Aggregated average time spent per request - broken to layers</small> | |||
</p> | ||||
r75 | <p ng-if="$ctrl.graphType.selected == 'report_graphs'" class="text-center"> | |||
r0 | <small>Aggregated reports sent by your application</small> | |||
</p> | ||||
r75 | <p ng-if="$ctrl.graphType.selected == 'slow_report_graphs'" class="text-center"> | |||
r0 | <small>Aggregated slow reports sent by your application</small> | |||
</p> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class="col-sm-6"> | ||||
<div id="server-container"> | ||||
r75 | <div ng-if="$ctrl.loading.apdex==false" class="text-center m-b-1"> | |||
r0 | ||||
r75 | <a data-ui-sref="report.list({resource:$ctrl.resource, start_date:$ctrl.startDateFilter})" class="combined-stat text-center" id="error-rate"> | |||
r0 | <small>Exceptions</small> | |||
<br/> | ||||
r75 | <strong>{{ $ctrl.exceptions|numberToThousands}}</strong> | |||
r0 | <span class="fa fa-chevron-right"></span> | |||
</a><!-- | ||||
r75 | --><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"> | |||
r9 | <small>Frustrating req.</small> | |||
r0 | <br/> | |||
r75 | <strong>{{$ctrl.frustratingRequests|numberToThousands}}</strong> | |||
r9 | <span class="fa fa-chevron-right"></span> | |||
r0 | </a><!-- | |||
r75 | --><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" | |||
r0 | data-uib-tooltip="Requests under 4s"> | |||
<small>Tolerated req.</small> | ||||
<br/> | ||||
r75 | <strong>{{$ctrl.toleratedRequests|numberToThousands}}</strong> | |||
r0 | <span class="fa fa-chevron-right"></span> | |||
</a><!-- | ||||
r9 | ||||
--><a class="combined-stat text-center" id="satisfying-requests" data-uib-tooltip="Requests under 1s"> | ||||
<small>Satisfying req.</small> | ||||
r0 | <br/> | |||
r75 | <strong>{{$ctrl.satisfyingRequests|numberToThousands}}</strong> | |||
r0 | </a><!-- | |||
r75 | --><a data-ui-sref="uptime({resource:$ctrl.resource})" class="combined-stat text-center" id="uptime-stats" data-uib-tooltip="Uptime"> | |||
r0 | <small>Uptime</small> | |||
<br/> | ||||
r75 | <strong>{{$ctrl.uptimeStats}}%</strong> | |||
r0 | <span class="fa fa-chevron-right"></span> | |||
</a> | ||||
<div class="clearfix"></div> | ||||
</div> | ||||
<div id="apdex-rate" class="m-b-1 panel panel-default"> | ||||
<table class="servers table table-striped"> | ||||
<thead> | ||||
<tr> | ||||
<th></th> | ||||
<th>Server</th> | ||||
<th>Apdex | ||||
<span class="fa fa-question-circle" | ||||
data-uib-tooltip="Application Performance Index - measures viewer satisfaction based on response times and error rates"></span> | ||||
</th> | ||||
<th>rpm</th> | ||||
<th>avg. response</th> | ||||
</tr> | ||||
</thead> | ||||
<tbody> | ||||
r75 | <tr ng-if="$ctrl.loading.apdex!=false" class="text-center"> | |||
r0 | <td colspan="5"><span class="fa fa-cog fa-spin fa-5x loader"></span></td> | |||
</tr> | ||||
r75 | <tr ng-repeat="server in $ctrl.apdexStats" class="{{ server | apdexValue }}" | |||
ng-if="$ctrl.loading.apdex==false"> | ||||
r0 | <td><span class="fa fa-hdd-o"></span></td> | |||
<td> | ||||
<small><strong>{{ server.name }}</strong></small> | ||||
</td> | ||||
<td class="apdex"> | ||||
<small><strong>{{ server.apdex }} %</strong></small> | ||||
</td> | ||||
<td> | ||||
<small><strong>{{ server.rpm }}rpm</strong></small> | ||||
</td> | ||||
<td> | ||||
<small><strong>{{ server.avg_response_time }}s</strong></small> | ||||
</td> | ||||
</tr> | ||||
</tbody> | ||||
</table> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class="row"> | ||||
<div class="col-sm-6"> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading position-relative"> | ||||
<h3 class="panel-title"><span class="fa fa-exclamation-triangle"></span> Newest errors (real-time) | ||||
</h3> | ||||
r75 | <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> | |||
r0 | <span class="fa {{stream.paused ? 'fa-play' : 'fa-pause'}}"></span> | |||
</a> | ||||
r75 | <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> | |||
r0 | <span class="fa fa-lock"></span> | |||
</a> | ||||
</div> | ||||
<div class="panel-body"> | ||||
r75 | <p ng-if="$ctrl.stream.reports.length === 0">No new reports</p> | |||
r0 | ||||
r75 | <div small-report-list reports="$ctrl.stream.reports" applications="$ctrl.applications"></div> | |||
r0 | </div> | |||
</div> | ||||
</div> | ||||
<div class="col-sm-6"> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
r75 | <h3 class="panel-title"><span class="fa fa-sort-amount-desc"></span> Request breakdown over {{ $ctrl.timeSpan.label }}</h3> | |||
r0 | </div> | |||
<div class="panel-body" id="view-breakdown-container"> | ||||
r75 | <p ng-if="$ctrl.loading.requestsBreakdown!=false" class="text-center"> | |||
r0 | <span class="fa fa-cog fa-spin fa-5x loader"></span> | |||
</p> | ||||
<div class="report-list"> | ||||
r75 | <div ng-if="$ctrl.loading.requestsBreakdown==false" ng-repeat="view in $ctrl.requestsBreakdown"> | |||
r0 | <div class="view-info"> | |||
<div class="view-name"> | ||||
<div class="bar" style="width: {{view.percentage}}%"> | ||||
</div> | ||||
</div> | ||||
<strong ng-if="view.latest_details.length"> | ||||
<a data-ui-sref="report.list_slow({view_name:view.view_name})">{{view.view_name}}</a></strong> | ||||
<strong ng-if="!view.latest_details.length">{{view.view_name}}</strong> | ||||
<div class="stats"> | ||||
<small> | ||||
avg. response <strong>{{view.avg_response}}s</strong> in | ||||
<span class="requests" | ||||
data-uib-tooltip="Requests"><strong>{{view.requests|numberToThousands}}</strong> requests</span> | ||||
<span ng-if="view.latest_details"> | ||||
Latest reports: | ||||
<a ng-repeat="d in view.latest_details" target="_blank" ui-sref="report.view_detail({groupId:d.group_id, reportId:d.report_id})"> <strong>{{$index+1}}</strong></a> | ||||
</span> | ||||
</small> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
<div class="row"> | ||||
<div class="col-sm-6"> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
<h3 class="panel-title"> | ||||
r75 | <span class="fa fa-exclamation-triangle"></span> Report groups trending over {{ $ctrl.timeSpan.label }} | |||
r0 | </h3> | |||
</div> | ||||
<div class="panel-body"> | ||||
r75 | <p ng-if="$ctrl.loading.reports != false" class="text-center"> | |||
r0 | <span class="fa fa-cog fa-spin fa-5x loader"></span> | |||
</p> | ||||
r75 | <p ng-if="$ctrl.trendingReports.length == 0 && $ctrl.loading.reports == false"> | |||
r0 | No reports found | |||
</p> | ||||
r75 | <div small-report-group-list groups="$ctrl.trendingReports" applications="$ctrl.applications" ng-if="$ctrl.loading.reports==false"></div> | |||
r0 | </div> | |||
</div> | ||||
</div> | ||||
<div class="col-sm-6"> | ||||
<div class="panel panel-default"> | ||||
<div class="panel-heading"> | ||||
<h3 class="panel-title"> | ||||
r75 | Most common slow calls over {{ $ctrl.timeSpan.label }} | |||
r0 | </h3> | |||
</div> | ||||
<div class="panel-body"> | ||||
r75 | <div ng-if="$ctrl.loading.slowCalls!=false" class="text-center"> | |||
r0 | <span class="fa fa-cog fa-spin fa-5x loader"></span> | |||
</div> | ||||
r75 | <table id="slow-statements" ng-if="$ctrl.loading.slowCalls==false"> | |||
r0 | <tbody> | |||
r75 | <tr ng-repeat="call in $ctrl.slowCalls"> | |||
r0 | <td class="occurences"> | |||
<span class="occurences" data-uib-tooltip="Occurences">{{call.occurences|numberToThousands}}</span> | ||||
</td> | ||||
<td class="ellipsis"> | ||||
<small title="{{call.statement}}" class="statement">{{call.statement}}</small> | ||||
<br/> | ||||
<span class="type">{{call.statement_type}}</span> | ||||
<span class="subtype">{{call.statement_subtype}}</span> | ||||
<span class="duration" data-uib-tooltip="Average duration">{{call.total_duration/call.occurences|round:2}}s</span> | ||||
<span class="report-list"> | ||||
Latest reports: | ||||
<a ng-repeat="d in call.latest_details" target="_blank" ui-sref="report.view_detail({groupId:d.group_id, reportId:d.report_id})"> <strong>{{$index+1}}</strong> </a> | ||||
</span> | ||||
</td> | ||||
</tr> | ||||
</tbody> | ||||
</table> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||
</div> | ||||