Skip to content

Commit d0b55c7

Browse files
GusevPMGusevPM
committed
Add validators messages
1 parent fb2cbf5 commit d0b55c7

File tree

4 files changed

+202
-2
lines changed

4 files changed

+202
-2
lines changed

‎components/modules/block/BlockOverview.vue‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -582,7 +582,8 @@ const handleViewRawTransactions = () => {
582582
</Flex>
583583
584584
<UpcomingUpdate v-if="activeTab === 'upcoming_update'" :update="update" />
585-
<Flex v-else-if="activeTab === 'transactions'" direction="column" :class="[$style.table, isLoading && $style.disabled]">
585+
586+
<Flex v-else-if="activeTab === 'transactions'" direction="column" justify="between" :class="[$style.table, isLoading && $style.disabled]">
586587
<Flex wrap="wrap" align="center" justify="start" gap="8" :class="$style.filters">
587588
<Popover :open="isStatusPopoverOpen" @on-close="onStatusPopoverClose" width="200">
588589
<Button @click="handleOpenStatusPopover" type="secondary" size="mini" :disabled="!transactions.length">
@@ -918,7 +919,7 @@ const handleViewRawTransactions = () => {
918919
/>
919920
920921
<!-- Pagination -->
921-
<Flex v-if="transactions.length" align="center" gap="6" :class="$style.pagination">
922+
<Flex align="center" gap="6" :class="$style.pagination">
922923
<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">
923924
<Icon name="arrow-left-stop" size="12" color="primary" />
924925
</Button>

‎components/modules/validator/ValidatorOverview.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import ValidatorMetrics from "./ValidatorMetrics.vue"
1111
import BlocksTable from "./tables/BlocksTable.vue"
1212
import DelegatorsTable from "./tables/DelegatorsTable.vue"
1313
import JailsTable from "./tables/JailsTable.vue"
14+
import MessagesTable from "./tables/MessagesTable.vue"
1415
import SignalsTable from "./tables/SignalsTable.vue"
1516
import VotesTable from "./tables/VotesTable.vue"
1617
@@ -22,6 +23,7 @@ import {
2223
fetchValidatorBlocks,
2324
fetchValidatorDelegators,
2425
fetchValidatorJails,
26+
fetchValidatorMessages,
2527
fetchValidatorUptime,
2628
fetchSignals
2729
} from "@/services/api/validator"
@@ -64,6 +66,10 @@ const tabs = ref([
6466
name: "signals",
6567
icon: "bell-ringing",
6668
},
69+
{
70+
name: "messages",
71+
icon: "message",
72+
},
6773
])
6874
const preselectedTab = route.query.tab && tabs.value.map((tab) => tab.name).includes(route.query.tab) ? route.query.tab : tabs.value[0].name
6975
const activeTab = ref(preselectedTab)
@@ -72,6 +78,7 @@ const isRefetching = ref(false)
7278
const delegators = ref([])
7379
const blocks = ref([])
7480
const jails = ref([])
81+
const messages = ref([])
7582
const signals = ref([])
7683
const votes = ref([])
7784
const uptime = ref([])
@@ -165,6 +172,23 @@ const getVotes = async () => {
165172
isRefetching.value = false
166173
}
167174
175+
const getMessages = async () => {
176+
isRefetching.value = true
177+
178+
const { data } = await fetchValidatorMessages({
179+
id: props.validator.id,
180+
limit: limit,
181+
offset: (page.value - 1) * limit,
182+
})
183+
184+
if (data.value?.length) {
185+
messages.value = data.value
186+
handleNextCondition.value = blocks.value?.length < limit
187+
}
188+
189+
isRefetching.value = false
190+
}
191+
168192
const getUptime = async () => {
169193
const { data } = await fetchValidatorUptime({
170194
id: props.validator.id,
@@ -180,6 +204,7 @@ const getUptime = async () => {
180204
if (activeTab.value?.toLowerCase() === "delegators") await getDelegators()
181205
if (activeTab.value?.toLowerCase() === "proposed blocks") await getBlocks()
182206
if (activeTab.value?.toLowerCase() === "jails") await getJails()
207+
if (activeTab.value?.toLowerCase() === "messages") await getMessages()
183208
if (activeTab.value?.toLowerCase() === "signals") await getSignals()
184209
if (activeTab.value?.toLowerCase() === "votes") await getVotes()
185210
await getUptime()
@@ -267,6 +292,9 @@ watch(
267292
case "votes":
268293
getVotes()
269294
break
295+
case "messages":
296+
getMessages()
297+
break
270298
}
271299
},
272300
)
@@ -298,6 +326,9 @@ watch(
298326
case "votes":
299327
getVotes()
300328
break
329+
case "messages":
330+
getMessages()
331+
break
301332
}
302333
},
303334
)
@@ -571,6 +602,17 @@ const handleDelegate = () => {
571602
</Flex>
572603
</template>
573604
605+
<template v-if="activeTab === 'messages'">
606+
<MessagesTable v-if="messages.length" :messages="messages" />
607+
608+
<Flex v-else align="center" justify="center" direction="column" gap="8" wide :class="$style.empty">
609+
<Text size="13" weight="600" color="secondary" align="center"> No messages </Text>
610+
<Text size="12" weight="500" height="160" color="tertiary" align="center" style="max-width: 220px">
611+
No {{ page === 1 ? "" : "more" }} messages from this validator
612+
</Text>
613+
</Flex>
614+
</template>
615+
574616
<!-- Pagination -->
575617
<Flex align="center" gap="6" :class="$style.pagination">
576618
<Button @click="page = 1" type="secondary" size="mini" :disabled="page === 1">

‎components/modules/validator/tables/MessagesTable.vue‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<script setup>
2+
/** Vendor */
3+
import { DateTime } from "luxon"
4+
5+
/** Shared Components */
6+
import MessageTypeBadge from "@/components/shared/MessageTypeBadge.vue"
7+
8+
/** Services */
9+
import { comma } from "@/services/utils"
10+
11+
/** Store */
12+
import { useModalsStore } from "@/store/modals.store"
13+
import { useCacheStore } from "@/store/cache.store"
14+
const modalsStore = useModalsStore()
15+
const cacheStore = useCacheStore()
16+
17+
const router = useRouter()
18+
19+
const props = defineProps({
20+
messages: {
21+
type: Array,
22+
required: true,
23+
},
24+
})
25+
26+
function viewRawMessage(message) {
27+
cacheStore.current._target = "message"
28+
cacheStore.current.message = message
29+
modalsStore.open("rawData")
30+
}
31+
</script>
32+
33+
<template>
34+
<div :class="$style.wrapper_messages">
35+
<table :class="$style.table">
36+
<thead>
37+
<tr>
38+
<th><Text size="12" weight="600" color="tertiary">Type</Text></th>
39+
<th><Text size="12" weight="600" color="tertiary">Time</Text></th>
40+
<th><Text size="12" weight="600" color="tertiary">Block</Text></th>
41+
</tr>
42+
</thead>
43+
44+
<tbody>
45+
<tr v-for="message in messages">
46+
<td style="width: 1px">
47+
<Flex @click="viewRawMessage(message)" align="center" :class="$style.td_wrapper">
48+
<MessageTypeBadge :types="[message.type]" />
49+
</Flex>
50+
</td>
51+
<td>
52+
<Flex @click="viewRawMessage(message)" align="center" :class="$style.td_wrapper">
53+
<Text size="13" weight="600" color="primary">
54+
{{ DateTime.fromISO(message.time).toRelative({ locale: "en", style: "short" }) }}
55+
</Text>
56+
</Flex>
57+
</td>
58+
<td>
59+
<Flex @click="viewRawMessage(message)" align="center" :class="$style.td_wrapper">
60+
<Outline @click.prevent="router.push(`/block/${message.height}`)">
61+
<Flex align="center" gap="6">
62+
<Icon name="block" size="14" color="secondary" />
63+
64+
<Text size="13" weight="600" color="primary" tabular>{{ comma(message.height) }}</Text>
65+
</Flex>
66+
</Outline>
67+
</Flex>
68+
</td>
69+
</tr>
70+
</tbody>
71+
</table>
72+
</div>
73+
</template>
74+
75+
<style module>
76+
.wrapper_messages {
77+
min-width: 100%;
78+
width: 0;
79+
height: 100%;
80+
81+
overflow-x: auto;
82+
}
83+
84+
.table {
85+
width: 100%;
86+
height: fit-content;
87+
88+
border-spacing: 0px;
89+
90+
padding-bottom: 8px;
91+
92+
& tbody {
93+
& tr {
94+
cursor: pointer;
95+
96+
transition: all 0.05s ease;
97+
98+
&:hover {
99+
background: var(--op-5);
100+
}
101+
102+
&:active {
103+
background: var(--op-8);
104+
}
105+
}
106+
}
107+
108+
& tr th {
109+
text-align: left;
110+
padding: 0;
111+
padding-right: 16px;
112+
padding-top: 16px;
113+
padding-bottom: 8px;
114+
115+
&:first-child {
116+
padding-left: 16px;
117+
}
118+
119+
& span {
120+
display: flex;
121+
}
122+
}
123+
124+
& tr td {
125+
padding: 0;
126+
127+
white-space: nowrap;
128+
129+
&:first-child {
130+
padding-left: 16px;
131+
}
132+
133+
& .td_wrapper {
134+
display: flex;
135+
136+
min-height: 40px;
137+
138+
padding-right: 24px;
139+
}
140+
}
141+
}
142+
</style>

‎services/api/validator.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,3 +170,18 @@ export const fetchSignals = ({ validatorId, version, limit, offset }) => {
170170
console.error(error)
171171
}
172172
}
173+
174+
export const fetchValidatorMessages = ({ id, limit, offset }) => {
175+
try {
176+
const url = new URL(`${useServerURL()}/validators/${id}/messages`)
177+
178+
if (limit) url.searchParams.append("limit", limit)
179+
if (offset) url.searchParams.append("offset", offset)
180+
181+
return useFetch(encodeURI(url.href), {
182+
key: "validator_messages",
183+
})
184+
} catch (error) {
185+
console.error(error)
186+
}
187+
}

0 commit comments

Comments
 (0)