| <!-- |
| 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/icons-sk.html"> |
| <link rel="import" href="/res/common/imp/styles-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-canvas-sk.html"> |
| <link rel="import" href="commits-data-sk.html"> |
| <link rel="import" href="commits-table-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 styles-sk"> |
| :host{ |
| --app-sk-main: { |
| background-color: transparent; |
| font-family: sans-serif; |
| }; |
| --app-sk-drawer: { |
| overflow: auto; |
| }; |
| --menu-item-sk-icon-color: var(--color-lightorange); |
| --paper-item: { |
| font-size: 14px; |
| padding: 0px; |
| }; |
| --paper-item-min-height: 26px; |
| --paper-toolbar-height: 56px; |
| --paper-toolbar-sm-height: 56px; |
| --status-sk-icon-color: var(--color-lightorange); |
| --status-sk-main-text-color: black; |
| --status-sk-header-background-color: var(--color-lightgreen); |
| --status-sk-header-text-color: white; |
| } |
| app-sk { |
| --app-sk-toolbar: { |
| color: var(--status-sk-header-text-color); |
| font-size: 15px; |
| font-family: sans-serif; |
| height: 56px; |
| overflow-x: auto; |
| overflow-y: hidden; |
| padding: 0px; |
| text-align: center; |
| background-color: var(--status-sk-header-background-color); |
| }; |
| login-sk{ |
| --login-sk-color: var(--status-sk-header-text-color); |
| }; |
| } |
| |
| autoroll-widget-sk, gold-status-sk, perf-status-sk { |
| font-size: 12px; |
| } |
| |
| .container { |
| margin-bottom: 0px; |
| margin-top: 4px; |
| padding-bottom: 4px; |
| padding-top: 4px; |
| } |
| |
| .container h2 { |
| font-size: 16px; |
| margin-bottom: 0px; |
| margin-top: 0px; |
| } |
| |
| paper-item { |
| color: #000000; |
| text-transform: none; |
| } |
| paper-item > iron-icon { |
| color: var(--status-sk-icon-color); |
| margin-right: 5px; |
| } |
| |
| #can { |
| z-index: 5; |
| } |
| |
| a { |
| text-decoration: none; |
| } |
| |
| a:hover { |
| text-decoration: underline; |
| } |
| |
| h1 { |
| text-transform: capitalize; |
| } |
| |
| h1.shrunk { |
| font-size:1.5em; |
| } |
| </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="default"></url-param-sk> |
| <url-param-sk name="search_value" value="{{search}}"></url-param-sk> |
| |
| <app-sk id="app" class="fit" |
| drawer_width="220px" |
| mode="waterfall" |
| tall_class="standard" |
| responsive_width="800px" |
| header_height="56px" |
| header_responsive_height="56px" |
| logged_in_email="{{email}}" |
| login_data="{{login_data}}" |
| narrow="{{narrow}}"> |
| |
| <div class="container" navigation> |
| <h2>Navigation</h2> |
| <status-menu-section-sk repos="[[repos]]"></status-menu-section-sk> |
| </div> |
| |
| <div class="container" navigation> |
| <h2>AutoRollers</h2> |
| <autoroll-widget-sk navigation |
| reload="[[reload]]" |
| rollers="{{roll_statuses}}" |
| on-update="_handleAutoRollUpdate" |
| > |
| </autoroll-widget-sk> |
| </div> |
| |
| <div class="container" navigation> |
| <h2>Perf</h2> |
| <perf-status-sk title="Active Perf alerts" reload="[[reload]]"></perf-status-sk> |
| </div> |
| |
| <div class="container" navigation> |
| <h2>Gold</h2> |
| <gold-status-sk title="Skia Gold: Untriaged image count" reload="[[reload]]"></gold-status-sk> |
| </div> |
| |
| <div class="container" navigation> |
| <h2>Rotations</h2> |
| <div> |
| <a href="http://skia-tree-status.appspot.com/sheriff" target="_blank" rel="noopener noreferrer"> |
| <paper-item id="sheriff-button" title="The current Skia sheriff"> |
| <iron-icon icon="icons:star"></iron-icon> |
| Sheriff: [[sheriff]] |
| </paper-item> |
| </a> |
| </div> |
| <div> |
| <a href="http://skia-tree-status.appspot.com/gpu-sheriff" target="_blank" rel="noopener noreferrer"> |
| <paper-item id="wrangler-button" title="The current GPU wranger"> |
| <iron-icon icon="icons:gesture"></iron-icon> |
| Wrangler: [[wrangler]] |
| </paper-item> |
| </a> |
| </div> |
| <div> |
| <a href="http://skia-tree-status.appspot.com/robocop" target="_blank" rel="noopener noreferrer"> |
| <paper-item id="robocop-button" title="The current Android robocop"> |
| <iron-icon icon="icons:android"></iron-icon> |
| Robocop: [[robocop]] |
| </paper-item> |
| </a> |
| </div> |
| <div> |
| <a href="http://skia-tree-status.appspot.com/trooper" target="_blank" rel="noopener noreferrer"> |
| <paper-item id="trooper-button" title="The current Infra trooper"> |
| <iron-icon icon="skia:trooper"></iron-icon> |
| Trooper: [[trooper]] |
| </paper-item> |
| </a> |
| </div> |
| </div> |
| |
| <h1 class="shrinkable" toolbar> |
| <template is="dom-if" if="[[!narrow]]">Status: </template>[[repo]] |
| </h1> |
| |
| <tree-status-sk mtoolbar |
| class="horizontal layout center flex" |
| reload="[[reload]]" |
| open="{{open}}" |
| sheriff="{{sheriff}}" |
| wrangler="{{wrangler}}" |
| robocop="{{robocop}}" |
| trooper="{{trooper}}"> |
| </tree-status-sk> |
| |
| <div id="mainContent" class="horizontal layout"> |
| <commits-canvas-sk id="can" |
| roll_statuses="[[roll_statuses]]" |
| 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="flex" |
| task_specs="[[task_specs]]" |
| tasks="[[tasks]]" |
| categories="[[categories]]" |
| category_list="[[category_list]]" |
| task_details="[[task_details]]" |
| commits="[[commits]]" |
| commits_map="[[commits_map]]" |
| logged_in="[[logged_in]]" |
| purple_tasks="[[purple_tasks]]" |
| relanded_map="[[relanded_map]]" |
| repo="[[repo]]" |
| repo_base="[[repo_base]]" |
| reverted_map="[[reverted_map]]" |
| swarming_url="[[swarming_url]]" |
| task_scheduler_url="[[task_scheduler_url]]" |
| time_points="[[time_points]]" |
| commit_label="{{label}}" |
| drawing="{{drawing}}" |
| filter="{{filter}}" |
| search="{{search}}" |
| on-reload="_forceUpdate"> |
| </commits-table-sk> |
| |
| <commits-data-sk id="data" |
| roll_statuses="[[roll_statuses]]" |
| commits_to_load="[[commits_to_load]]" |
| filter="[[filter]]" |
| is_sheriff="[[is_sheriff]]" |
| is_trooper="[[is_trooper]]" |
| reload="[[reload]]" |
| repo="[[repo]]" |
| search="[[search]]" |
| branch_heads="{{branch_heads}}" |
| task_details="{{task_details}}" |
| task_specs="{{task_specs}}" |
| tasks="{{tasks}}" |
| categories="{{categories}}" |
| category_list="{{category_list}}" |
| commits="{{commits}}" |
| commits_map="{{commits_map}}" |
| loading="{{loading}}" |
| purple_tasks="{{purple_tasks}}" |
| relanded_map="{{relanded_map}}" |
| reverted_map="{{reverted_map}}" |
| swarming_url="{{swarming_url}}" |
| 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, |
| value: function() { |
| return ["Skia", "Skia Infra"]; |
| }, |
| }, |
| |
| // private |
| drawing: { |
| type: Boolean, |
| value: false, |
| }, |
| email: { |
| type: String, |
| }, |
| loading: { |
| type: Boolean, |
| value: false, |
| }, |
| logged_in: { |
| type: Boolean, |
| computed: "_editRights(email, login_data)", |
| }, |
| is_sheriff: { |
| type: Boolean, |
| computed: "_isUser(email, sheriff)", |
| }, |
| is_trooper: { |
| type: Boolean, |
| computed: "_isUser(email, trooper)", |
| }, |
| login_data: { |
| type: Object, |
| }, |
| narrow: { |
| type: Boolean, |
| observer: "_toggleLargeMenuItems" |
| }, |
| open: { |
| type: Boolean, |
| observer: "_treeOpen", |
| }, |
| sheriff: { |
| type: String, |
| }, |
| wrangler: { |
| type: String, |
| }, |
| robocop: { |
| type: String, |
| }, |
| trooper: { |
| type: String, |
| }, |
| }, |
| |
| _forceUpdate: function() { |
| this.$.data.forceUpdate(); |
| }, |
| |
| _editRights: function(email, login_data) { |
| return login_data["editRights"] === true |
| }, |
| |
| _isUser: function(email, user) { |
| var parts = email.split('@'); |
| if (parts.length !== 2) { |
| return false; |
| } |
| return parts[0] === user; |
| }, |
| |
| _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-header-text-color"] = "white"; |
| this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-lightgreen"); |
| } else if (open === "caution") { |
| this.customStyle["--status-sk-header-text-color"] = "black"; |
| this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-lightorange"); |
| } else { |
| this.customStyle["--status-sk-header-text-color"] = "white"; |
| this.customStyle["--status-sk-header-background-color"] = this.getComputedStyleValue("--color-redorange"); |
| } |
| 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); |
| }, |
| |
| _handleAutoRollUpdate: function() { |
| this.$.data.forceReProcess(); |
| }, |
| }); |
| </script> |
| </dom-module> |
