prometheus

1
import React, { FC, ComponentType } from 'react';
2
import { Alert } from 'reactstrap';
3
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
4
import { faSpinner } from '@fortawesome/free-solid-svg-icons';
5

6
interface StatusIndicatorProps {
7
  error?: Error;
8
  isLoading?: boolean;
9
  customErrorMsg?: JSX.Element;
10
  componentTitle?: string;
11
}
12

13
export const withStatusIndicator =
14
  <T extends Record<string, any>>( // eslint-disable-line @typescript-eslint/no-explicit-any
15
    Component: ComponentType<T>
16
  ): FC<StatusIndicatorProps & T> =>
17
  ({ error, isLoading, customErrorMsg, componentTitle, ...rest }) => {
18
    if (error) {
19
      return (
20
        <Alert color="danger">
21
          {customErrorMsg ? (
22
            customErrorMsg
23
          ) : (
24
            <>
25
              <strong>Error:</strong> Error fetching {componentTitle || Component.displayName}: {error.message}
26
            </>
27
          )}
28
        </Alert>
29
      );
30
    }
31

32
    if (isLoading) {
33
      return (
34
        <FontAwesomeIcon
35
          size="3x"
36
          icon={faSpinner}
37
          spin
38
          className="position-absolute"
39
          style={{ transform: 'translate(-50%, -50%)', top: '50%', left: '50%' }}
40
        />
41
      );
42
    }
43
    return <Component {...(rest as T)} />;
44
  };
45