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

     1  import React, { FC } from 'react';
     2  import { getColor, Target } from './target';
     3  import { Badge, Table } from 'reactstrap';
     4  import TargetLabels from './TargetLabels';
     5  import styles from './ScrapePoolPanel.module.css';
     6  import { formatRelative, humanizeDuration } from '../../utils';
     7  import { now } from 'moment';
     8  import EndpointLink from './EndpointLink';
     9  import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
    10  
    11  const columns = ['Endpoint', 'State', 'Labels', 'Last Scrape', 'Scrape Duration', 'Error'];
    12  
    13  interface ScrapePoolContentProps {
    14    targets: Target[];
    15  }
    16  
    17  const ScrapePoolContentTable: FC<InfiniteScrollItemsProps<Target>> = ({ items }) => {
    18    return (
    19      <Table className={styles.table} size="sm" bordered hover striped>
    20        <thead>
    21          <tr key="header">
    22            {columns.map((column) => (
    23              <th key={column}>{column}</th>
    24            ))}
    25          </tr>
    26        </thead>
    27        <tbody>
    28          {items.map((target, index) => (
    29            <tr key={index}>
    30              <td className={styles.endpoint}>
    31                <EndpointLink endpoint={target.scrapeUrl} globalUrl={target.globalUrl} />
    32              </td>
    33              <td className={styles.state}>
    34                <Badge color={getColor(target.health)}>{target.health.toUpperCase()}</Badge>
    35              </td>
    36              <td className={styles.labels}>
    37                <TargetLabels
    38                  discoveredLabels={target.discoveredLabels}
    39                  labels={target.labels}
    40                  scrapePool={target.scrapePool}
    41                  idx={index}
    42                />
    43              </td>
    44              <td className={styles['last-scrape']}>{formatRelative(target.lastScrape, now())}</td>
    45              <td className={styles['scrape-duration']}>{humanizeDuration(target.lastScrapeDuration * 1000)}</td>
    46              <td className={styles.errors}>
    47                {target.lastError ? <span className="text-danger">{target.lastError}</span> : null}
    48              </td>
    49            </tr>
    50          ))}
    51        </tbody>
    52      </Table>
    53    );
    54  };
    55  
    56  export const ScrapePoolContent: FC<ScrapePoolContentProps> = ({ targets }) => {
    57    return <CustomInfiniteScroll allItems={targets} child={ScrapePoolContentTable} />;
    58  };