zramsay/cosmos-explorer
1
0
Fork 0
forked from cerc-io/cosmos-explorer
Code Pull Requests Actions Activity

feat: Uptime

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-12 10:28:09 +08:00
parent 5f2f06068c
commit 24f2969e6e
2 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/UptimeBar.vue
View File

@ -23,8 +23,8 @@ const bars = computed(() => {
}); });
</script> </script>
<template> <template>
<div class="d-flex justify-evenly"> <div class="flex items-center justify-evenly">
<span v-for="(b, i) in bars" :key="i" :class="b.color" style="width: 1.5%" <span v-for="(b, i) in bars" :key="i" :class="b.color" class="rounded" style="width: 1.5%"
>&nbsp; >&nbsp;
<v-tooltip <v-tooltip
v-if="Number(b.height) > 0" v-if="Number(b.height) > 0"

71
src/modules/[chain]/uptime/index.vue
View File

@ -1,6 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref, onMounted, computed, watchEffect } from 'vue'; import { ref, onMounted, computed, watchEffect } from 'vue';
import { fromHex, toBase64 } from '@cosmjs/encoding'; import { fromHex, toBase64 } from '@cosmjs/encoding';
import { Icon } from '@iconify/vue';
import { import {
useFormatter, useFormatter,
useStakingStore, useStakingStore,
@ -88,35 +89,23 @@ watchEffect(() => {
</script> </script>
<template> <template>
<div> <div class="bg-base-100 px-5 pt-5">
<VRow> <div class="flex items-center gap-x-4">
<VCol cols="12" md="4"> <div class="text-main text-lg">Current Height: {{ latest.block?.header?.height }}</div>
<VCard class="h-full self-center d-flex p-4"> <input
<div class="self-center"> type="text"
Current Height: {{ latest.block?.header?.height }}
</div>
</VCard>
</VCol>
<VCol cols="12" md="8" class="">
<VTextField
v-model="keyword" v-model="keyword"
label="Keywords to filter validators" placeholder="Keywords to filter validators"
variant="outlined" class="input input-sm w-full flex-1"
> />
<template v-slot:append> <button class="btn btn-primary btn-sm">
<VBtn <Icon icon="mdi-star" class="mr-2 text-lg" /> <span class="">Favorite</span>
><VIcon icon="mdi-star" /><span class="d-none d-md-block" </button>
>Favorite</span </div>
></VBtn
>
</template>
</VTextField>
</VCol>
</VRow>
<VRow> <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-4 gap-4 mt-4">
<VCol v-for="(v, i) in validators" cols="12" md="3" xl="2" class="py-0"> <div v-for="(v, i) in validators">
<div class="d-flex justify-between"> <div class="flex items-center justify-between">
<VCheckbox <VCheckbox
v-model="selected" v-model="selected"
color="warning" color="warning"
@ -128,26 +117,26 @@ watchEffect(() => {
> >
</template> </template>
</VCheckbox> </VCheckbox>
<VChip <div
v-if=" v-if="
Number( Number(
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)] signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
?.missed_blocks_counter || 0 ?.missed_blocks_counter || 0
) > 0 ) > 0
" "
size="small" class="badge badge-error badge-sm text-white"
class="mt-1"
label
color="error"
>{{
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
?.missed_blocks_counter
}}</VChip
> >
<VChip v-else size="small" class="mt-1" label color="success">{{ {{
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)] signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
?.missed_blocks_counter ?.missed_blocks_counter
}}</VChip> }}
</div>
<div v-else class="mt-1 badge badge-sm text-white bg-yes">
{{
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
?.missed_blocks_counter
}}
</div>
</div> </div>
<UptimeBar <UptimeBar
:blocks="commits" :blocks="commits"
@ -155,8 +144,10 @@ watchEffect(() => {
toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))) toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey)))
" "
/> />
</VCol> </div>
</VRow> </div>
<div class="h-6"></div>
</div> </div>
</template> </template>
<route> <route>