Internal Errigal Collaboration Wiki

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== IDMS Mobile (Mobile Navigator) Development Details ======
Updated by Anna Dowling 10/11/2020
 
See also:  [[onboarding:proxy:start|IDMS Proxy]]

===== Overview =====


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/

----

===== PWA Information =====


For more information regarding the PWA project decisions [[https://docs.google.com/document/d/1eVjFxcu8VFgHQMzNa5T1ewBPcJgB3864gaJvQ36iAVk/edit|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

[[https://docs.google.com/document/d/1Zqjd8AWpV9Qs7RbbJ0V007kKjcWZTMQaiMiBNVD1Cmc/edit|PWA Install Guide]]

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

  *[[https://angular.io/guide/service-worker-intro|Service Worker Introduction]]
  *[[https://angular.io/guide/service-worker-config|Service Worker Configuration]]

== Debugging on device: ==

  * 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

===== Architecture =====


{{ :onboarding:mobile:screenshot_2020-11-10_at_15.29.56.png?600 |}}

===== List of Tools & Technologies =====


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

For full package listing see [[https://bitbucket.org/errigal/idms-mobile/src/master/package.json|package.json]] file.

===== Deployment =====
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:

<code>
{
  "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"
}
</code>

===== Project Documents =====

For further information see requirements
 documentation[[https://drive.google.com/drive/u/0/folders/1pCta5yh89iNK6pruHG98jFU9g5Cy9AEk|here]]

For Deployment and Configuration on new ENVS: [[https://docs.google.com/document/d/1V1B3Om0diuaxLXPoxptHw2fLHxAkxxFQJSx-jBWLv5Q/edit?usp=sharing|here]]


===== Configuration =====
For application configuration for local development see [[https://bitbucket.org/errigal/idms-mobile/src/master/README.MD|README.MD]]

===== MDC Translator Parameter Ui Configuration =====
* MDC Translator Ui Configuration - [[onboarding:mobile:mdctranslatoruiconfig|MDC Translator Ui Configuration]] (used to specify technology specific parameters for display on the device overview / component overview pages)

===== Data Models =====
**@Deprecated** - The below models have been deprecated in favour of MDC translator, but have been included here for reference.
  * SnmpManager - [[onboarding:mobile:mobiluiconfig|MobileUIConfiguration]] (used to specify technology specific parameters for display on the device overview / component overview pages)
  * SnmpManager - [[onboarding:mobile:mobiledeviceoptions|MobileDeviceOptions]] (used to specify technology specific mobile button permissions e.g. ping, reboot, restart)

===== User Permissions =====
User permissions for mobile are setup and managed via the User Profile Application.
See also [[https://docs.google.com/document/d/1ZzMZod7cJkFg9AuKGfiol3oWhFfsKVV1KwOcFPi_l3U/edit|documentation]] for feature. 
=== Roles: ===
  * DEVICE_REBOOT
  * DEVICE_REFRESH
  * DEVICE_SHUTDOWN
  * EDIT_DEVICE_DETAILS
  * EDIT_PARAMETER
  * FILE_UPLOAD
  * PERFORM_PING
  * SET_THRESHOLD


=== Core user profiles: ===

  * 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.

=== Hierarchy of Profile Model in User Profile: ===
  - Application - IDMS Mobile
  - Business Profile - Admin, IDMS Viewer,IDMS Technician
  - Application Profile(one assigned to each business profile) - Mobile Admin, Mobile Viewer,Mobile Technician
  - Role - List of roles assigned per application profile (see list above)

=====Main Screens =====

==== View 1: Login ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.36.44.png?200 |}}

==== View 2: Network Overview ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.38.09.png?200 |}}

==== View 3: Network Map ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.39.00.png?200 |}}

==== View 4: Alarms List ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.39.36.png?200 |}}

==== View 5: Device List ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.43.23.png?200 |}}

==== View 6: Device Overview ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.44.02.png?200 |}}

==== View 7: Device Alarms ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.45.44.png?200 |}}

==== View 8: Alarm Details ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.46.41.png?200 |}}

==== View 9: Device Tickets ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.47.07.png?200 |}}

==== View 10: Parameters ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.47.41.png?200 |}}

==== View 11: Manage Device ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.48.14.png?200 |}}

==== View 12: Metrics ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.50.45.png?200 |}}

==== View 13: Location ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.57.16.png?200 |}}

==== View 14: File Upload ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.54.25.png?200 |}}

==== View 15: Device Components ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.48.58.png?200 |}}

==== View 16: Device Options ====
{{ :onboarding:mobile:screenshot_2020-11-10_at_15.45.08.png?200 |}}


----

===== Google Analytics =====
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 Playbooks ===
<code>
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'"  
</code>

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

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

Internal Errigal Collaboration Wiki

User Tools

Site Tools

Page Tools
