| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>Skia Performance Monitoring | Clusters</title> |
| |
| {{template "header.html" .}} |
| |
| <link href="/res/imp/cluster.html" rel="import" /> |
| <link href="/res/imp/sort.html" rel="import" /> |
| <link href="/res/imp/commit-selector.html" rel="import" /> |
| |
| <style type="text/css" media="screen"> |
| #clSorting { |
| padding: 1em 0; |
| } |
| #start { |
| margin: 0.3em; |
| } |
| .issue { |
| margin: 1em 0; |
| } |
| sort-sk { |
| display: block; |
| } |
| .floatingLabel { |
| display: block; |
| margin-top: 1em; |
| margin-bottom: 0.5em; |
| font-size: 0.75em; |
| color: #757575; |
| } |
| </style> |
| </head> |
| <body> |
| <scaffold-sk responsiveWidth="700px"> |
| {{template "titlebar.html" .}} |
| <div id="container"> |
| <section id=clustering> |
| <h2>Trace Clustering</h2> |
| <p> |
| <paper-input value="0.001" id="_stddev" label="Standard Deviation Threshhold" floatingLabel></paper-input> |
| </p> |
| <p> |
| <paper-input value="50" id="_k" label="Number Of Clusters" floatingLabel></paper-input> |
| </p> |
| <p> |
| <span class="floatingLabel">Commit to cluster around (currently non-functional)</span> |
| <commit-selector-sk></commit-selector-sk> |
| </p> |
| <p class=issue> |
| <label for="_issue">Issue:</label> |
| <select name="_issue" id="_issue" size="1"> |
| <option selected> </option> |
| </select> |
| </p> |
| <query-sk></query-sk> |
| <br/> |
| <paper-button raised id="start">Calculate</paper-button> |
| |
| |
| <sort-sk target=clResults> |
| <paper-button data-key="clustersize">Cluster Size </paper-button> |
| <paper-button data-key="stepregression" data-default=up>Regression </paper-button> |
| <paper-button data-key="stepsize">Step Size </paper-button> |
| <paper-button data-key="steplse">Least Squares</paper-button> |
| <paper-button data-key="timestamp">Step Time</paper-button> |
| </sort-sk> |
| <div id="clResults"> |
| </div> |
| </section> |
| </div> |
| </scaffold-sk> |
| <script type="text/javascript" charset="utf-8"> |
| (function() { |
| |
| /** |
| * beginClustering by clearing out the old results and starting the XHR |
| * request to get new clustering results. |
| */ |
| function beginClustering(k, stddev, issue, selections) { |
| sk.clearChildren($$$('#clResults')); |
| |
| document.body.style.cursor = 'wait'; |
| var url = '/clustering/?_k=' + k + '&_stddev=' + stddev + '&_issue=' + issue + '&' + selections; |
| sk.get(url).then(JSON.parse).then(function(json) { |
| var container = $$$('#clResults'); |
| json.Clusters.forEach(function(c){ |
| var sum = document.createElement('cluster-summary-sk'); |
| container.appendChild(sum); |
| sum.summary = c; |
| }); |
| document.body.style.cursor = 'auto'; |
| }).catch(function(e){ |
| alert(e); |
| document.body.style.cursor = 'auto'; |
| }); |
| }; |
| |
| function onLoad() { |
| sk.get('/trybots/').then(JSON.parse).then(function(json){ |
| var select = $$$('#_issue'); |
| json.forEach(function(issue) { |
| var op = document.createElement('OPTION'); |
| op.value = issue; |
| op.innerText = issue; |
| select.appendChild(op); |
| }); |
| }); |
| |
| $$$('#start').addEventListener('click', function(){ |
| beginClustering( |
| $$$('#_k').value, $$$('#_stddev').value, $$$('#_issue').value, $$$('query-sk').currentQuery); |
| }); |
| |
| $$('input[name="sort"]').forEach(function(ele) { |
| ele.addEventListener('click', sort); |
| }); |
| |
| sk.get('/tiles/0/-1/').then(JSON.parse).then(function(json){ |
| $$$('query-sk').setParamSet(json.paramset); |
| }); |
| |
| }; |
| |
| sk.DomReady.then(onLoad); |
| |
| })(); |
| </script> |
| </body> |
| </html> |
