Merge pull request #1630 from thfries/ui_build_with_esbuild

UI - Build UI with esbuild

.github/workflows/docker-nightly.yml

@@ -129,7 +129,16 @@ jobs:
           tags: |
             eclipse/ditto-connectivity:${{ env.IMAGE_TAG }}
       -
-        name: Build and push ditto-ui
+        name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      -
+        name: Build UI with node
+        run: npm run build
+        working-directory: ./ui
+      -
+        name: Build and push ditto-ui image
         uses: docker/build-push-action@v3
         with:
           context: ./ui

.github/workflows/gh-pages.yml

@@ -30,6 +30,13 @@ jobs:
       group: ${{ github.workflow }}-${{ github.ref }}
     steps:
       - uses: actions/checkout@v3
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      - name: Build UI with node
+        run: npm run build
+        working-directory: ./ui
       - name: Deploy
         uses: peaceiris/actions-gh-pages@v3
         with:

.github/workflows/push-dockerhub-on-demand.yml

@@ -170,6 +170,15 @@ jobs:
             eclipse/ditto-connectivity:${{ env.IMAGE_MINOR_TAG }}
             eclipse/ditto-connectivity:${{ env.IMAGE_MAJOR_TAG }}
             eclipse/ditto-connectivity:latest
+      -
+        name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      -
+        name: Build UI with node
+        run: npm run build
+        working-directory: ./ui
       -
         name: Build and push ditto-ui
         if: env.MILESTONE_OR_RC_SUFFIX == env.IMAGE_TAG && inputs.dittoImage == 'ditto-ui'

.github/workflows/push-dockerhub.yml

@@ -155,6 +155,15 @@ jobs:
             eclipse/ditto-connectivity:${{ env.IMAGE_MINOR_TAG }}
             eclipse/ditto-connectivity:${{ env.IMAGE_MAJOR_TAG }}
             eclipse/ditto-connectivity:latest
+      -
+        name: Use Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18
+      -
+        name: Build UI with node
+        run: npm run build
+        working-directory: ./ui
       -
         name: Build and push ditto-ui
         if: env.MILESTONE_OR_RC_SUFFIX == env.IMAGE_TAG

.gitignore

@@ -22,6 +22,5 @@ deployment/helm/eclipse-ditto/requirements.lock
 deployment/helm/eclipse-ditto/charts/*
 .factorypath
 ui/node_modules
-ui/package.json
-ui/package-lock.json
+ui/dist
 

ui/Dockerfile

@@ -14,7 +14,4 @@ FROM nginxinc/nginx-unprivileged:alpine
 WORKDIR /usr/share/nginx/html
 
 COPY ./index.html           .
-COPY ./index.css            .
-COPY ./main.js              .
-COPY ./modules              ./modules
-COPY ./templates            ./templates
+COPY ./dist                 ./dist

ui/build.mjs

@@ -0,0 +1,29 @@
+import {argv} from 'node:process';
+import * as esbuild from 'esbuild';
+import {sassPlugin} from 'esbuild-sass-plugin';
+
+const config = {
+  entryPoints: ['main.js'],
+  bundle: true,
+  outdir: 'dist',
+  loader: {
+    '.html': 'text',
+  },
+  plugins: [sassPlugin()],
+};
+
+if (argv[2] === 'serve') {
+  config.sourcemap = true;
+
+  const ctx = await esbuild.context(config);
+
+  let {host, port} = await ctx.serve({
+    servedir: '.',
+  });
+} else {
+  config.minify = true;
+
+  await esbuild.build(config);
+}
+
+

ui/index.html

@@ -16,13 +16,10 @@
     <title>Eclipse Ditto™ explorer</title>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css"
         rel="stylesheet"
         integrity="sha512-YzwGgFdO1NQw1CZkPoGyRkEnUTxPSbGWXvGiXrWk8IeSqdyci0dEDYdLLjMxq1zCoU0QBa4kHAFiRhUL3z2bow=="
         crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link href="index.css" rel="stylesheet" />
     <link rel="icon" type="image/png"
         href="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/favicon-16x16.png"
         sizes="16x16">
@@ -32,22 +29,11 @@
     <link rel="icon" type="image/png"
         href="https://raw.githubusercontent.com/eclipse/ditto/master/documentation/src/main/resources/images/favicon-96x96.png"
         sizes="96x96">
-    <script src="https://cdn.jsdelivr.net/npm/event-source-polyfill@1.0.31/src/eventsource.min.js"
-        integrity="sha256-JBw2DF7FFaUo0jG/NptzuAmOVSFJz+Z86wxbKIHK4yc="
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"
-        integrity="sha256-qXBd/EfAdjOA2FGrGAG+b3YBn2tn5A6bhz+LSgYD96k="
-        crossorigin="anonymous"></script>
-    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
-        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
-        crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js"
-        integrity="sha512-GZ1RIgZaSc8rnco/8CXfRdCpDxRCphenIiZ2ztLy3XQfCbQUSCuk8IudvNHxkRA3oUg6q0qejgN/qqyG1duv5Q=="
-        crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jsonpath-plus@5.0.3/dist/index-browser-esm.min.js" type="module"></script>
-    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"></script>
-    <script src="modules/utils/crudToolbar.js" type="module"></script>
-    <script src="main.js" type="module"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.19.0/ace.min.js"
+        integrity="sha512-7ar5DoGr5xiRstr9B0e9BkQAc42juvRXosAEAXuOKZSL/4C93WpIFthgzZibRAau0kB0NJszECL02exq3IPc/w=="
+        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script type="module" src="./dist/main.js"></script>
+    <link rel="stylesheet" href="./dist/main.css" />
 </head>
 
 <body>
@@ -140,45 +126,5 @@
         </div>
     </div>
     <div id="modalCrudEdit"></div>
-
 </body>
-<template id="templateCrudToolbar">
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
-        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
-    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.3/font/bootstrap-icons.min.css"
-        rel="stylesheet"
-        integrity="sha512-YzwGgFdO1NQw1CZkPoGyRkEnUTxPSbGWXvGiXrWk8IeSqdyci0dEDYdLLjMxq1zCoU0QBa4kHAFiRhUL3z2bow=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
-    <link href="index.css" rel="stylesheet" />
-
-    <div class="resizable_flex_column px-1" id="divRoot">
-        <div class="input-group input-group-sm mb-1 mt-1 has-validation">
-            <label class="input-group-text" id="label">Default</label>
-            <input type="text" class="form-control" disabled id="inputIdValue">
-            <button class="btn btn-outline-primary btn-sm" id="buttonEdit"
-                data-bs-toggle="tooltip" title="Edit">
-                Edit
-            </button>
-            <button class="btn btn-outline-primary btn-sm" hidden id="buttonCreate"
-                data-bs-toggle="tooltip" title="Create">
-                Create
-            </button>
-            <button class="btn btn-outline-primary btn-sm" hidden id="buttonUpdate"
-                data-bs-toggle="tooltip" title="Update">
-                Update
-            </button>
-            <button class="btn btn-outline-secondary btn-sm" hidden id="buttonDelete"
-                data-bs-toggle="tooltip" title="Delete">
-                Delete
-            </button>
-            <button class="btn btn-outline-secondary btn-sm" hidden id="buttonCancel"
-                data-bs-toggle="tooltip" title="Cancel" >
-                Cancel
-            </button>
-            <div class="invalid-feedback"></div>
-        </div>
-        <slot></slot>
-    </div>
-  </template>
-
 </html>

ui/main.js

@@ -11,6 +11,9 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 /* eslint-disable new-cap */
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './main.scss';
+import {Dropdown} from 'bootstrap';
 
 import * as Authorization from './modules/environments/authorization.js';
 import * as Environments from './modules/environments/environments.js';
@@ -31,27 +34,11 @@ import * as Operations from './modules/operations/operations.js';
 import * as Policies from './modules/policies/policies.js';
 import * as Utils from './modules/utils.js';
 import {WoTDescription} from './modules/things/wotDescription.js';
-
-
+import './modules/utils/crudToolbar.js';
 let resized = false;
 let mainNavbar;
 
 document.addEventListener('DOMContentLoaded', async function() {
-  document.getElementById('thingsHTML').innerHTML = await (await fetch('modules/things/things.html')).text();
-  document.getElementById('fieldsHTML').innerHTML = await (await fetch('modules/things/fields.html')).text();
-  document.getElementById('featuresHTML').innerHTML = await (await fetch('modules/things/features.html')).text();
-  document.getElementById('messagesIncomingHTML').innerHTML =
-      await (await fetch('modules/things/messagesIncoming.html')).text();
-  document.getElementById('policyHTML').innerHTML = await (await fetch('modules/policies/policies.html')).text();
-  document.getElementById('connectionsHTML').innerHTML =
-      await (await fetch('modules/connections/connections.html')).text();
-  document.getElementById('operationsHTML').innerHTML =
-      await (await fetch('modules/operations/operations.html')).text();
-  document.getElementById('environmentsHTML').innerHTML =
-      await (await fetch('modules/environments/environments.html')).text();
-  document.getElementById('authorizationHTML').innerHTML =
-      await (await fetch('modules/environments/authorization.html')).text();
-
   Utils.ready();
   await Things.ready();
   ThingsSearch.ready();
@@ -86,7 +73,7 @@ document.addEventListener('DOMContentLoaded', async function() {
   featureDescription.ready();
 
   // make dropdowns not cutting off
-  new bootstrap.Dropdown(document.querySelector('.dropdown-toggle'), {
+  new Dropdown(document.querySelector('.dropdown-toggle'), {
     popperConfig: {
       strategy: 'fixed',
     },

ui/index.css → ui/main.scss

@@ -12,6 +12,10 @@
  * SPDX-License-Identifier: EPL-2.0
  */
 
+@import "bootstrap/scss/bootstrap";
+
+// $body-bg: #fff;
+
 .table {
     --bs-table-active-bg: #3a8c9a;
     --bs-table-active-color: white;

ui/modules/api.js

@@ -14,6 +14,8 @@
 
 import * as Environments from './environments/environments.js';
 import * as Utils from './utils.js';
+import {EventSourcePolyfill} from 'event-source-polyfill';
+
 
 const config = {
   things: {

ui/modules/connections/connections.js

@@ -17,9 +17,12 @@
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
 import {TabHandler} from '../utils/tabHandler.js';
+import connectionsHTML from './connections.html';
 
 const observers = [];
 
+document.getElementById('connectionsHTML').innerHTML = connectionsHTML;
+
 export function addChangeListener(observer) {
   observers.push(observer);
 }

ui/modules/connections/connectionsCRUD.js

@@ -14,6 +14,7 @@
 import * as API from '../api.js';
 import * as Utils from '../utils.js';
 import * as Connections from './connections.js';
+import connectionTemplates from './connectionTemplates.json';
 /* eslint-disable prefer-const */
 /* eslint-disable max-len */
 /* eslint-disable no-invalid-this */
@@ -34,14 +35,13 @@ let outgoingEditor;
 let theConnection;
 let hasErrors;
 
-let connectionTemplates;
 
 export function ready() {
   Connections.addChangeListener(setConnection);
 
   Utils.getAllElementsById(dom);
 
-  loadConnectionTemplates();
+  Utils.addDropDownEntries(dom.ulConnectionTemplates, Object.keys(connectionTemplates));
 
   connectionEditor = Utils.createAceEditor('connectionEditor', 'ace/mode/json', true);
   incomingEditor = Utils.createAceEditor('connectionIncomingScript', 'ace/mode/javascript', true);
@@ -156,16 +156,6 @@ function onConnectionTemplatesClick(event) {
   connectionEditor.session.getUndoManager().markClean();
 }
 
-function loadConnectionTemplates() {
-  fetch('templates/connectionTemplates.json')
-      .then((response) => {
-        response.json().then((loadedTemplates) => {
-          connectionTemplates = loadedTemplates;
-          Utils.addDropDownEntries(dom.ulConnectionTemplates, Object.keys(connectionTemplates));
-        });
-      });
-}
-
 function setConnection(connection) {
   theConnection = connection;
   incomingEditor.setValue('');

ui/modules/environments/authorization.js

@@ -16,6 +16,7 @@ import * as Utils from '../utils.js';
 /* eslint-disable prefer-const */
 /* eslint-disable require-jsdoc */
 import * as Environments from './environments.js';
+import authorizationHTML from './authorization.html';
 
 let dom = {
   bearer: null,
@@ -30,6 +31,8 @@ let dom = {
 
 let _forDevops = false;
 
+document.getElementById('authorizationHTML').innerHTML = authorizationHTML;
+
 export function setForDevops(forDevops) {
   _forDevops = forDevops;
   API.setAuthHeader(_forDevops);

ui/modules/environments/environments.js

@@ -16,6 +16,9 @@
 /* eslint-disable require-jsdoc */
 import * as Authorization from '../environments/authorization.js';
 import * as Utils from '../utils.js';
+import defaultTemplates from './environmentTemplates.json';
+import environmentsHTML from './environments.html';
+
 
 const URL_PRIMARY_ENVIRONMENT_NAME = 'primaryEnvironmentName';
 const URL_ENVIRONMENTS = 'environmentsURL';
@@ -43,6 +46,8 @@ let dom = {
 
 let observers = [];
 
+document.getElementById('environmentsHTML').innerHTML = environmentsHTML;
+
 function Environment(env) {
   Object.assign(this, env);
   Object.defineProperties(this, {
@@ -194,7 +199,7 @@ function onUpdateEnvironmentClick(event) {
 }
 
 export function environmentsJsonChanged(modifiedField) {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(environments));
+  environments && localStorage.setItem(STORAGE_KEY, JSON.stringify(environments));
 
   updateEnvSelector();
   updateEnvEditors();
@@ -250,7 +255,6 @@ function updateEnvEditors() {
 }
 
 async function loadEnvironmentTemplates() {
-  let fromTemplates = await (await fetch('templates/environmentTemplates.json')).json();
   let fromURL;
   let fromLocalStorage;
 
@@ -287,7 +291,7 @@ async function loadEnvironmentTemplates() {
   } else if (fromLocalStorage) {
     result = fromLocalStorage;
   } else {
-    result = fromTemplates;
+    result = defaultTemplates;
   }
 
   Object.keys(result).forEach((env) => {

ui/modules/operations/operations.html

@@ -29,7 +29,7 @@ <h5>Ditto Services Logging</h5>
                 rel="stylesheet"
                 integrity="sha512-YzwGgFdO1NQw1CZkPoGyRkEnUTxPSbGWXvGiXrWk8IeSqdyci0dEDYdLLjMxq1zCoU0QBa4kHAFiRhUL3z2bow=="
                 crossorigin="anonymous" referrerpolicy="no-referrer" />
-            <link href="index.css" rel="stylesheet" />
+            <link href="./dist/main.css" rel="stylesheet" />
 
             <div class="input-group input-group-sm mb-1">
                 <input class="form-control" type="text" disabled id="inputLogger" spellcheck="false"></input>