cerc-io/cosmos-explorer
16
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: footer fixed

Browse Source
This commit is contained in:
Alisa | Side.one 2023-05-29 21:34:05 +08:00
parent 29809b5dee
commit 42e4664744
3 changed files with 222 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/layouts/components/NavFooter.vue
View File

@ -1,6 +1,7 @@
<template>
<div class="h-10 bg-gray-100 dark:bg-[#171d30] w-full"></div>
<footer
class="footer items-center pt-4 pb-8 text-sm bg-gray-100 dark:bg-[#171d30] sticky bottom-0 z-10 mt-8"
class="footer items-center h-10 text-sm bg-gray-100 dark:bg-[#171d30] fixed bottom-0 pr-14 pl-4 z-10"
>
<div class="items-center grid-flow-col">
&copy;

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

@ -21,11 +21,11 @@ const latest = ref(0);
const commits = ref([] as Commit[]);
const keyword = ref('');
const live = ref(true);
const slashingParam = ref({} as SlashingParam)
const slashingParam = ref({} as SlashingParam);
const signingInfo = ref({} as Record<string, SigningInfo>);
const filterOptout = ref(false)
const filterOptout = ref(false);
// filter validators by keywords
const validators = computed(() => {
if (keyword)
@ -36,26 +36,33 @@ const validators = computed(() => {
});
const list = computed(() => {
const window = Number(slashingParam.value.signed_blocks_window || 0)
const vset = validators.value.map(v => {
const signing = signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)]
const window = Number(slashingParam.value.signed_blocks_window || 0);
const vset = validators.value.map((v) => {
const signing =
signingInfo.value[consensusPubkeyToHexAddress(v.consensus_pubkey)];
return {
v,
signing,
hex: toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey))),
uptime: signing && window > 0 ? (window - Number(signing.missed_blocks_counter)) / window : undefined
}
})
return filterOptout.value ? vset.filter(x => x.signing) : vset
})
uptime:
signing && window > 0
? (window - Number(signing.missed_blocks_counter)) / window
: undefined,
};
});
return filterOptout.value ? vset.filter((x) => x.signing) : vset;
});
onMounted(() => {
live.value = true;
baseStore.fetchLatest().then(l => {
let b = l
if (baseStore.recents?.findIndex(x => x.block_id.hash === l.block_id.hash) > -1) {
b = baseStore.recents?.at(0) || l
baseStore.fetchLatest().then((l) => {
let b = l;
if (
baseStore.recents?.findIndex((x) => x.block_id.hash === l.block_id.hash) >
-1
) {
b = baseStore.recents?.at(0) || l;
}
latest.value = Number(b.block.header.height);
commits.value.unshift(b.block.last_commit);
@ -86,35 +93,43 @@ onMounted(() => {
});
});
chainStore.rpc.getSlashingParams().then(x => {
slashingParam.value = x.params
})
chainStore.rpc.getSlashingParams().then((x) => {
slashingParam.value = x.params;
});
});
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
})
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;
});
onUnmounted(() => {
live.value = false;
});
//const tab = ref(window.location.hash.search("block")>-1?"2":"3")
const tab = ref("2")
const tab = ref('2');
function changeTab(v: string) {
tab.value = v
tab.value = v;
}
</script>
<template>
<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>
<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/customize`">
<a class="tab text-gray-400 capitalize">Customize</a>
</RouterLink>
@ -125,22 +140,35 @@ function changeTab(v: string) {
<input type="checkbox" v-model="filterOptout" class="checkbox" />
Only Consumer Set
</label>
<input type="text" v-model="keyword" placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600" />
<input
type="text"
v-model="keyword"
placeholder="Keywords to filter validators"
class="input input-sm w-full flex-1 border border-gray-200 dark:border-gray-600"
/>
</div>
<!-- grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-x-4 mt-4 -->
<div class="flex flex-row flex-wrap gap-x-4 mt-4" :class="tab === '2' ? '' : 'hidden'">
<div
class="flex flex-row flex-wrap gap-x-4 mt-4"
:class="tab === '2' ? '' : 'hidden'"
>
<div v-for="({ v, signing, hex }, i) in list" :key="i">
<!-- flex items-center justify-between py-0 -->
<div class="flex items-center justify-between py-0 w-72">
<label class="truncate text-sm">
<span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
<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-sm bg-transparent border-0 text-red-500">
<div
v-if="Number(signing?.missed_blocks_counter || 0) > 10"
class="badge badge-sm bg-transparent border-0 text-red-500"
>
{{ signing?.missed_blocks_counter }}
</div>
<div v-else class="badge badge-sm bg-transparent text-green-600 border-0">
<div
v-else
class="badge badge-sm bg-transparent text-green-600 border-0"
>
{{ signing?.missed_blocks_counter }}
</div>
</div>
@ -162,25 +190,47 @@ function changeTab(v: string) {
</thead>
<tr v-for="({ v, signing, uptime }, i) in list" class="hover">
<td>
<div class="truncate max-w-sm">{{ i + 1 }}. {{ v.description.moniker }}</div>
<div class="truncate max-w-sm">
{{ i + 1 }}. {{ v.description.moniker }}
</div>
</td>
<td class="text-right">
<span v-if="signing" class=""
:class="uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'">
<div class="tooltip" :data-tip="`${signing.missed_blocks_counter} missing blocks`"> {{
format.percent(uptime) }} </div>
<span
v-if="signing"
class=""
:class="
uptime && uptime > 0.95 ? 'text-green-500' : 'text-red-500'
"
>
<div
class="tooltip"
:data-tip="`${signing.missed_blocks_counter} missing blocks`"
>
{{ format.percent(uptime) }}
</div>
</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>
<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>
</span>
</td>
<td class="text-xs text-right">
<span v-if="signing && signing.jailed_until.startsWith('1970')" class="text-right">{{
format.percent(Number(signing.index_offset) / (latest - Number(signing.start_height)))
}}</span>
<span
v-if="signing && signing.jailed_until.startsWith('1970')"
class="text-right"
>{{
format.percent(
Number(signing.index_offset) /
(latest - Number(signing.start_height))
)
}}</span
>
{{ signing?.index_offset }}
</td>
<td class="text-right">{{ signing?.start_height }}</td>
@ -188,11 +238,16 @@ function changeTab(v: string) {
</tr>
<tfoot>
<tr>
<td colspan="2" class="text-right"> Minimum uptime per window: <span class="lowercase tooltip"
:data-tip="`Window size: ${slashingParam.signed_blocks_window}`"><span
class="ml-2 btn btn-error btn-xs">{{
format.percent(slashingParam.min_signed_per_window) }}</span>
</span></td>
<td colspan="2" class="text-right">
Minimum uptime per window:
<span
class="lowercase tooltip"
:data-tip="`Window size: ${slashingParam.signed_blocks_window}`"
><span class="ml-2 btn btn-error btn-xs">{{
format.percent(slashingParam.min_signed_per_window)
}}</span>
</span>
</td>
<td colspan="8"></td>
</tr>
</tfoot>
@ -212,6 +267,8 @@ function changeTab(v: string) {
}
</route>
<style lang="scss">.v-field--variant-outlined .v-field__outline__notch {
<style lang="scss">
.v-field--variant-outlined .v-field__outline__notch {
border-width: 0 !important;
}</style>
}
</style>