<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>