| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <!-- |
| 3 Copyright 2017 The Chromium Authors. All rights reserved. |
| 4 Use of this source code is governed by a BSD-style license that can be |
| 5 found in the LICENSE file. |
| 6 --> |
| 7 |
| 8 <link type="text/css" rel="stylesheet" href="/dashboard/static/base.css"> |
| 9 |
| 10 <link rel="import" href="/components/paper-button/paper-button.html"> |
| 11 <link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.htm
l"> |
| 12 <link rel="import" href="/components/paper-input/paper-textarea.html"> |
| 13 <link rel="import" href="/components/paper-item/paper-item.html"> |
| 14 <link rel="import" href="/components/paper-listbox/paper-listbox.html"> |
| 15 <link rel="import" href="/components/polymer/polymer.html"> |
| 16 |
| 17 <link rel="import" href="/dashboard/static/simple_xhr.html"> |
| 18 |
| 19 |
| 20 <dom-module id="create-health-report-page"> |
| 21 <style> |
| 22 .error { |
| 23 color: #dd4b39; |
| 24 font-weight: bold; |
| 25 } |
| 26 |
| 27 .center { |
| 28 margin: auto; |
| 29 padding: 10px; |
| 30 } |
| 31 |
| 32 #content { |
| 33 display: inline-flex; |
| 34 display: -webkit-inline-flex; |
| 35 flex-direction: column; |
| 36 -webkit-flex-direction: column; |
| 37 align-items: flex-start; |
| 38 -webkit-align-items: flex-start; |
| 39 } |
| 40 |
| 41 #loading-spinner { |
| 42 width: 100%; |
| 43 display: flex; |
| 44 justify-content: center; |
| 45 } |
| 46 |
| 47 #success { |
| 48 color: #15c; |
| 49 font-size: 25px; |
| 50 } |
| 51 |
| 52 paper-textarea { |
| 53 width: 100%; |
| 54 } |
| 55 |
| 56 </style> |
| 57 <template> |
| 58 <template is="dom-if" if="{{loading}}"> |
| 59 <div id="loading-spinner"><img src="//www.google.com/images/loading.gif"><
/div> |
| 60 </template> |
| 61 <div id="content"> |
| 62 <p id="success" |
| 63 hidden$="{{hideSuccess}}">Report created successfully. You can |
| 64 view it here: <a href="/speed_releasing/{{endpointName}}"> |
| 65 {{endpointName}} |
| 66 </a> |
| 67 </p> |
| 68 <h1>Create a Health Report</h1> |
| 69 |
| 70 <b>User-friendly name:</b><br> |
| 71 <paper-input id="name" value="{{name}}" label="Report Name" required |
| 72 auto-validate error-message="Required field."> |
| 73 </paper-input> |
| 74 |
| 75 <br><br><b>Master/bots:</b><br> |
| 76 Enter each master/bot pair, separated by line. For example:<br> |
| 77 ChromiumPerf/Nexus5<br> |
| 78 ClankInternal/mako<br> |
| 79 ...<br> |
| 80 <paper-textarea id="bots" value="{{bots}}" |
| 81 label="Master/bot Pairs" auto-validate required |
| 82 error-message="Required field."> |
| 83 </paper-textarea> |
| 84 |
| 85 <br><br><b>Tests:</b><br> |
| 86 Enter each test path in full, separated by line. For example: <br> |
| 87 memory.top_10_mobile/memory:chrome:all_processes:reported_by_os:system_mem
ory:ashmem:proportional_resident_size_avg <br> |
| 88 memory.top_10_mobile/memory:chrome:all_processes:reported_by_os:system_mem
ory:java_heap:proportional_resident_size_avg<br> |
| 89 ...<br> |
| 90 |
| 91 <paper-textarea id="tests" value="{{tests}}" label="Test paths" |
| 92 auto-validate required error-message="Required field."> |
| 93 </paper-textarea> |
| 94 |
| 95 <br><br><b>Test layout:</b><br> |
| 96 Enter a JSON dict to specify the layout. For example: <br> |
| 97 { <br> |
| 98 "system_health.memory_mobile/foreground/ashmem": ["Foreground"
, "Ashmem"]<br> |
| 99 ...<br> |
| 100 }<br> |
| 101 The usage is: "test": ["Category", "UserFriendlyName"] |
| 102 <br> |
| 103 |
| 104 <paper-textarea id="layout" value="{{layout}}" |
| 105 label="Table Layout" required auto-validate |
| 106 error-message="Required field."> |
| 107 </paper-textarea> |
| 108 <br> |
| 109 <template is="dom-if" if="{{error}}"> |
| 110 <div class="error">{{error}}</div> |
| 111 </template> |
| 112 <paper-button raised on-click="onSubmit">Submit</paper-button> |
| 113 </div> |
| 114 </template> |
| 115 |
| 116 <script> |
| 117 'use strict'; |
| 118 Polymer({ |
| 119 is: 'create-health-report-page', |
| 120 properties: { |
| 121 loading: { |
| 122 type: Boolean, |
| 123 value: false, |
| 124 notify: true |
| 125 }, |
| 126 error: { |
| 127 type: String, |
| 128 value: '', |
| 129 notify: true |
| 130 }, |
| 131 hideSuccess: { |
| 132 type: Boolean, |
| 133 value: true, |
| 134 }, |
| 135 endpointName: { |
| 136 type: String, |
| 137 }, |
| 138 name: { |
| 139 type: String, |
| 140 notify: true |
| 141 }, |
| 142 layout: { |
| 143 type: String, |
| 144 notify: true |
| 145 }, |
| 146 bots: { |
| 147 type: String, |
| 148 notify: true |
| 149 }, |
| 150 tests: { |
| 151 type: String, |
| 152 notify: true |
| 153 }, |
| 154 xsrfToken: { |
| 155 type: String, |
| 156 value: '' |
| 157 }, |
| 158 }, |
| 159 |
| 160 onSubmit: function() { |
| 161 var valid = this.validateInputs(); |
| 162 if (valid) { |
| 163 this.checkToken(); |
| 164 } |
| 165 this.error = ''; |
| 166 }, |
| 167 |
| 168 checkToken: function() { |
| 169 var params = { |
| 170 'getToken': true, |
| 171 }; |
| 172 simple_xhr.send('/create_health_report', params, |
| 173 function(response) { |
| 174 this.xsrfToken = response['xsrf_token']; |
| 175 this.loading = false; |
| 176 this.buildTable(); // Needs to wait for response with token. |
| 177 }.bind(this), |
| 178 function(msg) { |
| 179 this.error = msg; |
| 180 this.loading = false; |
| 181 }.bind(this)); |
| 182 }, |
| 183 |
| 184 buildTable: function() { |
| 185 this.loading = true; |
| 186 var params = { |
| 187 'tableLayout': this.layout, |
| 188 'tableName': this.name, |
| 189 'tableBots': this.bots, |
| 190 'tableTests': this.tests, |
| 191 'xsrf_token': this.xsrfToken, |
| 192 }; |
| 193 simple_xhr.send('/create_health_report', params, |
| 194 function(response) { |
| 195 this.loading = false; |
| 196 this.hideSuccess = false; |
| 197 this.endpointName = response['name']; |
| 198 window.scrollTo(0, 0); |
| 199 }.bind(this), |
| 200 function(msg) { |
| 201 this.error = msg; |
| 202 this.loading = false; |
| 203 }.bind(this)); |
| 204 }, |
| 205 |
| 206 validateInputs: function() { |
| 207 var valid = true; |
| 208 if (!this.name) { |
| 209 valid = false; |
| 210 this.$.name.invalid = true; |
| 211 } |
| 212 if (!this.bots) { |
| 213 valid = false; |
| 214 this.$.bots.invalid = true; |
| 215 } |
| 216 if (!this.tests) { |
| 217 valid = false; |
| 218 this.$.tests.invalid = true; |
| 219 } |
| 220 if (!this.layout) { |
| 221 valid = false; |
| 222 this.$.layout.invalid = true; |
| 223 } |
| 224 return valid; |
| 225 |
| 226 }, |
| 227 |
| 228 |
| 229 }); |
| 230 </script> |
| 231 </dom-module> |
| OLD | NEW |