task_scheduler/res/imp/task-sk.html

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

    <task-sk>

  Status information about the task scheduler.

  To use this file import it:

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

  Usage:

    <task-sk></task-sk>

  Properties:
    None.

  Methods:
    setTask: Provide task 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="task-sk">
  <template>
    <style include="iron-flex iron-flex-alignment styles-sk">
    <style>
    :host {
      font-family: sans-serif;
    }
    </style>
    <timer-sk id="timer" period="[[_reload]]" on-trigger="_loadTask">
    <div class="container">
      <div class="layout horizontal">
        <div class="flex">
          <h2>Task Information</h2>
        </div>
      </div>
      <div class="table">
        <div class="tr"><div class="td">ID</div><div class="td">[[_task.id]]</div></div>
        <div class="tr"><div class="td">Name</div><div class="td">[[_task.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="[[_task.created]]"></human-date-sk></div></div>
        <template is="dom-if" if="[[_isFinished(_task.status)]]">
          <div class="tr"><div class="td">Finished</div><div class="td"><human-date-sk date="[[_task.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$="[[_task.repo]]" target="_blank">[[_task.repo]]</a></div>
        </div>
        <div class="tr">
          <div class="td">Revision</div>
          <div class="td"><a href$="[[_revisionLink]]" target="_blank">[[_task.revision]]</a></div>
        </div>
        <div class="tr">
          <div class="td">Swarming Task</div>
          <div class="td"><a href$="[[_computeTaskLink(_task.swarmingTaskId)]]" target="_blank">[[_task.swarmingTaskId]]</a></div>
        </div>
        <div class="tr">
          <div class="td">Jobs</div>
          <div class="td">
            <template is="dom-repeat" items="[[_jobs]]" as="job" sort="_sortJobsByName">
              <div><a href$="/job/[[job.id]]">[[job.name]]</a></div>
            </template>
          </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">[[_task.server]]</div></div>
          <div class="tr"><div class="td">Issue</div><div class="td">[[_task.issue]]</div></div>
          <div class="tr"><div class="td">Patchset</div><div class="td">[[_task.patchset]]</div></div>
        </template>
      </div>
    </div>

    <div class="container">
      <h2>Context</h2>
      <task-graph-sk jobs="[[_jobs]]" task="[[_task]]" swarming-server="[[swarmingServer]]"></task-graph-sk>
    </div>
  </template>
  <script src="/res/imp/bower_components/d3/d3.min.js"></script>
  <script>
  (function(){
    var taskStatusToTextColor = {
      "":        ["pending",   "rgb(255, 255, 255)"],
      "RUNNING": ["running",   "rgb(248, 230, 180)"],
      "SUCCESS": ["succeeded", "rgb(209, 228, 188)"],
      "FAILURE": ["failed",    "rgb(217, 95, 2)"],
      "MISHAP":  ["mishap",    "rgb(117, 112, 179)"],
    };

    Polymer({
      is: "task-sk",

      properties: {
        taskId: {
          type: String,
          observer: "_loadTask",
        },

        swarmingServer: {
          type: String,
        },

        _task: {
          type: Object,
        },

        _codereviewLink: {
          type: String,
          computed: "_computeCodereviewLink(_task)",
        },
        _duration: {
          type: String,
          computed: "_computeDuration(_task)",
        },
        _isTryJob: {
          type: Boolean,
          computed: "_computeIsTryJob(_task)",
        },
        _jobs: {
          type: Array,
          value: function() {
            return [];
          },
        },
        _reload: {
          type: Number,
          value: 10,
        },
        _revisionLink: {
          type: String,
          computed: "_computeRevisionLink(_task)",
        },
        _statusText: {
          type: String,
          computed: "_computeStatusText(_task)",
        },
        _statusColor: {
          type: String,
          computed: "_computeStatusColor(_task)",
        },
      },

      _loadTask: function() {
        var url = "/json/task/" + this.taskId;
        console.log("Loading Task from " + url);
        sk.get(url).then(JSON.parse).then(function(json) {
          this.set("_task", json);
          // If the task is finished, don't reload.
          if (this._task.status != "") {
            this.set("_reload", -1);
          }
          if (json.jobs) {
            for (var i = 0; i < json.jobs.length; i++) {
              var url = "/json/job/" + json.jobs[i];
              console.log("Loading Job from " + url);
              sk.get(url).then(JSON.parse).then(function(json) {
                var idx = this._jobs.findIndex(function(job) {
                  return job.id == json.id;
                });
                if (idx == -1) {
                  this.push("_jobs", json);
                } else {
                  this.splice("_jobs", idx, 1, json);
                }
              }.bind(this)).catch(sk.errorMessage);
            }
          }
        }.bind(this)).catch(sk.errorMessage);
      },

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

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

      _computeIsTryJob: function(task) {
        return task.server && task.issue && task.patchset;
      },

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

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

      _computeStatusColor: function(task) {
        if (!task || task.status == undefined || task.status == null) {
          return "rgb(255, 255, 255)";
        }
        var textColor = taskStatusToTextColor[task.status];
        if (!textColor || textColor.length != 2) {
          return "rgb(255, 255, 255)";
        }
        return textColor[1];
      },

      _computeTaskLink: function(taskId) {
        return "https://" + this.swarmingServer + "/task?id=" + taskId;
      },

      _isFinished: function(taskStatus) {
        return taskStatus && taskStatus !== "RUNNING";
      },

      _sortJobsByName: function(a, b) {
        return a.name.localeCompare(b.name);
      },
    });
  })();
  </script>
</dom-module>