UI: Always show the tasks summary If there are no tasks, show 'No tasks' as the summary. Also, show chips for invalid, waiting, duplicate and successful tasks. Screenshots: https://imgur.com/a/kXgOiUY Change-Id: I383291e3aae3cb69dc6d863d1c35871c19044d6b
diff --git a/gr-task-plugin/gr-task-chip_html.js b/gr-task-plugin/gr-task-chip_html.js index af7338f..68e1d0c 100644 --- a/gr-task-plugin/gr-task-chip_html.js +++ b/gr-task-plugin/gr-task-chip_html.js
@@ -35,6 +35,28 @@ position: relative; top: 2px; } + .taskSummaryChip.success { + border-color: var(--success-foreground); + background: var(--success-background); + } + .taskSummaryChip.success:hover { + background: var(--success-background-hover); + box-shadow: var(--elevation-level-1); + } + .taskSummaryChip.success:focus-within { + background: var(--success-background-focus); + } + .taskSummaryChip.waiting { + border-color: var(--warning-foreground); + background: var(--warning-background); + } + .taskSummaryChip.waiting:hover { + background: var(--warning-background-hover); + box-shadow: var(--elevation-level-1); + } + .taskSummaryChip.waiting:focus-within { + background: var(--warning-background-focus); + } .taskSummaryChip.ready { border-color: var(--warning-foreground); background: var(--warning-background); @@ -46,6 +68,30 @@ .taskSummaryChip.ready:focus-within { background: var(--warning-background-focus); } + .taskSummaryChip.invalid { + color: var(--error-foreground); + border-color: var(--error-foreground); + background: var(--error-background); + } + .taskSummaryChip.invalid:hover { + background: var(--error-background-hover); + box-shadow: var(--elevation-level-1); + } + .taskSummaryChip.invalid:focus-within { + background: var(--error-background-focus); + } + .taskSummaryChip.duplicate { + color: var(--error-foreground); + border-color: var(--error-foreground); + background: var(--error-background); + } + .taskSummaryChip.duplicate:hover { + background: var(--error-background-hover); + box-shadow: var(--elevation-level-1); + } + .taskSummaryChip.duplicate:focus-within { + background: var(--error-background-focus); + } .taskSummaryChip.fail { color: var(--error-foreground); border-color: var(--error-foreground);
diff --git a/gr-task-plugin/gr-task-plugin.js b/gr-task-plugin/gr-task-plugin.js index deec593..52b0a9b 100644 --- a/gr-task-plugin/gr-task-plugin.js +++ b/gr-task-plugin/gr-task-plugin.js
@@ -82,7 +82,26 @@ notify: true, value: 0, }, - + _invalid_count: { + type: Number, + notify: true, + value: 0, + }, + _waiting_count: { + type: Number, + notify: true, + value: 0, + }, + _duplicate_count: { + type: Number, + notify: true, + value: 0, + }, + _pass_count: { + type: Number, + notify: true, + value: 0, + }, _isPending: { type: Boolean, value: true, @@ -127,6 +146,10 @@ detail: { ready_count: this._ready_count, fail_count: this._fail_count, + invalid_count: this._invalid_count, + waiting_count: this._waiting_count, + duplicate_count: this._duplicate_count, + pass_count: this._pass_count, }, composed: true, bubbles: true, })); @@ -200,6 +223,18 @@ case 'READY': this._ready_count++; break; + case 'INVALID': + this._invalid_count++; + break; + case 'WAITING': + this._waiting_count++; + break; + case 'DUPLICATE': + this._duplicate_count++; + break; + case 'PASS': + this._pass_count++; + break; } }
diff --git a/gr-task-plugin/gr-task-summary.js b/gr-task-plugin/gr-task-summary.js index 6e54268..1e23ebe 100644 --- a/gr-task-plugin/gr-task-summary.js +++ b/gr-task-plugin/gr-task-summary.js
@@ -40,6 +40,30 @@ notify: true, value: 0, }, + + invalid_count: { + type: Number, + notify: true, + value: 0, + }, + + waiting_count: { + type: Number, + notify: true, + value: 0, + }, + + duplicate_count: { + type: Number, + notify: true, + value: 0, + }, + + pass_count: { + type: Number, + notify: true, + value: 0, + }, }; } @@ -49,11 +73,17 @@ document.addEventListener('tasks-loaded', e => { this.ready_count = e.detail.ready_count; this.fail_count = e.detail.fail_count; + this.invalid_count = e.detail.invalid_count; + this.waiting_count = e.detail.waiting_count; + this.duplicate_count = e.detail.duplicate_count; + this.pass_count = e.detail.pass_count; }); } - _can_show(ready_count, fail_count) { - return ready_count || fail_count; + _can_show_chips(ready_count, fail_count, invalid_count, + waiting_count, duplicate_count, pass_count) { + return ready_count || fail_count || invalid_count || + waiting_count || duplicate_count || pass_count; } }
diff --git a/gr-task-plugin/gr-task-summary_html.js b/gr-task-plugin/gr-task-summary_html.js index 1b47201..2e567c3 100644 --- a/gr-task-plugin/gr-task-summary_html.js +++ b/gr-task-plugin/gr-task-summary_html.js
@@ -66,13 +66,22 @@ margin-left: var(--spacing-m); } </style> - <div class="task_summary" hidden$="[[!_can_show(ready_count, fail_count)]]"> + <div class="task_summary"> <table> <tr> <td class="key">Tasks</td> <td class="value"> - <gr-task-chip chip_style="fail" hidden$="[[!fail_count]]">[[fail_count]] blocked</gr-task-chip> - <gr-task-chip chip_style="ready" hidden$="[[!ready_count]]">[[ready_count]] needed</gr-task-chip> + <template is="dom-if" if="[[_can_show_chips(ready_count, fail_count, invalid_count, waiting_count, duplicate_count, pass_count)]]"> + <gr-task-chip chip_style="fail" hidden$="[[!fail_count]]">[[fail_count]] blocked</gr-task-chip> + <gr-task-chip chip_style="invalid" hidden$="[[!invalid_count]]">[[invalid_count]] invalid</gr-task-chip> + <gr-task-chip chip_style="duplicate" hidden$="[[!duplicate_count]]">[[duplicate_count]] duplicate</gr-task-chip> + <gr-task-chip chip_style="ready" hidden$="[[!ready_count]]">[[ready_count]] ready</gr-task-chip> + <gr-task-chip chip_style="waiting" hidden$="[[!waiting_count]]">[[waiting_count]] waiting</gr-task-chip> + <gr-task-chip chip_style="success" hidden$="[[!pass_count]]">[[pass_count]] passed</gr-task-chip> + </template> + <template is="dom-if" if="[[!_can_show_chips(ready_count, fail_count, invalid_count, waiting_count, duplicate_count, pass_count)]]"> + <td>No tasks</td> + </template> </td> </tr> </table>