Using htop to generate a live website background | Hacker News Reader

Using htop to generate a live website background

drunken-security.at

198 pointstrampi59 comments

Hi, htop author here: this brought a smile to my face! Wondering if I should do the same in htop's own website. Would be fun to follow the activity spike when the new major release comes later this year! Major kudos to the author for the idea!

As long as we're giving kudos, allow me to give some to you: htop is a great tool. Thanks for making it!

Thanks, we would be happy to see it on your site. :)

Thanks! Every now and then I want to see individual CPU usage (usually when I want to check if a program is multithreaded) and I Google to find a way to do it.

I always end up doing `sudo apt-get install htop`.

If htop is unavailable, then you can hit the number 1 key in regular top on Linux to see individual CPU utilization.

Or "P" on FreeBSD.

htop is one of my favorite UNIX tools in existence!

Check out htop running my laptop while I had an "ssh-multi" tmux session opened up on an Apache Spark cluster, doing computation 32 cores x 25 nodes = 800 cluster cores! It's so fun to watch all of those cores light up green while doing a big batch job.

https://www.flickr.com/photos/amontalenti/21512617686/in/dat...

We are big fans of htop at Parse.ly. We install it on every one of our nodes.

Whoa, amazing picture! Thanks for sharing!

Thanks for htop!

You can make it more efficient by capturing the images to a buffer and rendering a low FPS h264 stream, serving it as HLS fragments and displaying it with hls.js ( https://github.com/dailymotion/hls.js ) as a background element. There is a lot of inter frame compression benefits to be had from this sort of content + it will look more nice with a constant stream of frames. With a low FPS, the CPU usage should be low enough to not be noticeable and also, you can serve a static JPEG as a "preview" when loading the stream in the background for having a background picture on load.

we lol'd... Its a good idea. The inter frame compression is the point which would be nice to have.

Neat thanks!

You can generate HTML (and from that png or whatever) with http://www.pixelbeat.org/scripts/ansi2html.sh like

    $ COLUMNS=80 timeout 1 htop > t.ansi
    $ ansi2html.sh --bg=dark < t.ansi > t.html

I've requested a -b, --batch option for htop, to simplify this mode of operation. https://github.com/hishamhm/htop/issues/282 Then you could just:

    $ COLUMNS=80 htop -b | ansi2html.sh ...

Direct link to the generated background image: http://104.233.86.94/background/background.png

Without the hardcoded IP:

http://drunken-security.at/background/background.png

I studied the line read _ _ sid < <(2>&1 strace -esetsid setsid sh -c "exec $PROGRAM <> /dev/tty2 >&0 2>&1 ")

<( is an example of process substitution, in case anyone is interested. Basically it feeds the stdout of the subshell into the stdin of the read (previous) command. Here is a detailed explanation: http://www.tldp.org/LDP/abs/html/abs-guide.html#PROCESS-SUB

thank you :)

Is there any good reason not to use an ordinary pipe there? In zsh, strace blah |& read sid

Well they could use an ordinary pipe, but they would have to group the later expression in parantheses. In bash the | creates a fork, so if you try: echo "sdfsdf" | read sid && echo $sid you get a blank line, but if you try: echo "sdfsdf" | (read sid && echo $sid) you get "sdfsdf" |& is an abbreviation for >2&1 | . In zsh the grouping isn't needed, the expression works out of the box.

For more information on the subject: http://stackoverflow.com/questions/13763942/bash-why-piping-...

Hmm... looks like zsh runs the last element of the pipeline, if a builtin, in the current process. I use the pipe-to-read trick all the time in zsh without even thinking about it.

I wrote a tiny program that captures the content of a Linux virtual console and prints it to stdout.[1] I forgot why I wrote it, but the source code shows how to access foreground color, background color and the font weight.[2] You could hack it to print everything in a format that's easily parsable, write it to a file every second and do the rendering on the client side with JavaScript.

[1] https://github.com/slyrz/peep/

[2] https://github.com/slyrz/peep/blob/master/peep.c#L165

I would be worried about one of the processes having a database password or something like that as a parameter...

mysql at least replaces -ppassword for -px

Even though some software does replace the password, it would be better not to use passwords like that at all anyway. Just to be sure.

Good point. I think we should be caeful what we do, while administrating the server.

Maybe we could build some automatism which stops the screenshot service while an ssh session is established.

Either that, or you just exclude all processes forked by bash/ssh :-)

Once again with mysql you can:

    MYSQL_PWD=password mysql -uuser db

On some old systems, I remember that env vars of other UIDs could be seen, even if you weren't root. I wonder if that's still true for any systems out there.

There is a time interval larger than 0.000000000 seconds between the start of a mysql process and the process overwriting its argv :)

Would be more interesting if the background is live, like updating itself every second or half a second.

will be live in some minutes

done. thanks for the recommendation.

wow, looks fantastic.

Sorry, we had to turn off the automatic reload because of performance issues ;-) But thanks for the recommendation, it's a really cool effect!

Well it's ansi text, so why not just copy the text directly to a DIV, convert the ansi to html (or css) and update it via javascript polling ?

You would have to parse the VT-100 escape codes to generate the correct html + css (e.g. colors and cursor relocation escape sequences). It is not that straight forward, but on the other hand there are libraries for that.

http://www.pixelbeat.org/scripts/ansi2html.sh

Or maybe just use WebRTC or WebSockets for push state change ?

Well that was kind of fun. Ran apache bench on it just to see the two cores go to 100% :)

oh you... ;)

It's text. Would have used asciinema as a base and streamed that in.

Great idea! But wouldn't it be best to restrain the output of htop to a few interesting processes that are running without root privileges. It seems to me that it could be possible to bubble up processes that can leak information, especially at startup and when you put the server under load externally...

What are the security implications?

Your PIDs are showing; is the first thing that comes to my mind.

security through obscurity is no security. so, if the server is unsecure you can bet this won't be the reason for any incident.

good point, thank you. :)

I wonder how https://github.com/ansilove/AnsiLove-C would fare for generating the PNG compared to the current solution.

I've used this to show live htop on a web page: https://github.com/dtinth/ttycast

Not sure I understand why there's 4 nginx processes, 4 php-fpm processes and like 20 mysql processes, why so many, don't you need like 1 (or 4 if there' no pooling)?

That's worker threads, not processes. You can enable tree view in display options, then the worker threads would have been sorta moved to the right to indicate that fact, but that's not a default option.

Processes and threads are basically the same in Linux (except threads share resources, since we're talking about the same mysql "program" is a given that these are 'threads', sorry if I'm imprecise and call everything the same).

I'm no mysql expert but I highly doubt you need more than a few threads (a bunch for the db housekeeping and one per connection), looks like this server is not using pooling. Then again I don't know much about WP and I may be talking out of my behind.

Nice idea although a bit dangerous! I wonder if it would be better to use as background the output of a program like gotty, which streams a terminal's output as a web page.

Interesting, thanks! Probably not as cool, but you could also just get the output of the regular top, parse it and generate HTML from it (a bit like http://tracesof.net/uebersicht/)

>Is it a good idea to show everybody what your server is doing?

I'm guessing no, but it's neat.

Nice. Always meant to try and do something similar myself using https://github.com/joewalnes/websocketd

Drunken Security: Sorry for the downtime, Server is up again! :)

What did you do to stop the client from caching the background image?

Like this: https://gist.github.com/trampi/3eaf4a68a5e0a57aab05 If you have further questions you are welcome :-)

Thanks!

GraphicsMagic > image magic

atop > htop

Reply on news.ycombinator.com