Improve UI of uptime

This commit is contained in:
liangping 2022-03-18 15:35:28 +08:00
parent c2afbe584e
commit a8acd8e21f
2 changed files with 12 additions and 8 deletions

View File

@ -40,14 +40,15 @@
@change="pinValidator(`${chain}#${x.address}`)" @change="pinValidator(`${chain}#${x.address}`)"
><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span> ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
</b-form-checkbox> </b-form-checkbox>
<span <b-badge
v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0" v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
v-b-tooltip.hover.v-danger v-b-tooltip.hover.v-danger
variant="light-danger"
:title="`missed blocks: ${missing[x.address].missed_blocks_counter}`" :title="`missed blocks: ${missing[x.address].missed_blocks_counter}`"
class="text-danger text-bolder" class="text-danger text-bolder"
> >
{{ missing[x.address].missed_blocks_counter }} {{ missing[x.address].missed_blocks_counter }}
</span> </b-badge>
</div> </div>
<div class="d-flex justify-content-between align-self-stretch flex-wrap"> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
<div <div
@ -72,7 +73,7 @@
<script> <script>
import { import {
BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
@ -88,6 +89,7 @@ export default {
BCard, BCard,
BAlert, BAlert,
BButton, BButton,
BBadge,
BFormCheckbox, BFormCheckbox,
}, },
directives: { directives: {

View File

@ -32,14 +32,15 @@
> >
<span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span> <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
</b-form-checkbox> </b-form-checkbox>
<span <b-badge
v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0" v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
v-b-tooltip.hover.v-danger v-b-tooltip.hover.v-danger
variant="light-danger"
:title="`missed blocks: ${missing[x.address].missed_blocks_counter}`" :title="`missed blocks: ${missing[x.address].missed_blocks_counter}`"
class="text-danger text-bolder" class="text-danger text-bolder"
> >
{{ missing[x.address].missed_blocks_counter }} {{ missing[x.address].missed_blocks_counter }}
</span> </b-badge>
</div> </div>
<div class="d-flex justify-content-between align-self-stretch flex-wrap"> <div class="d-flex justify-content-between align-self-stretch flex-wrap">
<div <div
@ -64,7 +65,7 @@
<script> <script>
import { import {
BRow, BCol, VBTooltip, BCard, BAlert, BCardTitle, BFormCheckbox, BRow, BCol, VBTooltip, BCard, BAlert, BCardTitle, BFormCheckbox, BBadge,
} from 'bootstrap-vue' } from 'bootstrap-vue'
import { import {
@ -75,6 +76,7 @@ import { Bech32, toHex } from '@cosmjs/encoding'
export default { export default {
name: 'Blocks', name: 'Blocks',
components: { components: {
BBadge,
BRow, BRow,
BCol, BCol,
BCard, BCard,