---

home: true

---

Mwb-v2-Redux - Data Migration Workbench

(click to enlarge)

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 app is built with Angular v5, bootstrap, angular-redux/store, and d3.
Testing consists of unit tests, e2e tests via karma/protractor and also a suite of Cypress.io integration tests for comparison.

Documentation pages

• Measure Calculation
• DashboardThumbnail component
• DashboardThumbnail Dropdown Panel
• Scrollbar CSS Adjustments
• Redux Store
• SearchComponent Testing Notes
• Cypress e2e Testing
• Test Code Coverage
• npm audit security report

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

This project was generated with Angular CLI version 1.6.8.

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 ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Build

Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the -prod flag for a production build.

Running unit tests

Run ng test to execute the unit tests via Karma.

Running end-to-end tests

Run ng e2e to execute the end-to-end tests via Protractor.

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 ng serve 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.