chore!: redesigned loading of dynamic services

Author: hywax

components/Group.vue

@@ -12,11 +12,11 @@
 </template>
 
 <script setup lang="ts">
-import type { BaseService } from '~/types'
+import type { Service } from '~/types'
 
 export interface Props {
   title?: string
-  items: BaseService[]
+  items: Service[]
 }
 
 defineProps<Props>()

components/Item.vue

@@ -3,18 +3,35 @@
     <Component :is="component" v-bind="props" />
 
     <template #fallback>
-      <ServicePlaceholder />
+      <ServicePlaceholder :animate="false" />
     </template>
   </ClientOnly>
 </template>
 
 <script setup lang="ts">
-import { capitalize } from 'vue'
-import type { BaseService } from '~/types'
+import ServicePlaceholder from './service/Placeholder.vue'
+import type { Service } from '~/types'
 
-const props = defineProps<BaseService>()
+const props = defineProps<Service>()
+
+// At the moment there is a "flash" problem with the component.
+// It is necessary to fix it and remove manual mapping
+function resolveByTypeComponent(type: string) {
+  // const name = capitalize(camelize(type))
+  // return defineAsyncComponent({
+  //   loader: () => import(`~/components/service/${name}.vue`),
+  //   loadingComponent: ServicePlaceholder,
+  //   suspensible: false,
+  // })
+
+  if (type === 'ip-api') {
+    return resolveComponent('ServiceIpApi')
+  }
+
+  return resolveComponent('ServiceBase')
+}
 
 const component = props.type
-  ? defineAsyncComponent(() => import(`~/components/service/${capitalize(props.type!)}.vue`))
+  ? resolveByTypeComponent(props.type)
   : resolveComponent('ServiceBase')
 </script>

components/service/base/Index.vue

@@ -1,24 +1,25 @@
 <template>
-  <div class="p-4 flex gap-4">
+  <ServicePlaceholder v-if="loadingOverlay" />
+  <div v-else class="p-4 flex gap-4">
     <div class="flex-shrink-0 flex">
       <a :href="link" :target="target" class="self-center w-16 h-16 overflow-hidden rounded-2xl border border-fg/10 dark:border-fg/15">
-        <slot name="icon">
+        <slot name="icon" :service="data">
           <ServiceBaseIcon v-if="icon" v-bind="icon" />
         </slot>
       </a>
     </div>
     <div>
       <h3 class="text-lg mt-1 font-semibold line-clamp-1 flex gap-2 items-center">
-        <slot name="title">
+        <slot name="title" :service="data">
           <a :href="link" :target="target">{{ title }}</a>
         </slot>
-        <slot v-if="props?.status" name="status">
+        <slot v-if="status" name="status" :data="data">
           <ServiceBaseStatus :ping="data?.ping" />
         </slot>
       </h3>
 
       <p class="text-sm text-fg-dimmed line-clamp-1">
-        <slot name="description">
+        <slot name="description" :service="data">
           {{ description }}
         </slot>
       </p>
@@ -27,19 +28,27 @@
 </template>
 
 <script setup lang="ts">
-import type { BaseService } from '~/types'
-import { useServiceData } from '~/composables/services'
+import type { Service, ServiceClient } from '~/types'
 
-const props = defineProps<BaseService>()
+const props = defineProps<ServiceClient<Service>>()
 
 const { $settings } = useNuxtApp()
 const target = computed(() => props.target || $settings.behaviour.target)
 
-// Right now, queries for "base" are only needed for statuses.
-// When the situation will change it is necessary to remove/add condition for "immediate"
-const { data, pauseUpdate } = useServiceData<BaseService, { ping: { time: number, status: boolean } }>(props, {
-  immediate: props.status?.enabled || false,
+const immediate = computed(() => props.status?.enabled || !!props.type || false)
+const { data, pauseUpdate } = useServiceData<Service>(props, {
+  immediate: immediate.value,
 })
 
+const loadingOverlay = computed(() => {
+  if (props.type && !data.value) {
+    return true
+  }
+
+  return false
+})
+
+defineExpose({ data })
+
 onBeforeUnmount(pauseUpdate)
 </script>

composables/services.ts

@@ -5,12 +5,12 @@ export interface ServiceDataOptions {
   updateInterval?: number
 }
 
-export function useServiceData<T extends BaseService, R>(service: T, options?: ServiceDataOptions) {
+export function useServiceData<T extends BaseService>(service: T, options?: ServiceDataOptions): any {
   const immediate = options?.immediate || false
   const updateInterval = (options?.updateInterval || 60) * 1000
   const type = service.type || 'base'
 
-  const { data, pending, status, refresh, execute } = useFetch<R>(`/api/services/${type}`, {
+  const { data, pending, status, refresh, execute } = useFetch(`/api/services/${type}`, {
     immediate,
     query: { id: service.id },
     timeout: 15000,

server/api/services/base.ts

@@ -1,35 +1,8 @@
 import type { BaseService } from '~/types'
+import { getServiceWithDefaultData, returnServiceWithData } from '~/server/utils/services'
 
-export interface State {
-  ping: {
-    status: boolean
-    time: number
-  }
-}
+export default defineEventHandler(async (event) => {
+  const service = await getServiceWithDefaultData<BaseService>(event)
 
-export default defineEventHandler(async (event): Promise<State> => {
-  const service = await getService<BaseService>(event)
-  const state: State = {
-    ping: {
-      status: false,
-      time: -1,
-    },
-  }
-
-  if (service?.status?.enabled) {
-    try {
-      const startTime = new Date().getTime()
-      await $fetch(service.link, { timeout: 15000 })
-      const endTime = new Date().getTime()
-
-      state.ping = {
-        status: true,
-        time: endTime - startTime,
-      }
-    } catch (e) {
-      logger.error(e)
-    }
-  }
-
-  return state
+  return returnServiceWithData(service, {})
 })

server/utils/config.ts

@@ -2,11 +2,11 @@ import crypto from 'node:crypto'
 import yaml from 'yaml'
 import defu from 'defu'
 import { ZodError, z } from 'zod'
-import type { BaseService, CompleteConfig } from '~/types'
+import type { CompleteConfig, Service } from '~/types'
 
-type DraftService = Omit<BaseService, 'id'>
+type DraftService = Omit<Service, 'id'>
 
-function determineServiceId(items: DraftService[]): BaseService[] {
+function determineServiceId(items: DraftService[]): Service[] {
   return items.map((item) => ({
     id: crypto.randomUUID(),
     ...item,
@@ -137,8 +137,8 @@ export function extractSafelyConfig(config: CompleteConfig) {
 /**
  * Create Map services
  */
-export function extractServicesFromConfig(config: CompleteConfig): Record<string, BaseService> {
-  return config.services.reduce<Record<string, BaseService>>((acc, group) => {
+export function extractServicesFromConfig(config: CompleteConfig): Record<string, Service> {
+  return config.services.reduce<Record<string, Service>>((acc, group) => {
     for (const item of group.items) {
       acc[item.id] = item
     }

server/utils/services.ts

@@ -1,6 +1,27 @@
 import type { H3Event } from 'h3'
+import type { PingServiceData, ReturnServiceWithData, Service, ServiceWithDefaultData } from '~/types'
 
-export async function getService<T>(event: H3Event): Promise<T> {
+export async function pingService(url: string): Promise<PingServiceData> {
+  try {
+    const startTime = new Date().getTime()
+    await $fetch(url, { timeout: 15000 })
+    const endTime = new Date().getTime()
+
+    return {
+      status: true,
+      time: endTime - startTime,
+    }
+  } catch (e) {
+    logger.error(e)
+  }
+
+  return {
+    status: false,
+    time: 0,
+  }
+}
+
+export async function getService<T extends Service>(event: H3Event): Promise<T> {
   const { id } = getQuery<{ id?: string }>(event)
 
   if (!id) {
@@ -22,3 +43,22 @@ export async function getService<T>(event: H3Event): Promise<T> {
 
   return services[id]
 }
+
+export async function getServiceWithDefaultData<S extends Service>(event: H3Event): Promise<ServiceWithDefaultData<S>> {
+  const config = await getService<S>(event)
+  const defaultData = {
+    ping: config?.status?.enabled ? await pingService(config.link) : undefined,
+  }
+
+  return { config, defaultData }
+}
+
+export function returnServiceWithData<
+  S extends ServiceWithDefaultData<Service>,
+  D extends S['config']['server'] = S['config']['server'],
+>(service: S, data: D): ReturnServiceWithData<D, S['defaultData']> {
+  return {
+    ...service.defaultData,
+    data,
+  }
+}

types/config.d.ts

@@ -1,8 +1,8 @@
-import type { BaseService } from '~/types/services'
+import type { Service } from '~/types/services'
 
 export interface ServicesGroup {
   title?: string
-  items: BaseService[]
+  items: Service[]
 }
 
 export interface Behaviour {

types/services.d.ts

@@ -11,7 +11,7 @@ export interface ServiceIcon {
   color?: string
 }
 
-export interface BaseService {
+export interface Service {
   id: string
   type?: string
   title: string
@@ -22,4 +22,23 @@ export interface BaseService {
   status?: ServiceStatus
   options?: Record<string, string | number | boolean>
   secrets?: Record<string, string | number | boolean>
+  server?: Record<string, string | number | boolean>
 }
+
+export type ServiceClient<T> = Omit<T, 'secrets' | 'server'>
+
+export interface PingServiceData {
+  status: boolean
+  time: number
+}
+
+export interface ServiceWithDefaultData<S> {
+  config: S
+  defaultData: {
+    ping?: PingServiceData
+  }
+}
+
+export type ReturnServiceWithData<D, S extends ServiceWithDefaultData<Service>['defaultData']> = S & { data: D }
+
+export interface BaseService extends Service {}