ct/res/imp/drawer-sk.html

<!--
  The <drawer-sk> custom element declaration. Displays a menu of the CT pages.

  Attributes:
    None.

  Events:
    None.

  Methods:
    None.
-->

<dom-module id="drawer-sk">
  <style>
    paper-menu {
      padding: 15px 0px 0px 10px;
    }
    paper-item {
      cursor: pointer;
    }
  </style>
  <template>

    <paper-menu id="menu" theme="core-light-theme" selected="{{selected}}">

      <paper-item data-href="/chromium_perf/">
        <iron-icon icon="trending-up" class="right_padded"></iron-icon>
        Performance
      </paper-item>

      <paper-item data-href="/chromium_analysis/">
        <iron-icon icon="icons:search" class="right_padded"></iron-icon>
        Analysis
      </paper-item>

      <paper-item data-href="/metrics_analysis/">
        <iron-icon icon="icons:assessment" class="right_padded"></iron-icon>
        Metrics Analysis
      </paper-item>

      <paper-item data-href="/lua_script/">
        <iron-icon icon="cloud" class="right_padded"></iron-icon>
        Lua Scripts
      </paper-item>

      <template is="dom-if" if="{{isAdmin}}">

        <paper-item data-href="/capture_skps/">
          <iron-icon icon="image:photo-camera" class="right_padded"></iron-icon>
          SkPictures
        </paper-item>

        <paper-item data-href="/chromium_builds/">
          <iron-icon icon="shopping-cart" class="right_padded"></iron-icon>
          Builds
        </paper-item>

        <paper-item data-href="/admin_tasks/">
          <iron-icon icon="social:person" class="right_padded"></iron-icon>
          Admin Tasks
        </paper-item>

      </template>

      <paper-item data-href="/queue/">
        <iron-icon icon="reorder" class="right_padded"></iron-icon>
        View Queue (<b>{{sizeOfQueue}}</b>)
      </paper-item>

      <paper-item data-href="/history/">
        <iron-icon icon="history" class="right_padded"></iron-icon>
        Runs History
      </paper-item>

      <paper-item data-href="https://github.com/google/skia-buildbot/tree/master/ct">
        <iron-icon icon="folder" class="right_padded"></iron-icon>
        Code
      </paper-item>

      <paper-item data-href="https://www.chromium.org/developers/cluster-telemetry">
        <iron-icon icon="help" class="right_padded"></iron-icon>
        Docs
      </paper-item>

    </paper-menu>
  </template>
</dom-module>

<script>
  Polymer({
    is: "drawer-sk",
    properties: {
      selected: {
        type: String,
        value: "",
        observer: "selectedChanged",
      },
      isAdmin: {
        type: Boolean,
        value: false,
      },
      sizeOfQueue: {
        type: Number,
        value: 0,
      },
      sizeOfUserQueue: {
        type: Number,
        value: 0,
      },
      taskDescriptors: {
         type: Array,
         value: function() {
           return [{type: "ChromiumPerf",
                    get_url: "/_/get_chromium_perf_tasks"},
                   {type: "ChromiumAnalysis",
                    get_url: "/_/get_chromium_analysis_tasks"},
                   {type: "MetricsAnalysis",
                    get_url: "/_/get_metrics_analysis_tasks"},
                   {type: "CaptureSkps",
                    get_url: "/_/get_capture_skp_tasks"},
                   {type: "LuaScript",
                    get_url: "/_/get_lua_script_tasks"},
                   {type: "ChromiumBuild",
                    get_url: "/_/get_chromium_build_tasks"},
                   {type: "RecreatePageSets",
                    get_url: "/_/get_recreate_page_sets_tasks"},
                   {type: "RecreateWebpageArchives",
                    get_url: "/_/get_recreate_webpage_archives_tasks"},
                  ];
         }
       },
    },

    ready: function() {
      this.initSelected();
      this.initSizeOfQueue();
      this.initSizeOfUserQueue();
      this.initIsAdmin();
    },

    initIsAdmin: function() {
      var is_admin_url = "/_/is_admin/"
      sk.get(is_admin_url).then(JSON.parse).then(function(json) {
        this.isAdmin = json.isAdmin;
      }.bind(this)).catch(sk.errorMessage);
    },

    initSizeOfQueue: function() {
      var queryParams = {
         "size": 1,
         "not_completed": true,
      }
      var queryStr = "?" + sk.query.fromObject(queryParams);
      this.taskDescriptors.forEach(function(obj) {
         sk.post(obj.get_url + queryStr).then(JSON.parse).then(function(json) {
           this.sizeOfQueue += json.pagination.total;
         }.bind(this)).catch(sk.errorMessage);
       }.bind(this));
    },

    initSizeOfUserQueue: function() {
      var queryParams = {
         "size": 1,
         "not_completed": true,
         "filter_by_logged_in_user": true,
      }
      var queryStr = "?" + sk.query.fromObject(queryParams);
      this.taskDescriptors.forEach(function(obj) {
         sk.post(obj.get_url + queryStr).then(JSON.parse).then(function(json) {
           this.sizeOfUserQueue += json.pagination.total;
         }.bind(this)).catch(sk.errorMessage);
       }.bind(this));
    },

    initSelected: function() {
      var items = $$("paper-item", this.$.menu);
      var historyIdx;
      for (var i = 0; i < items.length; i++) {
        var ele = items[i];
        if (window.location.href.endsWith(ele.dataset["href"])) {
          this.selected = String(i);
          return;
        }
        if (ele.dataset["href"] == "/history/") {
          historyIdx = i;
        }
      }
      // Special cases.
      if (historyIdx && window.location.href.endsWith("_runs/")) {
        this.selected = String(historyIdx);
        return;
      }
      this.selected = "0";
    },

    selectedChanged: function(newValue, oldValue) {
      if (!oldValue || oldValue == "") {
        return;
      }
      window.location.href = this.$.menu.focusedItem.dataset["href"];
    },
  });
</script>