blender/flamenco
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Add stauts indicator to Tasks table

Browse Source
This commit is contained in:
Pablo Vazquez 2022-05-04 19:28:39 +02:00
parent 56089bba99
commit 8488d792bf
2 changed files with 21 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
web/app/src/assets/base.css
View File

@ -38,16 +38,17 @@
--transition-speed-fast: 60ms;
--color-status-active: hsl(0 50% 50%);
--color-status-canceled: hsl(0 50% 50%);
--color-status-completed: hsl(0 50% 50%);
--color-status-construction-failed: hsl(0 50% 50%);
--color-status-failed: hsl(0 50% 50%);
--color-status-paused: hsl(0 50% 50%);
--color-status-queued: hsl(0 50% 50%);
--color-status-archived: hsl(0 50% 50%);
--color-status-archiving: hsl(0 50% 50%);
--color-status-cancel-requested: hsl(0 50% 50%);
--color-status-canceled: hsl(0 50% 50%);
--color-status-completed: hsl(0 50% 50%);
--color-status-construction-failed: hsl(0 50% 50%);
--color-status-fail-requested: hsl(0 50% 50%);
--color-status-failed: hsl(0 50% 50%);
--color-status-soft-failed: hsl(0 50% 50%);
--color-status-paused: hsl(0 50% 50%);
--color-status-queued: hsl(0 50% 50%);
--color-status-requeued: hsl(0 50% 50%);
--color-status-under-construction: hsl(0 50% 50%);
--color-status-waiting-for-files: hsl(0 50% 50%);
@ -275,11 +276,11 @@ footer {
.indicator {
background-color: var(--color-background);
border: var(--border-width) solid var(--color-background-column);
box-shadow: 0 0 3px black;
border-radius: 50%;
display: block;
height: 10px;
width: 10px;
height: 12px;
width: 12px;
}
.status-active {
@ -297,6 +298,9 @@ footer {
.status-failed {
background-color: hsl(0 50% 50%);
}
.status-soft-failed {
background-color: hsl(0 50% 50%);
}
.status-paused {
background-color: hsl(0 50% 50%);
}

9
web/app/src/components/TasksTable.vue
View File

@ -27,8 +27,15 @@ export default {
// See pkg/api/flamenco-manager.yaml, schemas Task and TaskUpdate.
columns: [
{ formatter: "rowSelection", titleFormatter: "rowSelection", hozAlign: "center", headerHozAlign: "center", headerSort: false },
{
title: 'Status', field: 'status', sorter: 'string',
formatter(cell, formatterParams) { // eslint-disable-line no-unused-vars
const cellValue = cell.getData();
console.log(cellValue);
return '<span title="' + cellValue.status + '" class="indicator status-' + cellValue.status + '"></span>';
}
},
{ title: 'Name', field: 'name', sorter: 'string' },
{ title: 'Status', field: 'status', sorter: 'string' },
{
title: 'Updated', field: 'updated',
sorter: 'alphanum', sorterParams: { alignEmptyValues: "top" },