fix(ui): labels in the history menu should render with whatever matcher was used for the filter

ui/src/Components/Labels/HistoryLabel/index.js

@@ -1,24 +1,43 @@
 import React from "react";
+import PropTypes from "prop-types";
 
 import { observer } from "mobx-react";
 
+import { DefaultLabelClass } from "Common/Colors";
+import { QueryOperators } from "Common/Query";
 import { BaseLabel } from "Components/Labels/BaseLabel";
 
 import "./index.css";
 
 const HistoryLabel = observer(
   class HistoryLabel extends BaseLabel {
+    static propTypes = {
+      ...BaseLabel.propTypes,
+      matcher: PropTypes.string.isRequired
+    };
+
     render() {
-      const { name, value } = this.props;
+      const { name, matcher, value } = this.props;
+
+      let classNames = [
+        "components-label",
+        "components-label-history",
+        "text-nowrap",
+        "text-truncate",
+        "badge",
+        "mw-100"
+      ];
+      let style = {};
+      if (matcher === QueryOperators.Equal) {
+        classNames.push(`badge-${this.getColorClass(name, value)}`);
+        style = this.getColorStyle(name, value);
+      } else {
+        classNames.push(`badge-${DefaultLabelClass}`);
+      }
+
       return (
-        <span
-          className={`components-label components-label-history text-nowrap text-truncate badge badge-${this.getColorClass(
-            name,
-            value
-          )} mw-100`}
-          style={this.getColorStyle(name, value)}
-        >
-          {name ? `${name}: ` : null}
+        <span className={classNames.join(" ")} style={style}>
+          {name ? `${name}${matcher}` : null}
           {value}
         </span>
       );

ui/src/Components/NavBar/FilterInput/History.js

@@ -86,7 +86,7 @@ const HistoryMenu = onClickOutside(
           filters.map(historyFilters => (
             <button
               className="dropdown-item cursor-pointer px-3"
-              key={hash(historyFilters.map(f => f.raw))}
+              key={hash(historyFilters)}
               onClick={() => {
                 alertStore.filters.setFilters(historyFilters.map(f => f.raw));
                 afterClick();
@@ -98,6 +98,7 @@ const HistoryMenu = onClickOutside(
                     key={f.raw}
                     alertStore={alertStore}
                     name={f.name}
+                    matcher={f.matcher}
                     value={f.value}
                   />
                 ))}
@@ -180,8 +181,10 @@ const History = observer(
 
       // we don't store unapplied (we only have raw text for those, we need
       // name & value for coloring) or invalid filters
+      // also check for value, name might be missing for fuzzy filters, but
+      // the value should always be set
       const validAppliedFilters = alertStore.filters.values
-        .filter(f => f.applied === true && f.isValid === true)
+        .filter(f => f.applied === true && f.isValid === true && f.value)
         .map(f => ReduceFilter(f));
 
       // don't store empty filters in history
@@ -274,4 +277,4 @@ const History = observer(
   }
 );
 
-export { History, ReduceFilter };
+export { History, HistoryMenu, ReduceFilter };