fix(ui): drop object-hash

ui/package.json

@@ -34,7 +34,6 @@
     "mobx-react-lite": "2.0.7",
     "mobx-stored": "1.1.0",
     "moment": "2.26.0",
-    "object-hash": "2.0.3",
     "promise-retry": "1.1.1",
     "prop-types": "15.7.2",
     "qs": "6.9.4",

ui/src/Common/Hash.js

@@ -0,0 +1,25 @@
+// https://stackoverflow.com/a/58208791/1154047
+const normalize = (sortingFunction) => {
+  return function (key, value) {
+    if (typeof value === "object" && !Array.isArray(value)) {
+      return Object.entries(value)
+        .sort(sortingFunction || undefined)
+        .reduce((acc, entry) => {
+          acc[entry[0]] = entry[1];
+          return acc;
+        }, {});
+    }
+    return value;
+  };
+};
+
+// https://stackoverflow.com/a/15710692/1154047
+const hashString = (s) =>
+  s.split("").reduce((a, b) => {
+    a = (a << 5) - a + b.charCodeAt(0);
+    return a & a;
+  }, 0);
+
+const hashObject = (o) => hashString(JSON.stringify(o, normalize(), 2));
+
+export { normalize, hashString, hashObject };

ui/src/Components/LabelSetList/index.js

@@ -3,10 +3,9 @@ import PropTypes from "prop-types";
 
 import { useLocalStore, useObserver } from "mobx-react";
 
-import hash from "object-hash";
-
 import { AlertStore } from "Stores/AlertStore";
 import { IsMobile } from "Common/Device";
+import { hashObject } from "Common/Hash";
 import { StaticLabel } from "Components/Labels/StaticLabel";
 import { PageSelect } from "Components/Pagination";
 
@@ -22,7 +21,7 @@ const GroupListToUniqueLabelsList = (groups) => {
         group.shared.labels,
         alert.labels
       );
-      const alertHash = hash(alertLabels);
+      const alertHash = hashObject(alertLabels);
       alerts[alertHash] = alertLabels;
     }
   }
@@ -50,9 +49,9 @@ const LabelSetList = ({ alertStore, labelsList }) => {
                 (pagination.activePage - 1) * maxPerPage,
                 pagination.activePage * maxPerPage
               )
-              .map((labels) => (
+              .map((labels, index) => (
                 <li
-                  key={hash(labels)}
+                  key={`${index}/${labels.length}`}
                   className="list-group-item px-0 pt-2 pb-1"
                 >
                   {Object.entries(labels).map(([name, value]) => (

ui/src/Components/ManagedSilence/SilenceDetails.js

@@ -1,8 +1,6 @@
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 
-import hash from "object-hash";
-
 import moment from "moment";
 import Moment from "react-moment";
 
@@ -139,9 +137,9 @@ const SilenceDetails = ({
               className="flex-shrink-1 flex-grow-1 mw-1p"
               style={{ minWidth: "0px" }}
             >
-              {silence.matchers.map((matcher) => (
+              {silence.matchers.map((matcher, index) => (
                 <span
-                  key={hash(matcher)}
+                  key={`${index}/${matcher.name}/${matcher.isRegex}/${matcher.value}`}
                   className="badge badge-primary px-1 mr-1 components-label"
                 >
                   {matcher.name}

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

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { useObserver, useLocalStore } from "mobx-react";
 import { localStored } from "mobx-stored";
 
-import hash from "object-hash";
-
 import { Manager, Reference, Popper } from "react-popper";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -79,10 +77,10 @@ const HistoryMenu = ({
       {filters.length === 0 ? (
         <h6 className="dropdown-header text-muted text-center">Empty</h6>
       ) : (
-        filters.slice(0, maxItems).map((historyFilters) => (
+        filters.slice(0, maxItems).map((historyFilters, index) => (
           <button
             className="dropdown-item cursor-pointer px-3"
-            key={hash(historyFilters)}
+            key={`${index}/${historyFilters.length}`}
             onClick={() => {
               alertStore.filters.setFilters(historyFilters.map((f) => f.raw));
               afterClick();

ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js

@@ -3,8 +3,6 @@ import PropTypes from "prop-types";
 
 import { observer } from "mobx-react";
 
-import hash from "object-hash";
-
 import { components } from "react-select";
 
 import Creatable from "react-select/creatable";
@@ -13,12 +11,13 @@ import { FormatBackendURI } from "Stores/AlertStore";
 import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { SilenceFormMatcher } from "Models/SilenceForm";
 import { useFetchGet } from "Hooks/useFetchGet";
+import { hashObject } from "Common/Hash";
 import { ValidationError } from "Components/ValidationError";
 import { ThemeContext } from "Components/Theme";
 import { MatchCounter } from "./MatchCounter";
 
 const GenerateHashFromMatchers = (silenceFormStore, matcher) =>
-  hash({
+  hashObject({
     alertmanagers: silenceFormStore.data.alertmanagers,
     matcher: {
       name: matcher.name,

ui/src/Components/SilenceModal/SilencePreview/index.js

@@ -1,8 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import { useObserver } from "mobx-react";
-
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowLeft } from "@fortawesome/free-solid-svg-icons/faArrowLeft";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
@@ -48,7 +46,7 @@ const SilencePreview = ({ alertStore, silenceFormStore }) => {
     FormatBackendURI("alerts.json?") + FormatAlertsQ(filters)
   );
 
-  return useObserver(() => (
+  return (
     <React.Fragment>
       <div className="mb-3">
         {isLoading ? (
@@ -83,7 +81,7 @@ const SilencePreview = ({ alertStore, silenceFormStore }) => {
         </button>
       </div>
     </React.Fragment>
-  ));
+  );
 };
 SilencePreview.propTypes = {
   alertStore: PropTypes.instanceOf(AlertStore).isRequired,