##// END OF EJS Templates
front dashboard: turn into component
front dashboard: turn into component

File last commit:

r75:3b73cc9e
r75:3b73cc9e
Show More
index-dashboard.html
346 lines | 18.5 KiB | text/html | HtmlLexer
<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">
&nbsp;&nbsp; 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>