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:
    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;
    }

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

    .long-field {
      width: 40em;
    }

    .hidden {
      display: none;
    }

    .short-field {
      width: 5em;
    }

    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>

    <paper-dialog heading="Confirmation" id="confirm_dialog">
      <div>Proceed with queueing task?</div>
      <paper-button id="task_dismiss">Cancel</paper-button>
      <paper-button id="task_confirm" autofocus>OK</paper-button>
    </paper-dialog>

    <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>
        </td>
      </tr>

      <tr>
        <td>Target Platform</td>
        <td>
          <iron-selector attr-for-selected="id" id="target_platform" selected="Linux" class="medium-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>
          <custom-webpages-sk id="custom_webpages"></custom-webpages-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>Benchmark Arguments</td>
        <td>
          <paper-input value="--output-format=csv-pivot-table" id="benchmark_args" label="Note: Errors are retried 3 times. If you specify pageset-repeat then any crash there will retry the whole set." class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>Browser Arguments</td>
        <td>
          <paper-input value="{{defaultLinuxBrowserArgs}}" id="browser_args" class="long-field"></paper-input>
        </td>
      </tr>

      <tr>
        <td>
          Chromium Git patch (optional)<br/>
          Applied to Chromium ToT
        </td>
        <td>
          <patch-sk id="chromium_patch"
                    patch-type="chromium"
                    cl-description="{{chromiumClDescription}}">
          </patch-sk>
          <paper-checkbox id="benchmark_patch" checked>
            Apply this patch when running benchmarks?
            Documentation is <a href="https://docs.google.com/document/d/1GhqosQcwsy6F-eBAmFn_ITDF7_Iv_rY9FhCKwAnk9qQ/edit#heading=h.d3d1e25u2mzy">here</a>
          </paper-checkbox>
        </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>Description</td>
        <td>
          <paper-input value="" id="desc" label="Description is required"></paper-input>
        </td>
      </tr>

      <tr>
        <td colspan="2" class="center">
          <paper-button raised id="submit_task">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: [],
       },
       platforms: {
         type: Array,
         value: [],
       },
       platformsToDesc: {
         type: Object,
         value: {},
       },
       pageSets: {
         type: Array,
         observer: 'pageSetsChanged',
       },
       defaultLinuxBrowserArgs: {
         type: String,
         value: "",
       },
       chromiumClDescription: String,
       catapultClDescription: String,
       selectedBenchmarkName: String,
     },

     observers: [
       "clDescriptionChanged(chromiumClDescription, 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.$.task_dismiss.addEventListener('click', function(e) {
         that.dismissTask();
       });
       this.$.task_confirm.addEventListener('click', function(e) {
         that.queueTask();
       });
       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.webpagesOpened;
         if (!that.$.custom_webpages.webpagesOpened) {
           // Clear out webpages if it is no longer open.
           that.$.custom_webpages.webpages = '';
         }
       });
     },

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

     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";

         // 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 {
         this.$.run_on_gce_True.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 and PDFs.
       for (var i=this.pageSets.length-1; i>=0; i--) {
         if (ctfe.pageSets.getKey(this.pageSets[i]) == "All" ||
             ctfe.pageSets.getKey(this.pageSets[i]).startsWith("PDF")) {
           this.pageSets.splice(i, 1);
         }
       }
       if (!oldValue || oldValue.length == 0) {
         this.$.page_sets.selectFirst();
       }
     },

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

     validateTask: function() {
       if (! this.selectedBenchmarkName) {
         sk.errorMessage("Please specify a benchmark");
         this.$.benchmark_name.focus();
         return;
       }
       if (!this.$.chromium_patch.validate() ||
           !this.$.catapult_patch.validate()) {
         return;
       }
       if (! this.$.desc.value) {
         sk.errorMessage("Please specify a description");
         this.$.desc.focus();
         return;
       }
       if (ctfe.moreThanOneActiveTask($$$("drawer-sk").sizeOfUserQueue)) {
         return;
       }
       this.$.confirm_dialog.open()
     },

     dismissTask: function() {
       sk.errorMessage("Did not queue");
       this.$.confirm_dialog.close()
     },

     queueTask: function() {
       var params = {};
       params["benchmark"] = this.selectedBenchmarkName;
       params["page_sets"] = this.$.page_sets.selected;
       params["custom_webpages"] = this.$.custom_webpages.webpages;
       params["benchmark_args"] = this.$.benchmark_args.value;
       params["browser_args"] = this.$.browser_args.value;
       params["desc"] = this.$.desc.value;
       params["chromium_patch"] = this.$.chromium_patch.patch;
       params["catapult_patch"] = this.$.catapult_patch.patch;
       if (this.$.benchmark_patch.checked) {
         params["benchmark_patch"] = this.$.chromium_patch.patch;
       }
       params["repeat_after_days"] = this.$.repeat_after_days.selected;
       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(sk.errorMessage);
     },

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