Fixed a routing issue with go embed (#57)

Dockerfile

@@ -26,7 +26,7 @@ COPY pkg/ pkg/
 COPY controllers/ controllers/
 
 # Copy UI build
-COPY --from=uibuild /workspace/build/* pkg/webserver/build/
+COPY --from=uibuild /workspace/build/ pkg/webserver/build/
 
 # Build
 RUN CGO_ENABLED=0 GOOS=linux GOARCH=amd64 go build -a -o manager main.go

charts/logging-pipeline-plumber/Chart.yaml

@@ -1,7 +1,6 @@
 apiVersion: v2
 name: logging-pipeline-plumber
 description: A Helm chart for Kubernetes
-
 # A chart can be either an 'application' or a 'library' chart.
 #
 # Application charts are a collection of templates that can be packaged into versioned archives
@@ -11,12 +10,10 @@ description: A Helm chart for Kubernetes
 # a dependency of application charts to inject those utilities and functions into the rendering
 # pipeline. Library charts do not define any templates and therefore cannot be deployed.
 type: application
-
 # This is the chart version. This version number should be incremented each time you make changes
 # to the chart and its templates, including the app version.
 # Versions are expected to follow Semantic Versioning (https://semver.org/)
 version: 100.100.100-dev
-
 # This is the version number of the application being deployed. This version number should be
 # incremented each time you make changes to the application. Versions are not expected to
 # follow Semantic Versioning. They should reflect the version the application is using.

pkg/webserver/handlers.go

@@ -7,16 +7,37 @@ import (
 	"net/http"
 	"net/http/httputil"
 	"net/url"
+	"os"
+	"path"
 	"strings"
 )
 
-//go:embed build
+//go:embed build/*
 var content embed.FS
 
+type fsFunc func(name string) (fs.File, error)
+
+func (f fsFunc) Open(name string) (fs.File, error) {
+	return f(name)
+}
+
 func clientHandler() http.Handler {
-	fsys := fs.FS(content)
-	contentStatic, _ := fs.Sub(fsys, "build")
-	return http.FileServer(http.FS(contentStatic))
+	handler := fsFunc(func(name string) (fs.File, error) {
+		assetPath := path.Join("build", name)
+
+		// If we can't find the asset, return the default index.html
+		// content
+		f, err := content.Open(assetPath)
+		if os.IsNotExist(err) {
+			return content.Open("build/index.html")
+		}
+
+		// Otherwise assume this is a legitimate request routed
+		// correctly
+		return f, err
+	})
+
+	return http.FileServer(http.FS(handler))
 }
 
 func (ws *WebServer) ProxyToKubeAPI(res http.ResponseWriter, req *http.Request) {

ui/src/App.jsx

@@ -28,7 +28,7 @@ function App() {
             <Route path="/create">
               <CreateView />
             </Route>
-            <Route path="/flowtest/:namespace/:name">
+            <Route path="/flowtest">
               <DetailView />
             </Route>
           </Switch>

ui/src/components/FlowList.jsx

@@ -69,7 +69,7 @@ export default function FlowList() {
         autoHeight
         disableExtendRowFullWidth
         onSelectionModelChange={getSelectedFlows}
-        onRowClick={(row) => history.push(`flowtest/${row.row.namespace}/${row.row.name}`)}
+        onRowClick={(row) => history.push(`flowtest?namespace=${row.row.namespace}&name=${row.row.name}`)}
       />
     </div>
   );

ui/src/components/TestStatus.jsx

@@ -14,7 +14,7 @@ const TestStatus = ({
       <Grid item xs={12}>
         <div>
           {tests?.map((match, index) => (
-            <div style={{ display: 'table' }}>
+            <div key={YAML.stringify(match)} style={{ display: 'table' }}>
               {
                 status[index]
                   ? <div className="badge-wrapper"><span className="badge badge-pass">Pass</span></div>

ui/src/libs/useQuery.js

@@ -0,0 +1,3 @@
+export default function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}

ui/src/pages/DetailPage.jsx

@@ -2,15 +2,22 @@ import React, { useEffect, useState } from 'react';
 import {
   Container, Grid, Paper,
 } from '@material-ui/core';
-import { useParams } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { getFlow, getFlowTest } from '../utils/flowtests/flowDetails';
 import TestStatus from '../components/TestStatus';
 
+function useQuery() {
+  return new URLSearchParams(useLocation().search);
+}
+
 export default function DetailView() {
-  const { namespace, name } = useParams();
+  const query = useQuery();
   const [flowTest, setFlowTest] = useState(undefined);
   const [flow, setFlow] = useState(undefined);
 
+  const name = query.get('name');
+  const namespace = query.get('namespace');
+
   useEffect(async () => {
     if (flowTest?.spec?.referenceFlow) {
       setFlow(await getFlow(
@@ -38,19 +45,19 @@ export default function DetailView() {
             </div>
             <div style={{ margin: '10px' }}>Reference Flow</div>
             <div style={{ marginLeft: '30px' }}>
-              <div>{`Kind: ${flowTest?.spec.referenceFlow.kind}`}</div>
-              <div>{`Namespace: ${flowTest?.spec.referenceFlow.namespace}`}</div>
-              <div>{`Name: ${flowTest?.spec.referenceFlow.name}`}</div>
+              <div>{`Kind: ${flowTest?.spec?.referenceFlow?.kind}`}</div>
+              <div>{`Namespace: ${flowTest?.spec?.referenceFlow?.namespace}`}</div>
+              <div>{`Name: ${flowTest?.spec?.referenceFlow?.name}`}</div>
             </div>
             <div style={{ margin: '10px' }}>Reference Pod</div>
             <div style={{ marginLeft: '30px' }}>
-              <div>{`Namespace: ${flowTest?.spec.referencePod.namespace}`}</div>
-              <div>{`Name: ${flowTest?.spec.referencePod.name}`}</div>
+              <div>{`Namespace: ${flowTest?.spec?.referencePod?.namespace}`}</div>
+              <div>{`Name: ${flowTest?.spec?.referencePod?.name}`}</div>
             </div>
             <div style={{ margin: '10px' }}>Testing Logs</div>
             <div style={{ marginLeft: '30px' }}>
               {flowTest?.spec?.sentMessages?.map((message) => (
-                <pre>
+                <pre key={message}>
                   { message }
                 </pre>
               ))}