b-venter / miwallboard

Wallboard for Mitel's MiCCB

miWallboard

Quite simply, this is a wallboard for Mitel's MiContact Center Business (MiCCB). It provides an easier overview of the contact center's current status and that of the agents. It uses the REST API provided by MiCCB. Being an Angular app, it can be hosted by most web servers. Once a browser like Firefox or Chrome loads the "page", it actually runs from the browser, being as it is a Single Page Application.

Grab the latest release. (You won't need the source files normally, only angular-wallboard.zip) Below you will find instructions on installation and settings.

1. Setting up an API user on MiCCB
2. Wallboard settings
3. Hosting with IIS
4. Building from source
5. Feature requests and contributing
6. Screenshots

1 - Setting up an API user on MiCCB

While you could run this using your admin user, that is just a bad idea on so many levels. Therefore, to encourage good security, here is a step-by-step guide on how you can create a user just for the wallboard with only as much as access as needed (which, if you are curious, is very little).

Add a security role

• In YourSite Explorer, go to Security role, and choose Add
• Name: Wallboard API
• Under General, only enable "May access contact center client and ignite"
• Under Realtime control, only enable "May view realtime monitor"

Now create the API user

• In YourSite Explorer, go to Employee, and choose Add
• First name: Wallboard
• Last name: Display
• userid: wallboard (Note: this will be needed for the settings of the wallboard)
• pasword: A strong password! (Note: this will be needed for the settings of the wallboard)
• Site: select as appropriate
• Security role: Wallboard API (i.e., the security role we just created)

Nice! Never compromise on security

2 - Wallboard settings

In the assets folder is a file called settings.json. Here is what each entry can contain:
"refreshTime": A measurement in seconds, specifying how often fresh data should be retrieved. Take into account your server load, etc.
"serverUrl": IP address or pingable hostname / FQDN for the MiCCB server. No "http" or "/".
"apiUsername": As per the userid created on MiCCB ("wallboard" in the example above).
"apiPassword": Also as per the password you created for said user.
"activeQ": If you have multiple queues, the wallboard will retrieve them in a list - starting with 0. Leave as is to start with. Once the wallboard is connected and running, you will be able to see a list of each queue and its associated position.
"wallBanner": Change at will.
"answeredAsPercent": Set to true (no quotes "") if you want answered statistics to be displayed as a percentage value normally. By default it is set to false. Can be toggled in the app, but this will return to default on a reload/refresh.
"abandonedAsPercent": Set to true (no quotes "") if you want abandoned statistics to be displayed as a percentage value normally. By default it is set to false. Can be toggled in the app, but this will return to default on a reload/refresh.

3 - Hosting with IIS

Reference link

1. Extract the package and copy the directory ("angular-wallboard") to C:\inetpub\wwwroot
2. Using IIS Manager, naviage to Default website > Right-click > Add

• Alias: miWallboard
• Physical path: C:\inetpub\wwwroot\angular-wallboard

3. Upload the web.config file (there is a sample one avalable with the source code) to C:\inetpub\wwwroot\angular-wallboard\ (i.e., it will be in the angular-wallboard\ directory alongside index.html)
4. Edit your settings. C:\inetpub\wwwroot\angular-wallboard\assets\settings.json
5. Restart the services using IIS Manager, select Default website and choose "Restart" from the panel on the right.
6. When adding a new release, always keep a backup of the settings.json file, since the upgraded package will replace your custom file with the one provided by default.

4 - Building from source

Reference link
So you are a (budding?) developer and would like to play around? Go for it! And if you would like to share some cool accomplishment, please check point 5. Co-developers are always welcome. But I digress.

• clone this project
• once extracted, cd 'project name'
• npm install
• And now you can work / serve it (ng serve)

Note that the above assumes that you have a Node and Angular environment already set up.

5 - Feature requests and contributing

At the moment, this is a small project. So contributing is simple:

1. Open an issue with your suggestion
2. Once a way forward has been agreed and approved, do a pull request with your changes.

Please note that some developers have strong opinions while other developers might just be starting out. Mutual respect, good explanations, a modicum of patience and a good sense of humour can go a long way in promoting a healthy, developer environment.

6 - Screenshots

miwallboard's Issues

Add "agent" component

Similar to #9, but for agent view only. I.e., ~/agent/:id.

Purpose is that there is a URL that can be used to directly view only the agent's performance details. This URL must be present (1) as a clickable icon with each agent and (2) in the detailed side-bar/dialog that appears when clicking on an agent on the home component.

Set default queue to display on "home"

There is already one solution for this: set in ~/assets/settings.json.

However, in case of multiple queues and different people wanting different queues on default, let's add a "id" to the home url:

• by default, /home will load the the queue in settings.json
• /home/:id will load the queue identified by ":id"

Add version in footer

For easy verification of the loaded app version, and also to provide confirmation that the page has loaded the latest update and not just from cache.

Toggle between percent and whole number

Some users would like to view abandoned and answered values as percentage and not the actual whole number.
Therefore:

• add a boolean (true/false) to set whether percentage or whole number is displayed
• update options (ngIf) to display percentage or whole number based on boolean
• add boolean(s) to settings.json so that a default can be customised.

UI/UX improvements

The current styling is very flat. Adding tasteful shadows and transitions can improve the "feel" of the app

Add agent detail view in home

Provide a dialog view or side-draw when clicking on an agent. The dialog/side-draw must contain all (most) agent details.

Incorrect handling of 401

Currently when an API call is made to the Miccsdk and a response of 401 is received, the SPA retries immediately - with the same result. This results in 100x more entries in the IIS log files, which equals massive log files and filling of HDD

Token refresh

The tokens from MiCCB are long lived. So the current solution is manual: if nothing is getting refreshed, the user can "Clear" tokens and then "Connect" to get a new one.

Going forward, it would be better if the system will use the token refresh options provided by MiCCB

Add footer that links to the GH project

Simple change. Add a footer similar to the navbar: i.e., placed in the root component and not in each of the components from router outlet. The link should simply direct to https://github.com/b-venter/miWallboard. Maybe use the GH icon but note the rules on copyright, etc.

Add a "queue" component

Create a "queue" component so that ~/queue/:id will take you directly to view only the queue details. Same info as shown on /home, but without the agent info.
Note that a Route Guard will need to be in place so that this only works if a valid token is present.