prometheus

1
import React, { FC, useCallback, useState } from 'react';
2
import ScrapePoolList, { ScrapePoolNamesListProps } from './ScrapePoolList';
3
import { API_PATH } from '../../constants/constants';
4
import { usePathPrefix } from '../../contexts/PathPrefixContext';
5
import { useFetch } from '../../hooks/useFetch';
6
import { withStatusIndicator } from '../../components/withStatusIndicator';
7
import { setQueryParam, getQueryParam } from '../../utils/index';
8

9
const ScrapePoolListWithStatusIndicator = withStatusIndicator(ScrapePoolList);
10

11
const scrapePoolQueryParam = 'scrapePool';
12

13
const Targets: FC = () => {
14
  // get the initial name of selected scrape pool from query args
15
  const scrapePool = getQueryParam(scrapePoolQueryParam) || null;
16

17
  const [selectedPool, setSelectedPool] = useState<string | null>(scrapePool);
18

19
  const onPoolSelect = useCallback(
20
    (name: string) => {
21
      setSelectedPool(name);
22
      setQueryParam(scrapePoolQueryParam, name);
23
    },
24
    [setSelectedPool]
25
  );
26

27
  const pathPrefix = usePathPrefix();
28
  const { response, error, isLoading } = useFetch<ScrapePoolNamesListProps>(`${pathPrefix}/${API_PATH}/scrape_pools`);
29
  const { status: responseStatus } = response;
30
  const badResponse = responseStatus !== 'success' && responseStatus !== 'start fetching';
31

32
  return (
33
    <>
34
      <h2>Targets</h2>
35
      <ScrapePoolListWithStatusIndicator
36
        error={badResponse ? new Error(responseStatus) : error}
37
        isLoading={isLoading}
38
        componentTitle="Targets"
39
        selectedPool={selectedPool}
40
        onPoolSelect={onPoolSelect}
41
        {...response.data}
42
      />
43
    </>
44
  );
45
};
46

47
export default Targets;
48