Server-demo-v2: make new UI as default one.

eclipse-leshan · Jun 25, 2021 · 526963c · 526963c
1 parent 6227ecb
commit 526963c
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 71 deletions.
diff --git a/leshan-server-demo/src/main/java/org/eclipse/leshan/server/demo/LeshanServerDemo.java b/leshan-server-demo/src/main/java/org/eclipse/leshan/server/demo/LeshanServerDemo.java
@@ -591,15 +591,15 @@ public static void createAndStartServer(String webAddress, int webPort, String l
         aHolder.setInitParameter("resourceBase",
                 LeshanServerDemo.class.getClassLoader().getResource("webapp2").toExternalForm());
         aHolder.setInitParameter("pathInfoOnly", "true");
-        root.addServlet(aHolder, "/v2/*");
+        root.addServlet(aHolder, "/*");
 
         // Configuration for old demo
         DefaultServlet bServlet = new DefaultServlet();
         ServletHolder bHolder = new ServletHolder(bServlet);
         bHolder.setInitParameter("resourceBase",
                 LeshanServerDemo.class.getClassLoader().getResource("webapp").toExternalForm());
         bHolder.setInitParameter("pathInfoOnly", "true");
-        root.addServlet(bHolder, "/*");
+        root.addServlet(bHolder, "/old/*");
 
         server.setHandler(root);
         /* **************************************************************** */
@@ -609,11 +609,11 @@ public static void createAndStartServer(String webAddress, int webPort, String l
         ServletHolder eventServletHolder = new ServletHolder(eventServlet);
         root.addServlet(eventServletHolder, "/event/*"); // Temporary code to be able to serve both UI
         root.addServlet(eventServletHolder, "/api/event/*");
-        root.addServlet(eventServletHolder, "/v2/api/event/*"); // Temporary code to be able to serve both UI
+        root.addServlet(eventServletHolder, "/old/api/event/*"); // Temporary code to be able to serve both UI
 
         ServletHolder clientServletHolder = new ServletHolder(new ClientServlet(lwServer));
         root.addServlet(clientServletHolder, "/api/clients/*");
-        root.addServlet(clientServletHolder, "/v2/api/clients/*");// Temporary code to be able to serve both UI
+        root.addServlet(clientServletHolder, "/old/api/clients/*");// Temporary code to be able to serve both UI
 
         ServletHolder securityServletHolder;
         if (publicKey != null) {
@@ -622,7 +622,7 @@ public static void createAndStartServer(String webAddress, int webPort, String l
             securityServletHolder = new ServletHolder(new SecurityServlet(securityStore, serverCertificateChain[0]));
         }
         root.addServlet(securityServletHolder, "/api/security/*");
-        root.addServlet(securityServletHolder, "/v2/api/security/*");// Temporary code to be able to serve both UI
+        root.addServlet(securityServletHolder, "/old/api/security/*");// Temporary code to be able to serve both UI
 
         ServletHolder serverServletHolder;
         if (publicKey != null) {
@@ -631,12 +631,12 @@ public static void createAndStartServer(String webAddress, int webPort, String l
             serverServletHolder = new ServletHolder(new ServerServlet(lwServer, serverCertificateChain[0]));
         }
         root.addServlet(serverServletHolder, "/api/server/*");
-        root.addServlet(serverServletHolder, "/v2/api/server/*");// Temporary code to be able to serve both UI
+        root.addServlet(serverServletHolder, "/old/api/server/*");// Temporary code to be able to serve both UI
 
         ServletHolder objectSpecServletHolder = new ServletHolder(
                 new ObjectSpecServlet(lwServer.getModelProvider(), lwServer.getRegistrationService()));
         root.addServlet(objectSpecServletHolder, "/api/objectspecs/*");
-        root.addServlet(objectSpecServletHolder, "/v2/api/objectspecs/*");// Temporary code to be able to serve both UI
+        root.addServlet(objectSpecServletHolder, "/old/api/objectspecs/*");// Temporary code to be able to serve both UI
 
         // Register a service to DNS-SD
         if (publishDNSSdServices) {

diff --git a/leshan-server-demo/src/main/resources/webapp/partials/client-list.html b/leshan-server-demo/src/main/resources/webapp/partials/client-list.html
@@ -1,13 +1,11 @@
 <span ng-if="clientslist">
-	<span >
-		<div class="alert alert-success 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 Server Demo</strong> based on <a href="https://vuejs.org/">Vue.js</a> is in development.
-		This version is already <strong>testable <a href="./v2">here</a></strong>.
-		<br/> <strong>We strongly encourage you to test it and report us bug or feedback as it will be the default one soon.</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>
+	 <span >
+        <div class="alert alert-warning alert-dismissible"> 
+        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+        <p>This UI is now <strong>deprecated</strong> and will be removed very soon.</p>
+        <p> The <strong>new version</strong> of Leshan Server Demo based on <a href="https://vuejs.org/">Vue.js</a> is now ready and <strong> available <a href="../">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>
 
 	<h3><small><p class="text-right">Connected clients: {{clients.length}}</p></small></h3>
 

diff --git a/leshan-server-demo/src/main/resources/webapp2/index.html b/leshan-server-demo/src/main/resources/webapp2/index.html
@@ -11,7 +11,7 @@
     If you are in development phase and run <strong>leshan-server-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>
+      to access to the demo, try <a href="http://localhost:8088/">http://localhost:8088/</a>
      <br /> (see <a title="leshan-server-demo README"
       href="https://github.com/eclipse/leshan/tree/master/leshan-server-demo/webapp2">leshan-server-demo
       README</a> for more details)<br />

diff --git a/leshan-server-demo/webapp2/src/components/ClientInfo.vue b/leshan-server-demo/webapp2/src/components/ClientInfo.vue
@@ -50,9 +50,18 @@
 export default {
   props: {
     registration: Object,
-    small: Boolean,
-    tooltipleft: Boolean,
-    tooltipbottom: Boolean,
+    small: {
+      type: Boolean,
+      default: false
+    },
+    tooltipleft:{
+      type: Boolean,
+      default: false
+    },
+    tooltipbottom: {
+      type: Boolean,
+      default: false
+    },
   },
 };
 </script>
diff --git a/leshan-server-demo/webapp2/src/views/About.vue b/leshan-server-demo/webapp2/src/views/About.vue
@@ -46,14 +46,14 @@
           type="info"
           elevation="2"
           max-width="600"
-          icon="mdi-account-hard-hat"
+          icon="mdi-alert-decagram"
         >
-          This is a work in progress version of our new UI for Leshan Server
-          Demo. Lot of features are still missing and probably some bugs are
-          still hidden. If needed, you can still use the old version which
-          should be available
-          <a href="../"><strong>here</strong></a
-          >.
+          <p>
+            This is the new UI for Leshan Server Demo. If needed, you can still
+            use the old version which should be available
+            <a href="../old/"><strong>here</strong></a> but not for so long as
+            it <strong> will be removed very soon !</strong>
+          </p>
         </v-alert>
       </v-layout>
     </v-row>

diff --git a/leshan-server-demo/webapp2/src/views/Clients.vue b/leshan-server-demo/webapp2/src/views/Clients.vue
@@ -1,52 +1,76 @@
 <template>
-  <v-data-table
-    dense
-    :loading="loading"
-    :headers="headers"
-    :items="registrations"
-    item-key="endpoint"
-    :items-per-page="10"
-    class="elevation-0 fill-height ma-3"
-    @click:row="openLink"
-    :search="search"
-  >
-    <template v-slot:top>
-      <v-toolbar flat>
-        <v-toolbar-title v-if="$vuetify.breakpoint.smAndUp"
-          >Registered Clients</v-toolbar-title
-        >
-        <v-divider
-          v-if="$vuetify.breakpoint.smAndUp"
-          class="mx-4"
-          inset
-          vertical
-        ></v-divider>
-        <v-text-field
-          v-model="search"
-          append-icon="mdi-magnify"
-          label="Search"
-          single-line
-          hide-details
-          class="pa-2"
-          clearable
-        ></v-text-field>
-      </v-toolbar>
-    </template>
-    <!-- custom display for date column -->
-    <template v-slot:item.registrationDate="{ item }">
-      {{ new Date(item.registrationDate) | moment("MMM D, h:mm:ss A") }}
-    </template>
-    <template v-slot:item.lastUpdate="{ item }">
-      {{ new Date(item.lastUpdate) | moment("MMM D, h:mm:ss A") }}
-    </template>
-    <template v-slot:item.infos="{ item }">
-      <client-info :registration="item" tooltipleft />
-    </template>
-  </v-data-table>
+  <div>
+    <v-layout justify-center>
+      <v-alert
+        border="left"
+        outlined
+        type="info"
+        elevation="2"
+        icon="mdi-alert-decagram"
+        dismissible
+        prominent
+        class="ma-2"
+        v-model="shownews"
+      >
+        <p>
+          This is the new UI for Leshan Server Demo. If needed, you can still
+          use the old version which should be available
+          <a href="../old/"><strong>here</strong></a> but not for so long as it
+          <strong> will be removed very soon !</strong>
+        </p>
+      </v-alert>
+    </v-layout>
+    <v-data-table
+      dense
+      :loading="loading"
+      :headers="headers"
+      :items="registrations"
+      item-key="endpoint"
+      :items-per-page="10"
+      class="elevation-0 fill-height ma-3"
+      @click:row="openLink"
+      :search="search"
+    >
+      <template v-slot:top>
+        <v-toolbar flat>
+          <v-toolbar-title v-if="$vuetify.breakpoint.smAndUp"
+            >Registered Clients</v-toolbar-title
+          >
+          <v-divider
+            v-if="$vuetify.breakpoint.smAndUp"
+            class="mx-4"
+            inset
+            vertical
+          ></v-divider>
+          <v-text-field
+            v-model="search"
+            append-icon="mdi-magnify"
+            label="Search"
+            single-line
+            hide-details
+            class="pa-2"
+            clearable
+          ></v-text-field>
+        </v-toolbar>
+      </template>
+      <!-- custom display for date column -->
+      <template v-slot:item.registrationDate="{ item }">
+        {{ new Date(item.registrationDate) | moment("MMM D, h:mm:ss A") }}
+      </template>
+      <template v-slot:item.lastUpdate="{ item }">
+        {{ new Date(item.lastUpdate) | moment("MMM D, h:mm:ss A") }}
+      </template>
+      <template v-slot:item.infos="{ item }">
+        <client-info :registration="item" tooltipleft />
+      </template>
+    </v-data-table>
+  </div>
 </template>
 
 <script>
 import ClientInfo from "../components/ClientInfo.vue";
+import { preference } from "vue-preferences";
+
 export default {
   components: { ClientInfo },
   useSSE: true,
@@ -63,6 +87,12 @@ export default {
     ],
     search: "",
   }),
+  computed: {
+    shownews: preference("shownews", {
+      defaultValue: true,
+      ttl: 60 * 60 * 24,
+    }),
+  },
   methods: {
     openLink(reg) {
       this.$router.push(`/clients/${reg.endpoint}/3`);