@pager/queue-monitoring NPM

Web Queue Monitoring

Web Queue Monitoring is an app library intended to be used within Web Command Center and display information about agents teams and current queue in real time.

Installation

Use the npm to install the dependencies.

npm install

Development mode

For running this project in development mode use:

npm start

This will start a webpack dev server in http://localhost:8080 with HMR enabled.

Backend Mocks

When running this app in development mode there are no services we can access without a token for authentication, therefore there are a couple of mocks responses already set in this project to test the AJAX calls and the websocket connection.

To add more endpoints or change any of the current ones already placed go to file ./webpack/webpack.dev.js there you will find in the webpackDevServer config a method inside of devServer called before, that method will allow us to interact with the express server instance that is run during development mode, there you can attach as many routes as you want and return what is expected as a response. (Note: this routes will be load before the app so try to no overlap or override any of those).

Ex:

{
  // ...
  devServer: {
    // ...
    before: (app) => {
      app.get('/new-endpoint', (req, res) => {
        return res.json(mocksDataForEndpoint);
      });
    }
  }
}

To add more responses in the Socket side, those are handled in the ./src/template.html, in that file you will find the code used to create a basic instance in the app and pass down the parameters needed, also there is a mock socket connection, that will trigger randomly some events to the app, calling the callbacks passed to the subscription of the events as as WS will do

Ex:

QueueMonitoring(element, {
  socket: {
        on: (event, callback) => {
          // Subscription of the events
          // Use callback to call the handler
          callback(mockEventData);
        },
        off: () => {
          // Off implementation of the subscription
        }
      }
    });
})

Usage

This app/library is distribuited as a UMD library so we can import it in any project or use it as a script in any html document.

import QueueMonitoring from '@pager/queue-monitoring';
import socketIO from 'socket-io';

const containerEl = document.getElementById('#container');
const options = {
  handleError: (error) => {
    // Posible errors getting data
    console.error(error);
  },
  socket: socketIO('ws://localhost:3000')
}

// Create the instance to be displayed in your app
QueueMonitoring(containerEl, options);