components: reports componentized

backend/src/appenlight/models/alert_channel.py

@@ -210,7 +210,7 b' class AlertChannel(Base, BaseModel):'
         tmpl_vars["confirmed_total"] = len(reports)
 
         tmpl_vars["report_type"] = "error reports"
-        tmpl_vars["url_report_type"] = 'report'
+        tmpl_vars["url_report_type"] = 'report/list'
 
         alert_type = tmpl_vars.get('alert_type', '')
         if 'slow_report' in alert_type:

frontend/src/app.js

@@ -45,6 +45,9 b" angular.module('appenlight.components', ["
     'appenlight.components.appenlightHeader',
     'appenlight.components.indexDashboardView',
     'appenlight.components.logsBrowserView',
+    'appenlight.components.reportView',
+    'appenlight.components.reportsBrowserView',
+    'appenlight.components.reportsSlowBrowserView',
     'appenlight.components.eventBrowserView',
     'appenlight.components.userProfileView',
     'appenlight.components.userIdentitiesView',

frontend/src/components/views/report-view/report-view.html

@@ -86,44 +86,44 b''
     </div>
 </script>
 
-<ng-include src="'templates/loader.html'" ng-if="report.is_loading.report"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.is_loading.report"></ng-include>
 
-<div ng-if="!report.is_loading.report && report.report === null">
+<div ng-if="!$ctrl.is_loading.report && $ctrl.report === null">
     <strong>OOPS something went wrong :(</strong>
 </div>
 
-<div ng-if="report.report !== null && !report.is_loading.report">
+<div ng-if="$ctrl.report !== null && !$ctrl.is_loading.report">
 
-    <div ng-if="report.stateHolder.AeUser.id" class="row">
+    <div ng-if="$ctrl.stateHolder.AeUser.id" class="row">
       <div class="col-lg-12">
-        <a onclick="window.history.back()" class="btn btn-default" ng-if="report.window.history.length > 2"><span class="fa fa-arrow-circle-o-left"></span>
+        <a onclick="window.history.back()" class="btn btn-default" ng-if="$ctrl.window.history.length > 2"><span class="fa fa-arrow-circle-o-left"></span>
             Go back</a>
-        <a class="btn btn-default" ng-click="report.assignUsersModal()" ng-if="report.reportType == 'report'"><span
+        <a class="btn btn-default" ng-click="$ctrl.assignUsersModal()" ng-if="$ctrl.reportType == 'report'"><span
                 class="fa fa-flag"></span> Assign report
             to user</a>
 
-        <a class="btn {{ report.report.group.fixed ? 'btn-success' : 'btn-default'}}" ng-click="report.markFixed()"
-           ng-if="report.reportType == 'report'">
+        <a class="btn {{ $ctrl.report.group.fixed ? 'btn-success' : 'btn-default'}}" ng-click="$ctrl.markFixed()"
+           ng-if="$ctrl.reportType == 'report'">
             <span class="fa fa-check"></span> Mark fixed</a>
 
-        <span class="dropdown" ng-if="report.report.application.integrations.length" data-uib-dropdown on-toggle="toggled(open)">
+        <span class="dropdown" ng-if="$ctrl.report.application.integrations.length" data-uib-dropdown on-toggle="toggled(open)">
           <a class="dropdown-toggle btn btn-default" data-uib-dropdown-toggle>
               <span class="fa fa-send"></span> Integrations
           </a>
           <ul class="dropdown-menu">
-              <li ng-repeat="choice in report.report.application.integrations">
-                  <a ng-click="report.runIntegration(choice.name)">{{choice.action}}</a>
+              <li ng-repeat="choice in $ctrl.report.application.integrations">
+                  <a ng-click="$ctrl.runIntegration(choice.name)">{{choice.action}}</a>
               </li>
           </ul>
         </span>
 
-        <a class="btn btn-default" ng-click="report.markPublic()">Make {{report.group.public ? 'private' : 'public'}}</a>
+        <a class="btn btn-default" ng-click="$ctrl.markPublic()">Make {{$ctrl.group.public ? 'private' : 'public'}}</a>
 
 <span class="dropdown" data-uib-dropdown on-toggle="toggled(open)">
     <a class="btn btn-danger" data-uib-dropdown-toggle><span class="fa fa-trash-o"></span> Delete</a>
   <ul class="dropdown-menu">
       <li><a>No</a></li>
-      <li><a ng-click="report.delete()">Yes</a></li>
+      <li><a ng-click="$ctrl.delete()">Yes</a></li>
   </ul>
 </span>
       </div>
@@ -140,68 +140,68 b''
                     <table class="report-table with-ellipsis">
                         <tr>
                             <td class="table-label">Occurences</td>
-                            <td class="data">{{report.report.group.occurences}}</td>
+                            <td class="data">{{$ctrl.report.group.occurences}}</td>
                         </tr>
-                        <tr ng-if="report.report.http_status">
+                        <tr ng-if="$ctrl.report.http_status">
                             <td class="table-label">HTTP status</td>
-                            <td class="data">{{report.report.http_status}}</td>
+                            <td class="data">{{$ctrl.report.http_status}}</td>
                         </tr>
-                        <tr ng-if="report.report.group.priority">
+                        <tr ng-if="$ctrl.report.group.priority">
                             <td class="table-label">Priority</td>
-                            <td class="data">{{report.report.group.priority}}</td>
+                            <td class="data">{{$ctrl.report.group.priority}}</td>
                         </tr>
-                        <tr ng-if="report.report.group.public">
+                        <tr ng-if="$ctrl.report.group.public">
                             <td class="table-label">Public URL</td>
                             <td class="data">
                                 <form>
-                                    <textarea class="TextAreaField form-control" id="public-url" onclick="this.select()">{{report.$state.href(report.$state.current.name, report.$state.params, {absolute: true})}}</textarea>
+                                    <textarea class="TextAreaField form-control" id="public-url" onclick="this.select()">{{$ctrl.$state.href($ctrl.$state.current.name, $ctrl.$state.params, {absolute: true})}}</textarea>
                                 </form>
                             </td>
                         </tr>
-                        <tr data-uib-tooltip="{{report.report.url}}">
+                        <tr data-uib-tooltip="{{$ctrl.report.url}}">
                             <td class="table-label">URL</td>
-                            <td class="data ellipsis"><a href="{{report.report.url}}">{{report.report.url}}</a></td>
+                            <td class="data ellipsis"><a href="{{$ctrl.report.url}}">{{$ctrl.report.url}}</a></td>
                         </tr>
 
-                        <tr ng-if="report.report.ip">
+                        <tr ng-if="$ctrl.report.ip">
                             <td class="table-label">Remote IP</td>
-                            <td class="data">{{report.report.ip}}</td>
+                            <td class="data">{{$ctrl.report.ip}}</td>
                         </tr>
-                        <tr ng-if="report.report.user_agent" data-uib-tooltip="{{report.report.user_agent}}">
+                        <tr ng-if="$ctrl.report.user_agent" data-uib-tooltip="{{$ctrl.report.user_agent}}">
                             <td class="table-label">User Agent</td>
-                            <td class="data ellipsis">{{report.report.user_agent}}</td>
+                            <td class="data ellipsis">{{$ctrl.report.user_agent}}</td>
                         </tr>
-                        <tr ng-if="report.report.message">
+                        <tr ng-if="$ctrl.report.message">
                             <td class="table-label">Message</td>
-                            <td class="data">{{report.report.message}}</td>
+                            <td class="data">{{$ctrl.report.message}}</td>
                         </tr>
-                        <tr ng-if="report.report.duration > 0">
+                        <tr ng-if="$ctrl.report.duration > 0">
                             <td class="table-label">Duration</td>
                             <td class="data">
-                                <span>{{report.report.duration}}s</span>
+                                <span>{{$ctrl.report.duration}}s</span>
                             </td>
                         </tr>
                         <tr>
                             <td class="table-label">First occured</td>
                             <td class="data">
-                <span uib-tooltip="{{report.report.group.first_timestamp}}"><iso-to-relative-time
-                        time="{{report.report.group.first_timestamp}}"/></span>
+                <span uib-tooltip="{{$ctrl.report.group.first_timestamp}}"><iso-to-relative-time
+                        time="{{$ctrl.report.group.first_timestamp}}"/></span>
                             </td>
                         </tr>
                         <tr>
                             <td class="table-label">Last occured</td>
                             <td class="data">
-                <span uib-tooltip="{{report.report.group.last_timestamp}}"><iso-to-relative-time
-                        time="{{report.report.group.last_timestamp}}"/></span>
+                <span uib-tooltip="{{$ctrl.report.group.last_timestamp}}"><iso-to-relative-time
+                        time="{{$ctrl.report.group.last_timestamp}}"/></span>
                             </td>
                         </tr>
                     </table>
 
-                    <div ng-if="report.requestStats">
+                    <div ng-if="$ctrl.requestStats">
                         <h3>Performance stats</h3>
 
                         <div class="perf_stats">
-                                <span class="stat" ng-repeat="stat in report.requestStats"
+                                <span class="stat" ng-repeat="stat in $ctrl.requestStats"
                                       ng-if="stat.calls > 0 || stat.value > 0"><strong>
                                     <span class="{{stat.name}} bar" style="width:10px"></span> {{stat.calls}}
                                     <span ng-if="stat.name!='main'"><small>{{stat.name}} calls</small></span>
@@ -213,14 +213,14 b''
 
                             <div style="width: 100%; overflow:hidden">
                                 <div class="{{stat.name}} bar" style="width:{{stat.percent}}%; height: 25px"
-                                     ng-repeat="stat in report.requestStats"
+                                     ng-repeat="stat in $ctrl.requestStats"
                                      data-uib-tooltip="{{stat.value}}s - Cumulative time spent in this request on all {{ stat.name }} calls"></div>
                                 <div class="row">
                                     <div class="col-xs-6 text-left">
                                         <small>0s</small>
                                     </div>
                                     <div class="col-xs-6 text-right">
-                                        <small>{{report.report.duration.toFixed(3)}}s</small>
+                                        <small>{{$ctrl.report.duration.toFixed(3)}}s</small>
                                     </div>
                                 </div>
                             </div>
@@ -230,14 +230,14 b''
                     <h3>Tags</h3>
 
                     <table class="report-table with-tags">
-                        <tr ng-repeat="(tag, value) in report.report.tags">
+                        <tr ng-repeat="(tag, value) in $ctrl.report.tags">
                             <td class="table-label" ng-switch="tag"><!--
                         --><span ng-switch-when="user_name">Username/UID</span><!--
                         --><span ng-switch-when="view_name">View Name</span><!--
                         --><span ng-switch-when="server_name">Server Name</span><!--
                         --><span ng-switch-default>{{ tag }}</span>
                             </td>
-                            <td class="data"><a ng-click="report.searchTag(tag, value)">{{ value }}</td>
+                            <td class="data"><a ng-click="$ctrl.searchTag(tag, value)">{{ value }}</td>
                         </tr>
                     </table>
 
@@ -250,61 +250,61 b''
             <div class="frames">
                 <p class="text-center">Report history</p>
 
-                <div class="panel" ng-if="!report.is_loading.history">
+                <div class="panel" ng-if="!$ctrl.is_loading.history">
                     <div class="panel-body">
-                        <c3chart data-domid="report_history_chart" data-data="report.reportHistoryData" data-config="report.reportHistoryConfig">
+                        <c3chart data-domid="report_history_chart" data-data="$ctrl.reportHistoryData" data-config="$ctrl.reportHistoryConfig">
                         </c3chart>
                     </div>
                 </div>
 
                 <div class="row m-b-1">
                     <div class="col-sm-2 text-left">
-                        <a class="switch_detail btn btn-sm btn-default {{report.report.group.previous_report ? '' : 'disabled'}}"
-                           ng-click="report.previousDetail()">
+                        <a class="switch_detail btn btn-sm btn-default {{$ctrl.report.group.previous_report ? '' : 'disabled'}}"
+                           ng-click="$ctrl.previousDetail()">
                             <span class="fa fa-arrow-left"></span>
                             Prev. detail</a>
 
                     </div>
                     <div class="col-sm-8 text-center">
                         <small>
-       <span uib-tooltip="{{report.report.start_time|isoToRelativeTime}}" class="m-r-1">
-           {{report.report.start_time.replace('T', ' ')}} UTC</span>
-                            <span class="text-muted">ID: {{report.report.request_id}}</span>
+       <span uib-tooltip="{{$ctrl.report.start_time|isoToRelativeTime}}" class="m-r-1">
+           {{$ctrl.report.start_time.replace('T', ' ')}} UTC</span>
+                            <span class="text-muted">ID: {{$ctrl.report.request_id}}</span>
                         </small>
                     </div>
                     <div class="col-sm-2 text-right">
-                        <a class="switch_detail btn btn-sm btn-default {{report.report.group.next_report ? '' : 'disabled'}}"
-                           ng-click="report.nextDetail()">
+                        <a class="switch_detail btn btn-sm btn-default {{$ctrl.report.group.next_report ? '' : 'disabled'}}"
+                           ng-click="$ctrl.nextDetail()">
                             Next detail <span class="fa fa-arrow-right"></span></a>
                     </div>
                 </div>
 
-                <h3 class="word-wrap">{{report.report.error}}</h3>
+                <h3 class="word-wrap">{{$ctrl.report.error}}</h3>
 
-                <div ng-if="report.report.traceback">
+                <div ng-if="$ctrl.report.traceback">
 
                     <h3><strong>Traceback</strong></h3>
 
                     <div class="btn-group">
-                        <a ng-if="report.traceback.length-10 > 0 " ng-click="report.showLong = !report.showLong"
-                           class="btn btn-default {{report.showLong ? 'active' : ''}}">
+                        <a ng-if="$ctrl.traceback.length-10 > 0 " ng-click="$ctrl.showLong = !$ctrl.showLong"
+                           class="btn btn-default {{$ctrl.showLong ? 'active' : ''}}">
                             <span class="fa fa-align-left"></span>
-                            <small>Show {{report.traceback.length-10}} remaining frames</small>
+                            <small>Show {{$ctrl.traceback.length-10}} remaining frames</small>
                         </a>
 
-                        <a class="btn btn-default {{report.showRaw ? 'active' : ''}}" ng-click="report.showRaw = !report.showRaw">
+                        <a class="btn btn-default {{$ctrl.showRaw ? 'active' : ''}}" ng-click="$ctrl.showRaw = !$ctrl.showRaw">
                             <span class="fa fa-list"></span>
                             <small>Raw version</small>
                         </a>
                     </div>
 
-                    <div ng-if="report.showRaw" class="m-t-1">
-                        <pre>{{report.rawTraceback}}</pre>
+                    <div ng-if="$ctrl.showRaw" class="m-t-1">
+                        <pre>{{$ctrl.rawTraceback}}</pre>
                     </div>
-                    <div ng-if="!report.showRaw" class="m-t-1">
+                    <div ng-if="!$ctrl.showRaw" class="m-t-1">
 
-                        <div ng-repeat="frame in report.traceback" class="frame {{$odd ? 'odd' : 'even'}}"
-                             ng-if="$index >= report.traceback.length-10 || report.traceback.length <= 10 || report.showLong">
+                        <div ng-repeat="frame in $ctrl.traceback" class="frame {{$odd ? 'odd' : 'even'}}"
+                             ng-if="$index >= $ctrl.traceback.length-10 || $ctrl.traceback.length <= 10 || $ctrl.showLong">
                             <div class="frameline" ng-if="frame.line">
                                 <a class="inspect_vars" ng-click="frame.showVars = !frame.showVars" ng-if="frame.vars">
                             <span class="fa fa-search dim btn btn-default"
@@ -346,47 +346,47 b''
 
 
                 <uib-tabset>
-                    <uib-tab select="report.selectedTab('slow_calls')" active="report.tabs.slow_calls">
+                    <uib-tab select="$ctrl.selectedTab('slow_calls')" active="$ctrl.tabs.slow_calls">
                         <uib-tab-heading>
                             Slow Calls
                         </uib-tab-heading>
 
                         <h3><strong>Slow Calls</strong></h3>
 
-                        <div ng-if="report.report.slow_calls.length > 0">
-                            <div ng-repeat="call in report.report.slow_calls" ng-include="'slow_call.html'"></div>
+                        <div ng-if="$ctrl.report.slow_calls.length > 0">
+                            <div ng-repeat="call in $ctrl.report.slow_calls" ng-include="'slow_call.html'"></div>
                         </div>
 
-                        <div ng-if="report.report.slow_calls.length == 0">
+                        <div ng-if="$ctrl.report.slow_calls.length == 0">
                             No slow calls reported
                         </div>
 
                     </uib-tab>
 
 
-                    <uib-tab select="report.selectedTab('request_details')" active="report.tabs.request_details">
+                    <uib-tab select="$ctrl.selectedTab('request_details')" active="$ctrl.tabs.request_details">
                         <uib-tab-heading>
                             Request details
                         </uib-tab-heading>
 
                         <h3><strong>Extra</strong></h3>
-                        <div class="var-listing" human-format vars="report.report.extra"></div>
+                        <div class="var-listing" human-format vars="$ctrl.report.extra"></div>
                         <h3><strong>Request details</strong></h3>
-                        <div class="var-listing" human-format vars="report.report.request"></div>
+                        <div class="var-listing" human-format vars="$ctrl.report.request"></div>
 
                     </uib-tab>
 
-                    <uib-tab select="report.selectedTab('logs')" active="report.tabs.logs">
+                    <uib-tab select="$ctrl.selectedTab('logs')" active="$ctrl.tabs.logs">
                         <uib-tab-heading>
                             Logs
                         </uib-tab-heading>
 
-                        <div ng-if="report.is_loading.logs!=false" class="text-center">
+                        <div ng-if="$ctrl.is_loading.logs!=false" class="text-center">
                             <span class="fa fa-cog fa-spin fa-3x loader"></span>
                         </div>
-                        <p ng-if="report.reportLogs.length == 0"> No logs found</p>
+                        <p ng-if="$ctrl.reportLogs.length == 0"> No logs found</p>
 
-                        <table class="table table-striped log-list" ng-if="report.reportLogs.length > 0">
+                        <table class="table table-striped log-list" ng-if="$ctrl.reportLogs.length > 0">
 
                             <caption>Logs</caption>
                             <thead>
@@ -396,7 +396,7 b''
                             </tr>
                             </thead>
                             <tbody>
-                            <tr ng-repeat="log in report.reportLogs track by log.log_id">
+                            <tr ng-repeat="log in $ctrl.reportLogs track by log.log_id">
                                 <td>
                                     <a class="tag {{log.log_level|lowercase}}">
                                         <span class="name">level:</span> {{log.log_level}}</a>
@@ -421,18 +421,18 b''
                     </uib-tab>
 
 
-                    <uib-tab select="report.selectedTab('comments')" active="report.tabs.comments">
+                    <uib-tab select="$ctrl.selectedTab('comments')" active="$ctrl.tabs.comments">
                         <uib-tab-heading>
                             Comments
-                            <span class="label label-info">{{report.report.comments.length}}</span>
+                            <span class="label label-info">{{$ctrl.report.comments.length}}</span>
 
                         </uib-tab-heading>
 
                         <h3><strong>Comments</strong></h3>
 
-                        <p ng-if="report.report.comments.length == 0">No comments yet - be first to add one!</p>
+                        <p ng-if="$ctrl.report.comments.length == 0">No comments yet - be first to add one!</p>
 
-                        <div class="comment" ng-repeat="comment in report.report.comments">
+                        <div class="comment" ng-repeat="comment in $ctrl.report.comments">
                             <p name="comment-{{comment.comment_id}}"><span class="fa fa-comment"></span>
                                 <strong>{{comment.user_name}}</strong>
                                 <iso-to-relative-time time="{{comment.created_timestamp}}"/>
@@ -440,32 +440,32 b''
                             <p class="well">{{comment.body}}</p>
                         </div>
 
-                        <form name="commentForm" ng-submit="report.addComment()">
+                        <form name="commentForm" ng-submit="$ctrl.addComment()">
                             <div class="form-group">
-                <textarea type="text" class="form-control" id="report.commentForm" ng-model="report.comment" required
-                          mentio mentio-search="report.searchMentionedPeople(term)" mentio-items="report.mentionedPeople| filter:label:typedTerm" class="form-control"></textarea>
+                <textarea type="text" class="form-control" id="$ctrl.commentForm" ng-model="$ctrl.comment" required
+                          mentio mentio-search="$ctrl.searchMentionedPeople(term)" mentio-items="$ctrl.mentionedPeople| filter:label:typedTerm" class="form-control"></textarea>
 
                             </div>
                             <div class="form-group">
-                                <button class="btn btn-info" ng-disabled="report.commentForm.$invalid">Comment</button>
+                                <button class="btn btn-info" ng-disabled="$ctrl.commentForm.$invalid">Comment</button>
                             </div>
                         </form>
 
-                        <div ng-repeat="comment in report.report.comments" class="{{$odd ? 'odd' : 'even'}}" class="repeat-animate">
+                        <div ng-repeat="comment in $ctrl.report.comments" class="{{$odd ? 'odd' : 'even'}}" class="repeat-animate">
                         </div>
 
                     </uib-tab>
 
-                    <uib-tab select="report.selectedTab('affected_users')" active="report.tabs.affected_users">
+                    <uib-tab select="$ctrl.selectedTab('affected_users')" active="$ctrl.tabs.affected_users">
                         <uib-tab-heading>
                             Affected users
-                            <span class="label label-warning">{{report.report.affected_users_count}}</span>
+                            <span class="label label-warning">{{$ctrl.report.affected_users_count}}</span>
 
                         </uib-tab-heading>
 
                         <h3><strong>50 most affected users ID's by this issue:</strong></h3>
                         <ul class="affected-user-list">
-                            <li ng-repeat="user in report.report.top_affected_users">
+                            <li ng-repeat="user in $ctrl.report.top_affected_users">
                                 <strong>{{user.username}}</strong> <span class="badge" uib-tooltip="occurences">{{user.count}}</span>
                             </li>
                         </ul>

frontend/src/components/views/report-view/report-view.js

@@ -17,12 +17,17 b''
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers').controller('ReportsViewController', ReportsViewController);
-ReportsViewController.$inject = ['$window', '$location', '$state', '$uibModal',
+angular.module('appenlight.components.reportView', [])
+    .component('reportView', {
+        templateUrl: 'components/views/report-view/report-view.html',
+        controller: ReportViewController
+    });
+
+ReportViewController.$inject = ['$window', '$location', '$state', '$uibModal',
     '$cookies', 'reportGroupPropertyResource', 'reportGroupResource',
     'logsNoIdResource', 'stateHolder'];
 
-function ReportsViewController($window, $location, $state, $uibModal, $cookies, reportGroupPropertyResource, reportGroupResource, logsNoIdResource, stateHolder) {
+function ReportViewController($window, $location, $state, $uibModal, $cookies, reportGroupPropertyResource, reportGroupResource, logsNoIdResource, stateHolder) {
     var vm = this;
     vm.window = $window;
     vm.stateHolder = stateHolder;

frontend/src/components/views/reports-browser-view/reports-browser-view.html

@@ -1,29 +1,29 b''
-<ng-include src="'templates/loader.html'" ng-if="reports_list.is_loading"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.is_loading"></ng-include>
 
-<div ng-if="reports_list.is_loading === false">
+<div ng-if="$ctrl.is_loading === false">
 
     <p class="search-params">
         <strong>Search params:</strong>
-        <span ng-repeat="tag in reports_list.searchParams.tags" class="tag">
+        <span ng-repeat="tag in $ctrl.searchParams.tags" class="tag">
             <strong>{{tag.type}}</strong>
-            {{ tag.type == 'resource' ? reports_list.applications[tag.value].resource_name : tag.value }}
+            {{ tag.type == 'resource' ? $ctrl.applications[tag.value].resource_name : tag.value }}
 
-            <a ng-click="reports_list.removeSearchTag(tag)"><span class="fa fa-times"></span></a>
+            <a ng-click="$ctrl.removeSearchTag(tag)"><span class="fa fa-times"></span></a>
         </span>
     </p>
 
     <form class="form">
         <div class="typeahead-tags">
-            <input type="text" id="typeAhead" ng-model="reports_list.filterTypeAhead" placeholder="Start typing to filter reports - filter by tags, exception, priority or other properties."
-                   ng-keydown="reports_list.typeAheadTag($event)"
-                   uib-typeahead="tag as tag.text for tag in reports_list.filterTypeAheadOptions | filter:$viewValue:aheadFilter"
+            <input type="text" id="typeAhead" ng-model="$ctrl.filterTypeAhead" placeholder="Start typing to filter reports - filter by tags, exception, priority or other properties."
+                   ng-keydown="$ctrl.typeAheadTag($event)"
+                   uib-typeahead="tag as tag.text for tag in $ctrl.filterTypeAheadOptions | filter:$viewValue:aheadFilter"
                    typeahead-min-length="1" class="form-control"
                    typeahead-template-url="templates/directives/search_type_ahead.html">
         </div>
     </form>
 
 
-    <div class="well position-absolute increse-zindex" ng-show="reports_list.showDatePicker" ng-model="reports_list.pickerDate" ng-change="reports_list.pickerDateChanged()"
+    <div class="well position-absolute increse-zindex" ng-show="$ctrl.showDatePicker" ng-model="$ctrl.pickerDate" ng-change="$ctrl.pickerDateChanged()"
          class="animate-show">
         <uib-datepicker></uib-datepicker>
     </div>
@@ -32,29 +32,29 b''
 
 
     <div class="text-center">
-        <uib-pagination total-items="reports_list.itemCount" items-per-page="reports_list.itemsPerPage" ng-model="reports_list.page" max-size="10"
+        <uib-pagination total-items="$ctrl.itemCount" items-per-page="$ctrl.itemsPerPage" ng-model="$ctrl.page" max-size="10"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"
-                        ng-change="reports_list.paginationChange()"
-                        ng-show="!reports_list.is_loading"></uib-pagination>
+                        ng-change="$ctrl.paginationChange()"
+                        ng-show="!$ctrl.is_loading"></uib-pagination>
     </div>
 
     <div class="panel panel-default">
         <!-- Default panel contents -->
 
-        <table class="table table-striped report-list" ng-show="!reports_list.is_loading">
+        <table class="table table-striped report-list" ng-show="!$ctrl.is_loading">
             <caption>Reports</caption>
             <thead>
             <tr>
                 <th class="c1 ordering occurences">#</th>
                 <th class="c2 application">Application</th>
-                <th class="c4 when">When <input type="checkbox" ng-model="reports_list.notRelativeTime"
-                                                ng-change="reports_list.changeRelativeTime()"
+                <th class="c4 when">When <input type="checkbox" ng-model="$ctrl.notRelativeTime"
+                                                ng-change="$ctrl.changeRelativeTime()"
                                                 title="Tick to see UTC time instead relative"></th>
                 <th class="c5 error_type">Error</th>
             </tr>
             </thead>
             <tbody>
-            <tr ng-repeat="report in reports_list.reportsPage track by report.id">
+            <tr ng-repeat="report in $ctrl.reportsPage track by report.id">
                 <td class="c1 occurences">
                     <span class="priority-{{report.group.priority}}" data-uib-tooltip="Report priority">{{report.group.priority}}</span>
               <span class="count {{report.presentation.className}}" data-uib-tooltip="{{report.presentation.tooltip}}">
@@ -65,10 +65,10 b''
                     <div class="app_name">{{report.resource_name}}</div>
                     <span class="server">@{{report.tags.server_name}}</span></td>
                 <td class="c3 when">
-                <span ng-show="!reports_list.notRelativeTime"><span data-uib-tooltip="{{report.group.last_timestamp}}"><iso-to-relative-time
+                <span ng-show="!$ctrl.notRelativeTime"><span data-uib-tooltip="{{report.group.last_timestamp}}"><iso-to-relative-time
                         time="{{report.group.last_timestamp}}"/></span>
                 </span>
-                    <span ng-show="reports_list.notRelativeTime">{{report.group.last_timestamp.replace('T', ' ').slice(0,16)}}</span>
+                    <span ng-show="$ctrl.notRelativeTime">{{report.group.last_timestamp.replace('T', ' ').slice(0,16)}}</span>
                 </td>
                 <td class="c4 report ellipsis"><a  ui-sref="report.view_detail({groupId:report.group.id, reportId:report.id})" title="{{report.error}}">{{report.error || 'Unknown Exception'}}</a> <br/>
                     <span class="url">{{ report.tags.view_name || report.url_path}}</td>
@@ -80,10 +80,10 b''
 
 
     <div class="text-center">
-        <uib-pagination total-items="reports_list.itemCount" items-per-page="reports_list.itemsPerPage" ng-model="reports_list.page" max-size="10"
+        <uib-pagination total-items="$ctrl.itemCount" items-per-page="$ctrl.itemsPerPage" ng-model="$ctrl.page" max-size="10"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"
-                        ng-change="reports_list.paginationChange()"
-                        ng-show="!reports_list.is_loading"></uib-pagination>
+                        ng-change="$ctrl.paginationChange()"
+                        ng-show="!$ctrl.is_loading"></uib-pagination>
     </div>
 
 </div>

frontend/src/components/views/reports-browser-view/reports-browser-view.js

@@ -17,13 +17,16 b''
 // # services, and proprietary license terms, please see
 // # https://rhodecode.com/licenses/
 
-angular.module('appenlight.controllers')
-    .controller('ReportsListController', ReportsListController);
+angular.module('appenlight.components.reportsBrowserView', [])
+    .component('reportsBrowserView', {
+        templateUrl: 'components/views/reports-browser-view/reports-browser-view.html',
+        controller: reportsBrowserViewController
+    });
 
-ReportsListController.$inject = ['$location', '$cookies',
+reportsBrowserViewController.$inject = ['$location', '$cookies',
     'stateHolder', 'typeAheadTagHelper', 'reportsResource'];
 
-function ReportsListController($location, $cookies, stateHolder,
+function reportsBrowserViewController($location, $cookies, stateHolder,
                                typeAheadTagHelper, reportsResource) {
     var vm = this;
     vm.applications = stateHolder.AeUser.applications_map;

frontend/src/components/views/reports-slow-browser-view/reports-slow-browser-view.html

@@ -1,14 +1,14 b''
-<ng-include src="'templates/loader.html'" ng-if="reports_list.is_loading"></ng-include>
+<ng-include src="'templates/loader.html'" ng-if="$ctrl.is_loading"></ng-include>
 
-<div ng-if="reports_list.is_loading === false">
+<div ng-if="$ctrl.is_loading === false">
 
     <p class="search-params">
         <strong>Search params:</strong>
-        <span ng-repeat="tag in reports_list.searchParams.tags" class="tag">
+        <span ng-repeat="tag in $ctrl.searchParams.tags" class="tag">
             <strong>{{tag.type}}</strong>
-            {{ tag.type == 'resource' ? reports_list.applications[tag.value].resource_name : tag.value }}
+            {{ tag.type == 'resource' ? $ctrl.applications[tag.value].resource_name : tag.value }}
 
-            <a ng-click="reports_list.removeSearchTag(tag)"><span class="fa fa-times"></span></a>
+            <a ng-click="$ctrl.removeSearchTag(tag)"><span class="fa fa-times"></span></a>
         </span>
     </p>
 
@@ -16,16 +16,16 b''
 
     <form class="form">
         <div class="typeahead-tags">
-            <input type="text" id="typeAhead" ng-model="reports_list.filterTypeAhead" placeholder="Start typing to filter slowness reports - filter by tags, average response time, priority or other properties."
-                   ng-keydown="reports_list.typeAheadTag($event)"
-                   uib-typeahead="tag as tag.text for tag in reports_list.filterTypeAheadOptions | filter:$viewValue:aheadFilter"
+            <input type="text" id="typeAhead" ng-model="$ctrl.filterTypeAhead" placeholder="Start typing to filter slowness reports - filter by tags, average response time, priority or other properties."
+                   ng-keydown="$ctrl.typeAheadTag($event)"
+                   uib-typeahead="tag as tag.text for tag in $ctrl.filterTypeAheadOptions | filter:$viewValue:aheadFilter"
                    typeahead-min-length="1" class="form-control"
                    typeahead-template-url="templates/directives/search_type_ahead.html">
         </div>
     </form>
 
 
-    <div class="well position-absolute increse-zindex" ng-show="reports_list.showDatePicker" ng-model="reports_list.pickerDate" ng-change="reports_list.pickerDateChanged()"
+    <div class="well position-absolute increse-zindex" ng-show="$ctrl.showDatePicker" ng-model="$ctrl.pickerDate" ng-change="$ctrl.pickerDateChanged()"
          class="animate-show">
         <uib-datepicker></uib-datepicker>
     </div>
@@ -34,31 +34,31 b''
 
 
     <div class="text-center">
-        <uib-pagination total-items="reports_list.itemCount" items-per-page="reports_list.itemsPerPage" ng-model="reports_list.page" max-size="10"
+        <uib-pagination total-items="$ctrl.itemCount" items-per-page="$ctrl.itemsPerPage" ng-model="$ctrl.page" max-size="10"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"
-                        ng-change="reports_list.paginationChange()"
-                        ng-show="!reports_list.is_loading"></uib-pagination>
+                        ng-change="$ctrl.paginationChange()"
+                        ng-show="!$ctrl.is_loading"></uib-pagination>
     </div>
 
 
     <div class="panel panel-default">
         <!-- Default panel contents -->
 
-        <table class="table table-striped report-list" ng-show="!reports_list.is_loading">
+        <table class="table table-striped report-list" ng-show="!$ctrl.is_loading">
             <caption>Slow Request Reports</caption>
             <thead>
             <tr>
                 <td class="c1 ordering occurences">#</td>
                 <td class="c2 average_duration">Avg. duration</td>
                 <td class="c3 application">Application</td>
-                <td class="c5 when">When <input type="checkbox" ng-model="reports_list.notRelativeTime"
-                                                ng-change="reports_list.changeRelativeTime()"
+                <td class="c5 when">When <input type="checkbox" ng-model="$ctrl.notRelativeTime"
+                                                ng-change="$ctrl.changeRelativeTime()"
                                                 title="Tick to see UTC time instead relative"></td>
                 <td class="c6 error_type">Location</td>
             </tr>
             </thead>
             <tbody>
-            <tr ng-repeat="report in reports_list.reportsPage track by report.id">
+            <tr ng-repeat="report in $ctrl.reportsPage track by report.id">
                 <td class="c1 occurences">
                     <span class="priority-{{report.group.priority}}" data-uib-tooltip="Report priority">{{report.group.priority}}</span>
               <span class="count {{report.presentation.className}}" data-uib-tooltip="{{report.presentation.tooltip}}">
@@ -70,10 +70,10 b''
                     <div class="app_name">{{report.resource_name}}</div>
                     <span class="server">@{{report.tags.server_name}}</span></td>
                 <td class="c4 when">
-                <span ng-show="!reports_list.notRelativeTime"><span data-uib-tooltip="{{report.group.last_timestamp}}"><iso-to-relative-time
+                <span ng-show="!$ctrl.notRelativeTime"><span data-uib-tooltip="{{report.group.last_timestamp}}"><iso-to-relative-time
                         time="{{report.group.last_timestamp}}"/></span>
                 </span>
-                    <span ng-show="reports_list.notRelativeTime">{{report.group.last_timestamp.replace('T', ' ').slice(0,16)}}</span>
+                    <span ng-show="$ctrl.notRelativeTime">{{report.group.last_timestamp.replace('T', ' ').slice(0,16)}}</span>
                 </td>
                 <td class="c5 report ellipsis">
                     <a  ui-sref="report.view_detail({groupId:report.group.id, reportId:report.id})">{{ report.tags.view_name || report.url_path}} </span></a></td>
@@ -86,10 +86,10 b''
     </div>
 
     <div class="text-center">
-        <uib-pagination total-items="reports_list.itemCount" items-per-page="reports_list.itemsPerPage" ng-model="reports_list.page" max-size="10"
+        <uib-pagination total-items="$ctrl.itemCount" items-per-page="$ctrl.itemsPerPage" ng-model="$ctrl.page" max-size="10"
                         class="pagination pagination-sm" boundary-links="true" direction-links="false"
-                        ng-change="reports_list.paginationChange()"
-                        ng-show="!reports_list.is_loading"></uib-pagination>
+                        ng-change="$ctrl.paginationChange()"
+                        ng-show="!$ctrl.is_loading"></uib-pagination>
     </div>
 
 </div>

frontend/src/components/views/reports-slow-browser-view/reports-slow-browser-view.js

@@ -21,13 +21,16 b''
 
 /* Controllers */
 
-angular.module('appenlight.controllers')
-    .controller('ReportsListSlowController', ReportsListSlowController);
+angular.module('appenlight.components.reportsSlowBrowserView', [])
+    .component('reportsSlowBrowserView', {
+        templateUrl: 'components/views/reports-slow-browser-view/reports-slow-browser-view.html',
+        controller: ReportsSlowBrowserViewController
+    });
 
-ReportsListSlowController.$inject = ['$location', '$cookies',
+ReportsSlowBrowserViewController.$inject = ['$location', '$cookies',
     'stateHolder', 'typeAheadTagHelper', 'slowReportsResource']
 
-function ReportsListSlowController($location, $cookies, stateHolder, typeAheadTagHelper, slowReportsResource) {
+function ReportsSlowBrowserViewController($location, $cookies, stateHolder, typeAheadTagHelper, slowReportsResource) {
     var vm = this;
     vm.applications = stateHolder.AeUser.applications_map;
     stateHolder.section = 'slow_reports';

frontend/src/routes.js

@@ -34,30 +34,26 b" angular.module('appenlight').config(['$stateProvider', '$urlRouterProvider', fun"
     $stateProvider.state('report', {
         abstract: true,
         url: '/ui/report',
-        templateUrl: 'templates/reports/parent_view.html'
+        template: '<ui-view></ui-view>'
     });
 
     $stateProvider.state('report.list', {
-        url: '?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
-        templateUrl: 'templates/reports/list.html',
-        controller: 'ReportsListController as reports_list'
+        url: '/list?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
+        component: 'reportsBrowserView'
     });
 
     $stateProvider.state('report.list_slow', {
         url: '/list_slow?start_date&min_duration&max_duration&{view_name:any}&{server_name:any}&resource',
-        templateUrl: 'templates/reports/list_slow.html',
-        controller: 'ReportsListSlowController as reports_list'
+        component: 'reportsSlowBrowserView'
     });
 
     $stateProvider.state('report.view_detail', {
         url: '/:groupId/:reportId',
-        templateUrl: 'templates/reports/view.html',
-        controller: 'ReportsViewController as report'
+        component: 'reportView'
     });
     $stateProvider.state('report.view_group', {
         url: '/:groupId',
-        templateUrl: 'templates/reports/view.html',
-        controller: 'ReportsViewController as report'
+        component: 'reportView'
     });
     $stateProvider.state('events', {
         url: '/ui/events',