Skip to content

Commit f378063

Browse files
author
Randi Thomas
committed
named view sets of markers and unit tests
1 parent 40f3be4 commit f378063

File tree

9 files changed

+381
-67
lines changed

9 files changed

+381
-67
lines changed

‎Gruntfile.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ module.exports = function (grunt) {
22

33
grunt.loadNpmTasks('grunt-contrib-connect');
44
grunt.loadNpmTasks('grunt-minified');
5+
grunt.loadNpmTasks('grunt-karma');
56

67
grunt.initConfig({
78
connect: {
@@ -23,9 +24,25 @@ module.exports = function (grunt) {
2324
allinone: false,
2425
ext: '.min.js'
2526
}
27+
},
28+
/**
29+
* The Karma configurations.
30+
*/
31+
karma: {
32+
options: {
33+
configFile: 'karma.conf.js'
34+
},
35+
unit: {
36+
port: 9019,
37+
background: true
38+
},
39+
test: {
40+
singleRun: true
41+
}
2642
}
2743
});
2844

2945
grunt.registerTask('default', ['connect']);
3046
grunt.registerTask('build', ['minified']);
47+
grunt.registerTask('test', ['karma:test']);
3148
};

‎README.md

Lines changed: 89 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
angular-apm
22
==============
33

4-
Service to set performance markers and report via browser console or HTTP GET to beacon
4+
Service to set performance markers and report via browser console or HTTP GET to beacon.
5+
6+
This library accomplishes monitoring reporting in a similar way to [angular-performance](http://code.mendhak.com/angular-performance/). But it functions as a provider instead of a directive and allows many markers to be put into one reporting view enabling a much more detailed understanding of performance.
57

68
Installation
79
------------
@@ -52,12 +54,87 @@ grunt
5254

5355
After this, go at ``127.0.0.1:9001/example`` in your browser, and you will see running example of ``angular-apm``.
5456
In the logs and the network debugger tab under img/beacon you should metrics such as:
55-
```markers=["$digest:2", "Controller2:329", "$digest:3", "Controller1:402", "$digest:1", "Controller3:8766"] ```
57+
```
58+
exampleView=["$digest:2", "Controller2:329", "$digest:3", "Controller1:402", "$digest:1", "Controller3:8766"]
59+
```
5660

5761
Usage
5862
-----
5963

60-
See example/js/app.js, will document in the near future.
64+
First you need to inject ``perfMonitor`` into your angular module.
65+
66+
```
67+
var myApp = angular.module('myApp', ['perfMonitor']);
68+
```
69+
Then you can configure it.
70+
71+
```
72+
.config(['perfMonitorProvider', function(perfMonitorProvider) {
73+
perfMonitorProvider.setOptions({
74+
logMetrics: true,
75+
reportThreshold: 10,
76+
beaconUrl: undefined,
77+
enabled: true,
78+
reportOnEndView: false
79+
});
80+
}])
81+
```
82+
83+
Then, if you want to use it from your controller
84+
85+
```
86+
myApp.controller('cookieController', ['$scope', 'perfMonitor', function($scope, perfMonitor) {
87+
// your code here
88+
}]);
89+
```
90+
91+
#### Start View
92+
93+
Start a view with a specified name
94+
```
95+
perfMonitor.startView(name)
96+
```
97+
98+
A view is intended to encapsulate a set of related markers. The view name will be the used in reporting so it is highly recommended to set. Also, only one view can be active at a time, for now.
99+
100+
If no view is set the reports will use the name 'markers'.
101+
102+
103+
#### Start marker
104+
105+
Start a marker with a specified name
106+
```
107+
perfMonitor.startMarker(name)
108+
```
109+
110+
The name must be unique for active markers. Serial repetition of names is ok.
111+
112+
#### End marker
113+
114+
End given a marker with a specified name
115+
```
116+
perfMonitor.endMarker(name)
117+
```
118+
119+
#### End view
120+
121+
End view and send report
122+
```
123+
perfMonitor.endView()
124+
```
125+
126+
This is only valid when reportOnEndView=true. Otherwise the view will be considered complete when all active markers are ended.
127+
128+
129+
#### Monitor digest cycle
130+
131+
```
132+
perfMonitor.monitorDigest($rootScope)
133+
```
134+
135+
Wraps the digest cycle with a marker named $digest. This is a somewhat risky activity as angular likes its digest cycle. So, ensure a reasonable reportThreshold is set.
136+
137+
Also, sending the http GET report kicks off a digest cycle so it temporarily disables monitoring while sending the report to avoid an infinite loop.
61138

62139

63140
Options
@@ -68,7 +145,7 @@ Options
68145
logMetrics: true
69146
```
70147

71-
The logMetrics boolean detemines whether the performance metrics should be logged to the browser's console.
148+
The logMetrics boolean determines whether the performance metrics should be logged to the browser's console.
72149

73150

74151
#### reportThreshold
@@ -95,8 +172,12 @@ enabled: true
95172

96173
The enabled boolean is used to enable or disable the service. This is intended to allow the markers to stay in the code without having any performance impact when not desired.
97174

98-
TODO
99-
----
100175

101-
- explicit start and stop instead of relying on being done when there are no
102-
- karma unit tests
176+
#### reportOnEndView
177+
178+
```
179+
reportOnEndView: false
180+
```
181+
182+
The reportOnEndView boolean determines the behavior for reporting. If true, reports are generated when endView() is called. If false, reports are generated when the last active marker is ended.
183+

‎bower.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@
2727
"Gruntfile.js"
2828
],
2929
"dependencies": {
30-
"angular": ">=1.2"
30+
"angular": ">=1.2",
31+
"angular-mocks": ">=1.2"
3132
}
3233
}

‎dist/angular-apm.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎example/js/app.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ angular.module('perfExampleApp', [
1818
})
1919

2020
.controller('Controller1', ['$scope', '$timeout', 'perfMonitor', function($scope, $timeout, perfMonitor) {
21+
perfMonitor.startView("exampleView");
2122
perfMonitor.startMarker('Controller1');
2223

2324
$timeout(function() {

‎karma.conf.js

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
module.exports = function(config) {
2+
config.set({
3+
4+
// base path, that will be used to resolve files and exclude
5+
basePath: '',
6+
7+
8+
// frameworks to use
9+
frameworks: [ 'jasmine'],
10+
plugins: [
11+
'karma-jasmine',
12+
'karma-phantomjs-launcher'
13+
],
14+
15+
16+
// list of files / patterns to load in the browser
17+
files: [
18+
'bower_components/angular/angular.js',
19+
'bower_components/angular-mocks/angular-mocks.js',
20+
'src/**/*.js'
21+
],
22+
23+
24+
// list of files to exclude
25+
exclude: [
26+
'**/*.swp'
27+
],
28+
29+
30+
// test results reporter to use
31+
// possible values: 'dots', 'progress', 'junit', 'growl', 'coverage'
32+
reporters: ['progress'],
33+
34+
35+
// web server port
36+
port: 9876,
37+
38+
39+
// enable / disable colors in the output (reporters and logs)
40+
colors: true,
41+
42+
43+
// level of logging
44+
// possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
45+
logLevel: config.LOG_INFO,
46+
47+
// enable / disable watching file and executing tests whenever any file changes
48+
autoWatch: true,
49+
50+
// Start these browsers, currently available:
51+
// - Chrome
52+
// - ChromeCanary
53+
// - Firefox
54+
// - Opera
55+
// - Safari (only Mac)
56+
// - PhantomJS
57+
// - IE (only Windows)
58+
browsers: ['PhantomJS'],
59+
60+
61+
// If browser does not capture in given timeout [ms], kill it
62+
captureTimeout: 60000,
63+
64+
65+
// Continuous Integration mode
66+
// if true, it capture browsers, run tests and exit
67+
singleRun: false
68+
});
69+
};

‎package.json

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,36 @@
11
{
2-
"name": "angular-apm",
3-
"version": "0.1.0",
4-
"description": "angular module for application performance monitoring",
5-
"main": "angular-apm.js",
6-
"directories": {
7-
"example": "example"
8-
},
9-
"dependencies": {},
10-
"scripts": {
11-
"test": "echo 'All ok'"
12-
},
13-
"keywords": [
14-
"apm"
15-
],
16-
"author": "Randi Thomas",
17-
"license": "MIT",
18-
"devDependencies": {
19-
"grunt-contrib-connect": "~0.5.0",
20-
"require": "~0.5.0",
21-
"npm": "~1.3.11",
22-
"grunt-minified": "0.0.6",
23-
"install": "~0.1.7",
24-
"bower": "~1.3.9",
25-
"grunt": "~0.4.1"
26-
},
27-
"repository": {
28-
"type": "git",
29-
"url": "git@github.com:randith/angular-apm.git"
30-
}
2+
"name": "angular-apm",
3+
"version": "0.1.0",
4+
"description": "angular module for application performance monitoring",
5+
"main": "angular-apm.js",
6+
"directories": {
7+
"example": "example"
8+
},
9+
"dependencies": {},
10+
"scripts": {
11+
"test": "echo 'All ok'"
12+
},
13+
"keywords": [
14+
"apm"
15+
],
16+
"author": "Randi Thomas",
17+
"license": "MIT",
18+
"devDependencies": {
19+
"grunt-contrib-connect": "~0.5.0",
20+
"require": "~0.5.0",
21+
"npm": "~1.3.11",
22+
"grunt-minified": "0.0.6",
23+
"install": "~0.1.7",
24+
"bower": "~1.3.9",
25+
"grunt": "~0.4.1",
26+
"grunt-karma": "^0.8.2",
27+
"karma-html-reporter": "^0.2.4",
28+
"karma-jasmine": "^0.1.5",
29+
"karma-phantomjs-launcher": "^0.1.4",
30+
"karma-sinon": "1.0.3"
31+
},
32+
"repository": {
33+
"type": "git",
34+
"url": "git@github.com:randith/angular-apm.git"
35+
}
3136
}

0 commit comments

Comments
 (0)