|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>mbGraph</title>
<script data-require="d3@3.3.11" data-semver="3.3.11" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.3.11/d3.js"></script>
<script data-require="nvd3@*" data-semver="1.1.14-beta" src="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.js"></script>
<script src="//code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
<script data-semver="1.3.16" src="//code.angularjs.org/1.3.16/angular.js" data-require="angular.js@1.3.x"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link data-require="nvd3@*" data-semver="1.1.14-beta" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.14-beta/nv.d3.css" />
<script src="mbGraph.js"></script>
<style>
.dashed { stroke-dasharray: 5,5; }
</style>
</head>
<body ng-app="mbGraph">
<div ng-controller="InfoCtrl as InfoCtrl" class="container">
<div ng-controller="GraphCtrl as GraphCtrl">
<div class="page-header">
<h2>Memory usage graph</h2>
</div>
<!-- {{ InfoCtrl.info | json }} -->
<div>
<div ng-show="GraphCtrl.profile_error" class="alert alert-danger" role="alert"><strong>Error!</strong>
Failed to load reference profile (from {{ GraphCtrl.profile_url }}). {{ GraphCtrl.profile_error }}.
</div>
<div ng-show="GraphCtrl.reference_error" class="alert alert-danger" role="alert"><strong>Error!</strong>
Failed to load reference profile (from {{ GraphCtrl.reference_url }}). {{ GraphCtrl.reference_error }}.
</div>
</div>
<div ng-show="GraphCtrl.profile">
<p>
Profile loaded from <strong>{{ GraphCtrl.profile_url }}</strong>.
<br />
<span ng-show="GraphCtrl.reference"> Reference profile loaded from <strong>{{ GraphCtrl.reference_url }}</strong>.</span>
</p>
<br />
<form class="form-inline">
<div class="form-group">
<label for="pidInput" class="control-label">Select process: </label>
<select class="form-control" id="pidInput" ng-model="LocParams.p.pid" ng-options="key as key + ': ' + value.cmdline_short for (key, value) in GraphCtrl.profile">
</select>
</div>
</form>
</div>
<memory-graph width="800" height="400" data="GraphCtrl.graph_data" reference-data="GraphCtrl.graph_data_reference"></memory-graph>
<div ng-show="GraphCtrl.graph_data">
<p>
Process: <strong>{{ GraphCtrl.graph_data.cmdline }}</strong>.
Started at <strong>{{ GraphCtrl.graph_data.start_ts*1000 | date:'yyyy-MM-dd HH:mm:ss Z' }}</strong>
and contains <strong>{{ GraphCtrl.graph_data.frames.length }}</strong> frames.
<br />
<span ng-show="GraphCtrl.graph_data_reference">
Reference process: <strong>{{ GraphCtrl.graph_data_reference.cmdline }}</strong>.
Started at <strong>{{ GraphCtrl.graph_data_reference.start_ts*1000 | date:'yyyy-MM-dd HH:mm:ss Z' }}</strong>
and contains <strong>{{ GraphCtrl.graph_data_reference.frames.length }}</strong> frames.
</span>
</p>
</div>
</div> <!-- graphctrl -->
</div>
</body>
</html>
|