prometheus/web/ui/react-app/src/components/withStatusIndicator.tsx

47 lines
1.1 KiB
TypeScript
Raw Normal View History

2019-11-12 05:35:47 -08:00
import React, { FC, ComponentType } from 'react';
import { Alert } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
interface StatusIndicatorProps {
error?: Error;
isLoading?: boolean;
customErrorMsg?: JSX.Element;
2020-02-03 06:14:25 -08:00
componentTitle?: string;
2019-11-12 05:35:47 -08:00
}
export const withStatusIndicator = <T extends {}>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> => ({
error,
isLoading,
customErrorMsg,
2020-02-03 06:14:25 -08:00
componentTitle,
2019-11-12 05:35:47 -08:00
...rest
}) => {
if (error) {
return (
<Alert color="danger">
{customErrorMsg ? (
customErrorMsg
) : (
<>
2020-02-03 06:14:25 -08:00
<strong>Error:</strong> Error fetching {componentTitle || Component.displayName}: {error.message}
2019-11-12 05:35:47 -08:00
</>
)}
</Alert>
);
}
if (isLoading) {
return (
<FontAwesomeIcon
size="3x"
icon={faSpinner}
spin
className="position-absolute"
style={{ transform: 'translate(-50%, -50%)', top: '50%', left: '50%' }}
/>
);
}
return <Component {...(rest as T)} />;
};