diff --git a/src/components/Dashboard/Tiles/Apps/AppPing.tsx b/src/components/Dashboard/Tiles/Apps/AppPing.tsx index 6aaeda388..33fbf45fb 100644 --- a/src/components/Dashboard/Tiles/Apps/AppPing.tsx +++ b/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 ( { animate={pulse.animate} transition={pulse.transition} > - + {replaceDotWithIcon ? ( @@ -61,12 +56,9 @@ export const AppPing = ({ app }: AppPingProps) => { type AccessibleIndicatorPingProps = { isOnline: boolean; isFetching: boolean; -} +}; -const AccessibleIndicatorPing = ({ - isFetching, - isOnline, -}: AccessibleIndicatorPingProps) => { +const AccessibleIndicatorPing = ({ isFetching, isOnline }: AccessibleIndicatorPingProps) => { if (isOnline) { return ; } @@ -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) ?? - false; + const isActive = + (config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ?? + false; - const queryResult = api.app.ping.useQuery({ - 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, - }; + const queryResult = api.app.ping.useQuery( + { + id: app.id, + 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) + 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, - ease: 'easeInOut', - } - } -} \ No newline at end of file + duration: 2.5, + ease: 'easeInOut', + }, + }; +}; diff --git a/src/server/api/routers/app.ts b/src/server/api/routers/app.ts index f8fdfc268..43a7e53ad 100644 --- a/src/server/api/routers/app.ts +++ b/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, diff --git a/src/utils/api.ts b/src/utils/api.ts index 7a3d03785..0145a4c16 100644 --- a/src/utils/api.ts +++ b/src/utils/api.ts @@ -31,6 +31,7 @@ const getTrpcConfiguration = () => ({ }), httpBatchLink({ url: `${getBaseUrl()}/api/trpc`, + maxURLLength: 2000, }), ], });