ct/res/imp/chromium-perf-sk.html

<!--
  The <chromium-perf-sk> custom element declaration. Displays a form that allows the user to queue a
  task to test Chromium/Skia performance.

  Attributes:
    benchmarksToDoc: Map of benchmarks to their descriptions. Must be set.
    benchmarks: Which benchmarks to show. Must be set.
    platformsToDesc: Map of platforms to their descriptions. Must be set.
    platforms: List of all supported platforms. Must be set.
    pageSets: List of all supported page sets, as accepted by page-set-selector-sk property
      pageSets. Must be set.

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="chromium-perf-sk">
  <style>
    paper-input {
      width: 20em;
    }

    .triggering-spinner {
      margin: auto;
      vertical-align: middle;
    }

    .iron-selected {
      background-color: #D6ECF2;
    }

    .long-field {
      width: 40em;
    }

    .hidden {
      display: none;
    }

    .short-field {
      width: 5em;
    }

    .smaller-font {
      font-size: 80%;
    }

    iron-selector.long-field > div {
      width: 40em;
    }

    iron-selector.medium-field > div {
      width: 20em;
    }

    iron-selector.short-field > div {
      width: 5em;
    }

    table.options td {
      padding: 1em 2em;
    }

    td.center {
      text-align:center;
      padding-top:2em;
    }

    .panel {
      @apply(--shadow-elevation-2dp);
    }
  </style>
  <template>

    <confirm-dialog-sk id="confirm_dialog"></confirm-dialog-sk>

    <table class="options panel">
      <tr>
        <td>Benchmark Name</td>
        <td>
          <autocomplete-input-sk id="benchmark_name"
            value="{{selectedBenchmarkName}}"
            autocomplete="[[benchmarks]]"
            display-options-on-focus="true"
            accept-custom-value="true"
            label="Hit <enter> at end if entering custom benchmark"
          ></autocomplete-input-sk>
          <template is="dom-if" if="{{getBenchmarkDoc(selectedBenchmarkName)}}">
            <div><a href="{{getBenchmarkDoc(selectedBenchmarkName)}}">Documentation</a></div>
          </template>
        </td>
      </tr>

      <tr>
        <td>Target Platform</td>
        <td>
          <iron-selector attr-for-selected="id" id="target_platform" selected="Linux" class="long-field">
            <template is="dom-repeat" items="{{platforms}}">
              <div id="{{item}}">{{getPlatformDesc(item)}}</div>
            </template>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>PageSets Type</td>
        <td>
          <page-set-selector-sk id="page_sets" page-sets="{{pageSets}}"></page-set-selector-sk>
          <expanding-textarea-sk id="custom_webpages" display-text="Specify custom list of web pages" placeholder-text="Eg: webpage1,webpage2,webpage3"></expanding-textarea-sk>
        </td>
      </tr>

      <tr>
        <td>
           Run in Parallel<br/>
           Read about the trade-offs <a href="https://docs.google.com/document/d/1GhqosQcwsy6F-eBAmFn_ITDF7_Iv_rY9FhCKwAnk9qQ/edit?pli=1#heading=h.xz46aihphb8z">here</a>
        </td>
        <td>
          <iron-selector attr-for-selected="id" id="run_in_parallel" selected="False" class="long-field">
            <div id="True">True (Works only for Linux rasterize_and_record_micro runs)</div>
            <div id="False">False</div>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>Benchmark Arguments</td>
        <td>
          <paper-input value="--output-format=csv --pageset-repeat=1 --skip-typ-expectations-tags-validation --legacy-json-trace-format" id="benchmark_args" class="long-field"></paper-input>
          <span class="smaller-font"><b>Note:</b> Change the --pageset-repeat value if you would like lower/higher repeats of each web page. 1 is the default.</span><br/>
          <span class="smaller-font"><b>Note:</b> Use --run-benchmark-timeout=[secs] to specify the timeout of the run_benchmark script. 300 is the default.</span><br/>
          <span class="smaller-font"><b>Note:</b> Use --max-pages-per-bot=[num] to specify the number of pages to run per bot. 100 is the default.</span>
        </td>
      </tr>

      <tr>
        <td>Browser Arguments (nopatch run)</td>
        <td>
          <paper-input value="" id="browser_args_nopatch" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>Browser Arguments (withpatch run)</td>
        <td>
          <paper-input value="" id="browser_args_withpatch" class="long-field"></paper-input>
        </td>
      </tr>


      <tr>
        <td>Field Value Column Name</td>
        <td>
          <paper-input value="avg" id="value_column_name" class="medium-field"></paper-input>
          <span class="smaller-font">Which column's entries to use as field values.</span>
        </td>
      </tr>

      <tr>
        <td>
          Chromium Git patch (optional)<br/>
          Applied to Chromium ToT<br/>
          or to the hash specified below.
        </td>
        <td>
          <patch-sk id="chromium_patch"
                    patch-type="chromium"
                    cl-description="{{chromiumClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>
          Skia Git patch (optional)<br/>
          Applied to Skia Rev in <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/DEPS">DEPS</a>
        </td>
        <td>
          <patch-sk id="skia_patch"
                    patch-type="skia"
                    cl-description="{{skiaClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>
          V8 Git patch (optional)<br/>
          Applied to V8 Rev in <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/DEPS">DEPS</a>
        </td>
        <td>
          <patch-sk id="v8_patch"
                    patch-type="v8"
                    cl-description="{{v8ClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>
          Catapult Git patch (optional)<br/>
          Applied to Catapult Rev in <a href="https://chromium.googlesource.com/chromium/src/+/HEAD/DEPS">DEPS</a>
        </td>
        <td>
          <patch-sk id="catapult_patch"
                    patch-type="catapult"
                    cl-description="{{catapultClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>
          Chromium Git metrics patch (optional)<br/>
          Applied to Chromium ToT<br/>
          or to the hash specified below.<br/>
          Used to create the base build (See <a href="http://skbug.com/9029">skbug/9029</a>)
        </td>
        <td>
          <patch-sk id="chromium_patch_base_build"
                    patch-type="chromium"
                    cl-description="{{chromiumBaseBuildClDescription}}">
          </patch-sk>
        </td>
      </tr>

      <tr>
        <td>Chromium hash to sync to (optional)<br/></td>
        <td>
          <paper-input value="" id="chromium_hash" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>Repeat this task</td>
        <td>
          <repeat-after-days-sk id="repeat_after_days"></repeat-after-days-sk>
        </td>
      </tr>

      <tr>
        <td>Task Priority</td>
        <td>
          <iron-selector attr-for-selected="id" id="task_priority" selected="100" class="medium-field">
            <template is="dom-repeat" items="{{taskPriorities}}">
              <div id="{{item}}">{{getTaskPriorityDesc(item,taskPrioritiesToDesc)}}</div>
            </template>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>
          Notifications CC list (optional)<br/>
          Email will be sent by ct@skia.org
        </td>
        <td>
          <paper-input value="" id="cc_list" label="email1,email2,email3" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>
          Group name (optional)<br/>
          Will be used to track runs
        </td>
        <td>
          <paper-input value="" id="group_name" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>Description</td>
        <td>
          <paper-input value="" id="desc" label="Description is required" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td colspan="2" class="center">
          <div class="triggering-spinner">
            <paper-spinner active="[[ triggeringTask ]]" alt="Trigger task"></paper-spinner>
          </div>
          <paper-button raised id="submit_task" disabled="[[ triggeringTask ]]">Queue Task</paper-button>
        </td>
      </tr>
      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="view_history">View runs history</paper-button>
        </td>
      </tr>
    </table>

    <br/><br/>

  </template>
</dom-module>

<script>
   Polymer({
     is: "chromium-perf-sk",
     properties: {
       benchmarks: {
         type: Array,
         value: [],
       },
       benchmarksToDoc: {
         type: Object,
         value: {},
       },
       platforms: {
         type: Array,
         value: [],
       },
       platformsToDesc: {
         type: Object,
         value: {},
       },
       taskPriorities: {
         type: Array,
         value: [],
       },
       taskPrioritiesToDesc: {
         type: Object,
         value: {},
       },
       pageSets: {
         type: Array,
         observer: 'pageSetsChanged',
       },
       triggeringTask: {
         type: Boolean,
         value: false,
       },
       chromiumClDescription: String,
       skiaClDescription: String,
       v8ClDescription: String,
       catapultClDescription: String,
       chromiumBaseBuildClDescription: String,
       selectedBenchmarkName: String,
     },

     observers: [
       "clDescriptionChanged(chromiumClDescription, skiaClDescription, v8ClDescription, catapultClDescription, chromiumBaseBuildClDescription)"
     ],

     ready: function() {
       var that = this;
       this.$.target_platform.addEventListener('click', function(e) {
         that.platformChanged();
         that.setRunInParallel();
       });
       this.$.submit_task.addEventListener('click', function(e) {
         that.validateTask();
       });
       this.$.view_history.addEventListener('click', function(e) {
         that.gotoRunsHistory();
       });
       this.$.custom_webpages.addEventListener('click', function(e) {
         // Do not display the pagesets selector if custom webpages is open.
         that.$.page_sets.hidden = that.$.custom_webpages.opened;
         if (!that.$.custom_webpages.opened) {
           // Clear out webpages if it is no longer open.
           that.$.custom_webpages.value = '';
         }
       });
       this.platformChanged();
       this.setRunInParallel();
     },

     getBenchmarkDoc: function(benchmarkName) {
       if (! benchmarkName || ! this.benchmarksToDoc[benchmarkName]) {
         return "";
       }
       return this.benchmarksToDoc[benchmarkName];
     },

     getPlatformDesc: function(platform) {
       if (this.platformsToDesc) {
         return this.platformsToDesc[platform];
       }
     },

     getTaskPriorityDesc: function(taskPriority, taskPrioritiesToDesc) {
       if (taskPrioritiesToDesc) {
         return taskPrioritiesToDesc[taskPriority];
       }
     },

     pageSetsChanged: function() {
       // CT's chromium perf does not support 1M, 100K.
       for (var i=this.pageSets.length-1; i>=0; i--) {
         if (ctfe.pageSets.getKey(this.pageSets[i]) == "All" ||
             ctfe.pageSets.getKey(this.pageSets[i]).endsWith("100k")) {
           this.pageSets.splice(i, 1);
         }
       }
     },

     setRunInParallel: function() {
       if (this.selectedBenchmarkName == "rasterize_and_record_micro" &&
           this.$.target_platform.selected == "Linux") {
         // Decided to leave this False to give the more consistent results
         // by default to users. Should be revisited when parallel runs give
         // better results.
         this.$.run_in_parallel.selected = "False"
       } else {
         this.$.run_in_parallel.selected = "False"
       }
     },

     platformChanged: function() {
       if (this.$.target_platform.selected == "Linux" || this.$.target_platform.selected == "Windows") {
         this.$.page_sets.selected = "10k";
       } else {
         this.$.page_sets.selected = "Mobile10k";
       }
     },

     clDescriptionChanged: function(chromiumClDesc, skiaClDesc, v8ClDesc, catapultClDesc, chromiumBaseBuildClDesc) {
       this.$.desc.value = ctfe.getDescriptionOfCls(chromiumClDesc, skiaClDesc, v8ClDesc, catapultClDesc, chromiumBaseBuildClDesc)
     },

     validateTask: function() {
       if (!this.$.chromium_patch.validate() ||
           !this.$.skia_patch.validate() ||
           !this.$.v8_patch.validate() ||
           !this.$.catapult_patch.validate() ||
           !this.$.chromium_patch_base_build.validate()) {
         return;
       }
       if (! this.$.desc.value) {
         sk.errorMessage("Please specify a description");
         this.$.desc.focus();
         return;
       }
       if (! this.selectedBenchmarkName) {
         sk.errorMessage("Please specify a benchmark");
         this.$.benchmark_name.focus();
         return;
       }
       if (ctfe.missingLiveSitesWithCustomWebpages(
               this.$.custom_webpages.value, this.$.benchmark_args.value)) {
         return;
       }
       if (ctfe.moreThanThreeActiveTasks($$$("drawer-sk").sizeOfUserQueue)) {
         return;
       }
       this.$.confirm_dialog.open("Proceed with queueing task?")
         .then(this.queueTask.bind(this))
         .catch(function() {
           sk.errorMessage("Did not queue");
         })
     },

     getRepeatValue: function() {
       // If "--pageset-repeat" is specified in benchmark args then use that
       // value else use "1".
       var rx = /--pageset-repeat[ =](\d+)/gm
       var m = rx.exec(this.$.benchmark_args.value);
       if (m) {
         return m[1];
       } else {
         return "1";
       }
     },

     queueTask: function() {
       this.triggeringTask = true;
       var params = {};
       params["benchmark"] = this.selectedBenchmarkName;
       params["platform"] = this.$.target_platform.selected;
       params["page_sets"] = this.$.page_sets.selected;
       params["custom_webpages"] = this.$.custom_webpages.value;
       params["repeat_runs"] = this.getRepeatValue();
       params["run_in_parallel"] = this.$.run_in_parallel.selected;
       params["benchmark_args"] = this.$.benchmark_args.value;
       params["browser_args_nopatch"] = this.$.browser_args_nopatch.value;
       params["browser_args_withpatch"] = this.$.browser_args_withpatch.value;
       params["value_column_name"] = this.$.value_column_name.value;
       params["desc"] = this.$.desc.value;
       params["chromium_patch"] = this.$.chromium_patch.patch;
       params["skia_patch"] = this.$.skia_patch.patch;
       params["v8_patch"] = this.$.v8_patch.patch;
       params["catapult_patch"] = this.$.catapult_patch.patch;
       params["chromium_patch_base_build"] = this.$.chromium_patch_base_build.patch;
       params["chromium_hash"] = this.$.chromium_hash.value;
       params["repeat_after_days"] = this.$.repeat_after_days.selected;
       params["task_priority"] = this.$.task_priority.selected;
       // Run on GCE if it is Windows. This will change in the future if we
       // get bare-metal Win machines.
       params["run_on_gce"] = (this.$.target_platform.selected === "Windows").toString();
       if (this.$.cc_list.value) {
         params["cc_list"] = this.$.cc_list.value.split(",")
       }
       if (this.$.group_name.value) {
         params["group_name"] = this.$.group_name.value
       }

       var that = this;
       sk.post("/_/add_chromium_perf_task", JSON.stringify(params)).then(function(resp) {
         that.gotoRunsHistory();
       }).catch(function(e) {
         that.triggeringTask = false;
         sk.errorMessage(e);
       });
     },

     gotoRunsHistory: function() {
       window.location.href = "/chromium_perf_runs/";
     },
   });
</script>