mudhorn/prometheus
1
0
Fork 0
mirror of https://github.com/prometheus/prometheus.git synced 2024-09-19 23:37:31 -07:00
Code Issues Actions 7 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 { faChevronDown, faChevronRight } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { createExpressionLink, parsePrometheusFloat } from '../../utils/index';
import { createExpressionLink, parsePrometheusFloat, formatRange } from '../../utils/index';
interface CollapsibleAlertPanelProps {
rule: Rule;
@ -36,14 +36,31 @@ const CollapsibleAlertPanel: FC<CollapsibleAlertPanelProps> = ({ rule, showAnnot
<div>
expr: <Link to={createExpressionLink(rule.query)}>{rule.query}</Link>
</div>
<div>
<div>labels:</div>
<div className="ml-5">severity: {rule.labels.severity}</div>
</div>
<div>
<div>annotations:</div>
<div className="ml-5">summary: {rule.annotations.summary}</div>
</div>
{rule.duration > 0 && (
<div>
<div>for: {formatRange(rule.duration)}</div>
</div>
)}
{rule.labels && Object.keys(rule.labels).length > 0 && (
<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>
</pre>
{rule.alerts.length > 0 && (