scality · bert-e · Jul 7, 2021 · May 26, 2021 · May 26, 2021 · Jun 4, 2021
@@ -63,6 +63,10 @@
   of this virtual IP using [MetalLB](https://metallb.universe.tf/)
   (PR[#3418](https://github.com/scality/metalk8s/pull/3418)).
 
+- Use webpack 5 module federation to provide a framework allowing
+  aggregation of solutions UIs
+  (PR[#3414](https://github.com/scality/metalk8s/pull/3414))
+
 ### Breaking changes
 
 - [#2199](https://github.com/scality/metalk8s/issues/2199) - Prometheus label

@@ -351,7 +351,19 @@ def _get_parts(self) -> Iterator[str]:
     Path("salt/metalk8s/addons/ui/deployed/ingress.sls"),
     Path("salt/metalk8s/addons/ui/deployed/init.sls"),
     Path("salt/metalk8s/addons/ui/config/metalk8s-shell-ui-config.yaml.j2"),
-    Path("salt/metalk8s/addons/ui/config/metalk8s-ui-config.yaml"),
+    Path("salt/metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2"),
+    targets.TemplateFile(
+        task_name="salt/metalk8s/addons/ui/config/deployed-ui-apps.yaml.j2",
+        source=constants.ROOT.joinpath(
+            "salt/metalk8s/addons/ui/config/deployed-ui-apps.yaml.j2.in"
+        ),
+        destination=constants.ISO_ROOT.joinpath(
+            "salt/metalk8s/addons/ui/config/deployed-ui-apps.yaml.j2"
+        ),
+        context={
+            "VERSION": versions.VERSION,
+        },
+    ),
     Path("salt/metalk8s/addons/ui/deployed/ui-configuration.sls"),
     Path("salt/metalk8s/addons/ui/deployed/files/metalk8s-ui-deployment.yaml.j2"),
     Path("salt/metalk8s/addons/ui/deployed/namespace.sls"),

@@ -16,7 +16,6 @@
 from buildchain import types
 from buildchain import utils
 from buildchain import ui
-from buildchain import versions
 
 
 def task_shell_ui() -> types.TaskDict:
@@ -56,9 +55,7 @@ def clean() -> None:
         ],
         "file_dep": list(utils.git_ls("shell-ui")),
         "targets": [
-            constants.SHELL_UI_BUILD_ROOT.joinpath(
-                f"solution-ui-navbar.{versions.SHELL_UI_VERSION}.js"
-            ),
+            constants.SHELL_UI_BUILD_ROOT / "shell" / "index.html",
         ],
         "clean": [clean],
     }
@@ -74,6 +71,9 @@ def run_shell_ui_builder(cmd: str) -> docker_command.DockerRun:
         entrypoint="../ui/entrypoint.sh",
         source_mounts=[
             "src",
+            "public",
+            "index-template.html",
+            "webpack.common.js",
             "webpack.config.prd.js",
             "babel.config.js",
             ".flowconfig",

@@ -26,7 +26,7 @@ Procedure
     kubectl --kubeconfig /etc/kubernetes/admin.conf \
         edit cm -n metalk8s-auth metalk8s-dex-config
 
-This will allow you to register localhost:3000 as a valid authentication
+This will allow you to register localhost:8084 as a valid authentication
  target. To do so add the following sections under config.yaml:
 
 .. code-block:: yaml
@@ -38,7 +38,7 @@ This will allow you to register localhost:3000 as a valid authentication
         name: MetalK8s UI
         redirectURIs:
           - https://<bootstrap_control_plane_ip>:8443/
-          - http://localhost:3000/
+          - http://localhost:8084/
         secret: ybrMJpVMQxsiZw26MhJzCjA2ut
 
 You can retrieve the ``bootstrap_control_plane_ip`` by running:
@@ -94,4 +94,8 @@ You can retrieve the ``bootstrap_control_plane_ip`` by running:
 #. In `webpack.dev.js` edit the value of `controlPlaneIP` and provide
    your cluster bootstrap node's control plane IP
 
-#. Run the UI with ``cd ui; npm run start``
+#. Run ShellUI with ``cd shell-ui; npm run start``
+
+#. Run the UI with ``cd ui; npm run start:ui``
+
+#. Access the UI by browsing to ``http://localhost:8084``
@@ -95,7 +95,7 @@ centralized user interface.
 
 The default configuration values for MetalK8s UI are specified below:
 
-.. literalinclude:: ../../salt/metalk8s/addons/ui/config/metalk8s-ui-config.yaml
+.. literalinclude:: ../../salt/metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2
    :language: yaml
    :lines: 3-
 

@@ -18,23 +18,23 @@ RUN rm -rf /usr/share/nginx/html/*
 
 RUN adduser -u 1000 --home /home/node node
 
-USER node
+#USER node
 WORKDIR /home/node
 
 COPY package.json package-lock.json /home/node/
 
-RUN npm ci
+RUN npm config set unsafe-perm true && npm ci
 
 COPY .babelrc webpack.common.js webpack.prod.js /home/node/
 COPY public /home/node/public/
 COPY src /home/node/src/
 
 RUN npm run build
 
-USER root
+#USER root
 
 # }}}
 
-RUN cp -r build/* /usr/share/nginx/html/
+RUN shopt -s dotglob && cp -r build/* /usr/share/nginx/html/
 
 CMD ["nginx", "-g", "daemon off;"]
@@ -26,19 +26,20 @@ RUN rm -rf /usr/share/nginx/html/*
 
 RUN adduser -u 1000 --home /home/node node
 
-USER node
+# USER node
 WORKDIR /home/node
 
 COPY package.json package-lock.json /home/node/
 
-RUN npm ci
+RUN npm config set unsafe-perm true && npm ci
 
-COPY webpack.*.js babel.config.js .flowconfig /home/node/
+COPY index-template.html webpack.*.js babel.config.js .flowconfig /home/node/
+COPY public /home/node/public/
 COPY src /home/node/src/
 
 RUN npm run build
 
-USER root
+# USER root
 
 # }}}
 

@@ -21,13 +21,20 @@ server {
         # text/html is always compressed by gzip module
 
     root   /usr/share/nginx/html;
-    index index.html index.htm;
+    index  /shell/index.html;
 
     location / {
-        try_files $uri $uri/ /index.html;
+        try_files $uri $uri/ /shell/index.html;
+        # sub_filter </head>
+        #     '</head><script language="javascript">window.shellUIRemoteEntryUrl = "/shell/remoteEntry.js?" + Date.now();</script>';
+        # sub_filter_once on;
     }
 
     # Provide the ConfigMaps generated for MetalK8s UI
+    location /.well-known/runtime-app-configuration {
+        alias /etc/metalk8s/ui/config/runtime-app-configuration.json;
+    }
+
     location /config.json {
         alias /etc/metalk8s/ui/config/config.json;
     }
@@ -37,6 +44,10 @@ server {
         alias /etc/metalk8s/ui/shell-config/config.json;
     }
 
+    location /shell/deployed-ui-apps.json {
+        alias /etc/metalk8s/ui/deployed-ui-apps/deployed-ui-apps.json;
+    }
+
     # Use the theme provided by the customer
     location ~ /brand/(.+) {
         alias /;

@@ -1,7 +1,7 @@
 #!jinja|yaml
 
 {%- set metalk8s_ui_defaults = salt.slsutil.renderer(
-        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml', saltenv=saltenv
+        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2', saltenv=saltenv
     )
 %}
 

@@ -0,0 +1,23 @@
+#!jinja|yaml
+
+{%- set version = "@@VERSION" -%}
+{%- set metalk8s_ui_defaults = salt.slsutil.renderer(
+        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2', saltenv=saltenv
+    )
+%}
+
+{%- set metalk8s_ui_config = salt.metalk8s_service_configuration.get_service_conf(
+        'metalk8s-ui', 'metalk8s-ui-config', metalk8s_ui_defaults
+    )
+%}
+
+# Defaults deployed UI apps
+apiVersion: addons.metalk8s.scality.com/v1alpha1
+kind: DeployedUIApps
+spec:
+  deployedApps:
+    - kind: "metalk8s-ui"
+      name: "metalk8s.eu-west-1"
+      version: "{{ version }}"
+      url: "{{ salt.metalk8s_network.get_control_plane_ingress_endpoint() }}{{ '/' ~ metalk8s_ui_config.spec.basePath.lstrip('/') if metalk8s_ui_config.spec.basePath.lstrip('/') else '' }}"
+      appHistoryBasePath: "{{ '/' ~ metalk8s_ui_config.spec.basePath.lstrip('/') if metalk8s_ui_config.spec.basePath.lstrip('/') else '' }}"
@@ -3,7 +3,7 @@
 {%- set dex_defaults = salt.slsutil.renderer('salt://metalk8s/addons/dex/config/dex.yaml.j2', saltenv=saltenv) %}
 {%- set dex = salt.metalk8s_service_configuration.get_service_conf('metalk8s-auth', 'metalk8s-dex-config', dex_defaults) %}
 {%- set metalk8s_ui_defaults = salt.slsutil.renderer(
-        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml', saltenv=saltenv
+        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2', saltenv=saltenv
     )
 %}
 
@@ -14,7 +14,7 @@
 
 
 # Defaults for shell UI configuration
-apiVersion: addons.metalk8s.scality.com/v1alpha1
+apiVersion: addons.metalk8s.scality.com/v1alpha2
 kind: ShellUIConfig
 spec:
   oidc:
@@ -27,6 +27,7 @@ spec:
 {%- for user in dex.spec.config.staticPasswords | map(attribute='email') %}
     "{{ user }}": [metalk8s:admin]
 {%- endfor %}
+  discoveryUrl: "/shell/deployed-ui-apps.json"
   logo:
     light: /brand/assets/logo-light.svg
     dark: /brand/assets/logo-dark.svg

@@ -0,0 +1,15 @@
+#!jinja|yaml
+
+# Defaults for configuration of MetalK8s UI
+apiVersion: addons.metalk8s.scality.com/v1alpha2
+kind: UIConfig
+spec:
+  auth:
+    kind: "OIDC"
+    providerUrl: "/oidc"
+    redirectUrl: "{{ salt.metalk8s_network.get_control_plane_ingress_endpoint() }}/"
+    clientId: "metalk8s-ui"
+    responseType: "id_token"
+    scopes: "openid profile email groups offline_access audience:server:client_id:oidc-auth-client"
+  title: Metalk8s Platform
+  basePath: /
@@ -61,10 +61,16 @@ spec:
           - name: shell-ui-volume
             mountPath: /etc/metalk8s/ui/shell-config
             readOnly: true
+          - name: deployed-ui-apps-volume
+            mountPath: /etc/metalk8s/ui/deployed-ui-apps
+            readOnly: true
       volumes:
         - name: metalk8s-ui-volume
           configMap:
             name: metalk8s-ui
         - name: shell-ui-volume
           configMap:
             name: shell-ui
+        - name: deployed-ui-apps-volume
+          configMap:
+            name: deployed-ui-apps-generated
@@ -1,7 +1,7 @@
 #!jinja | metalk8s_kubernetes
 
 {%- set metalk8s_ui_defaults = salt.slsutil.renderer(
-        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml', saltenv=saltenv
+        'salt://metalk8s/addons/ui/config/metalk8s-ui-config.yaml.j2', saltenv=saltenv
     )
 %}
 
@@ -91,17 +91,20 @@ metadata:
   annotations:
     nginx.ingress.kubernetes.io/backend-protocol: "HTTP"
     kubernetes.io/ingress.class: "nginx-control-plane"
+    nginx.ingress.kubernetes.io/rewrite-target: /$1
 spec:
   rules:
   - http:
       paths:
 {% for path in [
-    "/brand",
-    "/config.json",
-    "/manifest.json",
-    "/shell",
-    "/static",
-    normalized_base_path
+    "/(brand.*)",
+    "/(config.json)",
+    "/(manifest.json)",
+    "/(shell.*)",
+    "/(static.*)",
+    "/" + stripped_base_path + "/(.well-known.*)" if stripped_base_path else "/(.well-known.*)",
+    "/" + stripped_base_path + "/(static.*)" if stripped_base_path else "/(static.*)",
+    "/(" + stripped_base_path + ".*)",
 ] %}
       - path: {{ path }}
         backend: