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

<!--
  The <chromium-builds-sk> custom element declaration. Displays a form that allows the user to queue
  a task to build a specific revision of Chromium with a specific revision of Skia. The user can
  specify LKGR to obtain the last known good release. Displays information about the entered
  revision.

  Attributes:
    chromiumRev: The Chromium revision that is initially entered, default "LKGR".
    skiaRev: The Skia revision that is initially entered, default "LKGR".

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="chromium-builds-sk">
  <style>
    .hash-field {
      width: 42ch;
    }

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

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

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

    .panel {
      @apply(--shadow-elevation-2dp);
    }

    .rev-detail-container {
      position: relative;
      text-align: center;
      width: 300px;
      height: 100px;
    }

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

    .rev-detail {
      position: absolute;
      top: 0px;
      left: 0px;
      text-align: start;
    }
  </style>
  <template>

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

    <table class="options panel">
      <tr>
        <td>Chromium Commit Hash</td>
        <td>
          <paper-input value="{{chromiumRev}}" class="hash-field"></paper-input>
        </td>
        <td>
          <div class="rev-detail-container">
            <div class="loading-rev-spinner">
              <paper-spinner active="{{loadingChromiumRevDetail}}"
                             alt="Loading Chromium commit details"></paper-spinner>
            </div>
            <div class="rev-detail">{{chromiumRevDetail}}</div>
          </div>
        </td>
      </tr>

      <tr>
        <td>Skia Commit Hash</td>
        <td>
          <paper-input value="{{skiaRev}}" class="hash-field"></paper-input>
        </td>
        <td>
          <div class="rev-detail-container">
            <div class="loading-rev-spinner">
              <paper-spinner active="{{loadingSkiaRevDetail}}"
                             alt="Loading Skia commit details"></paper-spinner>
            </div>
            <div class="rev-detail">{{skiaRevDetail}}</div>
          </div>
        </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 colspan="3" 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="3" class="center">
          <paper-button raised id="view_history">View runs history</paper-button>
        </td>
      </tr>
    </table>
  </template>
</dom-module>

<script>
  Polymer({
    is: "chromium-builds-sk",
    properties: {
      chromiumRev: {
        type: String,
        value: "LKGR",
        observer: "chromiumRevChanged",
      },
      chromiumRevData: Object,
      loadingChromiumRevDetail: {
        type: Boolean,
        value: false,
      },
      chromiumRevDetail: {
        type: String,
        computed: "formatRevData(chromiumRevData)",
      },
      skiaRev: {
        type: String,
        value: "LKGR",
        observer: "skiaRevChanged",
      },
      skiaRevData: Object,
      loadingSkiaRevDetail: {
        type: Boolean,
        value: false,
      },
      skiaRevDetail: {
        type: String,
        computed: "formatRevData(skiaRevData)",
      },
      triggeringTask: {
        type: Boolean,
        value: false,
      },
    },

    ready: function() {
      var that = this;
      this.$.submit_task.addEventListener('click', function(e) {
        that.validateTask();
      });
      this.$.view_history.addEventListener('click', function(e) {
        that.gotoRunsHistory();
      });
    },

    chromiumRevChanged: function(newValue) {
      if (!newValue) {
        this.chromiumRevData = null;
        this.loadingChromiumRevDetail = false;
        return;
      }
      this.loadingChromiumRevDetail = true;
      var params = {rev: newValue};
      var that = this;
      sk.post("/_/chromium_rev_data?" + sk.query.fromObject(params)).then(JSON.parse).then(function (json) {
        if (that.chromiumRev == newValue) {
          if (json.commit) {
            that.chromiumRevData = json;
          } else {
            that.chromiumRevData = null;
          }
          that.loadingChromiumRevDetail = false;
        }
      }).catch(function (err) {
        if (that.chromiumRev == newValue) {
          that.chromiumRevData = {error: err};
          that.loadingChromiumRevDetail = false;
        }
      });
    },

    skiaRevChanged: function(newValue) {
      if (!newValue) {
        this.skiaRevData = null;
        this.loadingSkiaRevDetail = false;
        return;
      }
      this.loadingSkiaRevDetail = true;
      var params = {rev: newValue};

      var that = this;
      sk.post("/_/skia_rev_data?" + sk.query.fromObject(params)).then(JSON.parse).then(function (json) {
        if (that.skiaRev == newValue) {
          if (json.commit) {
            that.skiaRevData = json;
          } else {
            that.skiaRevData = null;
          }
          that.loadingSkiaRevDetail = false;
        }
      }).catch(function (err) {
        if (that.skiaRev == newValue) {
          that.skiaRevData = {error: err};
          that.loadingSkiaRevDetail = false;
        }
      });
    },

    formatRevData: function(revData) {
      if (revData) {
        if (!revData.error) {
          return revData.commit + " by " + revData.author.name + " submitted " +
              revData.committer.time;
        } else {
          return revData.error;
        }
      } else {
        return "";
      }
    },

    validateTask: function() {
      if (!this.chromiumRevData || !this.chromiumRevData.commit) {
        sk.errorMessage("Please enter a valid Chromium commit hash.");
        this.$.chromium_rev.focus();
        return;
      }
      if (!this.skiaRevData || !this.skiaRevData.commit) {
        sk.errorMessage("Please enter a valid Skia commit hash.");
        this.$.skia_rev.focus();
        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["chromium_rev"] = this.chromiumRevData.commit;
      params["chromium_rev_ts"] = this.chromiumRevData.committer.time;
      params["skia_rev"] = this.skiaRevData.commit;
      params["repeat_after_days"] = this.$.repeat_after_days.selected;

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

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