As an extension of the infrastructure, a front-end for certain FHIR microservices has been built into the infrastructure. The page describes the architecture of these frontends, developed as micro-frontends
see also: Micro Frontends (martinfowler.com).
User story using a shell application ad a micro frontend
In order to understand the architecture it is important to understand the concept of micro-frontends. This can be shown by showing how a user is presented with the KAM solution:
When user accesses the KAM frontend, they are accessing a web application (single page app or SPA) like this:
Here they can push the green button to logon on using the FUT infrastructure IdP, like this:
After login, they are presented with a selection on the security context they would like to use in KAM. This selection will determine the set of micro-frontend they have access to.
After this selection the user is able to use KAM and its modules with the individual micro frontends. This is shown below:
The KAM solution is here composed of a shell application, which shows micro-frontends inline.
The shell application in this screen dump is:
The top bar, with
main navigation links'
security context selection
log off functionality
The left menu bar which gives the user the possibility to
select different micro-frontends like careteam and questionnaire
If the user selects the careteam in the left menu, the user is presented with this:
The table listing the careteams (they gray area in the screen) is a separate micro-frontend which is assembled by the browser within the shell application. This micro frontend is a separate component in the FUT infrastructure, but is assembled by the shell application for the user. Now that we have a basic understanding of the roles of a shell application, a identity provider (IdP) and a micro frontend, we can have a look at how this has been deployed as individual components in the FUT infrastructure.
Component model of the KAM architecture
In order to describe what has been built and deployed, and how the components interact, we will start of with a diagram with the two main areas of components in the FUT infrastructure cluster. All components are still packaged and released as containers, as every other component on the infrastructure.
In there we have four types of components all released as containers. The four types are described here:
Shell frontend
The shell frontend is a single page app. It handles security and routing to the individual micro-frontends. The user accesses the shell and from there they can navigate through a menu to the individual micro-frontends. The user never leaves the shell application, but different micro-frontends can be shown. The connection between the shell application and the micro-frontends is very loosely coupled, and only through the users browser. For further information on micro frontends see https://micro-frontends.org/ . The shell application is hosted as a container with a Nginx server, to enable the browser to load the shell frontend. The shell frontend only really runs in the users browser.
Micro frontend
The micro-frontends expose a frontend, tailored to show resources from a single infrastructure service. Currently there are three micro-frontends: careteam, questionnaire and plan. These micro-frontends are exposed by the shell-frontend, and use infrastructure services to deliver resources to the end user. For more information on how to interface from micro-frontend to shell application, read this page : Micro frontends - eHealth Infrastructure Wiki - Confluence (atlassian.net).
The individual micro frontends are hosted as a containers with each their Nginx server, to enable the browser to load the specific micro-frontend. The individual micro-frontend only runs in the users browser.
Common pickers
Among the micro-frontends, there are a need for a shared set of pickers, to make it possible to select and organization, create a timing expression, set measurement thresholds etc. For this a module has been created. The micro-frontends include this module and invoke it using messages in the browser, and will also receive the picked value/setting through a message. For more information on how to utilize pickers from the KAM project , have a look here: Kam-pickers - eHealth Infrastructure Wiki - Confluence (atlassian.net). The set of pickers are hosted as a container with each its own Nginx server, to enable the browser to load the pickers. The pickers only really run in the users browser.
Infrastructure services
The remaining services are all infrastructure services
Dynamic interaction between the KAM components
To better understand this have a look at this sequence diagram:
In this sequence diagram a number of details have been omitted, among these the complex setup behind the logon process after the user hits the IdP, with redirects to local IdP via SEB.
Security model
The security model used in KAM, is the same as the one used in the remaining FUT infrastructure. This means that the shell application will redirect the user to the IdP using the users browser, and in this process receive a set of security tokens (JWT). The shell application has the responsibility to do the required refreshes in order to ensure that the tokens are valid at all time, when using KAM. The access token is provided to the micro-frontends in browser local storage (with access tied to the KAM domain). They can use the token to do lookups into the infrastructure, and thus will only present data, which the current user has access to, with the currently selected security context.