From 6b5b53d51d2202c96ddbd244154141754412bf9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sat, 30 May 2020 16:58:24 +0100
Subject: [PATCH] fix(ui): drop object-hash

---
 ui/package.json                               |  1 -
 ui/src/Common/Hash.js                         | 25 +++++++++++++++++++
 ui/src/Components/LabelSetList/index.js       |  9 +++----
 .../ManagedSilence/SilenceDetails.js          |  6 ++---
 .../Components/NavBar/FilterInput/History.js  |  6 ++---
 .../SilenceMatch/LabelValueInput.js           |  5 ++--
 .../SilenceModal/SilencePreview/index.js      |  6 ++---
 7 files changed, 37 insertions(+), 21 deletions(-)
 create mode 100644 ui/src/Common/Hash.js

diff --git a/ui/package.json b/ui/package.json
index 56ede1bd9..d6715d304 100644
--- a/ui/package.json
+++ b/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",
diff --git a/ui/src/Common/Hash.js b/ui/src/Common/Hash.js
new file mode 100644
index 000000000..a2dbd67d3
--- /dev/null
+++ b/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 };
diff --git a/ui/src/Components/LabelSetList/index.js b/ui/src/Components/LabelSetList/index.js
index 69fc17437..4dca3c903 100644
--- a/ui/src/Components/LabelSetList/index.js
+++ b/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]) => (
diff --git a/ui/src/Components/ManagedSilence/SilenceDetails.js b/ui/src/Components/ManagedSilence/SilenceDetails.js
index a46ea2b61..a8f8d1da4 100644
--- a/ui/src/Components/ManagedSilence/SilenceDetails.js
+++ b/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}
diff --git a/ui/src/Components/NavBar/FilterInput/History.js b/ui/src/Components/NavBar/FilterInput/History.js
index 2102c3998..c012705ac 100644
--- a/ui/src/Components/NavBar/FilterInput/History.js
+++ b/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();
diff --git a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js b/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
index 43cfb0c06..0c220f171 100644
--- a/ui/src/Components/SilenceModal/SilenceMatch/LabelValueInput.js
+++ b/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,
diff --git a/ui/src/Components/SilenceModal/SilencePreview/index.js b/ui/src/Components/SilenceModal/SilencePreview/index.js
index de0326dcc..ac9f83aeb 100644
--- a/ui/src/Components/SilenceModal/SilencePreview/index.js
+++ b/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,