mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-11-09 23:24:05 -08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

React UI: Add duration, labels, annotations to alerts page (#7605)

Browse source 
* React UI: Add duration, labels, annotation to alerts page

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* lint

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* make expression shorter

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* Check for null

Signed-off-by: Julien Pivotto <roidelapluie@inuits.eu>

* Use object.keys

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

35
web/ui/react-app/src/pages/alerts/CollapsibleAlertPanel.tsx
View file

@ -5,7 +5,7 @@ import { RuleStatus } from './AlertContents';
import { Rule } from '../../types/types'; import { Rule } from '../../types/types';
import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons'; import { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { createExpressionLink, parsePrometheusFloat } from '../../utils/index'; import { createExpressionLink, parsePrometheusFloat, formatRange } from '../../utils/index';
interface CollapsibleAlertPanelProps { interface CollapsibleAlertPanelProps {
rule: Rule; rule: Rule;
@ -36,14 +36,31 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
<div> <div>
expr: <Link to={createExpressionLink(rule.query)}>{rule.query}</Link> expr: <Link to={createExpressionLink(rule.query)}>{rule.query}</Link>
</div> </div>
<div> {rule.duration > 0 && (
<div>labels:</div> <div>
<div className="ml-5">severity: {rule.labels.severity}</div> <div>for: {formatRange(rule.duration)}</div>
</div> </div>
<div> )}
<div>annotations:</div> {rule.labels && Object.keys(rule.labels).length > 0 && (
<div className="ml-5">summary: {rule.annotations.summary}</div> <div>
</div> <div>labels:</div>
{Object.entries(rule.labels).map(([key, value]) => (
<div className="ml-4" key={key}>
{key}: {value}
</div>
))}
</div>
)}
{rule.annotations && Object.keys(rule.annotations).length > 0 && (
<div>
<div>annotations:</div>
{Object.entries(rule.annotations).map(([key, value]) => (
<div className="ml-4" key={key}>
{key}: {value}
</div>
))}
</div>
)}
</code> </code>
</pre> </pre>
{rule.alerts.length > 0 && ( {rule.alerts.length > 0 && (