Asterisk Queues Realtime Dashboard with amiws and Vue

Project "amiws_queue" is a small dashboard for Asterisk queues management and monitoring. It can work with multiple Asterisk servers and basically visualises AMI queue events from the servers.

It is an open source project and can be found on github: https://github.com/staskobzar/amiws_queue

Top panel provides information about all queues from all Asterisk servers:

• active and waiting callers
• abandoned and completed calls
• paused and active queue agents

Search fields allows to filter by queue name. It accepts regex as well. Also dashboard can send AMI command to pause/unpause all agents in all filtered queues.

Each queue card shows queue's settings and allows to pause/activate all queue's agents as well as open the list of agents and queue callers.

Monitoring calls in queue.

Agents list can sent remove from queue AMI message to Asterisk and allows to drag and drop agents to other queues.

When there are calls in queue, it will display current call time and hold time.

This project is only a front-end to the other project "amiws", which provides web-socket connection and serves as a proxy between Asterisk servers AMI and web-socket clients.

Check another blog article for more details and some configuration information. This article also explains how to configure access authorization and SSL protection of HTTP/WEB-SOCK connections.

Install and setup

This dashboard is developed with VueJS and Vuex. First clone the project and install npm packages:

git clone https://github.com/staskobzar/amiws_queue.git
cd amiws_queue
npm install

This install all necessary packages required to build project. Optionally, you can run "npm run test" to assure that everything is fine. Now we need to build production code. Here we must provide environment variable "WS_URL"  which will contain IP address and port of the web-socket connection. Usually, the IP is the one of the machine where "amiws" machine and port is the same as the port in "amiws" configuration parameter "ws_port".

Note the singe quotes inside double quotes for the value:

WS_URL="'ws://10.20.30.01:8000'" npm run build

This will create production distribution in folder "dist" with a footprint around 3M

The last step is to upload folder "dist" to the server and copy its content to the folder which is set with "amiws" parameter "web_root".

Asterisk queue configuration

There are two important Asterisk configuration options that must be activate for each queue:

eventmemberstatus = yes
eventwhencalled = yes

When enabled, Asterisk will generate additional queue Events which are importent to display agents status correctly in the dashboard.

For realtime Asterisk queues this parameters whould be set to "1" in the queues table.