Add colouring to the logs query display

[ckbedwell]

Problem

Currently the experience for debugging logs in the scenes dashboards is quite frustrating and difficult to parse to find what you are looking for. Even when filtering by unsuccessful runs (which isn't always desirable) it can be difficult to pick out the different information provided by the log line.

Completion criteria

• That logs on the scenes dashboards have key information colourised. Key information in colour should include:
  • Check pass
  • Check failed
  • URL
  • Status code returned (please explore if using differing colours for 200s / 300s / 400s / 500s is desirable).

Not part of the acceptance criteria but an a11y-friendly colour palette is encouraged where possible. It may be tempting to default to red/green for pass and failures but this is one of the most common colourblind deficiencies.

There is a larger story to making parsing logs more readable so this ticket is specifically looking at adding colouring to the existing logs. Please record any additional thoughts you may have which would improve the readability of logs and we will revisit this at a later date.

Please use peterschretlen1.grafana.net as a reference. Here the colouring is being added directly in the logs query and can be viewed in Explore:

Logs query example

Log result example

(and in text)

Query - Response

{job="Proof - full set"} |= `<redacted>` |= "Response:\\nHTTP"
| regexp `.*Response:\\nHTTP.....(?P<status>[^ ]+)`
| logfmt | __error__ = "" 
| label_format level = "{{if(lt .status `400`) }}info{{else}}error{{end}}"
| label_format status_color = "{{if and (ge .status `200`) (lt .status `300`)}}37;3{{else if and (ge .status `300`) (lt .status `400`) }}33;3{{else}}31;3{{end}}"
| label_format status_colored = "\u001b[{{ .status_color }}m{{ .status }}\u001b[0m"
| line_format "{{ .status_colored }} {{ .msg }}"

Query - Request

{job="Proof - full set"} |= `<redacted>` |= "Request:\\n"
| logfmt | __error__ = "" 
| label_format status_color = "33;3"
| label_format status_colored = "\u001b[{{ .status_color }}m{{ .status }}\u001b[0m"
| line_format "{{ .status_colored }} {{ .msg }}"

Query - Assertion
{job="Proof - full set"} | logfmt | check=`bhtest`
| label_format level = "{{if(eq .value `1`) }}info{{else}}error{{end}}"
| label_format status_color = "{{if (eq .value `1`)}}37;3{{else}}31;3{{end}}"
| label_format status_colored = "\u001b[{{ .status_color }}m{{if (eq .value `1`)}}passed{{else}}failed{{end}}\u001b[0m"
| line_format "{{ .msg }} - {{ .check }}:{{.status_colored}}"

[peterschretlen]

• For the info logs when there are check failures or unexpected http codes, k6 output deliberately treates this as info. We could consider translating this to error level.
• Addind color coding to the output
• Stripping redundant output that adds visual clutter

[peterschretlen]

We would have to be careful about parsing the output, because it could change from k6