Change the look of the Log-Viewer

Tags: #<Tag:0x00007f618c2f8510> #<Tag:0x00007f618c2f8290> #<Tag:0x00007f618c2f8150>

Hey there =)

Today I found out on how to change the look of the OpenHAB Log viewer. I was quite tired of the old look and like the new appearance of my logs. Have a look:



On mobile this looks like this

This is the LogViewer from @cyb3rko See here
(The errors are on purpose for demonstration purposes :wink: )

Explanation
The Log viewer is just an instance of frontail, an open source “Node.js application for streaming logs to the browser. It’s a tail -F with UI.” Github
I changed the the arguments the frontail instance gets when starting and the json file responsible for some look improvements.

How to
Edit the systemctl config with sudo nano /etc/systemd/system/frontail.service and change the line beginning with ExecStart. I added the dark theme option. So now my config looks like this:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab.json -l 10000 -n 200 -t dark /var/log/openhab2/openhab.log /var/log/openhab2/events.log

When finishing the configuration run sudo systemctl daemon-reload; sudo service frontail restart.

Furthermore I added the highlight-preset to have all text as white and change some backgrounds

{
“words”: {
“[ERROR]”: “color: red;”,
“[WARN ]”: “color: orange;”,
“[INFO ]”: “color: #0ED600;”,
“Node is DEAD”: “color: red;”
},
“lines”: {
“INFO”: “color: #FFFFFF;”,
“:”: “color: #FFFFFF;”,
“/var/log/openhab2/openhab.log”: “text-align: right; font-size: 0.8em; border-top: 2px solid #FFFFFF; color: #FFFFFF;”,
“/var/log/openhab2/events.log”: “text-align: right; font-size: 0.8em; border-top: 2px solid #FFFFFF; color: #FFFFFF;”,
“ERROR”: “color: #FFFFFF; background-color: #990000;”,
“model.script”: “background-color: #00918D; font-weight: bold; color: #FFFFFF;”
}
}

For testing purposes do

sudo nano /usr/lib/node_modules/frontail/preset/openhab.json; sudo systemctl daemon-reload; sudo service frontail restart

so you can edit and immediately see the changes.

Reload you log viewer in your web browser and your new theme is applied.

Finding mistakes

If it doesnt load dont worry! Just enter the frontail --ui-highlight […] events.log we changed earlier into the shell. Frontail will say what caused the problem. For example I had a comma to much so I got this error

$frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab.json -l 10000 -n 200 -t dark /var/log/openhab2/openhab.log /var/log/openhab2/events.log

undefined:11
},
^

SyntaxError: Unexpected token } in JSON at position 386

Have fun
Change the log viewer so it looks exactly how you like!

Greeting
Felix

2 Likes

Similar to this…

Hehe, I also just found it out yesterday…
I always thought that it was not possible or just too complicated, but it is as easy as nothing else…

I will also include instructions in the app (LogViewer App) how to change the look to improve the log layout, because I think way too few people know this configuration possibility.

Thanks for mentioning me and my app!

1 Like