github/karma
1
0
Fork 0
mirror of https://github.com/prymitive/karma synced 2026-05-05 03:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore(ui): hide annotation details only when clicking on the - icon

Browse Source 
This changes handling of annotation hide/show clicks. Right now annotation details are toggled when anything inside the annotation div is clicked. With this change showing annotation details stays the same (click anywhere), but hiding those details only works when clicking the minus icon. A tooltip was added and cursor changes to pointer only when hoovering over clickable elements.

Fixes #518
This commit is contained in:
Łukasz Mierzwa
2019-03-13 18:06:15 +00:00
parent 35b3cfeeea
commit bd0a32ec8a
5 changed files with 289 additions and 219 deletions
Download Patch File Download Diff File Expand all files Collapse all files

178
ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap
View File

@@ -4,44 +4,58 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
"
<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
<div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
help:
</span>
<span class=\\"Linkify\\">
some long text
</span>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
help:
</span>
<span class=\\"Linkify\\">
some long text
</span>
</div>
</div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-6\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
hidden
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
hidden
</div>
</div>
</div>
<span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
@@ -69,7 +83,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
aria-describedby=\\"tippy-tooltip-7\\"
data-original-title=\\"This alert is inhibited by other alerts\\"
>
<span class=\\"text-nowrap text-truncate mr-1 badge badge-light\\">
@@ -92,7 +106,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -107,7 +121,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-5\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -148,44 +162,58 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
"
<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
<div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
help:
</span>
<span class=\\"Linkify\\">
some long text
</span>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
help:
</span>
<span class=\\"Linkify\\">
some long text
</span>
</div>
</div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
hidden
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
hidden
</div>
</div>
</div>
<span class=\\"components-label-with-hover text-nowrap text-truncate px-1 mr-1 badge badge-secondary cursor-pointer components-grid-alert-099c5ca6d1c92f615b13056b935d0c8dee70f18c-0988cb349635341c67d91bfe3454d2b3178c443c\\"
@@ -213,7 +241,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -228,7 +256,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">

80
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.js.snap
View File

@@ -28,49 +28,59 @@ exports[`<RenderLinkAnnotation /> matches snapshot 1`] = `
exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
"
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div title=\\"Click to show annotation value\\"
class
style=\\"display:inline\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
foo
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
foo
</div>
</div>
"
`;
exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
"
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div title=\\"Click the icon to hide annotation value\\"
class
style=\\"display:inline\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
foo:
</span>
<span class=\\"Linkify\\">
some long text
</span>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
foo:
</span>
<span class=\\"Linkify\\">
some long text
</span>
</div>
</div>
"
`;

49
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.js
View File

@@ -12,6 +12,7 @@ import { faSearchPlus } from "@fortawesome/free-solid-svg-icons/faSearchPlus";
import { faSearchMinus } from "@fortawesome/free-solid-svg-icons/faSearchMinus";
import { AlertStore } from "Stores/AlertStore";
import { TooltipWrapper } from "Components/TooltipWrapper";
import "./index.css";
@@ -36,8 +37,7 @@ const RenderNonLinkAnnotation = inject("alertStore")(
this.visible = true;
},
hide(e) {
// don't action link clicks inside Linkify
if (e.target.nodeName !== "A") this.visible = false;
this.visible = false;
}
},
{
@@ -62,30 +62,41 @@ const RenderNonLinkAnnotation = inject("alertStore")(
const { name, value } = this.props;
const className =
"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break";
"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break";
if (!this.toggle.visible) {
return (
<div className={className} onClick={this.toggle.show}>
<FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
{name}
</div>
<TooltipWrapper title="Click to show annotation value">
<div
className={`${className} cursor-pointer`}
onClick={this.toggle.show}
>
<FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
{name}
</div>
</TooltipWrapper>
);
}
return (
<div key={name} className={className} onClick={this.toggle.hide}>
<FontAwesomeIcon icon={faSearchMinus} className="mr-1" />
<span className="text-muted">{name}: </span>
<Linkify
properties={{
target: "_blank",
rel: "noopener noreferrer"
}}
>
{value}
</Linkify>
</div>
<TooltipWrapper title="Click the icon to hide annotation value">
<div key={name} className={className}>
<FontAwesomeIcon
icon={faSearchMinus}
className="mr-1 cursor-pointer"
onClick={this.toggle.hide}
/>
<span className="text-muted">{name}: </span>
<Linkify
properties={{
target: "_blank",
rel: "noopener noreferrer"
}}
>
{value}
</Linkify>
</div>
</TooltipWrapper>
);
}
}

15
ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.test.js
View File

@@ -98,27 +98,20 @@ describe("<RenderNonLinkAnnotation />", () => {
expect(link.text()).toBe("http://example.com");
});
it("clicking on + icon hides the value", () => {
it("clicking on - icon hides the value", () => {
const tree = MountedNonLinkAnnotation(true);
expect(tree.html()).toMatch(/fa-search-minus/);
expect(tree.html()).toMatch(/some long text/);
tree.find("div").simulate("click");
tree.find(".fa-search-minus").simulate("click");
expect(tree.html()).toMatch(/fa-search-plus/);
expect(tree.html()).not.toMatch(/some long text/);
});
it("clicking on a link inside annotation doesn't hide the value", () => {
const tree = MountedNonLinkAnnotationContainingLink(true);
expect(tree.html()).toMatch(/fa-search-minus/);
tree.find("a").simulate("click");
expect(tree.html()).toMatch(/fa-search-minus/);
});
it("clicking on - icon shows the value", () => {
it("clicking on + icon shows the value", () => {
const tree = MountedNonLinkAnnotation(false);
expect(tree.html()).toMatch(/fa-search-plus/);
expect(tree.html()).not.toMatch(/some long text/);
tree.find("div").simulate("click");
tree.find(".components-grid-annotation").simulate("click");
expect(tree.html()).toMatch(/fa-search-minus/);
expect(tree.html()).toMatch(/some long text/);
});

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

@@ -4,50 +4,64 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
"
<div class=\\"card-footer px-2 py-1\\">
<div class=\\"mb-1\\">
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
summary:
</span>
<span class=\\"Linkify\\">
This is summary
</span>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
summary:
</span>
<span class=\\"Linkify\\">
This is summary
</span>
</div>
</div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
hidden
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
hidden
</div>
</div>
</div>
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-1\\"
aria-describedby=\\"tippy-tooltip-3\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -62,7 +76,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-2\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -77,7 +91,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-3\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -92,7 +106,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-4\\"
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 text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -133,50 +147,64 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
"
<div class=\\"card-footer px-2 py-1\\">
<div class=\\"mb-1\\">
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-13\\"
data-original-title=\\"Click the icon to hide annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-minus\\"
class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1 cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
summary:
</span>
<span class=\\"Linkify\\">
This is summary
</span>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12H124c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h168c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
<span class=\\"text-muted\\">
summary:
</span>
<span class=\\"Linkify\\">
This is summary
</span>
</div>
</div>
<div class=\\"mr-1 mb-1 p-1 bg-light cursor-pointer d-inline-block rounded components-grid-annotation text-break\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-14\\"
data-original-title=\\"Click to show annotation value\\"
>
<div class=\\"mr-1 mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break cursor-pointer\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"search-plus\\"
class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 512 512\\"
>
</path>
</svg>
hidden
<path fill=\\"currentColor\\"
d=\\"M304 192v32c0 6.6-5.4 12-12 12h-56v56c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-56h-56c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h56v-56c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v56h56c6.6 0 12 5.4 12 12zm201 284.7L476.7 505c-9.4 9.4-24.6 9.4-33.9 0L343 405.3c-4.5-4.5-7-10.6-7-17V372c-35.3 27.6-79.7 44-128 44C93.1 416 0 322.9 0 208S93.1 0 208 0s208 93.1 208 208c0 48.3-16.4 92.7-44 128h16.3c6.4 0 12.5 2.5 17 7l99.7 99.7c9.3 9.4 9.3 24.6 0 34zM344 208c0-75.2-60.8-136-136-136S72 132.8 72 208s60.8 136 136 136 136-60.8 136-136z\\"
>
</path>
</svg>
hidden
</div>
</div>
</div>
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-9\\"
aria-describedby=\\"tippy-tooltip-15\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -191,7 +219,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-10\\"
aria-describedby=\\"tippy-tooltip-16\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -206,7 +234,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-11\\"
aria-describedby=\\"tippy-tooltip-17\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -221,7 +249,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-12\\"
aria-describedby=\\"tippy-tooltip-18\\"
data-original-title=\\"Click to only show alerts with this label or Alt+Click to hide them\\"
>
<span class=\\"components-label badge text-nowrap text-truncate mw-100 badge-warning components-label-dark components-label-with-hover\\">
@@ -273,7 +301,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
<div class
style=\\"display: inline;\\"
data-tooltipped
aria-describedby=\\"tippy-tooltip-13\\"
aria-describedby=\\"tippy-tooltip-19\\"
data-original-title=\\"Toggle silence details\\"
>
<svg aria-hidden=\\"true\\"