ct/res/imp/chromium-build-runs-sk.html

<!--
  The <chromium-build-runs-sk> custom element declaration. Displays a table with details about each
  completed and pending Chromium build task.

  Attributes:
    defaultSize: The number of Chromium build runs to show per page, default 10.

  Events:
    None.

  Methods:
    reload: queries for updated information on Chromium build runs.
-->

<dom-module id="chromium-build-runs-sk">
  <style>
    paper-dialog {
      min-width: 200px;
    }
    table.runshistory {
      border-spacing: 0px;
    }
    tr.headers {
      background-color: #CCCCFF;
      text-align: center;
    }
    td.nowrap {
      white-space: nowrap;
    }
    table.runshistory > tbody > tr > td {
      padding: 10px;
      border: solid black 1px;
    }
    .delete-button, .redo-button {
      --paper-icon-button-disabled: {
        display: none;
      }
    }
    .oldruns {
      margin-left: 20px;
    }
  </style>
  <template>

    <paper-dialog heading="Confirmation" id="delete_dialog">
      <div>Proceed with deleting task?</div>
      <div>{{deleteNote(chromiumBuilds, deleteIndex)}}</div>
      <paper-button id="delete_dismiss">Cancel</paper-button>
      <paper-button id="delete_confirm" autofocus>OK</paper-button>
    </paper-dialog>

    <paper-dialog heading="Confirmation" id="redo_dialog">
      <div>Reschedule this task?</div>
      <paper-button id="redo_dismiss">Cancel</paper-button>
      <paper-button id="redo_confirm" autofocus>OK</paper-button>
    </paper-dialog>

    <h2>Chromium Builds</h2>
    <paging-sk pagination="{{pagination}}" on-pagechange="pageChangedHandler"></paging-sk>
    <br/>

    <table class="runshistory" id="runshistory" cellpadding="5" border="1">
      <tr class="headers">
        <td>Id</td>
        <td>Chromium Commit Hash</td>
        <td>Submitted On</td>
        <td>Skia Commit Hash</td>
        <td>User</td>
        <td>Timestamps</td>
        <td>Results</td>
        <td>Task Repeats</td>
      </tr>

      <template is="dom-repeat" items="{{chromiumBuilds}}" as="chromiumBuild" index-as="index">
        <tr style="border: 1px solid black;">
          <!-- Id col -->
          <td class="nowrap">
            <span>{{chromiumBuild.Id}}</span>
            <paper-icon-button icon="delete" mini
                               class="delete-button"
                               disabled="{{!chromiumBuild.canDelete}}"
                               alt="Delete"
                               data-index$="{{index}}"
                               data-type="delete">
            </paper-icon-button>
            <paper-icon-button icon="redo" mini
                               class="redo-button"
                               disabled="{{!chromiumBuild.canRedo}}"
                               alt="Redo"
                               data-index$="{{index}}"
                               data-type="redo">
            </paper-icon-button>
          </td>

          <!-- Chromium Commit Hash col -->
          <td><a href="{{chromiumCommitUrl(chromiumBuild.ChromiumRev)}}">{{shortHash(chromiumBuild.ChromiumRev)}}</a></td>

          <!-- Submitted On col -->
          <td class="nowrap">{{ formatTimestamp(chromiumBuild.ChromiumRevTs.Int64) }}</td>

          <!-- Skia Commit Hash col -->
          <td><a href="{{skiaCommitUrl(chromiumBuild.SkiaRev)}}">{{shortHash(chromiumBuild.SkiaRev)}}</a></td>

          <!-- User col -->
          <td>{{chromiumBuild.Username}}</td>

          <!-- Timestamps col -->
          <td>
            <table>
              <tr>
                <td>Requested:</td>
                <td class="nowrap">{{ formatTimestamp(chromiumBuild.TsAdded.Int64) }}</td>
              </tr>
              <tr>
                <td>Started:</td>
                <td class="nowrap">{{ formatTimestamp(chromiumBuild.TsStarted.Int64) }}</td>
              </tr>
              <tr>
                <td>Completed:</td>
                <td class="nowrap">{{ formatTimestamp(chromiumBuild.TsCompleted.Int64) }}</td>
              </tr>
            </table>
          </td>

          <!-- Results col -->
          <td class="nowrap">
            <template is="dom-if" if="{{chromiumBuild.Failure.Bool}}">
              <div style="color:red;">Failed</div>
            </template>
            <template is="dom-if" if="{{!chromiumBuild.TsCompleted.Int64}}">
              <div style="color:green;">Waiting</div>
            </template>
            <template is="dom-if"
                      if="{{isDone(chromiumBuild.Failure.Bool, chromiumBuild.TsCompleted.Int64)}}">
              Done
            </template>
            <template is="dom-if" if="{{chromiumBuild.Log.String}}">
              <a href="{{chromiumBuild.Log.String}}" target="_blank">log</a>
            </template>
          </td>

          <!-- Task Repeats -->
          <td>{{ formatRepeatAfterDays(chromiumBuild.RepeatAfterDays) }}</td>

        </tr>
      </template>
    </table>

  </template>
</dom-module>

<script>
   Polymer({
     is: "chromium-build-runs-sk",
     properties: {
       chromiumBuilds: {
         type: Array,
         value: function() { return []; },
       },
       defaultSize: {
         type: Number,
         value: 10,
       },
       pagination: {
         type: Object,
         value: function() { return {}; },
       },
       pageChangedHandler: {
         type: Object,
         value: function() { return null; },
       },
       deleteIndex: {
         type: Number,
         value: -1,
       },
       redoIndex: {
         type: Number,
         value: -1,
       },
     },

     ready: function() {
       this.pagination = {"offset": 0, "size": this.defaultSize};
       this.pageChangedHandler = this.reload.bind(this);
       var that = this;
       this.$.runshistory.addEventListener('click', function(e) {
         var button = sk.findParent(e.target, "PAPER-ICON-BUTTON");
         if (button != null) {
           if (button.dataset.type == "delete") {
             that.deleteIndex = button.dataset.index;
             that.$.delete_dialog.open();
           } else if (button.dataset.type == "redo") {
             that.redoIndex = button.dataset.index;
             that.$.redo_dialog.open();
           }
         }
       });
       this.$.delete_dismiss.addEventListener('click', function(e) {
         that.deleteIndex = -1;
         that.$.delete_dialog.close();
       });
       this.$.delete_confirm.addEventListener('click', function(e) {
         that.deleteTask();
       });
       this.$.redo_dismiss.addEventListener('click', function(e) {
         that.redoIndex = -1;
         that.$.redo_dialog.close();
       });
       this.$.redo_confirm.addEventListener('click', function(e) {
         that.redoTask();
       });
       this.reload();
     },

     reload: function() {
       var queryParams = {
         "offset": this.pagination.offset,
         "size": this.pagination.size,
       }
       var queryStr = "?" + sk.query.fromObject(queryParams);
       sk.post("/_/get_chromium_build_tasks" + queryStr).then(JSON.parse).then(function(json) {
         this.deleteIndex = -1;
         this.pagination = json.pagination;
         this.chromiumBuilds = json.data;
         for (var i = 0; i < this.chromiumBuilds.length; i++) {
           this.chromiumBuilds[i].canDelete = json.permissions[i].DeleteAllowed;
           this.chromiumBuilds[i].canRedo = json.permissions[i].RedoAllowed;
         }
       }.bind(this)).catch(sk.errorMessage);
     },

     deleteNote: function(chromiumBuilds, deleteIndex) {
       if (deleteIndex >= 0 &&
           chromiumBuilds[deleteIndex].TsCompleted.Valid &&
           !chromiumBuilds[deleteIndex].Failure.Bool) {
         return "Note: This build will no longer be available for running other tasks.";
       } else {
         return "";
       }
     },

     deleteTask: function() {
       var params = {};
       params["id"] = this.chromiumBuilds[this.deleteIndex].Id;;
       sk.post("/_/delete_chromium_build_task", JSON.stringify(params)).then(function() {
         $$$("#confirm_toast").text = "Deleted task " + params["id"];
         $$$("#confirm_toast").show();
       }.bind(this)).catch(sk.errorMessage).then(function() {
         this.reload();
         this.$.delete_dialog.close();
       }.bind(this));
     },

     redoTask: function() {
       var params = {};
       params["id"] = this.chromiumBuilds[this.redoIndex].Id;
       sk.post("/_/redo_chromium_build_task", JSON.stringify(params)).then(function() {
         $$$("#confirm_toast").text = "Resubmitted task " + params["id"];
         $$$("#confirm_toast").show();
       }.bind(this)).catch(sk.errorMessage).then(function() {
         this.reload();
         this.$.redo_dialog.close();
       }.bind(this));
     },

     chromiumCommitUrl: ctfe.chromiumBuild.chromiumCommitUrl,
     skiaCommitUrl: ctfe.chromiumBuild.skiaCommitUrl,
     shortHash: ctfe.chromiumBuild.shortHash,
     formatTimestamp: ctfe.getFormattedTimestamp,
     formatRepeatAfterDays: ctfe.formatRepeatAfterDays,

     isDone: function(failure, tsCompleted) {
       return !failure && tsCompleted;
     },
  });
</script>