✨ Add UI Client/Server + container images

.dockerignore

@@ -0,0 +1,6 @@
+**/node_modules/
+**/dist/
+**/target/
+
+**/.idea/
+**/.openubl/

.github/workflows/ci-image-build.yaml

@@ -0,0 +1,102 @@
+name: CI (test image build for a PR with build related changes)
+
+on:
+  pull_request:
+    branches:
+      - "main"
+      - "release-*"
+
+jobs:
+  checks:
+    runs-on: ubuntu-latest
+    outputs:
+      should-test: ${{ steps.check-changes.outputs.should-test }}
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: What files changed?
+        id: changed
+        uses: tj-actions/changed-files@v45
+        with:
+          files: |
+            Dockerfile.*
+            **/package.json
+            **/package-lock.json
+
+      - name: Check if build related files have been changed in a PR
+        id: check-changes
+        env:
+          IS_PR: ${{ !!github.event.pull_request }}
+          ANY_MODIFIED: ${{ steps.changed.outputs.any_modified }}
+        run: |
+          TEST_IMAGE_BUILD=$(
+            if [[ $IS_PR == true ]] && [[ $ANY_MODIFIED == true ]]; then
+              echo "true"
+            else
+              echo "false"
+            fi
+          )
+
+          echo "is-pr=$IS_PR" >> "$GITHUB_OUTPUT"
+          echo "changed=${ANY_MODIFIED:-false}" >> "$GITHUB_OUTPUT"
+          echo "should-test=$TEST_IMAGE_BUILD" >> "$GITHUB_OUTPUT"
+
+      - name: Summarize findings
+        env:
+          MODIFIED_FILES: ${{ steps.changed.outputs.all_modified_files }}
+        run: |
+          cat >> "$GITHUB_STEP_SUMMARY" <<EOF
+          ## Findings
+          PR triggered? \`${{ steps.check-changes.outputs.is-pr }}\`
+          PR includes a build file related change? \`${{ steps.check-changes.outputs.changed }}\`
+          Should the image build be tested? \`${{ steps.check-changes.outputs.should-test }}\`
+          EOF
+
+          if [[ -n "$MODIFIED_FILES" ]]; then
+            echo "## Build related modified files" >> "$GITHUB_STEP_SUMMARY"
+            for file in ${MODIFIED_FILES}; do
+              echo "  - \`$file\`" >> "$GITHUB_STEP_SUMMARY"
+            done
+          fi
+
+  #
+  # Only test the image build, no push to registry is required.
+  #
+  test-image-build:
+    runs-on: ubuntu-latest
+    needs: checks
+    if: ${{ needs.checks.outputs.should-test == 'true' }}
+
+    strategy:
+      fail-fast: true
+      matrix:
+        architecture: # keep this list in sync with `image-build.yaml`
+          - amd64
+          - arm64
+
+    concurrency:
+      group: test-image-build-${{ matrix.architecture }}_${{ github.ref }}
+      cancel-in-progress: true
+
+    steps:
+      - name: Checkout merge commit for PR${{ github.event.pull_request.number }}
+        uses: actions/checkout@v4
+
+      - name: Setup QEMU to be able to build on ${{ matrix.architecture }}
+        if: ${{ matrix.architecture != 'amd64' }}
+        uses: docker/setup-qemu-action@master
+        with:
+          platforms: ${{ matrix.architecture }}
+
+      - name: Test build image on ${{ matrix.architecture }}
+        id: test-build
+        uses: redhat-actions/buildah-build@main
+        with:
+          image: "openubl-ui"
+          tags: pr${{ github.event.pull_request.number }}-${{ matrix.architecture }}
+          extra-args: "--no-cache --rm --ulimit nofile=4096:4096"
+          archs: ${{ matrix.architecture }}
+          labels: ""
+          containerfiles: "./Dockerfile.ui"
+          context: "."

.github/workflows/ci.yml → .github/workflows/ci-repo.yml

@@ -17,6 +17,11 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: Swatinem/rust-cache@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: server/ui/package-lock.json
       - name: Install dependencies
         uses: ./.github/actions/install-dependencies
       - name: Install clippy
@@ -30,11 +35,16 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: Swatinem/rust-cache@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+          cache-dependency-path: server/ui/package-lock.json
       - name: Install dependencies
         uses: ./.github/actions/install-dependencies
       - run: cargo test
 
-  npm-lint:
+  npm-check:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4

.github/workflows/image-build.yaml

@@ -0,0 +1,27 @@
+name: Multiple Architecture Image Build
+
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - "main"
+      - "release-*"
+    tags:
+      - "v*"
+
+concurrency:
+  group: build-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  ui-image-build:
+    uses: project-openubl/release-tools/.github/workflows/build-push-images.yaml@main
+    with:
+      registry: "ghcr.io"
+      image_name: "${{ github.repository_owner }}/openubl-ui"
+      containerfile: "./Dockerfile.ui"
+      architectures: '[ "amd64", "arm64" ]'
+      extra-args: "--ulimit nofile=4096:4096"
+    secrets:
+      registry_username: ${{ github.actor }}
+      registry_password: ${{ secrets.GITHUB_TOKEN }}

Dockerfile.ui

@@ -0,0 +1,40 @@
+# Builder image
+FROM registry.access.redhat.com/ubi9/nodejs-22:latest AS builder
+
+USER 1001
+COPY --chown=1001 ./server/ui .
+COPY --chown=1001 ./entrypoint.ui.sh ./entrypoint.sh
+RUN npm install -g npm@9
+RUN npm clean-install --ignore-scripts && npm run build && npm run dist
+
+# Runner image
+FROM registry.access.redhat.com/ubi9/nodejs-22-minimal:latest
+
+# Add ps package to allow liveness probe for k8s cluster
+# Add tar package to allow copying files with kubectl scp
+USER 0
+RUN microdnf -y install tar procps-ng && microdnf clean all
+
+USER 1001
+
+LABEL name="openubl/openubl-ui" \
+      description="Openubl - User Interface" \
+      help="For more information visit https://project-openubl.github.io/" \
+      license="Apache License 2.0" \
+      maintainer="carlosthe19916@gmail.com" \
+      summary="Openubl - User Interface" \
+      url="https://ghcr.io/project-openubl/openubl-ui" \
+      usage="podman run -p 80 -v project-openubl/openubl-ui:latest" \
+      io.k8s.display-name="openubl-ui" \
+      io.k8s.description="Openubl - User Interface" \
+      io.openshift.expose-services="80:http" \
+      io.openshift.tags="operator,openubl,ui,nodejs22" \
+      io.openshift.min-cpu="100m" \
+      io.openshift.min-memory="350Mi"
+
+COPY --from=builder /opt/app-root/src/dist /opt/app-root/dist/
+
+ENV DEBUG=1
+
+WORKDIR /opt/app-root/dist
+ENTRYPOINT ["./entrypoint.sh"]

entrypoint.ui.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+set -e
+
+if [[ -z "$OPENUBL_API_URL" ]]; then
+  echo "You must provide OPENUBL_API_URL environment variable" 1>&2
+  exit 1
+fi
+
+if [[ -z "${NODE_EXTRA_CA_CERTS}" ]]; then
+    # Nothing to do
+    echo "No NODE_EXTRA_CA_CERTS found"
+  else
+    # Copy the Kube API and service CA bundle to /opt/app-root/src/ca.crt if they exist
+
+    # Add Kube API CA
+    if [ -f "/var/run/secrets/kubernetes.io/serviceaccount/ca.crt" ]; then
+      cp /var/run/secrets/kubernetes.io/serviceaccount/ca.crt ${NODE_EXTRA_CA_CERTS}
+    fi
+
+    # Add service serving CA
+    if [ -f "/var/run/secrets/kubernetes.io/serviceaccount/service-ca.crt" ]; then
+      cat /var/run/secrets/kubernetes.io/serviceaccount/service-ca.crt >>${NODE_EXTRA_CA_CERTS}
+    fi
+
+    # Add custom ingress CA if it exists
+    if [ -f "/etc/pki/ca-trust/extracted/pem/tls-ca-bundle.pem" ]; then
+      cat /etc/pki/ca-trust/extracted/pem/tls-ca-bundle.pem >>${NODE_EXTRA_CA_CERTS}
+    fi
+fi
+
+exec node --enable-source-maps server/dist/index.js

server/ui/branding/manifest.json

@@ -0,0 +1,15 @@
+{
+    "short_name": "openubl-ui",
+    "name": "Openubl UI",
+    "icons": [
+      {
+        "src": "favicon.ico",
+        "sizes": "64x64 32x32 24x24 16x16",
+        "type": "image/x-icon"
+      }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
+  }

server/ui/branding/strings.json

@@ -0,0 +1,21 @@
+{
+	"application": {
+		"title": "Openubl",
+		"name": "Openubl UI",
+		"description": "Openubl UI"
+	},
+	"about": {
+		"displayName": "Openubl",
+		"imageSrc": "<%= brandingRoot %>/images/masthead-logo.svg",
+		"documentationUrl": "https://project-openubl.github.io/"
+	},
+	"masthead": {
+		"leftBrand": {
+			"src": "<%= brandingRoot %>/images/masthead-logo.svg",
+			"alt": "brand",
+			"height": "40px"
+		},
+		"leftTitle": null,
+		"rightBrand": null
+	}
+}

server/ui/index.html → server/ui/client/index.html

@@ -1,6 +1,9 @@
 <!DOCTYPE html>
 <html lang="en-US">
 <head>
+  <title><%= branding.application.title %></title>
+  <meta name="description" content="<%= branding.application.description ?? branding.application.title %>"/>
+  <meta id="appName" name="application-name" content="<%= branding.application.name ?? branding.application.title %>"/>
   <meta charset="utf-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1"/>
   <meta name="theme-color" content="#000000"/>