Dashboard Slot Viz get id's from url

frontend/app.vue

@@ -4,7 +4,7 @@ useHead({
   script: [
     {
       key: 'revive',
-      src: 'js/revive.min.js',
+      src: '../js/revive.min.js',
       async: false
     }
   ]

frontend/components/dashboard/ValidatorSlotViz.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 
 import { useValidatorSlotVizStore } from '~/stores/dashboard/useValidatorSlotVizStore'
+import type { DashboardKey } from '~/types/dashboard'
 
 interface Props {
-  dashboardId: number
+  dashboardKey: DashboardKey
 }
 const props = defineProps<Props>()
 const { tick } = useInterval(12000)
@@ -12,10 +13,10 @@ const store = useValidatorSlotVizStore()
 
 const { getSlotViz } = store
 const { slotViz } = storeToRefs(store)
-await useAsyncData('validator_dashboard_slot_viz', () => getSlotViz(props.dashboardId))
+await useAsyncData('validator_dashboard_slot_viz', () => getSlotViz(props.dashboardKey))
 
-watch(() => [props.dashboardId, tick.value], () => {
-  getSlotViz(props.dashboardId)
+watch(() => [props.dashboardKey, tick.value], () => {
+  getSlotViz(props.dashboardKey)
 }, { immediate: true })
 
 </script>

frontend/components/dashboard/table/DashboardTableSummary.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { DataTableSortEvent } from 'primevue/datatable'
 import type { InternalGetValidatorDashboardSummaryResponse, VDBSummaryTableRow } from '~/types/api/validator_dashboard'
+import type { DashboardKey } from '~/types/dashboard'
 import type { Cursor, TableQueryParams } from '~/types/datatable'
 
 interface Props {
-  dashboardId: number
+  dashboardKey: DashboardKey
 }
 const props = defineProps<Props>()
 
@@ -30,15 +31,15 @@ const loadData = (query?: TableQueryParams) => {
   if (!query) {
     query = { limit: pageSize.value }
   }
-  getSummary(props.dashboardId, query)
+  getSummary(props.dashboardKey, query)
 }
 
-watch(() => props.dashboardId, () => {
+watch(() => props.dashboardKey, () => {
   loadData()
 }, { immediate: true })
 
 const summary = computed<InternalGetValidatorDashboardSummaryResponse | undefined>(() => {
-  return summaryMap.value?.[props.dashboardId]
+  return summaryMap.value?.[props.dashboardKey]
 })
 
 const groupNameLabel = (groupId?: number) => {
@@ -64,21 +65,21 @@ const groupIdLabel = (groupId?: number) => {
 }
 
 const onSort = (sort: DataTableSortEvent) => {
-  loadData(setQuerySort(sort, queryMap.value[props.dashboardId]))
+  loadData(setQuerySort(sort, queryMap.value[props.dashboardKey]))
 }
 
 const setCursor = (value: Cursor) => {
   cursor.value = value
-  loadData(setQueryCursor(value, queryMap.value[props.dashboardId]))
+  loadData(setQueryCursor(value, queryMap.value[props.dashboardKey]))
 }
 
 const setPageSize = (value: number) => {
   pageSize.value = value
-  loadData(setQueryPageSize(value, queryMap.value[props.dashboardId]))
+  loadData(setQueryPageSize(value, queryMap.value[props.dashboardKey]))
 }
 
 const setSearch = (value?: string) => {
-  loadData(setQuerySearch(value, queryMap.value[props.dashboardId]))
+  loadData(setQuerySearch(value, queryMap.value[props.dashboardKey]))
 }
 
 const getRowClass = (row: VDBSummaryTableRow) => {
@@ -174,7 +175,7 @@ const getRowClass = (row: VDBSummaryTableRow) => {
               </template>
             </Column>
             <template #expansion="slotProps">
-              <DashboardTableSummaryDetails :row="slotProps.data" :dashboard-id="props.dashboardId" />
+              <DashboardTableSummaryDetails :row="slotProps.data" :dashboard-key="props.dashboardKey" />
             </template>
           </BcTable>
         </ClientOnly>

frontend/components/dashboard/table/SummaryDetails.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
 import type { VDBSummaryTableRow } from '~/types/api/validator_dashboard'
+import type { DashboardKey } from '~/types/dashboard'
 import { SummaryDetails, type SummaryDetail, type SummaryDetailsEfficiencyCombinedProp, type SummaryRow } from '~/types/dashboard/summary'
 
 interface Props {
-  dashboardId: number
+  dashboardKey: DashboardKey
   row: VDBSummaryTableRow
 }
 const props = defineProps<Props>()
@@ -14,10 +15,10 @@ const store = useValidatorDashboardSummaryDetailsStore()
 const { getKey, getDetails } = store
 const { detailsMap } = storeToRefs(store)
 
-const key = computed(() => getKey(props.dashboardId, props.row.group_id))
+const key = computed(() => getKey(props.dashboardKey, props.row.group_id))
 
 watch(key, () => {
-  getDetails(props.dashboardId, props.row.group_id)
+  getDetails(props.dashboardKey, props.row.group_id)
 }, { immediate: true })
 
 const isWideEnough = computed(() => width.value >= 1400)

frontend/components/playground/DashboardValidatorSummary.vue

@@ -5,7 +5,7 @@ await useAsyncData('validator_dashboard_overview', () => getOverview())
 
 </script>
 <template>
-  <DashboardTableSummary :dashboard-id="1" />
+  <DashboardTableSummary :dashboard-key="1" />
 </template>
 
 <style lang="scss" scoped>

frontend/composables/useCurrentAds.ts

@@ -5,15 +5,17 @@ import type { AdConfiguration } from '~/types/adConfiguration'
 export function useCurrentAds () {
   const { getAds } = useAdConfigurationStore()
   const { configurations } = storeToRefs(useAdConfigurationStore())
-  const { path } = useRoute()
+  const { path, name } = useRoute()
 
-  watch(() => path, (newPath) => {
-    getAds(newPath)
+  const pathName = computed(() => name?.toString?.() || path)
+
+  watch(pathName, (newName) => {
+    getAds(newName)
   }, { immediate: true })
 
   // TODO: also validate if user is premium user and config is not for all
   const ads = computed(() => {
-    const configs: AdConfiguration[] = configurations.value[path]?.filter(c => c.enabled) ?? []
+    const configs: AdConfiguration[] = configurations.value[pathName.value]?.filter(c => c.enabled) ?? []
     configurations.value.global?.forEach((config) => {
       if (config.enabled && !configs.find(c => c.jquery_selector === config.jquery_selector && c.insert_mode === config.insert_mode)) {
         configs.push(config)

frontend/composables/useCustomFetch.ts

@@ -37,27 +37,27 @@ function addQueryParams (path: string, query?: PathValues) {
 const mapping: Record<string, MappingData> = {
   [API_PATH.AD_CONFIGURATIONs]: {
     path: '/ad-configurations?={keys}',
-    getPath: values => `/ad-configurations?=dashboard_id}?keys=${values?.keys}`,
+    getPath: values => `/ad-configurations?keys=${values?.keys}`,
     mock: true
   },
   [API_PATH.DASHBOARD_SUMMARY_DETAILS]: {
-    path: '/validator-dashboards/{dashboard_id}/groups/{group_id}/summary',
-    getPath: values => `/validator-dashboards/${values?.dashboardId}/groups/${values?.groupId}/summary`,
+    path: '/validator-dashboards/{dashboardKey}/groups/{group_id}/summary',
+    getPath: values => `/validator-dashboards/${values?.dashboardKey}/groups/${values?.groupId}/summary`,
     mock: true
   },
   [API_PATH.DASHBOARD_SUMMARY]: {
-    path: '/validator-dashboards/{dashboard_id}/summary?',
-    getPath: values => `/validator-dashboards/${values?.dashboardId}/summary`,
+    path: '/validator-dashboards/{dashboardKey}/summary?',
+    getPath: values => `/validator-dashboards/${values?.dashboardKey}/summary`,
     mock: true
   },
   [API_PATH.DASHBOARD_OVERVIEW]: {
-    path: '/validator-dashboards/{dashboard_id}',
-    getPath: values => `/validator-dashboards/${values?.validatorId}`,
+    path: '/validator-dashboards/{dashboardKey}',
+    getPath: values => `/validator-dashboards/${values?.dashboardKey}`,
     mock: true
   },
   [API_PATH.DASHBOARD_SLOTVIZ]: {
-    path: '/validator-dashboards/{dashboard_id}/slot-viz',
-    getPath: values => `/validator-dashboards/${values?.dashboardId}/slot-viz`,
+    path: '/validator-dashboards/{dashboardKey}/slot-viz',
+    getPath: values => `/validator-dashboards/${values?.dashboardKey}/slot-viz`,
     mock: false
   },
   [API_PATH.LATEST_STATE]: {
@@ -90,7 +90,7 @@ export async function useCustomFetch<T> (pathName: PathName, options: NitroFetch
   const url = useRequestURL()
   const { public: { apiClient, legacyApiClient }, private: pConfig } = useRuntimeConfig()
   const path = addQueryParams(map.mock ? `${pathName}.json` : map.getPath?.(pathValues) || map.path, query)
-  let baseURL = map.mock ? './mock' : map.legacy ? legacyApiClient : apiClient
+  let baseURL = map.mock ? '../mock' : map.legacy ? legacyApiClient : apiClient
 
   if (process.server) {
     baseURL = map.mock ? `${url.protocol}${url.host}/mock` : map.legacy ? pConfig?.legacyApiServer : pConfig?.apiServer

frontend/pages/dashboard/[[id]]/index.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { warn } from 'vue'
 import {
   faChartLineUp,
   faCube,
@@ -11,7 +10,13 @@ import {
 
 const route = useRoute()
 
-warn(`route id: ${route.params.id}, query: ${route.query}`)
+const key = computed(() => {
+  if (Array.isArray(route.params.id)) {
+    return route.params.id.join(',')
+  }
+  return route.params.id
+})
+
 </script>
 
 <template>
@@ -23,14 +28,14 @@ warn(`route id: ${route.params.id}, query: ${route.query}`)
       <DashboardValidatorOverview class="overview" />
     </template>
     <div>
-      <DashboardValidatorSlotViz :dashboard-id="1" />
+      <DashboardValidatorSlotViz :dashboard-key="key" />
     </div>
     <TabView lazy>
       <TabPanel>
         <template #header>
           <BcTabHeader :header="$t('dashboard.validator.tabs.summary')" :icon="faChartLineUp" />
         </template>
-        <DashboardTableSummary :dashboard-id="1" />
+        <DashboardTableSummary :dashboard-key="1" />
       </TabPanel>
       <TabPanel>
         <template #header>

frontend/public/mock/adConfigurations.json

@@ -18,7 +18,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#replace_me",
     "insert_mode": "replace",
     "refresh_interval": 10,
@@ -27,7 +27,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "top",
     "insert_mode": "insert",
     "refresh_interval": 0,
@@ -36,7 +36,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#inside_me",
     "insert_mode": "insert",
     "refresh_interval": 10,
@@ -45,7 +45,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#before_me",
     "insert_mode": "before",
     "refresh_interval": 10,
@@ -54,7 +54,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#after_me",
     "insert_mode": "after",
     "refresh_interval": 10,
@@ -63,7 +63,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#around_me",
     "insert_mode": "before",
     "refresh_interval": 10,
@@ -72,7 +72,7 @@
     "enabled": true
   },
   {
-    "key": "/playground",
+    "key": "playground",
     "jquery_selector": "#around_me",
     "insert_mode": "after",
     "refresh_interval": 10,

frontend/stores/dashboard/useValidatorDashboardSummaryDetailsStore.ts

@@ -1,17 +1,18 @@
 import { defineStore } from 'pinia'
 import { useCustomFetch } from '~/composables/useCustomFetch'
 import type { VDBGroupSummaryData, InternalGetValidatorDashboardGroupSummaryResponse } from '~/types/api/validator_dashboard'
+import type { DashboardKey } from '~/types/dashboard'
 
 export const useValidatorDashboardSummaryDetailsStore = defineStore('validator_dashboard_sumary_details_store', () => {
   const detailsMap = ref < Record<string, VDBGroupSummaryData >>({})
 
-  function getKey (dashboardId: number, groupId: number) {
-    return `${dashboardId}_${groupId}`
+  function getKey (dashboardKey: DashboardKey, groupId: number) {
+    return `${dashboardKey}_${groupId}`
   }
 
-  async function getDetails (dashboardId: number, groupId: number) {
-    const res = await useCustomFetch<InternalGetValidatorDashboardGroupSummaryResponse>(API_PATH.DASHBOARD_SUMMARY_DETAILS, undefined, { dashboardId, groupId })
-    detailsMap.value = { ...detailsMap.value, [getKey(dashboardId, groupId)]: res.data }
+  async function getDetails (dashboardKey: DashboardKey, groupId: number) {
+    const res = await useCustomFetch<InternalGetValidatorDashboardGroupSummaryResponse>(API_PATH.DASHBOARD_SUMMARY_DETAILS, undefined, { dashboardKey, groupId })
+    detailsMap.value = { ...detailsMap.value, [getKey(dashboardKey, groupId)]: res.data }
     return res.data
   }
 

frontend/stores/dashboard/useValidatorDashboardSummaryStore.ts

@@ -1,21 +1,22 @@
 import { defineStore } from 'pinia'
 import { useCustomFetch } from '~/composables/useCustomFetch'
 import type { InternalGetValidatorDashboardSummaryResponse } from '~/types/api/validator_dashboard'
+import type { DashboardKey } from '~/types/dashboard'
 import type { TableQueryParams } from '~/types/datatable'
 
 export const useValidatorDashboardSummaryStore = defineStore('validator_dashboard_sumary_store', () => {
-  const summaryMap = ref < Record<number, InternalGetValidatorDashboardSummaryResponse >>({})
-  const queryMap = ref < Record<number, TableQueryParams | undefined >>({})
+  const summaryMap = ref < Record<DashboardKey, InternalGetValidatorDashboardSummaryResponse >>({})
+  const queryMap = ref < Record<DashboardKey, TableQueryParams | undefined >>({})
 
-  async function getSummary (dashboardId: number, query?: TableQueryParams) {
-    queryMap.value = { ...queryMap.value, [dashboardId]: query }
+  async function getSummary (dashboardKey: DashboardKey, query?: TableQueryParams) {
+    queryMap.value = { ...queryMap.value, [dashboardKey]: query }
 
-    const res = await useCustomFetch<InternalGetValidatorDashboardSummaryResponse>(API_PATH.DASHBOARD_SUMMARY, undefined, { dashboardId }, query)
+    const res = await useCustomFetch<InternalGetValidatorDashboardSummaryResponse>(API_PATH.DASHBOARD_SUMMARY, undefined, { dashboardKey }, query)
 
-    if (JSON.stringify(queryMap.value[dashboardId]) !== JSON.stringify(query)) {
+    if (JSON.stringify(queryMap.value[dashboardKey]) !== JSON.stringify(query)) {
       return // in case some query params change while loading
     }
-    summaryMap.value = { ...summaryMap.value, [dashboardId]: res }
+    summaryMap.value = { ...summaryMap.value, [dashboardKey]: res }
     return res
   }
 

frontend/stores/dashboard/useValidatorSlotVizStore.ts

@@ -1,11 +1,12 @@
 import { defineStore } from 'pinia'
 import { useCustomFetch } from '~/composables/useCustomFetch'
 import type { SlotVizEpoch, InternalGetValidatorDashboardSlotVizResponse } from '~/types/api/slot_viz'
+import type { DashboardKey } from '~/types/dashboard'
 
 export const useValidatorSlotVizStore = defineStore('validator_slotViz', () => {
   const slotViz = ref<SlotVizEpoch[] | undefined | null>()
-  async function getSlotViz (dashboardId: number) {
-    const res = await useCustomFetch<InternalGetValidatorDashboardSlotVizResponse>(API_PATH.DASHBOARD_SLOTVIZ, { headers: {} }, { dashboardId })
+  async function getSlotViz (dashboardKey: DashboardKey | string) {
+    const res = await useCustomFetch<InternalGetValidatorDashboardSlotVizResponse>(API_PATH.DASHBOARD_SLOTVIZ, { headers: {} }, { dashboardKey })
     slotViz.value = res.data
     return slotViz.value
   }

frontend/types/dashboard/index.ts

@@ -0,0 +1,2 @@
+// can be ether a dashboard id or a list of validators
+export type DashboardKey = number | string