Feature color cylc message bubbles

CHANGES.md

@@ -25,6 +25,10 @@ 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>)__
 

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')
+  })
+})

src/components/cylc/MessageChip.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <v-tooltip :activator="null">
+      <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 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>

src/components/cylc/tree/TreeItem.vue

@@ -115,29 +115,21 @@ 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}`"
-              :activator="null"
-            >
-              <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"
               size="small"
               link
               @click="toggleExpandCollapse"
+              data-cy="chip-overflow"
             >
               +{{ jobMessageOutputs.length - 5 }}
             </v-chip>
@@ -229,6 +221,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 +254,8 @@ export default {
 
   components: {
     Task,
-    Job
+    Job,
+    MessageChip
   },
 
   props: {

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')