DBZ-8502: Fix pipeline log URL (#35)

src/pages/Pipeline/PipelineLog.tsx

@@ -8,7 +8,7 @@ import {
 } from "@patternfly/react-core";
 import { DownloadIcon, ExpandIcon } from "@patternfly/react-icons";
 import { LogViewer, LogViewerSearch } from "@patternfly/react-log-viewer";
-import { LOG_URL } from "@utils/constants";
+import { API_URL } from "@utils/constants";
 import { FC, useEffect, useState } from "react";
 import "./PipelineLog.css";
 import { useNotification } from "@appContext/AppNotificationContext";
@@ -48,17 +48,14 @@ const PipelineLog: FC<PipelineLogProps> = ({
   // Set to track unique logs
   const logSet = new Set<string>();
 
-
   const [isLogLoading, setIsLogLoading] = useState<boolean>(false);
   const [isFullScreen, setIsFullScreen] = useState(false);
 
   // useEffect(() => {
   //   const ws = new WebSocket("ws://localhost:8080/api/pipelines/1/logs/stream");
-
   //   ws.onopen = () => {
   //     console.log("WebSocket connection opened");
   //   };
-
   //   ws.onmessage = (event) => {
   //     setLogs((prevLogs) => prevLogs + "\n" + event.data); // Append new logs
   //   };
@@ -68,7 +65,6 @@ const PipelineLog: FC<PipelineLogProps> = ({
   //   ws.onclose = () => {
   //     console.log("WebSocket connection closed");
   //   };
-
   //   return () => {
   //     if (ws.readyState === WebSocket.OPEN) {
   //       ws.close();
@@ -78,10 +74,8 @@ const PipelineLog: FC<PipelineLogProps> = ({
 
   useEffect(() => {
     let ws: WebSocket;
-
-
     // Fetch initial logs via HTTP
-    fetch("http://localhost:8080/api/pipelines/1/logs")
+    fetch(`${API_URL}/api/pipelines/${pipelineId}/logs`)
       .then((response) => response.text())
       .then((initialLogs) => {
         const initialLogLines = initialLogs.split("\n");
@@ -94,9 +88,10 @@ const PipelineLog: FC<PipelineLogProps> = ({
         });
 
         setLogs((prevLogs) => [...prevLogs, ...initialLogLines]);
-
+        
         // open WebSocket for real-time updates
-        ws = new WebSocket("ws://localhost:8080/api/pipelines/1/logs/stream");
+        const webSocketURL = API_URL.replace(/^https?/, "ws")
+        ws = new WebSocket(`${webSocketURL}/api/pipelines/${pipelineId}/logs/stream`);
 
         ws.onmessage = (event) => {
           const newLogs = event.data.split("\n");
@@ -126,17 +121,14 @@ const PipelineLog: FC<PipelineLogProps> = ({
       })
       .catch((error) => console.error("Error fetching initial logs:", error));
 
-
-    // Cleanup 
+    // Cleanup
     return () => {
       if (ws && ws.readyState === WebSocket.OPEN) {
         ws.close();
       }
     };
   }, []);
 
-
-
   const downloadLogFile = async (
     pipelineId: string | undefined,
     pipelineName: string
@@ -155,7 +147,7 @@ const PipelineLog: FC<PipelineLogProps> = ({
 
     // Fetch the file as a Blob
     const response = await fetchFile(
-      `${LOG_URL}/api/pipelines/${pipelineId}/logs`
+      `${API_URL}/api/pipelines/${pipelineId}/logs`
     );
 
     if ("error" in response) {
@@ -214,6 +206,7 @@ const PipelineLog: FC<PipelineLogProps> = ({
     };
   }, []);
 
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const onExpandClick = (_event: React.MouseEvent<HTMLElement>) => {
     const element = document.querySelector(
       "#pipeline-log-view"

src/pages/Pipeline/Pipelines.tsx

@@ -46,7 +46,7 @@ import {
 } from "@patternfly/react-table";
 import _ from "lodash";
 import { useQuery } from "react-query";
-import { API_URL, LOG_URL } from "../../utils/constants";
+import { API_URL } from "../../utils/constants";
 import { ReactNode, useCallback, useState } from "react";
 import SourceField from "../../components/SourceField";
 import DestinationField from "../../components/DestinationField";
@@ -124,7 +124,7 @@ const Pipelines: React.FunctionComponent = () => {
 
     // Fetch the file as a Blob
     const response = await fetchFile(
-      `${LOG_URL}/api/pipelines/${pipelineId}/logs`
+      `${API_URL}/api/pipelines/${pipelineId}/logs`
     );
 
     if ("error" in response) {

src/utils/constants.ts

@@ -4,10 +4,8 @@ import { getBackendUrl } from "src/config";
 export const AppBranding = "Stage";
 
 const backendBaseUrl = getBackendUrl();
-const pipelineLogUrl = "http://localhost:8080";
 
 export const API_URL = backendBaseUrl;
-export const LOG_URL = pipelineLogUrl;
 export const MAX_RESULTS = 10;
 export const DEFAULT_TIMEOUT = 5000;