golden/frontend/res/imp/triagelog-page-sk.html

<!--
  The <triagelog-page-sk> custom element declaration.

  A container element to display the transactional changes to
  the expecations database. For each transaction there is an
  undo button.

  Attributes:
    None

  Methods:
    pageSelected(ctx) - Called by the router when the view becomes visible.
          ctx is the context provided in the route dispatch of page.js.

    pageDeselected - Called by the router when the view is no longer visible.

  Events:
    None

  Mailboxes:
    None
-->

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/iron-flex-layout/iron-flex-layout-classes.html">
<link rel="import" href="bower_components/paper-toggle-button/paper-toggle-button.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/iron-icons/image-icons.html">

<link rel="import" href="../common/imp/paging.html">

<link rel="import" href="activity-sk.html">
<link rel="import" href="shared-styles.html">

<dom-module id="triagelog-page-sk">
  <template>
    <style include="shared-styles">
    .nameHeader,
    .dateTimeHeader,
    .changesHeader {
      font-weight: bold;
    }

    .nameHeader,
    .nameValue {
      width: 30em;
    }

    .dateTimeHeader,
    .dateTimeValue {
      width: 30em;
    }

    .changesHeader,
    .changesValue {
      width: 20em;
    }

    .headerContainer {
      padding-top: 2em;
    }

    .testValue {
      padding-left:7em;
      width:30em;
    }

    .digestValue {
      width:20em;
    }

    .labelValue {
      width:30em;
    }

    .tableRow {
      display: flex;
      flex-direction: row;
      padding-bottom: .5em;
    }

    .topToggle {
      font-size: 20px;
      margin-right: 2em;
      padding-top: 1em;
      padding-right: 1em;
    }
    </style>

    <activity-sk id="activityTriageLog"></activity-sk>
    <paging-sk id="paginationTriagelog" pagination="{{_pagination}}"></paging-sk>
    <div class="horizontal layout">
      <div class="topToggle">
        Details
        <paper-toggle-button id="detailsToggle"
                             checked="{{_state.details}}">
        </paper-toggle-button>
      </div>
    </div>

    <div class="tableRow headerContainer">
      <div class="dateTimeHeader">Date/Time</div>
      <div class="nameHeader">Name</div>
      <div class="changesHeader">#Changes</div>
    </div>

    <div class="vertical layout">
      <template is="dom-repeat" items="{{logEntries}}" as="entry">
        <div class="tableRow">
          <div class="dateTimeValue">{{_toLocalDate(entry.ts)}}</div>
          <div class="nameValue">{{entry.name}}</div>
          <div class="changesValue">{{entry.changeCount}}</div>
          <div class="undo">
            <paper-button on-click="_undoHandler" data-entryid$="{{entry.id}}">Undo
            </paper-button></div>
        </div>
        <template is="dom-repeat" items="{{entry.details}}" as="detail">
          <div class="tableRow">
            <div class="testValue">{{detail.test_name}}</div>
            <div class="digestValue">
              <a target="_blank" href$="{{_detailHref(detail)}}">{{detail.digest}}</a>
            </div>
            <div class="labelValue">{{detail.label}}</div>
          </div>
        </template>
      </template>
    </div>

  </template>
  <script>
    (function() {

      var defaultPagination = {
        size: 20,
        offset: 0,
        total: 0
      };

      var defaultState = {
        size: defaultPagination.size,
        offset: defaultPagination.offset,
        details: false,
        issue: 0,
      };

      Polymer({
        is: "triagelog-page-sk",

        behaviors: [gold.PageStateBehavior],

        properties: {
          _pagination: {
            type: Object,
            value: function() { return sk.object.shallowCopy(defaultPagination); },
          }
        },

        pageSelected: function(ctx) {
          this._initState(ctx, defaultState);
          this._handleServerResponse(sk.get("/json/triagelog" + window.location.search));
        },

        ready: function() {
          this.listen(this.$.detailsToggle, 'change', '_stateChanged');
          this.listen(this.$.paginationTriagelog, 'pagechange', '_stateChanged');
        },

        pageDeselected: function() {},

        _stateChanged: function(ev) {
          // We only need pagination here, because the toggle writes directly to state.
          this._redirectToState(this._pagination);
        },

        _handleServerResponse: function (promise) {
          this.$.activityTriageLog.startSpinner("Loading ...");
          promise.then(JSON.parse).then(function (json) {
            this.logEntries = json.data;
            this._replaceState(json.pagination);
            this.set('_pagination', json.pagination);
            this.$.activityTriageLog.stopSpinner();
          }.bind(this)).catch(function(e) {
            sk.errorMessage(e);
            this.$.activityTriageLog.stopSpinner();
          }.bind(this));
        },

        _toLocalDate: function (timeStampMS) {
          return new Date(timeStampMS).toLocaleString();
        },

        _undoHandler: function (ev) {
          ev.stopPropagation();
          var q = sk.query.fromObject({ id: ev.target.dataset.entryid });
          this._handleServerResponse(sk.post('/json/triagelog/undo?' + q));
        },

        _detailHref: function (detail) {
          return '/detail' + gold.detailQuery(detail.test_name, detail.digest);
        }
      });

    })();
  </script>
</dom-module>