add notification for proxy connectivity

go/proxy/main.go

@@ -31,6 +31,13 @@ func main() {
 		w.WriteHeader(http.StatusNoContent)
 	})
 
+	mux.HandleFunc("GET /ping", func(w http.ResponseWriter, req *http.Request) {
+		w.Header().Set("Content-Type", "text/plain; charset=utf-8")
+		addAccessControlHeaders(w.Header())
+		w.WriteHeader(http.StatusOK)
+		_, _ = w.Write([]byte("github.com/explore-flights/monorepo/go/proxy"))
+	})
+
 	mux.HandleFunc("POST /milesandmore/", func(w http.ResponseWriter, req *http.Request) {
 		ctx, cancel := context.WithTimeout(req.Context(), time.Second*15)
 		defer cancel()

ui/src/lib/milesandmore/client.ts

@@ -141,6 +141,15 @@ export class MilesAndMoreClient {
   constructor(private readonly httpClient: HTTPClient) {
   }
 
+  async ping(): Promise<boolean> {
+    try {
+      const resp = await this.httpClient.fetch('http://127.0.0.1:8090/ping');
+      return resp.status === 200 && (await resp.text() === 'github.com/explore-flights/monorepo/go/proxy');
+    } catch (e) {
+      return false;
+    }
+  }
+
   async getBestBy(req: MMRequest): Promise<MMResponse> {
     const request = {
       commercialFareFamilies: [req.fareFamily],

ui/src/pages/tools/mm-quick-search.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useHttpClient } from '../../components/util/context/http-client';
 import {
   FareFamily,
@@ -9,6 +9,7 @@ import {
   ResponseDataDictionaries, ResponseDataEntry
 } from '../../lib/milesandmore/client';
 import {
+  Box,
   Button,
   ColumnLayout,
   Container,
@@ -17,20 +18,23 @@ import {
   Form,
   FormField,
   Grid,
-  Header, Table
+  Header, Link, Table
 } from '@cloudscape-design/components';
 import { useAsync } from '../../components/util/state/use-async';
 import { expectSuccess } from '../../lib/api/api';
 import { AirportMultiselect } from '../../components/select/airport-multiselect';
 import { DateTime, Duration } from 'luxon';
 import { catchNotify, useAppControls } from '../../components/util/context/app-controls';
 import { useCollection } from '@cloudscape-design/collection-hooks';
+import { useInterval } from '../../components/util/state/common';
 
 export function MmQuickSearch() {
   const { httpClient, apiClient } = useHttpClient();
   const { notification } = useAppControls();
   const mmClient = useMemo(() => new MilesAndMoreClient(httpClient), [httpClient]);
 
+  useProxyInformationAlert(mmClient);
+
   const [airports, airportsState] = useAsync(
     { airports: [], metropolitanAreas: [] },
     async () => expectSuccess(await apiClient.getLocations()).body,
@@ -177,6 +181,41 @@ export function MmQuickSearch() {
   )
 }
 
+function useProxyInformationAlert(client: MilesAndMoreClient) {
+  const { notification } = useAppControls();
+
+  const [connected, setConnected] = useState(false);
+  const updateNotification = useMemo(() => {
+    return notification.add({
+      type: 'in-progress',
+      content: 'Checking Proxy connectivity',
+    });
+  }, [notification]);
+
+  const ping = useCallback(async () => setConnected(await client.ping()), [client]);
+  useInterval(ping, 5000);
+
+  useEffect(() => {
+    if (connected) {
+      updateNotification({
+        type: 'success',
+        content: 'Proxy Connected!',
+        dismissible: true,
+      })
+    } else {
+      updateNotification({
+        type: 'warning',
+        content: (
+          <Box>
+            This page requires you to run the M&M Proxy locally.
+            You can download the latest version of the proxy <Link href={'https://github.com/explore-flights/monorepo/releases/latest'} external={true}>here</Link>.
+          </Box>
+        )
+      });
+    }
+  }, [updateNotification, connected]);
+}
+
 interface Entry {
   entry: ResponseDataEntry;
   dictionaries: ResponseDataDictionaries;