Try running sse in TimesSsquareGitHubPagePanel

lsst-sqre · Apr 5, 2024 · 6ccde48 · 6ccde48
1 parent 77e4675
commit 6ccde48
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 56 deletions.
diff --git a/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js b/apps/squareone/src/components/TimesSquareApp/TimesSquareApp.js
@@ -6,7 +6,6 @@
 
 import React from 'react';
 import styled from 'styled-components';
-import { fetchEventSource } from '@microsoft/fetch-event-source';
 
 import Sidebar from './Sidebar';
 import { TimesSquareUrlParametersContext } from '../TimesSquareUrlParametersProvider';
@@ -33,59 +32,6 @@ export default function TimesSquareApp({ children }) {
 
   const { htmlEventsUrl } = useTimesSquarePage();
 
-  const [htmlEvent, setHtmlEvent] = React.useState(null);
-  const abortControllerRef = React.useRef(new AbortController());
-
-  const fullHtmlEventsUrl = `${htmlEventsUrl}?${urlQueryString}`;
-
-  React.useEffect(async () => {
-    async function runEffect() {
-      if (htmlEventsUrl) {
-        console.log(`Running fetchEventSource ${fullHtmlEventsUrl}`);
-        await fetchEventSource(fullHtmlEventsUrl, {
-          method: 'GET',
-          signal: abortControllerRef.current.signal,
-          onopen(res) {
-            if (res.ok && res.status === 200) {
-              console.log(`Connection made to ${fullHtmlEventsUrl}`, res);
-            } else if (
-              res.status >= 400 &&
-              res.status < 500 &&
-              res.status !== 429
-            ) {
-              console.log(`Client side error ${fullHtmlEventsUrl}`, res);
-            }
-          },
-          onmessage(event) {
-            // console.log(event.data);
-            const parsedData = JSON.parse(event.data);
-            setHtmlEvent(parsedData);
-          },
-          onclose() {
-            console.log(
-              `Connection closed by the server to ${fullHtmlEventsUrl}`
-            );
-          },
-          onerror(err) {
-            console.log(
-              `There was an error from server for ${fullHtmlEventsUrl}`,
-              err
-            );
-          },
-        });
-      }
-    }
-    runEffect();
-
-    return () => {
-      // Clean up: close the event source connection
-      console.log(`Aborted connection to ${fullHtmlEventsUrl}`);
-      abortControllerRef.current.abort();
-    };
-  }, [fullHtmlEventsUrl]);
-
-  console.log(htmlEvent);
-
   const pageNav = commit ? (
     <TimesSquarePrGitHubNav owner={owner} repo={repo} commitSha={commit} />
   ) : (
@@ -96,7 +42,14 @@ export default function TimesSquareApp({ children }) {
     <StyledLayout>
       <Sidebar
         pageNav={pageNav}
-        pagePanel={tsSlug ? <TimesSquareGitHubPagePanel /> : null}
+        pagePanel={
+          tsSlug ? (
+            <TimesSquareGitHubPagePanel
+              htmlEventsUrl={htmlEventsUrl}
+              urlQueryString={urlQueryString}
+            />
+          ) : null
+        }
       />
       <main>{children}</main>
     </StyledLayout>

diff --git a/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js b/apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js
@@ -12,12 +12,69 @@ import getConfig from 'next/config';
 import Head from 'next/head';
 import Error from 'next/error';
 
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 import TimesSquareParameters from '../TimesSquareParameters';
 
-export default function TimesSquareGitHubPagePanel({}) {
+export default function TimesSquareGitHubPagePanel({
+  htmlEventsUrl,
+  urlQueryString,
+}) {
   const { publicRuntimeConfig } = getConfig();
 
+  const [htmlEvent, setHtmlEvent] = React.useState(null);
+
+  const abortControllerRef = React.useRef(new AbortController());
+
+  const fullHtmlEventsUrl = `${htmlEventsUrl}?${urlQueryString}`;
+
+  React.useEffect(async () => {
+    async function runEffect() {
+      if (htmlEventsUrl) {
+        console.log(`Running fetchEventSource ${fullHtmlEventsUrl}`);
+        await fetchEventSource(fullHtmlEventsUrl, {
+          method: 'GET',
+          signal: abortControllerRef.current.signal,
+          onopen(res) {
+            if (res.ok && res.status === 200) {
+              console.log(`Connection made to ${fullHtmlEventsUrl}`, res);
+            } else if (
+              res.status >= 400 &&
+              res.status < 500 &&
+              res.status !== 429
+            ) {
+              console.log(`Client side error ${fullHtmlEventsUrl}`, res);
+            }
+          },
+          onmessage(event) {
+            // console.log(event.data);
+            const parsedData = JSON.parse(event.data);
+            setHtmlEvent(parsedData);
+          },
+          onclose() {
+            console.log(
+              `Connection closed by the server to ${fullHtmlEventsUrl}`
+            );
+          },
+          onerror(err) {
+            console.log(
+              `There was an error from server for ${fullHtmlEventsUrl}`,
+              err
+            );
+          },
+        });
+      }
+    }
+    runEffect();
+
+    return () => {
+      // Clean up: close the event source connection
+      abortControllerRef.current.abort();
+      console.log(`Aborted connection to ${fullHtmlEventsUrl}`);
+    };
+  }, [fullHtmlEventsUrl]);
+
   const pageData = useTimesSquarePage();
 
   if (pageData.loading) {
@@ -34,6 +91,7 @@ export default function TimesSquareGitHubPagePanel({}) {
       <Head>
         <title>{`${title} | ${publicRuntimeConfig.siteName}`}</title>
       </Head>
+      {htmlEvent && <p>Execution Status: {htmlEvent.execution_status}</p>}
       <div>
         <PageTitle>{title}</PageTitle>
         {description && (