From cb421737dd98a38b030395218d259b6924342481 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 12 Aug 2018 19:57:48 +0100
Subject: [PATCH] feat(ui): add favicon.js support

Alert count will be displayed in the favicon, backported feature from old UI
---
 ui/package-lock.json                    |  5 +++
 ui/package.json                         |  1 +
 ui/src/App.js                           |  2 +
 ui/src/Components/FaviconBadge/index.js | 57 +++++++++++++++++++++++++
 4 files changed, 65 insertions(+)
 create mode 100644 ui/src/Components/FaviconBadge/index.js

diff --git a/ui/package-lock.json b/ui/package-lock.json
index 104da9099..96b4e3aa3 100644
--- a/ui/package-lock.json
+++ b/ui/package-lock.json
@@ -4092,6 +4092,11 @@
       "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.1.tgz",
       "integrity": "sha1-0eJkOzipTXWDtHkGDmxK/8lAcfg="
     },
+    "favico.js": {
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/favico.js/-/favico.js-0.3.10.tgz",
+      "integrity": "sha1-gFhuJ6EX8kqNUcGKmb3HFNQzkwE="
+    },
     "faye-websocket": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
diff --git a/ui/package.json b/ui/package.json
index 7f6f256ea..127d22166 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -13,6 +13,7 @@
     "bootswatch": "4.1.3",
     "copy-to-clipboard": "3.0.8",
     "fast-deep-equal": "2.0.1",
+    "favico.js": "0.3.10",
     "lodash.debounce": "4.0.8",
     "lodash.throttle": "4.1.1",
     "lodash.uniqueid": "4.0.1",
diff --git a/ui/src/App.js b/ui/src/App.js
index ab6c0ab47..c501387a7 100644
--- a/ui/src/App.js
+++ b/ui/src/App.js
@@ -9,6 +9,7 @@ import { SilenceFormStore } from "Stores/SilenceFormStore";
 import { NavBar } from "Components/NavBar";
 import { Grid } from "Components/Grid";
 import { Fetcher } from "Components/Fetcher";
+import { FaviconBadge } from "Components/FaviconBadge";
 
 import "./App.css";
 
@@ -49,6 +50,7 @@ class App extends Component {
   render() {
     return (
       <React.Fragment>
+        <FaviconBadge alertStore={this.alertStore} />
         <NavBar
           alertStore={this.alertStore}
           settingsStore={this.settingsStore}
diff --git a/ui/src/Components/FaviconBadge/index.js b/ui/src/Components/FaviconBadge/index.js
new file mode 100644
index 000000000..086e5f362
--- /dev/null
+++ b/ui/src/Components/FaviconBadge/index.js
@@ -0,0 +1,57 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+
+import { observer } from "mobx-react";
+
+import * as Favico from "favico.js";
+
+const FaviconBadge = observer(
+  class FaviconBadge extends Component {
+    static propTypes = {
+      alertStore: PropTypes.object.isRequired
+    };
+
+    constructor(props) {
+      super(props);
+
+      this.favicon = new Favico({
+        animation: "none",
+        position: "up",
+        bgColor: "#000",
+        textColor: "#fff",
+        fontStyle: "lighter"
+      });
+    }
+
+    updateBadge = () => {
+      const { alertStore } = this.props;
+
+      if (alertStore.status.error !== null) {
+        this.favicon.badge("?");
+      } else {
+        this.favicon.badge(alertStore.info.totalAlerts);
+      }
+    };
+
+    componentDidMount() {
+      this.updateBadge();
+    }
+
+    componentDidUpdate() {
+      this.updateBadge();
+    }
+
+    render() {
+      const { alertStore } = this.props;
+
+      return (
+        <span
+          data-total-alerts={alertStore.info.totalAlerts}
+          data-status-error={alertStore.status.error}
+        />
+      );
+    }
+  }
+);
+
+export { FaviconBadge };