chore(ui): user offset and raw filter from the api response

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,

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 }) => (
             </span>
           </td>
           <td width="75%" className="mw-100 p-1">
-            {nameStats.values.slice(0, 9).map((valueStats, i, array) => (
+            {nameStats.values.slice(0, 9).map((valueStats, i) => (
               <LabelWithPercent
                 key={valueStats.value}
                 name={nameStats.name}
                 value={valueStats.value}
                 hits={valueStats.hits}
                 percent={valueStats.percent}
-                offset={array
-                  .slice(0, i)
-                  .map(ns => 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
                 }
               />

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("<OverviewModalContent />", () => {
   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
+          }
         ]
       }
     ];

ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.js.snap

@@ -142,6 +142,52 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
             </div>
           </td>
         </tr>
+        <tr>
+          <td width=\\"25%\\"
+              class=\\"text-nowrap mw-100 p-1\\"
+          >
+            <span class=\\"badge badge-light components-label mx-0 my-1 pl-0 text-left\\">
+              <span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
+                5
+              </span>
+              alertname
+            </span>
+          </td>
+          <td width=\\"75%\\"
+              class=\\"mw-100 p-1\\"
+          >
+            <div class
+                 style=\\"display: inline-block; max-width: 100%;\\"
+                 data-tooltipped
+                 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 badge-dark components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
+                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+                  5
+                </span>
+                <span>
+                  <span class=\\"components-label-name\\">
+                    alertname:
+                  </span>
+                  <span class=\\"components-label-value\\">
+                    Host_Down
+                  </span>
+                </span>
+              </span>
+              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+                <div class=\\"progress-bar bg-danger\\"
+                     role=\\"progressbar\\"
+                     style=\\"width: 100%;\\"
+                     aria-valuenow=\\"100\\"
+                     aria-valuemin=\\"0\\"
+                     aria-valuemax=\\"100\\"
+                >
+                </div>
+              </div>
+            </div>
+          </td>
+        </tr>
       </tbody>
     </table>
   </div>