Fetch ClusterClasses from kube-apiserver (#10)

* bump next to 14.1.1 Signed-off-by: Paul Hildebrandt <[email protected]> * remove clusterstack form & fetch wip Signed-off-by: Paul Hildebrandt <[email protected]> * wip Signed-off-by: Paul Hildebrandt <[email protected]> * wip Signed-off-by: Paul Hildebrandt <[email protected]> * new form widgets Signed-off-by: Paul Hildebrandt <[email protected]> * simple form output Signed-off-by: Paul Hildebrandt <[email protected]> * custom templates Signed-off-by: Paul Hildebrandt <[email protected]> * import rjsf tailwind components Signed-off-by: Paul Hildebrandt <[email protected]> * old form for reference Signed-off-by: Paul Hildebrandt <[email protected]> * dependencies bump Signed-off-by: Paul Hildebrandt <[email protected]> * custom fields Signed-off-by: Paul Hildebrandt <[email protected]> * fetch from capi-jsgen Signed-off-by: Paul Hildebrandt <[email protected]> * bump Signed-off-by: Paul Hildebrandt <[email protected]> * tailwind widgets Signed-off-by: Paul Hildebrandt <[email protected]> * stack selector Signed-off-by: Paul Hildebrandt <[email protected]> * new uischema Signed-off-by: Paul Hildebrandt <[email protected]> * separation in cluster, machines and variables Signed-off-by: Paul Hildebrandt <[email protected]> * full form Signed-off-by: Paul Hildebrandt <[email protected]> * bump Signed-off-by: Paul Hildebrandt <[email protected]> * pre-refactor Signed-off-by: Paul Hildebrandt <[email protected]> * tmp Signed-off-by: Paul Hildebrandt <[email protected]> * bump Signed-off-by: Paul Hildebrandt <[email protected]> * environment variables Signed-off-by: Paul Hildebrandt <[email protected]> * fullform refactor Signed-off-by: Paul Hildebrandt <[email protected]> * gitignore changes Signed-off-by: Paul Hildebrandt <[email protected]> * enum fields for select widgets Signed-off-by: Paul Hildebrandt <[email protected]> * docs Signed-off-by: Paul Hildebrandt <[email protected]> * working dex auth flow Signed-off-by: Paul Hildebrandt <[email protected]> * tmp Signed-off-by: Paul Hildebrandt <[email protected]> * download button wip Signed-off-by: Paul Hildebrandt <[email protected]> * working download button Signed-off-by: Paul Hildebrandt <[email protected]> * clean-up Signed-off-by: Paul Hildebrandt <[email protected]> * more clean-up Signed-off-by: Paul Hildebrandt <[email protected]> --------- Signed-off-by: Paul Hildebrandt <[email protected]>
SovereignCloudStack · Dec 4, 2024 · 74abc52 · 74abc52
1 parent b8510c3
commit 74abc52
Show file tree

Hide file tree

Showing 93 changed files with 4,742 additions and 2,374 deletions.
diff --git a/.env.example b/.env.example
@@ -0,0 +1,6 @@
+API_URL= # URL of your capi-jsgen instance
+
+AUTH_SECRET= # Generate with `openssl rand -base64 32`
+AUTH_TRUST_HOST=TRUE
+DEX_URL= # URL of your dex instance
+DEX_CLIENT_ID= # Client ID of your dex client
diff --git a/.gitignore b/.gitignore
@@ -25,6 +25,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # typescript
 *.tsbuildinfo
@@ -34,5 +35,5 @@ next-env.d.ts
 package-lock.json
 yarn.lock
 
-# contentlayer
-.contentlayer
+# text editor
+.vscode/*
diff --git a/.prettierignore b/.prettierignore
@@ -1,5 +1,8 @@
 .git/
+.next/
+.github/
+chart/
+public/
 pnpm-lock.yaml
-templates/
-src/components/clusterstack-form.tsx
-src/components/cluster-form.tsx
+.env
+.env.example
diff --git a/Dockerfile b/Dockerfile
@@ -22,6 +22,13 @@ WORKDIR /app
 ENV NODE_ENV production
 ENV NEXT_TELEMETRY_DISABLED 1
 
+ENV API_URL https://capi-jsgen.moin.k8s.scs.community
+
+ENV AUTH_SECRET=oE/wTr1t1bqOK8zfVBffPEI7uz2NpRAUay8ZJF1R+uc=
+ENV AUTH_TRUST_HOST TRUE
+ENV DEX_URL https://dex.k8s.scs.community
+ENV DEX_CLIENT_ID kubectl
+
 RUN addgroup --system --gid 1001 nodejs
 RUN adduser --system --uid 1001 nextjs
 

diff --git a/README.md b/README.md
@@ -1,20 +1,12 @@
 # Cluster Gen
 
-Proof of concept Web UI for creating Cluster objects based on SCS Cluster Stacks.
+Web UI for creating Cluster objects based on SCS Cluster Stacks.
 
 ## Workflow
 
-- Read cluster stack and clusterclass templates
-- Render/populate yaml in live editor with good defaults
-- On "Download": perform form validation, create yaml file and open up download prompt (all client-side)
-
-## Limitations (to be implemented)
-
-- ClusterClass and Cluster Stack templates are [hard-coded](src/components/cluster-form.tsx#L90) and limited to the `scs/alpha` Cluster Stacks
-  - Ideally they should reflect the current state of each specific Cluster Stack (e.g. metal3/kamaji)
-  - Possbile solution: Either fetch and parse the ClusterClasses using the GitHub API or use the schema provided by [kube-apiserver](https://github.com/SovereignCloudStack/cluster-gen/issues/3)
-- Cluster Stack releases are [hard-coded](src/components/clusterstack-form.tsx#L116)
-  - Possible solution: Use GitHub API to get releases
+- Read ClusterClass schema definitions from the kube-apiserver of your cluster via the API provided by [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen)
+- Render yaml form with live editor
+- On Download: perform form validation, create yaml file and open up download prompt
 
 ## Built with
 
@@ -23,15 +15,28 @@ Proof of concept Web UI for creating Cluster objects based on SCS Cluster Stacks
 - [pnpm](https://pnpm.io/)
 - [Tailwind CSS](https://tailwindcss.com/)
 - [shadcn/ui](https://ui.shadcn.com/)
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+- [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen)
 
 ## Setup
 
-### Prerequisites
+### Requirements
 
-- [pnpm](https://pnpm.io/installation)
+- A running cluster in which you apply your ClusterClass definitions
+- An instance of [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen) running in your cluster
 
 ### Develop locally
 
+#### Prerequisites
+
+- [pnpm](https://pnpm.io/installation)
+
+#### Environment variables
+
+- Create a `.env` file similar to `.env.example` in the root of the application and fill in all values.
+
+#### Start the development server
+
 ```bash
 pnpm i
 pnpm dev
@@ -49,4 +54,17 @@ pnpm start
 ```bash
 docker build -t cluster-gen .
 docker run -p 3000:3000 cluster-gen
-```
+```
+
+#### Helm
+
+Inside `charts/` you can find a minimal chart to deploy Cluster Gen on Kubernetes with a Service and an Ingress.
+
+### Release
+
+A new [release](https://github.com/SovereignCloudStack/cluster-gen/releases) and build is [triggered](https://github.com/SovereignCloudStack/cluster-gen/blob/main/.github/workflows/release.yml) by a version tag push
+
+```bash
+git tag v0.0.x
+git push origin v0.0.x
+```
diff --git a/chart/Chart.yaml b/chart/Chart.yaml
@@ -1,4 +1,4 @@
 apiVersion: v2
 name: cluster-gen
 version: 1.0.0
-description: A minimal helm-chart to deploy cluster-gen with a service and an ingress. You can not do much, but enough.
+description: A minimal helm-chart to deploy cluster-gen with a service and an ingress.
diff --git a/chart/templates/deploy.yaml b/chart/templates/deploy.yaml
@@ -15,7 +15,7 @@ spec:
         app: cluster-gen
     spec:
       containers:
-      - image: {{ .Values.image }}
-        name: cluster-gen
-        ports:
-        - containerPort: 3000
+        - image: { { .Values.image } }
+          name: cluster-gen
+          ports:
+            - containerPort: 3000
diff --git a/chart/templates/svc.yaml b/chart/templates/svc.yaml
@@ -6,8 +6,8 @@ metadata:
   name: cluster-gen
 spec:
   ports:
-  - port: 3000
-    protocol: TCP
-    targetPort: 3000
+    - port: 3000
+      protocol: TCP
+      targetPort: 3000
   selector:
     app: cluster-gen
diff --git a/chart/values.yaml b/chart/values.yaml
@@ -1,5 +1,5 @@
 # The image that will be used in the deployment
-image: registry.scs.community/cluster-gen/cluster-gen:v0.0.1
+image: registry.scs.community/cluster-gen/cluster-gen:v0.0.8
 
 # Ingress related config
 ingress:

diff --git a/docs/getting_started.md b/docs/getting_started.md
@@ -0,0 +1,46 @@
+# Getting started
+
+You can try out our [hosted version](https://cluster-gen.moin.k8s.scs.community) on SCS infrastructure.
+Alternatively you can simply follow the setup instructions outlined below to deploy your own version of the UI.
+
+## Setup
+
+### Requirements
+
+- A running cluster in which you apply your ClusterClass definitions
+- An instance of [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen) running in your cluster
+
+### Develop locally
+
+#### Prerequisites
+
+- [pnpm](https://pnpm.io/installation)
+
+#### Environment variables
+
+- Create a `.env` file similar to `.env.example` in the root of the application and fill in all values.
+
+#### Start the development server
+
+```bash
+pnpm i
+pnpm dev
+```
+
+### Build for production
+
+```bash
+pnpm build
+pnpm start
+```
+
+#### Docker
+
+```bash
+docker build -t cluster-gen .
+docker run -p 3000:3000 cluster-gen
+```
+
+#### Helm
+
+Inside `charts/` you can find a minimal chart to deploy Cluster Gen on Kubernetes with a Service and an Ingress.
diff --git a/docs/overview.md b/docs/overview.md
@@ -0,0 +1,19 @@
+# Overview
+
+[Cluster Gen](https://cluster-gen.moin.k8s.scs.community) is a simple Web UI for generating Cluster objects based on Cluster Stacks
+
+## Workflow
+
+- Read clusterclass schema definitions from the kube-apiserver of the moin-cluster via the API provided by [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen)
+- Render yaml form in live editor with sane defaults
+- On Download: perform form validation, create yaml file and open up download prompt
+
+## Built with
+
+- [Next.js](https://nextjs.org/)
+- [Typescript](https://www.typescriptlang.org/)
+- [pnpm](https://pnpm.io/)
+- [Tailwind CSS](https://tailwindcss.com/)
+- [shadcn/ui](https://ui.shadcn.com/)
+- [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form)
+- [capi-jsgen](https://github.com/SovereignCloudStack/capi-jsgen)
diff --git a/package.json b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "cluster-gen",
-  "version": "0.1.0",
+  "version": "0.0.8",
+  "description": "Web UI for creating Cluster objects based on SCS Cluster Stacks",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -11,46 +12,56 @@
     "format:fix": "prettier --write ."
   },
   "dependencies": {
-    "@hookform/resolvers": "^3.6.0",
-    "@radix-ui/react-dropdown-menu": "^2.1.0",
+    "@hookform/resolvers": "^3.9.0",
+    "@radix-ui/react-checkbox": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-select": "^2.1.0",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tabs": "^1.1.0",
+    "@radix-ui/react-tabs": "^1.1.1",
+    "@radix-ui/react-toast": "^1.2.2",
+    "@radix-ui/react-tooltip": "^1.1.3",
+    "@react-icons/all-files": "^4.1.0",
+    "@rjsf/core": "^5.21.2",
+    "@rjsf/utils": "^5.21.2",
+    "@rjsf/validator-ajv8": "^5.21.2",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
-    "geist": "^1.3.0",
+    "geist": "^1.3.1",
     "install": "^0.13.0",
-    "lucide-react": "^0.350.0",
-    "next": "14.1.0",
-    "next-themes": "^0.2.1",
+    "js-yaml": "^4.1.0",
+    "lucide-react": "^0.453.0",
+    "next": "14.2.15",
+    "next-auth": "5.0.0-beta.22",
+    "next-themes": "^0.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.52.0",
-    "react-syntax-highlighter": "^15.5.0",
+    "react-hook-form": "^7.53.1",
+    "react-syntax-highlighter": "^15.6.1",
     "react-wrap-balancer": "^1.1.1",
-    "tailwind-merge": "^2.3.0",
+    "sort-json": "^2.0.1",
+    "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
-    "vaul": "^0.9.1",
+    "yaml": "^2.6.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@types/node": "^20.14.6",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
+    "@types/js-yaml": "^4.0.9",
+    "@types/node": "^22.7.7",
+    "@types/react": "^18.3.11",
+    "@types/react-dom": "^18.3.1",
     "@types/react-syntax-highlighter": "^15.5.13",
-    "autoprefixer": "^10.4.19",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "14.1.0",
+    "@types/sort-json": "^2.0.3",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.13.0",
+    "eslint-config-next": "14.2.15",
     "eslint-config-prettier": "^9.1.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.3.2",
-    "prettier-plugin-tailwindcss": "^0.6.5",
-    "shiki": "^1.7.0",
-    "tailwindcss": "^3.4.4",
-    "typescript": "^5.4.5"
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.8",
+    "tailwindcss": "^3.4.14",
+    "typescript": "^5.6.3"
   }
 }