Add dashboard 💻 (#32)

Co-authored-by: Manuel Ganter <manuel.ganter@hotmail.de>

.github/workflows/tests.yaml

@@ -44,6 +44,9 @@ jobs:
       matrix:
         go: ['1.16', '1.17']
     steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '16'
       - uses: actions/setup-go@v1
         with:
           go-version: ${{ matrix.go }}

Dockerfile

@@ -18,6 +18,13 @@ COPY controllers/ controllers/
 # Build
 RUN CGO_ENABLED=0 GOOS=linux GO111MODULE=on go build -a -o kubeteach main.go
 
+# Build vue app
+FROM node:lts-alpine as builder-vue
+WORKDIR /dashboard
+COPY dashboard /dashboard
+RUN npm install
+RUN npm run build
+
 # Use distroless as minimal base image to package the manager binary
 # Refer to https://github.com/GoogleContainerTools/distroless for more details
 FROM gcr.io/distroless/static:nonroot
@@ -26,6 +33,8 @@ LABEL org.opencontainers.image.source=https://github.com/dergeberl/kubeteach
 
 WORKDIR /
 COPY --from=builder /workspace/kubeteach .
+COPY --from=builder-vue /dashboard/dist /dashboard
+
 USER 65532:65532
 
 ENTRYPOINT ["/kubeteach"]

Makefile

@@ -1,6 +1,6 @@
 
 # Image URL to use all building/pushing image targets
-IMG ?= ghcr.io/dergeberl/kubeteach:latest
+IMG ?= ghcr.io/dergeberl/kubeteach:dev
 # ENVTEST_K8S_VERSION refers to the version of kubebuilder assets to be downloaded by envtest binary.
 ENVTEST_K8S_VERSION = 1.20
 
@@ -54,16 +54,19 @@ vet: ## Run go vet against code.
 lint: golangci-lint ## Run go lint against code.
 	$(GOLANGCI_LINT) run
 
-test: manifests generate fmt vet lint envtest ## Run tests.
+test: manifests generate fmt vet lint envtest build-dashboard ## Run tests.
 		KUBEBUILDER_ASSETS="$(shell $(ENVTEST) use $(ENVTEST_K8S_VERSION) -p path)" go test ./... -coverprofile cover.out
 
 ##@ Build
 
 build: generate fmt vet ## Build manager binary.
 	go build -o bin/manager main.go
 
-run: manifests generate fmt vet ## Run a controller from your host.
-	go run ./main.go
+build-dashboard: generate fmt vet ## Build manager binary.
+	cd dashboard && npm ci && npm run build
+
+run: manifests generate fmt vet build-dashboard ## Run a controller from your host.
+	go run ./main.go -dashboard -dashboard-content="./dashboard/dist"
 
 docker-build: test ## Build docker image with the manager.
 	docker build -t ${IMG} .

README.md

@@ -60,6 +60,29 @@ helm install exerciseset1 <helm-chart> --namespace exerciseset --create-namespac
 :warning: Don't use the helm flag `--wait`, because some deployments won't get ready and the helm install command will fail.
 
 
+#### Enable kubeteach dashboard
+
+:warning: The dashboard is an experimental feature. DO NOT MAKE IT AVAILABLE VIA INTERNET! :warning:
+
+To enable the dashboard you need to add  2 settings for the helm install command (see above):
+```bash
+--set kubeteach.dashboard.enabled=true --set kubeteach.webterminal.enabled=true
+```
+
+Example:
+```bash
+helm install exerciseset1 <helm-chart> --namespace exerciseset --set kubeteach.dashboard.enabled=true --set kubeteach.webterminal.enabled=true
+...
+You can use it with the following command (to forward a local port):
+kubectl port-forward -n exerciseset service/kubeteach-core-dashboard 8080:80
+
+Now you can access the dashboard via http://localhost:8080
+Username: kubeteach
+Password: <yourpassword>
+```
+
+The command will prompt a command (`kubectl port-forward`) and the credentials which are needed to log in into the dashboard.
+
 ### Update kubeteach
 
 To update kubeteach you can run the following commands.

dashboard/.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

dashboard/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}