task_scheduler/res/imp/job-sk.html

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

    <job-sk>

  Status information about the task scheduler.

  To use this file import it:

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

  Usage:

    <job-sk></job-sk>

  Properties:
    None.

  Methods:
    setJob: Provide job data.

  Events:
    None.
-->

<link rel="import" href="task-graph-sk.html">
<link rel="import" href="/res/common/imp/human-date-sk.html">
<link rel="import" href="/res/common/imp/styles-sk.html">
<link rel="import" href="/res/common/imp/timer-sk.html">
<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html">

<dom-module id="job-sk">
  <template>
    <style include="iron-flex iron-flex-alignment styles-sk">
    <style>
    :host {
      font-family: sans-serif;
    }
    #cancelButton {
      background-color: #D95F02;
      color: #fff;
      font-family: 'Roboto', 'Noto', sans-serif;
      font-size: 1.0em;
    }
    </style>
    <timer-sk id="timer" period="[[_reload]]" on-trigger="_loadJob">
    <div class="container">
      <div class="layout horizontal">
        <div class="flex">
          <h2>Job Information</h2>
        </div>
        <template is="dom-if" if="[[!_job.status]]">
          <div>
            <paper-button raised id="cancelButton" on-tap="_cancelJob">Cancel</paper-button>
          </div>
        </template>
      </div>
      <div class="table">
        <div class="tr"><div class="td">ID</div><div class="td">[[_job.id]]</div></div>
        <div class="tr"><div class="td">Name</div><div class="td">[[_job.name]]</div></div>
        <div class="tr">
          <div class="td">Status</div>
          <div class="td" style$="background-color:[[_statusColor]]">[[_statusText]]</div>
        </div>
        <div class="tr"><div class="td">Created</div><div class="td"><human-date-sk date="[[_job.created]]"></human-date-sk></div></div>
        <template is="dom-if" if="[[_job.status]]">
          <div class="tr"><div class="td">Finished</div><div class="td"><human-date-sk date="[[_job.finished]]"></human-date-sk></div></div>
        </template>
        <div class="tr"><div class="td">Duration</div><div class="td">[[_duration]]</div></div>
        <div class="tr">
          <div class="td">Repo</div>
          <div class="td"><a href$="[[_job.repo]]" target="_blank">[[_job.repo]]</a></div>
        </div>
        <div class="tr">
          <div class="td">Revision</div>
          <div class="td"><a href$="[[_revisionLink]]" target="_blank">[[_job.revision]]</a></div>
        </div>
        <template is="dom-if" if="[[_isTryJob]]">
          <div class="tr">
            <div class="td">Codereview Link</div>
            <div class="td"><a href$="[[_codereviewLink]]" target="_blank">[[_codereviewLink]]</a></div>
          </div>
          <div class="tr"><div class="td">Codereview Server</div><div class="td">[[_job.server]]</div></div>
          <div class="tr"><div class="td">Issue</div><div class="td">[[_job.issue]]</div></div>
          <div class="tr"><div class="td">Patchset</div><div class="td">[[_job.patchset]]</div></div>
        </template>
        <div class="tr"><div class="td">Manually forced</div><div class="td">[[_job.isForce]]</div></div>
      </div>
    </div>

    <div class="container">
      <h2>Tasks</h2>
      <task-graph-sk jobs="[[_jobList]]" swarming-server="[[swarmingServer]]"></task-graph-sk>
    </div>
  </template>
  <script src="/res/imp/bower_components/d3/d3.min.js"></script>
  <script>
  (function(){
    var jobStatusToTextColor = {
      "":         ["in progress", "rgb(248, 230, 180)"],
      "SUCCESS":  ["succeeded",   "rgb(209, 228, 188)"],
      "FAILURE":  ["failed",      "rgb(217, 95, 2)"],
      "MISHAP":   ["mishap",      "rgb(117, 112, 179)"],
      "CANCELED": ["canceled",    "rgb(117, 112, 179)"],
    };

    Polymer({
      is: "job-sk",

      properties: {
        jobId: {
          type: String,
          observer: "_loadJob",
        },

        swarmingServer: {
          type: String,
        },

        _job: {
          type: Object,
        },

        _jobList: {
          type: Array,
          computed: "_computeJobList(_job)",
        },

        _codereviewLink: {
          type: String,
          computed: "_computeCodereviewLink(_job)",
        },
        _duration: {
          type: String,
          computed: "_computeDuration(_job)",
        },
        _isTryJob: {
          type: Boolean,
          computed: "_computeIsTryJob(_job)",
        },
        _reload: {
          type: Number,
          value: 10,
        },
        _revisionLink: {
          type: String,
          computed: "_computeRevisionLink(_job)",
        },
        _statusText: {
          type: String,
          computed: "_computeStatusText(_job)",
        },
        _statusColor: {
          type: String,
          computed: "_computeStatusColor(_job)",
        },
      },

      _loadJob: function() {
        var url = "/json/job/" + this.jobId;
        console.log("Loading Job from " + url);
        sk.get(url).then(JSON.parse).then(function(json) {
          this.set("_job", json);
          // If the job is finished, don't reload.
          if (this._job.status != "") {
            this.set("_reload", -1);
          }
        }.bind(this)).catch(sk.errorMessage);
      },

      _cancelJob: function() {
        var url = "/json/job/" + this._job.id + "/cancel";
        console.log("Canceling Job: " + url);
        sk.post(url).then(JSON.parse).then(function(json) {
          this.set("_job", json);
        }.bind(this)).catch(sk.errorMessage);
      },

      _computeJobList: function(job) {
        return [job];
      },

      _computeCodereviewLink: function(job) {
        return job.server + "/c/" + job.issue + "/" + job.patchset;
      },

      _computeDuration: function(job) {
        if (!job) {
          return "???";
        }
        var start = new Date(job.created);
        var end = new Date(job.finished);
        if (job.status == "") {
          end = new Date();
        }
        var duration = (end.getTime() - start.getTime()) / 1000;
        return sk.human.strDuration(duration);
      },

      _computeIsTryJob: function(job) {
        return job.server != "" && job.issue != "" && job.patchset != "";
      },

      _computeRevisionLink: function(job) {
        // This assumes we use Gitiles, but that's a safe assumption for now.
        return job.repo + "/+/" + job.revision;
      },

      _computeStatusText: function(job) {
        if (!job || job.status == undefined || job.status == null) {
          return "unknown";
        }
        var textColor = jobStatusToTextColor[job.status];
        if (!textColor || textColor.length != 2) {
          return "unknown";
        }
        return textColor[0];
      },

      _computeStatusColor: function(job) {
        if (!job || job.status == undefined || job.status == null) {
          return "rgb(255, 255, 255)";
        }
        var textColor = jobStatusToTextColor[job.status];
        if (!textColor || textColor.length != 2) {
          return "rgb(255, 255, 255)";
        }
        return textColor[1];
      },
    });
  })();
  </script>
</dom-module>