mirror of
https://github.com/samply/bridgehead.git
synced 2025-06-16 23:00:15 +02:00
Compare commits
1 Commits
feature/ex
...
test/teile
Author | SHA1 | Date | |
---|---|---|---|
02954c1ef4 |
36
README.md
36
README.md
@ -24,9 +24,6 @@ This repository is the starting point for any information and tools you will nee
|
|||||||
- [BBMRI-ERIC Directory entry needed](#bbmri-eric-directory-entry-needed)
|
- [BBMRI-ERIC Directory entry needed](#bbmri-eric-directory-entry-needed)
|
||||||
- [Directory sync tool](#directory-sync-tool)
|
- [Directory sync tool](#directory-sync-tool)
|
||||||
- [Loading data](#loading-data)
|
- [Loading data](#loading-data)
|
||||||
- [Teiler (Frontend)](#teiler-frontend)
|
|
||||||
- [Data Exporter Service](#data-exporter-service)
|
|
||||||
- [Data Quality Report](#data-quality-report)
|
|
||||||
4. [Things you should know](#things-you-should-know)
|
4. [Things you should know](#things-you-should-know)
|
||||||
- [Auto-Updates](#auto-updates)
|
- [Auto-Updates](#auto-updates)
|
||||||
- [Auto-Backups](#auto-backups)
|
- [Auto-Backups](#auto-backups)
|
||||||
@ -382,39 +379,6 @@ Normally, you will need to build your own ETL to feed the Bridgehead. However, t
|
|||||||
|
|
||||||
You can find the profiles for generating FHIR in [Simplifier](https://simplifier.net/bbmri.de/~resources?category=Profile).
|
You can find the profiles for generating FHIR in [Simplifier](https://simplifier.net/bbmri.de/~resources?category=Profile).
|
||||||
|
|
||||||
### Teiler (Frontend)
|
|
||||||
|
|
||||||
Teiler is the web-based frontend of the Bridgehead, providing access to its various internal, and external services and components.
|
|
||||||
To learn how to integrate your custom module into Teiler, please refer to https://github.com/samply/teiler-dashboard.
|
|
||||||
- To activate Teiler, set the following environment variable in your `<PROJECT>.conf` file:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ENABLE_TEILER=true
|
|
||||||
```
|
|
||||||
[For further information](ccp/modules/teiler.md)
|
|
||||||
|
|
||||||
### Data Exporter Service
|
|
||||||
|
|
||||||
The Exporter is a dedicated service for extracting and exporting Bridgehead data in (tabular) formats such as Excel, CSV, Opal, JSON, XML, ...
|
|
||||||
- To enable the Exporter service, set the following environment variable in your `<PROJECT>.conf` file:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
ENABLE_EXPORTER=true
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Data Quality Report
|
|
||||||
To assess the quality and plausibility of your imported data, the Reporter component is pre-configured to generate Excel reports with data quality metrics and statistical analyses. Reporter is part of the Exporter and can be enabled by setting the same environment variable in your `<PROJECT>.conf` file:
|
|
||||||
```bash
|
|
||||||
ENABLE_EXPORTER=true
|
|
||||||
```
|
|
||||||
|
|
||||||
For convenience, it's recommended to enable the Teiler web frontend alongside the Exporter to access export and quality control features via a web interface: set the following environment varibles in your `<PROJECT>.conf` file:
|
|
||||||
```bash
|
|
||||||
ENABLE_TEILER=true
|
|
||||||
ENABLE_EXPORTER=true
|
|
||||||
```
|
|
||||||
[For further information](ccp/modules/exporter.md)
|
|
||||||
|
|
||||||
## Things you should know
|
## Things you should know
|
||||||
|
|
||||||
### Auto-Updates
|
### Auto-Updates
|
||||||
|
@ -1,20 +1,20 @@
|
|||||||
-----BEGIN CERTIFICATE-----
|
-----BEGIN CERTIFICATE-----
|
||||||
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
|
||||||
GeWQ1wQNTEBX
|
8riQJIhY4huX
|
||||||
-----END CERTIFICATE-----
|
-----END CERTIFICATE-----
|
@ -19,7 +19,7 @@ services:
|
|||||||
HTTP_RELATIVE_PATH: "/bbmri-teiler"
|
HTTP_RELATIVE_PATH: "/bbmri-teiler"
|
||||||
|
|
||||||
teiler-dashboard:
|
teiler-dashboard:
|
||||||
image: docker.verbis.dkfz.de/cache/samply/teiler-dashboard:develop
|
image: docker.verbis.dkfz.de/ccp/samply/teiler-dashboard:test
|
||||||
container_name: bridgehead-teiler-dashboard
|
container_name: bridgehead-teiler-dashboard
|
||||||
labels:
|
labels:
|
||||||
- "traefik.enable=true"
|
- "traefik.enable=true"
|
||||||
|
@ -19,7 +19,7 @@ services:
|
|||||||
HTTP_RELATIVE_PATH: "/ccp-teiler"
|
HTTP_RELATIVE_PATH: "/ccp-teiler"
|
||||||
|
|
||||||
teiler-dashboard:
|
teiler-dashboard:
|
||||||
image: docker.verbis.dkfz.de/cache/samply/teiler-dashboard:develop
|
image: docker.verbis.dkfz.de/ccp/samply/teiler-dashboard:test
|
||||||
container_name: bridgehead-teiler-dashboard
|
container_name: bridgehead-teiler-dashboard
|
||||||
labels:
|
labels:
|
||||||
- "traefik.enable=true"
|
- "traefik.enable=true"
|
||||||
|
@ -1,180 +1,19 @@
|
|||||||
# Teiler
|
# Teiler
|
||||||
|
This module orchestrates the different microfrontends of the bridgehead as a single page application.
|
||||||
**Teiler** is the central frontend of the **bridgehead system**. It brings together multiple independent tools—each built as a **microfrontend**—into a single, unified web application.
|
|
||||||
|
|
||||||
Users interact with Teiler as one coherent interface, but behind the scenes, it dynamically integrates and displays self-contained modules developed with different technologies (**Angular**, **Vue**, **React**, etc.). This modular approach makes Teiler highly flexible, allowing teams to develop, deploy, and maintain features independently.
|
|
||||||
|
|
||||||
Teiler ensures:
|
|
||||||
|
|
||||||
* **A consistent look and feel** across tools.
|
|
||||||
* **Smooth navigation** between components.
|
|
||||||
* **Seamless user authentication** across the entire interface.
|
|
||||||
|
|
||||||
Each independent tool integrated into Teiler is called a **bridgehead app**. A bridgehead app can be:
|
|
||||||
|
|
||||||
- A fully standalone microfrontend with its own frontend and backend services.
|
|
||||||
- An embedded service inside the Teiler Dashboard.
|
|
||||||
- An external link to another service, possibly hosted on a central server or elsewhere in the federated research network.
|
|
||||||
|
|
||||||
The modularity of Teiler enables it to adapt easily to the evolving needs of the research federated network by simply adding, updating, or removing bridgehead apps.
|
|
||||||
|
|
||||||
Below is a breakdown of Teiler's internal components that make this orchestration possible.
|
|
||||||
|
|
||||||
- [Teiler Orchestrator](#teiler-orchestrator)
|
|
||||||
- [Teiler Dashboard](#teiler-dashboard)
|
|
||||||
- [Teiler Backend](#teiler-backend)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Teiler Orchestrator
|
## Teiler Orchestrator
|
||||||
|
Single SPA component that consists on the root HTML site of the single page application and a javascript code that
|
||||||
|
gets the information about the microfrontend calling the teiler backend and is responsible for registering them. With the
|
||||||
|
resulting mapping, it can initialize, mount and unmount the required microfrontends on the fly.
|
||||||
|
|
||||||
The **Teiler Orchestrator** is the entry point of the **Single Page Application (SPA)**. It consists of:
|
The microfrontends run independently in different containers and can be based on different frameworks (Angular, Vue, React,...)
|
||||||
|
This microfrontends can run as single alone but need an extension with Single-SPA (https://single-spa.js.org/docs/ecosystem).
|
||||||
- An **HTML root page**.
|
There are also available three templates (Angular, Vue, React) to be directly extended to be used directly in the teiler.
|
||||||
- A **JavaScript layer** that:
|
|
||||||
- **Retrieves microfrontend configurations** from the backend.
|
|
||||||
- **Registers and manages** the microfrontends using [**Single-SPA**](https://single-spa.js.org/), the framework Teiler uses to create and coordinate its microfrontend environment.
|
|
||||||
|
|
||||||
Using this information, the orchestrator dynamically **loads the correct microfrontend** for a given route and manages its **lifecycle** (*init*, *mount*, *unmount*) in real time.
|
|
||||||
|
|
||||||
**Microfrontends** run in their own containers and can be implemented with any major frontend framework. To be compatible with Teiler, they must integrate with **Single-SPA**.
|
|
||||||
|
|
||||||
To encourage developers to create their own microfrontends and integrate them into Teiler, we provide **starter templates** for **Angular**, **Vue**, and **React**. Developing a new microfrontend is straightforward:
|
|
||||||
|
|
||||||
1. Use one of the templates.
|
|
||||||
2. Extend it with your own functionality.
|
|
||||||
3. Add its configuration in the **Teiler Backend**.
|
|
||||||
|
|
||||||
This modular approach accelerates development and fosters collaboration.
|
|
||||||
|
|
||||||
**GitHub repository:** [https://github.com/samply/teiler-orchestrator](https://github.com/samply/teiler-orchestrator)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Teiler Dashboard
|
## Teiler Dashboard
|
||||||
|
It consists on the main dashboard and a set of embedded services.
|
||||||
The **Teiler Dashboard** is the unified interface users interact with after logging in. It provides:
|
### Login
|
||||||
|
user and password in ccp.local.conf
|
||||||
- A **single point of access** where various bridgehead apps are embedded as microfrontends.
|
|
||||||
- **Central navigation** and **session management** for a smooth user experience.
|
|
||||||
|
|
||||||
### Authentication and Authorization
|
|
||||||
|
|
||||||
Teiler uses **OpenID Connect (OIDC)** for user authentication, accessible via the **top navigation bar**.
|
|
||||||
|
|
||||||
We consider three possible **application roles**:
|
|
||||||
|
|
||||||
| Role | Description |
|
|
||||||
|--------|-----------------------------------------------------------|
|
|
||||||
| Public | Accessible by any user without the need to log in |
|
|
||||||
| User | Normal users working with various bridgehead applications |
|
|
||||||
| Admin | Bridgehead system administrators |
|
|
||||||
|
|
||||||
It is possible to **deactivate OIDC authentication** entirely. In such cases, **all apps must have at least the public role** to allow access. While this may be suitable for development or testing, we **strongly encourage** at least some external authentication mechanism or network-level access control to secure the bridgehead environment.
|
|
||||||
|
|
||||||
Alternatively, basic authentication can be enforced through the existing **Traefik infrastructure** integrated with the bridgehead.
|
|
||||||
|
|
||||||
**GitHub repository:** [https://github.com/samply/teiler-dashboard](https://github.com/samply/teiler-dashboard)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## Teiler Backend
|
## Teiler Backend
|
||||||
|
In this component, the microfrontends are configured.
|
||||||
The **Teiler Backend** serves as the central configuration hub for all microfrontends and bridgehead apps. It defines:
|
|
||||||
|
|
||||||
- Which bridgehead apps are available.
|
|
||||||
- Their loading URLs and routes.
|
|
||||||
- Optional metadata such as display names, icons, roles, and activation status.
|
|
||||||
|
|
||||||
It enables the orchestrator to remain **generic and flexible**, adapting dynamically to whatever apps are defined in the backend configuration.
|
|
||||||
|
|
||||||
### Assets Directory
|
|
||||||
|
|
||||||
There is an **assets** directory where you can save images and other static files to be accessible to your microfrontends. This helps configure and customize apps more easily and quickly.
|
|
||||||
|
|
||||||
Assets can be referenced via:
|
|
||||||
|
|
||||||
```
|
|
||||||
<Teiler Backend URL>/assets/<filename>
|
|
||||||
```
|
|
||||||
|
|
||||||
### App Configuration via Environment Variables
|
|
||||||
|
|
||||||
Apps are configured using environment variables with the following structure:
|
|
||||||
|
|
||||||
```
|
|
||||||
TEILER_APP<Number>_<suffix>
|
|
||||||
Optional: TEILER_APP<Number>_<LanguageCode>_<suffix>
|
|
||||||
```
|
|
||||||
|
|
||||||
- The **number** is just for grouping variables for a single app and has no intrinsic meaning.
|
|
||||||
- The **app** is the unit within Teiler, shown as a box in the dashboard.
|
|
||||||
- Apps can be:
|
|
||||||
- Embedded apps inside the Teiler Dashboard (there is a helper Python script for generating embedded apps: [create-embedded-app.py](https://github.com/samply/teiler-dashboard/blob/main/create-embedded-app.py))
|
|
||||||
- External links (e.g., central services outside the local bridgehead instance)
|
|
||||||
- An app's frontend (microfrontend or embedded app) can either contain the entire functionality or serve as a frontend communicating with other backend microservices in the bridgehead.
|
|
||||||
|
|
||||||
Currently supported languages in the main projects DKTK and BBMRI are **English (EN)** and **German (DE)**, but the system can be extended to other languages.
|
|
||||||
|
|
||||||
The Teiler Dashboard requests variables from the backend for each app and passes the desired language code. If a language-specific variable is unavailable, the default language value is returned.
|
|
||||||
|
|
||||||
### App Availability Monitoring
|
|
||||||
|
|
||||||
The Teiler Backend regularly **pings apps** to check availability and displays status messages such as:
|
|
||||||
|
|
||||||
- "Frontend not available"
|
|
||||||
- "Backend not available"
|
|
||||||
- "Frontend and Backend not available"
|
|
||||||
|
|
||||||
### Accepted TEILER_APP Variable Suffixes
|
|
||||||
|
|
||||||
| Suffix | Description |
|
|
||||||
|------------------|---------------------------------------------------------------------------------------------------------------|
|
|
||||||
| NAME | Identifier of the app (no spaces). For embedded apps, must match the identifier defined in Teiler Dashboard. |
|
|
||||||
| TITLE | Display title shown to users. |
|
|
||||||
| DESCRIPTION | Brief description of the app. |
|
|
||||||
| BACKENDURL | URL of the backend microservice (if applicable). |
|
|
||||||
| BACKENDCHECKURL | URL that the backend pings to verify backend availability. Defaults to BACKENDURL if not specified. |
|
|
||||||
| SOURCEURL | URL of the microfrontend or external link (not used for embedded apps). |
|
|
||||||
| SOURCECHECKURL | URL to ping to check microfrontend or external link availability. Defaults to SOURCEURL if not specified. |
|
|
||||||
| ROLES | Comma-separated roles allowed: `TEILER_PUBLIC`, `TEILER_USER`, `TEILER_ADMIN`. |
|
|
||||||
| ISACTIVATED | `true` or `false`. Used to temporarily deactivate an app without deleting its config. |
|
|
||||||
| ICONCLASS | Bootstrap icon class to display in app box (e.g., `"bi bi-search"`). |
|
|
||||||
| ICONSOURCEURL | URL to an image icon. Prefer using local assets instead of external URLs. |
|
|
||||||
| ORDER | Relative display order of the app in the dashboard. |
|
|
||||||
| ISEXTERNALLINK | `true` or `false`. Indicates if the app is an external link outside the local bridgehead. |
|
|
||||||
| ISLOCAL | `true` or `false`. Indicates if the app runs locally within the bridgehead site or on a central server. |
|
|
||||||
|
|
||||||
*Note:* Embedded apps often have many of these variables preconfigured and may not require manual specification. See the [Teiler Dashboard documentation](https://github.com/samply/teiler-dashboard) for details.
|
|
||||||
|
|
||||||
### Additional Teiler Backend Variables for Dashboard Configuration
|
|
||||||
|
|
||||||
| Variable Prefix | Description |
|
|
||||||
|------------------------------------|--------------------------------------------------------------------------------------------------------------|
|
|
||||||
| TEILER_DASHBOARD_ | General configuration of the dashboard. |
|
|
||||||
| TEILER_DASHBOARD_<LangCode>_ | Language-specific configuration overrides. |
|
|
||||||
|
|
||||||
Important suffixes include:
|
|
||||||
|
|
||||||
| Suffix | Description |
|
|
||||||
|------------------|------------------------------------------------------------------|
|
|
||||||
| WELCOME_TITLE | Title shown on the initial screen before login. |
|
|
||||||
| WELCOME_TEXT | Welcome message or instructions before login. |
|
|
||||||
| FURTHER_INFO | Additional informational text or links. |
|
|
||||||
| BACKGROUND_IMAGE_URL | URL to a background image (SVG recommended for scalability). |
|
|
||||||
| LOGO_URL | URL to the project or bridgehead logo. |
|
|
||||||
| LOGO_HEIGHT | Height of the displayed logo. |
|
|
||||||
| LOGO_TEXT | Title text of the bridgehead (e.g., "DKTK Bridgehead"). |
|
|
||||||
| COLOR_PALETTE | JSON link to color palettes for text, lines, icons, and background (especially for SVGs). |
|
|
||||||
| COLOR_PROFILE | Selected color profile from the palette. |
|
|
||||||
| FONT | Font family for the dashboard text. |
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
**GitHub repository:** [https://github.com/samply/teiler-backend](https://github.com/samply/teiler-backend)
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
If you want to create your own bridgehead app and integrate it into Teiler, start by selecting a template or building a microfrontend compatible with **Single-SPA**. Then add your app’s configuration in the Teiler Backend as described above.
|
|
||||||
|
|
||||||
This flexible, modular design enables easy expansion
|
|
||||||
|
Reference in New Issue
Block a user