Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(56)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: dashboard/dashboard/elements/test-picker.html

Issue 1955433004: [Polymer10] Convert triage-dialog, test-picker, and report-page to Polymer 1.0 (Closed) Base URL: git@github.com:catapult-project/catapult.git@polymer10-migration
Patch Set: Created 4 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
« no previous file with comments | « dashboard/dashboard/elements/report-page.html ('k') | dashboard/dashboard/elements/triage-dialog.html » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <!-- 2 <!--
3 Copyright 2016 The Chromium Authors. All rights reserved. 3 Copyright 2016 The Chromium Authors. All rights reserved.
4 Use of this source code is governed by a BSD-style license that can be 4 Use of this source code is governed by a BSD-style license that can be
5 found in the LICENSE file. 5 found in the LICENSE file.
6 --> 6 -->
7 7
8 <link rel="import" href="/components/core-icon-button/core-icon-button.html"> 8 <link rel="import" href="/components/iron-flex-layout/iron-flex-layout.html">
9 <link rel="import" href="/components/paper-button/paper-button.html"> 9 <link rel="import" href="/components/paper-button/paper-button.html">
10 <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
10 <link rel="import" href="/components/paper-progress/paper-progress.html"> 11 <link rel="import" href="/components/paper-progress/paper-progress.html">
11 12
12 <link rel="import" href="/dashboard/elements/autocomplete-box.html"> 13 <link rel="import" href="/dashboard/elements/autocomplete-box.html">
13 <link rel="import" href="/dashboard/static/simple_xhr.html"> 14 <link rel="import" href="/dashboard/static/simple_xhr.html">
14 <link rel="import" href="/dashboard/static/testselection.html"> 15 <link rel="import" href="/dashboard/static/testselection.html">
15 16
16 <polymer-element name="test-picker" attributes="hasChart xsrfToken testSuites"> 17 <dom-module id="test-picker">
17 <template> 18 <template>
18 <style> 19 <style>
19 #container * { 20 #container * {
20 margin-right: 3px; 21 margin-right: 3px;
21 } 22 }
22 23
23 #dnd-btn { 24 #dnd-btn {
24 padding: 1px 2px; 25 padding: 1px 2px;
25 margin: 2px 4px 2px 2px; 26 margin: 2px 4px 2px 2px;
26 font-size: 11px; 27 font-size: 11px;
27 cursor:grabbing; 28 cursor:grabbing;
28 cursor:-moz-grabbing; 29 cursor:-moz-grabbing;
29 cursor:-webkit-grabbing; 30 cursor:-webkit-grabbing;
30 } 31 }
31 32
32 paper-button { 33 paper-button {
33 height: 35px; 34 height: 35px;
34 } 35 }
35 36
36 paper-button:not([disabled]) { 37 paper-button:not([disabled]) {
37 color: #4285f4; 38 color: #4285f4;
38 } 39 }
39 40
40 paper-button[raised]:not([disabled]) { 41 paper-button[raised]:not([disabled]) {
41 background: #4285f4; 42 background: #4285f4;
42 color: #fff; 43 color: #fff;
43 } 44 }
44 45
45 core-icon { 46 iron-icon {
46 height: 25px; 47 height: 25px;
47 } 48 }
48 49
49 #suite-description { 50 #suite-description {
50 padding: 10px; 51 padding: 10px;
51 } 52 }
52 53
53 #loading { 54 #loading {
54 display: block; 55 display: block;
55 position: relative; 56 position: relative;
56 width: 152px; 57 width: 152px;
57 height: 35px; 58 height: 35px;
58 } 59 }
59 60
60 paper-progress { 61 paper-progress {
61 display: block; 62 display: block;
62 position: absolute; 63 position: absolute;
63 bottom: -1px; 64 bottom: -1px;
64 height: 1px; 65 height: 1px;
65 width: 100%; 66 width: 100%;
66 } 67 }
67 </style> 68 </style>
68 69
69 <div id="container" horizontal layout center wrap> 70 <div id="container" class="horizontal layout center wrap">
70 <template repeat="{{box, index in selectionModels}}"> 71 <template is="dom-repeat" items="{{selectionModels}}" as="box">
71 <autocomplete-box datalist={{box.datalist}} 72 <autocomplete-box datalist={{box.datalist}}
72 placeholder="{{box.placeholder}}" 73 placeholder="{{box.placeholder}}"
73 disabled={{box.disabled}} 74 disabled={{box.disabled}}
74 multi={{box.multi}} 75 multi={{box.multi}}
75 on-dropdownselect="{{onDropdownSelect}}" 76 on-dropdownselect="onDropdownSelect"
76 id="selection-{{index}}"></autocomplete-box> 77 id="selection-{{index}}"></autocomplete-box>
77 </template> 78 </template>
78 79
79 <template if="{{loading}}"> 80 <template is="dom-if" if="{{loading}}">
80 <div id="loading"> 81 <div id="loading">
81 <paper-progress indeterminate></paper-progress> 82 <paper-progress indeterminate></paper-progress>
82 </div> 83 </div>
83 </template> 84 </template>
84 85
85 <core-icon-button id="dnd-btn" 86 <paper-icon-button id="dnd-btn"
86 icon="open-with" 87 icon="open-with"
87 disabled?="{{!enableAddSeries || !hasChart}}" 88 disabled$="{{!computeAnd(enableAddSeries, hasChart)}}"
88 draggable="{{enableAddSeries && hasChart}}" 89 draggable="{{computeAnd(enableAddSeries, hasChart)}}"
89 on-dragstart="{{onSeriesButtonDragStart}}"> 90 on-dragstart="onSeriesButtonDragStart">
90 Drag me 91 Drag me
91 </core-icon-button> 92 </paper-icon-button>
92 93
93 <paper-button raised 94 <paper-button raised
94 id="add-graph-btn" 95 id="add-graph-btn"
95 on-click="{{onAddButtonClicked}}" 96 on-click="onAddButtonClicked"
96 disabled?="{{!enableAddSeries}}">Add</paper-button> 97 disabled$="{{!enableAddSeries}}">Add</paper-button>
97 </div> 98 </div>
98 99
99 <div id="suite-description"></div> 100 <div id="suite-description"></div>
100 </template> 101 </template>
101 102
102 <script> 103 <script>
103 'use strict'; 104 'use strict';
104 105
105 Polymer('test-picker', { 106 Polymer({
106 107
107 TESTSUITE_LABEL: 'Test suite', 108 is: 'test-picker',
108 BOT_LABEL: 'Bot', 109 properties: {
109 SUBTEST_LABEL: 'Subtest', 110 TESTSUITE_LABEL: {
110 DEPRECATED_TAG: 'no new data', 111 type: String,
111 UNMONITORED_TAG: 'unmonitored', 112 value: 'Test suite',
113 },
114 BOT_LABEL: {
115 type: String,
116 value: 'Bot',
117 },
118 SUBTEST_LABEL: {
119 type: String,
120 value: 'Subtest',
121 },
122 DEPRECATED_TAG: {
123 type: String,
124 value: 'no new data',
125 },
126 UNMONITORED_TAG: {
127 type: String,
128 value: 'unmonitored',
129 },
130 hasChart: { notify: true },
131 testSuites: {
132 notify: true,
133 observer: 'testSuitesChanged'
134 },
135 xsrfToken: { notify: true }
136
137 },
138
139 computeAnd: (x, y) => x && y,
112 140
113 ready: function() { 141 ready: function() {
114 this.pageStateLoading = true; 142 this.pageStateLoading = true;
115 this.hasChart = false; 143 this.hasChart = false;
116 this.enableAddSeries = false; 144 this.enableAddSeries = false;
117 this.selectedSuite = null; 145 this.selectedSuite = null;
118 this.suiteDescription = null; 146 this.suiteDescription = null;
119 this.selectionModels = [ 147 this.selectionModels = [
120 { 148 {
121 placeholder: this.TESTSUITE_LABEL, 149 placeholder: this.TESTSUITE_LABEL,
(...skipping 95 matching lines...) Expand 10 before | Expand all | Expand 10 after
217 // Update all the next dropdown menus for subtests. 245 // Update all the next dropdown menus for subtests.
218 this.updateSubtestMenus(boxIndex + 1); 246 this.updateSubtestMenus(boxIndex + 1);
219 } 247 }
220 }, 248 },
221 249
222 updateTestSuiteDescription: function() { 250 updateTestSuiteDescription: function() {
223 // Display the test suite description if there is one. 251 // Display the test suite description if there is one.
224 var descriptionElement = this.$['suite-description']; 252 var descriptionElement = this.$['suite-description'];
225 var suite = this.getSelectionMenu(0).value; 253 var suite = this.getSelectionMenu(0).value;
226 if (!suite || !this.testSuites[suite]) { 254 if (!suite || !this.testSuites[suite]) {
227 descriptionElement.innerHTML = ''; 255 Polymer.dom(descriptionElement).innerHTML = '';
228 return; 256 return;
229 } 257 }
230 258
231 var description = this.testSuites[suite]['des']; 259 var description = this.testSuites[suite]['des'];
232 if (description) { 260 if (description) {
233 var descriptionHTML = '<b>' + suite + '</b>: '; 261 var descriptionHTML = '<b>' + suite + '</b>: ';
234 descriptionHTML += this.convertMarkdownLinks(description); 262 descriptionHTML += this.convertMarkdownLinks(description);
235 descriptionElement.innerHTML = descriptionHTML; 263 Polymer.dom(descriptionElement).innerHTML = descriptionHTML;
236 } else { 264 } else {
237 descriptionElement.innerHTML = ''; 265 Polymer.dom(descriptionElement).innerHTML = '';
238 } 266 }
239 }, 267 },
240 268
241 /** 269 /**
242 * Updates bot dropdown menu with bot items. 270 * Updates bot dropdown menu with bot items.
243 */ 271 */
244 updateBotMenu: function() { 272 updateBotMenu: function() {
245 var menu = this.getSelectionMenu(1); 273 var menu = this.getSelectionMenu(1);
246 var botItems = this.getBotItems(); 274 var botItems = this.getBotItems();
247 menu.setDataList(botItems); 275 menu.setDataList(botItems);
(...skipping 131 matching lines...) Expand 10 before | Expand all | Expand 10 after
379 } 407 }
380 return bots; 408 return bots;
381 }, 409 },
382 410
383 getCheckedSuite: function() { 411 getCheckedSuite: function() {
384 var suiteMenu = this.getSelectionMenu(0); 412 var suiteMenu = this.getSelectionMenu(0);
385 return suiteMenu.value; 413 return suiteMenu.value;
386 }, 414 },
387 415
388 getSelectionMenu: function(index) { 416 getSelectionMenu: function(index) {
389 return this.$.container.querySelector('#selection-' + index); 417 return Polymer.dom(this.$.container).querySelector(
418 '#selection-' + index);
390 }, 419 },
391 420
392 /** 421 /**
393 * Handler for drag start event for series drag button. 422 * Handler for drag start event for series drag button.
394 */ 423 */
395 onSeriesButtonDragStart: function(event, detail, sender) { 424 onSeriesButtonDragStart: function(event, detail, sender) {
396 var selection = this.getCurrentSelection(); 425 var selection = this.getCurrentSelection();
397 var testPathAndSelected = selection.getTestPathAndSelectedSeries(); 426 var testPathAndSelected = selection.getTestPathAndSelectedSeries();
398 event.dataTransfer.setData('type', 'seriesdnd'); 427 event.dataTransfer.setData('type', 'seriesdnd');
399 event.dataTransfer.setData( 428 event.dataTransfer.setData(
(...skipping 112 matching lines...) Expand 10 before | Expand all | Expand 10 after
512 /** 541 /**
513 * Converts a link in markdown format to a HTML link (anchor elements). 542 * Converts a link in markdown format to a HTML link (anchor elements).
514 * @param {string} text A link in markdown format. 543 * @param {string} text A link in markdown format.
515 * @return {string} A hyperlink string. 544 * @return {string} A hyperlink string.
516 */ 545 */
517 convertMarkdownLinks: function(text) { 546 convertMarkdownLinks: function(text) {
518 return text.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>'); 547 return text.replace(/\[(.+?)\]\((.+?)\)/g, '<a href="$2">$1</a>');
519 } 548 }
520 }); 549 });
521 </script> 550 </script>
522 </polymer-element> 551 </dom-module>
OLDNEW
« no previous file with comments | « dashboard/dashboard/elements/report-page.html ('k') | dashboard/dashboard/elements/triage-dialog.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698