Skip to content

Commit 7df8471

Browse files
darrachequesnedarrachequesne
committed
refactor(ui): minor usability improvements
1 parent fdec2ce commit 7df8471

File tree

10 files changed

+83
-114
lines changed

10 files changed

+83
-114
lines changed

‎ui/src/components/Client/ClientSockets.vue

Lines changed: 13 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,13 @@
22
<v-card>
33
<v-card-title>{{ $t("sockets.title") }}</v-card-title>
44

5-
<v-data-table :headers="headers" :items="sockets" dense>
5+
<v-data-table
6+
:headers="headers"
7+
:items="sockets"
8+
dense
9+
class="row-pointer"
10+
@click:row="displayDetails"
11+
>
612
<template v-slot:item.nsp="{ value }">
713
<code>{{ value }}</code>
814
</template>
@@ -23,21 +29,6 @@
2329
</template>
2430
<span>{{ $t("sockets.disconnect") }}</span>
2531
</v-tooltip>
26-
27-
<v-tooltip bottom>
28-
<template v-slot:activator="{ on, attrs }">
29-
<v-btn
30-
v-bind="attrs"
31-
v-on="on"
32-
@click="displayDetails(item)"
33-
small
34-
class="ml-3"
35-
>
36-
<v-icon>mdi-dots-horizontal</v-icon>
37-
</v-btn>
38-
</template>
39-
<span>{{ $t("sockets.displayDetails") }}</span>
40-
</v-tooltip>
4132
</template>
4233
</v-data-table>
4334
</v-card>
@@ -93,3 +84,9 @@ export default {
9384
},
9485
};
9586
</script>
87+
88+
<style scoped>
89+
.row-pointer >>> tbody > tr:hover {
90+
cursor: pointer;
91+
}
92+
</style>

‎ui/src/components/Dashboard/ClientsOverview.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
<v-card>
33
<v-card-title class="text-center">
44
{{ $t("clients.title") }}
5+
56
<v-spacer />
6-
<v-btn :to="{ name: 'clients' }" small>
7+
8+
<v-btn v-if="developmentMode" :to="{ name: 'clients' }" small>
79
<v-icon>mdi-dots-horizontal</v-icon>
810
</v-btn>
911
</v-card-title>
@@ -80,7 +82,7 @@ export default {
8082
darkTheme: (state) => state.config.darkTheme,
8183
servers: (state) => state.servers.servers,
8284
}),
83-
...mapGetters("config", ["hasAggregatedValues"]),
85+
...mapGetters("config", ["hasAggregatedValues", "developmentMode"]),
8486
8587
clientsCount() {
8688
if (this.hasAggregatedValues) {

‎ui/src/components/Dashboard/NamespacesOverview.vue

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@
22
<v-card class="fill-height">
33
<v-card-title class="text-center">
44
{{ $t("namespaces") }}
5+
56
<v-spacer />
6-
<v-btn :to="{ name: 'sockets' }" small>
7+
8+
<v-btn v-if="developmentMode" :to="{ name: 'sockets' }" small>
79
<v-icon>mdi-dots-horizontal</v-icon>
810
</v-btn>
911
</v-card-title>
@@ -46,7 +48,7 @@ export default {
4648
};
4749
}),
4850
}),
49-
...mapGetters("config", ["hasAggregatedValues"]),
51+
...mapGetters("config", ["hasAggregatedValues", "developmentMode"]),
5052
...mapGetters("servers", {
5153
liteNamespaces: "namespaces",
5254
}),

‎ui/src/components/Room/RoomSockets.vue

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
:headers="headers"
77
:items="room.sockets"
88
:footer-props="footerProps"
9+
class="row-pointer"
10+
@click:row="displayDetails"
911
>
1012
<template v-slot:item.transport="{ value }">
1113
<Transport :transport="value" />
@@ -42,21 +44,6 @@
4244
</template>
4345
<span>{{ $t("sockets.disconnect") }}</span>
4446
</v-tooltip>
45-
46-
<v-tooltip bottom>
47-
<template v-slot:activator="{ on, attrs }">
48-
<v-btn
49-
v-bind="attrs"
50-
v-on="on"
51-
@click="displayDetails(item)"
52-
small
53-
class="ml-3"
54-
>
55-
<v-icon>mdi-dots-horizontal</v-icon>
56-
</v-btn>
57-
</template>
58-
<span>{{ $t("sockets.displayDetails") }}</span>
59-
</v-tooltip>
6047
</template>
6148
</v-data-table>
6249
</v-card>
@@ -145,3 +132,9 @@ export default {
145132
},
146133
};
147134
</script>
135+
136+
<style scoped>
137+
.row-pointer >>> tbody > tr:hover {
138+
cursor: pointer;
139+
}
140+
</style>

‎ui/src/components/Socket/SocketDetails.vue

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,24 +12,15 @@
1212
<tr>
1313
<td class="key-column">{{ $t("id") }}</td>
1414
<td>
15-
{{ client.id }}
16-
</td>
17-
<td align="right">
18-
<v-tooltip bottom v-if="client.connected">
19-
<template v-slot:activator="{ on, attrs }">
20-
<v-btn
21-
v-bind="attrs"
22-
v-on="on"
23-
@click="navigateToClient()"
24-
small
25-
class="ml-3"
26-
>
27-
<v-icon>mdi-dots-horizontal</v-icon>
28-
</v-btn>
29-
</template>
30-
<span>{{ $t("clients.displayDetails") }}</span>
31-
</v-tooltip>
15+
<router-link
16+
v-if="client.connected"
17+
class="link"
18+
:to="toClient"
19+
>{{ client.id }}</router-link
20+
>
21+
<span v-else>{{ client.id }}</span>
3222
</td>
23+
<td></td>
3324
</tr>
3425
<tr>
3526
<td class="key-column">{{ $t("status") }}</td>
@@ -154,6 +145,14 @@ export default {
154145
},
155146
156147
computed: {
148+
toClient() {
149+
return {
150+
name: "client",
151+
params: {
152+
id: this.client.id,
153+
},
154+
};
155+
},
157156
creationDate() {
158157
return new Date(this.socket.handshake.issued).toISOString();
159158
},
@@ -197,4 +196,8 @@ export default {
197196
.key-column {
198197
width: 30%;
199198
}
199+
200+
.link {
201+
color: inherit;
202+
}
200203
</style>

‎ui/src/components/Socket/SocketRooms.vue

Lines changed: 10 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<template>
22
<v-card class="fill-height">
33
<v-card-title>{{ $t("rooms.title") }}</v-card-title>
4-
<v-data-table :headers="headers" :items="roomsAsObjects" dense>
4+
<v-data-table
5+
:headers="headers"
6+
:items="roomsAsObjects"
7+
dense
8+
class="row-pointer"
9+
@click:row="displayDetails"
10+
>
511
<template v-slot:item.actions="{ item }">
612
<v-tooltip bottom v-if="isSocketLeaveSupported">
713
<template v-slot:activator="{ on, attrs }">
@@ -18,21 +24,6 @@
1824
</template>
1925
<span>{{ $t("sockets.leave") }}</span>
2026
</v-tooltip>
21-
22-
<v-tooltip bottom>
23-
<template v-slot:activator="{ on, attrs }">
24-
<v-btn
25-
v-bind="attrs"
26-
v-on="on"
27-
@click="displayDetails(item)"
28-
small
29-
class="ml-3"
30-
>
31-
<v-icon>mdi-dots-horizontal</v-icon>
32-
</v-btn>
33-
</template>
34-
<span>{{ $t("rooms.displayDetails") }}</span>
35-
</v-tooltip>
3627
</template>
3728
</v-data-table>
3829

@@ -170,4 +161,7 @@ export default {
170161
.select-room {
171162
max-width: 200px;
172163
}
164+
.row-pointer >>> tbody > tr:hover {
165+
cursor: pointer;
166+
}
173167
</style>

‎ui/src/views/Clients.vue

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@
77
:headers="headers"
88
:items="clients"
99
:footer-props="footerProps"
10+
class="row-pointer"
11+
@click:row="displayDetails"
1012
>
1113
<template v-slot:item.address="{ item }">
1214
<span v-if="item.sockets.length">{{
@@ -41,21 +43,6 @@
4143
</template>
4244
<span>{{ $t("clients.disconnect") }}</span>
4345
</v-tooltip>
44-
45-
<v-tooltip bottom>
46-
<template v-slot:activator="{ on, attrs }">
47-
<v-btn
48-
v-bind="attrs"
49-
v-on="on"
50-
@click="displayDetails(item)"
51-
small
52-
class="ml-3"
53-
>
54-
<v-icon>mdi-dots-horizontal</v-icon>
55-
</v-btn>
56-
</template>
57-
<span>{{ $t("clients.displayDetails") }}</span>
58-
</v-tooltip>
5946
</template>
6047
</v-data-table>
6148
</v-card>
@@ -136,3 +123,9 @@ export default {
136123
},
137124
};
138125
</script>
126+
127+
<style scoped>
128+
.row-pointer >>> tbody > tr:hover {
129+
cursor: pointer;
130+
}
131+
</style>

‎ui/src/views/Rooms.vue

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,8 @@
2020
:headers="headers"
2121
:items="filteredRooms"
2222
:footer-props="footerProps"
23+
class="row-pointer"
24+
@click:row="displayDetails"
2325
>
2426
<template v-slot:item.sockets="{ item }">
2527
{{ item.sockets.length }}
@@ -61,21 +63,6 @@
6163
</template>
6264
<span>{{ $t("rooms.disconnect") }}</span>
6365
</v-tooltip>
64-
65-
<v-tooltip bottom>
66-
<template v-slot:activator="{ on, attrs }">
67-
<v-btn
68-
v-bind="attrs"
69-
v-on="on"
70-
@click="displayDetails(item)"
71-
small
72-
class="ml-3"
73-
>
74-
<v-icon>mdi-dots-horizontal</v-icon>
75-
</v-btn>
76-
</template>
77-
<span>{{ $t("rooms.displayDetails") }}</span>
78-
</v-tooltip>
7966
</template>
8067
</v-data-table>
8168
</v-card>
@@ -183,3 +170,9 @@ export default {
183170
},
184171
};
185172
</script>
173+
174+
<style scoped>
175+
.row-pointer >>> tbody > tr:hover {
176+
cursor: pointer;
177+
}
178+
</style>

‎ui/src/views/Sockets.vue

Lines changed: 8 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@
1111
:headers="headers"
1212
:items="sockets"
1313
:footer-props="footerProps"
14+
class="row-pointer"
15+
@click:row="displayDetails"
1416
>
1517
<template v-slot:item.transport="{ value }">
1618
<Transport :transport="value" />
@@ -31,21 +33,6 @@
3133
</template>
3234
<span>{{ $t("sockets.disconnect") }}</span>
3335
</v-tooltip>
34-
35-
<v-tooltip bottom>
36-
<template v-slot:activator="{ on, attrs }">
37-
<v-btn
38-
v-bind="attrs"
39-
v-on="on"
40-
@click="displayDetails(item)"
41-
small
42-
class="ml-3"
43-
>
44-
<v-icon>mdi-dots-horizontal</v-icon>
45-
</v-btn>
46-
</template>
47-
<span>{{ $t("sockets.displayDetails") }}</span>
48-
</v-tooltip>
4936
</template>
5037
</v-data-table>
5138
</v-card>
@@ -122,3 +109,9 @@ export default {
122109
},
123110
};
124111
</script>
112+
113+
<style scoped>
114+
.row-pointer >>> tbody > tr:hover {
115+
cursor: pointer;
116+
}
117+
</style>

‎ui/vue.config.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
module.exports = {
2-
32
publicPath: "./",
43

54
configureWebpack: {

0 commit comments

Comments
 (0)