refactor(dashboard): remove overview store

- removes all direct sibling dependencies on the overview (including the dashboard group composable) - introduces new validator dashboard store - dashboard modyfing actions now emit an `updateAll` event instead of directly calling `refreshOverview` See: BEDS-914
gobitfly · Nov 27, 2024 · 190d26c · 190d26c
1 parent 62054c2
commit 190d26c
Show file tree

Hide file tree

Showing 25 changed files with 144 additions and 250 deletions.
diff --git a/frontend/components/dashboard/DashboardControls.vue b/frontend/components/dashboard/DashboardControls.vue
@@ -42,7 +42,6 @@ const {
   publicEntities,
   setDashboardKey,
 } = useDashboardKey()
-const { refreshOverview } = useValidatorDashboardOverviewStore()
 const userDashboardStore = useUserDashboardStore()
 const {
   getDashboardLabel, refreshDashboards, updateHash,
@@ -59,6 +58,10 @@ const isMobile = computed(() => width.value < 520)
 const manageGroupsModalVisisble = ref(false)
 const manageValidatorsModalVisisble = ref(false)
 
+const emit = defineEmits<{
+  (e: 'updateAll'): void,
+}>()
+
 const manageButtons = computed<MenuBarEntry[] | undefined>(() => {
   if (isShared.value) {
     return undefined
@@ -342,18 +345,19 @@ const editDashboard = () => {
     onClose: (value?: DynamicDialogCloseOptions | undefined) => {
       if (value?.data === true) {
         refreshDashboards()
-        refreshOverview(dashboardKey.value)
+        emit('updateAll')
       }
     },
   })
 }
 </script>
 
 <template>
-  <DashboardGroupManagementModal v-model="manageGroupsModalVisisble" />
+  <DashboardGroupManagementModal v-model="manageGroupsModalVisisble" @update-all="emit('updateAll')" />
   <DashboardValidatorManagementModal
     v-if="dashboardType == 'validator'"
     v-model="manageValidatorsModalVisisble"
+    @update-all="emit('updateAll')"
   />
   <div class="header-row">
     <div class="h1 dashboard-title">

diff --git a/frontend/components/dashboard/DashboardValidatorManagementModal.vue b/frontend/components/dashboard/DashboardValidatorManagementModal.vue
@@ -10,7 +10,6 @@ import {
   BcPremiumModal,
   DashboardGroupSelectionDialog,
 } from '#components'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import type {
   GetValidatorDashboardValidatorsResponse,
   VDBManageValidatorsTableRow,
@@ -34,9 +33,7 @@ const dialog = useDialog()
 
 const visible = defineModel<boolean>()
 
-const {
-  overview, refreshOverview,
-} = useValidatorDashboardOverviewStore()
+const { validatorCount } = storeToRefs(useValidatorDashboardStore())
 
 const cursor = ref<Cursor>()
 const pageSize = ref<number>(25)
@@ -105,6 +102,9 @@ const mapIndexOrPubKey = (
   return [ ...new Set(validators?.map(
     validator => validator.index ?? validator.public_key)) ]
 }
+const emit = defineEmits<{
+  (e: 'updateAll'): void,
+}>()
 
 const changeGroup = async (body: ValidatorUpdateBody, groupId?: number) => {
   if (
@@ -128,7 +128,7 @@ const changeGroup = async (body: ValidatorUpdateBody, groupId?: number) => {
   )
 
   loadData()
-  refreshOverview(dashboardKey.value)
+  emit('updateAll')
 }
 
 const removeValidators = async (validators?: NumberOrString[]) => {
@@ -151,7 +151,7 @@ const removeValidators = async (validators?: NumberOrString[]) => {
   )
 
   loadData()
-  refreshOverview(dashboardKey.value)
+  emit('updateAll')
 }
 
 const { premium_perks } = useUserStore()
@@ -272,7 +272,7 @@ const removeRow = (row: VDBManageValidatorsTableRow) => {
   })
 }
 
-const totalValidators = computed(() => addUpValues(overview.value?.validators))
+const totalValidators = computed(() => validatorCount.value ?? 0)
 
 const maxValidatorsPerDashboard = computed(() =>
   isPublicDashboard.value || !user.value?.premium_perks?.validators_per_dashboard

diff --git a/frontend/components/dashboard/DashboardValidatorManagementModalSearch.vue b/frontend/components/dashboard/DashboardValidatorManagementModalSearch.vue
@@ -16,12 +16,10 @@ const { t: $t } = useTranslation()
 
 const input = defineModel<string>()
 
-const {
-  overview,
-} = useValidatorDashboardOverviewStore()
+const { chainId } = storeToRefs(useValidatorDashboardStore())
 const { chainIdByDefault } = useRuntimeConfig().public
 
-const currentDashboardNetwork = computed(() => overview.value?.network ?? chainIdByDefault)
+const currentDashboardNetwork = computed(() => chainId.value ?? chainIdByDefault)
 const {
   data,
   error,

diff --git a/frontend/components/dashboard/GroupManagementModal.vue b/frontend/components/dashboard/GroupManagementModal.vue
@@ -29,9 +29,10 @@ const {
 } = useWindowSize()
 
 const visible = defineModel<boolean>()
-
-const { refreshOverview } = useValidatorDashboardOverviewStore()
-const { groups } = useValidatorDashboardGroups()
+const emit = defineEmits<{
+  (e: 'updateAll'): void,
+}>()
+const { groups } = storeToRefs(useValidatorDashboardStore())
 const { dashboards } = storeToRefs(useUserDashboardStore())
 const { user } = useUserStore()
 
@@ -114,7 +115,7 @@ const addGroup = async () => {
     },
     { dashboardKey: dashboardKey.value },
   )
-  await refreshOverview(dashboardKey.value)
+  emit('updateAll')
   newGroupName.value = ''
 }
 
@@ -130,7 +131,7 @@ const editGroup = async (row: VDBOverviewGroup, newName?: string) => {
       groupId: row.id,
     },
   )
-  refreshOverview(dashboardKey.value)
+  emit('updateAll')
 }
 
 const removeGroupConfirmed = async (row: VDBOverviewGroup) => {
@@ -142,7 +143,7 @@ const removeGroupConfirmed = async (row: VDBOverviewGroup) => {
       groupId: row.id,
     },
   )
-  refreshOverview(dashboardKey.value)
+  emit('updateAll')
 }
 
 const removeGroup = (row: VDBOverviewGroup) => {

diff --git a/frontend/components/dashboard/ValidatorSlotViz.vue b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -4,10 +4,9 @@ import type { SlotVizEpoch } from '~/types/api/slot_viz'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
 const { t: $t } = useTranslation()
-// TODO: REMOVE THIS
 const {
-  overview, validatorCount,
-} = useValidatorDashboardOverviewStore()
+  groups: dashboardGroups, validatorCount,
+} = storeToRefs(useValidatorDashboardStore())
 const { networkInfo } = useNetworkStore()
 const selectedGroups = ref<number[]>([])
 
@@ -49,11 +48,11 @@ const initiallyHideVisible = computed(() => {
 })
 
 const groups = computed(() => {
-  if (!overview.value?.groups) {
+  if (!dashboardGroups.value) {
     return []
   }
   return orderBy(
-    overview.value.groups.filter(g => !!g.count),
+    dashboardGroups.value.filter(g => !!g.count),
     [ g => g.name.toLowerCase() ],
     'asc',
   )

diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChart.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChart.vue
@@ -54,8 +54,10 @@ const {
   secondsPerEpoch, slotToTs, tsToEpoch,
 } = useNetworkStore()
 const { dashboardKey } = useDashboardKey()
-const { overview } = useValidatorDashboardOverviewStore()
-const { groups } = useValidatorDashboardGroups()
+
+const {
+  chartHistorySeconds, groups,
+} = storeToRefs(useValidatorDashboardStore())
 const { latestState } = useLatestStateStore()
 const latestSlot = ref(latestState.value?.current_slot || 0)
 const {
@@ -101,7 +103,7 @@ const categories = computed<number[]>(() => {
     return []
   }
   const maxSeconds
-    = overview.value?.chart_history_seconds?.[aggregation.value] ?? 0
+    = chartHistorySeconds.value?.[aggregation.value] ?? 0
   if (!maxSeconds) {
     return []
   }

diff --git a/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue b/frontend/components/dashboard/chart/DashboardChartSummaryChartFilter.vue
@@ -13,10 +13,11 @@ import { getGroupLabel } from '~/utils/dashboard/group'
 
 const { t: $t } = useTranslation()
 
+const validatorDashboardStore = useValidatorDashboardStore()
 const {
-  hasAbilityCharthistory,
-  overview,
-} = useValidatorDashboardOverviewStore()
+  groups: dashboardGroups,
+  hasAbilityChartHistory,
+} = storeToRefs(validatorDashboardStore)
 
 const chartFilter = defineModel<SummaryChartFilter>({ required: true })
 
@@ -25,7 +26,7 @@ const aggregation = ref<AggregationTimeframe>(chartFilter.value.aggregation)
 
 const aggregationList = computed(() => {
   return AggregationTimeframes.map(timeframe => ({
-    disabled: !hasAbilityCharthistory.value[timeframe],
+    disabled: !hasAbilityChartHistory.value[timeframe],
     id: timeframe,
     label: $t(`time_frames.${timeframe}`),
   }))
@@ -57,11 +58,11 @@ const total = ref(
 //   || chartFilter.value.groupIds.includes(SUMMARY_CHART_GROUP_NETWORK_AVERAGE),
 // )
 const groups = computed(() => {
-  if (!overview.value?.groups) {
+  if (!dashboardGroups.value) {
     return []
   }
   return orderBy(
-    overview.value.groups.filter(g => !!g.count),
+    dashboardGroups.value.filter(g => !!g.count),
     [ g => g.name.toLowerCase() ],
     'asc',
   )

diff --git a/frontend/components/dashboard/chart/RewardsChart.vue b/frontend/components/dashboard/chart/RewardsChart.vue
@@ -89,7 +89,7 @@ useAsyncData(
   },
 )
 
-const { groups } = useValidatorDashboardGroups()
+const { groups } = storeToRefs(useValidatorDashboardStore())
 
 const { t: $t } = useTranslation()
 const colorMode = useColorMode()

diff --git a/frontend/components/dashboard/group/GroupSelection.vue b/frontend/components/dashboard/group/GroupSelection.vue
@@ -9,7 +9,7 @@ const props = defineProps<Props>()
 
 const emit = defineEmits<{ (e: 'setGroup', value: number): void }>()
 
-const { groups } = useValidatorDashboardGroups()
+const { groups } = storeToRefs(useValidatorDashboardStore())
 
 const list = computed<VDBOverviewGroup[]>(() => {
   if (props.includeAll) {

diff --git a/frontend/components/dashboard/table/DashboardTableBlocks.vue b/frontend/components/dashboard/table/DashboardTableBlocks.vue
@@ -4,7 +4,6 @@ import type { VDBBlocksTableRow } from '~/types/api/validator_dashboard'
 import type {
   Cursor, TableQueryParams,
 } from '~/types/datatable'
-import { useValidatorDashboardBlocksStore } from '~/stores/dashboard/useValidatorDashboardBlocksStore'
 import { BcFormatHash } from '#components'
 import { getGroupLabel } from '~/utils/dashboard/group'
 
@@ -28,10 +27,9 @@ const {
   value: query,
 } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 
-const { groups } = useValidatorDashboardGroups()
 const {
-  hasValidators, overview,
-} = useValidatorDashboardOverviewStore()
+  groups, hasValidators,
+} = storeToRefs(useValidatorDashboardStore())
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -59,10 +57,7 @@ const loadData = (query?: TableQueryParams) => {
 }
 
 watch(
-  [
-    dashboardKey,
-    overview,
-  ],
+  [ dashboardKey ],
   () => {
     loadData()
   },

diff --git a/frontend/components/dashboard/table/DashboardTableClDeposits.vue b/frontend/components/dashboard/table/DashboardTableClDeposits.vue
@@ -4,9 +4,7 @@ import type { VDBConsensusDepositsTableRow } from '~/types/api/validator_dashboa
 import type {
   Cursor, TableQueryParams,
 } from '~/types/datatable'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
-import { useValidatorDashboardClDepositsStore } from '~/stores/dashboard/useValidatorDashboardClDepositsStore'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 
 const { dashboardKey } = useDashboardKey()
@@ -33,9 +31,8 @@ const {
 >(undefined, 500)
 
 const {
-  hasValidators, overview,
-} = useValidatorDashboardOverviewStore()
-const { groups } = useValidatorDashboardGroups()
+  groups, hasValidators,
+} = storeToRefs(useValidatorDashboardStore())
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -57,10 +54,7 @@ const loadData = (query?: TableQueryParams) => {
 }
 
 watch(
-  [
-    dashboardKey,
-    overview,
-  ],
+  [ dashboardKey ],
   () => {
     loadData()
     getTotalAmount(dashboardKey.value)

diff --git a/frontend/components/dashboard/table/DashboardTableElDeposits.vue b/frontend/components/dashboard/table/DashboardTableElDeposits.vue
@@ -4,9 +4,7 @@ import type { VDBExecutionDepositsTableRow } from '~/types/api/validator_dashboa
 import type {
   Cursor, TableQueryParams,
 } from '~/types/datatable'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
-import { useValidatorDashboardElDepositsStore } from '~/stores/dashboard/useValidatorDashboardElDepositsStore'
 
 const { dashboardKey } = useDashboardKey()
 
@@ -30,9 +28,8 @@ const {
 >(undefined, 500)
 
 const {
-  hasValidators, overview,
-} = useValidatorDashboardOverviewStore()
-const { groups } = useValidatorDashboardGroups()
+  groups, hasValidators,
+} = storeToRefs(useValidatorDashboardStore())
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -56,10 +53,7 @@ const loadData = (query?: TableQueryParams) => {
 }
 
 watch(
-  [
-    dashboardKey,
-    overview,
-  ],
+  [ dashboardKey ],
   () => {
     loadData()
     getTotalAmount(dashboardKey.value)

diff --git a/frontend/components/dashboard/table/DashboardTableRewards.vue b/frontend/components/dashboard/table/DashboardTableRewards.vue
@@ -9,10 +9,8 @@ import {
   DAHSHBOARDS_NEXT_EPOCH_ID,
 } from '~/types/dashboard'
 import { totalElCl } from '~/utils/bigMath'
-import { useValidatorDashboardRewardsStore } from '~/stores/dashboard/useValidatorDashboardRewardsStore'
 import { getGroupLabel } from '~/utils/dashboard/group'
 import { formatRewardValueOption } from '~/utils/dashboard/table'
-import { useValidatorDashboardOverviewStore } from '~/stores/dashboard/useValidatorDashboardOverviewStore'
 
 const {
   dashboardKey, isPublic,
@@ -35,10 +33,9 @@ const {
 } = useDebounceValue<TableQueryParams | undefined>(undefined, 500)
 const { slotViz } = useValidatorSlotVizStore()
 
-const { groups } = useValidatorDashboardGroups()
 const {
-  hasValidators, overview,
-} = useValidatorDashboardOverviewStore()
+  groups, hasValidators,
+} = storeToRefs(useValidatorDashboardStore())
 
 const { width } = useWindowSize()
 const colsVisible = computed(() => {
@@ -61,10 +58,7 @@ const loadData = (query?: TableQueryParams) => {
 }
 
 watch(
-  [
-    dashboardKey,
-    overview,
-  ],
+  [ dashboardKey ],
   () => {
     loadData()
   },