From 8bd27f8ff7c8ebd0cc4185eaf812c08c9aede0aa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= Date: Sun, 7 Oct 2018 13:14:37 +0100 Subject: [PATCH] feat(ui): add tooltips to clickable components --- .../Alert/__snapshots__/index.test.js.snap | 26 +++- .../__snapshots__/index.test.js.snap | 52 +++++-- .../AlertGrid/AlertGroup/GroupHeader/index.js | 9 +- .../Silence/__snapshots__/index.test.js.snap | 71 ++++++---- .../AlertGrid/AlertGroup/Silence/index.js | 9 +- .../Grid/AlertGrid/AlertGroup/index.js | 32 +++-- .../Labels/FilterInputLabel/index.js | 17 ++- .../Labels/FilteringCounterBadge/index.js | 23 +-- .../FilteringCounterBadge/index.test.js | 2 +- .../__snapshots__/index.test.js.snap | 13 +- .../Components/Labels/FilteringLabel/index.js | 23 +-- .../Labels/FilteringLabel/index.test.js | 2 +- ui/src/Components/MainModal/index.js | 15 +- .../NavBar/__snapshots__/index.test.js.snap | 132 ++++++++++-------- ui/src/Components/SilenceModal/SilenceForm.js | 17 ++- .../SilenceModal/SilenceMatch/index.js | 17 ++- ui/src/Components/SilenceModal/index.js | 15 +- 17 files changed, 304 insertions(+), 171 deletions(-) diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap index 82930fa36..55c1afdf7 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.js.snap @@ -63,12 +63,26 @@ exports[` matches snapshot with showAlertmanagers=false showReceiver=fa a day ago - - job: node_exporter - - - cluster: dev - +
+ + job: node_exporter + +
+
+ + cluster: dev + +
matches snapshot 1`] = ` hidden - - label1: foo - - - label2: bar - - - @alertmanager: default - - - @receiver: by-name - +
+ + label1: foo + +
+
+ + label2: bar + +
+
+ + @alertmanager: default + +
+
+ + @receiver: by-name + +
- + + + diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap index 45c7a1302..a50c3fed5 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/__snapshots__/index.test.js.snap @@ -18,19 +18,26 @@ exports[` matches snapshot when data is present in alertStore 1`] = ` Fake silence - - - - + + + + me@example.com @@ -66,19 +73,26 @@ exports[` matches snapshot with expaned details 1`] = ` Fake silence - - - - + + + + me@example.com @@ -88,9 +102,16 @@ exports[` matches snapshot with expaned details 1`] = `
- - @alertmanager: default - +
+ + @alertmanager: default + +
- + + + {silence.createdBy} diff --git a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js index 89b4486e3..e1dedd169 100644 --- a/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js +++ b/ui/src/Components/Grid/AlertGrid/AlertGroup/index.js @@ -11,23 +11,31 @@ import { faPlus } from "@fortawesome/free-solid-svg-icons/faPlus"; import { faMinus } from "@fortawesome/free-solid-svg-icons/faMinus"; import { APIGroup } from "Models/API"; -import { MountFade } from "Components/Animations/MountFade"; import { Settings } from "Stores/Settings"; import { SilenceFormStore } from "Stores/SilenceFormStore"; +import { MountFade } from "Components/Animations/MountFade"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { GroupHeader } from "./GroupHeader"; import { Alert } from "./Alert"; import { GroupFooter } from "./GroupFooter"; -const LoadButton = ({ icon, action }) => { +const LoadButton = ({ icon, action, tooltip }) => { return ( - + + + ); }; LoadButton.propTypes = { icon: FontAwesomeIcon.propTypes.icon.isRequired, - action: PropTypes.func.isRequired + action: PropTypes.func.isRequired, + tooltip: PropTypes.node.isRequired }; const AllAlertsAreUsingSameAlertmanagers = alerts => { @@ -183,13 +191,21 @@ const AlertGroup = observer( ))} {group.alerts.length > this.defaultRenderCount ? (
  • - + {this.renderConfig.alertsToRender} {" of "} {group.alerts.length} - +
    • ) : null} diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js index cd61e8f60..9e273ccd9 100644 --- a/ui/src/Components/Labels/FilterInputLabel/index.js +++ b/ui/src/Components/Labels/FilterInputLabel/index.js @@ -12,6 +12,7 @@ import { faSpinner } from "@fortawesome/free-solid-svg-icons/faSpinner"; import { AlertStore } from "Stores/AlertStore"; import { DefaultLabelClass } from "Common/Colors"; import { QueryOperators } from "Common/Query"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { BaseLabel } from "Components/Labels/BaseLabel"; import "./index.css"; @@ -93,13 +94,15 @@ const FilterInputLabel = observer( )} - + + + ); } diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.js b/ui/src/Components/Labels/FilteringCounterBadge/index.js index 66c9312ee..8cff69161 100644 --- a/ui/src/Components/Labels/FilteringCounterBadge/index.js +++ b/ui/src/Components/Labels/FilteringCounterBadge/index.js @@ -4,6 +4,7 @@ import PropTypes from "prop-types"; import { inject, observer } from "mobx-react"; import { AlertStore } from "Stores/AlertStore"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { BaseLabel } from "Components/Labels/BaseLabel"; // Same as FilteringLabel but for labels that are counters (usually @state) @@ -25,16 +26,18 @@ const FilteringCounterBadge = inject("alertStore")( if (counter === 0) return null; return ( - this.handleClick(e)} - > - {counter} - + + this.handleClick(e)} + > + {counter} + + ); } } diff --git a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js index 4acfdd158..a92f35964 100644 --- a/ui/src/Components/Labels/FilteringCounterBadge/index.test.js +++ b/ui/src/Components/Labels/FilteringCounterBadge/index.test.js @@ -45,7 +45,7 @@ const validateOnClick = value => { counter={1} /> ); - tree.simulate("click"); + tree.find(".components-label").simulate("click"); expect(alertStore.filters.values).toHaveLength(1); expect(alertStore.filters.values).toContainEqual( NewUnappliedFilter(`@state=${value}`) diff --git a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap index cd6d7a583..3abe48666 100644 --- a/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap +++ b/ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.js.snap @@ -2,8 +2,15 @@ exports[` matches snapshot 1`] = ` " - - foo: bar - +
    + + foo: bar + +
    " `; diff --git a/ui/src/Components/Labels/FilteringLabel/index.js b/ui/src/Components/Labels/FilteringLabel/index.js index 46885ee24..59ee92cfb 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.js +++ b/ui/src/Components/Labels/FilteringLabel/index.js @@ -2,6 +2,7 @@ import React from "react"; import { inject, observer } from "mobx-react"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { BaseLabel } from "Components/Labels/BaseLabel"; // Renders a label element that after clicking adds current label as a filter @@ -11,16 +12,18 @@ const FilteringLabel = inject("alertStore")( render() { const { name, value } = this.props; return ( - this.handleClick(e)} - > - {name}: {value} - + + this.handleClick(e)} + > + {name}: {value} + + ); } } diff --git a/ui/src/Components/Labels/FilteringLabel/index.test.js b/ui/src/Components/Labels/FilteringLabel/index.test.js index 883264334..585da237b 100644 --- a/ui/src/Components/Labels/FilteringLabel/index.test.js +++ b/ui/src/Components/Labels/FilteringLabel/index.test.js @@ -18,7 +18,7 @@ const RenderAndClick = (name, value) => { const tree = mount( ); - tree.simulate("click"); + tree.find(".components-label").simulate("click"); }; describe("", () => { diff --git a/ui/src/Components/MainModal/index.js b/ui/src/Components/MainModal/index.js index 150bd1db7..5f8387743 100644 --- a/ui/src/Components/MainModal/index.js +++ b/ui/src/Components/MainModal/index.js @@ -10,6 +10,7 @@ import { faCog } from "@fortawesome/free-solid-svg-icons/faCog"; import { AlertStore } from "Stores/AlertStore"; import { Settings } from "Stores/Settings"; import { MountModal } from "Components/Animations/MountModal"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { MainModalContent } from "./MainModalContent"; const MainModal = observer( @@ -46,12 +47,14 @@ const MainModal = observer( return (
  • - - - + + + + +
    • matches snapshot with 0 alerts 1`] = `
    • - - - + + - - - + + + + +
  • - - - + + - - - + + + + +
    • matches snapshot with 5 alerts 1`] = `
    • - - - + + - - - + + + + +
    • - - - + + - - - + + + + +
    ))} - + + + {showDelete ? ( - + + + ) : null} diff --git a/ui/src/Components/SilenceModal/index.js b/ui/src/Components/SilenceModal/index.js index b615af585..9d58e8a2e 100644 --- a/ui/src/Components/SilenceModal/index.js +++ b/ui/src/Components/SilenceModal/index.js @@ -10,6 +10,7 @@ import { AlertStore } from "Stores/AlertStore"; import { SilenceFormStore } from "Stores/SilenceFormStore"; import { Settings } from "Stores/Settings"; import { MountModal } from "Components/Animations/MountModal"; +import { TooltipWrapper } from "Components/TooltipWrapper"; import { SilenceModalContent } from "./SilenceModalContent"; import "./index.css"; @@ -53,12 +54,14 @@ const SilenceModal = observer( return (
  • - - - + + + + +