From 82eeaff60102c068aadfad3ca68308fd8c3cf426 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Fri, 18 Mar 2022 14:58:56 +0800
Subject: [PATCH] add missing blocks and filter by parameters

---
 src/libs/fetch.js                 |  8 ++---
 src/views/Uptime.vue              | 35 +++++++++++++++----
 src/views/UptimeMyChainBlocks.vue | 37 +++++++++++++++-----
 src/views/UptimeMyValidators.vue  | 56 ++++++++++++++++++++++++-------
 4 files changed, 105 insertions(+), 31 deletions(-)

diff --git a/src/libs/fetch.js b/src/libs/fetch.js
index 450c370d..3d473ae3 100644
--- a/src/libs/fetch.js
+++ b/src/libs/fetch.js
@@ -71,8 +71,8 @@ export default class ChainFetch {
     return this.get(`/blocks/${height}`, config).then(data => Block.create(data))
   }
 
-  async getSlashingSigningInfo() {
-    return this.get('/cosmos/slashing/v1beta1/signing_infos')
+  async getSlashingSigningInfo(config = null) {
+    return this.get('/cosmos/slashing/v1beta1/signing_infos?pagination.limit=500', config)
   }
 
   async getTxs(hash) {
@@ -140,8 +140,8 @@ export default class ChainFetch {
     })
   }
 
-  async getValidatorList() {
-    return this.get('/staking/validators').then(data => {
+  async getValidatorList(config = null) {
+    return this.get('/staking/validators', config).then(data => {
       const vals = commonProcess(data).map(i => new Validator().init(i))
       localStorage.setItem(`validators-${this.config.chain_name}`, JSON.stringify(vals))
       return vals
diff --git a/src/views/Uptime.vue b/src/views/Uptime.vue
index 288e7f37..fc8b1d48 100644
--- a/src/views/Uptime.vue
+++ b/src/views/Uptime.vue
@@ -32,13 +32,23 @@
           md="4"
           class="text-truncate"
         >
-          <b-form-checkbox
-            v-model="pinned"
-            :value="`${chain}#${x.address}`"
-            class="custom-control-warning"
-            @change="pinValidator(`${chain}#${x.address}`)"
-          ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
-          </b-form-checkbox>
+          <div class="d-flex justify-content-between">
+            <b-form-checkbox
+              v-model="pinned"
+              :value="`${chain}#${x.address}`"
+              class="custom-control-warning text-truncate"
+              @change="pinValidator(`${chain}#${x.address}`)"
+            ><span class="d-inline-block text-truncate font-weight-bold align-bottom">{{ index+1 }} {{ x.validator.moniker }}</span>
+            </b-form-checkbox>
+            <span
+              v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
+              v-b-tooltip.hover.v-danger
+              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              class="text-danger text-bolder"
+            >
+              {{ missing[x.address].missed_blocks_counter }}
+            </span>
+          </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
               v-for="(b,i) in blocks"
@@ -68,6 +78,7 @@ import {
 import {
   consensusPubkeyToHexAddress, getCachedValidators, timeIn, toDay,
 } from '@/libs/utils'
+import { Bech32, toHex } from '@cosmjs/encoding'
 
 export default {
   components: {
@@ -115,6 +126,16 @@ export default {
     this.$http.getValidatorList().then(res => {
       this.validators = res
     })
+    this.$http.getSlashingSigningInfo().then(res => {
+      if (res.info) {
+        res.info.forEach(x => {
+          if (x.address) {
+            const hex = toHex(Bech32.decode(x.address).data).toUpperCase()
+            this.missing[hex] = x
+          }
+        })
+      }
+    })
     this.initBlocks()
   },
   beforeDestroy() {
diff --git a/src/views/UptimeMyChainBlocks.vue b/src/views/UptimeMyChainBlocks.vue
index 8d9ff33b..ab0c3d64 100644
--- a/src/views/UptimeMyChainBlocks.vue
+++ b/src/views/UptimeMyChainBlocks.vue
@@ -23,14 +23,24 @@
           sm="12"
           class="text-truncate"
         >
-          <b-form-checkbox
-            v-model="pinned"
-            :value="`${chain}#${x.address}`"
-            class="custom-control-warning"
-            @change="pinValidator(`${chain}#${x.address}`)"
-          >
-            <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
-          </b-form-checkbox>
+          <div class="d-flex justify-content-between">
+            <b-form-checkbox
+              v-model="pinned"
+              :value="`${chain}#${x.address}`"
+              class="custom-control-warning"
+              @change="pinValidator(`${chain}#${x.address}`)"
+            >
+              <span class="d-inline-block text-truncate font-weight-bold align-bottom"> {{ x.validator.moniker }} </span>
+            </b-form-checkbox>
+            <span
+              v-if="missing[x.address] && missing[x.address].missed_blocks_counter > 0"
+              v-b-tooltip.hover.v-danger
+              :title="`missed blocks:${missing[x.address].missed_blocks_counter}`"
+              class="text-danger text-bolder"
+            >
+              {{ missing[x.address].missed_blocks_counter }}
+            </span>
+          </div>
           <div class="d-flex justify-content-between align-self-stretch flex-wrap">
             <div
               v-for="(b,i) in blocks"
@@ -60,6 +70,7 @@ import {
 import {
   getLocalChains, timeIn, toDay,
 } from '@/libs/utils'
+import { Bech32, toHex } from '@cosmjs/encoding'
 
 export default {
   name: 'Blocks',
@@ -105,6 +116,16 @@ export default {
   },
   created() {
     this.initBlocks()
+    this.$http.getSlashingSigningInfo(this.config).then(res => {
+      if (res.info) {
+        res.info.forEach(x => {
+          if (x.address) {
+            const hex = toHex(Bech32.decode(x.address).data).toUpperCase()
+            this.missing[hex] = x
+          }
+        })
+      }
+    })
   },
   beforeDestroy() {
     this.blocks = [] // clear running tasks if it is not finish
diff --git a/src/views/UptimeMyValidators.vue b/src/views/UptimeMyValidators.vue
index ddab0d7b..348eedf8 100644
--- a/src/views/UptimeMyValidators.vue
+++ b/src/views/UptimeMyValidators.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="container-md px-0">
-    <b-row>
+    <b-row v-if="chainVals">
       <b-col
         v-for="(x,index) in Object.keys(chainVals)"
         :key="index"
@@ -15,27 +15,42 @@
 
       </b-col>
     </b-row>
+    <b-alert
+      class="mt-2"
+      variant="success"
+      show
+    >
+      <div class="alert-heading">
+        Note
+      </div>
+      <div class="alert-body">
+        There are two ways to monitor your valdiators:
+        <li> Pin a validator on Uptime page.</li>
+        <li> Specify parameters like following: <pre>https://ping.pub/cosmos/uptime/my?validators={"sifchain":["FBADE9A30473BB9ED6DFA16BFB3838E028F33650"],"chain_name":["hexAddress"]}</pre></li>
+      </div>
+    </b-alert>
   </div>
 </template>
 
 <script>
 import {
-  BRow, BCol, VBTooltip,
+  BRow, BCol, VBTooltip, BAlert,
 } from 'bootstrap-vue'
-import { consensusPubkeyToHexAddress, getCachedValidators } from '@/libs/utils'
+import { consensusPubkeyToHexAddress, getCachedValidators, getLocalChains } from '@/libs/utils'
 import UptimeMyChainBlocks from './UptimeMyChainBlocks.vue'
 
 export default {
   components: {
     BRow,
     BCol,
+    BAlert,
     UptimeMyChainBlocks,
   },
   directives: {
     'b-tooltip': VBTooltip,
   },
   data() {
-    const pinned = (localStorage.getItem('pinned') || '').split(',').map(x => x.split('#')).reduce((a1, b) => {
+    let pinned = (localStorage.getItem('pinned') || '').split(',').map(x => x.split('#')).reduce((a1, b) => {
       const a = a1
       if (a[b[0]]) {
         a[b[0]].push(b[1])
@@ -44,17 +59,34 @@ export default {
       }
       return a
     }, {})
+    if (this.$route.query.validators) {
+      pinned = (JSON.parse(this.$route.query.validators))
+    }
 
     const chainVals = {}
-    Object.keys(pinned).forEach(x => {
-      const cached = JSON.parse(getCachedValidators(x))
-      const validators = []
-      pinned[x].forEach(address => {
-        const val = cached.find(v => address === consensusPubkeyToHexAddress(v.consensus_pubkey))
-        if (val) validators.push({ address, validator: val.description })
+    if (pinned) {
+      const configs = getLocalChains()
+      Object.keys(pinned).forEach(x => {
+        const cached = JSON.parse(getCachedValidators(x))
+        if (cached) {
+          const validators = []
+          pinned[x].forEach(address => {
+            const val = cached.find(v => address === consensusPubkeyToHexAddress(v.consensus_pubkey))
+            if (val) validators.push({ address, validator: val.description })
+          })
+          chainVals[x] = validators
+        } else {
+          this.$http.getValidatorList(configs[x]).then((vals => {
+            const validators = []
+            pinned[x].forEach(address => {
+              const val = vals.find(v => address === consensusPubkeyToHexAddress(v.consensus_pubkey))
+              if (val) validators.push({ address, validator: val.description })
+            })
+            this.$set(this.chainVals, x, validators)
+          }))
+        }
       })
-      chainVals[x] = validators
-    })
+    }
 
     return {
       chainVals,