refactor(ui): use object-hash for react array keys instead of JSON.stringify

JSON.stringify can produce huge strings, use hashes instead

ui/package.json

@@ -18,6 +18,7 @@
     "mobx-react": "^5.2.3",
     "mobx-stored": "^1.0.2",
     "moment": "^2.22.2",
+    "object-hash": "^1.3.0",
     "prop-types": "^15.6.2",
     "qs": "^6.5.2",
     "raven-js": "^3.26.3",

ui/src/Components/Grid/AlertGrid/AlertGroup/Silence/index.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { observable, action } from "mobx";
 import { observer, inject } from "mobx-react";
 
+import hash from "object-hash";
+
 import moment from "moment";
 import Moment from "react-moment";
 
@@ -108,7 +110,7 @@ const SilenceDetails = ({ alertmanager, silence }) => {
       </span>
       {silence.matchers.map(matcher => (
         <span
-          key={JSON.stringify(matcher)}
+          key={hash(matcher)}
           className="badge badge-success text-nowrap text-truncate px-1 mr-1"
         >
           {matcher.name}

ui/src/Components/Grid/AlertGrid/AlertGroup/index.js

@@ -4,6 +4,8 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";
 import { observable, action } from "mobx";
 
+import hash from "object-hash";
+
 import { CSSTransition } from "react-transition-group";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -147,7 +149,7 @@ const AlertGroup = observer(
                       .slice(0, this.renderConfig.alertsToRender)
                       .map(alert => (
                         <Alert
-                          key={JSON.stringify(alert.labels)}
+                          key={hash(alert.labels)}
                           alert={alert}
                           showAlertmanagers={
                             showAlertmanagers && !showAlertmanagersInFooter

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

@@ -5,6 +5,8 @@ import { action, observable, toJS } from "mobx";
 import { observer } from "mobx-react";
 import { localStored } from "mobx-stored";
 
+import hash from "object-hash";
+
 import { Manager, Reference, Popper } from "react-popper";
 import onClickOutside from "react-onclickoutside";
 
@@ -57,7 +59,7 @@ const HistoryMenu = onClickOutside(
           filters.map(historyFilters => (
             <button
               className="dropdown-item cursor-pointer px-3"
-              key={JSON.stringify(historyFilters.map(f => f.raw))}
+              key={hash(historyFilters.map(f => f.raw))}
               onClick={() => {
                 alertStore.filters.setFilters(historyFilters.map(f => f.raw));
                 afterClick();