Hass.io: Show ANSI color codes in logs by OttoWinter · Pull Request #2155 · home-assistant/frontend

OttoWinter · 2018-11-30T10:03:27Z

Home-Assistant PR to forward ANSI color codes in HTTP view: home-assistant/core#18834

Show colors in Hass.io logs. Example:

(source: https://gist.github.com/OttoWinter/88ec233c3bd714c00f86cb70018aa7af)

Obviously there's a lot of duplication going on between the supervisor and add-on logs; Of course these should be refactored into one class. However I don't know how to create such a class + I have no idea how imports work here 😅 Help is welcome!
One problem with refactoring is that the supervisor logs are slightly different. The supervisor uses green for almost all log messages (info), so green is converted to black in the supervisor logs.
The colors are not perfect yet. Especially the yellow color is a bit too bright to read. I spent some time trying to find a working color but ultimately failed. The color schema is based on the ubuntu colors here: https://en.wikipedia.org/wiki/ANSI_escape_code#Colors
Probably we could strip down the list of supported ANSI escape codes here. For the initial patch, I just went ahead and implemented all to see how it looks. Probably something like background isn't too necessary, but I'm sure somebody could make some creative design using that.

OttoWinter · 2018-11-30T10:09:12Z

hassio/src/addon-view/hassio-addon-logs.js

        pre {
          overflow-x: auto;
+          white-space: pre-wrap;
+          overflow-wrap: break-word;


This enables wrapping in the logs. I personally find it easier to read but I can also remove it again

(before)
(after)

bramkragten · 2018-11-30T11:33:06Z

hassio/src/addon-view/hassio-addon-logs.js

+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(HassioAddonLogs.parseLogsToPre(text));


Suggested change

this.$.content.appendChild(HassioAddonLogs.parseLogsToPre(text));

this.$.content.appendChild(this.parseLogsToPre(text));

parseLogsToPre is a static function.

bramkragten · 2018-11-30T11:35:15Z

hassio/src/system/hassio-supervisor-log.js

      },
      () => {
-        this.log = "Error fetching logs";
+        while (this.$.content.lastChild) {


You don't have to do all this, just put the error message in the div:

Suggested change

while (this.$.content.lastChild) {

this.$.content.innerHTML = "Error fetching logs";

bramkragten · 2018-11-30T11:36:29Z

hassio/src/system/hassio-supervisor-log.js

+        while (this.$.content.lastChild) {
+          this.$.content.removeChild(this.$.content.lastChild);
+        }
+        this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text));


Suggested change

this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text));

this.$.content.appendChild(this.parseLogsToPre(text));

bramkragten · 2018-11-30T11:39:26Z

We should create a helper function to convert an ANSI log to HTML, that can be called inside these files.

bramkragten · 2018-11-30T11:46:26Z

One problem with refactoring is that the supervisor logs are slightly different. The supervisor uses green for almost all log messages (info), so green is converted to black in the supervisor logs.

I don't think this is a frontend problem, the supervisor or backend should fix that?

pvizeli · 2018-11-30T12:25:37Z

I love the green output 👍

OttoWinter · 2018-11-30T13:37:19Z

I love the green output 👍

I find this hard to read. Yes this is probably more of a frontend problem, though when viewing the supervisor docker logs it is nice to have the green text - for the frontend it is IMHO not so nice because readability goes down a lot.

We should create a helper function to convert an ANSI log to HTML, that can be called inside these files.

Yes, that's true. But I don't know how 😇 "However I don't know how to create such a class + I have no idea how imports work here" - Care to explain where such a file would be created (I can't find a util directory) and how to import it? Thanks!

bramkragten · 2018-11-30T13:44:46Z

For readability, you could make the background of the log screen dark, as most of those colors were designed for a dark background?

You should create a new file ansi-to-html.ts (in the root at this point I think...):

export function createHtml(text) {
  ...
  return formatted;
}

You can then import them like:

import { createHtml } from "../ansi-to-html";

You can then just use that function.

OttoWinter · 2018-11-30T13:53:00Z

Thanks! ❤️

For the black background: yes for readability that would be ideal (also the way it's done in my base implementation, the esphomeyaml dashboard).
But I'm not so sure it looks good in the Hass.io dashboard. The Home Assistant frontend is mostly white and having a big black blob suddenly appear feels weird. Especially if it's in the middle of a white card. One option would be to make the whole card background dark, but that would also look quite weird I think.

Example:

bramkragten · 2018-11-30T14:02:46Z

I think it looks better, but the entire card should be dark.
I suggest using these colors:

https://github.com/carloscuesta/materialshell/tree/master/shell-color-themes#manual

pvizeli · 2018-11-30T14:52:38Z

We have no control about the ASCII output. Home Assistant and Supervisor use python with ANSI color logging.

@frenck @balloob any suggestion?

OttoWinter · 2018-11-30T14:56:01Z

@pvizeli If you're asking about the green INFO log level messages in the supervisor: That's quite simple, just remove this line

pvizeli · 2018-11-30T14:57:01Z

Yes, we could do that. Currently, we follow Home Assistant style.

OttoWinter · 2018-11-30T15:00:09Z

Yes, that was also my concern before. Speaking for myself, I like the green color output when viewing the docker logs in the terminal - especially when showing the logs from multiple containers at once.

For the frontend however I think the green output just hurts readability. Therefore my initial idea was to do remove the green INFO level in the frontend layer. That way we get nice colored logs in the terminal plus nice readable messages in the supervisor logs.

pvizeli · 2018-11-30T15:02:51Z

I think that sounds good. We can start and change things later if they are a problem.

bramkragten · 2018-11-30T15:19:42Z

hassio/src/addon-view/hassio-addon-logs.js

+      ${ANSI_HTML_STYLE}
      <paper-card heading="Log">
-        <div class="card-content"><pre>[[log]]</pre></div>
+        <div class="card-content" id="content"></div>


Suggested change

<div class="card-content" id="content"></div>

<div class="card-content">[[_computeLog(log)]]</div>

With:

_computeLog(log) { return parseTextToColoredPre(log); }

Unless I misunderstand how the html function works, I believe this way would be quite inefficient.

parseTextToColoredPre parses the log and returns a DOM element. With the method that is implemented here, that generated DOM element must then just be appended - done. So API response -> DOM element (parseTextToColoredPre) -> append

With _computeLog however, the generated DOM tree would need to be serialized to HTML after parseTextToColoredPre and then be de-serialized again when it is inserted into the <template>. So API response -> DOM element (parseTextToColoredPre) -> Serialize -> Insert into <template> -> De-serialize by browser. Also, _computeLog would need to look something like this:

_computeLog(log) { return parseTextToColoredPre(log).outerHTML; }

In the application where this code is taken from, this really became a performance problem with longer logs (I used innerHTML, but the speed would be similar). Especially once the Hass.io logs are streamed using websockets re-computing the entire log every time a new line appears would be quite inefficient IMHO.

You might be right... let's use lit, that will fix it all :-P

Yeah, Polymer databinding doesn't allow setting HTML content, just text.

bramkragten · 2018-11-30T15:20:27Z

hassio/src/addon-view/hassio-addon-logs.js

        type: String,
        observer: "addonSlugChanged",
      },
-      log: String,


bramkragten · 2018-11-30T15:21:14Z

hassio/src/addon-view/hassio-addon-logs.js

-      .then((info) => {
-        this.log = info;
+      .then((text) => {
+        while (this.$.content.lastChild) {


Suggested change

while (this.$.content.lastChild) {

this.log = text;

bramkragten · 2018-11-30T15:46:56Z

hassio/src/ansi-to-html.js

+  };
+
+  /* eslint-disable no-constant-condition */
+  while (true) {


Suggested change

while (true) {

let match;

while ((match = re.exec(text)) !== null) {

https://eslint.org/docs/rules/no-cond-assign

Hass.io: Show ANSI color codes in logs

ffe57b8

homeassistant added the cla-signed label Nov 30, 2018

ghost added the in progress label Nov 30, 2018

OttoWinter mentioned this pull request Nov 30, 2018

Show ANSI color codes in logs in Hass.io home-assistant/core#18834

Merged

3 tasks

OttoWinter commented Nov 30, 2018

View reviewed changes

bramkragten reviewed Nov 30, 2018

View reviewed changes

Use innerHTML and color classes

8f90cbc

Refactor ANSI function

b718e66

Readability

e01dbb7

bramkragten reviewed Nov 30, 2018

View reviewed changes

Make green text black in supervisor logs

9a3b304

bramkragten reviewed Nov 30, 2018

View reviewed changes

Use assigning while loop

7115a5a

balloob approved these changes Dec 2, 2018

View reviewed changes

balloob merged commit f7e3f4a into home-assistant:dev Dec 2, 2018

ghost removed the in progress label Dec 2, 2018

OttoWinter deleted the hassio-ansi branch December 2, 2018 09:44

balloob mentioned this pull request Dec 5, 2018

20181205.0 #2190

Merged

github-actions bot locked and limited conversation to collaborators Jul 7, 2022

	this.$.content.appendChild(HassioAddonLogs.parseLogsToPre(text));
	this.$.content.appendChild(this.parseLogsToPre(text));

	while (this.$.content.lastChild) {
	this.$.content.innerHTML = "Error fetching logs";

	this.$.content.appendChild(HassioSupervisorLog.parseLogsToPre(text));
	this.$.content.appendChild(this.parseLogsToPre(text));

	<div class="card-content" id="content"></div>
	<div class="card-content">[[_computeLog(log)]]</div>

	while (true) {
	let match;
	while ((match = re.exec(text)) !== null) {

Conversation

OttoWinter commented Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bramkragten Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bramkragten commented Nov 30, 2018

Uh oh!

bramkragten commented Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pvizeli commented Nov 30, 2018

Uh oh!

OttoWinter commented Nov 30, 2018

Uh oh!

bramkragten commented Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

OttoWinter commented Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

bramkragten commented Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pvizeli commented Nov 30, 2018

Uh oh!

OttoWinter commented Nov 30, 2018

Uh oh!

pvizeli commented Nov 30, 2018

Uh oh!

OttoWinter commented Nov 30, 2018

Uh oh!

pvizeli commented Nov 30, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bramkragten Nov 30, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

OttoWinter commented Nov 30, 2018 •

edited

Loading

bramkragten Nov 30, 2018 •

edited

Loading

bramkragten commented Nov 30, 2018 •

edited

Loading

bramkragten commented Nov 30, 2018 •

edited

Loading

OttoWinter commented Nov 30, 2018 •

edited

Loading

bramkragten commented Nov 30, 2018 •

edited

Loading

bramkragten Nov 30, 2018 •

edited

Loading