refactor(ui): minor usability improvements

ui/src/components/Client/ClientSockets.vue

@@ -2,7 +2,13 @@
   <v-card>
     <v-card-title>{{ $t("sockets.title") }}</v-card-title>
 
-    <v-data-table :headers="headers" :items="sockets" dense>
+    <v-data-table
+      :headers="headers"
+      :items="sockets"
+      dense
+      class="row-pointer"
+      @click:row="displayDetails"
+    >
       <template v-slot:item.nsp="{ value }">
         <code>{{ value }}</code>
       </template>
@@ -23,21 +29,6 @@
           </template>
           <span>{{ $t("sockets.disconnect") }}</span>
         </v-tooltip>
-
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on="on"
-              @click="displayDetails(item)"
-              small
-              class="ml-3"
-            >
-              <v-icon>mdi-dots-horizontal</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t("sockets.displayDetails") }}</span>
-        </v-tooltip>
       </template>
     </v-data-table>
   </v-card>
@@ -93,3 +84,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

ui/src/components/Dashboard/ClientsOverview.vue

@@ -2,8 +2,10 @@
   <v-card>
     <v-card-title class="text-center">
       {{ $t("clients.title") }}
+
       <v-spacer />
-      <v-btn :to="{ name: 'clients' }" small>
+
+      <v-btn v-if="developmentMode" :to="{ name: 'clients' }" small>
         <v-icon>mdi-dots-horizontal</v-icon>
       </v-btn>
     </v-card-title>
@@ -80,7 +82,7 @@ export default {
       darkTheme: (state) => state.config.darkTheme,
       servers: (state) => state.servers.servers,
     }),
-    ...mapGetters("config", ["hasAggregatedValues"]),
+    ...mapGetters("config", ["hasAggregatedValues", "developmentMode"]),
 
     clientsCount() {
       if (this.hasAggregatedValues) {

ui/src/components/Dashboard/NamespacesOverview.vue

@@ -2,8 +2,10 @@
   <v-card class="fill-height">
     <v-card-title class="text-center">
       {{ $t("namespaces") }}
+
       <v-spacer />
-      <v-btn :to="{ name: 'sockets' }" small>
+
+      <v-btn v-if="developmentMode" :to="{ name: 'sockets' }" small>
         <v-icon>mdi-dots-horizontal</v-icon>
       </v-btn>
     </v-card-title>
@@ -46,7 +48,7 @@ export default {
           };
         }),
     }),
-    ...mapGetters("config", ["hasAggregatedValues"]),
+    ...mapGetters("config", ["hasAggregatedValues", "developmentMode"]),
     ...mapGetters("servers", {
       liteNamespaces: "namespaces",
     }),

ui/src/components/Room/RoomSockets.vue

@@ -6,6 +6,8 @@
       :headers="headers"
       :items="room.sockets"
       :footer-props="footerProps"
+      class="row-pointer"
+      @click:row="displayDetails"
     >
       <template v-slot:item.transport="{ value }">
         <Transport :transport="value" />
@@ -42,21 +44,6 @@
           </template>
           <span>{{ $t("sockets.disconnect") }}</span>
         </v-tooltip>
-
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on="on"
-              @click="displayDetails(item)"
-              small
-              class="ml-3"
-            >
-              <v-icon>mdi-dots-horizontal</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t("sockets.displayDetails") }}</span>
-        </v-tooltip>
       </template>
     </v-data-table>
   </v-card>
@@ -145,3 +132,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

ui/src/components/Socket/SocketDetails.vue

@@ -12,24 +12,15 @@
           <tr>
             <td class="key-column">{{ $t("id") }}</td>
             <td>
-              {{ client.id }}
-            </td>
-            <td align="right">
-              <v-tooltip bottom v-if="client.connected">
-                <template v-slot:activator="{ on, attrs }">
-                  <v-btn
-                    v-bind="attrs"
-                    v-on="on"
-                    @click="navigateToClient()"
-                    small
-                    class="ml-3"
-                  >
-                    <v-icon>mdi-dots-horizontal</v-icon>
-                  </v-btn>
-                </template>
-                <span>{{ $t("clients.displayDetails") }}</span>
-              </v-tooltip>
+              <router-link
+                v-if="client.connected"
+                class="link"
+                :to="toClient"
+                >{{ client.id }}</router-link
+              >
+              <span v-else>{{ client.id }}</span>
             </td>
+            <td></td>
           </tr>
           <tr>
             <td class="key-column">{{ $t("status") }}</td>
@@ -154,6 +145,14 @@ export default {
   },
 
   computed: {
+    toClient() {
+      return {
+        name: "client",
+        params: {
+          id: this.client.id,
+        },
+      };
+    },
     creationDate() {
       return new Date(this.socket.handshake.issued).toISOString();
     },
@@ -197,4 +196,8 @@ export default {
 .key-column {
   width: 30%;
 }
+
+.link {
+  color: inherit;
+}
 </style>

ui/src/components/Socket/SocketRooms.vue

@@ -1,7 +1,13 @@
 <template>
   <v-card class="fill-height">
     <v-card-title>{{ $t("rooms.title") }}</v-card-title>
-    <v-data-table :headers="headers" :items="roomsAsObjects" dense>
+    <v-data-table
+      :headers="headers"
+      :items="roomsAsObjects"
+      dense
+      class="row-pointer"
+      @click:row="displayDetails"
+    >
       <template v-slot:item.actions="{ item }">
         <v-tooltip bottom v-if="isSocketLeaveSupported">
           <template v-slot:activator="{ on, attrs }">
@@ -18,21 +24,6 @@
           </template>
           <span>{{ $t("sockets.leave") }}</span>
         </v-tooltip>
-
-        <v-tooltip bottom>
-          <template v-slot:activator="{ on, attrs }">
-            <v-btn
-              v-bind="attrs"
-              v-on="on"
-              @click="displayDetails(item)"
-              small
-              class="ml-3"
-            >
-              <v-icon>mdi-dots-horizontal</v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t("rooms.displayDetails") }}</span>
-        </v-tooltip>
       </template>
     </v-data-table>
 
@@ -170,4 +161,7 @@ export default {
 .select-room {
   max-width: 200px;
 }
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
 </style>

ui/src/views/Clients.vue

@@ -7,6 +7,8 @@
         :headers="headers"
         :items="clients"
         :footer-props="footerProps"
+        class="row-pointer"
+        @click:row="displayDetails"
       >
         <template v-slot:item.address="{ item }">
           <span v-if="item.sockets.length">{{
@@ -41,21 +43,6 @@
             </template>
             <span>{{ $t("clients.disconnect") }}</span>
           </v-tooltip>
-
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                v-bind="attrs"
-                v-on="on"
-                @click="displayDetails(item)"
-                small
-                class="ml-3"
-              >
-                <v-icon>mdi-dots-horizontal</v-icon>
-              </v-btn>
-            </template>
-            <span>{{ $t("clients.displayDetails") }}</span>
-          </v-tooltip>
         </template>
       </v-data-table>
     </v-card>
@@ -136,3 +123,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

ui/src/views/Rooms.vue

@@ -20,6 +20,8 @@
         :headers="headers"
         :items="filteredRooms"
         :footer-props="footerProps"
+        class="row-pointer"
+        @click:row="displayDetails"
       >
         <template v-slot:item.sockets="{ item }">
           {{ item.sockets.length }}
@@ -61,21 +63,6 @@
             </template>
             <span>{{ $t("rooms.disconnect") }}</span>
           </v-tooltip>
-
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                v-bind="attrs"
-                v-on="on"
-                @click="displayDetails(item)"
-                small
-                class="ml-3"
-              >
-                <v-icon>mdi-dots-horizontal</v-icon>
-              </v-btn>
-            </template>
-            <span>{{ $t("rooms.displayDetails") }}</span>
-          </v-tooltip>
         </template>
       </v-data-table>
     </v-card>
@@ -183,3 +170,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

ui/src/views/Sockets.vue

@@ -11,6 +11,8 @@
         :headers="headers"
         :items="sockets"
         :footer-props="footerProps"
+        class="row-pointer"
+        @click:row="displayDetails"
       >
         <template v-slot:item.transport="{ value }">
           <Transport :transport="value" />
@@ -31,21 +33,6 @@
             </template>
             <span>{{ $t("sockets.disconnect") }}</span>
           </v-tooltip>
-
-          <v-tooltip bottom>
-            <template v-slot:activator="{ on, attrs }">
-              <v-btn
-                v-bind="attrs"
-                v-on="on"
-                @click="displayDetails(item)"
-                small
-                class="ml-3"
-              >
-                <v-icon>mdi-dots-horizontal</v-icon>
-              </v-btn>
-            </template>
-            <span>{{ $t("sockets.displayDetails") }}</span>
-          </v-tooltip>
         </template>
       </v-data-table>
     </v-card>
@@ -122,3 +109,9 @@ export default {
   },
 };
 </script>
+
+<style scoped>
+.row-pointer >>> tbody > tr:hover {
+  cursor: pointer;
+}
+</style>

ui/vue.config.js

@@ -1,5 +1,4 @@
 module.exports = {
-
   publicPath: "./",
 
   configureWebpack: {