add notification for favicon when change common status

Author: nfort

img/Fav16-danger.png

@@ -1,6 +1,6 @@
 {
   "name": "angie-console-light",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "description": "Angie Console Light",
   "main": "index.js",
   "scripts": {
@@ -76,6 +76,7 @@
     "jest-environment-jsdom": "^29.6.4",
     "jest-extended": "^4.0.1",
     "resize-observer-polyfill": "^1.5.1",
-    "webpack-dev-server": "4.9.2"
+    "webpack-dev-server": "4.9.2",
+    "copy-webpack-plugin": "6.3.1"
   }
 }

img/Fav16-warn.png

@@ -28,6 +28,7 @@ import Resolvers from './components/pages/resolvers.jsx';
 import Workers from './components/pages/workers.jsx';
 import Disclaimer from './components/demo/disclaimer.jsx';
 import ConfigFiles from './components/pages/configfiles/configfiles.jsx';
+import FaviconManager from './components/favicon-manager/index.js';
 import datastore, { STORE, startObserve, play, pause } from './datastore';
 import { apiUtils } from './api';
 import envUtils from './env';
@@ -123,12 +124,12 @@ export class App extends React.Component {
 			let subContent = null;
 
 			if (error in Errors) {
-				subContent = <p>{ Errors[error] }</p>;
+				subContent = <p>{Errors[error]}</p>;
 			}
 
 			content = (
 				<div className={styles['error-block']}>
-					{ subContent }
+					{subContent}
 					<p>
 						For&nbsp;more information please refer to&nbsp;the&nbsp;following&nbsp;
 						<a href="https://angie.software/en/">documentation.</a>
@@ -143,6 +144,7 @@ export class App extends React.Component {
 
 		return (
 			<div className={styles.console}>
+				<FaviconManager statuses={STORE.__STATUSES} />
 
 				{
 					envUtils.isDemoEnv() ?
@@ -159,7 +161,7 @@ export class App extends React.Component {
 							: null
 					}
 
-					{ content }
+					{content}
 				</div>
 			</div>
 		);

img/Fav16.png

@@ -0,0 +1,80 @@
+import React from 'react';
+
+const faviconHref = 'assets/images/Fav16.png';
+const faviconDangerHref = 'assets/images/Fav16-danger.png';
+const faviconWarningHref = 'assets/images/Fav16-warn.png';
+
+export default class FaviconManager extends React.Component {
+	static changeFavicon(faviconPath) {
+		let link = document.querySelector("link[rel~='icon']");
+		if (!link) {
+			link = document.createElement('link');
+			link.rel = 'icon';
+			document.head.appendChild(link);
+		}
+		link.href = faviconPath;
+	}
+
+	constructor(props) {
+		super(props);
+		this.state = {
+			odd: false,
+			intervalID: 0,
+		};
+	}
+
+	componentDidMount() {
+		const intervalID = setInterval(() => {
+			const { odd } = this.state;
+			this.setState({ odd: !odd });
+		}, 2000);
+		this.setState({ intervalID });
+	}
+
+	componentWillUnmount() {
+		const { intervalID } = this.state;
+		clearInterval(intervalID);
+	}
+
+	getStatuses() {
+		const { statuses } = this.props;
+
+		if (statuses) {
+			const values = Object.values(statuses);
+			let item = values.some(({ status }) => status === 'danger');
+			if (item) {
+				return 'danger';
+			}
+
+			item = values.some(({ status }) => status === 'warning');
+			if (item) {
+				return 'warning';
+			}
+
+			return 'ok';
+		}
+	}
+
+	render() {
+		const { odd } = this.state;
+		const status = this.getStatuses();
+
+		if (!odd) {
+			if (status === 'ok') {
+				FaviconManager.changeFavicon(faviconHref);
+			}
+
+			if (status === 'danger') {
+				FaviconManager.changeFavicon(faviconDangerHref);
+			}
+
+			if (status === 'warning') {
+				FaviconManager.changeFavicon(faviconWarningHref);
+			}
+		} else {
+			FaviconManager.changeFavicon(faviconHref);
+		}
+
+		return null;
+	}
+}

package.json

@@ -12,6 +12,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HTMLInlineCSSWebpackPlugin = require('html-inline-css-webpack-plugin').default;
 const ESLintPlugin = require('eslint-webpack-plugin');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 
 const packageFile = require('./package.json');
 
@@ -43,6 +44,12 @@ const plugins = [
 	}),
 
 	new ESLintPlugin(),
+
+	new CopyWebpackPlugin({
+		patterns: [
+			{ from: './img', to: 'images' }
+		]
+	}),
 ];
 
 if (PRODUCTION_BUILD) {