fix(ui): reduce webpack bundle size

.travis.yml

@@ -39,13 +39,7 @@ jobs:
       name: Webpack bundle size compare
       if: (repo = prymitive/karma AND type = pull_request)
       <<: *DEFAULTS_JS
-      cache:
-        directories:
-          - ui/node_modules
-          - ui/build
       env:
-        # custom cache key
-        - JOB=bundle
         # GITHUB_TOKEN for CI Bundle size diff comments and gist uploads
         - secure: "Or5fiXZfgIsXvzoOdEprRwJ0uwUjMvxGHE3LG+h3OsIBO6WA8vgOqVOjqVHV2dgC9cSjm5A7MX52S7cDqfkQDkgnVHpVxRwDC9n9O4vnaFdCZ4nC+d18z8dikbiwgdeWQ+Wi6RhZENye1Lu5sBaAJ09wYgx9lNdEVpRaTUvUw6grSlESJZSXoxfxWWpmTyx+yPH4sxuWjZ7gCspDX9s9k4fjpY4LkhQQwLlk8wPc2hfDg48e+K1OR6sYB8uRS33Xc4fQtzElzazmaZ0fn77h5ysDgC1g/ko+E2j8HHMbZvFpzYpm1bCpIv1G/0A2ItH7gT3HsuwkDvfH/it56JTCbBWJJ+hTDeswCQNu0h797QM6jv0o5wgKpHR1t+AeM9vDe4Ds0pAXouJz0LJewNOdNvi5O1BZA9OooKc34hwTJs/zj5NwiZuOyPSMhDBGa++Vhsr9K3rPD9+97M2hac6NO6TBVWZjvqJilmkjJs+bKrl//ClBvdhDGkJNDbB+2emdD1/wzpPVJPp3IRhzeEF89IVE58qE+OQnIwtbEZ2W1ct6Ep7ZJdrXWc/VBdJB1ELfUtNmkvWFZD5IJfnb/Z5MS6iespXlV5alPQ7eZ2jNl3tn7uDaCStuQN1tO2wthNnsSU/OkfFRch/Ks3gYC5+v7n8aJMkTYFmHr4Y/xlXBsrA="
       script:

Makefile

@@ -6,13 +6,12 @@ include make/lint-versions.mk
 
 .PHONY: lint
 lint: lint-versions
-	make -f go.mk test
 	make -C ui lint-js
 	make -C ui lint-docs
 
 .PHONY: test
 test: lint
-	make -f go.mk test-go
+	make test-go
 	make -C ui test-js
 
 .PHONY: clean

internal/models/alert.go

@@ -44,21 +44,21 @@ type Alert struct {
 	Alertmanager []AlertmanagerInstance `json:"alertmanager"`
 	Receiver     string                 `json:"receiver"`
 	// fingerprints are precomputed for speed
-	labelsFP  string `hash:"-"`
+	LabelsFP  string `json:"id" hash:"-"`
 	contentFP string `hash:"-"`
 }
 
 // UpdateFingerprints will generate a new set of fingerprints for this alert
 // it should be called after modifying any field that isn't tagged with hash:"-"
 func (a *Alert) UpdateFingerprints() {
-	a.labelsFP = fmt.Sprintf("%x", structhash.Sha1(a.Labels, 1))
+	a.LabelsFP = fmt.Sprintf("%x", structhash.Sha1(a.Labels, 1))
 	a.contentFP = fmt.Sprintf("%x", structhash.Sha1(a, 1))
 }
 
 // LabelsFingerprint is a checksum computed only from labels which should be
 // unique for every alert
 func (a *Alert) LabelsFingerprint() string {
-	return a.labelsFP
+	return a.LabelsFP
 }
 
 // ContentFingerprint is a checksum computed from entire alert object

internal/models/api_test.go

@@ -122,7 +122,8 @@ func TestDedupSharedMaps(t *testing.T) {
           "inhibitedBy": null
         }
       ],
-      "receiver": ""
+      "receiver": "",
+      "id": ""
     },
     {
       "annotations": [],
@@ -158,7 +159,8 @@ func TestDedupSharedMaps(t *testing.T) {
           "inhibitedBy": null
         }
       ],
-      "receiver": ""
+      "receiver": "",
+      "id": ""
     },
     {
       "annotations": [],
@@ -194,7 +196,8 @@ func TestDedupSharedMaps(t *testing.T) {
           "inhibitedBy": null
         }
       ],
-      "receiver": ""
+      "receiver": "",
+      "id": ""
     }
   ],
   "id": "",

ui/package.json

@@ -21,7 +21,6 @@
     "bricks.js": "1.8.0",
     "copy-to-clipboard": "3.3.1",
     "csshake": "1.5.3",
-    "fast-deep-equal": "3.1.1",
     "favico.js": "0.3.10",
     "fontfaceobserver": "2.1.0",
     "lodash": "4.17.15",
@@ -34,7 +33,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/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/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,

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,