From cab1b5d97ecad52a117224991eab36136a9334bc Mon Sep 17 00:00:00 2001
From: Lucca Dukic <109136188+LuccaBitfly@users.noreply.github.com>
Date: Tue, 26 Nov 2024 12:42:49 +0100
Subject: [PATCH] refactor(dashboard): better overview and slotviz data
 fetching

- Creates composables for Overview and SlotViz, which will eventually replace their respective stores
- Overview and SlotViz data is now fetched in `index.vue` and propped down
- SlotViz updates are handled through update emits
- Introduces proper SSR fetching

See: BEDS-914
---
 .../dashboard/DashboardValidatorOverview.vue  |  32 +++---
 .../components/dashboard/ValidatorSlotViz.vue |  25 ++---
 .../useValidatorDashboardOverview.ts          |  63 +++++++++++
 frontend/composables/useValidatorSlotViz.ts   |  44 ++++++++
 frontend/pages/dashboard/[[id]]/index.vue     | 106 ++++++++++++------
 5 files changed, 207 insertions(+), 63 deletions(-)
 create mode 100644 frontend/composables/useValidatorDashboardOverview.ts
 create mode 100644 frontend/composables/useValidatorSlotViz.ts

diff --git a/frontend/components/dashboard/DashboardValidatorOverview.vue b/frontend/components/dashboard/DashboardValidatorOverview.vue
index 5ecebdbc6f..625f4e2793 100644
--- a/frontend/components/dashboard/DashboardValidatorOverview.vue
+++ b/frontend/components/dashboard/DashboardValidatorOverview.vue
@@ -1,18 +1,22 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faArrowUpRightFromSquare } from '@fortawesome/pro-solid-svg-icons'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import type { ClElValue } from '~/types/api/common'
 import {
   type NumberOrString, TimeFrames,
 } from '~/types/value'
 import { totalElClNumbers } from '~/utils/bigMath'
 import { DashboardValidatorSubsetModal } from '#components'
+import type { VDBOverviewData } from '~/types/api/validator_dashboard'
 
 const { t: $t } = useTranslation()
 const { converter } = useValue()
 
-const { overview } = useValidatorDashboardOverviewStore()
+const {
+  overviewData,
+} = defineProps<{
+  overviewData?: VDBOverviewData,
+}>()
 
 const formatValueWei = (value: NumberOrString): NumberOrString => {
   return converter.value.weiToValue(`${value}`, { fixedDecimalCount: 4 })
@@ -33,27 +37,27 @@ const createInfo = (
 }
 
 const rewardFull = computed(() => converter.value.weiToValue(
-  totalElCl(overview.value?.rewards.last_30d ?? {
+  totalElCl(overviewData?.rewards.last_30d ?? {
     cl: '0',
     el: '0',
   }), { addPlus: true }).fullLabel)
 const reward = computed(() => converter.value.weiToValue(
-  totalElCl(overview.value?.rewards.last_30d ?? {
+  totalElCl(overviewData?.rewards.last_30d ?? {
     cl: '0',
     el: '0',
   }), { addPlus: true }).label)
 
-const validatorsOffline = computed(() => overview.value?.validators.offline ?? 0)
-const validatorsOnline = computed(() => overview.value?.validators.online ?? 0)
+const validatorsOffline = computed(() => overviewData?.validators.offline ?? 0)
+const validatorsOnline = computed(() => overviewData?.validators.online ?? 0)
 const validatorsInfos = computed(() =>
   [
     {
       label: $t('dashboard.validator.overview.validators_balance.balance_staked'),
-      value: formatValueWei(overview.value?.balances.staked_eth ?? 0),
+      value: formatValueWei(overviewData?.balances.staked_eth ?? 0),
     },
     {
       label: $t('dashboard.validator.overview.validators_balance.balance_effective'),
-      value: formatValueWei(overview.value?.balances.effective ?? 0),
+      value: formatValueWei(overviewData?.balances.effective ?? 0),
     },
   ],
 )
@@ -75,25 +79,25 @@ const openValidatorModal = () => {
 const efficiencyInfos = computed(() =>
   TimeFrames.map(k => ({
     label: $t(`statistics.${k}`),
-    value: formatPercent(overview.value?.efficiency[k] ?? 0),
+    value: formatPercent(overviewData?.efficiency[k] ?? 0),
   })),
 )
 
 const rewardsInfos = TimeFrames.map(k =>
-  createInfo(k, overview.value?.rewards[k] ?? {
+  createInfo(k, overviewData?.rewards[k] ?? {
     cl: '0',
     el: '0',
   }, formatValueWei),
 )
 
-const apr = computed(() => formatPercent(totalElClNumbers(overview.value?.apr.last_30d ?? {
+const apr = computed(() => formatPercent(totalElClNumbers(overviewData?.apr.last_30d ?? {
   cl: 0,
   el: 0,
 })),
 )
 
 const aprInfos = TimeFrames.map(k =>
-  createInfo(k, overview.value?.apr[k] ?? {
+  createInfo(k, overviewData?.apr[k] ?? {
     cl: 0,
     el: 0,
   }, formatToPercent),
@@ -124,7 +128,7 @@ const aprInfos = TimeFrames.map(k =>
       <template #additionalInfo>
         {{ $t('dashboard.validator.overview.validators_balance.balance_total') }}
         <span class="bold">
-          {{ formatValueWei(overview?.balances.total ?? 0) }}
+          {{ formatValueWei(overviewData?.balances.total ?? 0) }}
         </span>
       </template>
     </DashboardValidatorOverviewItem>
@@ -132,7 +136,7 @@ const aprInfos = TimeFrames.map(k =>
       :infos="efficiencyInfos"
       :title="$t('dashboard.validator.overview.24h_efficiency')"
     >
-      {{ formatToPercent(overview?.efficiency.last_24h ?? 0) }}
+      {{ formatToPercent(overviewData?.efficiency.last_24h ?? 0) }}
     </DashboardValidatorOverviewItem>
     <DashboardValidatorOverviewItem
       :infos="rewardsInfos"
diff --git a/frontend/components/dashboard/ValidatorSlotViz.vue b/frontend/components/dashboard/ValidatorSlotViz.vue
index 2a057f682a..00c1fab119 100644
--- a/frontend/components/dashboard/ValidatorSlotViz.vue
+++ b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { orderBy } from 'lodash-es'
-import { useValidatorSlotVizStore } from '~/stores/dashboard/useValidatorSlotVizStore'
+import type { SlotVizEpoch } from '~/types/api/slot_viz'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
 const { t: $t } = useTranslation()
-const { dashboardKey } = useDashboardKey()
+// TODO: REMOVE THIS
 const {
   overview, validatorCount,
 } = useValidatorDashboardOverviewStore()
@@ -16,16 +16,17 @@ const {
 } = useInterval(12)
 
 const {
-  refreshSlotViz, slotViz,
-} = useValidatorSlotVizStore()
+  slotVizData,
+} = defineProps<{
+  slotVizData?: SlotVizEpoch[],
+}>()
 
-await useAsyncData('validator_dashboard_slot_viz', () =>
-  refreshSlotViz(dashboardKey.value),
-)
+const emit = defineEmits<{
+  (e: 'update', groupIds?: number[]): void,
+}>()
 
 watch(
   () => [
-    dashboardKey.value,
     selectedGroups.value,
     tick.value,
   ],
@@ -37,9 +38,8 @@ watch(
     ) {
       resetTick()
     }
-    refreshSlotViz(dashboardKey.value, selectedGroups.value)
+    emit('update', selectedGroups.value)
   },
-  { immediate: true },
 )
 
 const initiallyHideVisible = computed(() => {
@@ -83,7 +83,6 @@ watch(
       selectAll()
     }
   },
-  { immediate: true },
 )
 
 const selectedLabel = computed(() => {
@@ -103,8 +102,8 @@ const selectedLabel = computed(() => {
 
 <template>
   <SlotVizViewer
-    v-if="slotViz"
-    :data="slotViz"
+    v-if="slotVizData"
+    :data="slotVizData"
     :network-info
     :timestamp="tick"
     :initially-hide-visible
diff --git a/frontend/composables/useValidatorDashboardOverview.ts b/frontend/composables/useValidatorDashboardOverview.ts
new file mode 100644
index 0000000000..ac24a3c59c
--- /dev/null
+++ b/frontend/composables/useValidatorDashboardOverview.ts
@@ -0,0 +1,63 @@
+import type {
+  GetValidatorDashboardResponse,
+  VDBOverviewData,
+} from '~/types/api/validator_dashboard'
+import type { DashboardKey } from '~/types/dashboard'
+import { API_PATH } from '~/types/customFetch'
+
+export function useValidatorDashboardOverview() {
+  const { fetch } = useCustomFetch()
+
+  const overviewData = ref<VDBOverviewData>()
+  async function fetchOverviewData(key: DashboardKey) {
+    if (!key) {
+      throw new Error('No key provided when fetching overview')
+    }
+    const res = await fetch<GetValidatorDashboardResponse>(
+      API_PATH.DASHBOARD_OVERVIEW,
+      undefined,
+      { dashboardKey: key },
+    )
+    return res.data
+  }
+  /* const hasValidators = computed<boolean>(() => {
+    if (!overviewData.value?.validators) {
+      return false
+    }
+    return (
+      !!overviewData.value.validators.online
+      || !!overviewData.value.validators.exited
+      || !!overviewData.value.validators.offline
+      || !!overviewData.value.validators.pending
+      || !!overviewData.value.validators.slashed
+    )
+  })
+
+  const validatorCount = computed(() => {
+    if (!overviewData.value) {
+      return undefined
+    }
+    if (!overviewData.value.validators) {
+      return 0
+    }
+    return (
+      overviewData.value.validators.exited
+      + overviewData.value.validators.offline
+      + overviewData.value.validators.online
+      + overviewData.value.validators.pending
+      + overviewData.value.validators.slashed
+    )
+  })
+
+  const hasAbilityCharthistory = computed(() => ({
+    daily: (overviewData.value?.chart_history_seconds?.daily ?? 0) > 0,
+    epoch: (overviewData.value?.chart_history_seconds?.epoch ?? 0) > 0,
+    hourly: (overviewData.value?.chart_history_seconds?.hourly ?? 0) > 0,
+    weekly: (overviewData.value?.chart_history_seconds?.weekly ?? 0) > 0,
+  })) */
+
+  return {
+    fetchOverviewData,
+    overviewData,
+  }
+}
diff --git a/frontend/composables/useValidatorSlotViz.ts b/frontend/composables/useValidatorSlotViz.ts
new file mode 100644
index 0000000000..76cb1e119d
--- /dev/null
+++ b/frontend/composables/useValidatorSlotViz.ts
@@ -0,0 +1,44 @@
+import type {
+  GetValidatorDashboardSlotVizResponse,
+  SlotVizEpoch,
+} from '~/types/api/slot_viz'
+import type { DashboardKey } from '~/types/dashboard'
+import { API_PATH } from '~/types/customFetch'
+
+export function useValidatorSlotViz() {
+  const { fetch } = useCustomFetch()
+
+  // State
+  const slotVizData = ref<SlotVizEpoch[]>() // Renamed `data` to `slotVizData` for clarity
+
+  // Actions
+  async function fetchSlotVizData(dashboardKey: DashboardKey, groupIds?: number[]) {
+    const query = groupIds?.length ? { group_ids: groupIds.join(',') } : undefined
+
+    const res = await fetch<GetValidatorDashboardSlotVizResponse>(
+      API_PATH.DASHBOARD_SLOTVIZ,
+      {
+        headers: {},
+        query,
+      },
+      { dashboardKey: dashboardKey || 'MQ' }, // If guest dashboard has no validators yet (= empty dashboardKey), load small guest dashboard with 1 validator (MQ)
+    )
+    const data = res.data
+    if (!dashboardKey) {
+      data.forEach((epoch) => {
+        epoch.slots?.forEach((slot) => {
+          Object.assign(slot, {
+            attestations: undefined, proposal: undefined, slashing: undefined, sync: undefined,
+          })
+        })
+      })
+    }
+
+    return data
+  }
+
+  return {
+    fetchSlotVizData,
+    slotVizData,
+  }
+}
diff --git a/frontend/pages/dashboard/[[id]]/index.vue b/frontend/pages/dashboard/[[id]]/index.vue
index 56a3fe2ea6..d316f487ea 100644
--- a/frontend/pages/dashboard/[[id]]/index.vue
+++ b/frontend/pages/dashboard/[[id]]/index.vue
@@ -81,41 +81,8 @@ const seoTitle = computed(() => {
 
 useBcSeo(seoTitle, true)
 
-const {
-  overview, refreshOverview,
-} = useValidatorDashboardOverviewStore()
 await useAsyncData('user_dashboards', () => refreshDashboards(), { watch: [ isLoggedIn ] })
 
-const { error: validatorOverviewError } = await useAsyncData(
-  'validator_overview',
-  () => refreshOverview(dashboardKey.value),
-  { watch: [ dashboardKey ] },
-)
-watch(
-  validatorOverviewError,
-  (error) => {
-    // we temporary blacklist dashboard id's that threw an error
-    if (
-      error
-      && dashboardKey.value
-      && !(
-        !!dashboards.value?.account_dashboards?.find(
-          d => d.id.toString() === dashboardKey.value,
-        )
-        || !!dashboards.value?.validator_dashboards?.find(
-          d => !d.is_archived && d.id.toString() === dashboardKey.value,
-        )
-      )
-    ) {
-      if (!errorDashboardKeys.includes(dashboardKey.value)) {
-        errorDashboardKeys.push(dashboardKey.value)
-      }
-      setDashboardKey('')
-    }
-  },
-  { immediate: true },
-)
-
 const dashboardCreationControllerModal
   = ref<typeof DashboardCreationController>()
 function showDashboardCreationDialog() {
@@ -175,6 +142,70 @@ watch(
   },
   { immediate: true },
 )
+
+// ------------------- Overview -------------------
+
+const {
+  fetchOverviewData,
+  overviewData,
+} = useValidatorDashboardOverview()
+
+async function refreshOverview() {
+  const data = await fetchOverviewData(dashboardKey.value)
+  overviewData.value = data
+}
+// ------------------- Slot Viz -------------------
+const {
+  fetchSlotVizData,
+  slotVizData,
+} = useValidatorSlotViz()
+async function refreshSlotViz(groupIds?: number[]) {
+  const data = await fetchSlotVizData(dashboardKey.value, groupIds)
+  slotVizData.value = data
+}
+// ------------------- SSR Init fetches -------------------
+// SSR fetch for overview, slot viz data and table data
+const {
+  data: ssrInitData,
+  error: ssrInitError,
+} = await useAsyncData('init_validator_dashboard_fetch', async () => {
+  if (dashboardKey.value) { // valid dashboard key: fetch all data
+    return await Promise.all([
+      fetchOverviewData(dashboardKey.value),
+      fetchSlotVizData(dashboardKey.value),
+    ])
+  }
+  else if (!isLoggedIn.value) { // empty guest dashboard: only fetch slot viz
+    return await Promise.all([
+      undefined,
+      fetchSlotVizData(dashboardKey.value),
+    ])
+  }
+  else { // logged-in user has no dashboards: fetch nothing
+    return await Promise.all([
+      undefined,
+      undefined,
+    ])
+  }
+})
+if (ssrInitError.value !== null) {
+  if (ssrInitError.value.statusCode === 404) {
+    // TODO: redirect to 404 page
+  }
+  else {
+    throw ssrInitError.value
+  }
+}
+if (ssrInitData.value !== null) {
+  overviewData.value = ssrInitData.value[0]
+  slotVizData.value = ssrInitData.value[1]
+}
+// ------------------- Mgmnt helpers -------------------
+function updateAll() {
+  refreshSlotViz()
+  refreshOverview()
+}
+provide('updateAll', updateAll)
 </script>
 
 <template>
@@ -191,12 +222,15 @@ watch(
     <BcPageWrapper>
       <template #top>
         <DashboardHeader @show-creation="showDashboardCreationDialog()" />
-        <DashboardControls :dashboard-title="overview?.name" />
-        <DashboardValidatorOverview class="overview" />
+        <DashboardControls :dashboard-title="overviewData?.name" />
+        <DashboardValidatorOverview class="overview" :overview-data />
       </template>
       <DashboardSharedDashboardModal />
       <div>
-        <DashboardValidatorSlotViz />
+        <DashboardValidatorSlotViz
+          :slot-viz-data
+          @update="refreshSlotViz"
+        />
       </div>
       <BcTabList
         :tabs default-tab="summary"