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): use label class for silence matchers to prevent overflow

Browse Source
This commit is contained in:
Łukasz Mierzwa
2019-05-06 23:44:08 +01:00
parent 73f4a918d5
commit adc9ccc95c
3 changed files with 55 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/DeleteSilence.js
View File

@@ -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} />

60
ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap
View File

@@ -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\\"
@@ -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\\"
@@ -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\\"
@@ -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\\"
@@ -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>

35
ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js
View File

@@ -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} />
@@ -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>
);