prometheus

1
import React, { useState, FC } from 'react';
2
import { Button } from 'reactstrap';
3
import CopyToClipboard from 'react-copy-to-clipboard';
4

5
import { withStatusIndicator } from '../../components/withStatusIndicator';
6
import { useFetch } from '../../hooks/useFetch';
7
import { usePathPrefix } from '../../contexts/PathPrefixContext';
8
import { API_PATH } from '../../constants/constants';
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 ? 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 = () => {
47
  const pathPrefix = usePathPrefix();
48
  const { response, error } = useFetch<YamlConfig>(`${pathPrefix}/${API_PATH}/status/config`);
49
  return <ConfigContent error={error} data={response.data} />;
50
};
51

52
export default Config;
53