github.com/thanos-io/thanos@v0.32.5/pkg/ui/react-app/src/pages/config/Config.tsx (about)

     1  import React, { useState, FC } from 'react';
     2  import { RouteComponentProps } from '@reach/router';
     3  import { Button } from 'reactstrap';
     4  import CopyToClipboard from 'react-copy-to-clipboard';
     5  import PathPrefixProps from '../../types/PathPrefixProps';
     6  
     7  import { withStatusIndicator } from '../../components/withStatusIndicator';
     8  import { useFetch } from '../../hooks/useFetch';
     9  
    10  type YamlConfig = { yaml?: string };
    11  
    12  interface ConfigContentProps {
    13    error?: Error;
    14    data?: YamlConfig;
    15  }
    16  
    17  const YamlContent = ({ yaml }: YamlConfig) => <pre className="config-yaml">{yaml}</pre>;
    18  YamlContent.displayName = 'Config';
    19  
    20  const ConfigWithStatusIndicator = withStatusIndicator(YamlContent);
    21  
    22  export const ConfigContent: FC<ConfigContentProps> = ({ error, data }) => {
    23    const [copied, setCopied] = useState(false);
    24    const config = data && data.yaml;
    25    return (
    26      <>
    27        <h2>
    28          Configuration&nbsp;
    29          <CopyToClipboard
    30            text={config!}
    31            onCopy={(_, result) => {
    32              setCopied(result);
    33              setTimeout(setCopied, 1500);
    34            }}
    35          >
    36            <Button color="light" disabled={!config}>
    37              {copied ? 'Copied' : 'Copy to clipboard'}
    38            </Button>
    39          </CopyToClipboard>
    40        </h2>
    41        <ConfigWithStatusIndicator error={error} isLoading={!config} yaml={config} />
    42      </>
    43    );
    44  };
    45  
    46  const Config: FC<RouteComponentProps & PathPrefixProps> = ({ pathPrefix }) => {
    47    const { response, error } = useFetch<YamlConfig>(`${pathPrefix}/api/v1/status/config`);
    48    return <ConfigContent error={error} data={response.data} />;
    49  };
    50  
    51  export default Config;