leasing/res/imp/leasing-task-sk.html

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

    <leasing-task-sk>

  This is the side navigation menu for the Skia Fuzzer

  To use this file import it:

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

  Usage:

    <leasing-task-sk></leasing-task-sk>

  Attributes:
    task - The leasing task to display details of.
    duration - The additional time that the lease should be extended to.

  Events:
    None

  Methods:
    None
-->

<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">
<link rel="import" href="/res/imp/bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="/res/imp/bower_components/paper-item/paper-item.html">
<link rel="import" href="/res/imp/bower_components/paper-listbox/paper-listbox.html">
<link rel="import" href="/res/common/imp/confirm-dialog-sk.html">

<dom-module id="leasing-task-sk">
  <template>
    <style include="iron-positioning">
      table.tasktable {
        border:solid black 1px;
        border-spacing: 0px;
        width: 80%;
      }
      tr.headers {
        background-color: #CCCCFF;
        text-align: center;
      }
      tr {
        text-align: center;
      }
      td {
        white-space: nowrap;
      }
      paper-button {
        color: #1f78b4;
      }
      paper-dropdown-menu {
        max-width: 3em;
      }
    </style>

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

      <table class="tasktable" cellpadding="5" border="1">
        <col width ="33%">
        <col width ="33%">
        <col width ="33%">

        <tr class="headers">
          <td colspan=2>
            Task - [[task.description]] - [[task.requester]] - [[ displayTaskStatus(task) ]]
          </td>
        </tr>

        <tr>
          <td>
            Created: [[ formatTimestamp(task.created) ]]
          </td>
          <td>
            Lease Start Time: [[ displayLeaseStartTime(task) ]]
            <br/>
            Lease End Time: [[ displayLeaseEndTime(task) ]]
          </td>
        </tr>

        <tr>
          <td>
            Pool: [[task.pool]]
            <template is="dom-if" if="[[task.osType]]">
              <br/>
              Dimensions: [[ displayDimensions(task) ]]
              <template is="dom-if" if="[[task.botId]]">
                <br/>
                Bot Id: <a href="[[ getBotLink(task.botId, task.swarmingServer) ]]" target="_blank">[[task.botId]]</a>
              </template>
              <template is="dom-if" if="[[task.taskIdForIsolates]]">
                <br/>
                Task For Isolates: <a href="[[ getSwarmingTaskLink(task.taskIdForIsolates, task.swarmingServer) ]]" target="_blank">Link</a>
              </template>
              <template is="dom-if" if="[[task.setupDebugger]]">
                <br/>
                Debugger setup: [[task.setupDebugger]]
              </template>
            </template>
          </td>
          </td>
          <td>
	    Task Log:
            <template is="dom-if" if="[[task.swarmingTaskId]]">
              <a href="[[ getSwarmingTaskLink(task.swarmingTaskId, task.swarmingServer) ]]" target="_blank">Link</a>
            </template>
            <template is="dom-if" if="[[!task.swarmingTaskId]]">
              Processing
            </template>
            <br/>
            Task Status: [[task.swarmingTaskState]]
          </td>
        </tr>

        <template is="dom-if" if="[[ displayLeaseButtons(task) ]]">
          <tr>
            <td>
              <paper-dropdown-menu>
                <paper-listbox class="dropdown-content" selected="{{duration}}" attr-for-selected="value" id="duration_listbox">
                  <paper-item value="1">1hr</paper-item>
                  <paper-item value="2">2hr</paper-item>
                  <paper-item value="6">6hr</paper-item>
                </paper-listbox>
               </paper-dropdown-menu>
              <paper-button raised on-click="onExtend">Extend Lease</paper-button>
            </td>
            <td>
              <br/>
              <paper-button raised on-click="onExpire">Expire Lease</paper-button>
            </td>
          </tr>
        </template>

      </table>

      <br/><br/>

  </template>
  <script>
  Polymer({
    is: "leasing-task-sk",
    properties: {
      task: {
        type: Object,
        value: {},
      },
      duration: {
         type: String,
         value: "1",
      },
    },

    onExtend: function() {
      this.$.confirm_dialog.open("Proceed with extending leasing task?")
          .then(function(resp) {
              var params = {
                'task': [this.task.datastoreId],
                'duration': [this.duration],
              };
              var url = '/_/extend_leasing_task?' + sk.query.fromParamSet(params);
              sk.post(url).then(function(resp) {
                window.location.href = "/my_leases";
              }).catch(sk.errorMessage);
          }.bind(this)).catch(function() {
            sk.errorMessage("Did not extend lease");
          })
    },

    onExpire: function() {
      this.$.confirm_dialog.open("Proceed with expiring the lease?")
          .then(function(resp) {
              var params = {
                'task': [this.task.datastoreId],
              };
              var url = '/_/expire_leasing_task?' + sk.query.fromParamSet(params);
              sk.post(url).then(function(resp) {
                window.location.href = "/my_leases";
              }).catch(sk.errorMessage);
          }.bind(this)).catch(function() {
            sk.errorMessage("Did not expire lease");
          })
    },

    displayLeaseButtons: function(task) {
      return !task.done && task.swarmingTaskState !== "PENDING"
    },

    displayDimensions: function(task) {
      var ret = task.osType;
      if (task.deviceType != "") {
        ret += " - " + leasing.alias.android(task.deviceType) + leasing.alias.getAKAStr(task.deviceType);
      }
      return ret;
    },

    getBotLink: function(botId, swarmingServer) {
      return "https://" + swarmingServer + "/bot?id="+ botId;
    },

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

    displayTaskStatus: function(task) {
      if (task.done) {
        return "Completed";
      } else {
        return "Still Running";
      }
    },

    displayLeaseStartTime: function(task) {
      return this.displayLeaseTime(task.swarmingTaskState, task.leaseStartTime);
    },

    displayLeaseEndTime: function(task) {
      return this.displayLeaseTime(task.swarmingTaskState, task.leaseEndTime);
    },

    displayLeaseTime: function(taskState, taskTime) {
      if (taskState === "PENDING") {
        return "N/A";
      } else {
        return this.formatTimestamp(taskTime);
      }
    },

    formatTimestamp: function(timestamp) {
      if (!timestamp) {
        return timestamp;
      }
      const d = new Date(timestamp);
      return d.toUTCString();
    },
  });
  </script>
</dom-module>