RepoMirrors
/
prometheus
mirror of https://github.com/prometheus/prometheus
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

* 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 && (