Netdata: Embed code into website ?

[UltimateByte]

Hi,

I would like to integrate some basic server status (the top of default netdata) into a website. Is it easily doable ?
If it's already in the wiki, i apologize, i couldn't find anything about that.

[ktsaou]

Go to http://your.netdata.server:19999/tv.html or /demo.html and view its source. You will get the idea.

[UltimateByte]

Well, i tried several things for a good hour, and couldn't get it to work. I just came up to some weird looking integrations, incomplete, sometimes not loading...
I should mention that my website is an HTTPS Wordpress and i'm trying to add it with Code Embed extension.

Can you please provide the most simple code you can think about to integrate, so that i hopefully get an idea of where i'm doing it wrong ?

PS : Netdata claims that it can be embed, but it seems like it's not as easy as suggested by the allegation 😋

[ktsaou]

You cannot add HTTP content on an HTTPS page. That's a security constrain the web browsers apply.
The only way is to proxy netdata via your HTTPs web server.

[UltimateByte]

Are you sure it is the reason why it isn't working ?
Because it definitely could be that i suck at managing js scripts since this is my first experience. :o))
I got some HTTP content inside of an HTTP website: https://www.terageek.org/servers/
Chrome doesn't show a full HTTPS in this case but it still works. But it's not a script, so that might be the reason why it would block with netdata and not with this.

"The only way is to proxy netdata via your HTTPs web server."
I'm sorry but i don't get it. Otherwise, can i run netdata under https instead ? I could then use my main domain to connect.

[ktsaou]

Are you sure it is the reason why it isn't working ?

definitely. If the URL on your browser is HTTPS, you cannot fetch anything from an HTTP server. The opposite works perfectly though.

I'm sorry but i don't get it. Otherwise, can i run netdata under https instead ? I could then use my main domain to connect.

You can configure a directory of your web server, e.g. /netdata/, to proxy the traffic to your netdata. Check the wiki. There are instructions and examples for most web servers.

[UltimateByte]

Edit : Skip that post to save time, i got this step solved.

Well, i tried for an hour or so, non HTTPS for now, and couldn't get it to work.

I'm running apache2, so i followed this guide:
https://github.com/firehol/netdata/wiki/Running-behind-apache

I installed dependencies and started trying it.

Notice :
Apache2 policies have changed with apache 2.4
https://httpd.apache.org/docs/2.4/en/upgrading.html
I tried with this directive as well with no success.
AllowOverride All
Require all granted

For now i got this as a virtualhost:

<VirtualHost *:80>
        RewriteEngine On
        ProxyRequests Off
        <Proxy *>
                Order deny,allow
                Allow from all
        </Proxy>

        # first netdata server called 'webserver', at 127.0.0.1:19999
        ProxyPass "/netdata/webserver/" "http://127.0.0.1:19999/" connectiontimeout=5 timeout=30
        ProxyPassReverse "/netdata/webserver/" "http://127.0.0.1:19999/"
        RewriteRule ^/netdata/webserver$ http://%{HTTP_HOST}/netdata/webserver/ [L,R=301]
        <Location /netdata/webserver/>
                AuthType Basic
                AuthName "Protected site"
                AuthUserFile /etc/apache2/.htpasswd
                Require valid-user
                Order deny,allow
                Allow from all
        </Location>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

a2ensite netdata.conf
service apache2 reload (even did restart)

Generated a password with htpasswd -c /etc/apache2/.htpasswd netdata

Added or uncommented and edited those lines in netdata.conf (and killed/restarted netdata):

access log = none
enable web responses gzip compression = no
bind socket to IP = 127.0.0.1

Result: http://webserver.terageek.org/netdata/webserver/
Won't work.

What am i doing wrong ?

[UltimateByte]

Hurah, got something else than 403 removing the 000-default website !
Still not working, gotta go back to my previous config.
Edit: Hurah !
Got the output !
Trying more stuff to get it in https. Will report back.

Got https://webserver.terageek.org/netdata/ working
but not http://www.terageek.org/netdata/
Not a huge deal, now i can try integrating stuff from the first one into the wordpress.
Now i need to figure out a code that actually works...

Since you have access to my netdata, could you please provide an example of code to integrate inside of a webpage ?

[ktsaou]

At the end of the HTML page, add this:

<script type="text/javascript">var netdataNoBootstrap = true;</script>
<script type="text/javascript" src="/netdata/dashboard.js"></script>

If you plan to add charts on multiple pages, add the above at the footer or something that gets included on every page.

Then, to add a chart on a page:

            <div data-netdata="system.cpu"
                    data-title="CPU usage of your netdata server"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>

[ktsaou]

You can also enable apache mod-status to allow netdata collect metrics from your apache. Check your apache config.

[UltimateByte]

I actually have mod status enabled, but after messing around yesterday and restarting apache, netdata stopped displaying apache stats.

root@webserver:/etc/apache2/sites-available# a2enmod status
Module status already enabled

The problem is it's not that easy to add code to a footer in wordpress if you wish to not hardcode anything. I tried integrating the whole code in one page only without changing the page itself (using article code integration) and it won't work. So i'll mess with it later, i gotta go right now. Any protip is welcome, i'm not used to manipulate web code, i'm more into sysadmin. :)

[UltimateByte]

Well, thanks for your sample code btw.

So here is what i tried:

The end of my footer.php now looks like this:

<script type="text/javascript">var netdataNoBootstrap = true;</script>
<script type="text/javascript" src="/netdata/dashboard.js"></script>
<?php wp_footer(); ?>
</body>
</html>

I added this code into my page i wanna put stats on:

<div data-netdata="system.cpu"
data-title="CPU usage of your netdata server"
data-chart-library="dygraph"
data-width="49%"
data-height="100%"
data-after="-300"></div>

Nothing showed up, so i thought maybe it was because netdata comes from different subdomain since i cant get my main domain /netdata to work, wordpress will show a 404 page.
(See https://www.terageek.org/netdata/ and https://webserver.terageek.org/netdata/ )
Then i added the full path to your sample code, hopefully it can work.
<script type="text/javascript" src="https://webserver.terageek.org/netdata/dashboard.js"></script>
And i tried to put php directive allow_url_include to On.
-> Still no luck.

So i'm trying to make the /netdata to work with my main domain. While i have no issues with /phpmyadmin for example, i don't get why it won't work with this one... the only difference is that it's a proxy thing. So i'm trying stuff i found googleing into my .htaccess to disable redirecting it... Tried several commands at several locations, couldn't find something that actually works.
FYI, this is my (default) .htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

I'm completely stuck right now.
I'm also worried that this method won't allow showing two different servers at the same time as i would like to.

Ultimately, for some reason, my mod status is broken after some of the modifications.
curl "http://127.0.0.1/server-status?auto" now displays weird code coming from my wordpress websites instead of usage info.

I'm starting to become mad. Please halp.

[ktsaou]

Cool down.

Move these 2 lines at the far end of the footer (below </html>):

<script type="text/javascript">var netdataNoBootstrap = true;</script>
<script type="text/javascript" src="https://webserver.terageek.org/netdata/dashboard.js"></script>

Reload the site on your browser and verify dashboard.js is being loaded. Check also the console of your browser. Does it have any errors?

To verify that file is loaded, press F12 on your browser, switch to console and write this:

console.log(NETDATA);

It should return an object. Does it?
If not, that file is not loaded.

Once you fix that, then add the chart.

Regarding the server status response, can you post it here?

[UltimateByte]

Thanks for following up.

It appears that dashboard.js is loaded. Before typing anything, i can se an error into the console:
dashboard.js:5596 Uncaught TypeError: $ is not a function
Clicking the line points me to:

    NETDATA.requiredJs = [
        {
            url: NETDATA.serverDefault + 'lib/bootstrap-3.3.7.min.js',
            async: false,
            isAlreadyLoaded: function() {
                // check if bootstrap is loaded
                if(typeof $().emulateTransitionEnd == 'function')
                    return true;
                else {
                    if(typeof netdataNoBootstrap !== 'undefined' && netdataNoBootstrap)
                        return true;
                    else
                        return false;
                }
            }
        },

Here is the output from the requested command: http://pastebin.com/SkEZ1Mxy

Edit : Good news is thanks to your process i was able to know if it's loaded with my previous method to integrate code into the page, and it is ! So no need to put it in footer, i can put it in my page content only, using Code Embed wordpress extension.
Now we need to figure this error out, i guess. Since i don't know js at all, i rely on you, to diagnose it. I'll do whatever test you need as long as it's within my capabilities.

[ktsaou]

hm... this means jquery is not loaded.

On your browser, press F12 and go to network. Reload the page with Control-F5. Can you find jquery in the list?

[ktsaou]

but... NETDATA is loaded after all. Your pastebin has it.

So, add the <div> to the page again, and check the console for new errors. Are there any?

[UltimateByte]

I never removed the <div> from the /servers page. It just doesn't show up. Maybe because the .js is from a different domain ? I don't know. Other possibility is i would be unallowed to input a div here.

I can't find jquery into the network tab even though it appears to be loaded as it responds to the command into the console.
Feel free to try stuff directly to maybe save some time.
The page it's loaded in is https://www.terageek.org/servers/

[UltimateByte]

Netdata code appears to be successfully added into the page as well, but just doesn't show up
http://image.noelshack.com/fichiers/2016/40/1476039733-netdata-code.png

[ktsaou]

For some reason I can't understand, netdata cannot use jquery.
Could you please serve it from www.terageek.org instead of webserver.terageek.org ?

If it still does not work, here are a few possible work-arounds:

1. load netdata first. Move the netdata <script> lines first in the <head> section
2. copy dashboard.js to your web server and load it from there. If you do this, you will also need to add this line: <script type="text/javascript">var netdataServer = 'https://webserver.terageek.org/netdata/';</script>

[UltimateByte]

Could you please serve it from www.terageek.org instead of webserver.terageek.org ?

I've been killing myself trying to do so for an hour at least messing around with no success.
If i try to access any wordpress i got /netdata, it will redirect to a wordpress 404 page. Only way i found: using a subdomain, here my hostname's domain.
I tried to exclude /netdata from mod_rewrite in wordpress's .htacces, but i couldn't find something that actually works.

[ktsaou]

ok, could you please copy dashboard.js to wordpress then?

[UltimateByte]

Good idea. Hold on.

[UltimateByte]

Done.
Changed code accordingly
<script type="text/javascript" src="https://www.terageek.org/dashboard.js"></script>
Now it complains about missing fonts and css. (in console)

[ktsaou]

ok this is good.

Set this before loading dashboard.js:

<script type="text/javascript">var netdataServer = 'https://webserver.terageek.org/netdata/';</script>

[UltimateByte]

OK, nice one. No more complaining about missing stuff. Still no display though, and still the error line 5596.

[ktsaou]

Still no display though, and still the error line 5596.

This means no jquery for netdata...
I am stuck too now...

[UltimateByte]

Gosh ! It's kinda frustrating if even you don't figure out a solution, means it's kinda dead to solve this.

It would be so much better to have some kind of "copy this code to integrate this part of netdata on your website" in order to do this.

[ktsaou]

yes I know. I have integrated netdata to more than a dozen sites, but not wordpress. I don't know why is that different...

[ktsaou]

I can give you another solution though...

[UltimateByte]

I won't throw wordpress away yet ! Haha :p

[ktsaou]

Can you add this code to the page to the point you want the chart to appear:

<embed src="https://webserver.terageek.org/netdata/demo.html" type="text/html" height="100" width="200" />

Does it work now?

[ktsaou]

This should work, and you don't need the other code you added on your page.

To put your chart there, just edit demo.html at netdata (copy it - it is will be overwritten when you update netdata).

[UltimateByte]

Yay, it works, in a too little box, but it works !
https://www.terageek.org/servers/

[UltimateByte]

Thank you so much ! I need to figure out a way to enable autorefresh by default, and then i can definitely work with that !

[ktsaou]

To have autorefresh enabled, add this at the page, after loading dashboard.js:

<script>
NETDATA.pause(function() {
  NETDATA.options.current.stop_updates_when_focus_is_lost = false;
  NETDATA.unpause();
});
</script>

This however, will continue updating the charts while the page is open, even if it does not have the focus.
I will try to find a way for focus inheritance.

[ktsaou]

I updated it, so copy it again...

[ktsaou]

Check also the other options at the top of dashboard.js. You can control the theme, online help, etc.

[ktsaou]

Check also the other options at the top of dashboard.js. You can control the theme, online help, etc.

You can set all those before loading dashboard.js on the html of the page that is embedded on your site.

[UltimateByte]

Thanks
Well, here is what i got now:

• Copied demo.html to webserver.html
• Changed the integration code to : <embed src="https://webserver.terageek.org/netdata/webserver.html" type="text/html" />
• Tried some ways for the unpause script, ended up putting it at the bottom of webserver.html
  -> Works out well for the standalone page https://webserver.terageek.org/netdata/webserver.html
  But not for the website integration that stops refreshing at all : https://www.terageek.org/servers/

I'll try within dashboard.js directly. But doesn't this one get erased upon update as well ?

[ktsaou]

No, don't change dashboard.js.

Before loading dashboard.js in webserver.html, add this:

<script>
var netdataCallback = function() {
  NETDATA.setOption('stop_updates_when_focus_is_lost', false);
};
</script>
<script type="text/javascript" src="dashboard.js?v20161009-1"></script>

[UltimateByte]

Awesome, thanks !

[UltimateByte]

Well, i couldn't be more grateful for your attention and effort. I wish i knew more about js to help you with that.
I will definitely try to add these things to the wiki as a thank you.

I couldn't find a template to reproduce the overview, and index.html's syntax is quite different from the rest. Do you have something to point me to ?

Edit : I think i got it by copying code from the page itself.
http://pastebin.com/STfwwjL3
Edit2: Well it looks a bit small and the code is a mess in one line. :o))

[ktsaou]

I couldn't find a template to reproduce the overview, and index.html's syntax is quite different from the rest. Do you have something to point me to ?

These are the charts at the top of the netdata dashboard: https://github.com/firehol/netdata/blob/2015f140a1e26d87dc07ca21f677bc4f8d50b984/web/index.html#L1099-L1211

[UltimateByte]

Thanks. Yep, i saw that, but this syntax alone won't work without some (probably a lot) stuff from the rest of the index.html. Or maybe it just lacks some html tags to work. I tried to put it between a div, with no luck. This whole code is quite complex for the non web dev i am i have to say.

[ktsaou]

yes I know, but you can just use the divs:

            head += '<div style="margin-right: 10px;" data-netdata="system.swap"'
            + ' data-dimensions="free"'
            + ' data-append-options="percentage"'
            + ' data-chart-library="easypiechart"'
            + ' data-title="Free Swap"'
            + ' data-units="%"'
            + ' data-easypiechart-max-value="100"'
            + ' data-width="8%"'
            + ' data-before="0"'
            + ' data-after="-' + duration.toString() + '"'
            + ' data-points="' + duration.toString() + '"'
            + ' data-colors="#DD4400"'
            + ' role="application"></div>';

is:

            <div style="margin-right: 10px;" data-netdata="system.swap"
            data-dimensions="free"
            data-append-options="percentage"
            data-chart-library="easypiechart"
            data-title="Free Swap"
            data-units="%"
            data-easypiechart-max-value="100"
            data-width="8%"
            data-before="0"
            data-after="-300"
            data-points="300"
            data-colors="#DD4400"
            role="application"></div>

For duration I used 300 seconds = 5 minutes of data in the past. If you are not going have line chart to hover, you can also set these to 1.

[UltimateByte]

Gosh ! Thanks for the enlightment.
Let's notepad++ this.

[UltimateByte]

Well, i've never been so close !
I got this for now. http://hastebin.com/sequqogala.xml
Will improve it later, i gotta sleep. I will try to make it as close to the original as i can share the final result. This definitely will need to be added as an example and put into the wiki. :)

Edit: Well, i couldn't resist after so much effort. I matched netdata black color theme.
http://hastebin.com/sozenefuhe.xml
Added into the page with <embed src="https://webserver.terageek.org/netdata/webserver.html" type="text/html" height="200" width="100%" />
Here is the result: https://www.terageek.org/servers/

Gosh, it feels good to have this sorted out.

Concerning myself, i'll just have to figure out how to add the game server to this. But THIS will be tomorrow. ^^

[UltimateByte]

Well, i'm done adding the second server ! I like it ! https://www.terageek.org/servers/

Was actually a pain to do again. For some reason, the /netdata couldn't be accessed through game.terageek.org/netdata until i disabled the default game.terageek.org virtualhost. Took me ages to figure this out. I must have something wrong on both my servers that prevents ServerAlias /path from working as i want. Maybe apache 2.4 directives about that. I looked at apache docs but couldn't get info about this kind of ServerAlias.

I'd like to figure this out first so that i can add 100% accurate and relevant information to the wiki.
So any virtualhost master is welcome to help.

Please keep this opened to remind me to add some stuff to the wiki.
Things i'd like to add:
1) Proxy config (more info)
2) TLS (https) redirect via proxy config
3) Dashboard overview template
4) Wordpress integration
5) Path to /usr/share/netdata/web needs to be told in Custom Dashboards section

[ktsaou]

of course, I assigned it to you.

It looks nice... you could probably make them a little bigger...

[ktsaou]

Also, you can save bandwith by replacing 300 and -300 with 10 and -10.

This number controls the number of history points the charts are loading. So, now they load 5 minutes of data on every refresh. It is not needed if you don't have a line or area chart where mouse hover is possible.

Keep in mind you are loading in webserver.html the file dashboard.js twice...

[UltimateByte]

Thanks for the profip, data-before/after fixed.
I'm running dashboard.js twice because for some reason, it won't auto refresh out of focus if i don't.
Any clue ?

So that i can sleep a bit less ignorant, can you explain for a web newbie, what does the "v20161009-1" means from "dashboard.js?v20161009-1" exactly ? Is that really necessary ?

[ktsaou]

Any clue ?

This is really very strange. No, I don't have any clue why this happens. Wordpress is so weird that I am thinking of installing one myself to trace the issues you faced...

can you explain for a web newbie, what does the "v20161009-1" means from "dashboard.js?v20161009-1" exactly ? Is that really necessary ?

Browsers cache files. Every time I change dashboard.js I change ?vYYYMMDD-N to the current date, to force the browsers use the latest version. Without it, there is no way to force the browser load the latest, apart of course clearing the browser cache.

[UltimateByte]

Thanks. So this would need to be changed at any .js update, not very versatile. I'd rather stick to default dashboard.js then, unless there is * no* good way to tell the browser not to cache the file.

That's a good idea to try out WordPress yourself, you'd be more efficient at finding what's going on with it. Takes a few minutes to setup blank one, and ages to custom it (especially if you don't want to hardcode anything for easy updates). It would also allow us to know what is about my server or WordPress config and what's not.
Well, big day tomorrow, time to sleep for me :)

[ktsaou]

So this would need to be changed at any .js update, not very versatile

No it would not. Your HTML is not going to use the new features.

[shadycuz]

I'm using a WP install behind a Nginx Reverse Proxy. I can follow through with the steps here and help document the process. I have been lazy the past two weeks.

@UltimateByte Have you started? Do you think we could work on this together? Maybe google docs or something?

[UltimateByte]

@shadycuz I didn't start yet. I'm in very busy days, and i want to do it right.
I think i wouldn't be very efficient with google doc. I suggest that i just do the wiki update when i can, then you correct or add whatever you think is needed. Or the opposite way if you wish to work on it right now. Wikis are supposed to evolve over time, i don't think it's very problematic if it's not perfectly perfect on the first shot since it would still be more complete than it already is.

[UltimateByte]

I noticed eth0 in/out differs from ipv4 in/out. So what's more relevant to watch for in/out traffic ?
data-netdata="net.eth0"
vs
data-netdata="system.ipv4"

[UltimateByte]

Am i the only one getting a 404 on https://github.com/firehol/netdata/wiki/Running-behind-apache/_edit ?

Edit: Seems like it's happening to all edit pages of all repos at the moment. Solved.

[ktsaou]

I noticed eth0 in/out differs from ipv4 in/out. So what's more relevant to watch for in/out traffic ?

ipv4 includes localhost traffic.
real network traffic is reported only at the interfaces

[UltimateByte]

Well, interface would be more suitable for the dashboard then, what do you think ?

I reworked the apache page https://github.com/firehol/netdata/wiki/Running-behind-apache
And added webdir info here https://github.com/firehol/netdata/wiki/Custom-Dashboards#web-directory

Remains todo:
3) Dashboard overview template
4) Wordpress integration

[ghost]

Hi.

I also have an issue when it comes to mod proxy for apache and netdata.
Seem to be getting a SSL_PROTCOL_ERROR when pointing my web browser to it.

Also a2enmod netdata.conf didn't work for me but a2enmod netdata-ssl.conf did(this conf file was placed in the /etc/apache2/sites-available folder instead as a2enmod couldn't find the conf at all)

[ktsaou]

nice edits @UltimateByte !
I hope you will help @Kiwi-1995 too (sorry guys I don't use apache).

[UltimateByte]

Hey guyz, just woke up, have just a few time to get ready.
@Kiwi-1995 It appears that you don't have either a valid SSL certificate for the domain you're trying to acccess or mod_ssl isn't enabled.
I would try without SSL first, that the proxy works. Using a subdomain might help. I did not figure a solution that i like and trust yet. Here is what i'm doing:

My main VirtualHost,, non-SSL was containing

        # Addresses
        ServerName terageek.org
        ServerAlias www.terageek.org
        ServerAlias imap.terageek.org
        ServerAlias smtp.terageek.org
        ServerAlias webserver.terageek.org

Then i used certbot to get my certificates, which created https virtualhosts with proper certificates for all those subdomains. I can't use my main domain terageek.org/netdata or www.terageek.org/netdata because it will try to display a wordpress page. But i can use webserver.terageek.org/netdata which will work.

Edit:
That was before doing the proxy thing. Afterwards, i added the netdata.conf virtualhost.

<VirtualHost *:443>
        RewriteEngine On
        ProxyRequests Off

        # Local netdata server accessed with '/netdata', at 127.0.0.1:19999
        ProxyPass "/netdata" "http://127.0.0.1:19999/" connectiontimeout=5 timeout=30
        ProxyPassReverse "/netdata" "http://127.0.0.1:19999/"
        RewriteRule ^/netdata$ https://%{HTTP_HOST}/netdata/ [L,R=301]

        ErrorLog ${APACHE_LOG_DIR}/netdata-error.log
        CustomLog ${APACHE_LOG_DIR}/netdata-access.log combined
</VirtualHost>

Hope it helps.

[UltimateByte]

Just a reminder to put it into the wiki:

root@webserver:/etc/apache2/mods-available# apachectl -t
[Fri Oct 14 00:41:17.331405 2016] [proxy_html:notice] [pid 31784] AH01425: I18n support in mod_proxy_html requires mod_xml2enc. Without it, non-ASCII characters in proxied pages are likely to display incorrectly.

Fix :
root@webserver:/etc/apache2/mods-available# a2enmod xml2enc
Enabling module xml2enc.
configuration, you need to run:
service apache2 restart
root@webserver:/etc/apache2/mods-available# service apache2 restart

[ghost]

I won't be able to try now since my VPS just got nuked /shrug

mod_ssl was certainly enabled though
certbot was used with let's encrypt and the ssl cert was valid.

[UltimateByte]

@Kiwi-1995 Sorry for your loss.
The point is that i had to use an alias unused subdomain that had SSL certificates on it in order for it to work.

[ktsaou]

Regarding the wordpress integration issue, there is a similar issue with echarts on #1383
I am trying to figure out why this happens.

I am closing this. I'll update it if we find a solution with echarts.

[ktsaou]

I have made a few changes in netdata to improve compatibility.
I think that if you retry to embed it, it should work with wordpress too.
Thanks!

[UltimateByte]

Just to feedback: I can confirm thad embed mode works perfectly!

<embed src="https://netdata.terageek.org/" type="text/html" height="640" width="1280" />

If you want auto refresh, you can even link to /#;theme=slate;help=true;update_always=true

Also now I know how to make perfect reverse proxies using Plesk, and it's never been that easy to convert netdata to HTTPS. Though it should work with custom apache configs as well. I recommend creating an HTTPS subdomain that you cann "netdata". Then you can alias your servers like /srv01 /srv02...

Example config:

SSLProxyEngine on
RewriteEngine on
RewriteRule /vm/(.*) http://localhost:19999/$1 [P,L]
RewriteRule /cloud/(.*) http://cloud.lrob.fr:19999/$1 [P,L]
RewriteRule /sbox01/(.*) http://sbox01.terageek.org:19999/$1 [P,L]
RewriteRule (.*) http://localhost:19999/$1 [P,L]

Warning: The order matters! The main URL shall be last.