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

fix(ui): use bigger icons for alert group header

Browse Source 
Fixes #2106
This commit is contained in:
Łukasz Mierzwa
2020-09-07 17:20:49 +01:00
committed by Łukasz Mierzwa
parent 4f8122c523
commit 6e6cb02156
20 changed files with 228 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap
View File

@@ -265,21 +265,23 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<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-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>

6
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx
View File

@@ -12,7 +12,7 @@ import copy from "copy-to-clipboard";
import { Manager, Reference, Popper } from "react-popper";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEllipsisV } from "@fortawesome/free-solid-svg-icons/faEllipsisV";
import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
import { faShareSquare } from "@fortawesome/free-solid-svg-icons/faShareSquare";
import { faBellSlash } from "@fortawesome/free-solid-svg-icons/faBellSlash";
@@ -160,10 +160,10 @@ const GroupMenu: FC<{
onClick={toggle}
className={`${
themed ? "text-white" : "text-muted"
} cursor-pointer badge pl-0 pr-3 pr-sm-2 components-label mr-0`}
} cursor-pointer badge components-label components-label-with-hover with-click mr-1`}
data-toggle="dropdown"
>
<FontAwesomeIcon icon={faEllipsisV} />
<FontAwesomeIcon icon={faBars} />
</span>
)}
</Reference>

2
ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx
View File

@@ -104,7 +104,7 @@ const GroupHeader: FC<{
<span
className={`${
themedCounters ? "text-muted" : "text-white"
} cursor-pointer badge px-0 components-label mr-0 pl-2 pl-sm-1`}
} cursor-pointer badge components-label components-label-with-hover with-click`}
onClick={onCollapseClick}
>
<TooltipWrapper title="Click to toggle this group details or Alt+Click to toggle all groups">

30
ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap
View File

@@ -36,21 +36,23 @@ exports[`<RenderSilence /> renders ManagedSilence if silence is present in Alert
</div>
<div class=\\"flex-shrink-0 flex-grow-0\\">
<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-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>

6
ui/src/Components/Grid/AlertGrid/AlertGroup/index.tsx
View File

@@ -25,7 +25,11 @@ const LoadButton: FC<{
}> = ({ icon, action, tooltip }) => {
return (
<TooltipWrapper title={tooltip}>
<button type="button" className="btn btn-sm py-0" onClick={action}>
<button
type="button"
className="btn btn-sm py-0 with-click"
onClick={action}
>
<FontAwesomeIcon className="text-muted" icon={icon} />
</button>
</TooltipWrapper>

2
ui/src/Components/Grid/AlertGrid/Swimlane.tsx
View File

@@ -56,7 +56,7 @@ const Swimlane: FC<{
alertStore={alertStore}
/>
<span
className="text-muted cursor-pointer badge px-0 components-label ml-2 mr-1"
className="text-muted cursor-pointer badge with-click with-click-dark components-label ml-2 mr-1"
onClick={onToggle}
>
<TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">

14
ui/src/Components/ManagedSilence/SilenceComment.tsx
View File

@@ -87,13 +87,13 @@ const SilenceComment: FC<{
defaultColor="primary"
isAppend={false}
/>
<ToggleIcon
isOpen={!collapsed}
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}
/>
<span className="badge components-label with-click">
<ToggleIcon
isOpen={!collapsed}
className="components-managed-silence-icon m-auto text-muted cursor-pointer"
onClick={collapseToggle}
/>
</span>
</div>
</div>
</div>

120
ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap
View File

@@ -49,21 +49,23 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>
@@ -122,21 +124,23 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>
@@ -179,21 +183,23 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>
@@ -236,21 +242,23 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>

60
ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap
View File

@@ -51,21 +51,23 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 fa-rotate-180 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>
@@ -112,21 +114,23 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
123
</span>
</div>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
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\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
<span class=\\"badge components-label with-click\\">
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
data-prefix=\\"fas\\"
data-icon=\\"chevron-down\\"
class=\\"svg-inline--fa fa-chevron-down fa-w-14 components-managed-silence-icon m-auto text-muted cursor-pointer\\"
role=\\"img\\"
xmlns=\\"http://www.w3.org/2000/svg\\"
viewbox=\\"0 0 448 512\\"
style=\\"transition: transform 0.25s ease-in-out;\\"
>
</path>
</svg>
<path fill=\\"currentColor\\"
d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
>
</path>
</svg>
</span>
</div>
</div>
</div>

10
ui/src/Components/OverviewModal/OverviewModalContent.test.tsx
View File

@@ -107,14 +107,14 @@ describe("<OverviewModalContent />", () => {
];
const tree = MountedOverviewModalContent();
expect(tree.find("span.components-label")).toHaveLength(2);
expect(tree.find("span.components-label")).toHaveLength(2 + 1); // +1 for toggle icon
expect(tree.find("span.components-label").at(0).text()).toBe("5foo");
expect(tree.find("span.components-label").at(1).text()).toBe("5foo: bar");
tree.find("svg.cursor-pointer").simulate("click");
tree.find("span.badge.cursor-pointer.with-click").simulate("click");
expect(tree.find("span.components-label")).toHaveLength(4);
expect(tree.find("span.components-label").at(2).text()).toBe("3bar");
expect(tree.find("span.components-label").at(3).text()).toBe("3bar: foo");
expect(tree.find("span.components-label")).toHaveLength(4 + 1); // +1 for toggle icon
expect(tree.find("span.components-label").at(3).text()).toBe("3bar");
expect(tree.find("span.components-label").at(4).text()).toBe("3bar: foo");
});
});

9
ui/src/Components/OverviewModal/OverviewModalContent.tsx
View File

@@ -74,11 +74,12 @@ const LabelsTable: FC<{
<tr>
<td colSpan={2} className="px-1 py-0">
<TooltipWrapper title="Toggle all / only common labels">
<ToggleIcon
isOpen={showAllLabels}
className="cursor-pointer text-muted"
<span
className="badge components-label cursor-pointer with-click"
onClick={toggleAllLabels}
/>
>
<ToggleIcon isOpen={showAllLabels} className="text-muted" />
</span>
</TooltipWrapper>
</td>
</tr>

4
ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx
View File

@@ -43,7 +43,7 @@ const Duration: FC<{
<table className="w-100">
<tbody>
<tr>
<td className="w-50 text-center">
<td className="w-50 text-center with-click px-2">
<span onClick={onInc}>
<FontAwesomeIcon
icon={faAngleUp}
@@ -63,7 +63,7 @@ const Duration: FC<{
</td>
</tr>
<tr>
<td className="w-50 text-center">
<td className="w-50 text-center with-click px-2">
<span onClick={onDec}>
<FontAwesomeIcon
icon={faAngleDown}

8
ui/src/Components/SilenceModal/DateTimeSelect/HourMinute.tsx
View File

@@ -77,14 +77,14 @@ const HourMinute: FC<{
icon={faAngleUp}
onClick={onHourInc}
onWheel={onHourWheel}
className="components-hour-up"
className="components-hour-up with-click"
/>
<td />
<IconTd
icon={faAngleUp}
onClick={onMinuteInc}
onWheel={onMinuteWheel}
className="components-minute-up"
className="components-minute-up with-click"
/>
</tr>
<tr>
@@ -103,14 +103,14 @@ const HourMinute: FC<{
icon={faAngleDown}
onClick={onHourDec}
onWheel={onHourWheel}
className="components-hour-down"
className="components-hour-down with-click"
/>
<td />
<IconTd
icon={faAngleDown}
onClick={onMinuteDec}
onWheel={onMinuteWheel}
className="components-minute-down"
className="components-minute-down with-click"
/>
</tr>
</tbody>

28
ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap
View File

@@ -40,7 +40,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<table class=\\"w-100\\">
<tbody>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -74,7 +74,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
</td>
</tr>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -102,7 +102,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<table class=\\"w-100\\">
<tbody>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -136,7 +136,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
</td>
</tr>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -164,7 +164,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
<table class=\\"w-100\\">
<tbody>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -198,7 +198,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
</td>
</tr>
<tr>
<td class=\\"w-50 text-center\\">
<td class=\\"w-50 text-center with-click px-2\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -674,7 +674,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
<table class=\\"text-center border-0\\">
<tbody>
<tr>
<td class=\\"components-hour-up\\">
<td class=\\"components-hour-up with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -694,7 +694,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
</td>
<td>
</td>
<td class=\\"components-minute-up\\">
<td class=\\"components-minute-up with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -731,7 +731,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
</td>
</tr>
<tr>
<td class=\\"components-hour-down\\">
<td class=\\"components-hour-down with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -751,7 +751,7 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
</td>
<td>
</td>
<td class=\\"components-minute-down\\">
<td class=\\"components-minute-down with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -1230,7 +1230,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
<table class=\\"text-center border-0\\">
<tbody>
<tr>
<td class=\\"components-hour-up\\">
<td class=\\"components-hour-up with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -1250,7 +1250,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
</td>
<td>
</td>
<td class=\\"components-minute-up\\">
<td class=\\"components-minute-up with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -1287,7 +1287,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
</td>
</tr>
<tr>
<td class=\\"components-hour-down\\">
<td class=\\"components-hour-down with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"
@@ -1307,7 +1307,7 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
</td>
<td>
</td>
<td class=\\"components-minute-down\\">
<td class=\\"components-minute-down with-click\\">
<span>
<svg aria-hidden=\\"true\\"
focusable=\\"false\\"

8
ui/src/Components/SilenceModal/SilenceForm.test.tsx
View File

@@ -238,13 +238,13 @@ describe("<SilenceForm /> preview", () => {
it("renders PayloadPreview after clicking the toggle", () => {
const tree = MountedSilenceForm();
tree.find("span.btn.cursor-pointer.text-muted").simulate("click");
tree.find("span.badge.cursor-pointer.text-muted").simulate("click");
expect(tree.find("PayloadPreview")).toHaveLength(1);
});
it("clicking on the toggle icon toggles PayloadPreview", () => {
const tree = MountedSilenceForm();
const button = tree.find(".btn.cursor-pointer.text-muted");
const button = tree.find(".badge.cursor-pointer.text-muted");
expect(tree.find("PayloadPreview")).toHaveLength(0);
button.simulate("click");
expect(tree.find("PayloadPreview")).toHaveLength(1);
@@ -263,7 +263,7 @@ describe("<SilenceForm /> preview", () => {
silenceFormStore.data.autofillMatchers = false;
const tree = MountedSilenceForm();
tree.find(".btn.cursor-pointer.text-muted").simulate("click");
tree.find(".badge.cursor-pointer.text-muted").simulate("click");
const button = tree.find("span.input-group-text.cursor-pointer");
expect(button.html()).toMatch(/fa-copy/);
@@ -282,7 +282,7 @@ describe("<SilenceForm /> preview", () => {
silenceFormStore.data.autofillMatchers = false;
const tree = MountedSilenceForm();
tree.find(".btn.cursor-pointer.text-muted").simulate("click");
tree.find(".badge.cursor-pointer.text-muted").simulate("click");
const input = tree.find("input.form-control").at(2);
expect(input.props().value).toMatch(/http:\/\/localhost\/\?m=/);

2
ui/src/Components/SilenceModal/SilenceForm.tsx
View File

@@ -232,7 +232,7 @@ const SilenceForm: FC<{
/>
<div className="d-flex flex-row justify-content-between">
<span
className="btn px-0 cursor-pointer text-muted"
className="badge components-label cursor-pointer with-click text-muted my-auto"
onClick={() => setShowPreview(!showPreview)}
>
<ToggleIcon isOpen={showPreview} />

41
ui/src/Styles/Components/WithClick.scss Normal file
View File

@@ -0,0 +1,41 @@
// https://github.com/mladenplavsic/css-ripple-effect
.with-click {
position: relative;
overflow: hidden;
transform: translate3d(0, 0, 0);
&:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
background-image: radial-gradient(
circle,
$with-click-default 10%,
transparent 10.01%
);
background-repeat: no-repeat;
background-position: 50%;
transform: scale(10, 10);
opacity: 0;
transition: transform 0.4s, opacity 0.4s;
}
&.with-click-dark:after {
background-image: radial-gradient(
circle,
$with-click-dark 10%,
transparent 10.01%
);
}
&:active:after {
transform: scale(0, 0);
opacity: 0.2;
transition: 0s;
}
}

1
ui/src/Styles/Components/_index.scss
View File

@@ -25,3 +25,4 @@
@import "Tooltip";
@import "Fetcher";
@import "Toast";
@import "WithClick";

3
ui/src/Styles/DarkTheme.scss
View File

@@ -59,6 +59,9 @@ $progress-bg: $black;
$dropdown-bg: darken($gray-800, 2%);
$with-click-default: $white;
$with-click-dark: $white;
@import "Styles/RebootlessBootstrap";
@import "~bootswatch/dist/darkly/bootswatch";

3
ui/src/Styles/LightTheme.scss
View File

@@ -41,6 +41,9 @@ $pagination-disabled-bg: $gray-300;
$progress-bg: darken($light, 10%);
$with-click-default: $black;
$with-click-dark: $white;
@import "Styles/RebootlessBootstrap";
@import "~bootswatch/dist/flatly/bootswatch";