"Switchboard Lite" - Open Source App for Monster UI

[RuhNet]

Hi all! I have released another Monster UI app that I think will be of use to some people. It is called Switchboard and is a real-time device/call monitoring app.

You can view registered devices on the system, along with their owners, current extension, temporary hotdesk extensions. Call status of devices is updated in real time via websockets, along with an activity log, which can be collapsed if you don't need it. When the Switchboard app is first loaded, Crossbar APIs are queried to see which devices are currently registered, and then the channels API is used to set the current state of the devices. After that, websocket events via Blackhole update the devices visually as calls come in/out. You can see when a device rings, is idle, is answered, or is on hold., along with caller/callee name and number, call direction, and an in-call timer.

https://ruhnet.co/blog/switchboard-kazoo-app-monster-ui

Part of the reason I developed this app was for a client that uses a combination of hotdesking and normal extensions. Users and management were often confused about who was logged in where, and why they were getting calls for someone else (their device was hotdesked to another user and they forgot to logout). So, in addition to the real time call monitoring, this app gives a very clear visual indication of which devices are hotdesked, and which extension[s] are currently active on any particular device.

 

Try it out and let me know what you think!

Also, give me a GitHub star if you find it useful, and feel free to send pull requests if you make useful changes to the source code. I intend to continue development and add features over time.

Edited February 13, 2022 by RuhNet (see edit history)

[tomas_]

Nice!
Great work! Thank you!

However it doesn't work properly on my setup.
There is no icon and no screenshot when initiating, see screenshot (the png's are actually there on the filesystem)

Also the switchboard is "dead", it doesn't show any activity when making calls and nothing in the status log etc.

I'm using HTTPS on port 8443 and Kazoo 4.3, if it makes any difference?
 

Br - Tomas

Edited February 14, 2022 by tomas_ (see edit history)

[fmateo05]

Excellent!!, I have installed it for testing on my environment. Needed to manually refresh the page by clicking the app title  for update.

[RuhNet]

@tomas_ and @fmateo05 I’ve noticed that sometimes web sockets subscription takes a minute or so to activate before events start flowing. I need to look more into that. 

Also, I just realized I forgot to include something important in the installation instructions—you have to add your websockets url in monsterui config.js. Also, the web sockets port needs to be open in your firewall so the app can connect to it. I’ll update the readme file with proper instructions in just a bit.

Edited February 14, 2022 by RuhNet (see edit history)

[RuhNet]

@tomas_ @fmateo05 I have updated the README file now with correct instructions.

You need to add the following line into your api block in the MonsterUI js/config.js file:

socket: 'ws://mykazooserver.tld:5555',

Or if you proxy websockets with TLS, which I strongly recommend:

socket: 'wss://mykazooserver.tld:5443',

Of course substitute the port for the one you actually use.

Then make sure the port is open to the public in your firewall:

firewall-cmd --permanent --add-port=5443/tcp
firewall-cmd --reload

 

I also found a typo in the app metadata file, so that is the reason the icon and screenshot were not being picked up @tomas_

Sorry about that. I thought I had previously checked and corrected that but evidently not. Do a git pull (or delete and re-clone) and try re-initializing the app and it should work.

Edited September 12, 2022 by RuhNet (see edit history)

[RuhNet]

I corrected the code to disable pagination on API requests. This was an issue if there were more than 50 devices on a system---the app wouldn't show them all properly. So you'll want to do a git pull to bring down the latest changes.

Also, I found the delay before websockets kicking in only happens if you are masquerading---when you first login to the parent account, if you open Switchboard there, and then move to a child account, the websocket connection has to time out on the old account before it can be re-established on the child account you switched to. It doesn't not occur if you log directly into an account. I will see if I can modify the code so that an unsubscribe is triggered if the account is changed via a masquerade.

[tomas_]

Great, thanks!
I'll test and report the results!

[tomas_]

Hi!
Long time, haven't tested this until now.

I can't get the realtime info to work, guess it's something with the websockets?
I'm getting "Subscribing to Websockets..." in the web console log, and when I try to change parameters in the config.js i sometimes getting error from the browser. When using the correct parameters ("socket: 'ws:myserver.com:5555'") the error messages disappears but it stil isn't updating the switchboard in realtime.

Br - Tomas

[RuhNet]

Hmm, do you see anything of note in the browser console when you have the correct socket URL in your config file? Also, is the port open in your firewall?

And make sure that the blackhole app is actually running on the server.

[tomas_]

Thanks for a quick answer.
Only thing that is visible in the browser console is "Subscribing to Websockets..."
All ports are open from my IP, and I can connect with telnet on port 5555.
Blackhole app is running.

[RuhNet]

Have you pulled the latest version of the app? Also, maybe try with a different browser as it’s possible some browsers block unencrypted websockets by default.

Also, do your proper devices appear initially?

[tomas_]

Yes, I actually did a fresh install also.
Tried both in Firefox and Chrome (MacOS).

Everything seems fine, devices, onging calls etc. It's just the live updates that doesn't work, if I reload browser it updates just fine.
That's why i suspect the  Websockets doesn't work properly.

[RuhNet]

Is your Monster UI being served over HTTPS? If so, are you proxying your websockets also to HTTPS/WSS? If not, Im pretty sure all browsers will block the unsecured WS traffic as being "mixed content". If you're also accessing Monster over unsecured HTTP then it shouldn't be an issue, but  mixing would cause a problem.

I should probably make a note of that in the docs...

[RuhNet]

An easy way to proxy WS to encrypted WSS is using HAProxy, thusly:

listen kazoo-websockets
    bind *:7777 ssl crt /etc/ssl/yourcertificate.pem
    default_backend kapps-blackhole

backend kapps-blackhole
  balance source
    option forwardfor
    option http-server-close
    option forceclose
    no option httpclose
    server kz1.z100-blackhole 1.2.3.4:5555 check
    server kz2.z100-blackhole 2.3.4.5:5555 check
    server kz1.z200-blackhole 123.123.123.234:5555 check backup
    

Note that the certificate file is a full PEM file with cert, ca, and key all smashed into one file. Certbot, GetSSL, and my LEAPI system can all generate these automatically when using Let's Encrypt.

You can also use Nginx to proxy WS to WSS, and an example is in the Switchboard readme file.

Edited September 13, 2022 by RuhNet (see edit history)

[tomas_]

Yes, it's working now. I had HTTPS on MonsterUI but not the websockets - I should have known :)
However it isn't showing any errors in the console.

Thank you, great app!!

[RuhNet]

Great! Glad it’s working for you now. 😀

[tomas_]

Thanks!

I still having troubles getting the HAProxy to work. Even if I know it's not in your app you might have some ideas?
Can it be the haproxy.pem file that isn't correct? Not sure exactly which files from letsencrypt/certbot that should be included?

I'm getting errors in the HAProxy log:  

Health check for server kapps-blackhole/ourdomain.com failed, reason: Layer7 wrong status, code: 400, info: "Bad Request", check duration: 0ms, status: 0/2 DOWN.
kazoo-websockets~ kapps-blackhole/<NOSRV> 12/-1/-1/-1/12 503 212 - - SC-- 1/0/0/0/0 0/0 "GET / HTTP/1.1"

I've added this in haproxy.cfg:

 

[RuhNet]

Sorry for the delay—it looks like your cert is ok (otherwise the error would be different) but it’s the health check that’s failing. You might try adding “mode tcp” in the websockets backend section and see if that makes it happy. Or you can just remove the word “check” and that should take care of it.

[tomas_]

Thanks for reply!
Still can't get it to work. Where should I have "mode tcp"? Below "listen kazoo-websockets" or "backend kapps-blackhole"?

[RuhNet]

The backend section. Alternately you can try just removing the word “check” and it should work, but without monitoring the connection.

[tomas_]

Doesn't work, it complains when restarting:

Unable to use proxy 'kapps-blackhole' with wrong mode, required: http, has: tcp.
You may want to use 'mode http'.

This is my config file:

[RuhNet]

Hehe I forgot the default earlier in the config is set to http so you'll need to put mode tcp on the listen section as well. Also comment out the options. Here's what I tested just now on one of my machines and it's working as expected:

listen kazoo-websockets
    mode tcp
    bind *:7777 ssl crt /etc/ssl/myserver/fullpem.pem
    default_backend kapps-blackhole

backend kapps-blackhole
  balance source
    mode tcp
    #option forwardfor
    #option http-server-close
    #option forceclose
    #no option httpclose
    server yourserver-blackhole 1.2.3.4:5555 check

 

[tomas_]

Strange, still doesn't work.
Noticed you're using *:7777 and I have *:5443. But it doesn't work with 7777 either :/

[RuhNet]

Hmm yes that is strange. Attached is my whole config (sanitized) that I'm using in production. Maybe I made a change or two in the defaults section from the original and that's where the discrepancy is?

haproxy.cfg

[RuhNet]

Also, just to make sure, you did update your config.js with the TLS websocket port, correct?