color cylc message bubbles

[wxtim]

All cylc messages are printed in grey chips:

I think I would expect these bubbles to be coloured and formatted in a manner similar to CLI logging - i.e.

Level	Format
INFO	grey (as is)
WARNING	Yellow (Amber?) Background)
ERROR	Red Background
CRITICAL	Red, background, bold text

We should of course test any change against colour blindness simulation.

Should we sort messages by log level before time? - If you have a lot of messages you get a button at the end of the line to expand the job - could this tell you how many more messages there are?

[oliver-sanders]

Good idea, use the severity if set, else default to INFO.

Probably best to use a more subtle colouring so these message "bubbles" don't become too distracting (job status is more important so should be more prominent).

For message sorting, I think the order they are received in is the best approach as these are log messages received from a user-defined program. This should be how it currently works.

[oliver-sanders]

At present only the tree view displays task outputs like this, however, other views will start to display outputs in the near future (namely the task metadata view) so I'd suggest implementing a "message" component and adding the colour functionality there.

<div v-for="[level, message] in messages">
  <message :level="level" :message="message" />
</div>

A component test would be a great way to test this.

For development, and to see how messages at different levels appear to the UI, here's a simple workflow:

[scheduling]
  [[graph]]
    R1 = foo
[runtime]
  [[foo]]
    script = """
      # task messages are user-defined messages which convey information about a task
      # they are typically used to convey warnings
      cylc message -p DEBUG -- this is a debug message
      cylc message -p INFO -- this is a info message
      cylc message -p WARNING -- this is a warning message
      cylc message -p ERROR -- this is an error message
      cylc message -p CRITICAL -- this is a critical message

      # custom task outputs are task messages which have been registered as outputs
      # in the [runtime] section, these can be used in the graph for triggering purposes
      cylc message -- 'this message corresponds to an output'
    """
    [[[outputs]]]
      my-custom-output = this message corresponds to an output

Note there is an existing test for message functionality in the tree view here:

cylc-ui/tests/e2e/specs/tree.cy.js

Lines 145 to 188 in 3610e6a

	it('Should display message triggers', () => {
	cy.visit('/#/tree/one')
	// find the task proxy
	cy
	.get('.mx-1')
	.contains('eventually_succeeded')
	.parent()
	.parent()
	// expand the job nodes
	.find('.node-expand-collapse-button')
	.click({ force: true })
	.parent()
	.parent()
	// the jobs should be visible
	.find('.node-data-job')
	.should('be.visible')
	// the first job should have 5 outputs (the maximum number we display)
	.first()
	.find('.message-output')
	.should('have.length', 5)
	// the remainder should be referenced in an overflow counter +2
	.parent()
	.contains('+2')
	.parent()
	.parent()
	.parent()
	.parent()
	// expand the job details node
	.find('.node-expand-collapse-button')
	.click({ force: true })
	// all 7 outputs/messages should be listed in the job-details
	.parent()
	.parent()
	.find('.job-details')
	.find('.output')
	.should('have.length', 7)
	})

[MetRonnie]

Unfortunately the severity level is not included in the GraphQL schema, so this requires a cylc-flow change as well.

Currently the only information is the message

   [[foo5]]
       script = cylc message 'WARNING:Hello world'

query {
  jobs {
    id
    messages
  }
}

{
  "data": {
    "jobs": [
      {
        "id": "~rdutta/JOB//1/foo5/01",
        "messages": [
          "started",
          "Hello world"
        ]
      }
    ]
  }
}