Skip to content

Customization

tl;dr

Debug Information

Image: registry.datalab.tuwien.ac.at/dbrepo/ui:1.4.7

  • Ports: 3000/tcp

The User Interface is configured in the runtimeConfig section of the nuxt.config.ts file during build time. For the runtime, you need to override those values through environment variables or by mounting a .env file. As a small example, you can configure the logo in Figure 2. Make sure you mount the logo as image as well, in this example we want to mount a custom logo my_logo.png into the container and specify the name.

Architecture of the UI microservice

Figure 1: Architecture of the UI microservice

Text values like the version and title can be configured as well via the Nuxt runtime configuration through single environment variables or .env files.

.env
NUXT_PUBLIC_TITLE="My overriden title"
NUXT_PUBLIC_LOGO="https://mydomain/my_logo.png"
NUXT_PUBLIC_ICON="https://mydomain/my_favicon.ico"
...

To work, you need to serve the my_logo.png and my_favicon.ico from a separate webserver. Note that simply copying the files into the Nuxt public/ directory will not work as the content length is calculated only during build time. The development team #19263 does not plan to fix this.

Text values like the version and title can be configured as well via the Nuxt runtime configuration through setting the variables in the values.yaml file.

values.yaml
ui:
  public:
    logo: "/my_logo.png"
    icon: "/favicon.ico"
  extraVolumes:
    - name: images-map
      configMap:
        name: ui-config
  extraVolumeMounts:
    - name: images-map
      mountPath: /static/

To work, you need to mount the my_logo.png file into the dbrepo-ui deployment via a ConfigMap and Volumes. For this, encode the files in base64 with cat my_logo.png | base64.

dbrepo-ui-custom.yaml
apiVersion: v1
kind: ConfigMap
metadata:
  name: ui-config
binaryData:
  my_logo.png: |
    <base64>
  favicon.ico: |
    <base64>

Architecture

The server-client architecture of the User Interface is shown in Figure 3, it is supposed to help debug the User Interface on development.

Architecture of the UI microservice

Figure 2: Architecture of the User Interface

Example

See the API Overview page for detailed examples.

Limitations

(none)

Do you miss functionality? Do these limitations affect you?

We strongly encourage you to help us implement it as we are welcoming contributors to open-source software and get in contact with us, we happily answer requests for collaboration with attached CV and your programming experience!

Security

(none)