Add environment const, Badge for DEV, UAT env, Switch Application Ins…

…ights connection string by env

.gitignore

@@ -239,9 +239,23 @@ node_modules
 # production
 /build
 
-# End of project-specific exclusions
+# End of node exclusions
+# Start of project-specific exclusions
+
+.env
+# Just in case developer forgets "." at start of .env file name
+env  
+# Just in case developer forgets to rename file to .env
+dotenv 
+
+# React .env SHOULD be in repo - it has no secrets, and is 
+# required for GitHub action to build react app.
+!/client/.env
+
 .eslintcache
 
+# End of project-specific exclusions
+
 # Yarn lockfile
 yarn.lock
 

client/.env

@@ -0,0 +1,2 @@
+# Use to simulate different environments (DEV, UAT, PROD)
+REACT_APP_ENV=DEV

client/src/AppInsights.js

@@ -2,12 +2,23 @@
 import { ApplicationInsights } from "@microsoft/applicationinsights-web";
 import { ReactPlugin } from "@microsoft/applicationinsights-react-js";
 import { createBrowserHistory } from "history";
+import { Environment } from "./helpers/Environment";
 
 const browserHistory = createBrowserHistory({ basename: "" });
 const reactPlugin = new ReactPlugin();
+// The ApplicationInsights Connection String for PROD is not set up yet. Need to replace the PROD version below, once
+// the production Application Insights service is set up for production.
+const connectionString =
+  Environment === "DEV"
+    ? "InstrumentationKey=b04010da-8444-48d2-a8e1-fcc931a8330d;IngestionEndpoint=https://westus-0.in.applicationinsights.azure.com/;LiveEndpoint=https://westus.livediagnostics.monitor.azure.com/"
+    : Environment === "UAT"
+    ? "InstrumentationKey=eb334367-bbba-457f-b034-cf19b47da638;IngestionEndpoint=https://westus2-1.in.applicationinsights.azure.com/;LiveEndpoint=https://westus2.livediagnostics.monitor.azure.com/"
+    : "InstrumentationKey=eb334367-bbba-457f-b034-cf19b47da638;IngestionEndpoint=https://westus2-1.in.applicationinsights.azure.com/;LiveEndpoint=https://westus2.livediagnostics.monitor.azure.com/";
+
 const appInsights = new ApplicationInsights({
   config: {
-    instrumentationKey: "b04010da-8444-48d2-a8e1-fcc931a8330d",
+    connectionString: connectionString,
+    // instrumentationKey: "b04010da-8444-48d2-a8e1-fcc931a8330d",
     //instrumentationKey: "4965664a-5e02-4704-98a4-7c08c5d238ac",
     extensions: [reactPlugin],
     extensionConfig: {

client/src/components/Header.js

@@ -5,6 +5,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBars } from "@fortawesome/free-solid-svg-icons";
 import logo from "../images/ladot_white.png";
 import NavBar from "./NavBar";
+import { Environment } from "../helpers/Environment";
 
 const useStyles = createUseStyles({
   header: {
@@ -63,6 +64,12 @@ const useStyles = createUseStyles({
       marginLeft: "auto",
       marginRight: "1em"
     }
+  },
+  environmentBadge: {
+    backgroundColor: "orange",
+    fontSize: "18px",
+    padding: "4px 12px",
+    borderRadius: "6px"
   }
 });
 
@@ -72,6 +79,10 @@ const Header = () => {
 
   const handleHamburgerMenuClick = () => setNavbarOpen(!navbarOpen);
 
+  const environmentBadge = Environment ? (
+    <div className={classes.environmentBadge}>{Environment}</div>
+  ) : null;
+
   return (
     <div className={clsx(classes.header, navbarOpen ? "navbarOpen" : "")}>
       <div className={classes.logoContainer}>
@@ -83,6 +94,7 @@ const Header = () => {
           />
         </a>
       </div>
+      {environmentBadge}
       <button
         className={classes.hamburgerButton}
         onClick={handleHamburgerMenuClick}

client/src/helpers/Environment.js

@@ -0,0 +1,7 @@
+export const Environment =
+  process.env.NODE_ENV === "development" ||
+  window.location.hostname.toLowerCase().includes("tdmdev")
+    ? process.env.REACT_APP_ENV || "DEV"
+    : window.location.hostname.toLowerCase().includes("tdmuat")
+    ? "UAT"
+    : "PROD";