Merge pull request #31 from Mat-O-Lab/configurable-openbismantic-url

Configurable openbismantic url

README.md

@@ -26,6 +26,7 @@ OPENBIS_SSL_PORT=<port> (e.g., 443)
 POSTGRES_PASSWORD=<postgrespassw>
 GROUP_NAME=<groupname> (e.g., matolab)
 GROUP_ID=<gid> (e.g., 12940)
+OPENBISMANTIC_URL=<url> (e.g., https://openbis.matolab.org)
 ```
 
 ## run server

docker-compose.yml

@@ -63,7 +63,7 @@ services:
     environment:
       OPENBIS_URL: "https://${HOST_NAME}:${OPENBIS_SSL_PORT}"
       NO_VERIFY_CERTIFICATES: 1
-      BASE_URL: "https://${HOST_NAME}:${OPENBIS_SSL_PORT}"
+      BASE_URL: ${OPENBISMANTIC_URL}
     networks:
       - openbis_net
   openbismantic_ui:
@@ -76,7 +76,7 @@ services:
     container_name: openbismantic_ui
     image: ghcr.io/mat-o-lab/openbismantic_ui:latest
     environment:
-      OPENBISMANTIC_URL: "https://openbismantic_api:5000"
+      OPENBISMANTIC_URL: ${OPENBISMANTIC_URL}
     networks:
       - openbis_net
 networks:

nginx/conf.d/openbis.conf

@@ -1,5 +1,6 @@
 server {
     listen 80;
+    absolute_redirect off;
 
     location /openbismantic/ {
         proxy_pass http://openbismantic_api:5000/;
@@ -34,3 +35,18 @@ server {
     }
 
 }
+
+server {
+    listen 443 ssl;
+    ssl_certificate /etc/nginx/certs/openbis.crt;
+    ssl_certificate_key /etc/nginx/certs/openbis.key;
+    absolute_redirect off;
+
+    location / {
+        proxy_pass http://localhost:80;
+        proxy_set_header Host $http_host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

openbismantic_ui/Dockerfile

@@ -3,6 +3,7 @@ FROM node:20-alpine as builder
 RUN mkdir /app
 WORKDIR /app
 
+RUN apk add bash jq
 RUN npm install -g @angular/cli
 
 COPY package.json package-lock.json ./
@@ -11,10 +12,19 @@ RUN npm ci
 COPY . .
 RUN ng build --configuration production --base-href /openbismantic/ui/
 
-CMD ["ng", "serve", "-c", "development", "--host", "0.0.0.0", "--port", "80", "--serve-path", "/openbismantic/ui/", "--disable-host-check", "--live-reload=false"]
+ENV DEV_SERVER=1
+
+# CMD ["ng", "serve", "-c", "development", "--host", "0.0.0.0", "--port", "80", "--serve-path", "/openbismantic/ui/", "--disable-host-check", "--live-reload=false"]
+ENTRYPOINT /app/entrypoint.sh
 
 FROM nginx:latest AS production
 
+RUN apt-get update && apt-get install -y jq
+
 COPY openbismantic_ui.conf /etc/nginx/conf.d/default.conf
 COPY --from=builder /app/dist/openbismantic_ui/browser /usr/share/nginx/html/openbismantic/ui
+COPY src/assets/config.json /app/src/assets/config.json
+COPY entrypoint.sh /entrypoint.sh
+
+# ENTRYPOINT /entrypoint.sh
 EXPOSE 80

openbismantic_ui/openbismantic_ui.conf

@@ -7,6 +7,6 @@ server {
     location / {
         root   /usr/share/nginx/html;
         index  index.html;
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /openbismantic/ui/index.html;
     }
 }

openbismantic_ui/src/app/app.config.ts

@@ -1,9 +1,22 @@
-import { ApplicationConfig } from '@angular/core';
+import {APP_INITIALIZER, ApplicationConfig, importProvidersFrom} from '@angular/core';
 import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideClientHydration } from '@angular/platform-browser';
+import {ConfigService} from "../config.service";
+import {HttpClientModule} from "@angular/common/http";
+
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes), provideClientHydration()]
+  providers: [
+    provideRouter(routes),
+    provideClientHydration(),
+    importProvidersFrom(HttpClientModule),
+    {
+      provide: APP_INITIALIZER,
+      useFactory: (configService: ConfigService) => configService.loadConfig.bind(configService),
+      deps: [ConfigService],
+      multi: true
+    }
+  ]
 };

openbismantic_ui/src/app/exporter/exporter.component.ts

@@ -10,6 +10,7 @@ import {MatButtonModule} from "@angular/material/button";
 import {SPARQLToQuery} from "rdflib";
 import {NgOptimizedImage} from "@angular/common";
 import {NgbModal} from "@ng-bootstrap/ng-bootstrap";
+import {ConfigService} from "../../config.service";
 
 // adapted from https://material.angular.io/components/tree/examples
 
@@ -194,13 +195,13 @@ export class OpenBISDataSource implements DataSource<DynamicFlatNode> {
   styleUrl: './exporter.component.scss'
 })
 export class ExporterComponent {
-  constructor(public modalService: NgbModal) {
+  constructor(public modalService: NgbModal, private configService: ConfigService) {
     this.treeControl = new FlatTreeControl<DynamicFlatNode>(this.getLevel, this.isExpandable);
-    this.openbismanticClient = new OpenbismanticClient();
+    this.openbismanticClient = new OpenbismanticClient(this.configService.config.OPENBISMANTIC_URL);
     this.openbismanticClient.init(modalService);
     this.dataSource = new OpenBISDataSource(this.treeControl, this.openbismanticClient);
     this.dataSource.data = [
-      new DynamicFlatNode('instance', new URL('/openbismantic/instance/', document.baseURI), 0, true)
+      new DynamicFlatNode('instance', new URL('/openbismantic/instance/', this.configService.config.OPENBISMANTIC_URL), 0, true)
     ];
   }
   openbismanticClient: OpenbismanticClient;

openbismantic_ui/src/assets/config.json

@@ -0,0 +1,3 @@
+{
+  "OPENBISMANTIC_URL": ""
+}

openbismantic_ui/src/config.service.ts

@@ -0,0 +1,19 @@
+import {Injectable} from "@angular/core";
+import {HttpClient} from "@angular/common/http";
+import {firstValueFrom} from "rxjs";
+
+@Injectable({providedIn: 'root'})
+export class ConfigService {
+  config: any = null;
+  constructor(private http: HttpClient) {
+
+  }
+
+  async loadConfig()  {
+    await firstValueFrom(this.http.get('/assets/config.json')).then(result => {
+      this.config = result;
+      return this.config;
+    })
+    console.log('loaded config', this.config)
+  }
+}

openbismantic_ui/src/openbismantic_client.ts

@@ -35,14 +35,16 @@ class OpenbismanticStore extends Store {
 }
 
 export class OpenbismanticClient {
-  constructor() {
+  constructor(baseURL: string) {
+    this.baseURL = baseURL;
     this.internalStore = new OpenbismanticStore();
     this.store = new OpenbismanticStore();
   }
 
   internalStore: OpenbismanticStore;
   store: OpenbismanticStore;
   elnSettings: {inventorySpaces: string[]}|null = null;
+  baseURL: string;
 
   capitalize(s: string) {
     return s[0].toUpperCase() + s.slice(1);
@@ -96,10 +98,10 @@ export class OpenbismanticClient {
   }
 
   async getELNSettings() {
-    await this.internalStore.fetchUrl(new URL('/openbismantic/eln_settings', document.baseURI));
+    await this.internalStore.fetchUrl(new URL('/openbismantic/eln_settings', this.baseURL));
     const queryString = 'SELECT ?settings ?iri WHERE {' +
-        `?iri <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <${document.baseURI}/openbismantic/class/GENERAL_ELN_SETTINGS>. ` +
-        `?iri <${document.baseURI}/openbismantic/object_property/ELN_SETTINGS> ?b01. ` +
+        `?iri <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <${this.baseURL}/openbismantic/class/GENERAL_ELN_SETTINGS>. ` +
+        `?iri <${this.baseURL}/openbismantic/object_property/ELN_SETTINGS> ?b01. ` +
         '?b01 <http://www.w3.org/ns/oa#hasLiteralBody> ?settings.' +
         '}';
     console.log(queryString);