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

Merge pull request #1118 from prymitive/tweak-silence

Browse Source 
chore(ui): tweak silence css for better readability
This commit is contained in:
Łukasz Mierzwa
2019-11-01 20:00:15 +00:00
committed by GitHub
parent f8e07c5547 3e9b5f6152
commit b8c11f22bd
6 changed files with 46 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.js.snap
View File

@@ -295,7 +295,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
@@ -307,10 +307,10 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
@@ -323,12 +323,12 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon 0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"

15
ui/src/Components/ManagedSilence/SilenceComment.js
View File

@@ -41,17 +41,20 @@ const SilenceComment = ({
<React.Fragment>
<div className="d-flex flex-row">
<div className="flex-shrink-0 flex-grow-0">
<FontAwesomeIcon icon={faBellSlash} className="text-muted" />
<FontAwesomeIcon
icon={faBellSlash}
className="components-managed-silence-icon text-muted"
/>
</div>
<div className="mx-2 flex-shrink-1 flex-grow-1 mw-1p">
<div
className={`font-italic text-dark ${
className={`font-italic text-dark components-managed-silence-comment ${
collapsed ? "text-truncate overflow-hidden" : ""
}`}
>
{comment}
</div>
<div className="components-managed-silence-cite">
<div className="components-managed-silence-cite mt-1">
<span className="text-muted mr-2 font-italic">
&mdash; {silence.createdBy}
</span>
@@ -59,7 +62,7 @@ const SilenceComment = ({
</div>
</div>
<div className="flex-shrink-0 flex-grow-0">
<div className="d-flex flex-column flex-sm-row justify-content-between">
<div className="d-flex flex-column flex-sm-row justify-content-between align-items-center">
<FilteringCounterBadge
alertStore={alertStore}
name="@silence_id"
@@ -70,7 +73,9 @@ const SilenceComment = ({
/>
<FontAwesomeIcon
icon={collapsed ? faChevronUp : faChevronDown}
className="my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer"
className={`components-managed-silence-icon ${alertCount &&
alertCountAlwaysVisible &&
"my-sm-auto mt-2 mb-0"} ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer`}
onClick={collapseToggle}
/>
</div>

2
ui/src/Components/ManagedSilence/SilenceDetails.js
View File

@@ -98,7 +98,7 @@ const SilenceDetails = ({
{silence.matchers.map(matcher => (
<span
key={hash(matcher)}
className="badge badge-light px-1 mr-1 components-label"
className="badge badge-primary px-1 mr-1 components-label"
>
{matcher.name}
{matcher.isRegex

20
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.js.snap
View File

@@ -8,7 +8,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
@@ -20,10 +20,10 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
@@ -36,7 +36,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
@@ -53,7 +53,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
@@ -77,7 +77,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
@@ -89,17 +89,17 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark \\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
@@ -116,7 +116,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon undefined ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"

24
ui/src/Components/ManagedSilence/__snapshots__/index.test.js.snap
View File

@@ -10,7 +10,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
@@ -22,10 +22,10 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark text-truncate overflow-hidden\\">
<div class=\\"font-italic text-dark components-managed-silence-comment text-truncate overflow-hidden\\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
@@ -48,7 +48,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
@@ -65,7 +65,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-up\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-up fa-w-14 components-managed-silence-icon my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
@@ -93,7 +93,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"bell-slash\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 text-muted\\"
class=\\"svg-inline--fa fa-bell-slash fa-w-20 components-managed-silence-icon text-muted\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 640 512\\"
@@ -105,17 +105,17 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
</svg>
</div>
<div class=\\"mx-2 flex-shrink-1 flex-grow-1 mw-1p\\">
<div class=\\"font-italic text-dark \\">
<div class=\\"font-italic text-dark components-managed-silence-comment \\">
Mocked Silence
</div>
<div class=\\"components-managed-silence-cite\\">
<div class=\\"components-managed-silence-cite mt-1\\">
<span class=\\"text-muted mr-2 font-italic\\">
— me@example.com
</span>
</div>
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between\\">
<div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
@@ -132,7 +132,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon my-sm-auto mt-2 mb-0 ml-sm-2 ml-auto mr-sm-0 mr-1 text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
@@ -255,10 +255,10 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
<div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
style=\\"min-width: 0px;\\"
>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
<span class=\\"badge badge-primary px-1 mr-1 components-label\\">
foo=bar
</span>
<span class=\\"badge badge-light px-1 mr-1 components-label\\">
<span class=\\"badge badge-primary px-1 mr-1 components-label\\">
baz=~regex
</span>
</div>

8
ui/src/Components/ManagedSilence/index.scss
View File

@@ -13,6 +13,14 @@
}
}
.components-managed-silence-icon {
height: 1.4rem;
}
.components-managed-silence-comment {
line-height: 1.4rem;
}
.components-managed-silence-cite {
font-size: 85%;
}