UI improvements needed for ANSI color handling

[amorey]

The current implementation of ANSI colors in messages uses a library that assumes a dark background so the background of the message column is set to black by default:

This isn't ideal because:

• It doesn't support users who prefer light backgrounds
• If a log stream has some lines with ANSI and some without, the background color of the message column will alternate between light and dark

To support ANSI encodings properly I think we need to:

1. Implement light/dark mode for the app as a whole
2. Change the default browser colors used by ansi_up for when the user prefers a light background

[nodesocket]

👍🏻 implementing dark mode. I'd also perhaps move the colorizing lines based on the pods/containers out of the message column and perhaps into TIMESTAMP or into the column PODS/CONTAINERS that is color coded.

When mixing ANSI colors messages without colors, get's jaring and not pretty.

[amorey]

Got it. The switch between the ANSI coloring and the default coloring is definitely jarring. I'll play around with pod/container colorizing and see if I can find something that works well with dark/light mode.

[amorey]

I just pushed a new version (0.1.8) that implements dark mode and moves the pod/container coloring to a dot next to the timestamp:

helm repo update kubetail
helm upgrade kubetail kubetail/kubetail --namespace kubetail

https://demo.kubetail.com/console?source=deployments/kubetail-demo/loggen https://demo.kubetail.com/console?source=deployments/kubetail-demo/loggen-ansi

Here are some screen shots:

Let me know what you think!

[nefarius]

Just updated, looks really slick! 😎

[amorey]

Great! Happy to hear you like it! What do you think about having the pod/container color in a dot next to the timestamps instead of in the text? I keep going back and forth on which one is more readable (without ansi markup):

[nefarius]

Personally I think if you need to focus just on the log content itself, having the entire row a different color is a bit overkill, folks who wanna clamp down on a specific container can use the filter selection to show or hide it, and by default the dot gives a good indicator that the line is associated with the container shown in the left menu.

So TL;DR: if the logs by default do not come with color information, just leave them as good old plain text.

And maybe for those extra pedantic; add a checkbox that even lets you hide the dots column so you get back a little bit of space for your messages. Just noticed that this is already possible.

[amorey]

Makes sense, thanks for the feedback. I'll keep this as the default for now. Later, I'd like to make it configurable via a settings page.

[nodesocket]

@amorey I just upgraded to 1.8 via the Helm chart and yes 👍🏻 🏆 🥳 🥂 dark mode looks awesome and ANSI colors are working. The text colors are a bit hard to read at times, but not sure that's something you can adjust?

Do you have a way to give you money 💰 for your work? I'd like to give you a little 🧀 for your effort on kubetail. I have replaced my paid logging service with kubetail in my homelab Kubernetes cluster.

[amorey]

Great to hear you like dark mode! It will take some work to adjust the ansi colors but I think it's important. Can you send me a screenshot from your terminal showing how you expect it to look?

Thanks so much for the offer to donate! Maybe in the future I'll set up a donation button but for now I'm just so grateful for your feedback. Seriously - it's making the product better and also gives me a lot of energy to keep going. Please just keep the feedback coming.

What service were you using before? I'd love to hear more about what features you'd need from kubetail to use it for work too. Feel free to email me (andres@kubetail.com) or slack me if you'd prefer to talk offline.

[nodesocket]

What service were you using before?

I own and run a DevOps consulting company, so DataDog Logs (paid) and Mezmo (paid) which both have Kubernetes integrations that ship pod logs to their service. Both are pretty good and polished, but paid.

[amorey]

@nodesocket I just published a new version of kubetail (0.4.2) that uses a new ansi-to-html conversion tool I made (Fancy-ANSI) that makes it easier to support custom ANSI palettes. For now I'm using vscode's palette in light mode and xterm.js's palette in dark mode. When you get a chance can you upgrade to 0.4.2 let me know which colors are difficult to see? Then I can play around with colors to find something that works well in dark mode.

Here's the helm upgrade command:

helm repo update kubetail
helm upgrade kubetail kubetail/kubetail --namespace kubetail 

[nodesocket]

@amorey thanks, I just upgrade to 0.4.2. I can't say I notice a dramtic difference really. Is this what you expected?

[amorey]

Thanks, that was expected. The main thing the upgrade did was to make it easier to customize the palette for the future so I wasn't expecting a big change. Soon I'll add an ANSI palette chooser so you can pick from different color sets.

From the image the text looks more readable than before but a little dim. Is that right or are you happy with it?