Rewrite of UI

.gitignore

@@ -19,7 +19,7 @@
 
 ### Frontend ###
 web/node_modules
-web/dist/files
+web/dist
 web/*.log
 web/.env
 
@@ -33,7 +33,7 @@ docker-compose.yml
 /.env
 extras/
 release/
-build/
+./build/
 cli/release/
 
 server/swagger/files/*.json

.vscode/launch.json

@@ -19,6 +19,24 @@
       "mode": "debug",
       "program": "${workspaceFolder}/cmd/drone-agent/",
       "cwd": "${workspaceFolder}"
+    },
+    {
+      "name": "Woodpecker UI",
+      "type": "node",
+      "request": "launch",
+      "runtimeExecutable": "yarn",
+      "runtimeArgs": [
+        "start",
+      ],
+      "cwd": "${workspaceFolder}/web",
+      "port": 3000,
+      "resolveSourceMapLocations": [
+        "${workspaceFolder}/web/**",
+        "!**/node_modules/**"
+      ],
+      "skipFiles": [
+        "<node_internals>/**"
+      ]
     }
   ]
 }

.woodpecker/main.yml

@@ -11,15 +11,6 @@ pipeline:
       - make vet
       - make formatcheck
 
-  test-frontend:
-    image: node:10.17.0-stretch
-    group: test
-    commands:
-      - (cd web/; yarn install)
-      - (cd web/; yarn run lesshint)
-      - (cd web/; yarn run lint --quiet)
-      - make test-frontend
-
   test-postgres:
     image: golang:1.16
     group: db-test
@@ -39,9 +30,13 @@ pipeline:
       - go test -timeout 30s github.com/woodpecker-ci/woodpecker/store/datastore
 
   build-frontend:
-    image: node:10.17.0-stretch
+    image: node:14-alpine
     commands:
-      - make build-frontend
+      - cd web/
+      - curl -f https://get.pnpm.io/v6.js | node - add --global pnpm@6
+      - pnpm config set store-dir .pnpm-store
+      - pnpm install
+      - pnpm build
 
   build:
     image: golang:1.16
@@ -152,3 +147,6 @@ services:
     environment:
       - MYSQL_DATABASE=test
       - MYSQL_ALLOW_EMPTY_PASSWORD=yes
+
+depends_on:
+  - web

.woodpecker/web.yml

@@ -0,0 +1,46 @@
+clone:
+  git:
+    image: plugins/git:next
+
+pipeline:
+  deps:
+    image: node:14-alpine
+    commands:
+      - cd web/
+      - yarn install --frozen-lockfile
+    when:
+      path: "web/*"
+
+  lint:
+    group: test
+    image: node:14-alpine
+    commands:
+      - cd web/
+      - yarn lint
+    when:
+      path: "web/*"
+
+  formatcheck:
+    group: test
+    image: node:14-alpine
+    commands:
+      - cd web/
+      - yarn formatcheck
+    when:
+      path: "web/*"
+
+  typecheck:
+    group: test
+    image: node:14-alpine
+    commands:
+      - cd web/
+      - yarn typecheck
+    when:
+      path: "web/*"
+
+  build:
+    image: node:14-alpine
+    commands:
+      - yarn build
+    when:
+      path: "web/*"

Makefile

@@ -45,9 +45,6 @@ test-agent:
 test-server:
 	$(DOCKER_RUN) go test -race -timeout 30s github.com/woodpecker-ci/woodpecker/cmd/drone-server
 
-test-frontend:
-	(cd web/; yarn run test)
-
 test-lib:
 	$(DOCKER_RUN) go test -race -timeout 30s $(shell go list ./... | grep -v '/cmd/')
 
@@ -59,9 +56,6 @@ build-agent:
 build-server:
 	$(DOCKER_RUN) go build -o build/drone-server github.com/woodpecker-ci/woodpecker/cmd/drone-server
 
-build-frontend:
-	(cd web/; yarn run build)
-
 build: build-agent build-server
 
 release-agent:

cmd/drone-server/flags.go

@@ -69,6 +69,12 @@ var flags = []cli.Flag{
 		Usage:  "serve the website from disk",
 		Hidden: true,
 	},
+	cli.StringFlag{
+		EnvVar: "WOODPECKER_WWW_PROXY",
+		Name:   "www-proxy",
+		Usage:  "serve the website with a proxy",
+		Hidden: true,
+	},
 	cli.StringSliceFlag{
 		EnvVar: "DRONE_ADMIN,WOODPECKER_ADMIN",
 		Name:   "admin",
@@ -89,12 +95,6 @@ var flags = []cli.Flag{
 		Name:   "open",
 		Usage:  "enable open user registration",
 	},
-	cli.StringFlag{
-		EnvVar: "DRONE_DOCS,WOODPECKER_DOCS",
-		Name:   "docs",
-		Usage:  "link to user documentation",
-		Value:  "https://woodpecker-ci.github.io/",
-	},
 	cli.DurationFlag{
 		EnvVar: "DRONE_SESSION_EXPIRES,WOODPECKER_SESSION_EXPIRES",
 		Name:   "session-expires",

cmd/drone-server/server.go

@@ -20,6 +20,7 @@ import (
 	"errors"
 	"net"
 	"net/http"
+	"net/http/httputil"
 	"net/url"
 	"os"
 	"path/filepath"
@@ -89,13 +90,30 @@ func server(c *cli.Context) error {
 	store_ := setupStore(c)
 	setupEvilGlobals(c, store_, remote_)
 
-	// we are switching from gin to httpservermux|treemux,
-	// so if this code looks strange, that is why.
-	tree := setupTree(c)
+	proxyWebUI := c.String("www-proxy")
+
+	var webUIServe func(w http.ResponseWriter, r *http.Request)
+
+	if proxyWebUI == "" {
+		// we are switching from gin to httpservermux|treemux,
+		webUIServe = setupTree(c).ServeHTTP
+	} else {
+		origin, _ := url.Parse(proxyWebUI)
+
+		director := func(req *http.Request) {
+			req.Header.Add("X-Forwarded-Host", req.Host)
+			req.Header.Add("X-Origin-Host", origin.Host)
+			req.URL.Scheme = origin.Scheme
+			req.URL.Host = origin.Host
+		}
+
+		proxy := &httputil.ReverseProxy{Director: director}
+		webUIServe = proxy.ServeHTTP
+	}
 
 	// setup the server and start the listener
 	handler := router.Load(
-		tree,
+		webUIServe,
 		ginrus.Ginrus(logrus.StandardLogger(), time.RFC3339, true),
 		middleware.Version,
 		middleware.Config(c),

cmd/drone-server/setup.go

@@ -211,7 +211,6 @@ func setupTree(c *cli.Context) *httptreemux.ContextMux {
 	web.New(
 		web.WithDir(c.String("www")),
 		web.WithSync(time.Hour*72),
-		web.WithDocs(c.String("docs")),
 	).Register(tree)
 	return tree
 }

router/router.go

@@ -17,7 +17,6 @@ package router
 import (
 	"net/http"
 
-	"github.com/dimfeld/httptreemux"
 	"github.com/gin-gonic/gin"
 
 	"github.com/woodpecker-ci/woodpecker/router/middleware/header"
@@ -30,7 +29,7 @@ import (
 )
 
 // Load loads the router
-func Load(mux *httptreemux.ContextMux, middleware ...gin.HandlerFunc) http.Handler {
+func Load(serveHTTP func(w http.ResponseWriter, r *http.Request), middleware ...gin.HandlerFunc) http.Handler {
 
 	e := gin.New()
 	e.Use(gin.Recovery())
@@ -49,7 +48,8 @@ func Load(mux *httptreemux.ContextMux, middleware ...gin.HandlerFunc) http.Handl
 				session.User(c),
 			),
 		)
-		mux.ServeHTTP(c.Writer, req)
+
+		serveHTTP(c.Writer, req)
 	})
 
 	e.GET("/logout", server.GetLogout)
@@ -188,6 +188,8 @@ func Load(mux *httptreemux.ContextMux, middleware ...gin.HandlerFunc) http.Handl
 		debugger.GET("/pprof/trace", debug.TraceHandler())
 	}
 
+	e.GET("/api/web-config.js", web.WebConfig)
+
 	monitor := e.Group("/metrics")
 	{
 		monitor.GET("", metrics.PromHandler())

server/hook.go

@@ -330,7 +330,7 @@ func findOrPersistPipelineConfig(repo *model.Repo, build *model.Build, remoteYam
 			RepoID: build.RepoID,
 			Data:   string(remoteYamlConfig.Data),
 			Hash:   sha,
-			Name:   sanitizePath(remoteYamlConfig.Name, repo.Config),
+			Name:   sanitizePath(remoteYamlConfig.Name),
 		}
 		err = Config.Storage.Config.ConfigCreate(conf)
 		if err != nil {

server/procBuilder.go

@@ -18,6 +18,7 @@ import (
 	"fmt"
 	"math/rand"
 	"net/url"
+	"path/filepath"
 	"sort"
 	"strings"
 
@@ -78,7 +79,7 @@ func (b *procBuilder) Build() ([]*buildItem, error) {
 				PGID:    pidSequence,
 				State:   model.StatusPending,
 				Environ: axis,
-				Name:    sanitizePath(y.Name, b.Repo.Config),
+				Name:    sanitizePath(y.Name),
 			}
 
 			metadata := metadataFromStruct(b.Repo, b.Curr, b.Last, proc, b.Link)
@@ -358,9 +359,9 @@ func metadataFromStruct(repo *model.Repo, build, last *model.Build, proc *model.
 	}
 }
 
-func sanitizePath(path string, configFolder string) string {
+func sanitizePath(path string) string {
+	path = filepath.Base(path)
 	path = strings.TrimSuffix(path, ".yml")
-	path = strings.TrimPrefix(path, configFolder)
 	path = strings.TrimPrefix(path, ".")
 	return path
 }