feat: create web UI (#44)

Create a simple UI using React and Chakra UI

* Added eslint and prettier configurations
* Added header with search bar, GitHub link, and theme switch button
* Add dependabot.yml for UI dependencies

---------

Authored-by: Ehab Younes <ehab.alyounes@gmail.com>

.github/dependabot.yml

@@ -0,0 +1,9 @@
+version: 2
+updates:
+  - package-ecosystem: "npm"
+    directory: "/ui"
+    schedule:
+      interval: "weekly"
+    rebase-strategy: "auto"
+    labels:
+      - dependencies

.github/workflows/docker-ci.yaml

@@ -6,6 +6,7 @@ on:
       - "**.go"
       - "go.mod"
       - "go.sum"
+      - "ui/**"
       - "Dockerfile"
   workflow_dispatch:  
 

Dockerfile

@@ -1,5 +1,11 @@
-FROM golang:1.22.5 AS base
+FROM node:22-alpine3.19 AS ui
+WORKDIR /ui
+COPY ui/package.json ui/package-lock.json .
+RUN npm install
+COPY ui/ .
+RUN npm run build
 
+FROM golang:1.22.5 AS backend
 COPY go.mod go.sum ./
 RUN go mod download
 COPY cmd/ cmd/
@@ -11,5 +17,6 @@ RUN CGO_ENABLED=0 GOOS=linux go build -o /swarm-cd ./cmd/
 FROM alpine:3.2
 WORKDIR /app
 RUN apk add --no-cache ca-certificates && update-ca-certificates
-COPY --from=base /swarm-cd .
+COPY --from=ui /ui/dist/ .
+COPY --from=backend /swarm-cd .
 CMD ["/app/swarm-cd"]

README.md

@@ -4,6 +4,8 @@ A declarative GitOps and Continuous Deployment tool for Docker Swarm.
 
 Inspired by [ArgoCD](https://argo-cd.readthedocs.io/en/stable/).
 
+![SwarmCD UI](assets/ui.png)
+
 ## Usage
 
 In this example, we use SwarmCD to deploy the stack in the repo

ui/.eslintrc.cjs

@@ -0,0 +1,38 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: ["./tsconfig.app.json", "./tsconfig.node.json"],
+    tsconfigRootDir: __dirname
+  },
+  settings: {
+    react: {
+      version: "detect"
+    }
+  },
+  plugins: ["@typescript-eslint", "react", "react-hooks", "react-refresh"],
+  rules: {
+    "@typescript-eslint/explicit-function-return-type": [
+      "error",
+      {
+        allowExpressions: true,
+        allowTypedFunctionExpressions: true,
+        allowHigherOrderFunctions: true
+      }
+    ],
+    "@typescript-eslint/no-unused-vars": "warn",
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/no-unsafe-assignment": "error",
+    "react-refresh/only-export-components": "warn",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn"
+  }
+}

ui/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+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?

ui/.prettierrc.cjs

@@ -0,0 +1,8 @@
+module.exports = {
+  singleQuote: false,
+  semi: false,
+  trailingComma: "none",
+  printWidth: 120,
+  tabWidth: 2,
+  arrowParens: "avoid"
+}

ui/.vscode/extensions.json

@@ -0,0 +1,4 @@
+{
+  "recommendations": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode", "SonarSource.sonarlint-vscode"],
+  "unwantedRecommendations": []
+}

ui/README.md

@@ -0,0 +1,42 @@
+# SwarmCD UI
+
+This repository contains the code for the SwarmCD UI, a web-based user interface for checking the deployment status. The UI is built using React and bundled by Vite for fast and efficient development and build processes.
+
+## Installation
+
+1. Install [NodeJs](https://nodejs.org/en/download/package-manager)
+2. Install dependencies `npm install`
+3. To run the development UI server `npm run dev`
+4. To build for production `npm run build`
+   - The production build will be output to the `dist` directory.
+
+## Directory structure
+
+```text
+swarm-cd-ui/
+├── public/                # Static assets
+├── src/                   # Source files
+│   ├── assets/            # Images, fonts, etc.
+│   ├── components/        # React components
+│   ├── hooks/             # React hooks
+│   ├── App.tsx            # Main App component
+│   ├── index.tsx          # Entry point
+├── package.json           # Project metadata and scripts
+└── vite.config.ts         # Vite configuration
+```
+
+Recommended `.vscode/settings.json`:
+
+```json
+{
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "always",
+    "source.fixAll.eslint": "always"
+  },
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}
+```

ui/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>SwarmCD</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>