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 #154 from prymitive/fix-label-set

Browse Source 
fix(ui): move ul to a dedicated div to prevent bottom border
This commit is contained in:
Łukasz Mierzwa
2018-10-16 19:22:31 +01:00
committed by GitHub
parent 24f0b53c0b a85f3810aa
commit a09d360c7d
3 changed files with 137 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
ui/src/Components/LabelSetList/__snapshots__/index.test.js.snap
View File

@@ -6,48 +6,50 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
<p class=\\"lead text-center\\">
Affected alerts
</p>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
foo:
<div>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
foo:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label-value\\">
bar
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</span>
<span class=\\"components-label-value\\">
node_exporter
</span>
</span>
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
server1
</span>
</span>
<span class=\\"components-label-value\\">
node_exporter
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
cluster:
</span>
<span class=\\"components-label-value\\">
prod
</span>
</span>
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
server1
</span>
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
cluster:
</span>
<span class=\\"components-label-value\\">
prod
</span>
</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
"
`;

46
ui/src/Components/LabelSetList/index.js
View File

@@ -61,28 +61,30 @@ const LabelSetList = observer(
return labelsList.length > 0 ? (
<div>
<p className="lead text-center">Affected alerts</p>
<ul className="list-group list-group-flush mb-3">
{labelsList
.slice(
(this.pagination.activePage - 1) * this.maxPerPage,
this.pagination.activePage * this.maxPerPage
)
.map(labels => (
<li
key={hash(labels)}
className="list-group-item px-0 pt-2 pb-1"
>
{Object.entries(labels).map(([name, value]) => (
<StaticLabel
key={name}
alertStore={alertStore}
name={name}
value={value}
/>
))}
</li>
))}
</ul>
<div>
<ul className="list-group list-group-flush mb-3">
{labelsList
.slice(
(this.pagination.activePage - 1) * this.maxPerPage,
this.pagination.activePage * this.maxPerPage
)
.map(labels => (
<li
key={hash(labels)}
className="list-group-item px-0 pt-2 pb-1"
>
{Object.entries(labels).map(([name, value]) => (
<StaticLabel
key={name}
alertStore={alertStore}
name={name}
value={value}
/>
))}
</li>
))}
</ul>
</div>
{labelsList.length > this.maxPerPage ? (
<div className="mt-3">
<Pagination

144
ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.js.snap
View File

@@ -7,86 +7,88 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
<p class=\\"lead text-center\\">
Affected alerts
</p>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
<div>
<ul class=\\"list-group list-group-flush mb-3\\">
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
</span>
<span class=\\"components-label-value\\">
foo
</span>
</span>
<span class=\\"components-label-value\\">
foo
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</span>
<span class=\\"components-label-value\\">
foo
</span>
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
foo1
</span>
</span>
<span class=\\"components-label-value\\">
foo
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label-value\\">
foo1
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
bar1
</span>
</span>
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label-value\\">
bar
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
bar2
</span>
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
bar1
</span>
</span>
</li>
<li class=\\"list-group-item px-0 pt-2 pb-1\\">
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-dark components-label-dark\\">
<span class=\\"components-label-name\\">
alertname:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
job:
</span>
<span class=\\"components-label-value\\">
bar
</span>
</span>
<span class=\\"components-label text-nowrap text-truncate mw-100 badge badge-warning components-label-dark\\">
<span class=\\"components-label-name\\">
instance:
</span>
<span class=\\"components-label-value\\">
bar2
</span>
</span>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
"