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

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

@@ -16,13 +16,12 @@ 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 });
 
   if (!isActive) return null;
 
-
   const replaceDotWithIcon =
     config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
 
@@ -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,7 +82,7 @@ type TooltipLabelProps = {
   isError: boolean;
   data: RouterOutputs['app']['ping'] | undefined;
   errorMessage: string | undefined;
-}
+};
 
 const useTooltipLabel = ({ isFetching, isError, data, errorMessage }: TooltipLabelProps) => {
   const { t } = useTranslation('modules/ping');
@@ -99,19 +91,32 @@ const useTooltipLabel = ({isFetching, isError, data, errorMessage}: TooltipLabel
   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 =
+    (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 ?? ''
+      configName: name ?? '',
-  }, {
+    },
+    {
       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)
@@ -124,18 +129,19 @@ const usePing = (app: AppType) => {
           statusText: data.statusText,
         };
       },
-  });
+    }
+  );
 
   return {
     ...queryResult,
-    isActive
+    isActive,
-  }
+  };
-}
+};
 
 type PingPulse = {
   animate?: TargetAndTransition;
   transition?: Transition;
-}
+};
 
 const usePingPulse = ({ isOnline }: { isOnline: boolean }): PingPulse => {
   const { config } = useConfigContext();
@@ -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,
       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,
     }),
   ],
 });