
Using htop to generate a live website background - trampi
http://drunken-security.at/archives/41
======
hisham_hm
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!

~~~
pixelmonkey
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...](https://www.flickr.com/photos/amontalenti/21512617686/in/dateposted/)

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

~~~
hisham_hm
Whoa, amazing picture! Thanks for sharing!

------
slashink
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](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.

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

------
pixelbeat
Neat thanks!

You can generate HTML (and from that png or whatever) with
[http://www.pixelbeat.org/scripts/ansi2html.sh](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](https://github.com/hishamhm/htop/issues/282)
Then you could just:

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

------
dewey
Direct link to the generated background image:
[http://104.233.86.94/background/background.png](http://104.233.86.94/background/background.png)

~~~
nacs
Without the hardcoded IP:

[http://drunken-security.at/background/background.png](http://drunken-
security.at/background/background.png)

------
terminalcommand
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](http://www.tldp.org/LDP/abs/html/abs-guide.html#PROCESS-SUB)

~~~
CatCookie
thank you :)

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

~~~
terminalcommand
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-...](http://stackoverflow.com/questions/13763942/bash-why-piping-input-
to-read-only-works-when-fed-into-while-read-const)

~~~
belovedeagle
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.

------
zuzun
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/](https://github.com/slyrz/peep/)

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

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

~~~
mahouse
mysql at least replaces -ppassword for -px

~~~
tluyben2
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.

~~~
CatCookie
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.

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

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

~~~
trampi
will be live in some minutes

~~~
trampi
done. thanks for the recommendation.

------
ck2
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 ?

~~~
trampi
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.

~~~
ck2
[http://www.pixelbeat.org/scripts/ansi2html.sh](http://www.pixelbeat.org/scripts/ansi2html.sh)

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

~~~
CatCookie
oh you... ;)

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

------
f_
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...

------
pearjuice
What are the security implications?

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

~~~
CatCookie
good point, thank you. :)

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

------
ollybee
I've used this to show live htop on a web page:
[https://github.com/dtinth/ttycast](https://github.com/dtinth/ttycast)

------
lazyant
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)?

~~~
forgotmypassw
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.

~~~
lazyant
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.

------
andmarios
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.

------
felxh
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/](http://tracesof.net/uebersicht/))

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

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

------
gaving
Nice. Always meant to try and do something similar myself using
[https://github.com/joewalnes/websocketd](https://github.com/joewalnes/websocketd)

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

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

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

~~~
fnordfnordfnord
Thanks!

------
dorfsmay
GraphicsMagic > image magic

atop > htop

