jazzymc/homarr
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

🐛 Fix ping not reading from correct config

Browse Source
This commit is contained in:
Meierschlumpf
2023-07-22 18:27:24 +02:00
parent 6658c05e5a
commit 1634510070
2 changed files with 108 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
src/components/Dashboard/Tiles/Apps/AppPing.tsx
View File

@@ -3,7 +3,7 @@ import { IconCheck, IconLoader, IconX } from '@tabler/icons-react';
import Consola from 'consola';
import { TargetAndTransition, Transition, motion } from 'framer-motion';
import { useTranslation } from 'next-i18next';
import { api } from '~/utils/api';
import { RouterOutputs, api } from '~/utils/api';
import { useConfigContext } from '../../../../config/provider';
import { AppType } from '../../../../types/app';
@@ -13,57 +13,19 @@ interface AppPingProps {
}
export const AppPing = ({ app }: AppPingProps) => {
const { t } = useTranslation('modules/ping');
const { config } = useConfigContext();
const active =
(config?.settings.customization.layout.enabledPing && app.network.enabledStatusChecker) ??
false;
const { data, isFetching, isError, error } = api.app.ping.useQuery(app.id, {
retry: false,
enabled: active,
select: (data) => {
const isOk = getIsOk(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,
};
},
});
if (!active) return null;
const { data, isFetching, isError, error, isActive } = usePing(app);
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 disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
const replaceDotWithIcon =
config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
const scaleAnimation = isOnline ? [1, 0.7, 1] : 1;
const animate: TargetAndTransition | undefined = disablePulse
? undefined
: {
scale: scaleAnimation,
};
const transition: Transition | undefined = disablePulse
? undefined
: {
repeat: Infinity,
duration: 2.5,
ease: 'easeInOut',
};
const label = () => {
if (isFetching) return t('states.loading');
if (isError) return error?.message;
if (data?.state === 'online') return t('states.online', { response: data?.status ?? 'N/A' });
return `${data?.statusText}: ${data?.status} (denied)`;
}
config?.settings.customization.accessibility?.replacePingDotsWithIcons ?? false;
return (
<motion.div
style={{
@@ -72,17 +34,17 @@ export const AppPing = ({ app }: AppPingProps) => {
right: replaceDotWithIcon ? 8 : 20,
zIndex: 2,
}}
animate={animate}
transition={transition}
animate={pulse.animate}
transition={pulse.transition}
>
<Tooltip
withinPortal
radius="lg"
label={label()}
label={tooltipLabel}
>
{config?.settings.customization.accessibility?.replacePingDotsWithIcons ? (
{replaceDotWithIcon ? (
<Box>
<AccessibleIndicatorPing isLoading={isFetching} isOnline={isOnline} />
<AccessibleIndicatorPing isFetching={isFetching} isOnline={isOnline} />
</Box>
) : (
<Indicator
@@ -96,27 +58,101 @@ export const AppPing = ({ app }: AppPingProps) => {
);
};
const AccessibleIndicatorPing = ({
isLoading,
isOnline,
}: {
type AccessibleIndicatorPingProps = {
isOnline: boolean;
isLoading: boolean;
}) => {
isFetching: boolean;
}
const AccessibleIndicatorPing = ({
isFetching,
isOnline,
}: AccessibleIndicatorPingProps) => {
if (isOnline) {
return <IconCheck color="green" />;
}
if (isLoading) {
if (isFetching) {
return <IconLoader />;
}
return <IconX color="red" />;
};
export const getIsOk = (app: AppType, status: number) => {
export const isStatusOk = (app: AppType, status: number) => {
if (app.network.okStatus === undefined || app.network.statusCodes.length >= 1) {
return app.network.statusCodes.includes(status.toString());
}
return app.network.okStatus.includes(status);
};
type TooltipLabelProps = {
isFetching: boolean;
isError: boolean;
data: RouterOutputs['app']['ping'] | undefined;
errorMessage: string | undefined;
}
const useTooltipLabel = ({isFetching, isError, data, errorMessage}: TooltipLabelProps) => {
const { t } = useTranslation('modules/ping');
if (isFetching) return t('states.loading');
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 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,
};
},
});
return {
...queryResult,
isActive
}
}
type PingPulse = {
animate?: TargetAndTransition;
transition?: Transition;
}
const usePingPulse = ({isOnline}: {isOnline: boolean}): PingPulse => {
const { config } = useConfigContext();
const disablePulse = config?.settings.customization.accessibility?.disablePingPulse ?? false;
if (disablePulse) {
return {};
}
return {
animate: {
scale: isOnline ? [1, 0.7, 1] : 1
},
transition: {
repeat: Infinity,
duration: 2.5,
ease: 'easeInOut',
}
}
}