Merge remote-tracking branch 'vertex-client/main'

.dockerignore

@@ -0,0 +1,2 @@
+.yarn
+node_modules

.editorconfig

@@ -0,0 +1,13 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 4
+indent_style = space
+insert_final_newline = false
+tab_width = 4
+
+[*.yml]
+indent_size = 2
+tab_width = 2

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/"
+    schedule:
+      interval: "weekly"
+    groups:
+      node-dependencies:
+        patterns:
+          - "*"

.github/workflows/client-dev.yml

@@ -0,0 +1,47 @@
+name: Development
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - "client/**"
+      - ".github/workflows/client-dev.yml"
+
+jobs:
+  build:
+    name: Build and push container
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Setup metadata
+        id: meta
+        uses: docker/metadata-action@v5
+        with:
+          images: ghcr.io/${{ github.repository }}
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        if: github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v')
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Build and push
+        uses: docker/build-push-action@v5
+        with:
+          push: ${{ github.ref == 'refs/heads/main' || startsWith(github.ref, 'refs/tags/v') }}
+          context: .
+          file: client/docker/Dockerfile
+          tags: ${{ steps.meta.outputs.tags }}
+          platforms: linux/amd64,linux/arm64,linux/arm
+          no-cache: true

.github/workflows/client-release.yml

@@ -0,0 +1,47 @@
+name: Release
+
+on:
+  push:
+    tags:
+      - "*"
+
+permissions:
+  contents: write
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Fetch tags
+        run: git fetch --force --tags
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
+
+      - name: Build
+        run: yarn workspace @vertex-center/client build
+
+      - name: Add version file
+        run: echo ${{ github.ref_name }} > ./client/dist/version.txt
+
+      - name: Create .zip
+        run: zip client.zip ./client/dist -r
+
+      - name: Publish
+        uses: softprops/action-gh-release@v1
+        with:
+          files: client.zip

.gitignore

@@ -0,0 +1,11 @@
+node_modules
+yarn-debug.log*
+yarn-error.log*
+.pnp.*
+.yarn
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store

LICENSE.md

@@ -0,0 +1,21 @@
+# MIT License
+
+Copyright (c) 2023 Quentin Guidée
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

client/.gitignore

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

client/.prettierrc

@@ -0,0 +1,3 @@
+{
+    "tabWidth": 4
+}

client/README.md

@@ -0,0 +1,48 @@
+<p align="center">
+    <img height="96" src="https://github.com/vertex-center/vertex-design/raw/main/logos/transparent/vertex_logo_transparent.png" alt="Vertex logo" />
+</p>
+<h1 align="center">Vertex Client</h1>
+
+<p align="center">
+<img alt="GitHub release (latest by date)" src="https://img.shields.io/github/v/release/vertex-center/client?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+<img alt="GitHub license" src="https://img.shields.io/github/license/vertex-center/client?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/vertex-center/client?color=DE3C4B&labelColor=1E212B&style=for-the-badge">
+</p>
+
+## About
+
+### Vertex
+
+Vertex Web UI allows you to interact with your Vertex container easily. You can monitor, setup, start and stop services
+without any technical knowledge.
+
+<img width="1524" alt="image" src="https://github.com/vertex-center/client/assets/12123721/36c0a95d-0ff4-416a-9d13-2381f6af88f5">
+<img width="1524" alt="image" src="https://github.com/vertex-center/client/assets/12123721/d9f8f073-7e1f-48d5-abd3-ba31ee1b6f43">
+
+## Install
+
+### Method 1: From Vertex
+
+When you start [Vertex](https://github.com/vertex-center/vertex), the Web UI is automatically downloaded. Access the UI
+from http://localhost:6130/
+
+### Method 2: From sources
+
+1. Clone this repository
+    ```bash
+    https://github.com/vertex-center/client.git vertex-client
+    cd vertex-client
+    ```
+
+2. Start the server
+    ```bash
+    npm run start
+    ```
+
+3. Access from http://localhost:3000/
+
+## License
+
+* [Vertex WebUI](https://github.com/vertex-center/client) is released under the [MIT License](./LICENSE.md).
+* All 4 Catppuccin themes come from [Catppuccin](https://github.com/catppuccin/catppuccin), also released under
+  the [MIT License](https://github.com/catppuccin/catppuccin/blob/main/LICENSE)

client/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+    e2e: {
+        baseUrl: "http://localhost:5173/#",
+        watchForFileChanges: false,
+        setupNodeEvents(on, config) {
+            // implement node event listeners here
+        },
+    },
+});

client/cypress/e2e/apps/vx-instances.cy.ts

@@ -0,0 +1,88 @@
+const createContainerAndNavigate = (to: string) => {
+    cy.visit("/containers");
+    cy.request(
+        "POST",
+        "http://localhost:6130/api/service/postgres/install"
+    ).then((res: any) => {
+        cy.visit(`/containers/${res.body.uuid}${to}`);
+    });
+};
+
+describe("The Vertex Containers app", () => {
+    it("loads", () => {
+        cy.visit("/containers");
+    });
+
+    it("can create a new container", () => {
+        // Navigate to the create container page
+        cy.visit("/containers");
+        cy.contains("Create container").click();
+        cy.url().should("include", "/containers/add");
+
+        // Create an container
+        cy.contains("Postgres").click();
+        cy.get("button").contains("Create container").click();
+
+        // Go back
+        cy.visit("/containers");
+        cy.contains("Postgres");
+    });
+
+    it("can navigate to an container", () => {
+        cy.request(
+            "POST",
+            "http://localhost:6130/api/containers/service/postgres/install"
+        );
+
+        // Navigate to
+        cy.visit("/containers");
+        cy.contains("Postgres").click();
+    });
+
+    it("can navigate to the container home page", () => {
+        createContainerAndNavigate("/home");
+        cy.get("h2").contains("URLs");
+    });
+
+    it("can navigate to the container logs page", () => {
+        createContainerAndNavigate("/logs");
+        cy.get("h2").contains("Logs");
+    });
+
+    it("can navigate to the container Docker page", () => {
+        createContainerAndNavigate("/docker");
+        cy.get("h2").contains("Container");
+        cy.get("h2").contains("Image");
+    });
+
+    it("can navigate to the container environment page", () => {
+        createContainerAndNavigate("/environment");
+        cy.get("h2").contains("Environment");
+    });
+
+    it("can navigate to the container updates page", () => {
+        createContainerAndNavigate("/update");
+        cy.get("h2").contains("Update");
+    });
+
+    it("can navigate to the container settings page", () => {
+        createContainerAndNavigate("/settings");
+        cy.get("h2").contains("Settings");
+    });
+
+    it("can delete an container", () => {
+        // Go to the containers page
+        cy.visit("/containers");
+
+        // Create an container
+        createContainerAndNavigate("/");
+
+        // Delete the container
+        cy.contains("Delete").click();
+        cy.get("button").contains("Confirm").click();
+        cy.get("button").contains("Delete").should("not.exist");
+
+        // The url should not end with the container uuid
+        cy.url().should("not.match", /\/[a-z0-9-]{36}$/);
+    });
+});

client/cypress/support/commands.ts

@@ -0,0 +1 @@
+/// <reference types="cypress" />

client/cypress/support/e2e.ts

@@ -0,0 +1,5 @@
+import "./commands";
+
+beforeEach(() => {
+    cy.request("POST", "http://localhost:6130/api/hard-reset");
+});

client/docker/Dockerfile

@@ -0,0 +1,22 @@
+FROM --platform=$BUILDPLATFORM node:alpine3.19 AS build
+
+WORKDIR /app
+
+COPY . .
+
+RUN corepack enable
+RUN yarn install --frozen-lockfile
+RUN yarn workspace @vertex-center/client build
+
+FROM nginx:alpine3.18-slim
+
+COPY --from=build /app/client/dist /usr/share/nginx/html
+COPY client/docker/nginx.conf /etc/nginx/conf.d/default.conf
+COPY client/docker/entrypoint.sh /
+
+RUN ["chmod", "+x", "/entrypoint.sh"]
+ENTRYPOINT ["/entrypoint.sh"]
+
+EXPOSE 80
+
+CMD ["nginx", "-g", "daemon off;"]

client/docker/docker-compose.yml

@@ -0,0 +1,18 @@
+version: '3.8'
+
+services:
+  client:
+    build:
+      context: ..
+      dockerfile: docker/Dockerfile
+    ports:
+      - "6133:80"
+    environment:
+      VERTEX_SQL_ADDR: http://localhost:7512/api
+      VERTEX_REVERSE_PROXY_ADDR: http://localhost:7508/api
+      VERTEX_SERVICE_EDITOR_ADDR: http://localhost:7510/api
+      VERTEX_CONTAINERS_ADDR: http://localhost:7504/api
+      VERTEX_ADMIN_ADDR: http://localhost:7500/api
+      VERTEX_AUTH_ADDR: http://localhost:7502/api
+      VERTEX_TUNNELS_ADDR: http://localhost:7514/api
+      VERTEX_MONITORING_ADDR: http://localhost:7506/api