| <!-- |
| The common.js file must be included before this file. |
| This in an HTML Import-able file that contains the definition |
| of the following elements: |
| |
| <status-sk> |
| |
| To use this file import it: |
| |
| <link href="/res/imp/status-sk.html" rel="import" /> |
| |
| Usage: |
| |
| <status-sk></status-sk> |
| |
| Properties: |
| load: Number, How many commits should be loaded, defaulting to 35. |
| repo: String, The name of the repo that should be shown. |
| repo_base: String, the base url to which a commit hash or branch name can |
| be appended, such that the url will link to the source code at that head. |
| repos: Array of repo names. |
| |
| Methods: |
| None. |
| |
| Events: |
| None. |
| --> |
| |
| <link rel="import" href="/res/imp/bower_components/iron-flex-layout/iron-flex-layout-classes.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-icons/iron-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/iron-icons/hardware-icons.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-button/paper-button.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-icon-button/paper-icon-button.html"> |
| <link rel="import" href="/res/imp/bower_components/paper-spinner/paper-spinner.html"> |
| |
| <link rel="import" href="/res/common/imp/app-sk.html"> |
| <link rel="import" href="/res/common/imp/url-params-sk.html"> |
| |
| <link rel="import" href="autoroll-widget-sk.html"> |
| <link rel="import" href="commits-table-sk.html"> |
| <link rel="import" href="commits-canvas-sk.html"> |
| <link rel="import" href="commits-data-sk.html"> |
| <link rel="import" href="gold-status-sk.html"> |
| <link rel="import" href="perf-status-sk.html"> |
| <link rel="import" href="status-menu-section-sk.html"> |
| <link rel="import" href="tree-status-sk.html"> |
| |
| <dom-module id="status-sk"> |
| <template> |
| <style include="iron-flex iron-flex-alignment iron-positioning"> |
| :host{ |
| --app-sk-main: { |
| background-color: transparent; |
| font-family: sans-serif; |
| }; |
| --status-sk-header-color: #66A61E; |
| --status-sk-icon-color: #E6AB02; |
| --status-sk-text-color: white; |
| } |
| app-sk { |
| --app-sk-toolbar: { |
| color: var(--status-sk-text-color); |
| font-size: 15px; |
| font-family: sans-serif; |
| text-align: center; |
| |
| background-color: var(--status-sk-header-color); |
| }; |
| login-sk{ |
| --login-sk-color: var(--status-sk-text-color); |
| }; |
| } |
| |
| #infobar { |
| margin-left:5%; |
| margin-right:5%; |
| } |
| |
| paper-button.roles { |
| color:var(--status-sk-text-color); |
| text-transform: none; |
| } |
| paper-button.roles>iron-icon { |
| color:#E6AB02; |
| } |
| |
| autoroll-widget-sk { |
| margin-right: 25px; |
| } |
| |
| #mainContent { |
| position:relative; |
| } |
| |
| #can { |
| position:absolute; |
| top:0; |
| left:0; |
| width:175px; |
| z-index: 5; |
| } |
| |
| /* The table needs to be placed absolutely so that the table portion can scroll independent |
| of the commits panel*/ |
| #table { |
| position:absolute; |
| top:10px; |
| left:174px; |
| right:0; |
| } |
| |
| a { |
| color:var(--status-sk-text-color); |
| text-decoration: none; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| #infobar iron-icon { |
| color: var(--status-sk-icon-color); |
| } |
| |
| h1 { |
| text-transform: capitalize; |
| } |
| |
| h1.shrunk { |
| font-size:1.5em; |
| display: block; |
| } |
| #infobar.shrunk, .shrunk { |
| display:none; |
| } |
| |
| #can.shrunk { |
| display: block; |
| position:absolute; |
| top:0; |
| left:0; |
| width:100px; |
| } |
| |
| #table.shrunk { |
| display: block; |
| position: absolute; |
| top:10px; |
| left:100px; |
| right:0; |
| } |
| |
| #spinner { |
| position: absolute; |
| top: 5px; |
| right: 5px; |
| } |
| </style> |
| |
| <!-- To keep all the data binding sane and understandable, one-way and two-way bindings |
| have been used very purposefully. That is, two-way bindings are *only* used when the data |
| flows out of the element. This makes it easier to tell, at a glance, where data originates |
| from and where it is simply being read. Additionally, the attributes are alphabetized, |
| with inputs listed first and output attributes listed second(where sensible). --> |
| |
| <!-- these must go above the points at which their bound values are used. Otherwise, |
| the bound values get set to "" and it clobbers the stored values --> |
| <url-param-sk name="commit_label" value="{{label}}" default="author"></url-param-sk> |
| <url-param-sk name="filter" value="{{filter}}" default="interesting"></url-param-sk> |
| <url-param-sk name="search_value" value="{{search}}"></url-param-sk> |
| <url-param-sk name="commit" value="{{highlighted_commit_hashes}}" multi></url-param-sk> |
| |
| <app-sk id="app" class="fit" |
| mode="waterfall" |
| tall_class="tall" |
| responsive_width="800px" |
| header_height="120px" |
| header_responsive_height="56px" |
| logged_in_email="{{email}}" |
| narrow="{{narrow}}"> |
| <status-menu-section-sk repos="[[repos]]" navigation></status-menu-section-sk> |
| |
| <h1 class="shrinkable" toolbar>Status: [[repo]]</h1> |
| |
| <autoroll-widget-sk title="Fuchsia roll status" class="shrinkable" rtoolbar |
| reload="[[reload]]" |
| name="Fuchsia" |
| url="https://fuchsia-roll.skia.org" |
| |
| status="{{fuchsia_roll_status}}"> |
| </autoroll-widget-sk> |
| |
| <autoroll-widget-sk title="Android roll status" class="shrinkable" rtoolbar |
| reload="[[reload]]" |
| name="Android" |
| url="https://android-master-roll.skia.org" |
| |
| status="{{android_roll_status}}"> |
| </autoroll-widget-sk> |
| |
| <autoroll-widget-sk title="Skia DEPS roll status" class="shrinkable" rtoolbar |
| reload="[[reload]]" |
| name="Cr" |
| url="https://autoroll.skia.org" |
| |
| status="{{cr_roll_status}}"> |
| </autoroll-widget-sk> |
| |
| <tree-status-sk class="shrinkable" rtoolbar |
| reload="[[reload]]" |
| |
| open="{{open}}" |
| sheriff="{{sheriff}}" |
| wrangler="{{wrangler}}" |
| robocop="{{robocop}}" |
| trooper="{{trooper}}"> |
| </tree-status-sk> |
| |
| <div id="infobar" class="bottom horizontal layout flex shrinkable" toolbar> |
| <a href="http://skia-tree-status.appspot.com/sheriff" target="_blank" rel="noopener noreferrer"> |
| <paper-button id="sheriff-button" class="roles" title="The current Skia sheriff"><iron-icon icon="icons:star"></iron-icon> |
| Sheriff: [[sheriff]] |
| </paper-button> |
| </a> |
| <a href="http://skia-tree-status.appspot.com/gpu-sheriff" target="_blank" rel="noopener noreferrer"> |
| <paper-button id="wrangler-button" class="roles" title="The current GPU wranger"><iron-icon icon="icons:gesture"></iron-icon> |
| Wrangler: [[wrangler]] |
| </paper-button> |
| </a> |
| <a href="http://skia-tree-status.appspot.com/robocop" target="_blank" rel="noopener noreferrer"> |
| <paper-button id="robocop-button" class="roles" title="The current Android robocop"><iron-icon icon="icons:android"></iron-icon> |
| Robocop: [[robocop]] |
| </paper-button> |
| </a> |
| <a href="http://skia-tree-status.appspot.com/trooper" target="_blank" rel="noopener noreferrer"> |
| <paper-button id="trooper-button" class="roles" title="The current Infra trooper"><iron-icon icon="hardware:sim-card"></iron-icon> |
| Trooper: [[trooper]] |
| </paper-button> |
| </a> |
| <div class="flex"></div> |
| <perf-status-sk title="Active Perf alerts" reload="[[reload]]"></perf-status-sk> |
| <gold-status-sk title="Skia Gold: Untriaged image count" reload="[[reload]]"></gold-status-sk> |
| </div> |
| |
| <div id="mainContent"> |
| <commits-canvas-sk id="can" class="shrinkable" |
| cr_roll="[[cr_roll_status]]" |
| android_roll="[[android_roll_status]]" |
| fuchsia_roll="[[fuchsia_roll_status]]" |
| branch_heads="[[branch_heads]]" |
| commits="[[commits]]" |
| repo_base="[[repo_base]]" |
| |
| commits_to_load="{{commits_to_load}}" |
| reload="{{reload}}"> |
| </commits-canvas-sk> |
| |
| <commits-table-sk id="table" class="shrinkable" |
| builders="[[builders]]" |
| builds="[[builds]]" |
| categories="[[categories]]" |
| category_list="[[category_list]]" |
| build_details="[[build_details]]" |
| commits="[[commits]]" |
| commits_map="[[commits_map]]" |
| highlighted_commit_hashes="[[highlighted_commit_hashes]]" |
| logged_in="[[logged_in]]" |
| num_builders="[[num_builders]]" |
| purple_builds="[[purple_builds]]" |
| relanded_map="[[relanded_map]]" |
| repo="[[repo]]" |
| repo_base="[[repo_base]]" |
| reverted_map="[[reverted_map]]" |
| task_scheduler_url="[[task_scheduler_url]]" |
| time_points="[[time_points]]" |
| |
| commit_label="{{label}}" |
| drawing="{{drawing}}" |
| filter="{{filter}}" |
| search="{{search}}"> |
| </commits-table-sk> |
| |
| <commits-data-sk id="data" |
| cr_roll_current="[[cr_roll_status.currentRollRev]]" |
| cr_roll_last="[[cr_roll_status.lastRollRev]]" |
| android_roll_current="[[android_roll_status.currentRollRev]]" |
| android_roll_last="[[android_roll_status.lastRollRev]]" |
| fuchsia_roll_current="[[fuchsia_roll_status.currentRollRev]]" |
| fuchsia_roll_last="[[fuchsia_roll_status.lastRollRev]]" |
| commits_to_load="[[commits_to_load]]" |
| filter="[[filter]]" |
| reload="[[reload]]" |
| repo="[[repo]]" |
| search="[[search]]" |
| |
| branch_heads="{{branch_heads}}" |
| build_details="{{build_details}}" |
| builders="{{builders}}" |
| builds="{{builds}}" |
| categories="{{categories}}" |
| category_list="{{category_list}}" |
| commits="{{commits}}" |
| commits_map="{{commits_map}}" |
| loading="{{loading}}" |
| num_builders="{{num_builders}}" |
| purple_builds="{{purple_builds}}" |
| relanded_map="{{relanded_map}}" |
| reverted_map="{{reverted_map}}" |
| task_scheduler_url="{{task_scheduler_url}}" |
| time_points="{{time_points}}"> |
| </commits-data-sk> |
| |
| <paper-spinner id="spinner" alt="Loading status table and drawing it" active="{{_or(drawing, loading)}}"></paper-spinner> |
| </div> |
| </app-sk> |
| </template> |
| <script> |
| Polymer({ |
| is:"status-sk", |
| |
| properties: { |
| // input |
| commits_to_load: { |
| type: Number, |
| value: 35, |
| }, |
| repo: { |
| type: String, |
| }, |
| repo_base: { |
| type: String, |
| }, |
| repos: { |
| type: Array, |
| }, |
| |
| // private |
| drawing: { |
| type: Boolean, |
| value: false, |
| }, |
| email: { |
| type: String, |
| }, |
| loading: { |
| type: Boolean, |
| value: false, |
| }, |
| logged_in: { |
| type: Boolean, |
| computed: "_isGoogler(email)", |
| }, |
| narrow: { |
| type: Boolean, |
| observer: "_toggleLargeMenuItems" |
| }, |
| open: { |
| type: Boolean, |
| observer: "_treeOpen", |
| }, |
| sheriff: { |
| type: String, |
| }, |
| wrangler: { |
| type: String, |
| }, |
| robocop: { |
| type: String, |
| }, |
| trooper: { |
| type: String, |
| }, |
| }, |
| |
| _isGoogler: function(email) { |
| return sk.isGoogler(email); |
| }, |
| |
| _or: function(a, b) { |
| return a || b; |
| }, |
| |
| _toggleLargeMenuItems: function(isNarrow) { |
| var items = $$(".shrinkable", this.$.app); |
| items.forEach(function(a){ |
| if (isNarrow) { |
| a.classList.add("shrunk"); |
| } else { |
| a.classList.remove("shrunk"); |
| } |
| }); |
| }, |
| |
| _treeOpen: function(open) { |
| // updateStyles must be called after setting these to make sure they |
| // propagate through all the children. |
| if (open === "open") { |
| this.customStyle["--status-sk-icon-color"] = "#E6AB02"; |
| this.customStyle["--status-sk-text-color"] = "white"; |
| this.customStyle["--status-sk-header-color"] = "#66A61E"; |
| } else if (open === "caution") { |
| this.customStyle["--status-sk-icon-color"] = "#9b9b9b"; |
| this.customStyle["--status-sk-text-color"] = "black"; |
| this.customStyle["--status-sk-header-color"] = "#eeb000"; |
| } else { |
| this.customStyle["--status-sk-icon-color"] = "#E6AB02"; |
| this.customStyle["--status-sk-text-color"] = "white"; |
| this.customStyle["--status-sk-header-color"] = "#D95F02"; |
| } |
| Polymer.updateStyles(); |
| |
| // Set the favicon. |
| var link = document.createElement("link"); |
| link.id = "dynamicFavicon"; |
| link.rel = "shortcut icon"; |
| if (open === "open") { |
| link.href = "/res/img/favicon-open.ico"; |
| } else if (open === "caution") { |
| link.href = "/res/img/favicon-caution.ico"; |
| } else { |
| link.href = "/res/img/favicon-closed.ico"; |
| } |
| |
| var head = document.getElementsByTagName("head")[0]; |
| var oldIcon = document.getElementById(link.id); |
| if (oldIcon) { |
| head.removeChild(oldIcon); |
| } |
| head.appendChild(link); |
| }, |
| }); |
| </script> |
| </dom-module> |
