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

Side by Side Diff: appengine/swarming/elements/build/elements.html

Issue 2258853002: Midway through extracting filters (Closed) Base URL: https://chromium.googlesource.com/external/github.com/luci/luci-py@tasklist
Patch Set: Revert gpu stuff and tidy up Created 4 years, 4 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
OLDNEW
1 <!DOCTYPE html><html><head><!-- 1 <!DOCTYPE html><html><head><!--
2 @license 2 @license
3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved. 3 Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt 4 This code may only be used under the BSD style license found at http://polymer.g ithub.io/LICENSE.txt
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI BUTORS.txt
7 Code distributed by Google as part of the polymer project is also 7 Code distributed by Google as part of the polymer project is also
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN TS.txt
9 --><!-- 9 --><!--
10 @license 10 @license
(...skipping 23593 matching lines...) Expand 10 before | Expand all | Expand 10 after
23604 type: Array, 23604 type: Array,
23605 computed: "_makeArray(_dimensions)", 23605 computed: "_makeArray(_dimensions)",
23606 notify: true, 23606 notify: true,
23607 }, 23607 },
23608 fleet: { 23608 fleet: {
23609 type: Object, 23609 type: Object,
23610 computed: "_fleet(_count)", 23610 computed: "_fleet(_count)",
23611 notify: true, 23611 notify: true,
23612 }, 23612 },
23613 primary_map: { 23613 primary_map: {
23614 type:Object, 23614 type: Object,
23615 computed: "_primaryMap(_dimensions)", 23615 computed: "_primaryMap(_dimensions)",
23616 notify: true, 23616 notify: true,
23617 }, 23617 },
23618 primary_arr: { 23618 primary_arr: {
23619 type: Array, 23619 type: Array,
23620 //BOT_PROPERTIES is inherited from BotListBehavior 23620 //BOT_PROPERTIES is inherited from BotListBehavior
23621 computed: "_primaryArr(dimensions, BOT_PROPERTIES)", 23621 computed: "_primaryArr(dimensions, BOT_PROPERTIES)",
23622 notify: true, 23622 notify: true,
23623 }, 23623 },
23624 23624
(...skipping 664 matching lines...) Expand 10 before | Expand all | Expand 10 after
24289 _taskLink: function(data) { 24289 _taskLink: function(data) {
24290 if (data && data.task_id) { 24290 if (data && data.task_id) {
24291 return "/user/task/" + data.task_id; 24291 return "/user/task/" + data.task_id;
24292 } 24292 }
24293 return undefined; 24293 return undefined;
24294 } 24294 }
24295 24295
24296 }); 24296 });
24297 })(); 24297 })();
24298 </script> 24298 </script>
24299 </dom-module><dom-module id="task-filters" assetpath="/res/imp/tasklist/"> 24299 </dom-module><dom-module id="query-column-filter-style" assetpath="/res/imp/comm on/">
24300 <template> 24300 <template>
24301 <style> 24301 <style>
24302 :host { 24302 :host {
24303 display: block; 24303 display: block;
24304 font-family: sans-serif;
24305 }
24306 #filter {
24307 margin:0 5px;
24308 }
24309
24310 .container {
24311 min-height: 120px;
24312 width: 100%;
24313 }
24314
24315 .item {
24316 border-bottom: 1px solid #EEE;
24317 max-width: 250px;
24318 min-height: 1.0em;
24319 min-width: 100px;
24320 padding: 0.1em 0.2em;
24321 line-height: 1.5em;
24322 }
24323
24324 .header {
24325 height: 2em;
24326 padding: .25em;
24327 line-height: 2em;
24328 }
24329
24330 .selector {
24331 border: 1px solid black;
24332 margin: 0 5px;
24333 max-height: 200px;
24334 min-height: 130px;
24335 min-width: 200px;
24336 overflow-y: auto;
24337 overflow-x: hidden;
24338 }
24339
24340 .selectable {
24341 cursor: pointer;
24342 }
24343
24344 .selectable:hover {
24345 /* See https://sites.google.com/a/google.com/skia-infrastructure/design- docs/general-design-guidance */
24346 background-color: #A6CEE3;
24347 }
24348
24349 .iron-selected {
24350 /* See https://sites.google.com/a/google.com/skia-infrastructure/design- docs/general-design-guidance */
24351 background-color: #1F78B4;
24352 color: white;
24353 }
24354
24355 .icons {
24356 cursor:pointer;
24357 height:20px;
24358 margin:2px;
24359 width:20px;
24360 flex-shrink: 0;
24361 }
24362
24363 .side-by-side {
24364 display: inline-block;
24365 vertical-align: top;
24366 }
24367
24368 .bold {
24369 font-weight: bold;
24370 }
24371
24372 paper-checkbox {
24373 max-height: 2em;
24374 margin: 2px;
24375 /* See https://sites.google.com/a/google.com/skia-infrastructure/design- docs/general-design-guidance */
24376 --paper-checkbox-checked-color: black;
24377 --paper-checkbox-checked-ink-color: black;
24378 --paper-checkbox-unchecked-color: black;
24379 --paper-checkbox-unchecked-ink-color: black;
24380 --paper-checkbox-label-color: black;
24304 } 24381 }
24305 </style> 24382 </style>
24306 24383
24307 </template> 24384 </template>
24385 </dom-module>
24386
24387 <script>
24388 window.SwarmingBehaviors = window.SwarmingBehaviors || {};
24389 (function(){
24390 // This behavior wraps up all the shared swarming functionality.
24391 SwarmingBehaviors.QueryColumnFilter = {
24392
24393 };
24394 })();
24395 </script>
24396 <dom-module id="task-filters" assetpath="/res/imp/tasklist/">
24397 <template>
24398 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positio ning query-column-filter-style">
24399
24400 </style>
24401
24402 <div class="container horizontal layout">
24403
24404
24405 <div class="narrow-down-selector">
24406 <div>
24407 <paper-input id="filter" label="Search columns and filters" placeholde r="gpu nvidia" value="{{_query}}">
24408 </paper-input>
24409 </div>
24410
24411 <div class="selector side-by-side" title="This shows all bot dimension n ames and other interesting bot properties. Mark the check box to add as a column . Select the row to see filter options.">
24412 <iron-selector attr-for-selected="label" selected="{{_primarySelected} }">
24413 <template is="dom-repeat" items="[[_primaryItems]]" as="item">
24414 <div class="selectable item horizontal layout" label="[[item]]">
24415
24416 <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(ite m,_query)]]</span>[[_afterBold(item,_query)]]</span>
24417 <span class="flex"></span>
24418 <paper-checkbox noink="" disabled$="[[_cantToggleColumn(item)]]" checked="[[_columnState(item,columns.*)]]" on-change="_toggleColumn">
24419 </paper-checkbox>
24420 </div>
24421 </template>
24422 </iron-selector>
24423 </div>
24424
24425 <div class="selector side-by-side" title="These are all options (if any) that the bot list can be filtered on.">
24426 <template is="dom-repeat" id="secondaryList" items="[[_secondaryItems] ]" as="item">
24427 <div class="item horizontal layout" label="[[item]]">
24428
24429 <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(item, _query)]]</span>[[_afterBold(item,_query)]]</span>
24430 <span class="flex"></span>
24431 <iron-icon class="icons" icon="icons:arrow-forward" hidden="[[_can tAddFilter(_primarySelected,item,_filters.*)]]" on-tap="_addFilter">
24432 </iron-icon>
24433 </div>
24434 </template>
24435 </div>
24436
24437 <div class="selector side-by-side" title="These filters are AND'd togeth er and applied to all bots in
24438 the fleet.">
24439 <template is="dom-repeat" items="[[_filters]]" as="fil">
24440 <div class="item horizontal layout" label="[[fil]]">
24441 <span>[[fil]]</span>
24442 <span class="flex"></span>
24443 <iron-icon class="icons" icon="icons:remove-circle-outline" hidden ="[[_cantRemoveFilter(fil,_filters.*)]]" on-tap="_removeFilter">
24444 </iron-icon>
24445 </div>
24446 </template>
24447 </div>
24448
24449 <div class="side-by-side">
24450 <paper-checkbox checked="{{verbose}}">Verbose Entries</paper-checkbox>
24451 <paper-input id="limit" label="Limit Results" auto-validate="" min="0" max="1000" pattern="[0-9]+" value="{{limit}}">
24452 </paper-input>
24453 </div>
24454 </div>
24455
24456 </div>
24457
24458 </template>
24308 <script> 24459 <script>
24309 (function(){ 24460 (function(){
24310 Polymer({ 24461 Polymer({
24311 is: 'task-filters', 24462 is: 'task-filters',
24312 24463
24464 behaviors: [SwarmingBehaviors.QueryColumnFilter],
24465
24313 properties: { 24466 properties: {
24467 // input
24468 primary_map: {
24469 type: Object,
24470 },
24471 primary_arr: {
24472 type: Array,
24473 },
24474
24314 // output 24475 // output
24315 columns: { 24476 columns: {
24316 type: Array, 24477 type: Array,
24317 value: function() { 24478 value: function() {
24318 return ["name", "state", "user"]; 24479 return ["name", "state", "user"];
24319 }, 24480 },
24320 notify: true, 24481 notify: true,
24321 }, 24482 },
24322 filter: { 24483 filter: {
24323 type: Function, 24484 type: Function,
24324 value: function() { 24485 value: function() {
24325 return function(){ 24486 return function(){
24326 return true; 24487 return true;
24327 }; 24488 };
24328 }, 24489 },
24329 notify: true, 24490 notify: true,
24330 }, 24491 },
24331 query_params: { 24492 query_params: {
24332 type: Object, 24493 type: Object,
24333 notify: true, 24494 notify: true,
24334 }, 24495 },
24335 verbose: { 24496 verbose: {
24336 type: Boolean, 24497 type: Boolean,
24337 value: true, 24498 value: true,
24338 notify: true, 24499 notify: true,
24339 }, 24500 },
24340 } 24501
24502 // private
24503 _filters: {
24504 type:Array,
24505 },
24506 _limit: {
24507 type: Number,
24508 },
24509 _primaryItems: {
24510 type: Array,
24511 computed: "_primary(_query, primary_map, primary_arr, columns.*)",
24512 },
24513 _primarySelected: {
24514 type: String,
24515 value: "",
24516 },
24517 // query is treated as a space separated list.
24518 _query: {
24519 type:String,
24520 },
24521 _secondaryItems: {
24522 type: Array,
24523 computed: "_secondary(_primarySelected, _query, primary_map)",
24524 },
24525 },
24526
24527
24528 _primary: function(query, primary_map, primary_arr) {
24529 // If the user has typed in a query, only show those primary keys that
24530 // partially match the query or that have secondary values which
24531 // partially match.
24532 var arr = this.primary_arr.filter(function(s){
24533 if (matchPartCaseInsensitive(s, query).idx !== -1) {
24534 return true;
24535 }
24536 var opts = primary_map[s];
24537 for (var i = 0; i < opts.length; i++) {
24538 if (matchPartCaseInsensitive(opts[i], query).idx !== -1) {
24539 return true;
24540 }
24541 }
24542 return false;
24543 });
24544 // Update the selected to be the current one (if it is still with being
24545 // shown) or the first match. This saves the user from having to click
24546 // the first result before seeing results.
24547 if (query && arr.length > 0 &&
24548 arr.indexOf(this._primarySelected) === -1) {
24549 this.set("_primarySelected", arr[0]);
24550 }
24551 return arr;
24552 },
24553
24554 _secondary: function(primarySelected, query, primary_map) {
24555 // Changing the secondary list doesn't always trigger a reorder of the
24556 // secondary elements. So, we request it be done asynchronously.
24557 requestAnimationFrame(function(){
24558 this.$.secondaryList.render();
24559 }.bind(this));
24560
24561 // Only show secondary options when a primary option has been selected.
24562 // If the user has typed in a query, show all secondary elements if
24563 // their primary element matches. If it doesn't match the primary
24564 // element, only show those secondary elements that do.
24565 if (!primarySelected) {
24566 return [];
24567 }
24568 if (matchPartCaseInsensitive(primarySelected, query).idx !== -1) {
24569 // Sort the secondaries alphabetically, but prioritize query matches.
24570 return primary_map[primarySelected].sort(function(a, b){
24571 var aMatch = matchPartCaseInsensitive(a, query).idx !== -1;
24572 var bMatch = matchPartCaseInsensitive(b, query).idx !== -1;
24573 if (aMatch === bMatch) {
24574 return swarming.naturalCompare(a,b);
24575 }
24576 // true == 1 and false == 0. So, put the one that matches first.
24577 return bMatch - aMatch;
24578 });
24579 }
24580 // Otherwise, filter out those that do not match.
24581 return primary_map[primarySelected].filter(function(s) {
24582 return matchPartCaseInsensitive(s, query).idx !== -1;
24583 });
24584 },
24585
24341 }); 24586 });
24342 })(); 24587 })();
24343 </script> 24588 </script>
24344 </dom-module><dom-module id="task-list-data" assetpath="/res/imp/tasklist/"> 24589 </dom-module><dom-module id="task-list-data" assetpath="/res/imp/tasklist/">
24345 <template> 24590 <template>
24346 <iron-ajax id="tasklist" url="/_ah/api/swarming/v1/tasks/list" headers="[[au th_headers]]" params="[[query_params]]" handle-as="json" last-response="{{_list} }" loading="{{_busy1}}"> 24591 <iron-ajax id="tasklist" url="/_ah/api/swarming/v1/tasks/list" headers="[[au th_headers]]" params="[[query_params]]" handle-as="json" last-response="{{_list} }" loading="{{_busy1}}">
24347 </iron-ajax> 24592 </iron-ajax>
24348 24593
24594 <iron-ajax id="tags" url="/_ah/api/swarming/v1/tasks/tags" headers="[[auth_h eaders]]" handle-as="json" last-response="{{_tags}}" loading="{{_busy2}}">
24595 </iron-ajax>
24349 24596
24350 </template> 24597 </template>
24351 <script> 24598 <script>
24352 (function(){ 24599 (function(){
24353 Polymer({ 24600 Polymer({
24354 is: 'task-list-data', 24601 is: 'task-list-data',
24355 24602
24356 behaviors: [SwarmingBehaviors.SwarmingBehavior], 24603 behaviors: [SwarmingBehaviors.SwarmingBehavior],
24357 24604
24358 properties: { 24605 properties: {
24359 // inputs 24606 // inputs
24360 auth_headers: { 24607 auth_headers: {
24361 type: Object, 24608 type: Object,
24362 observer: "signIn", 24609 observer: "signIn",
24363 }, 24610 },
24364 query_params: { 24611 query_params: {
24365 type: Object, 24612 type: Object,
24366 }, 24613 },
24367 24614
24368 //outputs 24615 // outputs
24369 busy: { 24616 busy: {
24370 type: Boolean, 24617 type: Boolean,
24371 computed: "_or(_busy1)", 24618 computed: "_or(_busy1,_busy2)",
24619 notify: true,
24620 },
24621 primary_map: {
24622 type: Object,
24623 computed: "_primaryMap(_tags)",
24624 notify: true,
24625 },
24626 primary_arr: {
24627 type: Array,
24628 computed: "_primaryArr(_tags)",
24372 notify: true, 24629 notify: true,
24373 }, 24630 },
24374 tasks: { 24631 tasks: {
24375 type: Array, 24632 type: Array,
24376 computed: "_tasks(_list)", 24633 computed: "_tasks(_list)",
24377 notify: true, 24634 notify: true,
24378 } 24635 }
24379 }, 24636 },
24637
24380 signIn: function(){ 24638 signIn: function(){
24381 // Auto on iron-ajax means to automatically re-make the request if 24639 // Auto on iron-ajax means to automatically re-make the request if
24382 // the url or the query params change. Auto does not trigger if the 24640 // the url or the query params change. Auto does not trigger if the
24383 // [auth] headers change, so we wait until the user is signed in 24641 // [auth] headers change, so we wait until the user is signed in
24384 // before making any requests. 24642 // before making any requests.
24385 this.$.tasklist.auto = true; 24643 this.$.tasklist.auto = true;
24644 this.$.tags.auto = true;
24645 },
24646
24647 _primaryArr: function(tags) {
24648 tags = tags.tasks_tags;
24649
24650 var arr = [];
24651 tags.forEach(function(t) {
24652 arr.push(t.key)
24653 });
24654
24655 arr.sort();
24656
24657 return arr;
24658 },
24659
24660 _primaryMap: function(tags) {
24661 tags = tags.tasks_tags;
24662
24663 var pMap = {};
24664 tags.forEach(function(t) {
24665 pMap[t.key] = t.value;
24666 });
24667
24668 return pMap;
24386 }, 24669 },
24387 24670
24388 _tasks: function() { 24671 _tasks: function() {
24389 if (!this._list || !this._list.items) { 24672 if (!this._list || !this._list.items) {
24390 return []; 24673 return [];
24391 } 24674 }
24392 // Do any preprocessing here 24675 // Do any preprocessing here
24393 return this._list.items; 24676 return this._list.items;
24394 } 24677 }
24395 }); 24678 });
(...skipping 11 matching lines...) Expand all
24407 </style> 24690 </style>
24408 24691
24409 <url-param name="sort" value="{{_sortstr}}" default_value="id:asc"> 24692 <url-param name="sort" value="{{_sortstr}}" default_value="id:asc">
24410 </url-param> 24693 </url-param>
24411 24694
24412 <swarming-app client_id="[[client_id]]" auth_headers="{{_auth_headers}}" sig ned_in="{{_signed_in}}" busy="[[_busy]]" name="Swarming Task List"> 24695 <swarming-app client_id="[[client_id]]" auth_headers="{{_auth_headers}}" sig ned_in="{{_signed_in}}" busy="[[_busy]]" name="Swarming Task List">
24413 24696
24414 <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2> 24697 <h2 hidden$="[[_signed_in]]">You must sign in to see anything useful.</h2>
24415 24698
24416 <div hidden$="[[_not(_signed_in)]]"> 24699 <div hidden$="[[_not(_signed_in)]]">
24417 <task-list-data auth_headers="[[_auth_headers]]" query_params="[[_query_ params]]" tasks="{{_items}}" busy="{{_busy}}"> 24700 <task-list-data auth_headers="[[_auth_headers]]" query_params="[[_query_ params]]" tasks="{{_items}}" busy="{{_busy}}" primary_map="{{_primary_map}}" pri mary_arr="{{_primary_arr}}">
24418 </task-list-data> 24701 </task-list-data>
24419 24702
24420 <div class="horizontal layout"> 24703 <div class="horizontal layout">
24421 24704
24422 <task-filters columns="{{_columns}}" query_params="{{_query_params}}" filter="{{_filter}}" verbose="{{_verbose}}"> 24705 <task-filters primary_map="[[_primary_map]]" primary_arr="[[_primary_a rr]]" columns="{{_columns}}" query_params="{{_query_params}}" filter="{{_filter} }" verbose="{{_verbose}}">
24423 </task-filters> 24706 </task-filters>
24424 24707
24425 </div> 24708 </div>
24426 24709
24427 <table class="task-list"> 24710 <table class="task-list">
24428 <thead on-sort_change="_sortChange"> 24711 <thead on-sort_change="_sortChange">
24429 24712
24430 <tr> 24713 <tr>
24431 <th> 24714 <th>
24432 <span>Task Name</span> 24715 <span>Task Name</span>
(...skipping 100 matching lines...) Expand 10 before | Expand all | Expand 10 after
24533 24816
24534 _taskClass: function(task) { 24817 _taskClass: function(task) {
24535 // TODO(kjlubick): Color tasks? 24818 // TODO(kjlubick): Color tasks?
24536 return ""; 24819 return "";
24537 } 24820 }
24538 24821
24539 }); 24822 });
24540 })(); 24823 })();
24541 </script> 24824 </script>
24542 </dom-module></div></body></html> 24825 </dom-module></div></body></html>
OLDNEW
« no previous file with comments | « appengine/swarming/elements/Makefile ('k') | appengine/swarming/elements/res/imp/botlist/bot-filters.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698