task_scheduler/res/imp/job-trigger-sk.html

<!--
  This in an HTML Import-able file that contains the definition
  of the following elements:

    <job-trigger-sk>

  A ui for selecting job_specs and commits for triggering jobs.

  To use this file import it:

    <link href="/res/imp/job-trigger-sk.html" rel="import" />

  Usage:

    <job-trigger-sk></job-trigger-sk>

  Properties:
    // input
    job_specs: Array<String> the names of the available job_specs.
    commits: Array<String> commit hashes.

  Methods:
    None.

  Events:
    None.
-->

<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">
<link rel="import" href="/res/imp/bower_components/paper-input/paper-input.html">
<link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="/res/common/imp/autocomplete-input-sk.html">
<link rel="import" href="/res/common/imp/input-list-sk.html">

<dom-module id="job-trigger-sk">
  <template>
    <style>
    .container {
      margin: 5px;
      padding: 10px;
      border: 1px solid #eeeeee;
      font-size: 12px;
    }
    h2 {
      font-size: 16px;
    }
    </style>
    <div hidden$="{{_loading}}">
      <template is="dom-repeat" items="[[_jobs]]">
        <div class="container">
          <h2>Job</h2>
          <autocomplete-input-sk
              autocomplete="[[job_specs]]"
              id="job_specs_input"
              value="{{item.name}}"
              on-change="_jobs_changed"></autocomplete-input-sk>
          <h2>Commit</h2>
          <autocomplete-input-sk
              autocomplete="[[commits]]"
              id="commit_input"
              value="{{item.commit}}"
              on-change="_jobs_changed"></autocomplete-input-sk>
        </div>
      </template>
      <paper-icon-button icon="add" on-click="_add_job" raised></paper-icon-button>
      <paper-button on-click="_trigger_jobs" raised>Trigger Jobs</paper-button>
      <div id="triggered_container" hidden$="{{_hide_triggered_container(_triggered.*)}}" class="container">
        <h2>Triggered Jobs</h2>
        <template is="dom-repeat" items="[[_triggered]]">
          <div class="triggered_job">
            <a href="/job/{{item}}">{{item}}</a>
          </div>
        </template>
      </div>
    </div>
    <paper-spinner active$="{{_loading}}"></paper-spinner>
  </template>
  <script>
  (function(){
    Polymer({
      is: "job-trigger-sk",

      properties: {
        job_specs: {
          type: Array,
        },
        commits: {
          type: Array,
        },
        _immediate: {
          type: Boolean,
          value: false,
        },
        _loading: {
          type: Boolean,
          value: false,
        },
        _jobs: {
          type: Array,
        },
        _triggered: {
          type: Array,
          value: function() {
            return [];
          },
        },
      },

      observers: [
        "_jobs_changed(_jobs.*)",
      ],

      ready: function() {
        // Parse jobs.
        var params = sk.query.toParamSet(window.location.search.substring(1));
        var jobs = [];
        if (params["job"] && params["job"].length > 0) {
          for (var i = 0; i < params["job"].length; i++) {
            var split = params["job"][i].split("@");
            if (split.length != 2) {
              sk.errorMessage("Invalid job parameter: " + params["job"][i]);
              continue
            }
            jobs.push({"name": split[0], "commit": split[1]});
          }
        }
        if (jobs.length == 0) {
          jobs.push({"name": "", "commit": ""});
        }
        this.set("_jobs", jobs);

        // If "submit=true" is in the URL params, immediately attempt to trigger
        // the jobs, and, on success, close the window.
        if (params["submit"] && params["submit"].length > 0 && params["submit"][0] == "true") {
          this._immediate = true;
          this._trigger_jobs();
        }
      },

      _jobs_changed: function() {
        var params = sk.query.toParamSet(window.location.search.substring(1));
        delete params["job"];
        params["job"] = [];
        for (var i = 0; i < this._jobs.length; i++) {
          params["job"].push(this._jobs[i].name + "@" + this._jobs[i].commit);
        }
        var newUrl = window.location.href.split("?")[0] + "?" + sk.query.fromParamSet(params);
        window.history.replaceState("", "", newUrl);
      },

      _hide_triggered_container: function() {
        return !(this._triggered && this._triggered.length > 0);
      },

      _add_job: function() {
        this.push("_jobs", {"name": "", "commit": ""});
      },

      _trigger_jobs: function() {
        var data = [];
        for (var i = 0; i < this._jobs.length; i++) {
          var job = this._jobs[i];
          if (!job.name) {
            sk.errorMessage("Job name is required.");
            return;
          }
          if (!job.commit) {
            sk.errorMessage("Commit is required.");
            return;
          }
          data.push(job);
        };
        var str = JSON.stringify(data);
        this._loading = true;
        sk.post("/json/trigger", str).then(function(resp) {
          this.set("_jobs", [{}]);
          this.set("_triggered", JSON.parse(resp));
          this._loading = false;
          if (this._immediate) {
            window.close();
          }
        }.bind(this), function(err) {
          this._loading = false;
          sk.errorMessage(err);
        }.bind(this));
      },
    });
  })();
  </script>
</dom-module>