github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-07 03:26:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): better display of warnings in the help tab

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-10-07 19:18:18 +01:00
parent 7d8658625f
commit 8384cbd27c
2 changed files with 53 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
ui/src/Components/MainModal/Help.js
View File

@@ -1,6 +1,9 @@
import React from "react";
import PropTypes from "prop-types";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
import { Accordion } from "Components/Accordion";
const FilterOperatorHelp = ({ operator, description, children }) => (
@@ -23,11 +26,10 @@ const FilterOperatorHelp = ({ operator, description, children }) => (
);
FilterOperatorHelp.propTypes = {
operator: PropTypes.string.isRequired,
description: PropTypes.string.isRequired,
children: PropTypes.array
description: PropTypes.string.isRequired
};
const QueryHelp = ({ title, operators, children }) => (
const QueryHelp = ({ title, operators, warning, children }) => (
<React.Fragment>
<dt>{title}</dt>
<dd className="mb-5">
@@ -39,6 +41,12 @@ const QueryHelp = ({ title, operators, children }) => (
</kbd>
))}
</div>
{warning ? (
<div className="my-1 alert alert-light">
<FontAwesomeIcon icon={faInfoCircle} className="mr-1" />
{warning}
</div>
) : null}
<div>Examples:</div>
<ul>{children}</ul>
</dd>
@@ -47,7 +55,7 @@ const QueryHelp = ({ title, operators, children }) => (
QueryHelp.propTypes = {
title: PropTypes.string.isRequired,
operators: PropTypes.arrayOf(PropTypes.string).isRequired,
children: PropTypes.array
warning: PropTypes.node
};
const FilterExample = ({ example, children }) => (
@@ -231,11 +239,9 @@ const Help = () => (
<QueryHelp
title="Match alerts based on the jira linked in the silence"
operators={["=", "!=", "=~", "!~"]}
warning="This is supported only if JIRA regexp are enabled and able to
match JIRA ids in the silence comment body."
>
<div className="text-warning">
This is supported only if JIRA regexp are enabled and able to
match JIRA ids in the silence comment body.
</div>
<FilterExample example="@silence_jira=PROJECT-123">
Match silenced alerts where detected JIRA issue id is equal to{" "}
<code>PROJECT-123</code>.
@@ -250,8 +256,11 @@ const Help = () => (
</FilterExample>
</QueryHelp>
<QueryHelp title="Limit number of displayed alerts" operators={["="]}>
<div className="text-warning">Value must be a number &gt;= 1.</div>
<QueryHelp
title="Limit number of displayed alerts"
operators={["="]}
warning="Value must be a number &gt;= 1."
>
<FilterExample example="@limit=10">
Limit number of displayed alerts to 10.
</FilterExample>

40
ui/src/Components/MainModal/__snapshots__/Help.test.js.snap
View File

@@ -685,13 +685,27 @@ exports[`<Help /> matches snapshot 1`] = `
!~
</kbd>
</div>
<div class=\\"my-1 alert alert-light\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"info-circle\\"
class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-null fa-rotate-null fa-pull-null mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
>
</path>
</svg>
This is supported only if JIRA regexp are enabled and able to match JIRA ids in the silence comment body.
</div>
<div>
Examples:
</div>
<ul>
<div class=\\"text-warning\\">
This is supported only if JIRA regexp are enabled and able to match JIRA ids in the silence comment body.
</div>
<li>
<div>
<span class=\\"badge badge-info\\">
@@ -746,13 +760,27 @@ exports[`<Help /> matches snapshot 1`] = `
=
</kbd>
</div>
<div class=\\"my-1 alert alert-light\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"info-circle\\"
class=\\"svg-inline--fa fa-info-circle fa-w-16 fa-null fa-rotate-null fa-pull-null mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z\\"
>
</path>
</svg>
Value must be a number &gt;= 1.
</div>
<div>
Examples:
</div>
<ul>
<div class=\\"text-warning\\">
Value must be a number &gt;= 1.
</div>
<li>
<div>
<span class=\\"badge badge-info\\">