|
|
<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">
|
|
|
<div ng-if="!$ctrl.stateHolder.AeUser.applications.length">
|
|
|
|
|
|
<div ng-include="'templates/quickstart.html'"></div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div ng-if="$ctrl.stateHolder.AeUser.applications.length">
|
|
|
|
|
|
<div class="row">
|
|
|
<div class="col-sm-6">
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-body">
|
|
|
<form class="graph-type form-inline">
|
|
|
<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()"
|
|
|
class="SelectField form-control input-sm slim-input"></select>
|
|
|
|
|
|
<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()"
|
|
|
class="SelectField"></select>
|
|
|
|
|
|
|
|
|
<div class="btn-group">
|
|
|
<button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
|
|
|
uib-btn-radio="'requests_graphs'" data-uib-tooltip="Requests per second">
|
|
|
<span class="fa fa-line-chart"></span>
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
|
|
|
uib-btn-radio="'response_graphs'" data-uib-tooltip="Average response time">
|
|
|
<span class="fa fa-random"></span>
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
|
|
|
uib-btn-radio="'metrics_graphs'" data-uib-tooltip="Time spent per request">
|
|
|
<span class="fa fa-bar-chart-o"></span>
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
|
|
|
uib-btn-radio="'report_graphs'" data-uib-tooltip="Errors">
|
|
|
<span class="fa fa-exclamation-triangle"></span>
|
|
|
</button>
|
|
|
<button type="button" class="btn btn-primary btn-sm" ng-model="$ctrl.graphType.selected" ng-change="$ctrl.updateSearchParams()"
|
|
|
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>
|
|
|
|
|
|
<p ng-if="$ctrl.loading.series != false" class="text-center">
|
|
|
<span class="fa fa-cog fa-spin fa-5x loader"></span>
|
|
|
</p>
|
|
|
|
|
|
<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">
|
|
|
</c3chart>
|
|
|
</div>
|
|
|
|
|
|
<div ng-if="$ctrl.graphType.selected == 'response_graphs'">
|
|
|
<c3chart data-domid="reponse_chart" data-data="$ctrl.responseChartData" data-config="$ctrl.responseChartConfig" update="true">
|
|
|
</c3chart>
|
|
|
</div>
|
|
|
|
|
|
<div ng-if="$ctrl.graphType.selected == 'metrics_graphs'">
|
|
|
<c3chart data-domid="metrics_chart" data-data="$ctrl.metricsChartData" data-config="$ctrl.metricsChartConfig" update="true">
|
|
|
</c3chart>
|
|
|
</div>
|
|
|
<div ng-if="$ctrl.graphType.selected == 'report_graphs'">
|
|
|
<c3chart data-domid="reports_chart" data-data="$ctrl.reportChartData" data-config="$ctrl.reportChartConfig" update="true">
|
|
|
</c3chart>
|
|
|
</div>
|
|
|
|
|
|
<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">
|
|
|
</c3chart>
|
|
|
</div>
|
|
|
|
|
|
<p ng-if="$ctrl.graphType.selected == 'requests_graphs'" class="text-center">
|
|
|
<small>Average requests per second from all servers</small>
|
|
|
</p>
|
|
|
|
|
|
<p ng-if="$ctrl.graphType.selected == 'response_graphs'" class="text-center">
|
|
|
<small>Average response time from all servers</small>
|
|
|
</p>
|
|
|
|
|
|
<p ng-if="$ctrl.graphType.selected == 'metrics_graphs'" class="text-center">
|
|
|
<small>Aggregated average time spent per request - broken to layers</small>
|
|
|
</p>
|
|
|
|
|
|
<p ng-if="$ctrl.graphType.selected == 'report_graphs'" class="text-center">
|
|
|
<small>Aggregated reports sent by your application</small>
|
|
|
</p>
|
|
|
|
|
|
<p ng-if="$ctrl.graphType.selected == 'slow_report_graphs'" class="text-center">
|
|
|
<small>Aggregated slow reports sent by your application</small>
|
|
|
</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
<div id="server-container">
|
|
|
|
|
|
<div ng-if="$ctrl.loading.apdex==false" class="text-center m-b-1">
|
|
|
|
|
|
<a data-ui-sref="report.list({resource:$ctrl.resource, start_date:$ctrl.startDateFilter})" class="combined-stat text-center" id="error-rate">
|
|
|
<small>Exceptions</small>
|
|
|
<br/>
|
|
|
<strong>{{ $ctrl.exceptions|numberToThousands}}</strong>
|
|
|
<span class="fa fa-chevron-right"></span>
|
|
|
</a><!--
|
|
|
|
|
|
--><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">
|
|
|
<small>Frustrating req.</small>
|
|
|
<br/>
|
|
|
<strong>{{$ctrl.frustratingRequests|numberToThousands}}</strong>
|
|
|
<span class="fa fa-chevron-right"></span>
|
|
|
</a><!--
|
|
|
|
|
|
--><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"
|
|
|
data-uib-tooltip="Requests under 4s">
|
|
|
<small>Tolerated req.</small>
|
|
|
<br/>
|
|
|
<strong>{{$ctrl.toleratedRequests|numberToThousands}}</strong>
|
|
|
<span class="fa fa-chevron-right"></span>
|
|
|
</a><!--
|
|
|
|
|
|
--><a class="combined-stat text-center" id="satisfying-requests" data-uib-tooltip="Requests under 1s">
|
|
|
<small>Satisfying req.</small>
|
|
|
<br/>
|
|
|
<strong>{{$ctrl.satisfyingRequests|numberToThousands}}</strong>
|
|
|
</a><!--
|
|
|
|
|
|
--><a data-ui-sref="uptime({resource:$ctrl.resource})" class="combined-stat text-center" id="uptime-stats" data-uib-tooltip="Uptime">
|
|
|
<small>Uptime</small>
|
|
|
<br/>
|
|
|
<strong>{{$ctrl.uptimeStats}}%</strong>
|
|
|
<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>
|
|
|
<tr ng-if="$ctrl.loading.apdex!=false" class="text-center">
|
|
|
<td colspan="5"><span class="fa fa-cog fa-spin fa-5x loader"></span></td>
|
|
|
</tr>
|
|
|
<tr ng-repeat="server in $ctrl.apdexStats" class="{{ server | apdexValue }}"
|
|
|
ng-if="$ctrl.loading.apdex==false">
|
|
|
<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>
|
|
|
<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>
|
|
|
<span class="fa {{stream.paused ? 'fa-play' : 'fa-pause'}}"></span>
|
|
|
</a>
|
|
|
<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>
|
|
|
<span class="fa fa-lock"></span>
|
|
|
</a>
|
|
|
|
|
|
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<p ng-if="$ctrl.stream.reports.length === 0">No new reports</p>
|
|
|
|
|
|
<div small-report-list reports="$ctrl.stream.reports" applications="$ctrl.applications"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-heading">
|
|
|
<h3 class="panel-title"><span class="fa fa-sort-amount-desc"></span> Request breakdown over {{ $ctrl.timeSpan.label }}</h3>
|
|
|
</div>
|
|
|
<div class="panel-body" id="view-breakdown-container">
|
|
|
<p ng-if="$ctrl.loading.requestsBreakdown!=false" class="text-center">
|
|
|
<span class="fa fa-cog fa-spin fa-5x loader"></span>
|
|
|
</p>
|
|
|
|
|
|
<div class="report-list">
|
|
|
<div ng-if="$ctrl.loading.requestsBreakdown==false" ng-repeat="view in $ctrl.requestsBreakdown">
|
|
|
<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">
|
|
|
<span class="fa fa-exclamation-triangle"></span> Report groups trending over {{ $ctrl.timeSpan.label }}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
<p ng-if="$ctrl.loading.reports != false" class="text-center">
|
|
|
<span class="fa fa-cog fa-spin fa-5x loader"></span>
|
|
|
</p>
|
|
|
|
|
|
<p ng-if="$ctrl.trendingReports.length == 0 && $ctrl.loading.reports == false">
|
|
|
No reports found
|
|
|
</p>
|
|
|
|
|
|
<div small-report-group-list groups="$ctrl.trendingReports" applications="$ctrl.applications" ng-if="$ctrl.loading.reports==false"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div class="col-sm-6">
|
|
|
|
|
|
|
|
|
<div class="panel panel-default">
|
|
|
<div class="panel-heading">
|
|
|
<h3 class="panel-title">
|
|
|
Most common slow calls over {{ $ctrl.timeSpan.label }}
|
|
|
</h3>
|
|
|
</div>
|
|
|
<div class="panel-body">
|
|
|
|
|
|
<div ng-if="$ctrl.loading.slowCalls!=false" class="text-center">
|
|
|
<span class="fa fa-cog fa-spin fa-5x loader"></span>
|
|
|
</div>
|
|
|
|
|
|
<table id="slow-statements" ng-if="$ctrl.loading.slowCalls==false">
|
|
|
<tbody>
|
|
|
<tr ng-repeat="call in $ctrl.slowCalls">
|
|
|
<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>
|
|
|
|
