cloudpbx / monster-ui-voip-otf Goto Github PK
View Code? Open in Web Editor NEWThis project forked from opentelecom/monster-ui-voip
Monster UI Application: Simplified PBX configuration for end-users
License: Other
This project forked from opentelecom/monster-ui-voip
Monster UI Application: Simplified PBX configuration for end-users
License: Other
As discussed in issue #1, the web UI has a /devices API which is used in the Devices page.
In addition to including the /registration API summary and details in the web UI Devices list from issue #1, we would also like to add details regarding the /presence API
The main list API for Devices is:
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/devices
This will provide a list of devices in the following format:
{
"device_type": "{device_type}",
"enabled": {true|false},
"id": "{randomly-generated-device-id}",
"mac_address": "{mac-address}",
"name": "{device-name}",
"username": "{device-sip-username}"
}
The associated list API for Presence is:
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/presence
This will provide a list of presence_id and their subscribing SIP devices the following format:
"subscriptions": {
"{presence-id}": {
"dialog": {
"{subscription_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"version": 1
},
"{subscription_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"user_agent": "{sip-device-model-firmware}",
"version": 1
},
"{subscription_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"version": 1
}
}
},
"{presence-id}": {
"dialog": {
"{dialog_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"user_agent": "{sip-device-model-firmware}",
"version": 1
},
"{dialog_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"user_agent": "{sip-device-model-firmware}",
"version": 1
},
"{dialog_request_call_id}.": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"version": 1
}
},
"presence": {
"{presence_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"user_agent": "{sip-device-model-firmware}",
"version": 1
}
}
},
"{presence-id}": {
"dialog": {
"presence": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"version": 1
}
}
},
"{presence-id}": {
"dialog": {
"{dialog_request_call_id}": {
"expires": {subscription-dialog-expiry-in-seconds},
"from": "{subcriber-device_sip_username}@{account-sip-realm}",
"notify": {
"body": "undefined",
"reply": 0,
"sequence": 0
},
"stalker": "BLF-{coordinating-SIP-presense-SBC-server}",
"timestamp": {erlang-timestamp-in-ms},
"user_agent": "{sip-device-model-firmware}",
"version": 1
}
}
}
The key variables from this list are:
{presence-id}
which is the presence target that other SIP devices are watching for status updates.{subcriber-device_sip_username}
field which is found in the "from": "{subcriber-device_sip_username}@{account-sip-realm}"
field.The easiest way to think of these is observed devices and the observers devices. So, how does this relate to our devices?
What we want to see in the Devices page new right side Presence column is the observed
{presence-id}
that each Device is watching
If we have a device with {subcriber-device_sip_username}: 200
which would show as "from": "200@{account-sip-realm}"
in the subscription observers list for the observed presence id *3101
that we want to show that this is an observed {presence-id}
that
If we find an observed {presence-id}
of *3101
in the /presence API list and in this observed {presence-id}
we see that there is an observer "from": "200@{account-sip-realm}"
, which is {subcriber-device_sip_username}: 200
, then we want to show that *3101
is being watched in the right column of the matching Device row for the Device that has {sip_username} = 200.
If we find an observed {presence-id}
of 201
in the /presence API list and in this observed {presence-id}
we see that there is an observer "from": "200@{account-sip-realm}"
, which is {subcriber-device_sip_username}: 200
, then we want to show that 201
is being watched in the right column of the matching Device row for the Device that has {sip_username} = 200.
In the above examples, both *3101 and 201 would be shown together on the right column on the Device that has {sip_username} = 200.
In SmartPBX, the Devices page provides a list of devices with icon which indicate device type and device registration status.
The main list API for Devices is:
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/devices
This will provide a list of devices in the following format:
{
"device_type": "{device_type}",
"enabled": {true|false},
"id": "{randomly-generated-device-id}",
"mac_address": "{mac-address}",
"name": "{device-name}",
"username": "{device-sip-username}"
}
The additional status list API for Devices is
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/devices/status
This will provide a status list of devices in the following format:
{
"device_id": "{randomly-generated-device-id}",
"registered": {true|false}
}
When the device has status "registered": true
it's icon is shown in green.
When the device no matching status, it's icon is shown in red.
When the device is "registered": true
and it's icon is green, it would be helpful to use the Registration API to get more details on the registration status.
The main list API for devices Registrations is:
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/registrations
This will provide a registration list of devices in the following format:
{
"account_name": "{account-name}",
"account_realm": "{account-sip-realm}",
"authorizing_id": "{randomly-generated-device-id}",
"authorizing_type": "device",
"bridge_ruri": "sip:{device-sip-username}@{account-sip-realm};fs_path=sip:{sbc-registrar-proxy-hostname}",
"call_id": "{call-id-unique-to-each-registration-session}",
"contact": "sip:{device-sip-username}@{remote-device-registration-ip}:{remote-device-registration-port};rinstance={unique-rinstance-id};transport={TCP|UDP}",
"contact_ip": "{remote-device-registration-ip}",
"contact_port": {remote-device-registration-port},
"event_timestamp": {erlang-timestamp},
"expires": {seconds-until-registration-expriry},
"first_registration": {true|false},
"from_host": "presence.dev.cloudpbx.ca",
"from_user": "{device-sip-username}",
"initial_registration": {erlang-timestamp-first-registration},
"last_registration": {erlang-timestamp-last-registration},
"original_contact": "<sip:{device-sip-username}@{remote-device-registration-ip-original}:{remote-device-registration-port-original};rinstance={unique-rinstance-id-original};transport={TCP|UDP}>",
"previous_contact": "sip:{device-sip-username}@{remote-device-registration-ip-previous}:{remote-device-registration-port-previous};rinstance={unique-rinstance-id-previous};transport={TCP|UDP}",
"proxy_path": "sip:{sbc-registrar-proxy-hostname}",
"realm": "{account-sip-realm}",
"register_overwrite_notify": {true|false},
"registrar_node": "kamailio@{sbc-registrar-node-hostname}",
"source_ip": "{remote-device-registration-ip-know-to-device}",
"source_port": "{remote-device-registration-port-know-to-device",
"suppress_unregister_notify": {true|false},
"to_host": "{account-sip-realm}",
"to_user": "{device-sip-username}",
"user_agent": "{manufacturor-model-firmware}",
"username": "{device-sip-username}"
}
The matching unique IDs in the list provided from the above 3 APIs requests are as follows:
/devices
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/devices
"id": "{randomly-generated-device-id}"
/devices/status
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/devices/status
"device_id": "{randomly-generated-device-id}"
/registrations
https://{crossbar-api-server}:8443/v2/accounts/{account_id}/registrations
"authorizing_id": "{randomly-generated-device-id}"
The /devices and /devices/status APIs are already queried in the Devices web page. The /registrations API request needs to be added.
In order to provide access to this new /registrations API information, a new column should be added to the Devices web page. This column should be on the right side of the existing table and titled "Registration".
In this new column, for Devices that do have a matching Registration record, there should be a new icon button. This should be a small circular gear icon button using class="fa fa-cog fa-lg details-cdr monster-tooltip-loaded"
.
When the web UI user clicked on this new registration details icon, there should be a pop-up div window using the class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-front ui-draggable"
.
In the top of this new div window, the title in class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"
should be Device Registration Details.
Within the main content section of this div window, the JSON from the matching device's /registrations API details should be print using class="renderjson theme-light"
.
The entirety of the above JSON registration details should be included.
As identified in issue #1, the /registrations API provides details on SIP device registration for /devices that have /registrations/status of "registered": true
.
In the web UI Devices page list view, it would be very helpful to have the current IP address of the registered device listed beside the device.
Currently, the web UI Devices page has several columns. The second column on the left has the title Name / Mac Address. This title should be changed to Name / Mac Address / Registration IP.
In the individual rows of devices that are currently registered, these details should now be included.
"contact_ip": "{remote-device-registration-ip}",
"contact_port": {remote-device-registration-port},
"source_ip": "{remote-device-registration-ip-know-to-device}",
"source_port": "{remote-device-registration-port-know-to-device",
They should be shown in a single line in a small font using the below format
Contact contact_ip
:contact_port
/ Source source_ip
:source_port
This line should be below the Name / Mac Address line in the same column.
If there is no registration for the matching device row, these registration details should not be visible.
As we identified in issue #3, each devices has a one or many {presence _id}
subscriptions. Each of these {presence _id}
subscriptions will be listed in the new right-side column of the Device.
Sometimes, the presence manager can loose synch with the actual state it should be in. A SIP device's BLF presence key could show a status of blinking for ringing when in fact the device being observed is no longer ringing. When this happens, web UI admin users need to be able to reset {presence _id}
manually.
There is a special API request that can be made to reset individual {presence _id}
. Using the POST API method below, with the JSON payload '{"data": {"action": "reset"}}'
, we are able to reset the current presence status of each {presence _id}
.
https://{api-server}:8443/v2/accounts/{account _id}/presence/{presence _id} -d '{"data": {"action": "reset"}}'
In the same column/row cell of the listed {presence _id}
, aligned to the right, there should be a small fire extinguisher icon, the same used in class="monster-link"
in the Call Logs web page.
When the admin web user clicks on the new presence fire extinguisher icon, a pop-up div page should appear call Presence Reset. In this page, each of the {presence _id}
that his device is a subscriber of should be listed, one per row. In each of the rows in the pop-up div page, there should be a horizontal rectangular red Reset button which will fire off the above PUT API command for the matching {presence _id}
.
Additionally, at the very top of the pop-up div page, there should be a horizontal rectangular red Reset All button that we issue the above PUT API command for all of the matching {presence _id}
in the list for this device.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.