Compare commits

..

1 Commits

Author SHA1 Message Date
02954c1ef4 Test 2025-06-05 17:03:46 +02:00
5 changed files with 32 additions and 229 deletions

View File

@ -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)
- [Directory sync tool](#directory-sync-tool)
- [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)
- [Auto-Updates](#auto-updates)
- [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).
### 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
### Auto-Updates

View File

@ -1,20 +1,20 @@
-----BEGIN CERTIFICATE-----
MIIDNTCCAh2gAwIBAgIUFzdpDi1OLdXyogtCsktHFhCILtMwDQYJKoZIhvcNAQEL
BQAwFjEUMBIGA1UEAxMLQnJva2VyLVJvb3QwHhcNMjUwNjEwMTQzNjE1WhcNMzUw
NjA4MTQzNjQ1WjAWMRQwEgYDVQQDEwtCcm9rZXItUm9vdDCCASIwDQYJKoZIhvcN
AQEBBQADggEPADCCAQoCggEBALpJCWE9Qe19R9DqotdkPV6jfiuJSKI3UYkCWdWG
nRfkKB6OaY5t3JCHDqaEME9FwSd2nFXhTp5F6snG/K7g8MCLIEzGzuSnrdjGqINq
zXLfgqnxvQpPR4ARLNNgnKxZaq7m4Q3T/l+QAshK6CnCUWFQ6q5x3g/pZHFP2USd
/G2FtDHX6YK4bHbbnigIPG6PdY2RYy60i30XGdIPBNf82XGkAtPUBz731gHOV5Vg
d+jfAqTwZAhYC2CcNmswFw1H9GrvTI/9KZWKcZNUIqemc0A/FyEyONUM18/vjQ7D
lUwOcQsgAg44QTOUPgqXv3sJPQM5EnGuv3yYV9u6Y2i78M8CAwEAAaN7MHkwDgYD
VR0PAQH/BAQDAgEGMA8GA1UdEwEB/wQFMAMBAf8wHQYDVR0OBBYEFPrDeNWgtEyZ
VM0yeoRZdK2QGjyvMB8GA1UdIwQYMBaAFPrDeNWgtEyZVM0yeoRZdK2QGjyvMBYG
A1UdEQQPMA2CC0Jyb2tlci1Sb290MA0GCSqGSIb3DQEBCwUAA4IBAQAD2S0kqL18
laewh+qnyZ0WMq12mLV/Rwll6ZuShCx2uAu3UZuIGWk3l7gG5zlws+i+zbaNcn4o
HsS3WG9kiNLOMKp8LXGkjErl6RaQr+kb8qgYFTPjOr6v0OdVn6ve9RDNYB5Hd+zE
9jAWmS8PfS2AldE4VAd0C4pWTAinhnKGrKdn1YAX5x+LMq1y0lc1Pd4CDgsjD6SS
3td7JtenXqCX0mN0XSeck7vvFGa6QpcQoVcN9tRENctHZTwyeGA21IkXylpFPUkE
LT60k48fNC8TZkBlfvtVGRebpm5krXIKEaVy5LniEpSuOR4hTqsgoQDntBjW4zHA
GeWQ1wQNTEBX
MIIDNTCCAh2gAwIBAgIUE/wu6FmI+KSMOalI65b+lI3HI4cwDQYJKoZIhvcNAQEL
BQAwFjEUMBIGA1UEAxMLQnJva2VyLVJvb3QwHhcNMjQwOTE2MTUyMzU0WhcNMzQw
OTE0MTUyNDI0WjAWMRQwEgYDVQQDEwtCcm9rZXItUm9vdDCCASIwDQYJKoZIhvcN
AQEBBQADggEPADCCAQoCggEBAOt1I1FQt2bI4Nnjtg8JBYid29cBIkDT4MMb45Jr
ays24y4R3WO7VJK9UjNduSq/A1jlA0W0A/szDf8Ojq6bBtg+uL92PTDjYH1QXwX0
c7eMo2tvvyyrs/cb2/ovDBQ1lpibcxVmVAv042ASmil3SdqKKXpv3ATnF9I7V4cv
fwB56FChaGIov5EK+9JOMjTx6oMlBEgUFR6qq/lSqM9my0HYwUFbX2W+nT9EKEIP
9UP1eyfRZR3E/+oticnm/cS20BGCbjoYrNgLthXKyaASuhGoElKs8EZ3h9MiI+u0
DpR0KpePhAkMLugBrgYWqkMwwD1684LfC4YVQrsLwzo5OW8CAwEAAaN7MHkwDgYD
VR0PAQH/BAQDAgEGMA8GA1UdEwEB/wQFMAMBAf8wHQYDVR0OBBYEFPbXs3g3lMjH
1JMe0a5aVbN7lB92MB8GA1UdIwQYMBaAFPbXs3g3lMjH1JMe0a5aVbN7lB92MBYG
A1UdEQQPMA2CC0Jyb2tlci1Sb290MA0GCSqGSIb3DQEBCwUAA4IBAQBM5RsXb2HN
FpC1mYfocXAn20Zu4d603qmc/IqkiOWbp36pWo+jk1AxejyRS9hEpQalgSnvcRPQ
1hPEhGU+wvI0WWVi/01iNjVbXmJNPQEouXQWAT17dyp9vqQkPw8LNzpSV/qdPgbT
Z9o3sZrjUsSLsK7A7Q5ky4ePkiJBaMsHeAD+wqGwpiJ4D2Xhp8e1v36TWM0qt2EA
gySx9isx/jeGGPBmDqYB9BCal5lrihPN56jd+5pCkyXeZqKWiiXFJKXwcwxctYZc
ADHIiTLLPXE8LHTUJAO51it1NAZ1S24aMzax4eWDXcWO7/ybbx5pkYkMd6EqlKHd
8riQJIhY4huX
-----END CERTIFICATE-----

View File

@ -19,7 +19,7 @@ services:
HTTP_RELATIVE_PATH: "/bbmri-teiler"
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
labels:
- "traefik.enable=true"

View File

@ -19,7 +19,7 @@ services:
HTTP_RELATIVE_PATH: "/ccp-teiler"
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
labels:
- "traefik.enable=true"

View File

@ -1,180 +1,19 @@
# Teiler
**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)
---
This module orchestrates the different microfrontends of the bridgehead as a single page application.
## 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:
- An **HTML root page**.
- 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)
---
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).
There are also available three templates (Angular, Vue, React) to be directly extended to be used directly in the teiler.
## Teiler Dashboard
The **Teiler Dashboard** is the unified interface users interact with after logging in. It provides:
- 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)
---
It consists on the main dashboard and a set of embedded services.
### Login
user and password in ccp.local.conf
## Teiler Backend
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_&lt;LangCode&gt;_ | 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 apps configuration in the Teiler Backend as described above.
This flexible, modular design enables easy expansion
In this component, the microfrontends are configured.