mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2025-03-05 20:59:13 -08:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

React UI: Multiple improvements on /rules page (#7606)

Browse source 
* Add duration on rules page, hide annotation and labels if empty

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>
This commit is contained in:
Julien Pivotto 2020-07-21 11:55:09 +02:00 committed by GitHub
parent fe8d412ce9
commit 38fec5345d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 20 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
web/ui/react-app/src/pages/rules/RulesContent.tsx
View file

@ -3,7 +3,7 @@ import { RouteComponentProps } from '@reach/router';
import { APIResponse } from '../../hooks/useFetch';
import { Alert, Table, Badge } from 'reactstrap';
import { Link } from '@reach/router';
import { formatRelative, createExpressionLink, humanizeDuration } from '../../utils';
import { formatRelative, createExpressionLink, humanizeDuration, formatRange } from '../../utils';
import { Rule } from '../../types/types';
import { now } from 'moment';
@ -23,12 +23,12 @@ export interface RulesMap {
groups: RuleGroup[];
}
const GraphExpressionLink: FC<{ expr: string; title: string }> = props => {
const GraphExpressionLink: FC<{ expr: string; text: string; title: string }> = props => {
return (
<>
<strong>{props.title}:</strong>
<Link className="ml-4" to={createExpressionLink(props.expr)}>
{props.expr}
{props.text}
</Link>
<br />
</>
@ -83,10 +83,19 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
{g.rules.map((r, i) => {
return (
<tr key={i}>
{r.alerts ? (
<td style={{ backgroundColor: '#F5F5F5' }} className="rule_cell">
<GraphExpressionLink title="alert" expr={r.name} />
<GraphExpressionLink title="expr" expr={r.query} />
{r.alerts ? (
<GraphExpressionLink title="alert" text={r.name} expr={`ALERTS{alertname="${r.name}"}`} />
) : (
<GraphExpressionLink title="record" text={r.name} expr={r.name} />
)}
<GraphExpressionLink title="expr" text={r.query} expr={r.query} />
{r.duration > 0 && (
<div>
<strong>for:</strong> {formatRange(r.duration)}
</div>
)}
{r.labels && Object.keys(r.labels).length > 0 && (
<div>
<strong>labels:</strong>
{Object.entries(r.labels).map(([key, value]) => (
@ -95,6 +104,8 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
</div>
))}
</div>
)}
{r.alerts && r.annotations && Object.keys(r.annotations).length > 0 && (
<div>
<strong>annotations:</strong>
{Object.entries(r.annotations).map(([key, value]) => (
@ -103,13 +114,8 @@ export const RulesContent: FC<RouteComponentProps & RulesContentProps> = ({ resp
</div>
))}
</div>
</td>
) : (
<td style={{ backgroundColor: '#F5F5F5' }}>
<GraphExpressionLink title="record" expr={r.name} />
<GraphExpressionLink title="expr" expr={r.query} />
</td>
)}
</td>
<td>
<Badge color={getBadgeColor(r.health)}>{r.health.toUpperCase()}</Badge>
</td>