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

Merge pull request #519 from prymitive/annotation-toggle

Browse Source 
chore(ui): hide annotation details only when clicking on the - icon
This commit is contained in:
Łukasz Mierzwa
2019-03-13 18:43:29 +00:00
committed by GitHub
parent 35b3cfeeea bd0a32ec8a
commit 724ddd9abb
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\\"