feat(ui): add status remapping to status component to match the real …

…name of the CSS vars
kestra-io · Jan 8, 2025 · a8be084 · a8be084
1 parent 1476064
commit a8be084
Showing 1 changed file with 9 additions and 3 deletions.
diff --git a/ui/src/components/Status.vue b/ui/src/components/Status.vue
@@ -9,6 +9,11 @@
 <script>
     import State from "../utils/state";
 
+    const StatusRemap = {
+        "failed": "error",
+        "warn": "warning"
+    }
+
     export default {
         props: {
             status: {
@@ -32,10 +37,11 @@
         emits: ["click"],
         computed: {
             style() {
+                const statusVarname = (StatusRemap[this.status.toLowerCase()] ?? this.status)?.toLowerCase()
                 return {
-                    color: `var(--ks-content-${this.status?.toLowerCase()}) !important`,
-                    "border-color": `var(--ks-border-${this.status?.toLowerCase()}) !important`,
-                    "background-color": `var(--ks-background-${this.status?.toLowerCase()}) !important`
+                    color: `var(--ks-content-${statusVarname}) !important`,
+                    "border-color": `var(--ks-border-${statusVarname}) !important`,
+                    "background-color": `var(--ks-background-${statusVarname}) !important`
                 };
             },
             icon() {