IDMS Mobile (Mobile Navigator) Development Details

Updated by Anna Dowling 10/11/2020

See also: IDMS Proxy

The mobile navigator application (idms-mobile) is a Progressive web application with mobile support which allows users to views their devices, alarms and discovered metrics in one tool. Users are provided an overview of their networks status as well as management capabilities per device. The APP has been integrated with the IDMS databases and api endpoints via the idms-proxy application.

The primary goal for Errigals mobile application (currently referred to as Mobile Navigator) is to perform as a device management mobile tool which supports a vast array of technologies. The intention is to design the mobile interface in as flexible a manner as possible so as to easily represent new technologies on mobile without further development changes.

The idms-mobile front end application takes data from all of Errigal's legacy IDMS databases to produce a best-in-class device management tool. It also utilises the new MDC(Remote Discovery Framework) in order to poll for and display up to date device metrics (config and performance parameters). Alarm and Ticketing overview information is also displayed per device. The ticket data links out to the mobile ticketer for more in depth interactions with tickets.

Repo: https://bitbucket.org/errigal/idms-mobile/src/master/

For more information regarding the PWA project decisions see here. PWA setup is configured via the following files:

• manifest.webmanifest : https://bitbucket.org/errigal/idms-mobile/src/master/src/manifest.webmanifest
• ngsw-config.json : https://bitbucket.org/errigal/idms-mobile/src/master/ngsw-config.json
• PWAUpdateService: https://bitbucket.org/errigal/idms-mobile/src/master/src/app/services/pwa.update.service.ts

PWA Install Guide

For further information see Angular documentation for PWA and Service Worker setup:

• Service Worker Introduction
• Service Worker Configuration

• ios:https://betterprogramming.pub/debugging-your-iphone-mobile-web-app-using-safari-development-tools-71240657c487
• Android: https://blogs.oracle.com/vbcs/post/debugging-pwa-apps-on-android

• Angular 10
• Ionic 5
• Prettier Formatting Configuration (.prettier.json)
• node
• npm
• capacitor
• google maps
• googlemaps/markerclustererplus

For full package listing see package.json file.

The idms-mobile is served via the load balancer in our server deployments. Its environment specific variables are passed via the config.json file to the app at runtime.

Current Config Fields Are:

{
  "apiUrl": "https://mobile.towerqa.errigal.com/idms-proxy/api/v0",
  "googleMapsAPIKey": "AIzaSyB2_-NWm5nGMZgsU-wIivphnfemBM8DY-0",
  "ticketerLink": "https://sfqa.errigal.com/Ticketer/mobile/ticket/",
  "snmpManagerLink": "https://ironman.errigal.com/SnmpManager",
  "deviceFileUploadDir": "/export/home/scotty/deviceUpload",
  "appVersion": "8.0",
  "snmpAlarmTimeZone": "America/New_York",
  "maxClusterClickElementSize": 50,
  "googleAnalyticsSiteId": "UA-158352259-11"
}

For further information see requirements documentationhere

For Deployment and Configuration on new ENVS: here

For application configuration for local development see README.MD

* MDC Translator Ui Configuration - MDC Translator Ui Configuration (used to specify technology specific parameters for display on the device overview / component overview pages)

@Deprecated - The below models have been deprecated in favour of MDC translator, but have been included here for reference.

• SnmpManager - MobileUIConfiguration (used to specify technology specific parameters for display on the device overview / component overview pages)
• SnmpManager - MobileDeviceOptions (used to specify technology specific mobile button permissions e.g. ping, reboot, restart)

User permissions for mobile are setup and managed via the User Profile Application. See also documentation for feature.

• DEVICE_REBOOT
• DEVICE_REFRESH
• DEVICE_SHUTDOWN
• EDIT_DEVICE_DETAILS
• EDIT_PARAMETER
• FILE_UPLOAD
• PERFORM_PING
• SET_THRESHOLD

• Mobile Admin - has access to all functions in mobile.
• Mobile Viewer - has view only access to app screens. Any write functions are disabled.
• Mobile Technician - has writer access to app screens. Selected role write actions are enabled from above list.

1. Application - IDMS Mobile
2. Business Profile - Admin, IDMS Viewer,IDMS Technician
3. Application Profile(one assigned to each business profile) - Mobile Admin, Mobile Viewer,Mobile Technician
4. Role - List of roles assigned per application profile (see list above)

As mobile is a pwa we were able to integrate google analytics into the application to track all key user functions. See list of supported fucntions tracked below:

Network Overview:

• Side Menu click
• Logout click
• Alarm counter click
• Search Devices click
• Map click

Network Map

• Bubble filter click
• Map marker click
• Search devices bar click

Alarms List

• Search bar click
• List item click
• Filter button click

Alarm Details

• Element click
• Ticket link click

Device List

• Tabs click
• Device card click
• Search bar

Device Overview

• Tabbed navigation click
• Alarm filters click
• Performance card click
• Component card click

Performance card

• Threshold settings click
• Report click
• Refresh
• Refresh data click
• Refresh menu button

Parameters

• Search parameters click
• Edit page click

Tickets

• Search tickets click
• Tab click
• More click
• Ticket link click

Manage Device

• Button click

Metrics

• Accordion click

Location

• Location form click
• Update button click

Files

• Upload click
• Caption edit click
• Delete click

ansible-playbook -i ../env-configuration/qanova/hosts.ini --diff --vault-id @prompt idms-mobile.yml --extra-vars "jenkins_build_name='idms-mobile-feature-branches/job/branchName' jenkins_job_build_num=buildNumber actions='upload,configure,deploy'"  

https://jenkins.errigal.com:8443/job/idms-mobile/

see document outlining setup and tracked areas here: https://docs.google.com/document/d/16I549y7kTMcKkiBicbuu7lK7qpGsx9n4bv_HkfSRpc8/edit#heading=h.shv5v1gdyu51