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

feat(ui): show the number of hidden label on the overview modal

Browse Source 
We only render top 9 labels, add a counter showing how many were skipped
This commit is contained in:
Łukasz Mierzwa
2019-07-14 19:09:20 +01:00
parent b0042af41a
commit d41fbff99e
3 changed files with 370 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
ui/src/Components/OverviewModal/OverviewModalContent.js
View File

@@ -38,6 +38,11 @@ const LabelsTable = observer(({ alertStore }) => (
}
/>
))}
{nameStats.values.length > 9 ? (
<div className="components-label badge my-2 text-muted mw-100">
+{nameStats.values.length - 9} more
</div>
) : null}
</td>
</tr>
))}

11
ui/src/Components/OverviewModal/OverviewModalContent.test.js
View File

@@ -37,6 +37,17 @@ describe("<OverviewModalContent />", () => {
{ value: "bar3", raw: "foo=bar3", hits: 4, percent: 25, offset: 75 }
]
},
{
name: "bar",
hits: 20,
values: Array.from(Array(20).keys()).map(i => ({
value: `baz${i + 1}`,
raw: `bar=baz${i + 1}`,
hits: 1,
percent: 5,
offset: i * 5
}))
},
{
name: "alertname",
hits: 5,

355
ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
View File

@@ -142,6 +142,359 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
</div>
</td>
</tr>
<tr>
<td width=\\"25%\\"
class=\\"text-nowrap mw-100 p-1\\"
>
<span class=\\"badge badge-light components-label mx-0 my-1 pl-0 text-left\\">
<span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
20
</span>
bar
</span>
</td>
<td width=\\"75%\\"
class=\\"mw-100 p-1\\"
>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz1
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz2
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz3
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 10%;\\"
aria-valuenow=\\"10\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-7\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz4
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 15%;\\"
aria-valuenow=\\"15\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-8\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz5
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 20%;\\"
aria-valuenow=\\"20\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-9\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz6
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 25%;\\"
aria-valuenow=\\"25\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-10\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz7
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 30%;\\"
aria-valuenow=\\"30\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-11\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz8
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 35%;\\"
aria-valuenow=\\"35\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-12\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-warning components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
<span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
1
</span>
<span>
<span class=\\"components-label-name\\">
bar:
</span>
<span class=\\"components-label-value\\">
baz9
</span>
</span>
</span>
<div class=\\"progress components-labelWithPercent-progress mr-1\\">
<div class=\\"progress-bar bg-transparent\\"
role=\\"progressbar\\"
style=\\"width: 40%;\\"
aria-valuenow=\\"40\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
<div class=\\"progress-bar bg-success\\"
role=\\"progressbar\\"
style=\\"width: 5%;\\"
aria-valuenow=\\"5\\"
aria-valuemin=\\"0\\"
aria-valuemax=\\"100\\"
>
</div>
</div>
</div>
<div class=\\"components-label badge my-2 text-muted mw-100\\">
+11 more
</div>
</td>
</tr>
<tr>
<td width=\\"25%\\"
class=\\"text-nowrap mw-100 p-1\\"
@@ -159,7 +512,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
<div class
style=\\"display: inline-block; max-width: 100%;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
aria-describedby=\\"tippy-tooltip-13\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge badge-dark components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">