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>
