add overall

src/modules/[chain]/uptime/index.vue

@@ -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>
-    <div class="flex items-center gap-x-4">
+    <div class="tabs tabs-boxed bg-transparent mb-4">
-      <input
+      <a
-        type="text"
+        class="tab text-gray-400 capitalize"
-        v-model="keyword"
+        :class="{ 'tab-active': tab === '3' }"
-        placeholder="Keywords to filter validators"
+        @click="changeTab('3')"
-        class="input input-sm w-full flex-1"
+        >Overall</a
-      />
+      >
-      <RouterLink class="btn btn-primary btn-sm" :to="`/${chain}/uptime/overview`">
+      <a
-        <Icon icon="mdi-star" class="mr-2 text-lg" />
+        class="tab text-gray-400 capitalize"
-        <span class="">Favorite</span>
+        :class="{ 'tab-active': tab === '2' }"
-      </RouterLink>
+        @click="changeTab('2')"
+        >Blocks</a
+      >
+      <RouterLink :to="`/${chain}/uptime/overview`">
+      <a
+        class="tab text-gray-400 capitalize"
+        >Customize</a
+      ></RouterLink>
     </div>
-    <div
+    <div class="bg-base-100 px-5 pt-5">
-      class="grid grid-cols-1 md:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-6 gap-x-4 mt-4"
+      <div class="flex items-center gap-x-4">
-    >
+        <input type="text" v-model="keyword" placeholder="Keywords to filter validators"
-      <div v-for="(v, i) in validators" :key="i" >
+          class="input input-sm w-full flex-1" />
-        <div class="flex items-center justify-between py-0">
+        <RouterLink class="btn btn-primary btn-sm" :to="`/${chain}/uptime/overview`">
-          <label class="text-truncate text-sm">
+          <Icon icon="mdi-star" class="mr-2 text-lg" />
-            <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
+          <span class="">Favorite</span>
-          </label>
+        </RouterLink>
-          <div
+      </div>
-            v-if="
+      <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'">
-              Number(
+        <div v-for="({v, signing, hex}, i) in list" :key="i">
-                signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
+          <div class="flex items-center justify-between py-0">
-                  ?.missed_blocks_counter || 0
+            <label class="text-truncate text-sm">
-              ) > 0
+              <span class="ml-1 text-black dark:text-white">{{ i + 1 }}.{{ v.description.moniker }}</span>
-            "
+            </label>
-            class="badge badge-error badge-sm text-white"
+            <div v-if="Number(signing?.missed_blocks_counter || 0) > 10" class="badge badge-error badge-sm text-white">
-          >
+              {{ signing?.missed_blocks_counter }}
-            {{
+            </div>
-              signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
+            <div v-else class="mt-1 badge badge-sm text-white bg-yes border-0">
-                ?.missed_blocks_counter
+              {{ signing?.missed_blocks_counter }}
-            }}
+            </div>
-          </div>
+          </div>
-          <div v-else class="mt-1 badge badge-sm text-white bg-yes border-0">
+          <UptimeBar :blocks="commits2" :validator="hex" />
-            {{
+        </div>
-              signingInfo[consensusPubkeyToHexAddress(v.consensus_pubkey)]
-                ?.missed_blocks_counter
-            }}
-          </div>
-        </div>
-        <UptimeBar
-          :blocks="commits2"
-          :validator="
-            toBase64(fromHex(consensusPubkeyToHexAddress(v.consensus_pubkey)))
-          "
-        />
       </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>