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

    <list-tasks-sk>

  This element displays all waiting and running tasks being processed by the
  Android Compile Server.

  To use this file import it:

    <link href="list-tasks-sk.html" rel="import" />

  Usage:

    <list-tasks-sk></list-tasks-sk>

  Attributes:
    androidCompileInstances - An array of Android compile instances.
    unownedPendingTasks - An array of compile tasks waiting to be picked up.
    ownedPendingTasks - An array of currently running compile tasks.

  Events:
    None
-->

<link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="/res/common/imp/app-sk.html" />

<dom-module id="list-tasks-sk">
  <template>
    <style include="iron-positioning android-compile-app-style">
      .current-time {
        padding-right: 3em;
      }
      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;
      }
    </style>

    <app-sk class="fit" header_height="60px">
      <span header class="title">Android Compile Server</span>
      <span rtoolbar class="current-time">Current time: [[ _displayCurrentTime() ]]</span>
      <compile-menu-sk navigation></compile-menu-sk>
      <br/><br/>

      <force-sync-sk android-compile-instances="[[androidCompileInstances]]">
      </force-sync-sk>
      <br/><br/>

      <table class="tasktable" cellpadding="5" border="1">
        <col width = "50%">
        <col width = "50%">
        <tr class="headers">
          <td colspan=2>
            [[unownedPendingTasks.length]] Tasks Waiting in Queue
          </td>
        </tr>
        <template is="dom-repeat" items="{{unownedPendingTasks}}">
          <tr>
            <td>
              <template is="dom-if" if="[[item.hash]]">
                <a href="[[ _getHashLink(item.hash) ]]" target="_blank">[[ _getShortHash(item.hash) ]]</a>
              </template>
              <template is="dom-if" if="[[item.issue]]">
                <a href="[[ _getGerritLink(item.issue, item.patchset) ]]" target="_blank">skrev/[[item.issue]]/[[item.patchset]]</a>
              </template>
            </td>
            <td>
              Created: [[ _formatTimestamp(item.created) ]]
            </td>
          </tr>
        </template>
      </table>

      <br/><br/>

      <table class="tasktable" cellpadding="5" border="1">
        <col width = "50%">
        <col width = "50%">
        <tr class="headers">
          <td colspan=2>
            [[ownedPendingTasks.length]] Tasks Currently Running
          </td>
        </tr>
        <template is="dom-repeat" items="{{ownedPendingTasks}}">
          <tr>
            <td>
              Running on [[item.compile_server_instance]] ([[item.checkout]]):
              <a href="[[ _getGerritLink(item.issue, item.patchset) ]]" target="_blank">skrev/[[item.issue]]/[[item.patchset]]</a>
            </td>
            <td>
              Created: [[ _formatTimestamp(item.created) ]]
            </td>
          </tr>
        </template>
      </table>
    </app-sk>
  </template>

  <script>
  Polymer({
    is: "list-tasks-sk",
    properties: {
      androidCompileInstances: {
        type: Array,
        value: [],
      },
      unownedPendingTasks: {
        type: Array,
        value: [],
      },
      ownedPendingTasks: {
        type: Array,
        value: [],
      },
    },

    _getShortHash: function(hash) {
      return hash.substring(0, 7);
    },

    _getHashLink: function(hash) {
      return "https://skia.googlesource.com/skia/+/" + hash;
    },

    _getGerritLink: function(issue, patchset) {
      return "https://skia-review.googlesource.com/c/skia/+/" + issue +
             "/" + patchset;
    },

    _formatTimestamp: function(timestamp) {
      if (!timestamp) {
        return timestamp;
      }
      const d = new Date(timestamp);
      return d.toUTCString();
    },

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