forked from cerc-io/cosmos-explorer
add overall
This commit is contained in:
liangping
parent
9f1d093128
commit
6653ce791c
@ -16,9 +16,10 @@ import type { SigningInfo } from '@/types/slashing';
|
||||
const props = defineProps(['chain']);
|
||||
|
||||
const stakingStore = useStakingStore();
|
||||
const format = useFormatter();
|
||||
const baseStore = useBaseStore();
|
||||
const chainStore = useBlockchain();
|
||||
const latest = ref({} as Block);
|
||||
const latest = ref(0);
|
||||
const commits = ref([] as Commit[]);
|
||||
const keyword = ref('');
|
||||
const live = ref(true);
|
||||
@ -34,10 +35,18 @@ const validators = computed(() => {
|
||||
return stakingStore.validators;
|
||||
});
|
||||
|
||||
const list = computed(() => {
|
||||
return validators.value.map(v => ({
|
||||
v,
|
||||
signing: signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)],
|
||||
hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey)))
|
||||
}))
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
live.value = true;
|
||||
baseStore.fetchLatest().then(b => {
|
||||
latest.value = b;
|
||||
latest.value = Number(b.block.header.height);
|
||||
commits.value.unshift(b.block.last_commit);
|
||||
const height = Number(b.block.header?.height || 0);
|
||||
if (height === 0) {
|
||||
@ -72,80 +81,102 @@ onMounted(() => {
|
||||
const commits2 = computed(() => {
|
||||
const la = baseStore.recents.map(b => b.block.last_commit)
|
||||
const all = [...commits.value, ...la]
|
||||
return all.length > 50 ? all.slice(all.length - 50): all
|
||||
return all.length > 50 ? all.slice(all.length - 50) : all
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
live.value = false;
|
||||
});
|
||||
const tab = ref("3")
|
||||
function changeTab(v: string) {
|
||||
tab.value = v
|
||||
}
|
||||
|
||||
|
||||
// watchEffect((x) => {
|
||||
// const list = selected.value.map(x => {
|
||||
// const val = stakingStore.validators.find(v => v.operator_address === x)
|
||||
// return {
|
||||
// name: val?.description.moniker || "",
|
||||
// address: x
|
||||
// }
|
||||
// })
|
||||
// local.value[chainStore.chainName] = list;
|
||||
// localStorage.setItem('uptime-validators', JSON.stringify(local.value));
|
||||
// });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="bg-base-100 px-5 pt-5">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<input
|
||||
type="text"
|
||||
v-model="keyword"
|
||||
placeholder="Keywords to filter validators"
|
||||
class="input input-sm w-full flex-1"
|
||||
/>
|
||||
<RouterLink class="btn btn-primary btn-sm" :to="`/${chain}/uptime/overview`">
|
||||
<Icon icon="mdi-star" class="mr-2 text-lg" />
|
||||
<span class="">Favorite</span>
|
||||
</RouterLink>
|
||||
<div>
|
||||
<div class="tabs tabs-boxed bg-transparent mb-4">
|
||||
<a
|
||||
class="tab text-gray-400 capitalize"
|
||||
:class="{ 'tab-active': tab === '3' }"
|
||||
@click="changeTab('3')"
|
||||
>Overall</a
|
||||
>
|
||||
<a
|
||||
class="tab text-gray-400 capitalize"
|
||||
:class="{ 'tab-active': tab === '2' }"
|
||||
@click="changeTab('2')"
|
||||
>Blocks</a
|
||||
>
|
||||
<RouterLink :to="`/${chain}/uptime/overview`">
|
||||
<a
|
||||
class="tab text-gray-400 capitalize"
|
||||
>Customize</a
|
||||
></RouterLink>
|
||||
</div>
|
||||
<div
|
||||
class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4"
|
||||
>
|
||||
<div v-for="(v, i) in validators" :key="i" >
|
||||
<div class="flex items-center justify-between py-0">
|
||||
<label class="text-truncate text-sm">
|
||||
<span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
|
||||
</label>
|
||||
<div
|
||||
v-if="
|
||||
Number(
|
||||
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
|
||||
?.missed_blocks_counter || 0
|
||||
) > 0
|
||||
"
|
||||
class="badge badge-error badge-sm text-white"
|
||||
>
|
||||
{{
|
||||
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
|
||||
?.missed_blocks_counter
|
||||
}}
|
||||
</div>
|
||||
<div v-else class="mt-1 badge badge-sm text-white bg-yes border-0">
|
||||
{{
|
||||
signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
|
||||
?.missed_blocks_counter
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<UptimeBar
|
||||
:blocks="commits2"
|
||||
:validator="
|
||||
toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey)))
|
||||
"
|
||||
/>
|
||||
<div class="bg-base-100 px-5 pt-5">
|
||||
<div class="flex items-center gap-x-4">
|
||||
<input type="text" v-model="keyword" placeholder="Keywords to filter validators"
|
||||
class="input input-sm w-full flex-1" />
|
||||
<RouterLink class="btn btn-primary btn-sm" :to="`/${chain}/uptime/overview`">
|
||||
<Icon icon="mdi-star" class="mr-2 text-lg" />
|
||||
<span class="">Favorite</span>
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4" :class="tab === '2'?'':'hidden'">
|
||||
<div v-for="({v, signing, hex}, i) in list" :key="i">
|
||||
<div class="flex items-center justify-between py-0">
|
||||
<label class="text-truncate text-sm">
|
||||
<span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
|
||||
</label>
|
||||
<div v-if="Number(signing?.missed_blocks_counter || 0) > 10" class="badge badge-error badge-sm text-white">
|
||||
{{ signing?.missed_blocks_counter }}
|
||||
</div>
|
||||
<div v-else class="mt-1 badge badge-sm text-white bg-yes border-0">
|
||||
{{ signing?.missed_blocks_counter }}
|
||||
</div>
|
||||
</div>
|
||||
<UptimeBar :blocks="commits2" :validator="hex" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="h-6"></div>
|
||||
<div :class="tab === '3'?'':'hidden'">
|
||||
<table class="table table-compact w-full mt-5">
|
||||
<thead>
|
||||
<tr>
|
||||
<td rowspan="2">Validator</td>
|
||||
<td rowspan="2">Start Height</td>
|
||||
<td rowspan="2">Signed Blocks</td>
|
||||
<td colspan="2">Missing blocks</td>
|
||||
<td rowspan="2">Last Jailed Time</td>
|
||||
<td rowspan="2">Tombstoned</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>In Window</td>
|
||||
<td>Over All</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr v-for="({v, signing}, i) in list">
|
||||
<td>{{ i+1 }}. {{ v.description.moniker }}</td>
|
||||
<td>{{ signing?.start_height }}</td>
|
||||
<td>{{ signing?.index_offset }}</td>
|
||||
<td>
|
||||
<span class="badge badge-sm text-white" :class="Number(signing?.missed_blocks_counter) < 10?'badge-success':'badge-error'">{{ signing?.missed_blocks_counter }}</span>
|
||||
</td>
|
||||
<td><span v-if="signing && signing.jailed_until.startsWith('1970')">{{ format.percent(Number(signing.index_offset)/(latest-Number(signing.start_height))) }}</span></td>
|
||||
<td><span v-if="signing && !signing.jailed_until.startsWith('1970')">
|
||||
<div class="tooltip" :data-tip="format.toDay(signing?.jailed_until, 'long')">
|
||||
<span>{{ format.toDay(signing?.jailed_until, "from") }}</span>
|
||||
</div>
|
||||
</span></td>
|
||||
<td class=" capitalize">{{ signing?.tombstoned }}</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="h-6"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<route>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user