1
1
<script setup lang="ts">
2
2
import { useToast } from ' vue-toastification'
3
- import { useApi } from ' @/composables/useApi' ;
4
- import { getClusterMembers } from ' @/api/cluster' ;
5
- import type { ClusterMember } from ' @/api' ;
6
3
7
- import { useAuthStore } from ' @/stores/auth'
4
+ import { getClusterMembers } from ' @/api/cluster'
5
+
6
+ import { useApi } from ' @/composables/useApi'
8
7
9
8
9
+ import { useAuthStore } from ' @/stores/auth'
10
+
10
11
import { Icons } from ' @/util/icons'
11
12
13
+ import type { ClusterMember } from ' @/api'
14
+
12
15
const { data : members } = useApi (() => getClusterMembers ())
13
16
14
17
const authStore = useAuthStore ()
15
18
const toast = useToast ()
16
19
17
20
function nodeName(member : ClusterMember ): string {
18
21
let result = member .name
19
- if (member .name === " " ) {
20
- result = " Connecting..."
22
+ if (member .name === ' ' ) {
23
+ result = ' Connecting...'
21
24
}
22
25
23
26
if (member .current_node ) {
24
- result += " (current node)"
27
+ result += ' (current node)'
25
28
}
26
29
27
-
28
30
return result
29
31
}
30
-
31
-
32
32
</script >
33
33
34
-
35
34
<template >
36
35
<main class =" w-full p-4" >
37
36
<h1 class =" text-4xl font-bold" >Cluster Members</h1 >
38
37
<div class =" mt-6 flex flex-wrap gap-6" >
39
38
<div class =" grid w-full grid-cols-4 gap-4" >
40
-
41
39
<div v-for =" member in members" class =" card-compact bg-base-100 shadow-xl min-w-96 max-w-96" >
42
40
<div class =" card-body" >
43
41
<h5 class =" card-title overflow-hidden text-ellipsis whitespace-nowrap" >{{ nodeName(member) }}</h5 >
@@ -50,34 +48,34 @@ function nodeName(member: ClusterMember): string {
50
48
<div class =" overflow-hidden text-ellipsis whitespace-nowrap" >{{ member.version }}</div >
51
49
52
50
<div >Role:</div >
53
- <div class =" overflow-hidden text-ellipsis whitespace-nowrap" >{{ member.leader ? "Leader" : member.learner ? "Learner" : member.witness ? "Witness" : "Member" }}</div >
51
+ <div class =" overflow-hidden text-ellipsis whitespace-nowrap" >
52
+ {{ member.leader ? 'Leader' : member.learner ? 'Learner' : member.witness ? 'Witness' : 'Member' }}
53
+ </div >
54
54
55
55
<div >Status:</div >
56
- <div class =" overflow-hidden text-ellipsis whitespace-nowrap" >{{ member.status }}</div >
56
+ <div class =" overflow-hidden text-ellipsis whitespace-nowrap" >{{ member.status }}</div >
57
57
58
58
<div >Last Ping:</div >
59
59
<div class =" overflow-hidden text-ellipsis whitespace-nowrap" >{{ member.last_ping }}</div >
60
60
61
- <div >{{ member.peer_urls?.length > 1 ? " Addresses" : " Address" }}:</div >
61
+ <div >{{ member.peer_urls?.length > 1 ? ' Addresses' : ' Address' }}:</div >
62
62
<div class =" grid grid-rows-subgrid grid-cols-1" >
63
63
<div class =" overflow-hidden text-ellipsis whitespace-nowrap" v-for =" address in member.peer_urls" >{{ address }}</div >
64
64
</div >
65
65
</div >
66
66
</div >
67
67
</div >
68
-
69
-
70
68
</div >
71
69
</div >
72
70
</main >
73
71
</template >
74
72
75
73
<style scoped>
76
- thead > tr > th {
74
+ thead > tr > th {
77
75
background : none !important ;
78
76
}
79
77
80
- .first-col-bold > tr td :first-of-type {
78
+ .first-col-bold > tr td :first-of-type {
81
79
font-weight : bold ;
82
80
}
83
81
</style >
0 commit comments