Merge pull request #39 from prymitive/favicon

feat(ui): add favicon.js support

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",

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",

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}

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 };