feat: add ui for the api-testing (#102)

* feat: add ui project for the atest

* add grpc gateway support

* complete the very basic ui of atest

* add local storage flag into the server sub-command

* add unit tests for the remote server

* put the console into the docker image

* remove unused files from console

* add more unit tests

* support to execute test case on ui

* fix the code smells located by sonarqube

---------

Co-authored-by: rick <linuxsuren@users.noreply.github.com>

Author: LinuxSuRen

.gitignore

@@ -6,3 +6,4 @@ dist/
 .vscode/launch.json
 sample.yaml
 .DS_Store
+console/atest-ui/node_modules

Dockerfile

@@ -4,6 +4,7 @@ WORKDIR /workspace
 COPY cmd/ cmd/
 COPY pkg/ pkg/
 COPY extensions/ extensions/
+COPY console/atest-ui atest-ui/
 COPY sample/ sample/
 COPY go.mod go.mod
 COPY go.sum go.sum
@@ -17,6 +18,13 @@ RUN go mod download
 RUN CGO_ENABLE=0 go build -ldflags "-w -s" -o atest .
 RUN CGO_ENABLE=0 go build -ldflags "-w -s" -o atest-collector extensions/collector/main.go
 
+FROM node:20-alpine3.17 AS ui
+
+WORKDIR /workspace
+COPY --from=builder /workspace/atest-ui .
+RUN npm install --ignore-scripts
+RUN npm run build-only
+
 FROM ubuntu:23.04
 
 LABEL "com.github.actions.name"="API testing"
@@ -35,4 +43,8 @@ COPY --from=builder /workspace/atest-collector /usr/local/bin/atest-collector
 COPY --from=builder /workspace/LICENSE /LICENSE
 COPY --from=builder /workspace/README.md /README.md
 
-CMD ["atest", "server"]
+RUN mkdir -p /var/www
+COPY --from=builder /workspace/sample /var/www/sample
+COPY --from=ui /workspace/dist /var/www/html
+
+CMD ["atest", "server", "--console-path=/var/www/html", "--local-storage=/var/www/sample/testsuite-*.yaml"]

Makefile

@@ -7,7 +7,7 @@ goreleaser:
 build-image:
 	docker build -t ghcr.io/linuxsuren/api-testing:dev .
 run-image:
-	docker run ghcr.io/linuxsuren/api-testing:dev
+	docker run -p 7070:7070 -p 8080:8080 ghcr.io/linuxsuren/api-testing:dev
 copy: build
 	sudo cp bin/atest /usr/local/bin/
 copy-restart: build
@@ -24,13 +24,25 @@ grpc:
 	protoc --go_out=. --go_opt=paths=source_relative \
     --go-grpc_out=. --go-grpc_opt=paths=source_relative \
     pkg/server/server.proto
+grpc-gw:
+	protoc -I . --grpc-gateway_out . \
+    --grpc-gateway_opt logtostderr=true \
+    --grpc-gateway_opt paths=source_relative \
+    --grpc-gateway_opt generate_unbound_methods=true \
+    pkg/server/server.proto
 grpc-js:
 	protoc -I=pkg/server server.proto \
     --js_out=import_style=commonjs:bin \
     --grpc-web_out=import_style=commonjs,mode=grpcwebtext:bin
+# https://github.com/grpc/grpc-web
+grpc-ts:
+	protoc -I=pkg/server server.proto \
+    --js_out=import_style=commonjs,binary:console/atest-ui/src \
+    --grpc-web_out=import_style=typescript,mode=grpcwebtext:console/atest-ui/src
 grpc-java:
 	protoc --plugin=protoc-gen-grpc-java=/usr/local/bin/protoc-gen-grpc-java \
     --grpc-java_out=bin --proto_path=pkg/server server.proto
 install-tool:
 	go install google.golang.org/protobuf/cmd/protoc-gen-go@v1.28.1
 	go install google.golang.org/grpc/cmd/protoc-gen-go-grpc@v1.2
+	hd i protoc-gen-grpc-web

README.md

@@ -15,7 +15,7 @@ This is a API testing tool.
 *   Validate the response body with [JSON schema](https://json-schema.org/)
 *   Pre and post handle with the API request
 *   Output reference between TestCase
-*   Run in server mode, and provide the [gRPC endpoint](pkg/server/server.proto)
+*   Run in server mode, and provide the [gRPC](pkg/server/server.proto) and HTTP endpoint
 *   [VS Code extension](https://github.com/LinuxSuRen/vscode-api-testing) support
 *   [HTTP API record](extensions/collector)
 
@@ -66,9 +66,9 @@ consume: 1m2.153686448s
 
 ## Use in Docker
 
-Use `atest` as server mode in Docker:
+Use `atest` as server mode in Docker, then you could visit the UI from `8080` and the gRPC endpoint from `7070`:
 ```
-docker run -p 7070:7070 ghcr.io/linuxsuren/api-testing
+docker run -p 7070:7070 -p 8080:8080 ghcr.io/linuxsuren/api-testing
 ```
 
 Use `atest-collector` in Docker:

cmd/function_test.go

@@ -5,6 +5,7 @@ import (
 	"testing"
 
 	"github.com/linuxsuren/api-testing/cmd"
+	"github.com/linuxsuren/api-testing/pkg/server"
 	fakeruntime "github.com/linuxsuren/go-fake-runtime"
 	"github.com/stretchr/testify/assert"
 )
@@ -35,7 +36,8 @@ func TestCreateFunctionCommand(t *testing.T) {
 	}}
 	for _, tt := range tests {
 		t.Run(tt.name, func(t *testing.T) {
-			c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"}, cmd.NewFakeGRPCServer())
+			c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"},
+				cmd.NewFakeGRPCServer(), server.NewFakeHTTPServer())
 
 			buf := new(bytes.Buffer)
 			c.SetOut(buf)

cmd/jsonschema_test.go

@@ -6,12 +6,14 @@ import (
 	"testing"
 
 	"github.com/linuxsuren/api-testing/cmd"
+	"github.com/linuxsuren/api-testing/pkg/server"
 	fakeruntime "github.com/linuxsuren/go-fake-runtime"
 	"github.com/stretchr/testify/assert"
 )
 
 func TestJSONSchemaCmd(t *testing.T) {
-	c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"}, cmd.NewFakeGRPCServer())
+	c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"},
+		cmd.NewFakeGRPCServer(), server.NewFakeHTTPServer())
 
 	buf := new(bytes.Buffer)
 	c.SetOut(buf)

cmd/root.go

@@ -3,13 +3,15 @@ package cmd
 import (
 	"os"
 
+	"github.com/linuxsuren/api-testing/pkg/server"
 	"github.com/linuxsuren/api-testing/pkg/version"
 	fakeruntime "github.com/linuxsuren/go-fake-runtime"
 	"github.com/spf13/cobra"
 )
 
 // NewRootCmd creates the root command
-func NewRootCmd(execer fakeruntime.Execer, gRPCServer gRPCServer) (c *cobra.Command) {
+func NewRootCmd(execer fakeruntime.Execer, gRPCServer gRPCServer,
+	httpServer server.HTTPServer) (c *cobra.Command) {
 	c = &cobra.Command{
 		Use:   "atest",
 		Short: "API testing tool",
@@ -18,7 +20,7 @@ func NewRootCmd(execer fakeruntime.Execer, gRPCServer gRPCServer) (c *cobra.Comm
 	c.Version = version.GetVersion()
 	c.AddCommand(createInitCommand(execer),
 		createRunCommand(), createSampleCmd(),
-		createServerCmd(gRPCServer), createJSONSchemaCmd(),
+		createServerCmd(gRPCServer, httpServer), createJSONSchemaCmd(),
 		createServiceCommand(execer), createFunctionCmd())
 	return
 }

cmd/root_test.go

@@ -5,6 +5,7 @@ import (
 
 	"github.com/stretchr/testify/assert"
 
+	"github.com/linuxsuren/api-testing/pkg/server"
 	fakeruntime "github.com/linuxsuren/go-fake-runtime"
 )
 
@@ -15,18 +16,18 @@ func TestCreateRunCommand(t *testing.T) {
 	init := createInitCommand(fakeruntime.FakeExecer{})
 	assert.Equal(t, "init", init.Use)
 
-	server := createServerCmd(&fakeGRPCServer{})
-	assert.NotNil(t, server)
-	assert.Equal(t, "server", server.Use)
+	s := createServerCmd(&fakeGRPCServer{}, server.NewFakeHTTPServer())
+	assert.NotNil(t, s)
+	assert.Equal(t, "server", s.Use)
 
-	root := NewRootCmd(fakeruntime.FakeExecer{}, NewFakeGRPCServer())
+	root := NewRootCmd(fakeruntime.FakeExecer{}, NewFakeGRPCServer(), server.NewFakeHTTPServer())
 	root.SetArgs([]string{"init", "-k=demo.yaml", "--wait-namespace", "demo", "--wait-resource", "demo"})
 	err := root.Execute()
 	assert.Nil(t, err)
 }
 
 func TestRootCmd(t *testing.T) {
-	c := NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"}, NewFakeGRPCServer())
+	c := NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"}, NewFakeGRPCServer(), server.NewFakeHTTPServer())
 	assert.NotNil(t, c)
 	assert.Equal(t, "atest", c.Use)
 }

cmd/sample_test.go

@@ -5,13 +5,15 @@ import (
 	"testing"
 
 	"github.com/linuxsuren/api-testing/cmd"
+	"github.com/linuxsuren/api-testing/pkg/server"
 	"github.com/linuxsuren/api-testing/sample"
 	fakeruntime "github.com/linuxsuren/go-fake-runtime"
 	"github.com/stretchr/testify/assert"
 )
 
 func TestSampleCmd(t *testing.T) {
-	c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"}, cmd.NewFakeGRPCServer())
+	c := cmd.NewRootCmd(fakeruntime.FakeExecer{ExpectOS: "linux"},
+		cmd.NewFakeGRPCServer(), server.NewFakeHTTPServer())
 
 	buf := new(bytes.Buffer)
 	c.SetOut(buf)

cmd/server.go

@@ -5,29 +5,44 @@ import (
 	"fmt"
 	"log"
 	"net"
+	"net/http"
+	"path"
 
+	"github.com/grpc-ecosystem/grpc-gateway/v2/runtime"
 	"github.com/linuxsuren/api-testing/pkg/server"
+	"github.com/linuxsuren/api-testing/pkg/testing"
 	"github.com/spf13/cobra"
 	"google.golang.org/grpc"
 )
 
-func createServerCmd(gRPCServer gRPCServer) (c *cobra.Command) {
-	opt := &serverOption{gRPCServer: gRPCServer}
+func createServerCmd(gRPCServer gRPCServer, httpServer server.HTTPServer) (c *cobra.Command) {
+	opt := &serverOption{
+		gRPCServer: gRPCServer,
+		httpServer: httpServer,
+	}
 	c = &cobra.Command{
 		Use:   "server",
 		Short: "Run as a server mode",
 		RunE:  opt.runE,
 	}
 	flags := c.Flags()
 	flags.IntVarP(&opt.port, "port", "p", 7070, "The RPC server port")
+	flags.IntVarP(&opt.httpPort, "http-port", "", 8080, "The HTTP server port")
 	flags.BoolVarP(&opt.printProto, "print-proto", "", false, "Print the proto content and exit")
+	flags.StringVarP(&opt.localStorage, "local-storage", "", "", "The local storage path")
+	flags.StringVarP(&opt.consolePath, "console-path", "", "", "The path of the console")
 	return
 }
 
 type serverOption struct {
 	gRPCServer gRPCServer
-	port       int
-	printProto bool
+	httpServer server.HTTPServer
+
+	port         int
+	httpPort     int
+	printProto   bool
+	localStorage string
+	consolePath  string
 }
 
 func (o *serverOption) runE(cmd *cobra.Command, args []string) (err error) {
@@ -38,19 +53,56 @@ func (o *serverOption) runE(cmd *cobra.Command, args []string) (err error) {
 		return
 	}
 
-	var lis net.Listener
+	var (
+		lis     net.Listener
+		httplis net.Listener
+	)
 	lis, err = net.Listen("tcp", fmt.Sprintf(":%d", o.port))
 	if err != nil {
 		return
 	}
+	httplis, err = net.Listen("tcp", fmt.Sprintf(":%d", o.httpPort))
+	if err != nil {
+		return
+	}
+
+	loader := testing.NewFileLoader()
+	if o.localStorage != "" {
+		if err = loader.Put(o.localStorage); err != nil {
+			return
+		}
+	}
 
+	removeServer := server.NewRemoteServer(loader)
 	s := o.gRPCServer
-	server.RegisterRunnerServer(s, server.NewRemoteServer())
-	log.Printf("server listening at %v", lis.Addr())
-	s.Serve(lis)
+	go func() {
+		server.RegisterRunnerServer(s, removeServer)
+		log.Printf("gRPC server listening at %v", lis.Addr())
+		s.Serve(lis)
+	}()
+
+	mux := runtime.NewServeMux()
+	err = server.RegisterRunnerHandlerServer(cmd.Context(), mux, removeServer)
+	if err == nil {
+		mux.HandlePath("GET", "/", frontEndHandlerWithLocation(o.consolePath))
+		mux.HandlePath("GET", "/assets/{asset}", frontEndHandlerWithLocation(o.consolePath))
+		o.httpServer.WithHandler(mux)
+		err = o.httpServer.Serve(httplis)
+	}
 	return
 }
 
+func frontEndHandlerWithLocation(consolePath string) func(w http.ResponseWriter, r *http.Request, pathParams map[string]string) {
+	return func(w http.ResponseWriter, r *http.Request, pathParams map[string]string) {
+		target := r.URL.Path
+		if target == "/" {
+			target = "/index.html"
+		}
+
+		http.ServeFile(w, r, path.Join(consolePath, target))
+	}
+}
+
 type gRPCServer interface {
 	Serve(lis net.Listener) error
 	grpc.ServiceRegistrar