github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/components/withStatusIndicator.tsx (about)

     1  import React, { FC, ComponentType } from 'react';
     2  import { UncontrolledAlert } 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,>(Component: ComponentType<T>): FC<StatusIndicatorProps & T> =>
    15    ({ error, isLoading, customErrorMsg, componentTitle, ...rest }: StatusIndicatorProps) => {
    16      if (error) {
    17        return (
    18          <UncontrolledAlert color="danger">
    19            {customErrorMsg ? (
    20              customErrorMsg
    21            ) : (
    22              <>
    23                <strong>Error:</strong> Error fetching {componentTitle || Component.displayName}: {error.message}
    24              </>
    25            )}
    26          </UncontrolledAlert>
    27        );
    28      }
    29  
    30      if (isLoading) {
    31        return (
    32          <FontAwesomeIcon
    33            size="3x"
    34            icon={faSpinner}
    35            spin
    36            className="position-absolute"
    37            style={{ transform: 'translate(-50%, -50%)', top: '50%', left: '50%' }}
    38          />
    39        );
    40      }
    41      return <Component {...(rest as any)} />;
    42    };