mirror of https://github.com/prometheus/prometheus
Browse Source
* rework the target page Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * put back the URL of the endpoint Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * replace old code by the new one and change function style Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * align filter and search bar on the same row Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * remove unnecessary return Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * upgrade kvsearch to v0.3.0 Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix unit test Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * add missing style on column Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * add placeholder and autofocus Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * put back the previous table design Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix issue relative to the position of the tooltip Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix health filter Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * fix test on label tooltip Signed-off-by: Augustin Husson <husson.augustin@gmail.com> * simplify filter condition Signed-off-by: Augustin Husson <husson.augustin@gmail.com>pull/10144/head
Augustin Husson
3 years ago
committed by
GitHub
10 changed files with 258 additions and 265 deletions
@ -0,0 +1,91 @@
|
||||
import React, { FC, useEffect, useState } from 'react'; |
||||
import { getColor, Target } from './target'; |
||||
import InfiniteScroll from 'react-infinite-scroll-component'; |
||||
import { Badge, Table } from 'reactstrap'; |
||||
import TargetLabels from './TargetLabels'; |
||||
import styles from './ScrapePoolPanel.module.css'; |
||||
import { formatRelative } from '../../utils'; |
||||
import { now } from 'moment'; |
||||
import TargetScrapeDuration from './TargetScrapeDuration'; |
||||
import EndpointLink from './EndpointLink'; |
||||
|
||||
const columns = ['Endpoint', 'State', 'Labels', 'Last Scrape', 'Scrape Duration', 'Error']; |
||||
const initialNumberOfTargetsDisplayed = 50; |
||||
|
||||
interface ScrapePoolContentProps { |
||||
targets: Target[]; |
||||
} |
||||
|
||||
export const ScrapePoolContent: FC<ScrapePoolContentProps> = ({ targets }) => { |
||||
const [items, setItems] = useState<Target[]>(targets.slice(0, 50)); |
||||
const [index, setIndex] = useState<number>(initialNumberOfTargetsDisplayed); |
||||
const [hasMore, setHasMore] = useState<boolean>(targets.length > initialNumberOfTargetsDisplayed); |
||||
|
||||
useEffect(() => { |
||||
setItems(targets.slice(0, initialNumberOfTargetsDisplayed)); |
||||
setHasMore(targets.length > initialNumberOfTargetsDisplayed); |
||||
}, [targets]); |
||||
|
||||
const fetchMoreData = () => { |
||||
if (items.length === targets.length) { |
||||
setHasMore(false); |
||||
} else { |
||||
const newIndex = index + initialNumberOfTargetsDisplayed; |
||||
setIndex(newIndex); |
||||
setItems(targets.slice(0, newIndex)); |
||||
} |
||||
}; |
||||
|
||||
return ( |
||||
<InfiniteScroll |
||||
next={fetchMoreData} |
||||
hasMore={hasMore} |
||||
loader={<h4>loading...</h4>} |
||||
dataLength={items.length} |
||||
height={items.length > 25 ? '75vh' : ''} |
||||
> |
||||
<Table className={styles.table} size="sm" bordered hover striped> |
||||
<thead> |
||||
<tr key="header"> |
||||
{columns.map((column) => ( |
||||
<th key={column}>{column}</th> |
||||
))} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{items.map((target, index) => ( |
||||
<tr key={index}> |
||||
<td className={styles.endpoint}> |
||||
<EndpointLink endpoint={target.scrapeUrl} globalUrl={target.globalUrl} /> |
||||
</td> |
||||
<td className={styles.state}> |
||||
<Badge color={getColor(target.health)}>{target.health.toUpperCase()}</Badge> |
||||
</td> |
||||
<td className={styles.labels}> |
||||
<TargetLabels |
||||
discoveredLabels={target.discoveredLabels} |
||||
labels={target.labels} |
||||
scrapePool={target.scrapePool} |
||||
idx={index} |
||||
/> |
||||
</td> |
||||
<td className={styles['last-scrape']}>{formatRelative(target.lastScrape, now())}</td> |
||||
<td className={styles['scrape-duration']}> |
||||
<TargetScrapeDuration |
||||
duration={target.lastScrapeDuration} |
||||
scrapePool={target.scrapePool} |
||||
idx={index} |
||||
interval={target.scrapeInterval} |
||||
timeout={target.scrapeTimeout} |
||||
/> |
||||
</td> |
||||
<td className={styles.errors}> |
||||
{target.lastError ? <span className="text-danger">{target.lastError}</span> : null} |
||||
</td> |
||||
</tr> |
||||
))} |
||||
</tbody> |
||||
</Table> |
||||
</InfiniteScroll> |
||||
); |
||||
}; |
||||
@ -1,137 +0,0 @@
|
||||
import React from 'react'; |
||||
import { mount, shallow } from 'enzyme'; |
||||
import { targetGroups } from './__testdata__/testdata'; |
||||
import ScrapePoolPanel, { columns } from './ScrapePoolPanel'; |
||||
import { Button, Collapse, Table, Badge } from 'reactstrap'; |
||||
import { Target, getColor } from './target'; |
||||
import EndpointLink from './EndpointLink'; |
||||
import TargetLabels from './TargetLabels'; |
||||
import sinon from 'sinon'; |
||||
|
||||
describe('ScrapePoolPanel', () => { |
||||
const defaultProps = { |
||||
scrapePool: 'blackbox', |
||||
targetGroup: targetGroups.blackbox, |
||||
expanded: true, |
||||
toggleExpanded: sinon.spy(), |
||||
}; |
||||
const scrapePoolPanel = shallow(<ScrapePoolPanel {...defaultProps} />); |
||||
|
||||
it('renders a container', () => { |
||||
const div = scrapePoolPanel.find('div').filterWhere((elem) => elem.hasClass('container')); |
||||
expect(div).toHaveLength(1); |
||||
}); |
||||
|
||||
describe('Header', () => { |
||||
it('renders an anchor with up count and danger color if upCount < targetsCount', () => { |
||||
const anchor = scrapePoolPanel.find('a'); |
||||
expect(anchor).toHaveLength(1); |
||||
expect(anchor.prop('id')).toEqual('pool-blackbox'); |
||||
expect(anchor.prop('href')).toEqual('#pool-blackbox'); |
||||
expect(anchor.text()).toEqual('blackbox (2/3 up)'); |
||||
expect(anchor.prop('className')).toEqual('danger'); |
||||
}); |
||||
|
||||
it('renders an anchor with up count and normal color if upCount == targetsCount', () => { |
||||
const props = { |
||||
...defaultProps, |
||||
scrapePool: 'prometheus', |
||||
targetGroup: targetGroups.prometheus, |
||||
}; |
||||
const scrapePoolPanel = shallow(<ScrapePoolPanel {...props} />); |
||||
const anchor = scrapePoolPanel.find('a'); |
||||
expect(anchor).toHaveLength(1); |
||||
expect(anchor.prop('id')).toEqual('pool-prometheus'); |
||||
expect(anchor.prop('href')).toEqual('#pool-prometheus'); |
||||
expect(anchor.text()).toEqual('prometheus (1/1 up)'); |
||||
expect(anchor.prop('className')).toEqual('normal'); |
||||
}); |
||||
|
||||
it('renders a show more btn if collapsed', () => { |
||||
const props = { |
||||
...defaultProps, |
||||
scrapePool: 'prometheus', |
||||
targetGroup: targetGroups.prometheus, |
||||
toggleExpanded: sinon.spy(), |
||||
}; |
||||
const div = document.createElement('div'); |
||||
div.id = `series-labels-prometheus-0`; |
||||
document.body.appendChild(div); |
||||
const div2 = document.createElement('div'); |
||||
div2.id = `scrape-duration-prometheus-0`; |
||||
document.body.appendChild(div2); |
||||
const scrapePoolPanel = mount(<ScrapePoolPanel {...props} />); |
||||
|
||||
const btn = scrapePoolPanel.find(Button); |
||||
btn.simulate('click'); |
||||
expect(props.toggleExpanded.calledOnce).toBe(true); |
||||
}); |
||||
}); |
||||
|
||||
it('renders a Collapse component', () => { |
||||
const collapse = scrapePoolPanel.find(Collapse); |
||||
expect(collapse.prop('isOpen')).toBe(true); |
||||
}); |
||||
|
||||
describe('Table', () => { |
||||
it('renders a table', () => { |
||||
const table = scrapePoolPanel.find(Table); |
||||
const headers = table.find('th'); |
||||
expect(table).toHaveLength(1); |
||||
expect(headers).toHaveLength(6); |
||||
columns.forEach((col) => { |
||||
expect(headers.contains(col)); |
||||
}); |
||||
}); |
||||
|
||||
describe('for each target', () => { |
||||
const table = scrapePoolPanel.find(Table); |
||||
defaultProps.targetGroup.targets.forEach( |
||||
({ discoveredLabels, labels, scrapeUrl, lastError, health }: Target, idx: number) => { |
||||
const row = table.find('tr').at(idx + 1); |
||||
|
||||
it('renders an EndpointLink with the scrapeUrl', () => { |
||||
const link = row.find(EndpointLink); |
||||
expect(link).toHaveLength(1); |
||||
expect(link.prop('endpoint')).toEqual(scrapeUrl); |
||||
}); |
||||
|
||||
it('renders a badge for health', () => { |
||||
const td = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('state'))); |
||||
const badge = td.find(Badge); |
||||
expect(badge).toHaveLength(1); |
||||
expect(badge.prop('color')).toEqual(getColor(health)); |
||||
expect(badge.children().text()).toEqual(health.toUpperCase()); |
||||
}); |
||||
|
||||
it('renders series labels', () => { |
||||
const targetLabels = row.find(TargetLabels); |
||||
expect(targetLabels).toHaveLength(1); |
||||
expect(targetLabels.prop('discoveredLabels')).toEqual(discoveredLabels); |
||||
expect(targetLabels.prop('labels')).toEqual(labels); |
||||
}); |
||||
|
||||
it('renders last scrape time', () => { |
||||
const lastScrapeCell = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('last-scrape'))); |
||||
expect(lastScrapeCell).toHaveLength(1); |
||||
}); |
||||
|
||||
it('renders last scrape duration', () => { |
||||
const lastScrapeCell = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('scrape-duration'))); |
||||
expect(lastScrapeCell).toHaveLength(1); |
||||
}); |
||||
|
||||
it('renders a badge for Errors', () => { |
||||
const td = row.find('td').filterWhere((elem) => Boolean(elem.hasClass('errors'))); |
||||
const badge = td.find(Badge); |
||||
expect(badge).toHaveLength(lastError ? 1 : 0); |
||||
if (lastError) { |
||||
expect(badge.prop('color')).toEqual('danger'); |
||||
expect(badge.children().text()).toEqual(lastError); |
||||
} |
||||
}); |
||||
} |
||||
); |
||||
}); |
||||
}); |
||||
}); |
||||
@ -1,95 +0,0 @@
|
||||
import React, { FC } from 'react'; |
||||
import { ScrapePool, getColor } from './target'; |
||||
import { Collapse, Table, Badge } from 'reactstrap'; |
||||
import styles from './ScrapePoolPanel.module.css'; |
||||
import { Target } from './target'; |
||||
import EndpointLink from './EndpointLink'; |
||||
import TargetLabels from './TargetLabels'; |
||||
import TargetScrapeDuration from './TargetScrapeDuration'; |
||||
import { now } from 'moment'; |
||||
import { ToggleMoreLess } from '../../components/ToggleMoreLess'; |
||||
import { formatRelative } from '../../utils'; |
||||
|
||||
interface PanelProps { |
||||
scrapePool: string; |
||||
targetGroup: ScrapePool; |
||||
expanded: boolean; |
||||
toggleExpanded: () => void; |
||||
} |
||||
|
||||
export const columns = ['Endpoint', 'State', 'Labels', 'Last Scrape', 'Scrape Duration', 'Error']; |
||||
|
||||
const ScrapePoolPanel: FC<PanelProps> = ({ scrapePool, targetGroup, expanded, toggleExpanded }) => { |
||||
const modifier = targetGroup.upCount < targetGroup.targets.length ? 'danger' : 'normal'; |
||||
const id = `pool-${scrapePool}`; |
||||
const anchorProps = { |
||||
href: `#${id}`, |
||||
id, |
||||
}; |
||||
|
||||
return ( |
||||
<div className={styles.container}> |
||||
<ToggleMoreLess event={toggleExpanded} showMore={expanded}> |
||||
<a className={styles[modifier]} {...anchorProps}> |
||||
{`${scrapePool} (${targetGroup.upCount}/${targetGroup.targets.length} up)`} |
||||
</a> |
||||
</ToggleMoreLess> |
||||
<Collapse isOpen={expanded}> |
||||
<Table className={styles.table} size="sm" bordered hover striped> |
||||
<thead> |
||||
<tr key="header"> |
||||
{columns.map((column) => ( |
||||
<th key={column}>{column}</th> |
||||
))} |
||||
</tr> |
||||
</thead> |
||||
<tbody> |
||||
{targetGroup.targets.map((target: Target, idx: number) => { |
||||
const { |
||||
discoveredLabels, |
||||
labels, |
||||
scrapePool, |
||||
scrapeUrl, |
||||
globalUrl, |
||||
lastError, |
||||
lastScrape, |
||||
lastScrapeDuration, |
||||
health, |
||||
scrapeInterval, |
||||
scrapeTimeout, |
||||
} = target; |
||||
const color = getColor(health); |
||||
|
||||
return ( |
||||
<tr key={scrapeUrl}> |
||||
<td className={styles.endpoint}> |
||||
<EndpointLink endpoint={scrapeUrl} globalUrl={globalUrl} /> |
||||
</td> |
||||
<td className={styles.state}> |
||||
<Badge color={color}>{health.toUpperCase()}</Badge> |
||||
</td> |
||||
<td className={styles.labels}> |
||||
<TargetLabels discoveredLabels={discoveredLabels} labels={labels} scrapePool={scrapePool} idx={idx} /> |
||||
</td> |
||||
<td className={styles['last-scrape']}>{formatRelative(lastScrape, now())}</td> |
||||
<td className={styles['scrape-duration']}> |
||||
<TargetScrapeDuration |
||||
duration={lastScrapeDuration} |
||||
scrapePool={scrapePool} |
||||
idx={idx} |
||||
interval={scrapeInterval} |
||||
timeout={scrapeTimeout} |
||||
/> |
||||
</td> |
||||
<td className={styles.errors}>{lastError ? <span className="text-danger">{lastError}</span> : null}</td> |
||||
</tr> |
||||
); |
||||
})} |
||||
</tbody> |
||||
</Table> |
||||
</Collapse> |
||||
</div> |
||||
); |
||||
}; |
||||
|
||||
export default ScrapePoolPanel; |
||||
Loading…
Reference in new issue