diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js index a5e1f5430..f072a3b5b 100644 --- a/ui/src/Components/Labels/LabelWithPercent/index.js +++ b/ui/src/Components/Labels/LabelWithPercent/index.js @@ -1,7 +1,7 @@ import React from "react"; import PropTypes from "prop-types"; -import { inject, observer } from "mobx-react"; +import { observer } from "mobx-react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faTimes } from "@fortawesome/free-solid-svg-icons/faTimes"; @@ -12,86 +12,80 @@ import { BaseLabel } from "Components/Labels/BaseLabel"; import "./index.scss"; -const LabelWithPercent = inject("alertStore")( - observer( - class LabelWithPercent extends BaseLabel { - static propTypes = { - alertStore: PropTypes.instanceOf(AlertStore).isRequired, - name: PropTypes.string.isRequired, - value: PropTypes.string.isRequired, - hits: PropTypes.number.isRequired, - percent: PropTypes.number.isRequired, - offset: PropTypes.number.isRequired, - isActive: PropTypes.bool.isRequired - }; +const LabelWithPercent = observer( + class LabelWithPercent extends BaseLabel { + static propTypes = { + alertStore: PropTypes.instanceOf(AlertStore).isRequired, + name: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + hits: PropTypes.number.isRequired, + percent: PropTypes.number.isRequired, + offset: PropTypes.number.isRequired, + isActive: PropTypes.bool.isRequired + }; - removeFromFilters = () => { - const { alertStore, name, value } = this.props; - alertStore.filters.removeFilter( - FormatQuery(name, QueryOperators.Equal, value) - ); - }; + removeFromFilters = () => { + const { alertStore, name, value } = this.props; + alertStore.filters.removeFilter( + FormatQuery(name, QueryOperators.Equal, value) + ); + }; - render() { - const { name, value, hits, percent, offset, isActive } = this.props; + render() { + const { name, value, hits, percent, offset, isActive } = this.props; - let cs = this.getClassAndStyle( - name, - value, - "components-label-with-hover mb-0 pl-0 text-left" - ); + let cs = this.getClassAndStyle( + name, + value, + "components-label-with-hover mb-0 pl-0 text-left" + ); - const progressBarBg = - percent > 66 - ? "bg-danger" - : percent > 33 - ? "bg-warning" - : "bg-success"; + const progressBarBg = + percent > 66 ? "bg-danger" : percent > 33 ? "bg-warning" : "bg-success"; - return ( -
- - - {hits} - - this.handleClick(e)}> - {name}:{" "} - {value} - - {isActive ? ( - - ) : null} + return ( +
+ + + {hits} -
- {offset === 0 ? null : ( -
- )} + this.handleClick(e)}> + {name}:{" "} + {value} + + {isActive ? ( + + ) : null} + +
+ {offset === 0 ? null : (
-
+ )} +
- ); - } +
+ ); } - ) + } ); export { LabelWithPercent }; diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js index f27239f75..ace404127 100644 --- a/ui/src/Components/OverviewModal/OverviewModalContent.js +++ b/ui/src/Components/OverviewModal/OverviewModalContent.js @@ -26,6 +26,7 @@ const TableRows = observer(({ alertStore, nameStats }) => {nameStats.values.slice(0, 9).map((valueStats, i) => (