Feature color cylc message bubbles

src/components/cylc/MessageChip.vue

@@ -42,11 +42,11 @@ const props = defineProps({
 })
 
 const classMap = new Map([
-  ['this is a debug message', ''],
-  ['this is a info message', 'bg-grey'],
-  ['this is a warning message', 'bg-warning'],
-  ['this is an error message', 'bg-error'],
-  ['this is a critical message', 'bg-black font-weight-bold'],
+  ['DEBUG', ''],
+  ['INFO', 'bg-grey'],
+  ['WARNING', 'bg-warning'],
+  ['ERROR', 'bg-error'],
+  ['CRITICAL', 'bg-black font-weight-bold'],
 ])
 
 const chipClass = computed(() => (

src/components/cylc/tree/TreeItem.vue

@@ -118,7 +118,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
             <MessageChip
               v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
               :key="`output-chip-${index}`"
-              :level="customOutput.label"
+              :level="customOutput.level"
               :message="customOutput.message"
               :isMessage="customOutput.isMessage"
               location="bottom">

src/utils/tasks.js

@@ -71,7 +71,8 @@ function jobMessageOutputs (jobNode) {
   const ret = []
   let messageOutput
 
-  for (const message of jobNode.node.messages || []) {
+  for (const messageString of jobNode.node.messages || []) {
+    const [level, message] = messageString.split(':')
     if (TASK_OUTPUT_NAMES.includes(message)) {
       continue
     }
@@ -88,6 +89,7 @@ function jobMessageOutputs (jobNode) {
     } else {
       // add a message to the list and make it look like an output
       ret.push({
+        level,
         label: message,
         message: `Task Message: ${message}`,
         isMessage: true