fix(ui): use alert fingerprint instead of labels hash

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

@@ -4,8 +4,6 @@ import PropTypes from "prop-types";
 import { observer } from "mobx-react";
 import { observable, action, toJS } from "mobx";
 
-import hash from "object-hash";
-
 import { Fade } from "react-reveal";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -260,7 +258,7 @@ const AlertGroup = observer(
                       .slice(0, this.renderConfig.alertsToRender)
                       .map((alert) => (
                         <Alert
-                          key={hash(alert.labels)}
+                          key={alert.id}
                           group={group}
                           alert={alert}
                           showAlertmanagers={

ui/src/Models/API.js

@@ -20,6 +20,7 @@ const APIAlertAlertmanagerState = PropTypes.exact({
 });
 
 const APIAlert = PropTypes.exact({
+  id: PropTypes.string.isRequired,
   annotations: PropTypes.arrayOf(Annotation).isRequired,
   labels: PropTypes.object.isRequired,
   startsAt: PropTypes.string.isRequired,

ui/src/__mocks__/Alerts.js

@@ -6,6 +6,7 @@ const MockAnnotation = (name, value, visible, isLink) => ({
 });
 
 const MockAlert = (annotations, labels, state) => ({
+  id: Math.random().toString(36),
   annotations: annotations,
   labels: labels,
   startsAt: "2018-08-14T17:36:40.017867056Z",