mirror of
https://github.com/samply/bridgehead.git
synced 2025-06-21 15:10:20 +02:00
Compare commits
3 Commits
feature/ex
...
8ff1e41836
Author | SHA1 | Date | |
---|---|---|---|
8ff1e41836 | |||
7c5bbefe74 | |||
92ea700ea6 |
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)
|
||||
- [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
|
||||
|
@ -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
|
||||
-----END CERTIFICATE-----
|
||||
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-----
|
@ -79,8 +79,10 @@ services:
|
||||
- "traefik.http.routers.reporter_bbmri.middlewares=reporter_bbmri_strip"
|
||||
- "traefik.http.routers.reporter_bbmri.priority=20"
|
||||
|
||||
#- "traefik.http.routers.reporter_bbmri.middlewares=reporter_bbmri_strip,exporter_auth"
|
||||
- "traefik.http.routers.reporter_bbmri_api.middlewares=reporter_bbmri_strip,exporter_auth"
|
||||
- "traefik.http.routers.reporter_bbmri_api.rule=PathRegexp(`/bbmri-reporter/.+`)"
|
||||
- "traefik.http.routers.reporter_bbmri_api.tls=true"
|
||||
- "traefik.http.routers.reporter_bbmri_api.priority=25"
|
||||
#- "traefik.http.middlewares.reporter_auth.basicauth.users=${EXPORTER_USER}"
|
||||
|
||||
|
@ -5,4 +5,11 @@ if [ "$ENABLE_EXPORTER" == true ]; then
|
||||
OVERRIDE+=" -f ./$PROJECT/modules/exporter-compose.yml"
|
||||
EXPORTER_DB_PASSWORD="$(echo \"This is a salt string to generate one consistent password for the exporter. It is not required to be secret.\" | sha1sum | openssl pkeyutl -sign -inkey /etc/bridgehead/pki/${SITE_ID}.priv.pem | base64 | head -c 30)"
|
||||
EXPORTER_API_KEY="$(echo \"This is a salt string to generate one consistent API KEY for the exporter. It is not required to be secret.\" | sha1sum | openssl pkeyutl -sign -inkey /etc/bridgehead/pki/${SITE_ID}.priv.pem | base64 | head -c 64)"
|
||||
|
||||
if [ -z "$EXPORTER_USER" ]; then
|
||||
log "INFO" "Now generating basic auth for the exporter and reporter (see adduser in bridgehead for more information). "
|
||||
generated_passwd="$(cat /proc/sys/kernel/random/uuid | sed 's/[-]//g' | head -c 32)"
|
||||
add_basic_auth_user $PROJECT $generated_passwd "EXPORTER_USER" $PROJECT
|
||||
fi
|
||||
|
||||
fi
|
||||
|
@ -13,8 +13,8 @@ services:
|
||||
- "traefik.http.middlewares.teiler_orchestrator_bbmri_strip.stripprefix.prefixes=/bbmri-teiler"
|
||||
- "traefik.http.routers.teiler_orchestrator_bbmri.middlewares=teiler_orchestrator_bbmri_strip"
|
||||
environment:
|
||||
TEILER_BACKEND_URL: "/bbmri-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "/bbmri-teiler-dashboard"
|
||||
TEILER_BACKEND_URL: "https://${HOST}/bbmri-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "https://${HOST}/bbmri-teiler-dashboard"
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE_LOWER_CASE}"
|
||||
HTTP_RELATIVE_PATH: "/bbmri-teiler"
|
||||
|
||||
@ -30,8 +30,8 @@ services:
|
||||
- "traefik.http.routers.teiler_dashboard_bbmri.middlewares=teiler_dashboard_bbmri_strip"
|
||||
environment:
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE}"
|
||||
TEILER_BACKEND_URL: "/bbmri-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "/bbmri-teiler-dashboard"
|
||||
TEILER_BACKEND_URL: "https://${HOST}/bbmri-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "https://${HOST}/bbmri-teiler-dashboard"
|
||||
OIDC_URL: "${OIDC_URL}"
|
||||
OIDC_CLIENT_ID: "${OIDC_PUBLIC_CLIENT_ID}"
|
||||
OIDC_TOKEN_GROUP: "${OIDC_GROUP_CLAIM}"
|
||||
@ -40,7 +40,7 @@ services:
|
||||
TEILER_ADMIN_PHONE: "${OPERATOR_PHONE}"
|
||||
TEILER_PROJECT: "${PROJECT}"
|
||||
EXPORTER_API_KEY: "${EXPORTER_API_KEY}"
|
||||
TEILER_ORCHESTRATOR_URL: "/bbmri-teiler"
|
||||
TEILER_ORCHESTRATOR_URL: "https://${HOST}/bbmri-teiler"
|
||||
TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH: "/bbmri-teiler"
|
||||
TEILER_USER: "${OIDC_USER_GROUP}"
|
||||
TEILER_ADMIN: "${OIDC_ADMIN_GROUP}"
|
||||
@ -61,9 +61,10 @@ services:
|
||||
environment:
|
||||
LOG_LEVEL: "INFO"
|
||||
APPLICATION_PORT: "8085"
|
||||
APPLICATION_ADDRESS: "${HOST}"
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE}"
|
||||
TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH: "/bbmri-teiler"
|
||||
TEILER_ORCHESTRATOR_URL: "/bbmri-teiler"
|
||||
TEILER_DASHBOARD_DE_URL: "/bbmri-teiler-dashboard/de"
|
||||
TEILER_DASHBOARD_EN_URL: "/bbmri-teiler-dashboard/en"
|
||||
TEILER_ORCHESTRATOR_URL: "https://${HOST}/bbmri-teiler"
|
||||
TEILER_DASHBOARD_DE_URL: "https://${HOST}/bbmri-teiler-dashboard/de"
|
||||
TEILER_DASHBOARD_EN_URL: "https://${HOST}/bbmri-teiler-dashboard/en"
|
||||
HTTP_PROXY: "http://forward_proxy:3128"
|
||||
|
@ -5,4 +5,5 @@ if [ "$ENABLE_TEILER" == true ];then
|
||||
OVERRIDE+=" -f ./$PROJECT/modules/teiler-compose.yml"
|
||||
TEILER_DEFAULT_LANGUAGE=EN
|
||||
TEILER_DEFAULT_LANGUAGE_LOWER_CASE=${TEILER_DEFAULT_LANGUAGE,,}
|
||||
# add_public_oidc_redirect_url "/ccp-teiler/*"
|
||||
fi
|
||||
|
@ -1,287 +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
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-orchestrator](https://github.com/samply/teiler-orchestrator)
|
||||
|
||||
The **Teiler Orchestrator** is the entry point of the **Single Page Application (SPA)**. It consists of:
|
||||
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.
|
||||
|
||||
- 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.
|
||||
|
||||
|
||||
---
|
||||
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
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-dashboard](https://github.com/samply/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.
|
||||
|
||||
---
|
||||
It consists on the main dashboard and a set of embedded services.
|
||||
### Login
|
||||
user and password in ccp.local.conf
|
||||
|
||||
## Teiler Backend
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-backend](https://github.com/samply/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.
|
||||
|
||||
### Internationalization (i18n)
|
||||
#### ⚠️ Important
|
||||
|
||||
If you make any changes to the **Teiler Dashboard**, and those changes involve text elements (e.g., labels, buttons, messages), you must also update the **English translations**, since the application uses **internationalization (i18n)**.
|
||||
|
||||
The **default language** of the project is **German**, so any new text must be manually translated into English after extracting the updated i18n entries.
|
||||
|
||||
To extract new translation entries, run the following command:
|
||||
|
||||
```bash
|
||||
ng extract-i18n --output-path src/i18n --format=xlf2
|
||||
````
|
||||
|
||||
This will generate or update the file:
|
||||
`src/i18n/messages.xlf`
|
||||
|
||||
---
|
||||
|
||||
#### ✅ Requirements to Run the Extraction Command
|
||||
|
||||
| Program | Purpose | Linux Shell (Ubuntu/Debian) | Windows PowerShell |
|
||||
| -------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| **Node.js** | JavaScript runtime required by Angular and npm | `sudo apt update && sudo apt install nodejs npm`<br>**or**<br>[Use NodeSource setup](https://github.com/nodesource/distributions) (recommended) | [Download from nodejs.org](https://nodejs.org) and install manually |
|
||||
| **npm** | Node package manager (comes with Node.js) | *(Included with Node.js)* | *(Included with Node.js)* |
|
||||
| **Angular CLI** | Command-line interface for Angular tooling | `npm install -g @angular/cli` | `npm install -g @angular/cli` |
|
||||
| **Angular project dependencies** | Required packages from `package.json` | `npm install` | `npm install` |
|
||||
|
||||
---
|
||||
|
||||
#### ✏️ Updating the English Translation
|
||||
|
||||
After running the extraction command, the file `src/i18n/messages.xlf` will contain any newly added i18n entries.
|
||||
|
||||
To provide English translations:
|
||||
|
||||
1. Open `src/i18n/messages.en.xlf`.
|
||||
2. Compare it with the updated `messages.xlf` to identify any new entries.
|
||||
3. Copy the new `<trans-unit>` blocks from `messages.xlf` into `messages.en.xlf`.
|
||||
4. For each entry, add the English translation inside the `<target>` tag (in `messages.en.xlf`):
|
||||
|
||||
```xml
|
||||
<trans-unit id="..." datatype="html">
|
||||
<source>Willkommen</source>
|
||||
<target>Welcome</target>
|
||||
</trans-unit>
|
||||
```
|
||||
|
||||
### 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. (color palette name) |
|
||||
| FONT | Font family for the dashboard text. |
|
||||
|
||||
### 🎨 Color Palette
|
||||
|
||||
Below is an example of a **color palette** definition in JSON format:
|
||||
|
||||
```json
|
||||
{
|
||||
"color-palettes": [
|
||||
{
|
||||
"name": "Grey",
|
||||
"colors": {
|
||||
"text": "grey",
|
||||
"line": "grey",
|
||||
"icon": "grey",
|
||||
"background": "grey"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Black",
|
||||
"colors": {
|
||||
"text": "black",
|
||||
"line": "black",
|
||||
"icon": "black",
|
||||
"background": "#F7ADAD"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Each palette contains a unique `name` and a set of color values for different UI elements.
|
||||
|
||||
#### 🔍 Palette Elements
|
||||
|
||||
| **Variable** | **Description** |
|
||||
| ------------ | --------------------------------------------------- |
|
||||
| `name` | Identifier of the color palette |
|
||||
| `text` | Color used for text |
|
||||
| `line` | Color used for lines (e.g., borders, dividers) |
|
||||
| `icon` | Color used for icons |
|
||||
| `background` | Background color (especially useful for SVG images) |
|
||||
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Ready to Extend Teiler?
|
||||
|
||||
If you want to create your own **bridgehead app** and integrate it into **Teiler**, start by:
|
||||
|
||||
1. Selecting a template **or**
|
||||
2. Building a microfrontend compatible with [Single-SPA](https://single-spa.js.org/).
|
||||
|
||||
Then, register your app’s configuration in the **Teiler Backend** as described above.
|
||||
|
||||
> 💡 **Tip:** This flexible, modular design makes it easy to plug in your own features and services.
|
||||
|
||||
---
|
||||
|
||||
### 🔧 Build & Contribute Your App!
|
||||
|
||||
🧩 **Join the ecosystem!**
|
||||
Add your app to Teiler and expand its functionality for everyone.
|
||||
|
||||
Whether it’s a visualization tool, a data processing module, or a custom UI component — your contribution can help grow the platform. 💪
|
||||
|
||||
> 👉 **Get started today and shape the future of Teiler!**
|
||||
|
||||
In this component, the microfrontends are configured.
|
||||
|
@ -3,6 +3,7 @@ BROKER_URL=https://${BROKER_ID}
|
||||
PROXY_ID=${SITE_ID}.${BROKER_ID}
|
||||
PRIVATEKEYFILENAME=/etc/bridgehead/pki/${SITE_ID}.priv.pem
|
||||
BROKER_URL_FOR_PREREQ=$BROKER_URL
|
||||
echo $PRIVATEKEYFILENAME
|
||||
|
||||
# Makes sense for all European Biobanks
|
||||
: ${ENABLE_ERIC:=true}
|
||||
@ -12,6 +13,8 @@ BROKER_URL_FOR_PREREQ=$BROKER_URL
|
||||
|
||||
FOCUS_RETRY_COUNT=${FOCUS_RETRY_COUNT:-64}
|
||||
|
||||
POSTGRES_TAG=15.6-alpine
|
||||
|
||||
for module in $PROJECT/modules/*.sh
|
||||
do
|
||||
log DEBUG "sourcing $module"
|
||||
|
@ -13,8 +13,8 @@ services:
|
||||
- "traefik.http.middlewares.teiler_orchestrator_ccp_strip.stripprefix.prefixes=/ccp-teiler"
|
||||
- "traefik.http.routers.teiler_orchestrator_ccp.middlewares=teiler_orchestrator_ccp_strip"
|
||||
environment:
|
||||
TEILER_BACKEND_URL: "/ccp-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "/ccp-teiler-dashboard"
|
||||
TEILER_BACKEND_URL: "https://${HOST}/ccp-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "https://${HOST}/ccp-teiler-dashboard"
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE_LOWER_CASE}"
|
||||
HTTP_RELATIVE_PATH: "/ccp-teiler"
|
||||
|
||||
@ -30,8 +30,8 @@ services:
|
||||
- "traefik.http.routers.teiler_dashboard_ccp.middlewares=teiler_dashboard_ccp_strip"
|
||||
environment:
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE}"
|
||||
TEILER_BACKEND_URL: "/ccp-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "/ccp-teiler-dashboard"
|
||||
TEILER_BACKEND_URL: "https://${HOST}/ccp-teiler-backend"
|
||||
TEILER_DASHBOARD_URL: "https://${HOST}/ccp-teiler-dashboard"
|
||||
OIDC_URL: "${OIDC_URL}"
|
||||
OIDC_CLIENT_ID: "${OIDC_PUBLIC_CLIENT_ID}"
|
||||
OIDC_TOKEN_GROUP: "${OIDC_GROUP_CLAIM}"
|
||||
@ -40,7 +40,7 @@ services:
|
||||
TEILER_ADMIN_PHONE: "${OPERATOR_PHONE}"
|
||||
TEILER_PROJECT: "${PROJECT}"
|
||||
EXPORTER_API_KEY: "${EXPORTER_API_KEY}"
|
||||
TEILER_ORCHESTRATOR_URL: "/ccp-teiler"
|
||||
TEILER_ORCHESTRATOR_URL: "https://${HOST}/ccp-teiler"
|
||||
TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH: "/ccp-teiler"
|
||||
TEILER_USER: "${OIDC_USER_GROUP}"
|
||||
TEILER_ADMIN: "${OIDC_ADMIN_GROUP}"
|
||||
@ -61,11 +61,12 @@ services:
|
||||
environment:
|
||||
LOG_LEVEL: "INFO"
|
||||
APPLICATION_PORT: "8085"
|
||||
APPLICATION_ADDRESS: "${HOST}"
|
||||
DEFAULT_LANGUAGE: "${TEILER_DEFAULT_LANGUAGE}"
|
||||
TEILER_ORCHESTRATOR_HTTP_RELATIVE_PATH: "/ccp-teiler"
|
||||
TEILER_ORCHESTRATOR_URL: "/ccp-teiler"
|
||||
TEILER_DASHBOARD_DE_URL: "/ccp-teiler-dashboard/de"
|
||||
TEILER_DASHBOARD_EN_URL: "/ccp-teiler-dashboard/en"
|
||||
TEILER_ORCHESTRATOR_URL: "https://${HOST}/ccp-teiler"
|
||||
TEILER_DASHBOARD_DE_URL: "https://${HOST}/ccp-teiler-dashboard/de"
|
||||
TEILER_DASHBOARD_EN_URL: "https://${HOST}/ccp-teiler-dashboard/en"
|
||||
HTTP_PROXY: "http://forward_proxy:3128"
|
||||
ENABLE_MTBA: "${ENABLE_MTBA}"
|
||||
ENABLE_DATASHIELD: "${ENABLE_DATASHIELD}"
|
||||
|
@ -1,287 +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
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-orchestrator](https://github.com/samply/teiler-orchestrator)
|
||||
|
||||
The **Teiler Orchestrator** is the entry point of the **Single Page Application (SPA)**. It consists of:
|
||||
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.
|
||||
|
||||
- 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.
|
||||
|
||||
|
||||
---
|
||||
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
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-dashboard](https://github.com/samply/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.
|
||||
|
||||
---
|
||||
It consists on the main dashboard and a set of embedded services.
|
||||
### Login
|
||||
user and password in ccp.local.conf
|
||||
|
||||
## Teiler Backend
|
||||
|
||||
**GitHub repository:** [https://github.com/samply/teiler-backend](https://github.com/samply/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.
|
||||
|
||||
### Internationalization (i18n)
|
||||
#### ⚠️ Important
|
||||
|
||||
If you make any changes to the **Teiler Dashboard**, and those changes involve text elements (e.g., labels, buttons, messages), you must also update the **English translations**, since the application uses **internationalization (i18n)**.
|
||||
|
||||
The **default language** of the project is **German**, so any new text must be manually translated into English after extracting the updated i18n entries.
|
||||
|
||||
To extract new translation entries, run the following command:
|
||||
|
||||
```bash
|
||||
ng extract-i18n --output-path src/i18n --format=xlf2
|
||||
````
|
||||
|
||||
This will generate or update the file:
|
||||
`src/i18n/messages.xlf`
|
||||
|
||||
---
|
||||
|
||||
#### ✅ Requirements to Run the Extraction Command
|
||||
|
||||
| Program | Purpose | Linux Shell (Ubuntu/Debian) | Windows PowerShell |
|
||||
| -------------------------------- | ---------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| **Node.js** | JavaScript runtime required by Angular and npm | `sudo apt update && sudo apt install nodejs npm`<br>**or**<br>[Use NodeSource setup](https://github.com/nodesource/distributions) (recommended) | [Download from nodejs.org](https://nodejs.org) and install manually |
|
||||
| **npm** | Node package manager (comes with Node.js) | *(Included with Node.js)* | *(Included with Node.js)* |
|
||||
| **Angular CLI** | Command-line interface for Angular tooling | `npm install -g @angular/cli` | `npm install -g @angular/cli` |
|
||||
| **Angular project dependencies** | Required packages from `package.json` | `npm install` | `npm install` |
|
||||
|
||||
---
|
||||
|
||||
#### ✏️ Updating the English Translation
|
||||
|
||||
After running the extraction command, the file `src/i18n/messages.xlf` will contain any newly added i18n entries.
|
||||
|
||||
To provide English translations:
|
||||
|
||||
1. Open `src/i18n/messages.en.xlf`.
|
||||
2. Compare it with the updated `messages.xlf` to identify any new entries.
|
||||
3. Copy the new `<trans-unit>` blocks from `messages.xlf` into `messages.en.xlf`.
|
||||
4. For each entry, add the English translation inside the `<target>` tag (in `messages.en.xlf`):
|
||||
|
||||
```xml
|
||||
<trans-unit id="..." datatype="html">
|
||||
<source>Willkommen</source>
|
||||
<target>Welcome</target>
|
||||
</trans-unit>
|
||||
```
|
||||
|
||||
### 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. (color palette name) |
|
||||
| FONT | Font family for the dashboard text. |
|
||||
|
||||
### 🎨 Color Palette
|
||||
|
||||
Below is an example of a **color palette** definition in JSON format:
|
||||
|
||||
```json
|
||||
{
|
||||
"color-palettes": [
|
||||
{
|
||||
"name": "Grey",
|
||||
"colors": {
|
||||
"text": "grey",
|
||||
"line": "grey",
|
||||
"icon": "grey",
|
||||
"background": "grey"
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Black",
|
||||
"colors": {
|
||||
"text": "black",
|
||||
"line": "black",
|
||||
"icon": "black",
|
||||
"background": "#F7ADAD"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
Each palette contains a unique `name` and a set of color values for different UI elements.
|
||||
|
||||
#### 🔍 Palette Elements
|
||||
|
||||
| **Variable** | **Description** |
|
||||
| ------------ | --------------------------------------------------- |
|
||||
| `name` | Identifier of the color palette |
|
||||
| `text` | Color used for text |
|
||||
| `line` | Color used for lines (e.g., borders, dividers) |
|
||||
| `icon` | Color used for icons |
|
||||
| `background` | Background color (especially useful for SVG images) |
|
||||
|
||||
|
||||
---
|
||||
|
||||
### 🚀 Ready to Extend Teiler?
|
||||
|
||||
If you want to create your own **bridgehead app** and integrate it into **Teiler**, start by:
|
||||
|
||||
1. Selecting a template **or**
|
||||
2. Building a microfrontend compatible with [Single-SPA](https://single-spa.js.org/).
|
||||
|
||||
Then, register your app’s configuration in the **Teiler Backend** as described above.
|
||||
|
||||
> 💡 **Tip:** This flexible, modular design makes it easy to plug in your own features and services.
|
||||
|
||||
---
|
||||
|
||||
### 🔧 Build & Contribute Your App!
|
||||
|
||||
🧩 **Join the ecosystem!**
|
||||
Add your app to Teiler and expand its functionality for everyone.
|
||||
|
||||
Whether it’s a visualization tool, a data processing module, or a custom UI component — your contribution can help grow the platform. 💪
|
||||
|
||||
> 👉 **Get started today and shape the future of Teiler!**
|
||||
|
||||
In this component, the microfrontends are configured.
|
||||
|
2
ccp/vars
2
ccp/vars
@ -15,6 +15,8 @@ OIDC_PUBLIC_CLIENT_ID=${SITE_ID}-public
|
||||
OIDC_URL="https://login.verbis.dkfz.de/realms/test-realm-01"
|
||||
OIDC_GROUP_CLAIM="groups"
|
||||
|
||||
POSTGRES_TAG=15.6-alpine
|
||||
|
||||
for module in $PROJECT/modules/*.sh
|
||||
do
|
||||
log DEBUG "sourcing $module"
|
||||
|
@ -8,6 +8,8 @@ PRIVATEKEYFILENAME=/etc/bridgehead/pki/${SITE_ID}.priv.pem
|
||||
|
||||
BROKER_URL_FOR_PREREQ=$BROKER_URL
|
||||
|
||||
POSTGRES_TAG=15.6-alpine
|
||||
|
||||
for module in ccp/modules/*.sh
|
||||
do
|
||||
log DEBUG "sourcing $module"
|
||||
|
@ -301,19 +301,34 @@ function sync_secrets() {
|
||||
if [[ $secret_sync_args == "" ]]; then
|
||||
return
|
||||
fi
|
||||
|
||||
if [ "$PROJECT" == "bbmri" ]; then
|
||||
# If the project is BBMRI, use the BBMRI-ERIC broker and not the GBN broker
|
||||
proxy_id=$ERIC_PROXY_ID
|
||||
broker_url=$ERIC_BROKER_URL
|
||||
broker_id=$ERIC_BROKER_ID
|
||||
root_crt_file="/srv/docker/bridgehead/bbmri/modules/${ERIC_ROOT_CERT}.root.crt.pem"
|
||||
else
|
||||
proxy_id=$PROXY_ID
|
||||
broker_url=$BROKER_URL
|
||||
broker_id=$BROKER_ID
|
||||
root_crt_file="/srv/docker/bridgehead/$PROJECT/root.crt.pem"
|
||||
fi
|
||||
|
||||
mkdir -p /var/cache/bridgehead/secrets/ || fail_and_report 1 "Failed to create '/var/cache/bridgehead/secrets/'. Please run sudo './bridgehead install $PROJECT' again."
|
||||
touch /var/cache/bridgehead/secrets/oidc
|
||||
echo $PRIVATEKEYFILENAME
|
||||
docker run --rm \
|
||||
-v /var/cache/bridgehead/secrets/oidc:/usr/local/cache \
|
||||
-v $PRIVATEKEYFILENAME:/run/secrets/privkey.pem:ro \
|
||||
-v /srv/docker/bridgehead/$PROJECT/root.crt.pem:/run/secrets/root.crt.pem:ro \
|
||||
-v $root_crt_file:/run/secrets/root.crt.pem:ro \
|
||||
-v /etc/bridgehead/trusted-ca-certs:/conf/trusted-ca-certs:ro \
|
||||
-e TLS_CA_CERTIFICATES_DIR=/conf/trusted-ca-certs \
|
||||
-e NO_PROXY=localhost,127.0.0.1 \
|
||||
-e ALL_PROXY=$HTTPS_PROXY_FULL_URL \
|
||||
-e PROXY_ID=$PROXY_ID \
|
||||
-e BROKER_URL=$BROKER_URL \
|
||||
-e OIDC_PROVIDER=secret-sync-central.central-secret-sync.$BROKER_ID \
|
||||
-e PROXY_ID=$proxy_id \
|
||||
-e BROKER_URL=$broker_url \
|
||||
-e OIDC_PROVIDER=secret-sync-central.central-secret-sync.$broker_id \
|
||||
-e SECRET_DEFINITIONS=$secret_sync_args \
|
||||
docker.verbis.dkfz.de/cache/samply/secret-sync-local:latest
|
||||
|
||||
|
@ -49,12 +49,6 @@ if [ -z "$TRANSFAIR_AUTH" ]; then
|
||||
fi
|
||||
fi
|
||||
|
||||
if [ "$ENABLE_EXPORTER" == "true" ] && [ -z "$EXPORTER_USER" ]; then
|
||||
log "INFO" "Now generating basic auth for the exporter and reporter (see adduser in bridgehead for more information)."
|
||||
generated_passwd="$(cat /proc/sys/kernel/random/uuid | sed 's/[-]//g' | head -c 32)"
|
||||
add_basic_auth_user $PROJECT $generated_passwd "EXPORTER_USER" $PROJECT
|
||||
fi
|
||||
|
||||
log "INFO" "Registering system units for bridgehead and bridgehead-update"
|
||||
cp -v \
|
||||
lib/systemd/bridgehead\@.service \
|
||||
|
@ -1,4 +1,3 @@
|
||||
FOCUS_TAG=develop
|
||||
BEAM_TAG=develop
|
||||
BLAZE_TAG=main
|
||||
POSTGRES_TAG=15.13-alpine
|
||||
BLAZE_TAG=main
|
@ -1,4 +1,3 @@
|
||||
FOCUS_TAG=main
|
||||
BEAM_TAG=main
|
||||
BLAZE_TAG=0.32
|
||||
POSTGRES_TAG=15.13-alpine
|
||||
BLAZE_TAG=0.32
|
@ -1,4 +1,3 @@
|
||||
FOCUS_TAG=develop
|
||||
BEAM_TAG=develop
|
||||
BLAZE_TAG=main
|
||||
POSTGRES_TAG=15.13-alpine
|
||||
BLAZE_TAG=main
|
Reference in New Issue
Block a user