From aa1dd2f55536a6437528b0e044029f218459b113 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.ukpython>
Date: Fri, 11 Aug 2023 16:19:53 +0100
Subject: [PATCH 1/8] added new component for Message Chips

---
 src/components/cylc/MessageChip.vue   | 57 +++++++++++++++++++++++++++
 src/components/cylc/tree/TreeItem.vue | 25 +++++-------
 2 files changed, 66 insertions(+), 16 deletions(-)
 create mode 100644 src/components/cylc/MessageChip.vue

diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
new file mode 100644
index 000000000..d6a69cc1b
--- /dev/null
+++ b/src/components/cylc/MessageChip.vue
@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <v-tooltip>
+      <template v-slot:activator="{ props }">
+        <v-chip
+          v-bind="props"
+          :class="`bg-${getStyle.bg} text-${getStyle.text} font-weight-${getStyle.weight}`"
+          class="ml-2 message-output"
+          size="small"
+        >
+          {{ level }}
+        </v-chip>
+      </template>
+      <span>{{ message }}</span>
+    </v-tooltip>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MessageChip',
+  props: {
+    level: {
+      type: String,
+      required: true
+    },
+    message: {
+      type: String,
+      required: true
+    },
+    isMessage: {
+      type: String,
+      required: true
+    }
+  },
+  computed: {
+    getStyle () {
+      if (this.level === 'this is a debug message') {
+        return { bg: 'blue', text: 'white', weight: 'normal' }
+      }
+      if (this.level === 'this is a info message') {
+        return { bg: 'grey', text: 'white', weight: 'normal' }
+      }
+      if (this.level === 'this is a warning message') {
+        return { bg: 'yellow', text: 'black', weight: 'normal' }
+      }
+      if (this.level === 'this is an error message') {
+        return { bg: 'red', text: 'white', weight: 'normal' }
+      }
+      if (this.level === 'this is a critical message') {
+        return { bg: 'red lighten-2', text: 'black', weight: 'bold' }
+      } else { return { bg: 'grey', text: 'black', weight: 'normal' } }
+    }
+  }
+}
+
+</script>
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index b39fd9ca2..705a8296e 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -115,23 +115,14 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               prefix).
               @see https://github.com/cylc/cylc-ui/pull/530#issuecomment-781076619
             -->
-            <v-tooltip
+            <MessageChip
               v-for="(customOutput, index) of [...jobMessageOutputs].slice(0, 5)"
               :key="`output-chip-${index}`"
-              location="bottom"
-            >
-              <template v-slot:activator="{ props }">
-                <v-chip
-                  v-bind="props"
-                  :class="customOutput.isMessage ? 'bg-light-grey text-black' : 'bg-grey text-white'"
-                  class="ml-2 message-output"
-                  size="small"
-                >
-                  {{ customOutput.label }}
-                </v-chip>
-              </template>
-              <span>{{ customOutput.message }}</span>
-            </v-tooltip>
+              :level="customOutput.label"
+              :message="customOutput.message"
+              :isMessage="customOutput.isMessage"
+              location="bottom">
+            </MessageChip>
             <v-chip
               v-if="jobMessageOutputs.length > 5"
               class="ml-2 bg-grey text-white"
@@ -229,6 +220,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
 import { mdiChevronRight } from '@mdi/js'
 import Task from '@/components/cylc/Task.vue'
 import Job from '@/components/cylc/Job.vue'
+import MessageChip from '@/components/cylc/MessageChip.vue'
 import { WorkflowState } from '@/model/WorkflowState.model'
 import {
   formatDuration,
@@ -261,7 +253,8 @@ export default {
 
   components: {
     Task,
-    Job
+    Job,
+    MessageChip
   },
 
   props: {

From 50547fb2ddfe5684dbefc51d414df4fa2072ae4d Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.ukpython>
Date: Tue, 15 Aug 2023 14:15:04 +0100
Subject: [PATCH 2/8] refactored MessageChip component and added tests

---
 cypress/component/viewMessageChip.cy.js | 48 +++++++++++++++++++++
 src/components/cylc/MessageChip.vue     | 57 +++++++++----------------
 src/components/cylc/tree/TreeItem.vue   |  1 +
 tests/e2e/specs/tree.cy.js              | 11 +++--
 4 files changed, 74 insertions(+), 43 deletions(-)
 create mode 100644 cypress/component/viewMessageChip.cy.js

diff --git a/cypress/component/viewMessageChip.cy.js b/cypress/component/viewMessageChip.cy.js
new file mode 100644
index 000000000..7910f598f
--- /dev/null
+++ b/cypress/component/viewMessageChip.cy.js
@@ -0,0 +1,48 @@
+/**
+ * Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import MessageChip from '@/components/cylc/MessageChip.vue'
+
+describe('View MessageChip Component', () => {
+  const mountMessageChip = (props) => {
+    cy.vmount(
+      MessageChip,
+      {
+        props
+      }
+    ).as('wrapper')
+    // add the classes Vuetify requires
+    cy.addVuetifyStyles(cy)
+  }
+
+  it('checks messageChip colors', () => {
+    // mount the toolbar with a couple of controls
+    mountMessageChip(
+      {
+        level: 'this is a debug message',
+        message: 'Task Message :this is a debug message',
+        isMessage: true
+      }
+    )
+
+    // are the messages the correct colours?
+    cy
+      .get('.v-chip')
+      .should('have.class', 'bg-blue')
+      .contains('this is a debug message')
+  })
+})
diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
index d6a69cc1b..6c1bfaa38 100644
--- a/src/components/cylc/MessageChip.vue
+++ b/src/components/cylc/MessageChip.vue
@@ -16,42 +16,25 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'MessageChip',
-  props: {
-    level: {
-      type: String,
-      required: true
-    },
-    message: {
-      type: String,
-      required: true
-    },
-    isMessage: {
-      type: String,
-      required: true
-    }
-  },
-  computed: {
-    getStyle () {
-      if (this.level === 'this is a debug message') {
-        return { bg: 'blue', text: 'white', weight: 'normal' }
-      }
-      if (this.level === 'this is a info message') {
-        return { bg: 'grey', text: 'white', weight: 'normal' }
-      }
-      if (this.level === 'this is a warning message') {
-        return { bg: 'yellow', text: 'black', weight: 'normal' }
-      }
-      if (this.level === 'this is an error message') {
-        return { bg: 'red', text: 'white', weight: 'normal' }
-      }
-      if (this.level === 'this is a critical message') {
-        return { bg: 'red lighten-2', text: 'black', weight: 'bold' }
-      } else { return { bg: 'grey', text: 'black', weight: 'normal' } }
-    }
-  }
-}
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+  level: String,
+  message: String,
+  isMessage: Boolean
+})
+
+const styles = new Map([
+  ['this is a debug message', { bg: 'blue', text: 'white', weight: 'normal' }],
+  ['this is a info message', { bg: 'grey', text: 'white', weight: 'normal' }],
+  ['this is a warning message', { bg: 'yellow', text: 'black', weight: 'normal' }],
+  ['this is an error message', { bg: 'red', text: 'white', weight: 'normal' }],
+  ['this is a critical message', { bg: 'red lighten-2', text: 'black', weight: 'bold' }],
+])
+
+const getStyle = computed(() => {
+  return styles.get(props.level) || { bg: 'grey  lighten-2', text: 'white', weight: 'normal' }
+})
 
 </script>
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index 705a8296e..b5c6162c7 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/src/components/cylc/tree/TreeItem.vue
@@ -129,6 +129,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
               size="small"
               link
               @click="toggleExpandCollapse"
+              data-cy="chip-overflow"
             >
               +{{ jobMessageOutputs.length - 5 }}
             </v-chip>
diff --git a/tests/e2e/specs/tree.cy.js b/tests/e2e/specs/tree.cy.js
index 9a26b058a..8ad43aef1 100644
--- a/tests/e2e/specs/tree.cy.js
+++ b/tests/e2e/specs/tree.cy.js
@@ -163,17 +163,16 @@ describe('Tree view', () => {
       .should('be.visible')
 
       // the first job should have 5 outputs (the maximum number we display)
-      .first()
+      .first().as('firstJobNode')
       .find('.message-output')
       .should('have.length', 5)
 
       // the remainder should be referenced in an overflow counter +2
-      .parent()
+      .get('@firstJobNode')
+      .find('[data-cy=chip-overflow]')
       .contains('+2')
-      .parent()
-      .parent()
-      .parent()
-      .parent()
+      .parents('.treeitem')
+      .first()
 
       // expand the job details node
       .find('.node-expand-collapse-button')

From fa55091941ee59e634c7a0897cdbe340291f6ce2 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.ukpython>
Date: Tue, 15 Aug 2023 15:46:36 +0100
Subject: [PATCH 3/8] updated CHANGES.md file

---
 CHANGES.md | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/CHANGES.md b/CHANGES.md
index 07b851fc8..48cb53567 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -18,6 +18,10 @@ ones in. -->
 [#1428](https://github.com/cylc/cylc-ui/pull/1428) -
 Pinned buttons to the bottom of the command edit form.
 
+[#1436](https://github.com/cylc/cylc-ui/pull/1436) -
+Added colours to message chips based on message level
+
+
 -------------------------------------------------------------------------------
 ## __cylc-ui-2.0.0 (<span actions:bind='release-date'>Released 2023-07-21</span>)__
 

From 901538e9cfe516b7b672ae4b80558482e2e036be Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 30 Aug 2023 10:04:14 +0100
Subject: [PATCH 4/8] Update src/components/cylc/MessageChip.vue

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 src/components/cylc/MessageChip.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
index 7f5dad5fb..36fe9b9a1 100644
--- a/src/components/cylc/MessageChip.vue
+++ b/src/components/cylc/MessageChip.vue
@@ -4,7 +4,7 @@
       <template v-slot:activator="{ props }">
         <v-chip
           v-bind="props"
-          :class="`bg-${getStyle.bg} text-${getStyle.text} font-weight-${getStyle.weight}`"
+          :class="chipClass"
           class="ml-2 message-output"
           size="small"
         >

From 8c222c69a759d8b7ce7a4fc9b16ae8c6fb0f7e8e Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 30 Aug 2023 10:04:24 +0100
Subject: [PATCH 5/8] Update src/components/cylc/MessageChip.vue

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 src/components/cylc/MessageChip.vue | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
index 36fe9b9a1..67d382f66 100644
--- a/src/components/cylc/MessageChip.vue
+++ b/src/components/cylc/MessageChip.vue
@@ -25,16 +25,16 @@ const props = defineProps({
   isMessage: Boolean
 })
 
-const styles = new Map([
-  ['this is a debug message', { bg: 'blue', text: 'white', weight: 'normal' }],
-  ['this is a info message', { bg: 'grey', text: 'white', weight: 'normal' }],
-  ['this is a warning message', { bg: 'yellow', text: 'black', weight: 'normal' }],
-  ['this is an error message', { bg: 'red', text: 'white', weight: 'normal' }],
-  ['this is a critical message', { bg: 'red lighten-2', text: 'black', weight: 'bold' }],
+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'],
 ])
 
-const getStyle = computed(() => {
-  return styles.get(props.level) || { bg: 'grey  lighten-2', text: 'white', weight: 'normal' }
-})
+const chipClass = computed(() => (
+  classMap.get(props.level) ?? (props.isMessage ? 'bg-grey-lighten-5' : 'bg-grey')
+))
 
 </script>

From fd6afe2605e589519e4d920f148286dc55930fa4 Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.ukpython>
Date: Wed, 30 Aug 2023 10:09:51 +0100
Subject: [PATCH 6/8] Added copyright header to chip component

---
 src/components/cylc/MessageChip.vue | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
index 67d382f66..14c8f681f 100644
--- a/src/components/cylc/MessageChip.vue
+++ b/src/components/cylc/MessageChip.vue
@@ -1,3 +1,19 @@
+<!--
+Copyright (C) NIWA & British Crown (Met Office) & Contributors.
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 3 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+GNU General Public License for more details.
+
+You should have received a copy of the GNU General Public License
+along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
 <template>
   <div>
     <v-tooltip :activator="null">

From b9624ad3e7e5284c4bfa07ba470fe4fb09eb9abf Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.uk>
Date: Wed, 30 Aug 2023 14:49:04 +0100
Subject: [PATCH 7/8] Update CHANGES.md

Co-authored-by: Ronnie Dutta <61982285+MetRonnie@users.noreply.github.com>
---
 CHANGES.md | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index a362cdba8..923e9cf4d 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -25,10 +25,6 @@ Analysis view: added a box & whiskers plot layout.
 [#1428](https://github.com/cylc/cylc-ui/pull/1428) -
 Pinned buttons to the bottom of the command edit form.
 
-[#1436](https://github.com/cylc/cylc-ui/pull/1436) -
-Added colours to message chips based on message level
-
-
 -------------------------------------------------------------------------------
 ## __cylc-ui-2.0.0 (<span actions:bind='release-date'>Released 2023-07-21</span>)__
 

From 476474baa05a74d5e8fb9b19e0e942e7730e2e2a Mon Sep 17 00:00:00 2001
From: Mark Dawson <mark.dawson@metoffice.gov.ukpython>
Date: Wed, 6 Sep 2023 11:43:39 +0100
Subject: [PATCH 8/8] Handle severity in task util and prop to MessageChip

---
 src/components/cylc/MessageChip.vue   | 10 +++++-----
 src/components/cylc/tree/TreeItem.vue |  2 +-
 src/utils/tasks.js                    |  4 +++-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/cylc/MessageChip.vue b/src/components/cylc/MessageChip.vue
index 14c8f681f..48f22c711 100644
--- a/src/components/cylc/MessageChip.vue
+++ b/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(() => (
diff --git a/src/components/cylc/tree/TreeItem.vue b/src/components/cylc/tree/TreeItem.vue
index b5c6162c7..5ed86bb51 100644
--- a/src/components/cylc/tree/TreeItem.vue
+++ b/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">
diff --git a/src/utils/tasks.js b/src/utils/tasks.js
index 6e4485919..94e91f7dd 100644
--- a/src/utils/tasks.js
+++ b/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