catapult/dashboard/dashboard/elements/trace-form.html - platform/external/chromium-trace - Git at Google

 <!DOCTYPE html>
 <!--
 Copyright 2016 The Chromium Authors. All rights reserved.
 Use of this source code is governed by a BSD-style license that can be
 found in the LICENSE file.
 -->
 <!--
 The trace-form element includes the form for all of the different stages of
 the trace process after the user clicks on the trace button.
 -->

 <link rel="import" href="/components/paper-button/paper-button.html">
 <link rel="import" href="/components/paper-dialog/paper-action-dialog.html">
 <link rel="import" href="/components/paper-spinner/paper-spinner.html">

 <link rel="import" href="/dashboard/elements/base-form.html">
 <link rel="import" href="/dashboard/static/simple_xhr.html">

 <polymer-element name="trace-form" extends="base-form"
                  attributes="xsrfToken testPath
                              earlierRevision laterRevision bugId rerunInfo">
   <template>

     <paper-action-dialog id="container" autoCloseDisabled="true">
       <!-- Styling for paper-action-dialog's children. -->
       <style>
         #loading {
           background-color: white;
           height: 100%;
           width: 100%;
           position: absolute;
           left: 0;
           top: 0;
           display: -webkit-flex;
           display: flex;
           -webkit-align-items: center;
           align-items: center;
           justify-content: center;
           -webkit-justify-content: center;
         }

         input[type=text], input[type=number] {
           border-radius: 1px;
           border: 1px solid #d9d9d9;
           border-top: 1px solid #c0c0c0;
           font-size: 13px;
           height: 25px;  /* 29 px total height including padding + border */
           width: 300px;
           padding: 1px 2px;
         }

         paper-button[affirmative] {
           background: #4285f4;
           color: #fff;
         }
       </style>

       <form on-submit="{{onSendToTrybot}}">
         <table>
           <tr>
             <td>Record a before/after trace profile.</td>
           </tr>
           <tr>
             <td>Perf try bot:</td>
             <td>
               <input type="text" list="bot-list" id="bot" value="{{bot}}">
               <datalist id="bot-list">
                 <template repeat="{{name in botList}}">
                   <option value="{{name}}"></option>
                 </template>
               </datalist>
             </td>
           </tr>
           <tr>
             <td>Trace Options:</td>
             <td>
               <select id="rerun-options">
                   <option template
                           repeat="{{rerunInfo}}"
                           value="{{option}}">{{name}}</option>
               </select>
             </td>
           </tr>
           <tr>
             <td>Earlier revision:</td>
             <td><input type="text" value="{{earlierRevision}}"></td>
           </tr>
           <tr>
             <td>Later revision:</td>
             <td><input type="text" value="{{laterRevision}}"></td>
           </tr>
         </table>
       </form>

       <p class="error">{{error}}</p>

       <paper-button affirmative raised autofocus disabled?="{{error}}"
                     on-click="{{onSendToTrybot}}">Send to perf try bot</paper-button>
       <paper-button dismissive raised>Close</paper-button>

       <template if="{{loading}}">
         <div id="loading">
           <paper-spinner active></paper-spinner>
         </div>
       </template>
     </paper-action-dialog>

   </template>
   <script>
     'use strict';
     (function() {
       /**
        * Checks whether a revision appears to be OK to use for bisect.
        * TODO(qyearsley): Extract common code in trace-form and bisect-form.
        */
       function validateRev(rev) {
         if (/^[a-fA-F0-9]{40}$/.test(rev)) {
           return true;
         }
         if (!/^\d+/.test(rev)) {
           return false;
         }
         rev = Number(rev);
         return rev > 200000 && rev < 500000;
       }

       Polymer('trace-form', {
         /**
          * Initializes and shows the trace form.
          */
         show: function() {
           this.open();
           this.loading = true;

           simple_xhr.send('/start_try_job',
               {
                 'test_path': this.testPath,
                 'step': 'prefill-info',
                 'xsrf_token': this.xsrfToken
               },
               function successCallback(info) {
                 this.bot = info['bisect_bot'];
                 this.botList = info['all_bots'];

                 // Platform.performMicrotaskCheckpoint signals Polymer to update
                 // bound elements based on their model objects.
                 Platform.performMicrotaskCheckpoint();

                 this.email = info['email'];
                 this.suite = info['suite'];
                 this.page = info['page'];
                 this.loading = false;
               }.bind(this),
               function errorCallback(msg) {
                 this.showErrorMessage('An error occurred', msg);
                 this.close();
               }.bind(this));
         },

         /**
          * Gets the currently selected rerun option from the select menu.
          */
         getRerunOptions: function() {
           var selected = this.$['rerun-options'].selectedOptions[0];
           if (selected) {
             return selected.value;
           }
           return null;
         },

         /**
          * Makes a request to /start_try_job to perform a perf try job.
          */
         onSendToTrybot: function(event) {
           event.preventDefault();
           this.loading = true;
           var params = {
             'step': 'perform-perf-try',
             'bisect_bot': this.bot,
             'suite': this.suite,
             'good_revision': this.earlierRevision,
             'bad_revision': this.laterRevision,
             'page': this.page,
             'rerun_option': this.getRerunOptions(),
             'xsrf_token': this.xsrfToken
           };
           if (this.bugId) {
             params['bug_id'] = this.bugId;
           }
           simple_xhr.send(
               '/start_try_job', params,
               function(info) {
                 var message = '<b>Job submitted!</b>' +
                     '<a href="https://codereview.chromium.org/{{issue_id}}" ' +
                     'target="_blank">View issue {{issue_id}} in Rietveld.</a>';
                 this.showMessage(message, info);
                 this.close();
               }.bind(this),
               function(msg) {
                 this.showErrorMessage('An error occurred', msg);
                 this.close();
               }.bind(this));
         },

         earlierRevisionChanged: function() {
           this.error = '';
           if (!validateRev(this.earlierRevision)) {
             this.error = 'Revisions should be git commit positions or hashes.';
             return;
           }
           this.onRevisionsChange();
         },

         laterRevisionChanged: function() {
           this.error = '';
           if (!validateRev(this.laterRevision)) {
             this.error = 'Revisions should be git commit positions or hashes.';
             return;
           }
           this.onRevisionsChange();
         },

         onRevisionsChange: function() {
           if (!/^\d+$/.test(this.earlierRevision) ||
               !/^\d+$/.test(this.laterRevision)) {
             return;
           }
           if (Number(this.earlierRevision) > Number(this.laterRevision)) {
             this.error = (
                 '"Earlier revision" should be less than "later revision".');
           }
         },

         open: function() {
           this.$.container.open();
         },

         close: function() {
           this.$.container.close();
         }
       });
     })();
   </script>
 </polymer-element>
	<!DOCTYPE html>
	<!--
	Copyright 2016 The Chromium Authors. All rights reserved.
	Use of this source code is governed by a BSD-style license that can be
	found in the LICENSE file.
	-->
	<!--
	The trace-form element includes the form for all of the different stages of
	the trace process after the user clicks on the trace button.
	-->

	<link rel="import" href="/components/paper-button/paper-button.html">
	<link rel="import" href="/components/paper-dialog/paper-action-dialog.html">
	<link rel="import" href="/components/paper-spinner/paper-spinner.html">

	<link rel="import" href="/dashboard/elements/base-form.html">
	<link rel="import" href="/dashboard/static/simple_xhr.html">

	<polymer-element name="trace-form" extends="base-form"
	attributes="xsrfToken testPath
	earlierRevision laterRevision bugId rerunInfo">
	<template>

	<paper-action-dialog id="container" autoCloseDisabled="true">
	<!-- Styling for paper-action-dialog's children. -->
	<style>
	#loading {
	background-color: white;
	height: 100%;
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	align-items: center;
	justify-content: center;
	-webkit-justify-content: center;
	}

	input[type=text], input[type=number] {
	border-radius: 1px;
	border: 1px solid #d9d9d9;
	border-top: 1px solid #c0c0c0;
	font-size: 13px;
	height: 25px; /* 29 px total height including padding + border */
	width: 300px;
	padding: 1px 2px;
	}

	paper-button[affirmative] {
	background: #4285f4;
	color: #fff;
	}
	</style>

	<form on-submit="{{onSendToTrybot}}">
	<table>
	<tr>
	<td>Record a before/after trace profile.</td>
	</tr>
	<tr>
	<td>Perf try bot:</td>
	<td>
	<input type="text" list="bot-list" id="bot" value="{{bot}}">
	<datalist id="bot-list">
	<template repeat="{{name in botList}}">
	<option value="{{name}}"></option>
	</template>
	</datalist>
	</td>
	</tr>
	<tr>
	<td>Trace Options:</td>
	<td>
	<select id="rerun-options">
	<option template
	repeat="{{rerunInfo}}"
	value="{{option}}">{{name}}</option>
	</select>
	</td>
	</tr>
	<tr>
	<td>Earlier revision:</td>
	<td><input type="text" value="{{earlierRevision}}"></td>
	</tr>
	<tr>
	<td>Later revision:</td>
	<td><input type="text" value="{{laterRevision}}"></td>
	</tr>
	</table>
	</form>

	<p class="error">{{error}}</p>

	<paper-button affirmative raised autofocus disabled?="{{error}}"
	on-click="{{onSendToTrybot}}">Send to perf try bot</paper-button>
	<paper-button dismissive raised>Close</paper-button>

	<template if="{{loading}}">
	<div id="loading">
	<paper-spinner active></paper-spinner>
	</div>
	</template>
	</paper-action-dialog>

	</template>
	<script>
	'use strict';
	(function() {
	/**
	* Checks whether a revision appears to be OK to use for bisect.
	* TODO(qyearsley): Extract common code in trace-form and bisect-form.
	*/
	function validateRev(rev) {
	if (/^[a-fA-F0-9]{40}$/.test(rev)) {
	return true;
	}
	if (!/^\d+/.test(rev)) {
	return false;
	}
	rev = Number(rev);
	return rev > 200000 && rev < 500000;
	}

	Polymer('trace-form', {
	/**
	* Initializes and shows the trace form.
	*/
	show: function() {
	this.open();
	this.loading = true;

	simple_xhr.send('/start_try_job',
	{
	'test_path': this.testPath,
	'step': 'prefill-info',
	'xsrf_token': this.xsrfToken
	},
	function successCallback(info) {
	this.bot = info['bisect_bot'];
	this.botList = info['all_bots'];

	// Platform.performMicrotaskCheckpoint signals Polymer to update
	// bound elements based on their model objects.
	Platform.performMicrotaskCheckpoint();

	this.email = info['email'];
	this.suite = info['suite'];
	this.page = info['page'];
	this.loading = false;
	}.bind(this),
	function errorCallback(msg) {
	this.showErrorMessage('An error occurred', msg);
	this.close();
	}.bind(this));
	},

	/**
	* Gets the currently selected rerun option from the select menu.
	*/
	getRerunOptions: function() {
	var selected = this.$['rerun-options'].selectedOptions[0];
	if (selected) {
	return selected.value;
	}
	return null;
	},

	/**
	* Makes a request to /start_try_job to perform a perf try job.
	*/
	onSendToTrybot: function(event) {
	event.preventDefault();
	this.loading = true;
	var params = {
	'step': 'perform-perf-try',
	'bisect_bot': this.bot,
	'suite': this.suite,
	'good_revision': this.earlierRevision,
	'bad_revision': this.laterRevision,
	'page': this.page,
	'rerun_option': this.getRerunOptions(),
	'xsrf_token': this.xsrfToken
	};
	if (this.bugId) {
	params['bug_id'] = this.bugId;
	}
	simple_xhr.send(
	'/start_try_job', params,
	function(info) {
	var message = '<b>Job submitted!</b>' +
	'<a href="https://codereview.chromium.org/{{issue_id}}" ' +
	'target="_blank">View issue {{issue_id}} in Rietveld.</a>';
	this.showMessage(message, info);
	this.close();
	}.bind(this),
	function(msg) {
	this.showErrorMessage('An error occurred', msg);
	this.close();
	}.bind(this));
	},

	earlierRevisionChanged: function() {
	this.error = '';
	if (!validateRev(this.earlierRevision)) {
	this.error = 'Revisions should be git commit positions or hashes.';
	return;
	}
	this.onRevisionsChange();
	},

	laterRevisionChanged: function() {
	this.error = '';
	if (!validateRev(this.laterRevision)) {
	this.error = 'Revisions should be git commit positions or hashes.';
	return;
	}
	this.onRevisionsChange();
	},

	onRevisionsChange: function() {
	if (!/^\d+$/.test(this.earlierRevision) \|\|
	!/^\d+$/.test(this.laterRevision)) {
	return;
	}
	if (Number(this.earlierRevision) > Number(this.laterRevision)) {
	this.error = (
	'"Earlier revision" should be less than "later revision".');
	}
	},

	open: function() {
	this.$.container.open();
	},

	close: function() {
	this.$.container.close();
	}
	});
	})();
	</script>
	</polymer-element>