🐛 Fix issues with URL being too long when pinging many apps (#1264)

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

@@ -16,16 +16,15 @@ export const AppPing = ({ app }: AppPingProps) => {
   const { config } = useConfigContext();
 
   const { data, isFetching, isError, error, isActive } = usePing(app);
-  const tooltipLabel = useTooltipLabel({isFetching, isError, data, errorMessage: error?.message})
+  const tooltipLabel = useTooltipLabel({ isFetching, isError, data, errorMessage: error?.message });
   const isOnline = isError ? false : data?.state === 'online';
-  const pulse = usePingPulse({isOnline});
+  const pulse = usePingPulse({ isOnline });
 
   if (!isActive) return null;
 
-
   const replaceDotWithIcon =
-  config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
+    config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
-  
+
   return (
     <motion.div
       style={{
@@ -37,11 +36,7 @@ export const AppPing = ({ app }: AppPingProps) => {
       animate={pulse.animate}
       transition={pulse.transition}
     >
-      <Tooltip
+      <Tooltip withinPortal radius="lg" label={tooltipLabel}>
-        withinPortal
-        radius="lg"
-        label={tooltipLabel}
-      >
         {replaceDotWithIcon ? (
           <Box>
             <AccessibleIndicatorPing isFetching={isFetching} isOnline={isOnline} />
@@ -61,12 +56,9 @@ export const AppPing = ({ app }: AppPingProps) => {
 type AccessibleIndicatorPingProps = {
   isOnline: boolean;
   isFetching: boolean;
-}
+};
 
-const AccessibleIndicatorPing = ({
+const AccessibleIndicatorPing = ({ isFetching, isOnline }: AccessibleIndicatorPingProps) => {
-  isFetching,
-  isOnline,
-}: AccessibleIndicatorPingProps) => {
   if (isOnline) {
     return <IconCheck color="green" />;
   }
@@ -90,54 +82,68 @@ type TooltipLabelProps = {
   isError: boolean;
   data: RouterOutputs['app']['ping'] | undefined;
   errorMessage: string | undefined;
-}
+};
 
-const useTooltipLabel = ({isFetching, isError, data, errorMessage}: TooltipLabelProps) => {
+const useTooltipLabel = ({ isFetching, isError, data, errorMessage }: TooltipLabelProps) => {
   const { t } = useTranslation('modules/ping');
 
   if (isFetching) return t('states.loading');
-  if (isError) return  errorMessage;
+  if (isError) return errorMessage;
   if (data?.state === 'online') return t('states.online', { response: data?.status ?? 'N/A' });
   return `${data?.statusText}: ${data?.status} (denied)`;
-}
+};
 
 const usePing = (app: AppType) => {
   const { config, name } = useConfigContext();
-  const isActive = (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
+  const isActive =
-  false;
+    (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
+    false;
 
-  const queryResult = api.app.ping.useQuery({
+  const queryResult = api.app.ping.useQuery(
-    id: app.id,
+    {
-    configName: name ?? ''
+      id: app.id,
-  }, {
+      configName: name ?? '',
-    retry: false,
-    enabled: isActive,
-    select: (data) => {
-      const isOk = isStatusOk(app, data.status);
-      if (isOk)
-        Consola.info(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Accepted)`);
-      else
-        Consola.warn(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Refused)`);
-      return {
-        status: data.status,
-        state: isOk ? ('online' as const) : ('down' as const),
-        statusText: data.statusText,
-      };
     },
-  });
+    {
+      retry: false,
+      refetchOnWindowFocus: false,
+      retryDelay(failureCount, error) {
+        // TODO: Add logic to retry on timeout
+        return 3000;
+      },
+      // 5 minutes of cache
+      cacheTime: 1000 * 60 * 5,
+      staleTime: 1000 * 60 * 5,
+      retryOnMount: true,
+      enabled: isActive,
+
+      select: (data) => {
+        const isOk = isStatusOk(app, data.status);
+        if (isOk)
+          Consola.info(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Accepted)`);
+        else
+          Consola.warn(`Ping of app "${app.name}" (${app.url}) returned ${data.status} (Refused)`);
+        return {
+          status: data.status,
+          state: isOk ? ('online' as const) : ('down' as const),
+          statusText: data.statusText,
+        };
+      },
+    }
+  );
 
   return {
     ...queryResult,
-    isActive
+    isActive,
-  }
+  };
-}
+};
 
 type PingPulse = {
   animate?: TargetAndTransition;
   transition?: Transition;
-}
+};
 
-const usePingPulse = ({isOnline}: {isOnline: boolean}): PingPulse => {
+const usePingPulse = ({ isOnline }: { isOnline: boolean }): PingPulse => {
   const { config } = useConfigContext();
   const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
 
@@ -147,12 +153,12 @@ const usePingPulse = ({isOnline}: {isOnline: boolean}): PingPulse => {
 
   return {
     animate: {
-      scale: isOnline ? [1, 0.7, 1] : 1
+      scale: isOnline ? [1, 0.7, 1] : 1,
     },
     transition: {
       repeat: Infinity,
-        duration: 2.5,
+      duration: 2.5,
-        ease: 'easeInOut',
+      ease: 'easeInOut',
-    }
+    },
-  }
+  };
-}
+};

src/server/api/routers/app.ts

@@ -23,11 +23,11 @@ export const appRouter = createTRPCRouter({
       throw new TRPCError({
         code: 'NOT_FOUND',
         cause: input,
-        message: `App ${input} was not found`,
+        message: `App ${input.id} was not found`,
       });
     }
     const res = await axios
-      .get(app.url, { httpsAgent: agent, timeout: 2000 })
+      .get(app.url, { httpsAgent: agent, timeout: 10000 })
       .then((response) => ({
         status: response.status,
         statusText: response.statusText,

src/utils/api.ts

@@ -31,6 +31,7 @@ const getTrpcConfiguration = () => ({
     }),
     httpBatchLink({
       url: `${getBaseUrl()}/api/trpc`,
+      maxURLLength: 2000,
     }),
   ],
 });