api-console-assets/bower_components/request-timings/request-timings-panel.html

This repo only exists to publish api console components to npm

<!--
@license
Copyright 2016 The Advanced REST client authors <arc@mulesoft.com>
Licensed under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="request-timings.html">
<!--

The `request-timings-panel` element is a panel to display a set of timings
for the request / response. The use case is to display timings for the request
where redirects are possible and timings for the redirects are calculated.

The timings accepted by this element is defined in the HAR 1.2 spec. See The
`request-timings` element docs for more info.

Custom property | Description | Default
----------------|-------------|----------
`--request-timings-panel` | Mixin applied to the element | `{}`
`--arc-font-subhead` | Mixin applied to the headers element. Similar to `--paper-font-subhead` mixin in Paper elements. | `{}`

Use `request-timings` properties an mixins to style the charts.

@group UI Elements
@element request-timings-panel
@demo demo/request-timings-panel.html
-->
<dom-module id="request-timings-panel">
  <template>
    <style>
     :host {
      display: block;
      @spply(--request-timings-panel);
    }

    .status-row,
    .timings-row {
      @apply(--layout-horizontal);
      @apply(--layout-center);
      min-height: 56px;
    }

    .status-row {
      @apply(--layout-horizontal);
      @apply(--layout-end-justified);
    }

    .sub-title {
      @apply(--arc-font-subhead);
    }

    .status-label {
      width: 60px;
      font-size: var(--request-timings-panel-timing-total-size, 16px);
      font-weight: var(--request-timings-panel-timing-total-weigth, 400);
      @apply(--arc-font-subhead);
    }

    .text {
      -webkit-user-select: text;
      cursor: text;
    }

    .redirect-value {
      margin-top: 12px;
      @apply(--layout-flex);
    }
    </style>
    <template is="dom-if" if="[[hasRedirects]]" restamp>
      <h3 class="sub-title">Redirects</h3>
      <template is="dom-repeat" items="[[redirects]]">
        <div class="timings-row">
          <div class="status-label text">
            #<span>{{_computeIndexName(index)}}</span>
          </div>
          <div class="redirect-value">
            <request-timings timings="[[item]]"></request-timings>
          </div>
        </div>
      </template>
      <template is="dom-if" if="[[hasTimings]]">
        <h3 class="sub-title">Final request</h3>
        <div class="timings-row">
          <div class="redirect-value">
            <request-timings timings="[[timings]]"></request-timings>
          </div>
        </div>
      </template>
      <div class="status-row">
        <div class="flex"></div>
        <span class="timing-value total text">[[requestTotalTime]] ms</span>
      </div>
    </template>
    <template is="dom-if" if="[[!hasRedirects]]" restamp>
      <request-timings timings="[[timings]]"></request-timings>
    </template>
  </template>
  <script>
  Polymer({
    is: 'request-timings-panel',
    properties: {
      // Computed value, if true it will display redirects details
      hasRedirects: {
        type: Boolean,
        value: false,
        readOnly: true
      },
      // Computed value, True if any request timings are available.
      hasTimings: {
        type: Boolean,
        value: false,
        readOnly: true
      },
      /**
       * An array of HAR 1.2 timings object.
       * It should contain a timings objects for any redirect object during
       * the request.
       * List should be arelady ordered by the time of occurence.
       */
      redirects: {
        type: Array,
        value: function() {
          return [];
        }
      },
      // The request / response HAR timings.
      timings: {
        type: Object,
        value: function() {
          return {};
        }
      },
      /**
       * Calculated total request time (final response + redirects).
       */
      requestTotalTime: {
        type: Number,
        value: 0,
        readOnly: true
      }
    },

    observers: [
      '_redirectsChanged(redirects.*)',
      '_timingsChanged(timings.*)',
      '_computeRequestTime(redirects.*)',
      '_computeRequestTime(timings.*)'
    ],

    _redirectsChanged: function() {
      var rt = this.redirects;
      if (!rt || !rt.length) {
        this._setHasRedirects(false);
      } else {
        this._setHasRedirects(true);
      }
    },
    // Handler for the timings change.
    _timingsChanged: function() {
      var rt = this.timings;
      if (!rt) {
        this._setHasTimings(false);
      } else {
        this._setHasTimings(true);
      }
    },

    _computeIndexName: function(index) {
      return index + 1;
    },

    _computeRequestTime: function() {
      var rt = this.redirects;
      var timings = this.timings;
      var time = 0;
      if (!!rt && rt.length) {
        rt.forEach(function(timing) {
          time += this._computeHarTime(timing);
        }, this);
      }
      var add = this._computeHarTime(timings);
      if (add) {
        time += add;
      }
      time = Math.round(time * 10000) / 10000;
      this._setRequestTotalTime(time);
    },

    _computeHarTime: function(har) {
      var fullTime = 0;
      if (!har) {
        return fullTime;
      }
      var connect = Number(har.connect);
      var receive = Number(har.receive);
      var send = Number(har.send);
      var wait = Number(har.wait);
      var blocked = Number(har.blocked);
      var dns = Number(har.dns);
      var ssl = Number(har.ssl);
      if (connect !== connect || connect < 0) {
        connect = 0;
      }
      if (receive !== receive || receive < 0) {
        receive = 0;
      }
      if (send !== send || send < 0) {
        send = 0;
      }
      if (wait !== wait || wait < 0) {
        wait = 0;
      }
      if (dns !== dns || dns < 0) {
        dns = -1;
      }
      if (blocked !== blocked || blocked < 0) {
        blocked = -1;
      }
      if (ssl !== ssl || ssl < 0) {
        ssl = -1;
      }
      fullTime += connect + receive + send + wait;
      if (dns > 0) {
        fullTime += dns;
      }
      if (blocked > 0) {
        fullTime += blocked;
      }
      if (ssl > 0) {
        fullTime += ssl;
      }
      return fullTime;
    }
  });
  </script>
</dom-module>