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

<!--
  The <chromium-analysis-sk> custom element declaration. Displays a form that allows the user to
  queue a task to analyse Chromium.

  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-analysis-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, platformsToDesc)}}</div>
            </template>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>Run on GCE</td>
        <td>
          <iron-selector attr-for-selected="id" id="run_on_gce" selected="run_on_gce_True" class="long-field">
            <div id="run_on_gce_True">True</div>
            <div id="run_on_gce_False">False</div>
          </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="run_in_parallel_True" class="long-field">
            <div id="run_in_parallel_True">True</div>
            <div id="run_in_parallel_False">False</div>
          </iron-selector>
        </td>
      </tr>

      <tr>
        <td>Look for text in stdout</td>
        <td>
          <paper-input value="" id="match_stdout_txt" class="long-field"></paper-input>
          <span class="smaller-font"><b>Note:</b> All lines that contain this field in stdout will show up under CT_stdout_lines in the output CSV.</span><br/>
          <span class="smaller-font"><b>Note:</b> The count of non-overlapping exact matches of this field in stdout will show up under CT_stdout_count in the output CSV.</span>
        </td>
      </tr>

      <tr>
        <td>Benchmark Arguments</td>
        <td>
          <paper-input value="--output-format=csv --skip-typ-expectations-tags-validation --legacy-json-trace-format" id="benchmark_args" class="long-field"></paper-input>
          <span class="smaller-font"><b>Note:</b> Use --num-analysis-retries=[num] to specify how many times run_benchmark should be retried. 2 is the default. 0 calls run_benchmark once.</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</td>
        <td>
          <paper-input value="" id="browser_args" 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>Chromium hash to sync to (optional)<br/></td>
        <td>
          <paper-input value="" id="chromium_hash" class="long-field"></paper-input>
        </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>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-analysis-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,
       selectedBenchmarkName: String,
     },

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

     ready: function() {
       var that = this;
       this.$.target_platform.addEventListener('click', function(e) {
         that.platformChanged();
       });
       this.$.run_in_parallel.addEventListener('click', function(e) {
         that.runInParallelChanged();
       });
       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 = '';
         }
       });
     },

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

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

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

     platformChanged: function() {
       if (this.$.target_platform.selected == "Android") {
         // Cannot run on GCE instances if Android is selected.
         this.$.run_on_gce.selected = "run_on_gce_False";
         this.$.run_on_gce_True.hidden = "True";
         this.$.run_on_gce_False.hidden = "";

         // Cannot run in parallel if Android is selected.
         this.$.run_in_parallel.selected = "run_in_parallel_False";
         this.$.run_in_parallel_True.hidden = "True";
       } else if (this.$.target_platform.selected == "Windows") {
         // Cannot run on bare-metal machines if Windows is selected. One day
         // this will change.
         this.$.run_on_gce_True.hidden = "";
         this.$.run_on_gce_False.hidden = "True";
         this.$.run_on_gce.selected = "run_on_gce_True";
       } else {
         this.$.run_on_gce_True.hidden = "";
         this.$.run_on_gce_False.hidden = "";
         this.$.run_on_gce.selected = "run_on_gce_True";

         this.$.run_in_parallel_True.hidden = "";
         this.$.run_in_parallel.selected = "run_in_parallel_True";
       }
       this.runInParallelChanged();
     },

     runInParallelChanged: function() {
       if (this.$.run_in_parallel.selected == "run_in_parallel_True") {
         document.getElementById('100k').hidden = "";
         document.getElementById('Mobile100k').hidden = "";
       } else {
         // Should not run on 100k page sets without parallel because it would
         // take too long.
         document.getElementById('100k').hidden = "True";
         document.getElementById('Mobile100k').hidden = "True";
         this.$.page_sets.selected = "10k";
       }
     },

     pageSetsChanged: function(newValue, oldValue) {
       // CT's chromium analysis does not support 1M.
       for (var i=this.pageSets.length-1; i>=0; i--) {
         if (ctfe.pageSets.getKey(this.pageSets[i]) == "All") {
           this.pageSets.splice(i, 1);
         }
       }
       if (!oldValue || oldValue.length == 0) {
         this.$.page_sets.selectFirst();
       }
     },

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

     validateTask: function() {
       if (! this.selectedBenchmarkName) {
         sk.errorMessage("Please specify a benchmark");
         this.$.benchmark_name.focus();
         return;
       }
       if (!this.$.chromium_patch.validate() ||
           !this.$.skia_patch.validate() ||
           !this.$.v8_patch.validate() ||
           !this.$.catapult_patch.validate()) {
         return;
       }
       if (! this.$.desc.value) {
         sk.errorMessage("Please specify a description");
         this.$.desc.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");
         })
     },

     queueTask: function() {
       this.triggeringTask = true;
       var params = {};
       params["benchmark"] = this.selectedBenchmarkName;
       params["page_sets"] = this.$.page_sets.selected;
       params["custom_webpages"] = this.$.custom_webpages.value;
       params["match_stdout_txt"] = this.$.match_stdout_txt.value;
       params["benchmark_args"] = this.$.benchmark_args.value;
       params["browser_args"] = this.$.browser_args.value;
       params["value_column_name"] = this.$.value_column_name.value;
       params["desc"] = this.$.desc.value;
       params["chromium_patch"] = this.$.chromium_patch.patch;
       params["chromium_hash"] = this.$.chromium_hash.value;
       params["skia_patch"] = this.$.skia_patch.patch;
       params["v8_patch"] = this.$.v8_patch.patch;
       params["catapult_patch"] = this.$.catapult_patch.patch;
       params["repeat_after_days"] = this.$.repeat_after_days.selected;
       params["task_priority"] = this.$.task_priority.selected;
       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
       }
       params["run_in_parallel"] = this.$.run_in_parallel.selected == "run_in_parallel_True";
       params["platform"] = this.$.target_platform.selected;
       params["run_on_gce"] = this.$.run_on_gce.selected == "run_on_gce_True";

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

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