Codebase list python-osprofiler / 7de2bf8
Add filter for OSprofiler html output This patch help us filter some spans in html output using angular-ui-tree-filter (MIT license) with regular expression. Currently, this work help us filter: - name - project - service - host We can add more fields as we need. Demo: - Small trace: https://tovin07.github.io/osprofiler-filtration/pretty-simple.html - Large trace: https://tovin07.github.io/osprofiler-filtration/very-large.html Change-Id: I78ff242fce3e0cf07b9e4969b783e32d9529c581 Tovin Seven 6 years ago
1 changed file(s) with 35 addition(s) and 6 deletion(s). Raw diff Collapse all Expand all
+35
-6
osprofiler/cmd/template.html less more
7878 document.write('<script type="text/javascript" src="/libs/ui-bootstrap-tpls-2.3.1.min.js"><\/script>');
7979 document.write('<script type="text/javascript" src="/libs/highlight.min.js"><\/script>');
8080 document.write('<script type="text/javascript" src="/libs/angular-highlightjs.min.js"><\/script>');
81 document.write('<script type="text/javascript" src="/libs/angular-ui-tree.min.js"><\/script>');
82 document.write('<script type="text/javascript" src="/libs/angular-ui-tree-filter.js"><\/script>');
8183 }
8284 else{
8385 document.write('<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">');
8688 document.write('<script type="text/javascript" src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.3.1.min.js"><\/script>');
8789 document.write('<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"><\/script>');
8890 document.write('<script type="text/javascript" src="https://pc035860.github.io/angular-highlightjs/angular-highlightjs.min.js"><\/script>');
91 document.write('<script type="text/javascript" src="https://cdn.rawgit.com/angular-ui-tree/angular-ui-tree/master/dist/angular-ui-tree.min.js"><\/script>');
92 document.write('<script type="text/javascript" src="https://cdn.rawgit.com/EE/angular-ui-tree-filter/master/dist/angular-ui-tree-filter.js"><\/script>');
8993 }
9094 </script>
9195 </head>
98102 var OSProfilerData = $DATA;
99103
100104 angular
101 .module('app', ['ui.bootstrap', 'hljs'])
105 .module('app', ['ui.bootstrap', 'hljs', 'ui.tree', 'ui.tree-filter'])
102106 .config(['$rootScopeProvider', function ($rootScopeProvider) {
103107 $rootScopeProvider.digestTtl(50);
104108 }])
108112 tabReplace: ' '
109113 });
110114 }])
115 .config(['uiTreeFilterSettingsProvider', function (uiTreeFilterSettingsProvider) {
116 uiTreeFilterSettingsProvider.addresses = [
117 'info.name',
118 'info.project',
119 'info.service',
120 'info.host'
121 ];
122 uiTreeFilterSettingsProvider.descendantCollection = 'children';
123 }])
111124 .controller('ProfilerController', ProfilerController)
112125 .controller('ModalInstanceController', ModalInstanceController);
113126
114127 // Inject services
115 ProfilerController.$inject = ['$uibModal'];
128 ProfilerController.$inject = ['$filter', '$uibModal'];
116129 ModalInstanceController.$inject = ['$uibModalInstance', 'info'];
117130
118 function ProfilerController($uibModal) {
131 function ProfilerController($filter, $uibModal) {
119132 // NOTE(tovin07): Bind this to vm. This is controller as and vm syntax.
120133 // This style is mainstream now. It replaces $scope style.
121134 // Ref: https://johnpapa.net/angularjss-controller-as-and-the-vm-variable/
122135 var vm = this;
136
137 vm.filter = $filter('uiTreeFilter');
123138
124139 var converInput = function(input, level) {
125140 level = (level) ? level : 0;
248263 </td>
249264 </tr>
250265 </table>
251 <div ng-hide="hide_children">
252 <div ng-repeat="data in data.children" ng-include="'tree_item_renderer.html'"></div>
266 <div ui-tree-nodes ng-model="data.children" ng-hide="hide_children">
267 <div ui-tree-node ng-repeat="data in data.children" ng-include="'tree_item_renderer.html'" ng-hide="!vm.filter(data, vm.filterPattern)"></div>
253268 </div>
254269 </div>
255270 </script>
284299 </script>
285300 <!--Body-->
286301 <div ng-controller="ProfilerController as vm">
302 <form class="form-horizontal">
303 <div class="form-group">
304 <label for="filterPattern" class="col-md-4 control-label">Span filtering:</label>
305 <div class="col-md-6">
306 <input type="text" class="form-control" id="filterPattern"
307 placeholder="Input your regular expression pattern here"
308 ng-model="vm.filterPattern">
309 </div>
310 </div>
311 </form>
287312 <table class="trace">
288313 <tr class="bold text-left" style="border-bottom: solid 1px gray;">
289314 <td class="level">Levels</td>
295320 <td class="details">Details</td>
296321 </tr>
297322 </table>
298 <div ng-repeat="data in vm.tree" ng-include="'tree_item_renderer.html'"></div>
323 <div ui-tree>
324 <div ui-tree-nodes ng-model="vm.tree">
325 <div ui-tree-node ng-repeat="data in vm.tree" ng-include="'tree_item_renderer.html'" ng-hide="!vm.filter(data, vm.filterPattern)"></div>
326 </div>
327 </div>
299328 </div>
300329 </body>
301330