| <!-- |
| 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/iron-icons/iron-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-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; |
| } |
| .timelineLink { |
| font-size: 0.8em; |
| } |
| </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="layout horizontal"><a class="timelineLink" href$="/job/[[_job.id]]/timeline">[timeline view]</a></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 class="td"><a href$="[[_searchLinkName]]"><paper-icon-button icon="icons:search"></paper-icon-button></a></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">Requested</div><div class="td"><human-date-sk date="[[_job.requested]]"></human-date-sk></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 class="td"><a href$="[[_searchLinkRevision]]"><paper-icon-button icon="icons:search"></paper-icon-button></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 class="td"><a href$="[[_searchLinkCL]]"><paper-icon-button icon="icons:search"></paper-icon-button></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)", |
| }, |
| _searchLinkCL: { |
| type: String, |
| computed: "_computeSearchLink(_job, 'server', 'issue', 'patchset')", |
| }, |
| _searchLinkName: { |
| type: String, |
| computed: "_computeSearchLink(_job, 'name')", |
| }, |
| _searchLinkRevision: { |
| type: String, |
| computed: "_computeSearchLink(_job, 'repo', 'revision')", |
| }, |
| _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; |
| }, |
| |
| _computeSearchLink: function(job, ...fields) { |
| let url = "/jobs/search?"; |
| for (const field of fields) { |
| url += field + "=" + encodeURIComponent(job[field]) + "&"; |
| } |
| return url.substring(0, url.length-1); // Trim trailing "&" |
| }, |
| |
| _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> |