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

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

Issue 2289723003: Make times easier to read on task list (Closed) Base URL: https://chromium.googlesource.com/external/github.com/luci/luci-py@master
Patch Set: Typo Created 4 years, 3 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 | « no previous file | appengine/swarming/elements/res/imp/tasklist/task-filters.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><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 23874 matching lines...) Expand 10 before | Expand all | Expand 10 after
23885 23885
23886 @event transitionend 23886 @event transitionend
23887 Event param: {{node: Object}} detail Contains the animated node. 23887 Event param: {{node: Object}} detail Contains the animated node.
23888 */ 23888 */
23889 }); 23889 });
23890 </script> 23890 </script>
23891 </dom-module> 23891 </dom-module>
23892 <dom-module id="task-filters" assetpath="/res/imp/tasklist/"> 23892 <dom-module id="task-filters" assetpath="/res/imp/tasklist/">
23893 <template> 23893 <template>
23894 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positio ning query-column-filter-style"> 23894 <style is="custom-style" include="iron-flex iron-flex-alignment iron-positio ning query-column-filter-style">
23895 .item.wide {
23896 max-width: 400px;
23897 }
23898 .selector.wide {
23899 min-width: 275px;
23900 }
23895 23901
23896 </style> 23902 </style>
23897 23903
23898 <url-param name="filters" value="{{_filters}}" default_values="[]" multi=""> 23904 <url-param name="filters" value="{{_filters}}" default_values="[]" multi="">
23899 </url-param> 23905 </url-param>
23900 <url-param name="columns" value="{{columns}}" default_values="[&quot;name&qu ot;,&quot;state&quot;,&quot;created_ts&quot;,&quot;user&quot;]" multi=""> 23906 <url-param name="columns" value="{{columns}}" default_values="[&quot;name&qu ot;,&quot;state&quot;,&quot;created_ts&quot;,&quot;user&quot;]" multi="">
23901 </url-param> 23907 </url-param>
23902 <url-param name="query" value="{{_query}}" default_value=""> 23908 <url-param name="query" value="{{_query}}" default_value="">
23903 </url-param> 23909 </url-param>
23904 <url-param name="limit" default_value="200" value="{{limit}}"> 23910 <url-param name="limit" default_value="200" value="{{limit}}">
23905 </url-param> 23911 </url-param>
23906 23912
23907 <div class="container horizontal layout"> 23913 <div class="container horizontal layout">
23908 23914
23909 23915
23910 <div class="narrow-down-selector"> 23916 <div class="narrow-down-selector">
23911 <div> 23917 <div>
23912 <paper-input id="filter" label="Search columns and filters" placeholde r="gpu nvidia" value="{{_query}}"> 23918 <paper-input id="filter" label="Search columns and filters" placeholde r="gpu nvidia" value="{{_query}}">
23913 </paper-input> 23919 </paper-input>
23914 </div> 23920 </div>
23915 23921
23916 <div class="selector side-by-side" title="This shows all task tags and o ther interesting task properties. Mark the check box to add as a column. Select the row to see filter options."> 23922 <div class="wide selector side-by-side" title="This shows all task tags and other interesting task properties. Mark the check box to add as a column. Se lect the row to see filter options.">
23917 <iron-selector attr-for-selected="label" selected="{{_primarySelected} }"> 23923 <iron-selector attr-for-selected="label" selected="{{_primarySelected} }">
23918 <template is="dom-repeat" items="[[_primaryItems]]" as="item"> 23924 <template is="dom-repeat" items="[[_primaryItems]]" as="item">
23919 <div class="selectable item horizontal layout" label="[[item]]"> 23925 <div class="selectable item horizontal layout" label="[[item]]">
23920 23926
23921 <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(ite m,_query)]]</span>[[_afterBold(item,_query)]]</span> 23927 <span>[[_beforeBold(item,_query)]]<span class="bold">[[_bold(ite m,_query)]]</span>[[_afterBold(item,_query)]]</span>
23922 <span class="flex"></span> 23928 <span class="flex"></span>
23923 <paper-checkbox noink="" disabled$="[[_cantToggleColumn(item)]]" checked="[[_columnState(item,columns.*)]]" on-change="_toggleColumn"> 23929 <paper-checkbox noink="" disabled$="[[_cantToggleColumn(item)]]" checked="[[_columnState(item,columns.*)]]" on-change="_toggleColumn">
23924 </paper-checkbox> 23930 </paper-checkbox>
23925 </div> 23931 </div>
23926 </template> 23932 </template>
(...skipping 119 matching lines...) Expand 10 before | Expand all | Expand 10 after
24046 } 24052 }
24047 } 24053 }
24048 return params; 24054 return params;
24049 } 24055 }
24050 }); 24056 });
24051 })(); 24057 })();
24052 </script> 24058 </script>
24053 </dom-module><dom-module id="task-list-data" assetpath="/res/imp/tasklist/"> 24059 </dom-module><dom-module id="task-list-data" assetpath="/res/imp/tasklist/">
24054 <script> 24060 <script>
24055 (function(){ 24061 (function(){
24062 var TIMES = ["abandoned_ts", "completed_ts", "created_ts", "modified_ts", "s tarted_ts"];
24056 Polymer({ 24063 Polymer({
24057 is: 'task-list-data', 24064 is: 'task-list-data',
24058 24065
24059 behaviors: [ 24066 behaviors: [
24060 SwarmingBehaviors.CommonBehavior, 24067 SwarmingBehaviors.CommonBehavior,
24061 ], 24068 ],
24062 24069
24063 properties: { 24070 properties: {
24064 // inputs 24071 // inputs
24065 auth_headers: { 24072 auth_headers: {
(...skipping 144 matching lines...) Expand 10 before | Expand all | Expand 10 after
24210 pMap["android_devices"].push("0"); 24217 pMap["android_devices"].push("0");
24211 pMap["device_os"].push("none"); 24218 pMap["device_os"].push("none");
24212 pMap["device_type"].push("none"); 24219 pMap["device_type"].push("none");
24213 pMap["user"].push("none"); 24220 pMap["user"].push("none");
24214 24221
24215 // Custom filter options 24222 // Custom filter options
24216 pMap["name"] = []; 24223 pMap["name"] = [];
24217 pMap["state"] = ["PENDING", "RUNNING", "PENDING_RUNNING", "COMPLETED", 24224 pMap["state"] = ["PENDING", "RUNNING", "PENDING_RUNNING", "COMPLETED",
24218 "COMPLETED_SUCCESS","COMPLETED_FAILURE", "EXPIRED", "TIMED_OUT", 24225 "COMPLETED_SUCCESS","COMPLETED_FAILURE", "EXPIRED", "TIMED_OUT",
24219 "BOT_DIED", "CANCELED", "ALL", "DEDUPED"]; 24226 "BOT_DIED", "CANCELED", "ALL", "DEDUPED"];
24220 pMap["abandoned_ts"] = [];
24221 pMap["completed_ts"] = [];
24222 pMap["costs_usd"] = []; 24227 pMap["costs_usd"] = [];
24223 pMap["created_ts"] = [];
24224 pMap["deduped_from"] = []; 24228 pMap["deduped_from"] = [];
24225 pMap["duration"] = []; 24229 pMap["duration"] = [];
24226 pMap["modified_ts"] = [];
24227 pMap["server_versions"] = []; 24230 pMap["server_versions"] = [];
24228 pMap["started_ts"] = []; 24231 TIMES.forEach(function(t) {
24232 pMap[t] = [];
24233 });
24229 24234
24230 return pMap; 24235 return pMap;
24231 }, 24236 },
24232 24237
24233 _request: function() { 24238 _request: function() {
24234 // wait until the user has logged in and the filters have loaded before requesting this to avoid double or even triple requests. 24239 // wait until the user has logged in and the filters have loaded before requesting this to avoid double or even triple requests.
24235 if (!this.auth_headers || !this.query_params) { 24240 if (!this.auth_headers || !this.query_params) {
24236 return; 24241 return;
24237 } 24242 }
24238 this._getJsonAsync("_list", "/_ah/api/swarming/v1/tasks/list", 24243 this._getJsonAsync("_list", "/_ah/api/swarming/v1/tasks/list",
24239 "_busy1", this.auth_headers, this.query_params); 24244 "_busy1", this.auth_headers, this.query_params);
24240 }, 24245 },
24241 24246
24242 _tasks: function() { 24247 _tasks: function() {
24243 if (!this._list || !this._list.items) { 24248 if (!this._list || !this._list.items) {
24244 return []; 24249 return [];
24245 } 24250 }
24251 // Date.toString() looks like "Mon Aug 29 2016 09:03:41 GMT-0400 (EDT)"
24252 // we want to extract the time zone part and append it to the
24253 // locale time.
24254 var str = (new Date()).toString();
24255 var timeZone = str.substring(str.indexOf("("))
24256
24246 // Do any preprocessing here 24257 // Do any preprocessing here
24247 this._list.items.forEach(function(t) { 24258 this._list.items.forEach(function(t) {
24248 var tagMap = {}; 24259 var tagMap = {};
24249 t.tags.forEach(function(tag) { 24260 t.tags.forEach(function(tag) {
24250 var split = tag.split(":", 1) 24261 var split = tag.split(":", 1)
24251 var key = split[0]; 24262 var key = split[0];
24252 var rest = tag.substring(key.length + 1); 24263 var rest = tag.substring(key.length + 1);
24253 tagMap[key] = rest; 24264 tagMap[key] = rest;
24254 }); 24265 });
24255 t.tagMap = tagMap; 24266 t.tagMap = tagMap;
24267 TIMES.forEach(function(time) {
24268 if (t[time]) {
24269 var d = new Date(t[time]);
24270 var locale = d.toLocaleString();
24271 t["human_"+time] = locale + " " + timeZone;
24272 }
24273 });
24256 }); 24274 });
24257 return this._list.items; 24275 return this._list.items;
24258 } 24276 }
24259 }); 24277 });
24260 })(); 24278 })();
24261 </script> 24279 </script>
24262 </dom-module> 24280 </dom-module>
24263 <dom-module id="task-list" assetpath="/res/imp/tasklist/"> 24281 <dom-module id="task-list" assetpath="/res/imp/tasklist/">
24264 <template> 24282 <template>
24265 <style include="iron-flex iron-flex-alignment iron-positioning swarming-app- style dynamic-table-style"> 24283 <style include="iron-flex iron-flex-alignment iron-positioning swarming-app- style dynamic-table-style">
(...skipping 104 matching lines...) Expand 10 before | Expand all | Expand 10 after
24370 </tbody> 24388 </tbody>
24371 </table> 24389 </table>
24372 </div> 24390 </div>
24373 24391
24374 </swarming-app> 24392 </swarming-app>
24375 24393
24376 </template> 24394 </template>
24377 <script> 24395 <script>
24378 (function(){ 24396 (function(){
24379 var specialColumns = ["deduped_from", "name", "state"]; 24397 var specialColumns = ["deduped_from", "name", "state"];
24398
24399 function humanTime(attr) {
24400 return function(task) {
24401 return this._attribute(task, "human_" + attr)[0];
24402 }
24403 }
24380 var columnMap = { 24404 var columnMap = {
24405 abandoned_ts: humanTime("abandoned_ts"),
24406 completed_ts: humanTime("completed_ts"),
24381 costs_usd: function(task) { 24407 costs_usd: function(task) {
24382 return this._attribute(task, "costs_usd", 0)[0]; 24408 return this._attribute(task, "costs_usd", 0)[0];
24383 }, 24409 },
24410 created_ts: humanTime("created_ts"),
24411 modified_ts: humanTime("modified_ts"),
24412 started_ts: humanTime("started_ts"),
24384 state: function(task) { 24413 state: function(task) {
24385 var state = this._attribute(task, "state")[0]; 24414 var state = this._attribute(task, "state")[0];
24386 if (state === "COMPLETED") { 24415 if (state === "COMPLETED") {
24387 24416
24388 if (this._attribute(task, "failure", false)[0]) { 24417 if (this._attribute(task, "failure", false)[0]) {
24389 return "COMPLETED (FAILURE)"; 24418 return "COMPLETED (FAILURE)";
24390 } 24419 }
24391 var tryNum = this._attribute(task, "try_number", "-1")[0]; 24420 var tryNum = this._attribute(task, "try_number", "-1")[0];
24392 if (tryNum === "0") { 24421 if (tryNum === "0") {
24393 return "COMPLETED (DEDUPED)"; 24422 return "COMPLETED (DEDUPED)";
24394 } 24423 }
24395 return "COMPLETED (SUCCESS)"; 24424 return "COMPLETED (SUCCESS)";
24396 } 24425 }
24397 return state; 24426 return state;
24398 }, 24427 },
24399 }; 24428 };
24400 var headerMap = { 24429 var headerMap = {
24401 "user": "Requesting User", 24430 "user": "Requesting User",
24402 }; 24431 };
24403 var specialSort = {}; 24432
24433 function sortableTime(attr) {
24434 // sort times based on the string they come with, formatted like
24435 // "2016-08-16T13:12:40.606300" which sorts correctly. Locale time
24436 // (used in the columns), does not.
24437 return function(dir, a, b) {
24438 var aCol = this._attribute(a, attr)[0];
24439 var bCol = this._attribute(b, attr)[0];
24440
24441 return dir * swarming.naturalCompare(aCol, bCol);
24442 }
24443 }
24444 var specialSort = {
24445 abandoned_ts: sortableTime("abandoned_ts"),
24446 completed_ts: sortableTime("completed_ts"),
24447 created_ts: sortableTime("created_ts"),
24448 modified_ts: sortableTime("modified_ts"),
24449 started_ts: sortableTime("started_ts"),
24450 };
24404 24451
24405 Polymer({ 24452 Polymer({
24406 is: 'task-list', 24453 is: 'task-list',
24407 behaviors: [ 24454 behaviors: [
24408 SwarmingBehaviors.DynamicTableBehavior, 24455 SwarmingBehaviors.DynamicTableBehavior,
24409 ], 24456 ],
24410 24457
24411 properties: { 24458 properties: {
24412 client_id: { 24459 client_id: {
24413 type: String, 24460 type: String,
(...skipping 98 matching lines...) Expand 10 before | Expand all | Expand 10 after
24512 if (state === "RUNNING" || state === "PENDING") { 24559 if (state === "RUNNING" || state === "PENDING") {
24513 return "pending"; 24560 return "pending";
24514 } 24561 }
24515 return ""; 24562 return "";
24516 } 24563 }
24517 24564
24518 }); 24565 });
24519 })(); 24566 })();
24520 </script> 24567 </script>
24521 </dom-module></div></body></html> 24568 </dom-module></div></body></html>
OLDNEW
« no previous file with comments | « no previous file | appengine/swarming/elements/res/imp/tasklist/task-filters.html » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698