MWB - Data Migration Workbench

A port of the Angular MWB project to VueJs.

Application Overview

A web app for reviewing test results and overall progress of a data migration project (Healthcare).
This app picks up test result files which are generated by LinqPad (C#, Linq) and displays a summary dashboard of key metrics.

There are three types of test results, each handled by different teams within the project:

• Validations
  Check the validity of enumerated codes used in the migrated data against code tables in the target system

• Referentials
  Check the referential integrity between the records of related entities in the migrated data

• Clinics
  Check the degree of correlation between Outpatient booking records in the migrated data and configured Outpatient Clinics in the target system

Feature list

Dashboard

• compact, mobile responsive summary information for each measure
• current error count or progress figure
• green/yellow/red color indicator
• sparkline trend indicator
• drop down narrative text (initially hidden), if text is configured
• animated panel opening for narrative text
• link to details page

Linqpad Test Result Details Pages

• common layout and code for all three measure areas
• display latest test results
• previous tests can be selected from a side panel file list
• text search across all loaded results

Results file list with list limiter

• file list initially displays only most recent results (as configured for the measure)
• file list expands, when requested, to show older results
• file list shows ellipsis for tests on the same date (implicit grouping)
• narrow (custom) scrollbar

Search

• search terms entered are reactively evaluated against the currently displayed test result
• matches in the current display are high-lighted in yellow
• evaluation is delayed with debounce of 400ms
• search indicator badge in the results header shows match count
• search button conducts global search in all loaded results
• global search displays modal of result files with match
• file-list shows indicator against files that match

Team Tasks

• login required to access (authguard)
• kanban board display
• drag and drop tasks between categories

Architecture

This application is built with Vue v2, bootstrap, Vuex, and d3.
Testing consists of unit tests, e2e tests via nightwatch and a suite of Cypress.io integration tests.

Documentation pages

• Measure Calculation
• DashboardThumbnail component
• DashboardThumbnail Dropdown Panel
• Scrollbar CSS Adjustments
• SearchComponent Testing Notes
• Test Code Coverage

Technology used

• Angular framework
  • Angular 5, migrated to 6
  • RxJs 5, migrated to 6
  • Typescript
  • Material Card
  • Custom Decorators
• Vue framework
  • VueJS 2
  • Vue CLI 3
  • Axios
• State management
  • Redux
  • Mobx
  • NgRx
  • Vuex
• CSS
  • Bootstrap
  • Flexbox
  • Font Awesome
• Graphics
  • d3
  • SVG
• Other JS libraries
  • Toastr (notifications)
  • Dragula (drag and drop in Kanban)
  • MarkJs (search results highlighting)
  • debounce (search input throttling)
  • LocalStorage
• Testing
  • Karma/Jasmine unit tests
  • Protractor e2e tests
  • Cypress e2e tests
• Documentation
  • VuePress
  • Mermaid (diagramming)
  • VueImg (image zoom)

How to use

Demo

A demo of the application is hosted on Firebase at Migration Workbench

Local installation

Download from Github and run yarn to install npm dependencies.

Development server

Run npm run dev for a dev server. Navigate to http://localhost:8080/. The app will automatically reload if you change any of the source files.

Build

Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

Running unit tests

Run npm run unit to execute the unit tests in a single run, or npm run unitwatch for continuous testing.

Running end-to-end tests

Run npm run e2e to execute the end-to-end tests via Nightwatch.

Running Cypress integration tests

The Cypress tests are packaged separately from the main application, because Cypress installs a lot of npm dependencies and adds considerable time to npm changes within the application itself.

To run Cypress tests,

• run npm run dev to serve the application from the local dev server.
• cd into the '/tests' sub-folder. This folder has it's own package.json with it's own scripts.
• run npm run cypress:open to start the Cypress test runner.