Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature color cylc message bubbles #1436

Draft
wants to merge 10 commits into
base: master
Choose a base branch
from
4 changes: 4 additions & 0 deletions CHANGES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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


markgrahamdawson marked this conversation as resolved.
Show resolved Hide resolved
-------------------------------------------------------------------------------
## __cylc-ui-2.0.0 (<span actions:bind='release-date'>Released 2023-07-21</span>)__

Expand Down
48 changes: 48 additions & 0 deletions cypress/component/viewMessageChip.cy.js
Original file line number Diff line number Diff line change
@@ -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')
})
})
56 changes: 56 additions & 0 deletions src/components/cylc/MessageChip.vue
MetRonnie marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!--
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">
<template v-slot:activator="{ props }">
<v-chip
v-bind="props"
:class="chipClass"
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 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'],
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This won't do anything until cylc/cylc-flow#5713 is addressed, but this is how it should be

Suggested change
['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'],

Can you take a look at

function jobMessageOutputs (jobNode) {

and add some logic to extract the severity level from the message which will be in the form SEVERITY:rest of message

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

(I've got a fix for the "output vs ordinary message" logic at #1456)

])

const chipClass = computed(() => (
classMap.get(props.level) ?? (props.isMessage ? 'bg-grey-lighten-5' : 'bg-grey')
))

</script>
26 changes: 10 additions & 16 deletions src/components/cylc/tree/TreeItem.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -261,7 +254,8 @@ export default {

components: {
Task,
Job
Job,
MessageChip
},

props: {
Expand Down
11 changes: 5 additions & 6 deletions tests/e2e/specs/tree.cy.js
Original file line number Diff line number Diff line change
Expand Up @@ -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')
Expand Down