#906: Proto of leshan-bsserver-demo UI v2 based on vuejs

leshan-bsserver-demo/pom.xml

@@ -69,6 +69,45 @@ Contributors:
                 <groupId>org.codehaus.mojo</groupId>
                 <artifactId>buildnumber-maven-plugin</artifactId>
             </plugin>
+            <plugin>
+                <groupId>com.github.eirslett</groupId>
+                <artifactId>frontend-maven-plugin</artifactId>
+                <executions>
+                    <execution>
+                        <id>install node and yarn</id>
+                        <goals>
+                            <goal>install-node-and-yarn</goal>
+                        </goals>
+                    </execution>
+                    <execution>
+                        <id>yarn install</id>
+                        <goals>
+                            <goal>yarn</goal>
+                        </goals>
+                    </execution>
+                    <execution>
+                        <id>yarn build</id>
+                        <goals>
+                            <goal>yarn</goal>
+                        </goals>
+                        <configuration>
+                            <environmentVariables>
+                                <!-- this variable will be used by webapp/vue.config.js -->
+                                <MAVEN_OUTPUT_DIR>${project.build.outputDirectory}/webapp2</MAVEN_OUTPUT_DIR>
+                                <!-- this variable is used by the webapp -->
+                                <VUE_APP_COMMIT_ID>${buildNumber}</VUE_APP_COMMIT_ID>
+                                <VUE_APP_VERSION>${project.version}</VUE_APP_VERSION>
+                            </environmentVariables>
+                            <arguments>build</arguments>
+                        </configuration>
+                    </execution>
+                </executions>
+                <configuration>
+                    <workingDirectory>webapp2</workingDirectory>
+                    <nodeVersion>v10.23.1</nodeVersion>
+                    <yarnVersion>v1.13.0</yarnVersion>
+                </configuration>
+            </plugin>
             <plugin>
                 <artifactId>maven-assembly-plugin</artifactId>
                 <configuration>

leshan-bsserver-demo/src/main/java/org/eclipse/leshan/server/bootstrap/demo/LeshanBootstrapServerDemo.java

@@ -40,8 +40,9 @@
 import org.eclipse.californium.scandium.config.DtlsConnectorConfig;
 import org.eclipse.californium.scandium.dtls.SingleNodeConnectionIdGenerator;
 import org.eclipse.jetty.server.Server;
+import org.eclipse.jetty.servlet.DefaultServlet;
+import org.eclipse.jetty.servlet.ServletContextHandler;
 import org.eclipse.jetty.servlet.ServletHolder;
-import org.eclipse.jetty.webapp.WebAppContext;
 import org.eclipse.leshan.core.LwM2m;
 import org.eclipse.leshan.core.model.ObjectLoader;
 import org.eclipse.leshan.core.model.ObjectModel;
@@ -435,14 +436,37 @@ public static void createAndStartServer(String webAddress, int webPort, String l
             jettyAddr = new InetSocketAddress(webAddress, webPort);
         }
         Server server = new Server(jettyAddr);
-        WebAppContext root = new WebAppContext();
-
-        root.setContextPath("/");
-        root.setResourceBase(LeshanBootstrapServerDemo.class.getClassLoader().getResource("webapp").toExternalForm());
-        root.setParentLoaderPriority(true);
+        /*
+         * TODO this should be added again when old demo will be removed.
+         * 
+         * WebAppContext root = new WebAppContext(); root.setContextPath("/");
+         * root.setResourceBase(LeshanBootstrapServerDemo.class.getClassLoader().getResource("webapp").toExternalForm())
+         * ; root.setParentLoaderPriority(true);
+         */
+
+        /* ******** Temporary code to be able to serve both UI ********** */
+        ServletContextHandler root = new ServletContextHandler(null, "/", true, false);
+        // Configuration for new demo
+        // Configuration for new demo
+        DefaultServlet aServlet = new DefaultServlet();
+        ServletHolder aHolder = new ServletHolder(aServlet);
+        aHolder.setInitParameter("resourceBase",
+                LeshanBootstrapServerDemo.class.getClassLoader().getResource("webapp2").toExternalForm());
+        aHolder.setInitParameter("pathInfoOnly", "true");
+        root.addServlet(aHolder, "/v2/*");
+
+        // Configuration for old demo
+        DefaultServlet bServlet = new DefaultServlet();
+        ServletHolder bHolder = new ServletHolder(bServlet);
+        bHolder.setInitParameter("resourceBase",
+                LeshanBootstrapServerDemo.class.getClassLoader().getResource("webapp").toExternalForm());
+        bHolder.setInitParameter("pathInfoOnly", "true");
+        root.addServlet(bHolder, "/*");
+        /* **************************************************************** */
 
         ServletHolder bsServletHolder = new ServletHolder(new BootstrapServlet(bsStore));
         root.addServlet(bsServletHolder, "/api/bootstrap/*");
+        root.addServlet(bsServletHolder, "/v2/api/bootstrap/*"); // Temporary code to be able to serve both UI
 
         ServletHolder serverServletHolder;
         if (publicKey != null) {
@@ -451,8 +475,10 @@ public static void createAndStartServer(String webAddress, int webPort, String l
             serverServletHolder = new ServletHolder(new ServerServlet(bsServer, serverCertificateChain[0]));
         }
         root.addServlet(serverServletHolder, "/api/server/*");
+        root.addServlet(serverServletHolder, "/v2/api/server/*"); // Temporary code to be able to serve both UI
 
         server.setHandler(root);
+        /* **************************************************************** */
 
         server.start();
         LOG.info("Web server started at {}.", server.getURI());

leshan-bsserver-demo/src/main/resources/webapp/tag/bootstrap.tag

@@ -1,4 +1,11 @@
 <bootstrap>
+    <span >
+        <div class="alert alert-info alert-dismissible"> 
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <p>A new version of <strong>Leshan Bootstrap Server Demo</strong> based on <a href="https://vuejs.org/">Vue.js</a> is in development.
+          <br/>This new version is missing a lot of features but is already <strong>testable <a href="./v2">here</a></strong>.</p>
+        <p> (If you want to contribute to it or understand this move : see <a href="https://github.com/eclipse/leshan/issues/906">#906</a>)</p></div>
+    </span>
    <div class="well well-sm col-md-12"  if={certificate}>
         <h4>The Leshan Bootstrap Certificate  <small>(x509v3 der encoded)</small>
         <button type="button" title ="Download bootstrap server certificate(.der)" class="btn btn-default btn-xs" onclick={()=>saveFile('bsServerCertificate.der',certificate.bytesDer)}>

leshan-bsserver-demo/src/main/resources/webapp2/index.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width,initial-scale=1.0">
+<title>Leshan Bootstrap Server Demo</title>
+</head>
+<body>
+  <p>
+    If you are in development phase and run <strong>leshan-bsserver-demo</strong>
+    from your ide, you probably missed to launch <strong>yarn
+      serve </strong> and/or <strong> you are not using the right port</strong>
+      to access to the demo, try <a href="http://localhost:8088/v2/">http://localhost:8088/v2/</a>
+     <br /> (see <a title="leshan-server-demo README"
+      href="https://github.com/eclipse/leshan/tree/master/leshan-bsserver-demo/webapp2">leshan-bsserver-demo
+      README</a> for more details)<br />
+  </p>
+  <p>
+    If you are using a built version of <strong>leshan-bsserver-demo</strong>
+    and you see this page, you probably discover a leshan built issue.
+    Please report <a title="open a Leshan issue"
+      href="https://github.com/eclipse/leshan/issues">it</a>.
+  </p>
+</body>
+</html>

leshan-bsserver-demo/webapp2/.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+node
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

leshan-bsserver-demo/webapp2/README.md

@@ -0,0 +1,4 @@
+# webapp
+
+The **leshan-bsserver-demo** webapp is based on [Vue.js](https://vuejs.org/).  
+For more details you should refer to **leshan-server-demo** [README](https://github.com/eclipse/leshan/tree/master/leshan-server-demo/webapp2/README.md). 

leshan-bsserver-demo/webapp2/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

leshan-bsserver-demo/webapp2/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "leshan-bsserver-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve --port 8088",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@fontsource/roboto": "^4.2.1",
+    "@mdi/font": "^5.9.55",
+    "axios": "^0.21.1",
+    "core-js": "^3.6.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0",
+    "vuetify": "^2.4.5",
+    "vuetify-dialog": "^2.0.14"
+  },
+  "devDependencies": {
+    "@mdi/font": "^5.9.55",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.1.0",
+    "sass": "^1.32.0",
+    "sass-loader": "^10.0.0",
+    "vue-cli-plugin-vuetify": "~2.2.0",
+    "vue-template-compiler": "^2.6.11",
+    "vuetify-loader": "^1.7.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "parserOptions": {
+      "parser": "babel-eslint"
+    },
+    "rules": {
+      "vue/valid-v-slot": [
+        "error",
+        {
+          "allowModifiers": true
+        }
+      ]
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
+}

leshan-bsserver-demo/webapp2/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.png">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>

leshan-bsserver-demo/webapp2/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div id="app">
+    <v-app>
+      <leshan-nav-bar/>
+
+      <v-main>
+        <v-container fluid class="pa-0">
+          <router-view >  </router-view>  
+        </v-container>
+      </v-main>
+    </v-app>
+  </div>
+</template>
+
+<script>
+import LeshanNavBar from "@/components/LeshanNavBar.vue";
+
+export default {
+  components: {
+    LeshanNavBar,
+  },
+};
+</script>