⚡️ 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,46 +1,58 @@
-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(
+    const agent = new https.Agent({ rejectUnauthorized: false });
-      z.object({
+    const configName = getCookie('config-name');
-        url: z.string(),
+    const config = getConfig(configName?.toString() ?? 'default');
-      })
+    const app = config.apps.find((app) => app.id === input);
-    )
+    const url = app?.url;
-    .query(async ({ input }) => {
+    if (url === undefined || !app) {
-      const agent = new https.Agent({ rejectUnauthorized: false });
+      throw new TRPCError({
-      const res = await axios
+        code: 'NOT_FOUND',
-        .get(input.url, { httpsAgent: agent, timeout: 2000 })
+        message: 'App or url not found',
-        .then((response) => ({
+      });
-          status: response.status,
+    }
-          statusText: response.statusText,
+    const res = await axios
-        }))
+      .get(url, { httpsAgent: agent, timeout: 2000 })
-        .catch((error: AxiosError) => {
+      .then((response) => ({
-          if (error.response) {
+        status: response.status,
-            Consola.warn(`Unexpected response: ${error.message}`);
+        statusText: response.statusText,
+      }))
+      .catch((error: AxiosError) => {
+        if (error.response) {
+          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({
+        if (error.code === 'ECONNABORTED') {
-              code: 'TIMEOUT',
-              message: 'Request Timeout',
-            });
-          }
-
-          Consola.error(`Unexpected error: ${error.message}`);
           throw new TRPCError({
-            code: 'INTERNAL_SERVER_ERROR',
+            code: 'TIMEOUT',
-            message: 'Internal Server Error',
+            message: 'Request Timeout',
           });
+        }
+
+        Consola.error(`Unexpected response: ${error.message}`);
+        throw new TRPCError({
+          code: 'INTERNAL_SERVER_ERROR',
+          cause: app.id,
+          message: error.message,
         });
-      return res;
+      });
-    }),
+    return res;
+  }),
 });