diff --git a/ui/src/Components/Labels/LabelWithPercent/index.js b/ui/src/Components/Labels/LabelWithPercent/index.js
index ee6dbf26f..896f2b248 100644
--- a/ui/src/Components/Labels/LabelWithPercent/index.js
+++ b/ui/src/Components/Labels/LabelWithPercent/index.js
@@ -15,7 +15,7 @@ import "./index.scss";
const LabelWithPercent = inject("alertStore")(
observer(
- class FilteringLabel extends BaseLabel {
+ class LabelWithPercent extends BaseLabel {
static propTypes = {
alertStore: PropTypes.instanceOf(AlertStore).isRequired,
name: PropTypes.string.isRequired,
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.js b/ui/src/Components/OverviewModal/OverviewModalContent.js
index 5eb4e39db..dd6b2bc33 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.js
@@ -4,7 +4,6 @@ import PropTypes from "prop-types";
import { observer } from "mobx-react";
import { AlertStore } from "Stores/AlertStore";
-import { QueryOperators, FormatQuery } from "Common/Query";
import { LabelWithPercent } from "Components/Labels/LabelWithPercent";
const LabelsTable = observer(({ alertStore }) => (
@@ -24,26 +23,17 @@ const LabelsTable = observer(({ alertStore }) => (
- {nameStats.values.slice(0, 9).map((valueStats, i, array) => (
+ {nameStats.values.slice(0, 9).map((valueStats, i) => (
ns.percent)
- .reduce((a, b) => a + b, 0)}
+ offset={valueStats.offset}
isActive={
alertStore.filters.values.filter(
- f =>
- f.raw ===
- FormatQuery(
- nameStats.name,
- QueryOperators.Equal,
- valueStats.value
- )
+ f => f.raw === valueStats.raw
).length > 0
}
/>
diff --git a/ui/src/Components/OverviewModal/OverviewModalContent.test.js b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
index 3efa460b0..c337a6119 100644
--- a/ui/src/Components/OverviewModal/OverviewModalContent.test.js
+++ b/ui/src/Components/OverviewModal/OverviewModalContent.test.js
@@ -6,7 +6,7 @@ import { mount } from "enzyme";
import toDiffableHtml from "diffable-html";
-import { AlertStore } from "Stores/AlertStore";
+import { AlertStore, NewUnappliedFilter } from "Stores/AlertStore";
import { OverviewModalContent } from "./OverviewModalContent";
let alertStore;
@@ -23,14 +23,31 @@ afterEach(() => {
describe("", () => {
it("matches snapshot with labels to show", () => {
+ alertStore.filters.values = [
+ NewUnappliedFilter("abc=xyz"),
+ NewUnappliedFilter("foo=bar")
+ ];
alertStore.data.counters = [
{
name: "foo",
hits: 16,
values: [
- { value: "bar1", hits: 8, percent: 50 },
- { value: "bar2", hits: 4, percent: 25 },
- { value: "bar3", hits: 4, percent: 25 }
+ { value: "bar1", raw: "foo=bar1", hits: 8, percent: 50, offset: 0 },
+ { value: "bar2", raw: "foo=bar2", hits: 4, percent: 25, offset: 50 },
+ { value: "bar3", raw: "foo=bar3", hits: 4, percent: 25, offset: 75 }
+ ]
+ },
+ {
+ name: "alertname",
+ hits: 5,
+ values: [
+ {
+ value: "Host_Down",
+ raw: "alertname=Host_Down",
+ hits: 5,
+ percent: 100,
+ offset: 0
+ }
]
}
];
diff --git a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
index 17911a8a1..9946996cb 100644
--- a/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
+++ b/ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap
@@ -142,6 +142,52 @@ exports[` matches snapshot with labels to show 1`] = `
|
+
+ |
+
+
+ 5
+
+ alertname
+
+ |
+
+
+
+
+ 5
+
+
+
+ alertname:
+
+
+ Host_Down
+
+
+
+
+
+ |
+