data/html/mbGraph.html

0001 <!DOCTYPE html>
0002 <html>
0003   <head>
0004     <meta charset="utf-8" />
0005
0006     <title>mbGraph</title>
0007
0008     <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>
0009     <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>
0010
0011     <script src="//code.jquery.com/jquery-2.1.4.min.js" data-semver="2.1.4" data-require="jquery@*"></script>
0012     <script data-semver="1.3.16" src="//code.angularjs.org/1.3.16/angular.js" data-require="angular.js@1.3.x"></script>
0013     <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
0014
0015     <link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
0016     <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" />
0017
0018     <script src="mbGraph.js"></script>
0019     <style>
0020 .dashed { stroke-dasharray: 5,5; }
0021     </style>
0022   </head>
0023
0024   <body ng-app="mbGraph">
0025     <div ng-controller="InfoCtrl as InfoCtrl" class="container">
0026
0027       <div ng-controller="GraphCtrl as GraphCtrl">
0028         <div class="page-header">
0029           <h2>Memory usage graph</h2>
0030         </div>
0031
0032         <!-- {{ InfoCtrl.info | json }} -->
0033
0034         <div>
0035           <div ng-show="GraphCtrl.profile_error" class="alert alert-danger" role="alert"><strong>Error!</strong>
0036             Failed to load reference profile (from {{ GraphCtrl.profile_url }}). {{ GraphCtrl.profile_error }}.
0037           </div>
0038           <div ng-show="GraphCtrl.reference_error" class="alert alert-danger" role="alert"><strong>Error!</strong>
0039             Failed to load reference profile (from {{ GraphCtrl.reference_url }}). {{ GraphCtrl.reference_error }}.
0040           </div>
0041         </div>
0042
0043         <div ng-show="GraphCtrl.profile">
0044           <p>
0045             Profile loaded from <strong>{{ GraphCtrl.profile_url }}</strong>.
0046             <br />
0047             <span ng-show="GraphCtrl.reference"> Reference profile loaded from <strong>{{ GraphCtrl.reference_url }}</strong>.</span>
0048           </p>
0049           <br />
0050
0051           <form class="form-inline">
0052             <div class="form-group">
0053               <label for="pidInput" class="control-label">Select process: </label>
0054               <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">
0055               </select>
0056             </div>
0057           </form>
0058         </div>
0059
0060         <memory-graph width="800" height="400" data="GraphCtrl.graph_data" reference-data="GraphCtrl.graph_data_reference"></memory-graph>
0061
0062         <div ng-show="GraphCtrl.graph_data">
0063           <p>
0064             Process: <strong>{{ GraphCtrl.graph_data.cmdline }}</strong>.
0065             Started at <strong>{{ GraphCtrl.graph_data.start_ts*1000 | date:'yyyy-MM-dd HH:mm:ss Z' }}</strong>
0066             and contains <strong>{{ GraphCtrl.graph_data.frames.length }}</strong> frames.
0067             <br />
0068             <span ng-show="GraphCtrl.graph_data_reference">
0069               Reference process: <strong>{{ GraphCtrl.graph_data_reference.cmdline }}</strong>.
0070               Started at <strong>{{ GraphCtrl.graph_data_reference.start_ts*1000 | date:'yyyy-MM-dd HH:mm:ss Z' }}</strong>
0071               and contains <strong>{{ GraphCtrl.graph_data_reference.frames.length }}</strong> frames.
0072             </span>
0073           </p>
0074         </div>
0075
0076       </div> <!-- graphctrl -->
0077
0078     </div>
0079   </body>
0080
0081 </html>