feat: add client/server integration and build steps

Saul · Saul · commit 37ea1fd339c4 · 2021-06-23T09:52:48.000+02:00
diff --git a/Dockerfile b/Dockerfile
@@ -2,6 +2,9 @@ FROM golang:1.16 as builder
 WORKDIR /app
 ARG NAME
 ARG VERSION
+RUN apt-get install -y curl \
+  && curl -sL https://deb.nodesource.com/setup_16.x | bash - \
+  && apt-get install -y nodejs 
 COPY ./ ./
 RUN make build
 
diff --git a/Makefile b/Makefile
@@ -33,25 +33,29 @@ vet:
 	go vet ./...
 
 .PHONY: build
-build:
+build: next
 	go build -ldflags "-X \"main.version=$(VERSION_TAG)\"" -o bin/konfig-manager
 
 .PHONY: install
 install: build
 	cp bin/konfig-manager /usr/local/bin/
 
+.PHONY: next
+next:
+	cd ui && npm ci && npm run export
+
 .PHONY: linux
-linux:
+linux: next
 	GOOS=linux GOARCH=amd64 go build -ldflags "-X \"main.version=$(VERSION_TAG)\"" -o .bin/$(NAME)_linux-amd64
 	GOOS=linux GOARCH=arm64 go build -ldflags "-X \"main.version=$(VERSION_TAG)\"" -o .bin/$(NAME)_linux-arm64
 
 .PHONY: darwin
-darwin:
+darwin: next
 	GOOS=darwin GOARCH=amd64 go build -ldflags "-X \"main.version=$(VERSION_TAG)\""  -o .bin/$(NAME)_darwin-amd64
 	GOOS=darwin GOARCH=arm64 go build -ldflags "-X \"main.version=$(VERSION_TAG)\"" -o .bin/$(NAME)_darwin-arm64
 
 .PHONY: windows
-windows:
+windows: next
 	GOOS=windows GOARCH=amd64 go build -o ./.bin/$(NAME).exe -ldflags "-X \"main.version=$(VERSION_TAG)\""  main.go
 
 .PHONY: release
diff --git a/cmd/server.go b/cmd/server.go
@@ -19,4 +19,6 @@ func init() {
 	Server.Flags().StringSliceP("repos", "r", []string{}, "list of repos to parse")
 	Server.Flags().StringSliceP("branches", "b", []string{"main"}, "list of branches to parse in the specified repos")
 	Server.Flags().StringP("allowed-origins", "", "", "to set the allowed origins in the http server")
+	Server.Flags().Int("devGuiHttpPort", 3000, "port used by a local npm server in development mode")
+	Server.Flags().Bool("dev", false, "run in development mode")
 }
diff --git a/pkg/api.go b/pkg/api.go
@@ -1,7 +1,10 @@
 package pkg
 
 import (
+	"errors"
 	"net/http"
+	"os"
+	"path/filepath"
 
 	"github.com/flanksource/commons/logger"
 	"k8s.io/apimachinery/pkg/util/json"
@@ -67,6 +70,50 @@ func (input *APIServer) GetConfigHandler() http.HandlerFunc {
 	}
 }
 
+func (input *APIServer) GetSpaHandler(rootFs http.FileSystem) http.HandlerFunc {
+	readFile := func(file http.File) ([]byte, error) {
+		fileInfo, _ := file.Stat()
+		size := fileInfo.Size()
+		fileBuf := make([]byte, size)
+		_, err := file.Read(fileBuf)
+		return fileBuf, err
+	}
+
+	return func(resp http.ResponseWriter, req *http.Request) {
+		path, err := filepath.Abs(req.URL.Path)
+		if err != nil {
+			// if we failed to get the absolute path respond with a 400 bad request
+			// and stop
+			http.Error(resp, err.Error(), http.StatusBadRequest)
+			return
+		}
+		_, err = rootFs.Open(path)
+		if errors.Is(err, os.ErrNotExist) {
+			// if the path does not return a file or directory, serve back index.html
+			indexFile, err := rootFs.Open("/index.html")
+			if err != nil {
+				http.Error(resp, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			fileData, err := readFile(indexFile)
+			if err != nil {
+				http.Error(resp, err.Error(), http.StatusInternalServerError)
+				return
+			}
+			if _, err := resp.Write(fileData); err != nil {
+				logger.Errorf("failed to write body: %v", err)
+			}
+			return
+		} else if err != nil {
+			// if we got an error (that wasn't that the file doesn't exist) stating the
+			// file, return a 500 internal server error and stop
+			http.Error(resp, err.Error(), http.StatusInternalServerError)
+			return
+		}
+		http.FileServer(rootFs).ServeHTTP(resp, req)
+	}
+}
+
 func removeObjectsFromList(dataWithKustomizeObjects []map[string]KustomizeResources) []map[string]KustomizeResources {
 	var data []map[string]KustomizeResources
 	for _, objMap := range dataWithKustomizeObjects {
diff --git a/pkg/server.go b/pkg/server.go
@@ -2,19 +2,24 @@ package pkg
 
 import (
 	"fmt"
+	"io/fs"
 	nethttp "net/http"
 	"path/filepath"
 
 	"github.com/flanksource/commons/logger"
+	"github.com/flanksource/konfig-manager/ui"
 	"github.com/spf13/cobra"
 )
 
 func Server(cmd *cobra.Command) {
+	var staticRoot nethttp.FileSystem
 	configFilePath, _ := cmd.Flags().GetString("config-file")
 	httpPort, _ := cmd.Flags().GetInt("port")
 	repos, _ := cmd.Flags().GetStringSlice("repos")
 	branches, _ := cmd.Flags().GetStringSlice("branches")
 	allowedOrigins, _ := cmd.Flags().GetString("allowed-origins")
+	devGuiHTTPPort, _ := cmd.Flags().GetInt("devGuiHttpPort")
+	dev, _ := cmd.Flags().GetBool("dev")
 
 	configFilePathAbsPath, err := filepath.Abs(configFilePath)
 	if err != nil {
@@ -26,9 +31,26 @@ func Server(cmd *cobra.Command) {
 		ConfigFile: configFilePathAbsPath,
 		Branches:   branches,
 	}
-	handler := server.GetConfigHandler()
+
+	if dev {
+		staticRoot = nethttp.Dir("./ui/out")
+		allowedOrigins = fmt.Sprintf("http://localhost:%d", devGuiHTTPPort)
+		logger.Infof("Starting in local development mode")
+		logger.Infof("Allowing access from a GUI on %s", allowedOrigins)
+		logger.Infof("The GUI can be started with: 'npm run dev' at default port: %d", devGuiHTTPPort)
+	} else {
+		fs, err := fs.Sub(ui.StaticContent, "out")
+		if err != nil {
+			logger.Errorf("Error: %v", err)
+		}
+		staticRoot = nethttp.FS(fs)
+	}
+
+	configHandler := server.GetConfigHandler()
 	applicationHandler := server.GetApplicationHandler()
-	nethttp.HandleFunc("/api", simpleCors(handler, allowedOrigins))
+	spaHandler := server.GetSpaHandler(staticRoot)
+	nethttp.HandleFunc("/", simpleCors(spaHandler, allowedOrigins))
+	nethttp.HandleFunc("/api", simpleCors(configHandler, allowedOrigins))
 	nethttp.HandleFunc("/api/applications", simpleCors(applicationHandler, allowedOrigins))
 	addr := fmt.Sprintf("0.0.0.0:%d", httpPort)
 	if err := nethttp.ListenAndServe(addr, nil); err != nil {
diff --git a/ui/next.config.js b/ui/next.config.js
@@ -0,0 +1,15 @@
+const productionEnv = {
+  serverPrefix: "",
+};
+
+const developmentEnv = {
+  serverPrefix: "http://localhost:8080",
+};
+
+const env =
+  process.env.NODE_ENV === "production" ? productionEnv : developmentEnv;
+
+module.exports = {
+  reactStrictMode: true,
+  env,
+};
diff --git a/ui/package.json b/ui/package.json
@@ -5,10 +5,10 @@
   "main": "index.js",
   "scripts": {
     "dev": "next dev",
+    "export": "NODE_ENV=production && next build && next export",
     "build": "next build",
     "start": "next start",
     "jest": "jest",
-    "init": "jest --init",
     "lint:eslint": "eslint --ext .js,.jsx,.ts,.tsx .",
     "fix:eslint": "eslint --fix --ext .js,.jsx,.ts,.tsx .",
     "test": "jest",
diff --git a/ui/pages/[appName].jsx b/ui/pages/[appName].jsx
@@ -35,17 +35,37 @@ const App = () => {
     "app",
   ];
 
-  const { status, data, error, isFetching } = useQuery(["stuff", appName], () =>
-    fetchStuff(`http://localhost:3000/test-data/${appName}.json`)
+  const { status, data, error, isFetching } = useQuery(
+    ["stuff", appName],
+    () => {
+      if (window.DEMO_MODE) {
+        return fetchStuff(
+          `${process.env.serverPrefix}/test-data/${appName}.json`
+        );
+      }
+      return fetchStuff(
+        `${process.env.serverPrefix}/api?application=${appName}&objects=true`
+      );
+    },
+    { staleTime: 1000, refetchOnWindowFocus: false }
   );
 
   const {
     status: appFetchStatus,
     data: apps,
     error: appFetchError,
     isFetching: isFetchingApps,
-  } = useQuery(["apps"], () =>
-    fetchStuff(`http://localhost:3000/test-data/applications.json`)
+  } = useQuery(
+    ["apps"],
+    () => {
+      if (window.DEMO_MODE) {
+        return fetchStuff(
+          `${process.env.serverPrefix}/test-data/applications.json`
+        );
+      }
+      return fetchStuff(`${process.env.serverPrefix}/api/applications`);
+    },
+    { staleTime: 1000, refetchOnWindowFocus: false }
   );
 
   if (
@@ -81,32 +101,45 @@ const App = () => {
           flex-wrap: wrap;
         `}
       >
-        {apps.map((app) => (
-          <Link href={`/${app}`} key={app}>
-            <li
-              css={css`
-                border: 1px solid black;
-                margin: 1rem;
-                padding: 1rem;
-              `}
-            >
-              <a href={`/${app}`}>{app}</a>
-            </li>
-          </Link>
-        ))}
+        {Array.isArray(apps) ? (
+          <ul
+            css={css`
+              list-style: none;
+              display: flex;
+              flex-wrap: wrap;
+            `}
+          >
+            {apps.map((app) => (
+              <li
+                key={app}
+                css={css`
+                  border: 1px solid black;
+                  margin: 1rem;
+                  padding: 1rem;
+                `}
+              >
+                <Link href={`/${app}`}>
+                  <a href={`/${app}`}>{app}</a>
+                </Link>
+              </li>
+            ))}
+          </ul>
+        ) : (
+          <div>Application list not found</div>
+        )}
       </ul>
-      ;
-      <Table
-        processed={getProcessed(data, hierarchy)}
-        hierarchy={hierarchy}
-        appName={appName}
-      />
+      <Table data={data} hierarchy={hierarchy} appName={appName} />
     </div>
   );
 };
 
 const Table = (props) => {
-  const { processed, hierarchy, appName } = props;
+  const { data, hierarchy, appName } = props;
+
+  const processed = useMemo(
+    () => getProcessed(data, hierarchy),
+    [data, hierarchy]
+  );
 
   const columns = useMemo(
     () => [
diff --git a/ui/pages/_app.jsx b/ui/pages/_app.jsx
@@ -1,9 +1,18 @@
 import "../styles/globals.css";
 import { QueryClientProvider, QueryClient } from "react-query";
+import { useRouter } from "next/router";
+import { useEffect } from "react";
 
 function App({ Component, pageProps }) {
   const queryClient = new QueryClient();
 
+  const router = useRouter();
+  useEffect(() => {
+    router.push(window.location.pathname, "", { shallow: true });
+    // TODO: Decide whether lint exclusion is valid
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <QueryClientProvider client={queryClient}>
       <Component {...pageProps} />
diff --git a/ui/pages/index.jsx b/ui/pages/index.jsx
@@ -19,8 +19,17 @@ export default function Home() {
     data: apps,
     error,
     isFetching,
-  } = useQuery(["apps"], () =>
-    fetchStuff(`http://localhost:3000/test-data/applications.json`)
+  } = useQuery(
+    ["apps"],
+    () => {
+      if (window.DEMO_MODE) {
+        return fetchStuff(
+          `${process.env.serverPrefix}/test-data/applications.json`
+        );
+      }
+      return fetchStuff(`${process.env.serverPrefix}/api/applications`);
+    },
+    { staleTime: 1000, refetchOnWindowFocus: false }
   );
 
   if (status === "loading" || isFetching) {
@@ -40,27 +49,32 @@ export default function Home() {
       </Head>
 
       <main className={styles.main}>
-        <ul
-          css={css`
-            list-style: none;
-            display: flex;
-            flex-wrap: wrap;
-          `}
-        >
-          {apps.map((app) => (
-            <Link href={`/${app}`}>
+        {Array.isArray(apps) ? (
+          <ul
+            css={css`
+              list-style: none;
+              display: flex;
+              flex-wrap: wrap;
+            `}
+          >
+            {apps.map((app) => (
               <li
+                key={app}
                 css={css`
                   border: 1px solid black;
                   margin: 1rem;
                   padding: 1rem;
                 `}
               >
-                <a href={`/${app}`}>{app}</a>
+                <Link href={`/${app}`}>
+                  <a href={`/${app}`}>{app}</a>
+                </Link>
               </li>
-            </Link>
-          ))}
-        </ul>
+            ))}
+          </ul>
+        ) : (
+          <div>Application list not found</div>
+        )}
       </main>
     </div>
   );
diff --git a/ui/static.go b/ui/static.go
@@ -0,0 +1,9 @@
+package ui
+
+import "embed"
+
+//nolint
+//go:embed out/*
+//go:embed out/_next/static/*/_*
+//go:embed out/_next/static/chunks/*/_*
+var StaticContent embed.FS

Original file line number	Diff line number	Diff line change
`@@ -19,4 +19,6 @@ func init() {`
`19`	`19`	`Server.Flags().StringSliceP("repos", "r", []string{}, "list of repos to parse")`
`20`	`20`	`Server.Flags().StringSliceP("branches", "b", []string{"main"}, "list of branches to parse in the specified repos")`
`21`	`21`	`Server.Flags().StringP("allowed-origins", "", "", "to set the allowed origins in the http server")`
	`22`	`+ Server.Flags().Int("devGuiHttpPort", 3000, "port used by a local npm server in development mode")`
	`23`	`+ Server.Flags().Bool("dev", false, "run in development mode")`
`22`	`24`	`}`