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

     1  import React, { FC, useState } from 'react';
     2  import { RouteComponentProps } from '@reach/router';
     3  import { Badge, Table } from 'reactstrap';
     4  import { TargetLabels } from './Services';
     5  import { ToggleMoreLess } from '../../components/ToggleMoreLess';
     6  import CustomInfiniteScroll, { InfiniteScrollItemsProps } from '../../components/CustomInfiniteScroll';
     7  
     8  interface LabelProps {
     9    value: TargetLabels[];
    10    name: string;
    11  }
    12  
    13  const formatLabels = (labels: Record<string, string> | string) => {
    14    return Object.entries(labels).map(([key, value]) => {
    15      return (
    16        <div key={key}>
    17          <Badge color="primary" className="mr-1">
    18            {`${key}="${value}"`}
    19          </Badge>
    20        </div>
    21      );
    22    });
    23  };
    24  
    25  const LabelsTableContent: FC<InfiniteScrollItemsProps<TargetLabels>> = ({ items }) => {
    26    return (
    27      <Table size="sm" bordered hover striped>
    28        <thead>
    29          <tr>
    30            <th>Discovered Labels</th>
    31            <th>Target Labels</th>
    32          </tr>
    33        </thead>
    34        <tbody>
    35          {items.map((_, i) => {
    36            return (
    37              <tr key={i}>
    38                <td>{formatLabels(items[i].discoveredLabels)}</td>
    39                {items[i].isDropped ? (
    40                  <td style={{ fontWeight: 'bold' }}>Dropped</td>
    41                ) : (
    42                  <td>{formatLabels(items[i].labels)}</td>
    43                )}
    44              </tr>
    45            );
    46          })}
    47        </tbody>
    48      </Table>
    49    );
    50  };
    51  
    52  export const LabelsTable: FC<RouteComponentProps & LabelProps> = ({ value, name }) => {
    53    const [showMore, setShowMore] = useState(false);
    54  
    55    return (
    56      <>
    57        <div>
    58          <ToggleMoreLess
    59            event={(): void => {
    60              setShowMore(!showMore);
    61            }}
    62            showMore={showMore}
    63          >
    64            <span className="target-head">{name}</span>
    65          </ToggleMoreLess>
    66        </div>
    67        {showMore ? <CustomInfiniteScroll allItems={value} child={LabelsTableContent} /> : null}
    68      </>
    69    );
    70  };