CINXE.COM
Evolution Dashboard
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Evolution Dashboard</title> <!-- Bootstrap and supporting libraries --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" href="style/bootstrap-multiselect.css" type="text/css"/> <link rel="stylesheet" type="text/css" href="style/metricsgraphics.css" /> <link rel="stylesheet" type="text/css" href="style/dashboards.css" /> </head> <body> <div class="container-fluid"> <header> <form class="navbar-form inline pull-right btn-group"> <a href="https://glam.telemetry.mozilla.org/" class="btn btn-success" title="GLAM: Glean Aggregate Metrics Dashboard" target="_blank"><i class="fa fa-lock"></i> Use GLAM</a> <a href="/" class="btn btn-default btn-primary" title="Landing page for Telemetry dashboards"><i class="fa fa-home"></i> Telemetry Portal</a> <a href="./tutorial.html#EvolutionDashboard" class="btn btn-default" id="tutorial" title="Usage tutorial for Telemetry dashboards"><i class="fa fa-question-circle"></i> Usage Tutorial</a> </form> <h1>Evolution Dashboard</h1> </header> <ul class="nav nav-tabs"> <li><a href="./dist.html"><i class="fa fa-bar-chart"></i><strong> Distribution</strong></a></li> <li class="active"><a href="#"><i class="fa fa-line-chart"></i><strong> Evolution</strong></a></li> </ul> <div class="row"> <div class="col-md-12"> <h2 style="font-size: 18px; margin-bottom: 0"> <span style="font-weight: bold"> <select id="aggregates" class="multiselect" title="Aggregate type" data-all-selected="All aggregates of" multiple> <option value="median">Median</option> <option value="mean">Mean</option> <option value="5th-percentile">5th percentile</option> <option value="25th-percentile">25th percentile</option> <option value="75th-percentile">75th percentile</option> <option value="95th-percentile">95th percentile</option> </select> <select id="measure" class="multiselect" title="Value being measured" style="width: 15em"></select> from <select id="min-channel-version" class="multiselect" title="Minimum build version" style="width: 120px"></select> to <select id="max-channel-version" class="multiselect" title="Maximum build version" style="width: 120px"></select> </span> for <select id="filter-product" class="multiselect" title="Product name" data-all-selected="all products" data-n-selected="products" multiple></select> on <select id="filter-os" class="multiselect" title="Target OS" data-all-selected="any OS" data-n-selected="OSs" multiple></select> <select id="filter-arch" class="multiselect" title="Product architecture" data-all-selected="any architecture" data-n-selected="architectures" multiple></select> as <select id="filter-process-type" class="multiselect" title="Process type" data-all-selected="any process type"></select> </h2> <hr></hr> <div class="caption-div"> <figcaption id="evo-caption-text" class="overflow"></figcaption> <figcaption id="evo-caption-link"></figcaption> </div> <div class=use-counter-div> <figcaption id="use-counter-link"></figcaption> </div> <h2 style="font-size: 18px; margin-bottom: 0">Showing graphs for key <select id="selected-key" class="multiselect" title="Selected key"></select></h2> <figure class="col-md-12"> <div class="col-md-12" id="evolutions"></div> </figure> <h2 id="submissions-title" style="font-size: 18px; margin-bottom: 0"></h2> <figure class="col-md-12"> <div class="col-md-12" id="submissions"></div> </figure> <h2 id="sample-counts-title" style="font-size: 18px; margin-bottom: 0"></h2> <figure class="col-md-12"> <div class="col-md-12" id="sample-counts"></div> </figure> </div> </div> <div class="row"> <div class="col-md-12"> <div class="panel panel-default"> <div class="panel-heading" role="tab"> <a class="panel-title" data-toggle="collapse" id="advanced-settings-toggle" href="#advanced-settings"><i class="fa fa-cog"></i> Advanced Settings<span></span></a> </div> <div id="advanced-settings" class="panel-collapse collapse"> <div class="panel-body"> <form class="form-horizontal"> <div> <label><input name="build-time-toggle" type="checkbox"> <b>Submission date range</b> </label> Filter submissions as submission date range rather than build date range. </div> <div> <label><input name="sanitize-toggle" type="checkbox"> <b>Sanitize data</b> </label> Hide data points that don't have enough submissions. </div> <div> <label><input name="include-spill-toggle" type="checkbox"> <b>Include Spill</b> </label> Include 'spill' bucket (for categorical histograms) </div> </form> </div> </div> </div> </div> </div> </div> <div class="busy-indicator"> <div class="busy-indicator-progress"></div> <i class="fa fa-cog fa-spin"></i> <span class="busy-indicator-message">Loading page...</span> </div> <div><a href="https://www.mozilla.org/en-US/privacy/websites/">Mozilla's Website Privacy Notice</a></div> <!-- Bootstrap and supporting libraries --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <script type="text/javascript" src="lib/bootstrap-multiselect.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.2/moment.min.js"></script> <!-- MetricsGraphics libraries --> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script> <script src="lib/metricsgraphics.min.js"></script> <script src="../v2/telemetry.js"></script> <script src="src/dashboards.js"></script> <script src="src/evo.js"></script> </body> </html>