Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(ui): use label class for silence matchers to prevent overflow #682

Merged
merged 1 commit into from
May 7, 2019
Merged

fix(ui): use label class for silence matchers to prevent overflow #682

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -250,7 +250,7 @@ const DeleteSilence = observer(
return (
<React.Fragment>
<span
className={`badge badge-danger px-1 cursor-pointer components-label-with-hover`}
className={`badge badge-danger cursor-pointer components-label components-label-with-hover`}
onClick={this.toggle.toggle}
>
<FontAwesomeIcon className="mr-1" icon={faTrash} />
Expand Down
60 changes: 33 additions & 27 deletions ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
</a>
</div>
<div>
<span class=\\"badge px-1 mr-1\\">
<span class=\\"badge px-1 mr-1 components-label\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
Expand All @@ -180,7 +180,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
5 hours ago
</time>
</span>
<span class=\\"badge px-1 mr-1\\">
<span class=\\"badge px-1 mr-1 components-label\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
Expand All @@ -200,7 +200,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
in 5 hours
</time>
</span>
<span class=\\"badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1\\">
<span class=\\"badge badge-secondary cursor-pointer components-label components-label-with-hover mr-1\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
Expand All @@ -217,7 +217,7 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
</svg>
Edit
</span>
<span class=\\"badge badge-danger px-1 cursor-pointer components-label-with-hover\\">
<span class=\\"badge badge-danger cursor-pointer components-label components-label-with-hover\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
Expand All @@ -235,30 +235,36 @@ exports[`<Silence /> matches snapshot with expaned details 1`] = `
Delete
</span>
</div>
<div>
<span class=\\"badge px-1 mr-1\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"filter\\"
class=\\"svg-inline--fa fa-filter fa-w-16 text-muted mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
<div class=\\"d-flex flex-row\\">
<div class=\\"flex-shrink-0 flex-grow-0\\">
<span class=\\"badge px-1 mr-1 components-label\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"filter\\"
class=\\"svg-inline--fa fa-filter fa-w-16 text-muted mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
Matchers:
</span>
<span class=\\"badge badge-light px-1 mr-1\\">
alertname=MockAlert
</span>
<span class=\\"badge badge-light px-1 mr-1\\">
instance=~foo[0-9]+
</span>
<path fill=\\"currentColor\\"
d=\\"M487.976 0H24.028C2.71 0-8.047 25.866 7.058 40.971L192 225.941V432c0 7.831 3.821 15.17 10.237 19.662l80 55.98C298.02 518.69 320 507.493 320 487.98V225.941l184.947-184.97C520.021 25.896 509.338 0 487.976 0z\\"
>
</path>
</svg>
Matchers:
</span>
</div>
<div class=\\"flex-shrink-1 flex-grow-1\\"
style=\\"min-width: 0px;\\"
>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
alertname=MockAlert
</span>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
instance=~foo[0-9]+
</span>
</div>
</div>
</div>
</div>
Expand Down
35 changes: 21 additions & 14 deletions ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,16 +126,16 @@ const SilenceDetails = ({
/>
</div>
<div>
<span className="badge px-1 mr-1">
<span className="badge px-1 mr-1 components-label">
<FontAwesomeIcon className="text-muted mr-1" icon={faCalendarCheck} />
Started <Moment fromNow>{silence.startsAt}</Moment>
</span>
<span className={`badge ${expiresClass} px-1 mr-1`}>
<span className={`badge ${expiresClass} px-1 mr-1 components-label`}>
<FontAwesomeIcon className="text-muted mr-1" icon={faCalendarTimes} />
{expiresLabel} <Moment fromNow>{silence.endsAt}</Moment>
</span>
<span
className="badge badge-secondary px-1 cursor-pointer components-label-with-hover mr-1"
className="badge badge-secondary cursor-pointer components-label components-label-with-hover mr-1"
onClick={onEditSilence}
>
<FontAwesomeIcon className="mr-1" icon={faEdit} />
Expand All @@ -147,18 +147,25 @@ const SilenceDetails = ({
silenceID={silence.id}
/>
</div>
<div>
<span className="badge px-1 mr-1">
<FontAwesomeIcon className="text-muted mr-1" icon={faFilter} />
Matchers:
</span>
{silence.matchers.map(matcher => (
<span key={hash(matcher)} className="badge badge-light px-1 mr-1">
{matcher.name}
{matcher.isRegex ? QueryOperators.Regex : QueryOperators.Equal}
{matcher.value}
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0">
<span className="badge px-1 mr-1 components-label">
<FontAwesomeIcon className="text-muted mr-1" icon={faFilter} />
Matchers:
</span>
))}
</div>
<div className="flex-shrink-1 flex-grow-1" style={{ minWidth: "0px" }}>
{silence.matchers.map(matcher => (
<span
key={hash(matcher)}
className="badge badge-light px-1 mr-1 components-label"
>
{matcher.name}
{matcher.isRegex ? QueryOperators.Regex : QueryOperators.Equal}
{matcher.value}
</span>
))}
</div>
</div>
</div>
);
Expand Down