Alerts-UI runtime environment variables (#19)

chart/templates/deployment.yaml

@@ -25,6 +25,6 @@ spec:
 {{ toYaml .Values.resources | indent 10 }}
         env:
           - name: ALERTS_URL
-            value: {{ .Values.url.alerts }}
+            value: {{ .Values.env.url.alerts }}
           - name: FEEDBACK_URL
-            value: {{ .Values.url.feedback }}
+            value: {{ .Values.env.url.feedback }}

chart/values.yaml

@@ -34,6 +34,7 @@ ingress:
     dnsZone: ''
     rootDnsZone: ''
 
-url:
-    alerts: ''
-    feedback: ''
+env:
+    url:
+        alerts: ''
+        feedback: ''

docker-compose.yml

@@ -7,6 +7,9 @@ services:
       - app-tier
     ports:
       - '80:80'
+    environment:
+      ALERTS_URL: 'wss://localhost:8080'
+      FEEDBACK_URL: 'https://localhost:8081/feedback'
   api:
     image: 'alerts-dashboard'
     networks:
@@ -43,4 +46,4 @@ volumes:
 
 networks:
   app-tier:
-    driver: bridge
+    driver: bridge

jest.config.js

@@ -6,5 +6,5 @@ module.exports = {
     testRegex: 'src/.*\\.test.ts$',
     coverageReporters: ['json', 'lcov', 'text'],
     reporters: ['default', ['jest-junit', { outputDirectory: 'jest_output' }]],
-    setupFiles: ['.env.test'],
+    setupFiles: [''],
 };

public/config.js

@@ -1,2 +1,2 @@
-// window.ALERTS_URL = 'ws:localhost:8080';
-// window.FEEDBACK_URL = 'http://localhost:3000/feedback';
+window.ALERTS_URL = 'ws://localhost:9876';
+window.FEEDBACK_URL = 'https://localhost/feedback';

public/index.html

@@ -40,6 +40,7 @@
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
 
-<!--    <script type="text/javascript" src="config.js"></script>-->
+    <script type="text/javascript" src='/config.js'> </script>
+
   </body>
 </html>

run.sh

@@ -1,9 +1,12 @@
 #!/bin/bash
 
-#cat > /usr/share/nginx/html/config.js <<EOL
-#window.ALERTS_URL = '${ALERTS_URL}'
-#window.FEEDBACK_URL = '${FEEDBACK_URL}'
-#EOL
+cat > /usr/share/nginx/html/config.js <<EOL
+window.ALERTS_URL = '${ALERTS_URL}'
+window.FEEDBACK_URL = '${FEEDBACK_URL}'
+EOL
+
+echo $ALERTS_URL
+echo $FEEDBACK_URL
 
 cat /etc/nginx/conf.d/default.conf.tpl | envsubst \$ADDITIONAL_CSP_HOSTS > /etc/nginx/conf.d/default.conf
 

src/AlertCard.test.tsx

@@ -1,9 +1,10 @@
-import { render, screen } from '@testing-library/react';
+import { AllByAttribute, render, screen } from '@testing-library/react';
 import { AlertCard } from './AlertCard';
 import { Alert, AlertSeverity, AlertStatus, AlertType } from './App';
 import { act } from 'react-dom/test-utils';
 import SpyInstance = jest.SpyInstance;
 import waitForExpect from 'wait-for-expect';
+import { Config } from './config'
 
 const oneMinute = 60000;
 const alert: Alert = {
@@ -37,6 +38,8 @@ beforeEach(() => {
     fakeNow = jest.spyOn(Date, 'now');
     fakeFetch = jest.spyOn(window, 'fetch');
     fakeConsole = jest.spyOn(console, 'log').mockImplementation();
+    Config.feedback_url = 'https://localhost/feedback';
+
 });
 
 afterEach(() => {
@@ -176,4 +179,4 @@ test('takes note of API errors', async () => {
     await waitForExpect(() => {
         expect(fakeConsole).toHaveBeenCalledWith('KABOOM');
     });
-});
+});

src/AlertCard.tsx

@@ -5,6 +5,7 @@ import congestionIcon from './congestion_icon.png';
 import cameraIcon from './videocam.png';
 import { ReactComponent as ThumbUpIcon } from './thumbsup.svg';
 import { ReactComponent as ThumbDownIcon } from './thumbsdown.svg';
+import { Config } from './config'
 
 interface AlertCardProps {
     alert: Alert;
@@ -61,7 +62,7 @@ export function AlertCard(props: AlertCardProps) {
         const requestBody = new Feedback(props.alert.id, feedbackBoolean);
         const bodyAsString = JSON.stringify(requestBody);
         window
-            .fetch(`${process.env.REACT_APP_FEEDBACK_URL}`, {
+            .fetch(`${Config.feedback_url}`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',

src/App.test.tsx

@@ -4,14 +4,16 @@ import App, { Alert, AlertSeverity, AlertStatus, AlertType } from './App';
 import WS from 'jest-websocket-mock';
 import waitForExpect from 'wait-for-expect';
 import SpyInstance = jest.SpyInstance;
+import { Config } from "./config"
 
 let fakeConsole: SpyInstance;
 let socketServer: WS;
 
 beforeEach(() => {
     fakeConsole = jest.spyOn(console, 'log').mockImplementation();
-    const url: string = `${process.env.REACT_APP_ALERTS_URL}`;
+    const url: string = `${Config.alerts_url}`;
     socketServer = new WS(url);
+    Config.alerts_url = 'ws://localhost:9876';
 });
 
 afterEach(() => {

src/App.tsx

@@ -3,6 +3,7 @@ import './App.css';
 import { AlertPane } from './AlertPane';
 import { TitleBar } from './TitleBar';
 import ReconnectingWebSocket from 'reconnecting-websocket';
+import { Config } from './config'
 
 export interface Alert {
     id: string;
@@ -46,7 +47,7 @@ export default function App() {
 
     useEffect(() => {
         const websocket = new ReconnectingWebSocket(
-            `${process.env.REACT_APP_ALERTS_URL}`,
+            `${Config.alerts_url}`
         );
         websocket.addEventListener('message', (message) => {
             const stringMessage = message.data as string;

src/config.ts

@@ -0,0 +1,5 @@
+const envSettings = window as any;
+export class Config {
+  static alerts_url = envSettings.ALERTS_URL;
+  static feedback_url = envSettings.FEEDBACK_URL;
+}

variables/prod_values.yaml

@@ -1,6 +1,7 @@
 ingress:
     annotations:
         alb.ingress.kubernetes.io/scheme: 'internet-facing'
-url:
-  alerts: 'wss://alerts-api.smartcolumbusos.com'
-  feedback: 'https://alerts-api.smartcolumbusos.com/feedback'
+env:  
+  url:
+    alerts: 'wss://alerts-api.smartcolumbusos.com'
+    feedback: 'https://alerts-api.smartcolumbusos.com/feedback'

variables/staging_values.yaml

@@ -1,3 +1,4 @@
-url:
-  alerts: 'wss://alerts-api.staging.internal.smartcolumbusos.com'
-  feedback: 'https://alerts-api.staging.internal.smartcolumbusos.com/feedback'
+env:
+  url:
+    alerts: 'wss://alerts-api.staging.internal.smartcolumbusos.com'
+    feedback: 'https://alerts-api.staging.internal.smartcolumbusos.com/feedback'