⚡️ Improve ping function

src/components/Dashboard/Tiles/Apps/AppPing.tsx

@@ -1,10 +1,10 @@
 import { Indicator, Tooltip } from '@mantine/core';
 import Consola from 'consola';
-import { motion } from 'framer-motion';
 import { useTranslation } from 'next-i18next';
+import { api } from '~/utils/api';
+
 import { useConfigContext } from '../../../../config/provider';
 import { AppType } from '../../../../types/app';
-import { api } from '~/utils/api';
 
 interface AppPingProps {
   app: AppType;
@@ -16,60 +16,47 @@ export const AppPing = ({ app }: AppPingProps) => {
   const active =
     (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
     false;
-  const { data, isLoading, error } = usePingQuery(app, active);
+  const { data, isLoading, isFetching, isSuccess } = api.app.ping.useQuery(app.id, {
-
+    retry: false,
-  const isOnline = data?.state === 'online';
+    enabled: active,
+    select: (data) => {
+      const isOk = getIsOk(app, data.status);
+      Consola.info(`Ping ${app.name} (${app.url}) ${data.status} ${isOk}`);
+      return {
+        status: data.status,
+        state: isOk ? ('online' as const) : ('down' as const),
+        statusText: data.statusText,
+      };
+    },
+  });
 
   if (!active) return null;
 
   return (
-    <motion.div
+    <div style={{ position: 'absolute', bottom: 15, right: 15, zIndex: 2 }}>
-      style={{ position: 'absolute', bottom: 20, right: 20, zIndex: 2 }}
-      animate={{
-        scale: isOnline ? [1, 0.7, 1] : 1,
-      }}
-      transition={{ repeat: Infinity, duration: 2.5, ease: 'easeInOut' }}
-    >
       <Tooltip
         withinPortal
         radius="lg"
         label={
           isLoading
             ? t('states.loading')
-            : isOnline
+            : data?.state === 'online'
-            ? t('states.online', { response: data.status })
+            ? t('states.online', { response: data?.status ?? 'N/A' })
-            : t('states.offline', { response: data?.status ?? error?.data?.httpStatus })
+            : `${data?.statusText} ${data?.status}`
         }
       >
         <Indicator
           size={15}
-          color={isLoading ? 'yellow' : isOnline ? 'green' : 'red'}
+          processing={isSuccess}
+          color={isFetching ? 'yellow' : data?.state === 'online' ? 'green' : 'red'}
           children={null}
         />
       </Tooltip>
-    </motion.div>
+    </div>
   );
 };
 
-const usePingQuery = (app: AppType, isEnabled: boolean) =>
+export const getIsOk = (app: AppType, status: number) => {
-  api.app.ping.useQuery(
-    {
-      url: app.url,
-    },
-    {
-      enabled: isEnabled,
-      select: (data) => {
-        const statusCode = data.status;
-        const isOk = getIsOk(app, statusCode);
-        return {
-          status: statusCode,
-          state: isOk ? ('online' as const) : ('down' as const),
-        };
-      },
-    }
-  );
-
-const getIsOk = (app: AppType, status: number) => {
   if (app.network.okStatus === undefined || app.network.statusCodes.length >= 1) {
     Consola.log('Using new status codes');
     return app.network.statusCodes.includes(status.toString());

src/server/api/routers/app.ts

@@ -1,33 +1,44 @@
-import { z } from 'zod';
-import axios, { AxiosError } from 'axios';
-import https from 'https';
-import Consola from 'consola';
 import { TRPCError } from '@trpc/server';
+import axios, { AxiosError } from 'axios';
+import Consola from 'consola';
+import { getCookie } from 'cookies-next';
+import https from 'https';
+import { z } from 'zod';
+import { getIsOk } from '~/components/Dashboard/Tiles/Apps/AppPing';
+import { getConfig } from '~/tools/config/getConfig';
+import { AppType } from '~/types/app';
+
 import { createTRPCRouter, publicProcedure } from '../trpc';
 
 export const appRouter = createTRPCRouter({
-  ping: publicProcedure
+  ping: publicProcedure.input(z.string()).query(async ({ input }) => {
-    .input(
-      z.object({
-        url: z.string(),
-      })
-    )
-    .query(async ({ input }) => {
     const agent = new https.Agent({ rejectUnauthorized: false });
+    const configName = getCookie('config-name');
+    const config = getConfig(configName?.toString() ?? 'default');
+    const app = config.apps.find((app) => app.id === input);
+    const url = app?.url;
+    if (url === undefined || !app) {
+      throw new TRPCError({
+        code: 'NOT_FOUND',
+        message: 'App or url not found',
+      });
+    }
     const res = await axios
-        .get(input.url, { httpsAgent: agent, timeout: 2000 })
+      .get(url, { httpsAgent: agent, timeout: 2000 })
       .then((response) => ({
         status: response.status,
         statusText: response.statusText,
       }))
       .catch((error: AxiosError) => {
         if (error.response) {
-            Consola.warn(`Unexpected response: ${error.message}`);
+          if (getIsOk(app as AppType, error.response.status)) {
             return {
+              state: 'offline',
               status: error.response.status,
               statusText: error.response.statusText,
             };
           }
+        }
         if (error.code === 'ECONNABORTED') {
           throw new TRPCError({
             code: 'TIMEOUT',
@@ -35,10 +46,11 @@ export const appRouter = createTRPCRouter({
           });
         }
 
-          Consola.error(`Unexpected error: ${error.message}`);
+        Consola.error(`Unexpected response: ${error.message}`);
         throw new TRPCError({
           code: 'INTERNAL_SERVER_ERROR',
-            message: 'Internal Server Error',
+          cause: app.id,
+          message: error.message,
         });
       });
     return res;