From 43e403c061b3e9eb63ca7d8d70b721a911cd9ad2 Mon Sep 17 00:00:00 2001
From: liangping <18786721@qq.com>
Date: Sun, 16 Oct 2022 11:11:44 +0800
Subject: [PATCH] add group

---
 src/views/Uptime.vue | 308 ++++++++++++++++++++++++++++---------------
 1 file changed, 205 insertions(+), 103 deletions(-)

diff --git a/src/views/Uptime.vue b/src/views/Uptime.vue
index 309303ed..21395536 100644
--- a/src/views/Uptime.vue
+++ b/src/views/Uptime.vue
@@ -1,107 +1,163 @@
 <template>
   <div class="px-0">
-    <b-card>
-      <b-alert
-        variant="danger"
-        :show="syncing"
-      >
-        <div class="alert-body">
-          <span>No new blocks have been produced since  <strong>{{ latestTime }}</strong> </span>
-        </div>
-      </b-alert>
-      <b-card
-        no-body
-        class="mb-1"
-      >
-        <b-button
-          to="./uptime/my"
-          variant="primary"
-        >
-          Browse favorite only
-        </b-button>
-        <b-input-group>
-          <b-input-group-prepend is-text>
-            <b-form-checkbox
-              v-model="missedFilter"
-              v-b-tooltip.hover
-              title="Only missed blocks"
-              name="viewMissed"
-            />
-          </b-input-group-prepend>
-          <b-form-input
-            v-model="query"
-            placeholder="Keywords to filter validators"
-          />
-        </b-input-group>
-      </b-card>
-      <b-row>
-        <b-col
-          v-for="(x,index) in uptime"
-          :key="index"
-          sm="12"
-          md="4"
-          xl="3"
-          class="text-truncate"
-        >
-          <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]">
-              <b-badge
-                v-if="missing[x.address].missed_blocks_counter > 0"
-                v-b-tooltip.hover.v-danger
-                variant="light-danger"
-                :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
-                class="text-danger text-bolder"
-              >
-                {{ missing[x.address].missed_blocks_counter }}
-              </b-badge>
-              <b-badge
-                v-else
-                v-b-tooltip.hover.v-success
-                variant="light-success"
-                title="Perfect! No missed blocks"
-              >
-                0
-              </b-badge>
-            </span>
-          </div>
-          <b-skeleton-wrapper :loading="loading">
-            <template #loading>
-              <b-skeleton width="100%" />
-            </template>
-            <template #default>
-              <div class="d-flex justify-content-between align-self-stretch flex-wrap">
-                <div
-                  v-for="(b,i) in blocks"
-                  :key="i"
-                  style="width:1.5%;"
-                ><router-link :to="`./blocks/${b.height}`">
-                  <div
-                    v-b-tooltip.hover.v-second
-                    :title="b.height"
-                    :class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
-                    class="m-auto"
-                  >&nbsp;</div>
-                </router-link>
-                </div>
+    <b-tabs>
+      <b-tab title="Group By Validator">
+        <b-card>
+          <b-alert
+            variant="danger"
+            :show="syncing"
+          >
+            <div class="alert-body">
+              <span>No new blocks have been produced since  <strong>{{ latestTime }}</strong> </span>
+            </div>
+          </b-alert>
+          <b-card
+            no-body
+            class="mb-1"
+          >
+            <b-row>
+              <b-col md="3">
+                <h4>#{{ height }}</h4>
+              </b-col>
+              <b-col md="9">
+                <b-input-group>
+                  <b-input-group-prepend is-text>
+                    <b-form-checkbox
+                      v-model="missedFilter"
+                      v-b-tooltip.hover
+                      title="Only missed blocks"
+                      name="viewMissed"
+                    />
+                  </b-input-group-prepend>
+                  <b-form-input
+                    v-model="query"
+                    placeholder="Keywords to filter validators"
+                  />
+                  <b-input-group-append>
+                    <b-button
+                      to="./uptime/my"
+                      variant="primary"
+                    >
+                      Favorite
+                    </b-button>
+                  </b-input-group-append>
+                </b-input-group>
+              </b-col>
+            </b-row>
+          </b-card>
+          <b-row>
+            <b-col
+              v-for="(x,index) in uptime"
+              :key="index"
+              sm="12"
+              md="4"
+              xl="3"
+              class="text-truncate"
+            >
+              <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]">
+                  <b-badge
+                    v-if="missing[x.address].missed_blocks_counter > 0"
+                    v-b-tooltip.hover.v-danger
+                    variant="light-danger"
+                    :title="`${missing[x.address].missed_blocks_counter} missed blocks`"
+                    class="text-danger text-bolder"
+                  >
+                    {{ missing[x.address].missed_blocks_counter }}
+                  </b-badge>
+                  <b-badge
+                    v-else
+                    v-b-tooltip.hover.v-success
+                    variant="light-success"
+                    title="Perfect! No missed blocks"
+                  >
+                    0
+                  </b-badge>
+                </span>
               </div>
-            </template>
-          </b-skeleton-wrapper>
-        </b-col>
-      </b-row>
-    </b-card>
+              <b-skeleton-wrapper :loading="loading">
+                <template #loading>
+                  <b-skeleton width="100%" />
+                </template>
+                <template #default>
+                  <div class="d-flex justify-content-between align-self-stretch flex-wrap">
+                    <div
+                      v-for="(b,i) in blocks"
+                      :key="i"
+                      style="width:1.5%;"
+                    ><router-link :to="`./blocks/${b.height}`">
+                      <div
+                        v-b-tooltip.hover.v-second
+                        :title="b.height"
+                        :class="b.sigs && b.sigs[x.address] ? b.sigs[x.address] : 'bg-light-success'"
+                        class="m-auto"
+                      >&nbsp;</div>
+                    </router-link>
+                    </div>
+                  </div>
+                </template>
+              </b-skeleton-wrapper>
+            </b-col>
+          </b-row>
+        </b-card>
+      </b-tab>
+      <b-tab title="Group By Proposer">
+        <b-card>
+          <b-row>
+            <b-col
+              md="3"
+              sm="12"
+            >
+              <h4>#{{ height }}</h4>
+            </b-col>
+            <b-col
+              sm="12"
+              md="9"
+            >
+              <b-input-group
+                prepend="Qty of absent validators"
+              >
+                <b-form-input
+                  id="threshold"
+                  v-model="threshold"
+                  placeholder="Absent validator number in blocks"
+                />
+              </b-input-group>
+            </b-col>
+          </b-row>
+
+        </b-card>
+
+        <b-row>
+          <b-col
+            v-for="(x, i) in proposerViewData"
+            :key="i"
+            md="4"
+            sm="12"
+            class="text-truncate"
+          >
+            {{ x.name }}
+            <b-badge :variant="x.counter > 0 ? 'light-danger': 'light-success'">
+              {{ x.counter }} / {{ x.proposed }}
+            </b-badge>
+          </b-col>
+        </b-row>
+
+      </b-tab>
+    </b-tabs>
   </div>
 </template>
 
 <script>
 import {
-  BSkeleton, BSkeletonWrapper,
+  BSkeleton, BSkeletonWrapper, BInputGroupAppend, BTabs, BTab, BFormGroup,
   BRow, BCol, VBTooltip, BFormInput, BCard, BAlert, BFormCheckbox, BButton, BBadge, BInputGroup, BInputGroupPrepend,
 } from 'bootstrap-vue'
 
@@ -115,6 +171,7 @@ export default {
     BRow,
     BCol,
     BFormInput,
+    BFormGroup,
     BCard,
     BAlert,
     BButton,
@@ -124,6 +181,9 @@ export default {
     BSkeleton,
     BSkeletonWrapper,
     BInputGroupPrepend,
+    BInputGroupAppend,
+    BTabs,
+    BTab,
   },
   directives: {
     'b-tooltip': VBTooltip,
@@ -132,6 +192,7 @@ export default {
     const { chain } = this.$route.params
     const pinned = localStorage.getItem('pinned') ? localStorage.getItem('pinned').split(',') : ''
     return {
+      height: 0,
       loading: true,
       missedFilter: false,
       pinned,
@@ -142,6 +203,11 @@ export default {
       blocks: Array.from('0'.repeat(50)).map(x => ({ sigs: {}, height: Number(x) })),
       syncing: false,
       latestTime: '',
+      threshold: 10,
+      proposers: {},
+      absentValsInBlock: {},
+      numOfBlock: 1000,
+      temp: 0,
     }
   },
   computed: {
@@ -157,10 +223,30 @@ export default {
       }
       return rets
     },
+    // Compose data for group by proposer
+    proposerViewData() {
+      const valCounter = {}
+      this.validators.forEach(x => {
+        valCounter[this.hex2base64(consensusPubkeyToHexAddress(x.consensus_pubkey))] = {
+          name: x.description.moniker,
+          counter: 0,
+          proposed: 0,
+        }
+      })
+      Object.keys(this.proposers).forEach(height => {
+        const num = this.absentValsInBlock[height] || 0
+        if (valCounter[this.proposers[height]]) {
+          if (num > this.threshold) {
+            valCounter[this.proposers[height]].counter += 1 // (num >= Number(this.threshold) ? 1 : 0)
+          }
+          valCounter[this.proposers[height]].proposed += 1
+        }
+      })
+      return Object.values(valCounter).sort((a, b) => b.counter - a.counter)
+    },
   },
   created() {
     const cached = JSON.parse(getCachedValidators(this.$route.params.chain))
-
     if (cached) {
       this.validators = cached
     }
@@ -216,7 +302,7 @@ export default {
         blocks.push({ sigs, height })
         this.blocks = blocks
 
-        this.timer = setInterval(this.fetch_latest, 6000)
+        this.timer = setInterval(this.fetch_latest, 1000)
         this.loading = false
       })
     },
@@ -231,16 +317,30 @@ export default {
       return toBase64(fromHex(v))
     },
     fetch_status(height, resolve) {
-      const block = this.blocks.find(b => b.height === height)
-      if (block) {
-        this.$http.getBlockByHeight(height).then(res => {
-          resolve()
+      this.$http.getBlockByHeight(height).then(res => {
+        resolve()
+        const block = this.blocks.find(b => b.height === height)
+        // update valiators states
+        if (block) {
           const sigs = this.initColor()
           res.block.last_commit.signatures.forEach(x => {
             if (x.validator_address) sigs[x.validator_address] = 'bg-success'
           })
           this.$set(block, 'sigs', sigs)
-        })
+        }
+
+        // update proposer states
+        this.count(res.block)
+      })
+    },
+    /// count how many absent valiators in a block
+    count(block) {
+      const count = block.last_commit.signatures.reduce((p, c) => (c.block_id_flag !== 'BLOCK_ID_FLAG_COMMIT' ? p + 1 : p), 0)
+      // Notes: block.header.height == last_commint.height + 1
+      this.$set(this.proposers, block.header.height, block.header.proposer_address)
+      this.$set(this.absentValsInBlock, block.last_commit.height, count)
+      if (count >= this.threshold) {
+        this.temp += 1
       }
     },
     fetch_latest() {
@@ -249,12 +349,14 @@ export default {
         res.block.last_commit.signatures.forEach(x => {
           if (x.validator_address) sigs[x.validator_address] = 'bg-success'
         })
+        this.height = res.block.header.height
         const block = this.blocks.find(b => b.height === res.block.last_commit.height)
         if (typeof block === 'undefined') { // mei
           // this.$set(block, 0, typeof sigs !== 'undefined')
           if (this.blocks.length >= 50) this.blocks.shift()
           this.blocks.push({ sigs, height: res.block.last_commit.height })
         }
+        this.count(res.block)
       })
     },
   },