diff --git a/.github/scripts/download-translations.js b/.github/scripts/download-translations.js index 185992fd5..b814a2ba2 100644 --- a/.github/scripts/download-translations.js +++ b/.github/scripts/download-translations.js @@ -7,7 +7,7 @@ import { URLSearchParams } from "url"; const API_TOKEN = process.env.POEDITOR_API; const PROJECT_ID = process.env.POEDITOR_PROJECT_ID; const LANGUAGES = ( - process.env.LANGUAGES || "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn" + process.env.LANGUAGES || "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th" ).split(","); const EXPORT_FORMAT = process.env.EXPORT_FORMAT || "key_value_json"; diff --git a/.github/workflows/check-build.yml b/.github/workflows/check-build.yml new file mode 100644 index 000000000..4d2de7041 --- /dev/null +++ b/.github/workflows/check-build.yml @@ -0,0 +1,40 @@ +name: Build Check (Client & Server) +on: + pull_request: + workflow_dispatch: + +jobs: + build-client: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 22 + + - name: Install client dependencies + working-directory: client + run: npm install + + - name: Check client build + working-directory: client + run: npm run build + build-server: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + + - name: Set up Node + uses: actions/setup-node@v4 + with: + node-version: 22 + + - name: Install server dependencies + working-directory: server + run: npm install + + - name: Check server build + working-directory: server + run: npm run build diff --git a/.github/workflows/poeditor-sync.yml b/.github/workflows/poeditor-sync.yml index 87396d3d0..c9bb92b72 100644 --- a/.github/workflows/poeditor-sync.yml +++ b/.github/workflows/poeditor-sync.yml @@ -7,7 +7,7 @@ on: languages: description: "Languages to synchronize (comma separated, e.g.: tr,en,es)" required: false - default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn" + default: "ar,zh-tw,cs,en,fi,fr,de,pt-br,ru,es,tr,ja,zh-cn,th" format: description: "Export format (key_value_json or json)" required: false diff --git a/.gitignore b/.gitignore index 600d2d33b..997dff9c5 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -.vscode \ No newline at end of file +.idea +.vscode +.VSCodeCounter \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 702436b38..2392ea485 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -6,7 +6,7 @@ We truly appreciate all kinds of contributions — code, ideas, translations or Before you start, please take a moment to read the relevant section. It helps us review and accept contributions faster, and makes the whole process smoother for everyone. 💚 -PS: **We work closely with contributors on our [Discord channel](https://discord.com/invite/NAb6H3UTjK)**. You’ll find community members, core maintainers, and first-timers helping each other out. +PS: **We work closely with contributors on our [Discord channel](https://discord.com/invite/NAb6H3UTjK)**. You'll find community members, core maintainers, and first-timers helping each other out. --- @@ -32,12 +32,12 @@ PS: **We work closely with contributors on our [Discord channel](https://discord ### Get help or ask a question? -Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) — we’re friendly and happy to help. [Our core contributors](https://github.com/bluewave-labs/checkmate?tab=readme-ov-file#-contributing) are active and ready to support you. You can also use [GitHub Discussions](https://github.com/bluewave-labs/Checkmate/discussions) section to ask your questions. +Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) — we're friendly and happy to help. [Our core contributors](https://github.com/bluewave-labs/checkmate?tab=readme-ov-file#-contributing) are active and ready to support you. You can also use [GitHub Discussions](https://github.com/bluewave-labs/Checkmate/discussions) section to ask your questions. ### Report a bug? 1. Search [existing issues](https://github.com/bluewave-labs/checkmate/issues). -2. If it’s not listed, open a **new issue**. +2. If it's not listed, open a **new issue**. 3. Include as much detail as possible: what happened, what you expected, and steps to reproduce. Logs and screenshots help. ### Suggest a new feature? @@ -48,19 +48,175 @@ Ask anything in our [Discord server](https://discord.com/invite/NAb6H3UTjK) — ### Set up Checkmate locally? -Frontend & backend: +#### Prerequisites + +- Node.js (with npm) +- Docker +- Git + +#### Step 1: Clone the Repository + +```bash +git clone https://github.com/bluewave-labs/Checkmate.git +cd Checkmate +``` + +#### Step 2: Set Up Docker Containers (MongoDB) + +Navigate to the Docker dev directory: + +```bash +cd server/docker/dev +``` + +Build the Docker images: + +```bash +./build_images.sh +``` + +Run MongoDB container: + +```bash +docker run -d -p 27017:27017 -v $(pwd)/mongo/data:/data/db --name uptime_database_mongo uptime_database_mongo +``` + +Navigate back to the root directory: + +```bash +cd ../../.. +``` + +#### Step 3: Set Up the Backend (Server) + +Navigate to the server directory: + +```bash +cd server +``` + +Install dependencies: + ```bash npm install +``` + +Create a `.env` file in the `server` directory with the following minimum required configuration: + +```env +CLIENT_HOST="http://localhost:5173" +JWT_SECRET="my_secret_key_change_this" +DB_CONNECTION_STRING="mongodb://localhost:27017/uptime_db" +TOKEN_TTL="99d" +ORIGIN="localhost" +LOG_LEVEL="debug" +``` + +**Environment Variables Explained:** + +- `CLIENT_HOST`: Frontend URL (default: http://localhost:5173) +- `JWT_SECRET`: Secret key for JWT tokens (change to something secure) +- `DB_CONNECTION_STRING`: MongoDB connection URL +- `ORIGIN`: Origin for CORS purposes +- `TOKEN_TTL`: Token time to live (in vercel/ms format) +- `LOG_LEVEL`: Debug level (debug, info, warn, error) + +Start the backend server: + +```bash npm run dev ``` -By default, the frontend expects the backend on `http://localhost:3001`. Update configs if needed. +The server will run at `http://localhost:52345`. + +#### Step 4: Set Up the Frontend (Client) + +Open a new terminal window and navigate to the client directory from the root: + +```bash +cd client +``` + +Install dependencies: + +```bash +npm install +``` + +Create a `.env` file in the `client` directory: + +```env +VITE_APP_API_BASE_URL="http://localhost:52345/api/v1" +VITE_APP_LOG_LEVEL="debug" +``` + +**Environment Variables Explained:** + +- `VITE_APP_API_BASE_URL`: Backend API URL +- `VITE_APP_LOG_LEVEL`: Log level (none, error, warn, debug, info) + +Start the frontend: + +```bash +npm run dev +``` + +The client will run at `http://localhost:5173`. + +#### Step 5: Access the Application + +Open your browser and navigate to: + +- **Frontend**: http://localhost:5173 +- **Backend API**: http://localhost:52345 +- **API Documentation**: http://localhost:52345/api-docs + +#### Managing Docker Containers + +Stop containers: + +```bash +docker stop uptime_database_mongo +``` + +Start containers: + +```bash +docker start uptime_database_mongo +``` + +Remove containers (if needed): + +```bash +docker rm uptime_database_mongo +``` + +#### Troubleshooting + +**Port already in use:** + +- Check if another service is using ports 5173, 52345, 27017, or 6379 +- Stop the conflicting service or change the port in `.env` files + +**MongoDB connection issues:** + +- Verify container is running: `docker ps` +- Check container logs: `docker logs uptime_database_mongo` + +**Module not found errors:** + +- Ensure you ran `npm install` in both `client` and `server` directories + +**Need more help?** + +- Check the [full documentation](https://docs.checkmate.so) +- Ask on [Discord](https://discord.com/invite/NAb6H3UTjK) ### Start contributing code? 1. Pick or open an issue (check `good-first-issue`s first) 2. (optional but highly suggested) Read a detailed structure of [Checkmate](https://deepwiki.com/bluewave-labs/Checkmate) if you would like to deep dive into the architecture. -3. Ask to be assigned. If there is alrady someone assigned and it's been more than 7 days, you can raise the flag and ask to be assigned as well. +3. Ask to be assigned. If there is already someone assigned and it's been more than 7 days, you can raise the flag and ask to be assigned as well. 4. Create a branch from `develop`. 5. Write your code. 6. Run and test locally. @@ -75,6 +231,7 @@ Docs live in [checkmate-documentation](https://github.com/bluewave-labs/checkmat ### Help with translations? We use [PoEditor](https://poeditor.com) for translations. You can: + - [Sign up and join your language team](https://poeditor.com/join/project/lRUoGZFCsJ). - Translate UI strings. - Ask questions on Discord in the relevant #translations channel. @@ -84,6 +241,7 @@ Make sure all new UI strings in code use `t('key')`. ### Submit a pull request? Follow the [pull request checklist](#pull-request-checklist). Your PR should: + - Be focused on one issue. - Be tested locally. - Use our linting and translation rules. @@ -123,7 +281,6 @@ If one or more of these are missing, we may ask you to update your pull request ## Branching model - - Code contributions should go to the `develop` branch. - `master` is used for stable releases. - Use descriptive branch names, like `fix/login-error` or `feat/add-alerts`. @@ -137,13 +294,10 @@ If one or more of these are missing, we may ask you to update your pull request ## Thank you -Thanks for making Checkmate better. We mean it. Whether it’s your first pull request or your 50th, we’re excited to build with you. +Thanks for making Checkmate better. We mean it. Whether it's your first pull request or your 50th, we're excited to build with you. - -PS: feel free to introduce yourself on [Discord](https://discord.gg/YOUR-DISCORD-LINK) and say hi. +PS: feel free to introduce yourself on [Discord](https://discord.gg/NAb6H3UTjK) and say hi. -- Checkmate team Also make sure you read the [document about how to make a good pull request](/PULLREQUESTS.md). - - diff --git a/README.md b/README.md index 048cf0706..b93794d4f 100644 --- a/README.md +++ b/README.md @@ -52,7 +52,7 @@ Usage instructions can be found [here](https://docs.checkmate.so/checkmate-2.1). See installation instructions in [Checkmate documentation portal](https://docs.checkmate.so/checkmate-2.1/users-guide/quickstart). -Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions. +Alternatively, you can also use [Coolify](https://coolify.io/), [Elestio](https://elest.io/open-source/checkmate), [K8s](./charts/helm/checkmate/INSTALLATION.md), [Sive Host](https://sive.host) (South Africa) or [Pikapods](https://www.pikapods.com/) to quickly spin off a Checkmate instance. If you would like to monitor your server infrastructure, you'll need [Capture agent](https://github.com/bluewave-labs/capture). Capture repository also contains the installation instructions. ### Using a Custom CA diff --git a/charts/helm/checkmate/templates/client-deployment.yaml b/charts/helm/checkmate/templates/client-deployment.yaml index 6c1f70fd7..381631ef5 100644 --- a/charts/helm/checkmate/templates/client-deployment.yaml +++ b/charts/helm/checkmate/templates/client-deployment.yaml @@ -1,17 +1,25 @@ apiVersion: apps/v1 kind: Deployment metadata: - name: client + name: checkmate-client spec: replicas: 1 selector: matchLabels: - app: client + app: checkmate-client template: metadata: labels: - app: client + app: checkmate-client spec: + {{- with .Values.client.affinity }} + affinity: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} + {{- with .Values.client.tolerations }} + tolerations: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} containers: - name: client image: {{ .Values.client.image }} @@ -20,3 +28,17 @@ spec: env: - name: UPTIME_APP_API_BASE_URL value: "{{ .Values.server.protocol }}://{{ .Values.server.ingress.host }}/api/v1" + - name: UPTIME_APP_CLIENT_HOST + value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}" + volumeMounts: + - name: config-volume + mountPath: /etc/nginx/conf.d/default.conf + subPath: default.conf + {{- with .Values.client.resources }} + resources: + {{- tpl ( . | toYaml) $ | nindent 12 }} + {{- end }} + volumes: + - name: config-volume + configMap: + name: checkmate-server-nginx-cm diff --git a/charts/helm/checkmate/templates/client-ingress.yaml b/charts/helm/checkmate/templates/client-ingress.yaml index da059a863..89e001e15 100644 --- a/charts/helm/checkmate/templates/client-ingress.yaml +++ b/charts/helm/checkmate/templates/client-ingress.yaml @@ -2,10 +2,15 @@ apiVersion: networking.k8s.io/v1 kind: Ingress metadata: - name: client-ingress + name: checkmate-client-ingress + {{- if .Values.client.ingress.annotations }} annotations: - nginx.ingress.kubernetes.io/rewrite-target: / + {{- range $key, $value := .Values.client.ingress.annotations }} + {{ $key }}: {{ $value | quote }} + {{- end }} + {{- end }} spec: + ingressClassName: {{ .Values.client.ingress.className }} rules: - host: {{ .Values.client.ingress.host }} http: @@ -14,7 +19,7 @@ spec: pathType: Prefix backend: service: - name: client + name: checkmate-client port: number: {{ .Values.client.port }} {{- end }} diff --git a/charts/helm/checkmate/templates/client-service.yaml b/charts/helm/checkmate/templates/client-service.yaml index afb88188c..b56eaeedf 100644 --- a/charts/helm/checkmate/templates/client-service.yaml +++ b/charts/helm/checkmate/templates/client-service.yaml @@ -1,9 +1,9 @@ apiVersion: v1 kind: Service metadata: - name: client + name: checkmate-client spec: selector: - app: client + app: checkmate-client ports: - port: {{ .Values.client.port }} diff --git a/charts/helm/checkmate/templates/mongodb-deployment.yaml b/charts/helm/checkmate/templates/mongodb-deployment.yaml deleted file mode 100644 index 4c906fe09..000000000 --- a/charts/helm/checkmate/templates/mongodb-deployment.yaml +++ /dev/null @@ -1,27 +0,0 @@ -apiVersion: apps/v1 -kind: Deployment -metadata: - name: mongodb -spec: - replicas: 1 - selector: - matchLabels: - app: mongodb - template: - metadata: - labels: - app: mongodb - spec: - containers: - - name: mongodb - image: {{ .Values.mongodb.image }} - ports: - - containerPort: {{ .Values.mongodb.port }} - command: ["mongod", "--quiet", "--bind_ip_all"] - volumeMounts: - - name: mongodb-data - mountPath: /data/db - volumes: - - name: mongodb-data - persistentVolumeClaim: - claimName: mongodb-pvc \ No newline at end of file diff --git a/charts/helm/checkmate/templates/mongodb-pvc.yaml b/charts/helm/checkmate/templates/mongodb-pvc.yaml deleted file mode 100644 index 435b662e6..000000000 --- a/charts/helm/checkmate/templates/mongodb-pvc.yaml +++ /dev/null @@ -1,10 +0,0 @@ -apiVersion: v1 -kind: PersistentVolumeClaim -metadata: - name: mongodb-pvc -spec: - accessModes: - - ReadWriteOnce - resources: - requests: - storage: {{ .Values.persistence.mongodbSize }} \ No newline at end of file diff --git a/charts/helm/checkmate/templates/mongodb-service.yaml b/charts/helm/checkmate/templates/mongodb-service.yaml index 2911dc3eb..b96fe1a82 100644 --- a/charts/helm/checkmate/templates/mongodb-service.yaml +++ b/charts/helm/checkmate/templates/mongodb-service.yaml @@ -1,9 +1,9 @@ apiVersion: v1 kind: Service metadata: - name: mongodb + name: checkmate-mongodb spec: selector: - app: mongodb + app: checkmate-mongodb ports: - port: {{ .Values.mongodb.port }} \ No newline at end of file diff --git a/charts/helm/checkmate/templates/mongodb-statefulsets.yaml b/charts/helm/checkmate/templates/mongodb-statefulsets.yaml new file mode 100644 index 000000000..f849e4e21 --- /dev/null +++ b/charts/helm/checkmate/templates/mongodb-statefulsets.yaml @@ -0,0 +1,44 @@ +apiVersion: apps/v1 +kind: StatefulSet +metadata: + name: checkmate-mongodb +spec: + replicas: 1 + selector: + matchLabels: + app: checkmate-mongodb + template: + metadata: + labels: + app: checkmate-mongodb + spec: + {{- with .Values.mongodb.affinity }} + affinity: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} + {{- with .Values.mongodb.tolerations }} + tolerations: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} + containers: + - name: mongodb + image: {{ .Values.mongodb.image }} + ports: + - containerPort: {{ .Values.mongodb.port }} + command: ["mongod", "--quiet", "--bind_ip_all"] + volumeMounts: + - name: checkmate-mongo-persistent-storage + mountPath: /data/db + {{- with .Values.mongodb.resources }} + resources: + {{- tpl ( . | toYaml) $ | nindent 12 }} + {{- end }} + volumeClaimTemplates: + - metadata: + name: checkmate-mongo-persistent-storage + spec: + storageClassName: "gp3" + accessModes: ["ReadWriteOnce"] + resources: + requests: + storage: {{ .Values.persistence.mongodbSize }} \ No newline at end of file diff --git a/charts/helm/checkmate/templates/redis-deployment.yaml b/charts/helm/checkmate/templates/redis-deployment.yaml deleted file mode 100644 index cc9ffdaf9..000000000 --- a/charts/helm/checkmate/templates/redis-deployment.yaml +++ /dev/null @@ -1,26 +0,0 @@ -apiVersion: apps/v1 -kind: Deployment -metadata: - name: redis -spec: - replicas: 1 - selector: - matchLabels: - app: redis - template: - metadata: - labels: - app: redis - spec: - containers: - - name: redis - image: {{ .Values.redis.image }} - ports: - - containerPort: {{ .Values.redis.port }} - volumeMounts: - - name: redis-data - mountPath: /data - volumes: - - name: redis-data - persistentVolumeClaim: - claimName: redis-pvc diff --git a/charts/helm/checkmate/templates/redis-pvc.yaml b/charts/helm/checkmate/templates/redis-pvc.yaml deleted file mode 100644 index 2f0d81960..000000000 --- a/charts/helm/checkmate/templates/redis-pvc.yaml +++ /dev/null @@ -1,10 +0,0 @@ -apiVersion: v1 -kind: PersistentVolumeClaim -metadata: - name: redis-pvc -spec: - accessModes: - - ReadWriteOnce - resources: - requests: - storage: {{ .Values.persistence.redisSize }} \ No newline at end of file diff --git a/charts/helm/checkmate/templates/redis-service.yaml b/charts/helm/checkmate/templates/redis-service.yaml index f29fa46de..2720350da 100644 --- a/charts/helm/checkmate/templates/redis-service.yaml +++ b/charts/helm/checkmate/templates/redis-service.yaml @@ -1,9 +1,11 @@ +{{- if .Values.redis.enabled }} apiVersion: v1 kind: Service metadata: - name: redis + name: checkmate-redis spec: selector: - app: redis + app: checkmate-redis ports: - port: {{ .Values.redis.port }} +{{- end }} diff --git a/charts/helm/checkmate/templates/redis-statefulsets.yaml b/charts/helm/checkmate/templates/redis-statefulsets.yaml new file mode 100644 index 000000000..252361730 --- /dev/null +++ b/charts/helm/checkmate/templates/redis-statefulsets.yaml @@ -0,0 +1,33 @@ +{{- if .Values.redis.enabled }} +apiVersion: apps/v1 +kind: StatefulSet +metadata: + name: checkmate-redis +spec: + replicas: 1 + selector: + matchLabels: + app: checkmate-redis + template: + metadata: + labels: + app: checkmate-redis + spec: + containers: + - name: redis + image: {{ .Values.redis.image }} + ports: + - containerPort: {{ .Values.redis.port }} + volumeMounts: + - name: redis-data + mountPath: /data + volumeClaimTemplates: + - metadata: + name: checkmate-redis-persistent-storage + spec: + storageClassName: "gp3" + accessModes: ["ReadWriteOnce"] + resources: + requests: + storage: {{ .Values.persistence.redisSize }} +{{- end }} \ No newline at end of file diff --git a/charts/helm/checkmate/templates/secrets.yaml b/charts/helm/checkmate/templates/secrets.yaml index 0a3f1ace5..af104e7d1 100644 --- a/charts/helm/checkmate/templates/secrets.yaml +++ b/charts/helm/checkmate/templates/secrets.yaml @@ -4,10 +4,6 @@ {{- fail "secrets.JWT_SECRET must be overridden and cannot be 'change_me'" }} {{- end }} -{{- if or (not $secrets.REFRESH_TOKEN_SECRET) (eq $secrets.REFRESH_TOKEN_SECRET "change_me") }} - {{- fail "secrets.REFRESH_TOKEN_SECRET must be overridden and cannot be 'change_me'" }} -{{- end }} - apiVersion: v1 kind: Secret metadata: diff --git a/charts/helm/checkmate/templates/server-deployment.yaml b/charts/helm/checkmate/templates/server-deployment.yaml index 6f21f86f3..393964ccd 100644 --- a/charts/helm/checkmate/templates/server-deployment.yaml +++ b/charts/helm/checkmate/templates/server-deployment.yaml @@ -1,17 +1,25 @@ apiVersion: apps/v1 kind: Deployment metadata: - name: server + name: checkmate-server spec: replicas: 1 selector: matchLabels: - app: server + app: checkmate-server template: metadata: labels: - app: server + app: checkmate-server spec: + {{- with .Values.server.affinity }} + affinity: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} + {{- with .Values.server.tolerations }} + tolerations: + {{- tpl ( . | toYaml) $ | nindent 8 }} + {{- end }} containers: - name: server image: {{ .Values.server.image }} @@ -20,3 +28,10 @@ spec: envFrom: - secretRef: name: checkmate-secrets + {{- with .Values.server.resources }} + resources: + {{- tpl ( . | toYaml) $ | nindent 12 }} + {{- end }} + env: + - name: CLIENT_HOST + value: "{{ .Values.client.protocol }}://{{ .Values.client.ingress.host }}" diff --git a/charts/helm/checkmate/templates/server-ingress.yaml b/charts/helm/checkmate/templates/server-ingress.yaml index c1982d451..6e2d0d4d6 100644 --- a/charts/helm/checkmate/templates/server-ingress.yaml +++ b/charts/helm/checkmate/templates/server-ingress.yaml @@ -2,24 +2,31 @@ apiVersion: networking.k8s.io/v1 kind: Ingress metadata: - name: server-ingress + name: checkmate-server-ingress + {{- if .Values.server.ingress.annotations }} annotations: - nginx.ingress.kubernetes.io/rewrite-target: / - nginx.ingress.kubernetes.io/enable-cors: "true" - nginx.ingress.kubernetes.io/cors-allow-origin: "http://{{ .Values.client.ingress.host }},https://{{ .Values.client.ingress.host }}" - nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS" - nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" - nginx.ingress.kubernetes.io/cors-allow-credentials: "true" + {{- range $key, $value := .Values.server.ingress.annotations }} + {{ $key }}: {{ $value | quote }} + {{- end }} + {{- end }} + {{/*#annotations: + #nginx.ingress.kubernetes.io/rewrite-target: / + #nginx.ingress.kubernetes.io/enable-cors: "true" + #nginx.ingress.kubernetes.io/cors-allow-origin: "http://{{ .Values.client.ingress.host }},https://{{ .Values.client.ingress.host }}" + #nginx.ingress.kubernetes.io/cors-allow-methods: "GET, PUT, POST, DELETE, PATCH, OPTIONS" + #nginx.ingress.kubernetes.io/cors-allow-headers: "DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization" + #nginx.ingress.kubernetes.io/cors-allow-credentials: "true"*/}} spec: + ingressClassName: {{ .Values.server.ingress.className }} rules: - host: {{ .Values.server.ingress.host }} http: paths: - - path: / + - path: /api/v1 pathType: Prefix backend: service: - name: server + name: checkmate-server port: number: {{ .Values.server.port }} {{- end }} diff --git a/charts/helm/checkmate/templates/server-nginx-cm.yaml b/charts/helm/checkmate/templates/server-nginx-cm.yaml new file mode 100644 index 000000000..84da55299 --- /dev/null +++ b/charts/helm/checkmate/templates/server-nginx-cm.yaml @@ -0,0 +1,41 @@ +apiVersion: v1 +kind: ConfigMap +metadata: + name: checkmate-server-nginx-cm +data: + default.conf: | + server { + listen 80; + listen [::]:80; + + server_name checkmate-demo.bluewavelabs.ca; + server_tokens off; + + location /.well-known/acme-challenge/ { + root /var/www/certbot; + } + + location / { + root /usr/share/nginx/html; + index index.html index.htm; + try_files $uri $uri/ /index.html; + } + + # location /api/ { + # proxy_pass http://{{ .Values.server.ingress.host }}:5000/api/; + # proxy_http_version 1.1; + # proxy_set_header Host $host; + # proxy_set_header X-Real-IP $remote_addr; + # proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + # proxy_set_header X-Forwarded-Proto $scheme; + # } + + location /api-docs/ { + proxy_pass http://{{ .Values.server.ingress.host }}:5000/api-docs/; + proxy_http_version 1.1; + proxy_set_header Host $host; + proxy_set_header X-Real-IP $remote_addr; + proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; + proxy_set_header X-Forwarded-Proto $scheme; + } + } \ No newline at end of file diff --git a/charts/helm/checkmate/templates/server-service.yaml b/charts/helm/checkmate/templates/server-service.yaml index 64494ff90..d8a7fbe86 100644 --- a/charts/helm/checkmate/templates/server-service.yaml +++ b/charts/helm/checkmate/templates/server-service.yaml @@ -1,9 +1,9 @@ apiVersion: v1 kind: Service metadata: - name: server + name: checkmate-server spec: selector: - app: server + app: checkmate-server ports: - port: {{ .Values.server.port }} diff --git a/charts/helm/checkmate/values.yaml b/charts/helm/checkmate/values.yaml index 79c77a49e..0ba0051f8 100644 --- a/charts/helm/checkmate/values.yaml +++ b/charts/helm/checkmate/values.yaml @@ -1,40 +1,47 @@ client: - image: ghcr.io/bluewave-labs/checkmate-client:v2.3 + image: ghcr.io/bluewave-labs/checkmate-client:v3.2.0 port: 80 + protocol: http ingress: enabled: true host: change_me + className: nginx + annotations: {} server: - image: ghcr.io/bluewave-labs/checkmate-backend:v2.3 + image: ghcr.io/bluewave-labs/checkmate-backend:v3.2.0 port: 52345 - protocol: change_me + protocol: http ingress: enabled: true host: change_me + className: nginx + annotations: {} redis: + enabled: false image: redis:7.2 port: 6379 mongodb: - image: mongo:7.0 + image: ghcr.io/bluewave-labs/checkmate-mongo:v3.2.0 port: 27017 secrets: JWT_SECRET: change_me - REFRESH_TOKEN_SECRET: change_me - SYSTEM_EMAIL_ADDRESS: test@example.com - SYSTEM_EMAIL_PASSWORD: change_me - SYSTEM_EMAIL_HOST: smtp.example.com - SYSTEM_EMAIL_PORT: "587" - PAGESPEED_API_KEY: change_me - DB_CONNECTION_STRING: mongodb://mongodb:27017/uptime_db - REDIS_HOST: redis - REDIS_PORT: "6379" - DB_TYPE: MongoDB - TOKEN_TTL: 99d - REFRESH_TOKEN_TTL: 99d +# REFRESH_TOKEN_SECRET: change_me +# SYSTEM_EMAIL_ADDRESS: test@example.com +# SYSTEM_EMAIL_PASSWORD: change_me +# SYSTEM_EMAIL_HOST: smtp.example.com +# SYSTEM_EMAIL_PORT: "587" +# PAGESPEED_API_KEY: change_me + DB_CONNECTION_STRING: mongodb://checkmate-mongodb.namespace.svc:27017/uptime_db + CLIENT_HOST: change_me +# REDIS_HOST: redis +# REDIS_PORT: "6379" +# DB_TYPE: MongoDB +# TOKEN_TTL: 99d +# REFRESH_TOKEN_TTL: 99d persistence: mongodbSize: 5Gi diff --git a/client/.env.production b/client/.env.production index 7a11848c0..25849c7b9 100644 --- a/client/.env.production +++ b/client/.env.production @@ -1,3 +1,4 @@ VITE_APP_API_BASE_URL=UPTIME_APP_API_BASE_URL +VITE_APP_API_V2_BASE_URL=UPTIME_APP_API_V2_BASE_URL VITE_APP_CLIENT_HOST=UPTIME_APP_CLIENT_HOST VITE_APP_LOG_LEVEL=UPTIME_APP_LOG_LEVEL \ No newline at end of file diff --git a/client/package-lock.json b/client/package-lock.json index 32446c5d0..7cf0e8631 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -11,6 +11,7 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@hello-pangea/dnd": "^18.0.0", + "@hookform/resolvers": "5.2.2", "@mui/icons-material": "6.4.11", "@mui/lab": "6.0.0-dev.240424162023-9968b4889d", "@mui/material": "6.4.11", @@ -21,11 +22,14 @@ "dayjs": "1.11.13", "flag-icons": "7.3.2", "html2canvas": "^1.4.1", + "human-interval": "2.0.1", "i18next": "25.4.2", "joi": "17.13.3", "mui-color-input": "^6.0.0", + "pretty-ms": "9.3.0", "react": "18.3.1", "react-dom": "^18.2.0", + "react-hook-form": "7.63.0", "react-i18next": "^15.4.0", "react-icons": "5.5.0", "react-redux": "9.2.0", @@ -34,9 +38,12 @@ "react-toastify": "^10.0.5", "recharts": "2.15.2", "redux-persist": "6.0.0", - "vite-plugin-svgr": "^4.2.0" + "swr": "2.3.6", + "vite-plugin-svgr": "^4.2.0", + "zod": "4.1.11" }, "devDependencies": { + "@types/node": "24.5.2", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.2.1", @@ -45,7 +52,8 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.6", "prettier": "^3.3.3", - "vite": "6.3.5" + "typescript": "5.9.3", + "vite": "6.3.6" } }, "node_modules/@ampproject/remapping": { @@ -653,6 +661,18 @@ "react-dom": "^18.0.0 || ^19.0.0" } }, + "node_modules/@hookform/resolvers": { + "version": "5.2.2", + "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-5.2.2.tgz", + "integrity": "sha512-A/IxlMLShx3KjV/HeTcTfaMxdwy690+L/ZADoeaTltLx+CVuzkeVIPuybK3jrRfw7YZnmdKsVVHAlEPIAEUNlA==", + "license": "MIT", + "dependencies": { + "@standard-schema/utils": "^0.3.0" + }, + "peerDependencies": { + "react-hook-form": "^7.55.0" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.13.0", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz", @@ -2107,6 +2127,16 @@ "integrity": "sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==", "license": "MIT" }, + "node_modules/@types/node": { + "version": "24.5.2", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.5.2.tgz", + "integrity": "sha512-FYxk1I7wPv3K2XBaoyH2cTnocQEu8AOZ60hPbsyukMPLv5/5qr7V1i8PLHdl6Zf87I+xZXFvPCXYjiTFq+YSDQ==", + "devOptional": true, + "license": "MIT", + "dependencies": { + "undici-types": "~7.12.0" + } + }, "node_modules/@types/parse-json": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz", @@ -2422,13 +2452,13 @@ } }, "node_modules/axios": { - "version": "1.9.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz", - "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==", + "version": "1.12.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.12.2.tgz", + "integrity": "sha512-vMJzPewAlRyOgxV2dU0Cuz2O8zzzx9VYtbJOaBgXFeLc4IV/Eg50n4LowmehOOR61S8ZMpc2K5Sa7g6A4jfkUw==", "license": "MIT", "dependencies": { "follow-redirects": "^1.15.6", - "form-data": "^4.0.0", + "form-data": "^4.0.4", "proxy-from-env": "^1.1.0" } }, @@ -2991,6 +3021,15 @@ "node": ">=0.4.0" } }, + "node_modules/dequal": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", + "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/doctrine": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz", @@ -3756,6 +3795,20 @@ "dev": true, "license": "ISC" }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz", @@ -4068,6 +4121,15 @@ "node": ">=8.0.0" } }, + "node_modules/human-interval": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/human-interval/-/human-interval-2.0.1.tgz", + "integrity": "sha512-r4Aotzf+OtKIGQCB3odUowy4GfUDTy3aTWTfLd7ZF2gBCy3XW3v/dJLRefZnOFFnjqs5B1TypvS8WarpBkYUNQ==", + "license": "MIT", + "dependencies": { + "numbered": "^1.1.0" + } + }, "node_modules/i18next": { "version": "25.4.2", "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.4.2.tgz", @@ -4902,6 +4964,12 @@ "integrity": "sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==", "license": "MIT" }, + "node_modules/numbered": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/numbered/-/numbered-1.1.0.tgz", + "integrity": "sha512-pv/ue2Odr7IfYOO0byC1KgBI10wo5YDauLhxY6/saNzAdAs0r1SotGCPzzCLNPL0xtrAwWRialLu23AAu9xO1g==", + "license": "MIT" + }, "node_modules/object-assign": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", @@ -5117,6 +5185,18 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/parse-ms": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/parse-ms/-/parse-ms-4.0.0.tgz", + "integrity": "sha512-TXfryirbmq34y8QBwgqCVLi+8oA3oWx2eAnSn62ITyEhEYaWRlVZ2DvMM9eZbMs/RfxPu/PK/aBLyGj4IrqMHw==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/path-exists": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", @@ -5244,6 +5324,21 @@ "url": "https://github.com/prettier/prettier?sponsor=1" } }, + "node_modules/pretty-ms": { + "version": "9.3.0", + "resolved": "https://registry.npmjs.org/pretty-ms/-/pretty-ms-9.3.0.tgz", + "integrity": "sha512-gjVS5hOP+M3wMm5nmNOucbIrqudzs9v/57bWRHQWLYklXqoXKrVfYW2W9+glfGsqtPgpiz5WwyEEB+ksXIx3gQ==", + "license": "MIT", + "dependencies": { + "parse-ms": "^4.0.0" + }, + "engines": { + "node": ">=18" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -5329,6 +5424,22 @@ "react": "^18.3.1" } }, + "node_modules/react-hook-form": { + "version": "7.63.0", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.63.0.tgz", + "integrity": "sha512-ZwueDMvUeucovM2VjkCf7zIHcs1aAlDimZu2Hvel5C5907gUzMpm4xCrQXtRzCvsBqFjonB4m3x4LzCFI1ZKWA==", + "license": "MIT", + "engines": { + "node": ">=18.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18 || ^19" + } + }, "node_modules/react-i18next": { "version": "15.5.1", "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-15.5.1.tgz", @@ -6127,6 +6238,19 @@ "integrity": "sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==", "license": "MIT" }, + "node_modules/swr": { + "version": "2.3.6", + "resolved": "https://registry.npmjs.org/swr/-/swr-2.3.6.tgz", + "integrity": "sha512-wfHRmHWk/isGNMwlLGlZX5Gzz/uTgo0o2IRuTMcf4CPuPFJZlq0rDaKUx+ozB5nBOReNV1kiOyzMfj+MBMikLw==", + "license": "MIT", + "dependencies": { + "dequal": "^2.0.3", + "use-sync-external-store": "^1.4.0" + }, + "peerDependencies": { + "react": "^16.11.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" + } + }, "node_modules/text-segmentation": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", @@ -6275,6 +6399,20 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/typescript": { + "version": "5.9.3", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz", + "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", + "devOptional": true, + "license": "Apache-2.0", + "bin": { + "tsc": "bin/tsc", + "tsserver": "bin/tsserver" + }, + "engines": { + "node": ">=14.17" + } + }, "node_modules/unbox-primitive": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.1.0.tgz", @@ -6294,6 +6432,13 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/undici-types": { + "version": "7.12.0", + "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.12.0.tgz", + "integrity": "sha512-goOacqME2GYyOZZfb5Lgtu+1IDmAlAEu5xnD3+xTzS10hT0vzpf0SPjkXwAw9Jm+4n/mQGDP3LO8CPbYROeBfQ==", + "devOptional": true, + "license": "MIT" + }, "node_modules/update-browserslist-db": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.1.3.tgz", @@ -6375,9 +6520,9 @@ } }, "node_modules/vite": { - "version": "6.3.5", - "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.5.tgz", - "integrity": "sha512-cZn6NDFE7wdTpINgs++ZJ4N49W2vRp8LCKrn3Ob1kYNtOo21vfDoaV5GzBfLU4MovSAB8uNRm4jgzVQZ+mBzPQ==", + "version": "6.3.6", + "resolved": "https://registry.npmjs.org/vite/-/vite-6.3.6.tgz", + "integrity": "sha512-0msEVHJEScQbhkbVTb/4iHZdJ6SXp/AvxL2sjwYQFfBqleHtnCqv1J3sa9zbWz/6kW1m9Tfzn92vW+kZ1WV6QA==", "license": "MIT", "dependencies": { "esbuild": "^0.25.0", @@ -6625,6 +6770,15 @@ "funding": { "url": "https://github.com/sponsors/sindresorhus" } + }, + "node_modules/zod": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/zod/-/zod-4.1.11.tgz", + "integrity": "sha512-WPsqwxITS2tzx1bzhIKsEs19ABD5vmCVa4xBo2tq/SrV4RNZtfws1EnCWQXM6yh8bD08a1idvkB5MZSBiZsjwg==", + "license": "MIT", + "funding": { + "url": "https://github.com/sponsors/colinhacks" + } } } } diff --git a/client/package.json b/client/package.json index 92da6fd13..376671942 100644 --- a/client/package.json +++ b/client/package.json @@ -5,8 +5,8 @@ "type": "module", "scripts": { "dev": "vite", - "build": "vite build", - "build-dev": "vite build --mode development", + "build": "tsc -b && vite build", + "build-dev": "tsc -b && vite build --mode development", "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", "format": "prettier --write .", @@ -16,6 +16,7 @@ "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", "@hello-pangea/dnd": "^18.0.0", + "@hookform/resolvers": "5.2.2", "@mui/icons-material": "6.4.11", "@mui/lab": "6.0.0-dev.240424162023-9968b4889d", "@mui/material": "6.4.11", @@ -26,11 +27,14 @@ "dayjs": "1.11.13", "flag-icons": "7.3.2", "html2canvas": "^1.4.1", + "human-interval": "2.0.1", "i18next": "25.4.2", "joi": "17.13.3", "mui-color-input": "^6.0.0", + "pretty-ms": "9.3.0", "react": "18.3.1", "react-dom": "^18.2.0", + "react-hook-form": "7.63.0", "react-i18next": "^15.4.0", "react-icons": "5.5.0", "react-redux": "9.2.0", @@ -39,17 +43,12 @@ "react-toastify": "^10.0.5", "recharts": "2.15.2", "redux-persist": "6.0.0", - "vite-plugin-svgr": "^4.2.0" - }, - "unusedDepencies": { - "@solana/wallet-adapter-base": "0.9.25", - "@solana/wallet-adapter-material-ui": "0.16.35", - "@solana/wallet-adapter-react": "0.15.37", - "@solana/wallet-adapter-react-ui": "0.9.37", - "@solana/wallet-adapter-wallets": "0.19.34", - "@solana/web3.js": "1.98.0" + "swr": "2.3.6", + "vite-plugin-svgr": "^4.2.0", + "zod": "4.1.11" }, "devDependencies": { + "@types/node": "24.5.2", "@types/react": "^18.2.66", "@types/react-dom": "^18.2.22", "@vitejs/plugin-react": "^4.2.1", @@ -58,6 +57,7 @@ "eslint-plugin-react-hooks": "^5.0.0", "eslint-plugin-react-refresh": "^0.4.6", "prettier": "^3.3.3", - "vite": "6.3.5" + "typescript": "5.9.3", + "vite": "6.3.6" } } diff --git a/client/src/App.jsx b/client/src/App.jsx index b599890f1..d21850ebb 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -9,8 +9,7 @@ import { CssBaseline, GlobalStyles } from "@mui/material"; import { logger } from "./Utils/Logger"; // Import the logger import { networkService } from "./main"; import { Routes } from "./Routes"; -import WalletProvider from "./Components/WalletProvider"; -import AppLayout from "./Components/Layouts/AppLayout"; +import AppLayout from "@/Components/v1/Layouts/AppLayout"; function App() { const mode = useSelector((state) => state.ui.mode); @@ -24,16 +23,12 @@ function App() { }, []); return ( - /* Extract Themeprovider, baseline and global styles to Styles */ - - - - - - - - + + + + + ); } diff --git a/client/src/Components/ActionsMenu/index.jsx b/client/src/Components/v1/ActionsMenu/index.jsx similarity index 94% rename from client/src/Components/ActionsMenu/index.jsx rename to client/src/Components/v1/ActionsMenu/index.jsx index 1b590a471..229c7c875 100644 --- a/client/src/Components/ActionsMenu/index.jsx +++ b/client/src/Components/v1/ActionsMenu/index.jsx @@ -2,17 +2,17 @@ import IconButton from "@mui/material/IconButton"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; -import Settings from "../../assets/icons/settings-bold.svg?react"; -import Dialog from "../../Components/Dialog"; +import Settings from "../../../assets/icons/settings-bold.svg?react"; +import Dialog from "../Dialog/index.jsx"; // Utils import { useState } from "react"; import { useTheme } from "@emotion/react"; import { useNavigate } from "react-router-dom"; -import { createToast } from "../../Utils/toastUtils"; +import { createToast } from "../../../Utils/toastUtils.jsx"; import PropTypes from "prop-types"; -import { usePauseMonitor, useDeleteMonitor } from "../../Hooks/monitorHooks"; +import { usePauseMonitor, useDeleteMonitor } from "../../../Hooks/v1/monitorHooks.js"; const ActionsMenu = ({ monitor, diff --git a/client/src/Components/Alert/index.css b/client/src/Components/v1/Alert/index.css similarity index 100% rename from client/src/Components/Alert/index.css rename to client/src/Components/v1/Alert/index.css diff --git a/client/src/Components/Alert/index.jsx b/client/src/Components/v1/Alert/index.jsx similarity index 100% rename from client/src/Components/Alert/index.jsx rename to client/src/Components/v1/Alert/index.jsx diff --git a/client/src/Components/Animated/PulseDot.jsx b/client/src/Components/v1/Animated/PulseDot.jsx similarity index 100% rename from client/src/Components/Animated/PulseDot.jsx rename to client/src/Components/v1/Animated/PulseDot.jsx diff --git a/client/src/Components/ArrowLeft/index.jsx b/client/src/Components/v1/ArrowLeft/index.jsx similarity index 70% rename from client/src/Components/ArrowLeft/index.jsx rename to client/src/Components/v1/ArrowLeft/index.jsx index 7909441f3..a327d6bb7 100644 --- a/client/src/Components/ArrowLeft/index.jsx +++ b/client/src/Components/v1/ArrowLeft/index.jsx @@ -1,6 +1,6 @@ -import LeftArrow from "../../assets/icons/left-arrow.svg?react"; -import LeftArrowDouble from "../../assets/icons/left-arrow-double.svg?react"; -import LeftArrowLong from "../../assets/icons/left-arrow-long.svg?react"; +import LeftArrow from "../../../assets/icons/left-arrow.svg?react"; +import LeftArrowDouble from "../../../assets/icons/left-arrow-double.svg?react"; +import LeftArrowLong from "../../../assets/icons/left-arrow-long.svg?react"; import PropTypes from "prop-types"; const ArrowLeft = ({ type, color = "#667085", ...props }) => { diff --git a/client/src/Components/ArrowRight/index.jsx b/client/src/Components/v1/ArrowRight/index.jsx similarity index 73% rename from client/src/Components/ArrowRight/index.jsx rename to client/src/Components/v1/ArrowRight/index.jsx index 335bc19f2..08a2639b0 100644 --- a/client/src/Components/ArrowRight/index.jsx +++ b/client/src/Components/v1/ArrowRight/index.jsx @@ -1,5 +1,5 @@ -import RightArrow from "../../assets/icons/right-arrow.svg?react"; -import RightArrowDouble from "../../assets/icons/right-arrow-double.svg?react"; +import RightArrow from "../../../assets/icons/right-arrow.svg?react"; +import RightArrowDouble from "../../../assets/icons/right-arrow-double.svg?react"; import PropTypes from "prop-types"; const ArrowRight = ({ type, color = "#667085", ...props }) => { diff --git a/client/src/Components/Avatar/index.css b/client/src/Components/v1/Avatar/index.css similarity index 100% rename from client/src/Components/Avatar/index.css rename to client/src/Components/v1/Avatar/index.css diff --git a/client/src/Components/Avatar/index.jsx b/client/src/Components/v1/Avatar/index.jsx similarity index 100% rename from client/src/Components/Avatar/index.jsx rename to client/src/Components/v1/Avatar/index.jsx diff --git a/client/src/Components/Breadcrumbs/index.css b/client/src/Components/v1/Breadcrumbs/index.css similarity index 100% rename from client/src/Components/Breadcrumbs/index.css rename to client/src/Components/v1/Breadcrumbs/index.css diff --git a/client/src/Components/Breadcrumbs/index.jsx b/client/src/Components/v1/Breadcrumbs/index.jsx similarity index 97% rename from client/src/Components/Breadcrumbs/index.jsx rename to client/src/Components/v1/Breadcrumbs/index.jsx index f1af89790..34e5d5e95 100644 --- a/client/src/Components/Breadcrumbs/index.jsx +++ b/client/src/Components/v1/Breadcrumbs/index.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { Box, Breadcrumbs as MUIBreadcrumbs } from "@mui/material"; import { useTheme } from "@emotion/react"; import { useNavigate } from "react-router-dom"; -import ArrowRight from "../ArrowRight"; +import ArrowRight from "../ArrowRight/index.jsx"; import "./index.css"; /** diff --git a/client/src/Components/Buttons/RoundGradientButton.jsx b/client/src/Components/v1/Buttons/RoundGradientButton.jsx similarity index 100% rename from client/src/Components/Buttons/RoundGradientButton.jsx rename to client/src/Components/v1/Buttons/RoundGradientButton.jsx diff --git a/client/src/Components/Charts/AreaChart/index.jsx b/client/src/Components/v1/Charts/AreaChart/index.jsx similarity index 98% rename from client/src/Components/Charts/AreaChart/index.jsx rename to client/src/Components/v1/Charts/AreaChart/index.jsx index e1f1832e5..dd5a900d6 100644 --- a/client/src/Components/Charts/AreaChart/index.jsx +++ b/client/src/Components/v1/Charts/AreaChart/index.jsx @@ -61,7 +61,7 @@ import { Tooltip, ResponsiveContainer, } from "recharts"; -import { createGradient } from "../Utils/gradientUtils"; +import { createGradient } from "../Utils/gradientUtils.jsx"; import PropTypes from "prop-types"; import { useTheme } from "@mui/material"; import { useId } from "react"; diff --git a/client/src/Components/Charts/BarChart/index.css b/client/src/Components/v1/Charts/BarChart/index.css similarity index 100% rename from client/src/Components/Charts/BarChart/index.css rename to client/src/Components/v1/Charts/BarChart/index.css diff --git a/client/src/Components/Charts/BarChart/index.jsx b/client/src/Components/v1/Charts/BarChart/index.jsx similarity index 98% rename from client/src/Components/Charts/BarChart/index.jsx rename to client/src/Components/v1/Charts/BarChart/index.jsx index 375773b94..2bf8e1798 100644 --- a/client/src/Components/Charts/BarChart/index.jsx +++ b/client/src/Components/v1/Charts/BarChart/index.jsx @@ -1,6 +1,6 @@ import { useTheme } from "@emotion/react"; import { Box, Stack, Tooltip, Typography } from "@mui/material"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils.js"; import { useEffect, useState } from "react"; import "./index.css"; import { useSelector } from "react-redux"; diff --git a/client/src/Components/Charts/ChartBox/EmptyView.jsx b/client/src/Components/v1/Charts/ChartBox/EmptyView.jsx similarity index 98% rename from client/src/Components/Charts/ChartBox/EmptyView.jsx rename to client/src/Components/v1/Charts/ChartBox/EmptyView.jsx index 296197a8c..c1b60632d 100644 --- a/client/src/Components/Charts/ChartBox/EmptyView.jsx +++ b/client/src/Components/v1/Charts/ChartBox/EmptyView.jsx @@ -2,7 +2,7 @@ import { Typography, Stack } from "@mui/material"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import IconBox from "../../IconBox"; +import IconBox from "../../IconBox/index.jsx"; /** * `EmptyView` is a functional React component that displays an empty state view with an optional icon, header, and message. diff --git a/client/src/Components/Charts/ChartBox/index.jsx b/client/src/Components/v1/Charts/ChartBox/index.jsx similarity index 95% rename from client/src/Components/Charts/ChartBox/index.jsx rename to client/src/Components/v1/Charts/ChartBox/index.jsx index 2c13ece87..be2faf8ed 100644 --- a/client/src/Components/Charts/ChartBox/index.jsx +++ b/client/src/Components/v1/Charts/ChartBox/index.jsx @@ -1,7 +1,7 @@ import { Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; -import IconBox from "../../IconBox"; -import EmptyView from "./EmptyView"; +import IconBox from "../../IconBox/index.jsx"; +import EmptyView from "./EmptyView.jsx"; import PropTypes from "prop-types"; const ChartBox = ({ diff --git a/client/src/Components/Charts/CustomGauge/index.css b/client/src/Components/v1/Charts/CustomGauge/index.css similarity index 100% rename from client/src/Components/Charts/CustomGauge/index.css rename to client/src/Components/v1/Charts/CustomGauge/index.css diff --git a/client/src/Components/Charts/CustomGauge/index.jsx b/client/src/Components/v1/Charts/CustomGauge/index.jsx similarity index 100% rename from client/src/Components/Charts/CustomGauge/index.jsx rename to client/src/Components/v1/Charts/CustomGauge/index.jsx diff --git a/client/src/Components/Charts/DePINStatusPageBarChart/index.jsx b/client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx similarity index 98% rename from client/src/Components/Charts/DePINStatusPageBarChart/index.jsx rename to client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx index 65c6278f1..b37990e46 100644 --- a/client/src/Components/Charts/DePINStatusPageBarChart/index.jsx +++ b/client/src/Components/v1/Charts/DePINStatusPageBarChart/index.jsx @@ -5,7 +5,7 @@ import { Stack, Box, Tooltip, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { useState, useEffect } from "react"; import PropTypes from "prop-types"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils.js"; import { useSelector } from "react-redux"; const PlaceholderCheck = ({ daysToShow }) => { diff --git a/client/src/Components/Charts/LegendBox/index.jsx b/client/src/Components/v1/Charts/LegendBox/index.jsx similarity index 95% rename from client/src/Components/Charts/LegendBox/index.jsx rename to client/src/Components/v1/Charts/LegendBox/index.jsx index ac14669e3..f19e09105 100644 --- a/client/src/Components/Charts/LegendBox/index.jsx +++ b/client/src/Components/v1/Charts/LegendBox/index.jsx @@ -1,6 +1,6 @@ import { Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; -import IconBox from "../../IconBox"; +import IconBox from "../../IconBox/index.jsx"; import PropTypes from "prop-types"; const LegendBox = ({ children, icon, header, sx }) => { diff --git a/client/src/Components/Charts/MonitorDetailsAreaChart/index.css b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.css similarity index 100% rename from client/src/Components/Charts/MonitorDetailsAreaChart/index.css rename to client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.css diff --git a/client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx similarity index 97% rename from client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx rename to client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx index a1ead3cf9..a9ef04a53 100644 --- a/client/src/Components/Charts/MonitorDetailsAreaChart/index.jsx +++ b/client/src/Components/v1/Charts/MonitorDetailsAreaChart/index.jsx @@ -12,11 +12,11 @@ import { Box, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { useMemo, useState } from "react"; import { useSelector } from "react-redux"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils.js"; import { tooltipDateFormatLookup, tickDateFormatLookup, -} from "../Utils/chartUtilFunctions"; +} from "../Utils/chartUtilFunctions.js"; import "./index.css"; const CustomToolTip = ({ active, payload, label, dateRange }) => { diff --git a/client/src/Components/Charts/StatusPageBarChart/index.jsx b/client/src/Components/v1/Charts/StatusPageBarChart/index.jsx similarity index 98% rename from client/src/Components/Charts/StatusPageBarChart/index.jsx rename to client/src/Components/v1/Charts/StatusPageBarChart/index.jsx index eab0c7d1d..7da4d58ba 100644 --- a/client/src/Components/Charts/StatusPageBarChart/index.jsx +++ b/client/src/Components/v1/Charts/StatusPageBarChart/index.jsx @@ -1,6 +1,6 @@ import { useTheme } from "@emotion/react"; import { Box, Stack, Tooltip, Typography } from "@mui/material"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils.js"; import { useEffect, useState, forwardRef } from "react"; import { useSelector } from "react-redux"; import PropTypes from "prop-types"; diff --git a/client/src/Components/Charts/Utils/chartUtilFunctions.js b/client/src/Components/v1/Charts/Utils/chartUtilFunctions.js similarity index 100% rename from client/src/Components/Charts/Utils/chartUtilFunctions.js rename to client/src/Components/v1/Charts/Utils/chartUtilFunctions.js diff --git a/client/src/Components/Charts/Utils/chartUtils.jsx b/client/src/Components/v1/Charts/Utils/chartUtils.jsx similarity index 98% rename from client/src/Components/Charts/Utils/chartUtils.jsx rename to client/src/Components/v1/Charts/Utils/chartUtils.jsx index e24881c1c..1bab80595 100644 --- a/client/src/Components/Charts/Utils/chartUtils.jsx +++ b/client/src/Components/v1/Charts/Utils/chartUtils.jsx @@ -2,9 +2,9 @@ import PropTypes from "prop-types"; import { useSelector } from "react-redux"; import { useTheme } from "@mui/material"; import { Text } from "recharts"; -import { formatDateWithTz } from "../../../Utils/timeUtils"; +import { formatDateWithTz } from "../../../../Utils/timeUtils.js"; import { Box, Stack, Typography } from "@mui/material"; -import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions"; +import { tickDateFormatLookup, tooltipDateFormatLookup } from "./chartUtilFunctions.js"; /** * Custom tick component for rendering time with timezone. * diff --git a/client/src/Components/Charts/Utils/gradientUtils.jsx b/client/src/Components/v1/Charts/Utils/gradientUtils.jsx similarity index 100% rename from client/src/Components/Charts/Utils/gradientUtils.jsx rename to client/src/Components/v1/Charts/Utils/gradientUtils.jsx diff --git a/client/src/Components/Check/Check.jsx b/client/src/Components/v1/Check/Check.jsx similarity index 93% rename from client/src/Components/Check/Check.jsx rename to client/src/Components/v1/Check/Check.jsx index 02b9fd78a..53971316b 100644 --- a/client/src/Components/Check/Check.jsx +++ b/client/src/Components/v1/Check/Check.jsx @@ -1,7 +1,7 @@ import "./check.css"; import PropTypes from "prop-types"; -import CheckGrey from "../../assets/icons/check.svg?react"; -import CheckOutlined from "../../assets/icons/check-outlined.svg?react"; +import CheckGrey from "../../../assets/icons/check.svg?react"; +import CheckOutlined from "../../../assets/icons/check-outlined.svg?react"; import { Box, Stack, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; diff --git a/client/src/Components/Check/check.css b/client/src/Components/v1/Check/check.css similarity index 100% rename from client/src/Components/Check/check.css rename to client/src/Components/v1/Check/check.css diff --git a/client/src/Components/CircularCount/index.jsx b/client/src/Components/v1/CircularCount/index.jsx similarity index 100% rename from client/src/Components/CircularCount/index.jsx rename to client/src/Components/v1/CircularCount/index.jsx diff --git a/client/src/Components/Common/AppBar.jsx b/client/src/Components/v1/Common/AppBar.jsx similarity index 99% rename from client/src/Components/Common/AppBar.jsx rename to client/src/Components/v1/Common/AppBar.jsx index de5f0992e..1d5a38ddd 100644 --- a/client/src/Components/Common/AppBar.jsx +++ b/client/src/Components/v1/Common/AppBar.jsx @@ -10,7 +10,7 @@ import MenuItem from "@mui/material/MenuItem"; import Drawer from "@mui/material/Drawer"; import MenuIcon from "@mui/icons-material/Menu"; import CloseRoundedIcon from "@mui/icons-material/CloseRounded"; -import ThemeSwitch from "../ThemeSwitch"; +import ThemeSwitch from "../ThemeSwitch/index.jsx"; import { useTheme } from "@mui/material/styles"; import { useSelector } from "react-redux"; import { useLocation, useNavigate } from "react-router-dom"; diff --git a/client/src/Components/Common/Footer.jsx b/client/src/Components/v1/Common/Footer.jsx similarity index 100% rename from client/src/Components/Common/Footer.jsx rename to client/src/Components/v1/Common/Footer.jsx diff --git a/client/src/Components/ConfigBox/index.jsx b/client/src/Components/v1/ConfigBox/index.jsx similarity index 100% rename from client/src/Components/ConfigBox/index.jsx rename to client/src/Components/v1/ConfigBox/index.jsx diff --git a/client/src/Components/ConfigRow/index.jsx b/client/src/Components/v1/ConfigRow/index.jsx similarity index 96% rename from client/src/Components/ConfigRow/index.jsx rename to client/src/Components/v1/ConfigRow/index.jsx index 217085b6d..12fea923e 100644 --- a/client/src/Components/ConfigRow/index.jsx +++ b/client/src/Components/v1/ConfigRow/index.jsx @@ -1,7 +1,7 @@ import { Box, Stack, Typography } from "@mui/material"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import ConfigBox from "../ConfigBox"; +import ConfigBox from "../ConfigBox/index.jsx"; /** * ConfigRow is a styled container used to layout content in a row format with specific padding, border, and spacing. diff --git a/client/src/Components/Dialog/genericDialog.jsx b/client/src/Components/v1/Dialog/genericDialog.jsx similarity index 100% rename from client/src/Components/Dialog/genericDialog.jsx rename to client/src/Components/v1/Dialog/genericDialog.jsx diff --git a/client/src/Components/Dialog/index.jsx b/client/src/Components/v1/Dialog/index.jsx similarity index 95% rename from client/src/Components/Dialog/index.jsx rename to client/src/Components/v1/Dialog/index.jsx index 678eb8721..b8cf07439 100644 --- a/client/src/Components/Dialog/index.jsx +++ b/client/src/Components/v1/Dialog/index.jsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { Button, Stack } from "@mui/material"; -import { GenericDialog } from "./genericDialog"; +import { GenericDialog } from "./genericDialog.jsx"; import { useTheme } from "@emotion/react"; import { useTranslation } from "react-i18next"; diff --git a/client/src/Components/Dot/index.jsx b/client/src/Components/v1/Dot/index.jsx similarity index 100% rename from client/src/Components/Dot/index.jsx rename to client/src/Components/v1/Dot/index.jsx diff --git a/client/src/Components/Fallback/FallBackActionButtons.jsx b/client/src/Components/v1/Fallback/FallBackActionButtons.jsx similarity index 100% rename from client/src/Components/Fallback/FallBackActionButtons.jsx rename to client/src/Components/v1/Fallback/FallBackActionButtons.jsx diff --git a/client/src/Components/Fallback/FallbackBackground.jsx b/client/src/Components/v1/Fallback/FallbackBackground.jsx similarity index 78% rename from client/src/Components/Fallback/FallbackBackground.jsx rename to client/src/Components/v1/Fallback/FallbackBackground.jsx index fe46f4064..2182082fd 100644 --- a/client/src/Components/Fallback/FallbackBackground.jsx +++ b/client/src/Components/v1/Fallback/FallbackBackground.jsx @@ -1,8 +1,8 @@ import { useTheme } from "@emotion/react"; import Box from "@mui/material/Box"; -import Background from "../../assets/Images/background-grid.svg?react"; -import OutputAnimation from "../../assets/Animations/output.gif"; -import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif"; +import Background from "../../../assets/Images/background-grid.svg?react"; +import OutputAnimation from "../../../assets/Animations/output.gif"; +import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif"; import { useSelector } from "react-redux"; const FallbackBackground = () => { const theme = useTheme(); diff --git a/client/src/Components/Fallback/FallbackCheckList.jsx b/client/src/Components/v1/Fallback/FallbackCheckList.jsx similarity index 95% rename from client/src/Components/Fallback/FallbackCheckList.jsx rename to client/src/Components/v1/Fallback/FallbackCheckList.jsx index 4d13dead4..befb95185 100644 --- a/client/src/Components/Fallback/FallbackCheckList.jsx +++ b/client/src/Components/v1/Fallback/FallbackCheckList.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@mui/material/styles"; import Box from "@mui/material/Box"; import Stack from "@mui/material/Stack"; -import Check from "../Check/Check"; +import Check from "../Check/Check.jsx"; const FallbackCheckList = ({ checks, type }) => { const theme = useTheme(); return ( diff --git a/client/src/Components/Fallback/FallbackContainer.jsx b/client/src/Components/v1/Fallback/FallbackContainer.jsx similarity index 100% rename from client/src/Components/Fallback/FallbackContainer.jsx rename to client/src/Components/v1/Fallback/FallbackContainer.jsx diff --git a/client/src/Components/Fallback/FallbackPageSpeedWarning.jsx b/client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx similarity index 97% rename from client/src/Components/Fallback/FallbackPageSpeedWarning.jsx rename to client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx index bcec7300d..2cf52bd88 100644 --- a/client/src/Components/Fallback/FallbackPageSpeedWarning.jsx +++ b/client/src/Components/v1/Fallback/FallbackPageSpeedWarning.jsx @@ -3,7 +3,7 @@ import { useTheme } from "@mui/material/styles"; import Link from "@mui/material/Link"; import { Link as RouterLink } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import Alert from "../Alert"; +import Alert from "../Alert/index.jsx"; import PropTypes from "prop-types"; const renderWarningMessage = (t) => { diff --git a/client/src/Components/Fallback/FallbackTitle.jsx b/client/src/Components/v1/Fallback/FallbackTitle.jsx similarity index 100% rename from client/src/Components/Fallback/FallbackTitle.jsx rename to client/src/Components/v1/Fallback/FallbackTitle.jsx diff --git a/client/src/Components/Fallback/index.css b/client/src/Components/v1/Fallback/index.css similarity index 100% rename from client/src/Components/Fallback/index.css rename to client/src/Components/v1/Fallback/index.css diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/v1/Fallback/index.jsx similarity index 87% rename from client/src/Components/Fallback/index.jsx rename to client/src/Components/v1/Fallback/index.jsx index 5fbb958e7..40113f882 100644 --- a/client/src/Components/Fallback/index.jsx +++ b/client/src/Components/v1/Fallback/index.jsx @@ -2,11 +2,11 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Box, Stack } from "@mui/material"; import "./index.css"; -import FallbackTitle from "./FallbackTitle"; -import FallbackCheckList from "./FallbackCheckList"; -import FallbackActionButtons from "./FallBackActionButtons"; -import FallbackBackground from "./FallbackBackground"; -import FallbackContainer from "./FallbackContainer"; +import FallbackTitle from "./FallbackTitle.jsx"; +import FallbackCheckList from "./FallbackCheckList.jsx"; +import FallbackActionButtons from "./FallBackActionButtons.jsx"; +import FallbackBackground from "./FallbackBackground.jsx"; +import FallbackContainer from "./FallbackContainer.jsx"; /** * Fallback component to display a fallback UI with a title, a list of checks, and a navigation button. * diff --git a/client/src/Components/FilterHeader/index.jsx b/client/src/Components/v1/FilterHeader/index.jsx similarity index 100% rename from client/src/Components/FilterHeader/index.jsx rename to client/src/Components/v1/FilterHeader/index.jsx diff --git a/client/src/Components/GenericFallback/NetworkError.jsx b/client/src/Components/v1/GenericFallback/NetworkError.jsx similarity index 100% rename from client/src/Components/GenericFallback/NetworkError.jsx rename to client/src/Components/v1/GenericFallback/NetworkError.jsx diff --git a/client/src/Components/GenericFallback/index.jsx b/client/src/Components/v1/GenericFallback/index.jsx similarity index 89% rename from client/src/Components/GenericFallback/index.jsx rename to client/src/Components/v1/GenericFallback/index.jsx index 7f6d258ea..137cdd1da 100644 --- a/client/src/Components/GenericFallback/index.jsx +++ b/client/src/Components/v1/GenericFallback/index.jsx @@ -1,8 +1,8 @@ import { useTheme } from "@emotion/react"; import { Box, Stack } from "@mui/material"; -import OutputAnimation from "../../assets/Animations/output.gif"; -import DarkmodeOutput from "../../assets/Animations/darkmodeOutput.gif"; -import Background from "../../assets/Images/background-grid.svg?react"; +import OutputAnimation from "../../../assets/Animations/output.gif"; +import DarkmodeOutput from "../../../assets/Animations/darkmodeOutput.gif"; +import Background from "../../../assets/Images/background-grid.svg?react"; import { useSelector } from "react-redux"; /** diff --git a/client/src/Components/HOC/withAdminCheck.jsx b/client/src/Components/v1/HOC/withAdminCheck.jsx similarity index 91% rename from client/src/Components/HOC/withAdminCheck.jsx rename to client/src/Components/v1/HOC/withAdminCheck.jsx index 458330a1f..8646c99b6 100644 --- a/client/src/Components/HOC/withAdminCheck.jsx +++ b/client/src/Components/v1/HOC/withAdminCheck.jsx @@ -1,8 +1,8 @@ import { useEffect, useState } from "react"; import { useNavigate } from "react-router-dom"; -import { logger } from "../../Utils/Logger"; -import { networkService } from "../../main"; +import { logger } from "../../../Utils/Logger.js"; +import { networkService } from "../../../main.jsx"; const withAdminCheck = (WrappedComponent) => { const WithAdminCheck = (props) => { diff --git a/client/src/Components/Heading/index.jsx b/client/src/Components/v1/Heading/index.jsx similarity index 100% rename from client/src/Components/Heading/index.jsx rename to client/src/Components/v1/Heading/index.jsx diff --git a/client/src/Components/Host/index.jsx b/client/src/Components/v1/Host/index.jsx similarity index 97% rename from client/src/Components/Host/index.jsx rename to client/src/Components/v1/Host/index.jsx index d1cf382b2..772f5b61c 100644 --- a/client/src/Components/Host/index.jsx +++ b/client/src/Components/v1/Host/index.jsx @@ -1,7 +1,7 @@ import { Stack, Typography } from "@mui/material"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import Dot from "../Dot"; +import Dot from "../Dot/index.jsx"; /** * Host component. * This subcomponent receives a params object and displays the host details. diff --git a/client/src/Components/HttpStatusLabel/index.jsx b/client/src/Components/v1/HttpStatusLabel/index.jsx similarity index 96% rename from client/src/Components/HttpStatusLabel/index.jsx rename to client/src/Components/v1/HttpStatusLabel/index.jsx index 52676ae7c..2253e323e 100644 --- a/client/src/Components/HttpStatusLabel/index.jsx +++ b/client/src/Components/v1/HttpStatusLabel/index.jsx @@ -1,6 +1,6 @@ import PropTypes from "prop-types"; import { useTheme } from "@mui/material"; -import { BaseLabel } from "../Label"; +import { BaseLabel } from "../Label/index.jsx"; /** * @component diff --git a/client/src/Components/I18nLoader/index.jsx b/client/src/Components/v1/I18nLoader/index.jsx similarity index 88% rename from client/src/Components/I18nLoader/index.jsx rename to client/src/Components/v1/I18nLoader/index.jsx index 7c3cbfb85..2a6a4966d 100644 --- a/client/src/Components/I18nLoader/index.jsx +++ b/client/src/Components/v1/I18nLoader/index.jsx @@ -1,4 +1,4 @@ -import i18n from "../../Utils/i18n"; +import i18n from "../../../Utils/i18n.js"; import { useSelector } from "react-redux"; import { useEffect } from "react"; const I18nLoader = () => { diff --git a/client/src/Components/IconBox/index.jsx b/client/src/Components/v1/IconBox/index.jsx similarity index 100% rename from client/src/Components/IconBox/index.jsx rename to client/src/Components/v1/IconBox/index.jsx diff --git a/client/src/Components/Image/index.jsx b/client/src/Components/v1/Image/index.jsx similarity index 100% rename from client/src/Components/Image/index.jsx rename to client/src/Components/v1/Image/index.jsx diff --git a/client/src/Components/InfoBox/index.jsx b/client/src/Components/v1/InfoBox/index.jsx similarity index 88% rename from client/src/Components/InfoBox/index.jsx rename to client/src/Components/v1/InfoBox/index.jsx index 6797d6c9c..96e67975d 100644 --- a/client/src/Components/InfoBox/index.jsx +++ b/client/src/Components/v1/InfoBox/index.jsx @@ -1,6 +1,6 @@ -import { RowContainer } from "../StandardContainer"; +import { RowContainer } from "../StandardContainer/index.jsx"; import { Stack, Typography } from "@mui/material"; -import Image from "../Image"; +import Image from "../Image/index.jsx"; import { useTheme } from "@mui/material/styles"; diff --git a/client/src/Components/Inputs/Checkbox/index.jsx b/client/src/Components/v1/Inputs/Checkbox/index.jsx similarity index 94% rename from client/src/Components/Inputs/Checkbox/index.jsx rename to client/src/Components/v1/Inputs/Checkbox/index.jsx index 1497c44fb..64f3cc3db 100644 --- a/client/src/Components/Inputs/Checkbox/index.jsx +++ b/client/src/Components/v1/Inputs/Checkbox/index.jsx @@ -1,9 +1,8 @@ import PropTypes from "prop-types"; import { FormControlLabel, Checkbox as MuiCheckbox } from "@mui/material"; import { useTheme } from "@emotion/react"; -import CheckboxOutline from "../../../assets/icons/checkbox-outline.svg?react"; -import CheckboxFilled from "../../../assets/icons/checkbox-filled.svg?react"; -import "./index.css"; +import CheckboxOutline from "../../../../assets/icons/checkbox-outline.svg?react"; +import CheckboxFilled from "../../../../assets/icons/checkbox-filled.svg?react"; /** * Checkbox Component diff --git a/client/src/Components/Inputs/ColorPicker/index.jsx b/client/src/Components/v1/Inputs/ColorPicker/index.jsx similarity index 100% rename from client/src/Components/Inputs/ColorPicker/index.jsx rename to client/src/Components/v1/Inputs/ColorPicker/index.jsx diff --git a/client/src/Components/Inputs/FieldWrapper/index.jsx b/client/src/Components/v1/Inputs/FieldWrapper/index.jsx similarity index 100% rename from client/src/Components/Inputs/FieldWrapper/index.jsx rename to client/src/Components/v1/Inputs/FieldWrapper/index.jsx diff --git a/client/src/Components/Inputs/ImageUpload/index.jsx b/client/src/Components/v1/Inputs/ImageUpload/index.jsx similarity index 98% rename from client/src/Components/Inputs/ImageUpload/index.jsx rename to client/src/Components/v1/Inputs/ImageUpload/index.jsx index a81c89393..e7415bf8f 100644 --- a/client/src/Components/Inputs/ImageUpload/index.jsx +++ b/client/src/Components/v1/Inputs/ImageUpload/index.jsx @@ -1,10 +1,10 @@ // Components import { Box, Stack, Typography } from "@mui/material"; import CloudUploadIcon from "@mui/icons-material/CloudUpload"; -import Image from "../../../Components/Image"; +import Image from "../../Image/index.jsx"; import TextField from "@mui/material/TextField"; import IconButton from "@mui/material/IconButton"; -import ProgressUpload from "../../ProgressBars"; +import ProgressUpload from "../../ProgressBars/index.jsx"; import ImageIcon from "@mui/icons-material/Image"; // Utils diff --git a/client/src/Components/Inputs/Checkbox/index.css b/client/src/Components/v1/Inputs/Radio/index.css similarity index 100% rename from client/src/Components/Inputs/Checkbox/index.css rename to client/src/Components/v1/Inputs/Radio/index.css diff --git a/client/src/Components/Inputs/Radio/index.jsx b/client/src/Components/v1/Inputs/Radio/index.jsx similarity index 96% rename from client/src/Components/Inputs/Radio/index.jsx rename to client/src/Components/v1/Inputs/Radio/index.jsx index 4c687de1e..575c1af74 100644 --- a/client/src/Components/Inputs/Radio/index.jsx +++ b/client/src/Components/v1/Inputs/Radio/index.jsx @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import { FormControlLabel, Radio as MUIRadio, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; -import RadioChecked from "../../../assets/icons/radio-checked.svg?react"; +import RadioChecked from "../../../../assets/icons/radio-checked.svg?react"; import "./index.css"; /** diff --git a/client/src/Components/Inputs/Search/index.jsx b/client/src/Components/v1/Inputs/Search/index.jsx similarity index 98% rename from client/src/Components/Inputs/Search/index.jsx rename to client/src/Components/v1/Inputs/Search/index.jsx index 7202cc2eb..7a3771d47 100644 --- a/client/src/Components/Inputs/Search/index.jsx +++ b/client/src/Components/v1/Inputs/Search/index.jsx @@ -8,10 +8,10 @@ import { Checkbox, } from "@mui/material"; import { useTheme } from "@emotion/react"; -import SearchIcon from "../../../assets/icons/search.svg?react"; +import SearchIcon from "../../../../assets/icons/search.svg?react"; import React, { useEffect } from "react"; import { useTranslation } from "react-i18next"; -import FieldWrapper from "../FieldWrapper"; +import FieldWrapper from "../FieldWrapper/index.jsx"; /** * Search component using Material UI's Autocomplete. diff --git a/client/src/Components/Inputs/Select/index.css b/client/src/Components/v1/Inputs/Select/index.css similarity index 100% rename from client/src/Components/Inputs/Select/index.css rename to client/src/Components/v1/Inputs/Select/index.css diff --git a/client/src/Components/Inputs/Select/index.jsx b/client/src/Components/v1/Inputs/Select/index.jsx similarity index 98% rename from client/src/Components/Inputs/Select/index.jsx rename to client/src/Components/v1/Inputs/Select/index.jsx index c5c488f91..37ce30dc1 100644 --- a/client/src/Components/Inputs/Select/index.jsx +++ b/client/src/Components/v1/Inputs/Select/index.jsx @@ -2,7 +2,7 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material"; import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; -import FieldWrapper from "../FieldWrapper"; +import FieldWrapper from "../FieldWrapper/index.jsx"; import "./index.css"; diff --git a/client/src/Components/Inputs/TextInput/Adornments/index.jsx b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx similarity index 96% rename from client/src/Components/Inputs/TextInput/Adornments/index.jsx rename to client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx index d6af2a89e..4e4bbd2af 100644 --- a/client/src/Components/Inputs/TextInput/Adornments/index.jsx +++ b/client/src/Components/v1/Inputs/TextInput/Adornments/index.jsx @@ -4,7 +4,7 @@ import PropTypes from "prop-types"; import VisibilityOff from "@mui/icons-material/VisibilityOff"; import Visibility from "@mui/icons-material/Visibility"; import ReorderRoundedIcon from "@mui/icons-material/ReorderRounded"; -import DeleteIcon from "../../../../assets/icons/trash-bin.svg?react"; +import DeleteIcon from "../../../../../assets/icons/trash-bin.svg?react"; export const HttpAdornment = ({ https }) => { const theme = useTheme(); diff --git a/client/src/Components/Inputs/TextInput/index.jsx b/client/src/Components/v1/Inputs/TextInput/index.jsx similarity index 98% rename from client/src/Components/Inputs/TextInput/index.jsx rename to client/src/Components/v1/Inputs/TextInput/index.jsx index 469791704..7203e5f50 100644 --- a/client/src/Components/Inputs/TextInput/index.jsx +++ b/client/src/Components/v1/Inputs/TextInput/index.jsx @@ -2,7 +2,7 @@ import { Stack, TextField, Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { forwardRef, useState, cloneElement } from "react"; import PropTypes from "prop-types"; -import FieldWrapper from "../FieldWrapper"; +import FieldWrapper from "../FieldWrapper/index.jsx"; const getSx = (theme, type, maxWidth) => { const sx = { diff --git a/client/src/Components/Label/index.css b/client/src/Components/v1/Label/index.css similarity index 100% rename from client/src/Components/Label/index.css rename to client/src/Components/v1/Label/index.css diff --git a/client/src/Components/Label/index.jsx b/client/src/Components/v1/Label/index.jsx similarity index 100% rename from client/src/Components/Label/index.jsx rename to client/src/Components/v1/Label/index.jsx diff --git a/client/src/Components/Layouts/AppLayout/index.jsx b/client/src/Components/v1/Layouts/AppLayout/index.jsx similarity index 91% rename from client/src/Components/Layouts/AppLayout/index.jsx rename to client/src/Components/v1/Layouts/AppLayout/index.jsx index d13f6d879..0dbfb1e7a 100644 --- a/client/src/Components/Layouts/AppLayout/index.jsx +++ b/client/src/Components/v1/Layouts/AppLayout/index.jsx @@ -1,7 +1,7 @@ import Box from "@mui/material/Box"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import BackgroundSVG from "../../../assets/Images/background.svg"; +import BackgroundSVG from "../../../../assets/Images/background.svg"; import { useSelector } from "react-redux"; const AppLayout = ({ children }) => { diff --git a/client/src/Components/Layouts/HomeLayout/index.css b/client/src/Components/v1/Layouts/HomeLayout/index.css similarity index 100% rename from client/src/Components/Layouts/HomeLayout/index.css rename to client/src/Components/v1/Layouts/HomeLayout/index.css diff --git a/client/src/Components/Layouts/HomeLayout/index.jsx b/client/src/Components/v1/Layouts/HomeLayout/index.jsx similarity index 88% rename from client/src/Components/Layouts/HomeLayout/index.jsx rename to client/src/Components/v1/Layouts/HomeLayout/index.jsx index 55b612522..3e63aff37 100644 --- a/client/src/Components/Layouts/HomeLayout/index.jsx +++ b/client/src/Components/v1/Layouts/HomeLayout/index.jsx @@ -1,4 +1,4 @@ -import Sidebar from "../../Sidebar"; +import Sidebar from "../../Sidebar/index.jsx"; import { Outlet } from "react-router"; import { Stack } from "@mui/material"; diff --git a/client/src/Components/Link/index.jsx b/client/src/Components/v1/Link/index.jsx similarity index 100% rename from client/src/Components/Link/index.jsx rename to client/src/Components/v1/Link/index.jsx diff --git a/client/src/Components/Link/link.css b/client/src/Components/v1/Link/link.css similarity index 100% rename from client/src/Components/Link/link.css rename to client/src/Components/v1/Link/link.css diff --git a/client/src/Components/MonitorActions/index.jsx b/client/src/Components/v1/MonitorActions/index.jsx similarity index 95% rename from client/src/Components/MonitorActions/index.jsx rename to client/src/Components/v1/MonitorActions/index.jsx index ac5d89a47..23cebc972 100644 --- a/client/src/Components/MonitorActions/index.jsx +++ b/client/src/Components/v1/MonitorActions/index.jsx @@ -10,8 +10,8 @@ import MenuItem from "@mui/material/MenuItem"; import MenuList from "@mui/material/MenuList"; import { useNavigate } from "react-router-dom"; import { useTranslation } from "react-i18next"; -import { createToast } from "../../Utils/toastUtils"; -import { useExportMonitors } from "../../Hooks/monitorHooks"; +import { createToast } from "../../../Utils/toastUtils.jsx"; +import { useExportMonitors } from "../../../Hooks/v1/monitorHooks.js"; const MonitorActions = ({ isLoading }) => { const [open, setOpen] = React.useState(false); diff --git a/client/src/Components/MonitorCountHeader/index.jsx b/client/src/Components/v1/MonitorCountHeader/index.jsx similarity index 95% rename from client/src/Components/MonitorCountHeader/index.jsx rename to client/src/Components/v1/MonitorCountHeader/index.jsx index 7610a9d5c..eba644d26 100644 --- a/client/src/Components/MonitorCountHeader/index.jsx +++ b/client/src/Components/v1/MonitorCountHeader/index.jsx @@ -1,7 +1,7 @@ import { Stack, Typography } from "@mui/material"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import SkeletonLayout from "./skeleton"; +import SkeletonLayout from "./skeleton.jsx"; const MonitorCountHeader = ({ isLoading = false, diff --git a/client/src/Components/MonitorCountHeader/skeleton.jsx b/client/src/Components/v1/MonitorCountHeader/skeleton.jsx similarity index 100% rename from client/src/Components/MonitorCountHeader/skeleton.jsx rename to client/src/Components/v1/MonitorCountHeader/skeleton.jsx diff --git a/client/src/Components/MonitorCreateHeader/index.jsx b/client/src/Components/v1/MonitorCreateHeader/index.jsx similarity index 94% rename from client/src/Components/MonitorCreateHeader/index.jsx rename to client/src/Components/v1/MonitorCreateHeader/index.jsx index b3b50681c..90c12f5ec 100644 --- a/client/src/Components/MonitorCreateHeader/index.jsx +++ b/client/src/Components/v1/MonitorCreateHeader/index.jsx @@ -3,7 +3,7 @@ import { useNavigate } from "react-router-dom"; import PropTypes from "prop-types"; import { useTranslation } from "react-i18next"; import { useTheme } from "@emotion/react"; -import MonitorActions from "../MonitorActions"; +import MonitorActions from "../MonitorActions/index.jsx"; const CreateMonitorHeader = ({ isAdmin, label, isLoading = true, path, bulkPath }) => { const navigate = useNavigate(); diff --git a/client/src/Components/MonitorCreateHeader/skeleton.jsx b/client/src/Components/v1/MonitorCreateHeader/skeleton.jsx similarity index 100% rename from client/src/Components/MonitorCreateHeader/skeleton.jsx rename to client/src/Components/v1/MonitorCreateHeader/skeleton.jsx diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/index.jsx similarity index 92% rename from client/src/Components/MonitorDetailsControlHeader/index.jsx rename to client/src/Components/v1/MonitorDetailsControlHeader/index.jsx index 4674a1fb7..ae565f3bb 100644 --- a/client/src/Components/MonitorDetailsControlHeader/index.jsx +++ b/client/src/Components/v1/MonitorDetailsControlHeader/index.jsx @@ -1,6 +1,6 @@ import Stack from "@mui/material/Stack"; -import Status from "./status"; -import Skeleton from "./skeleton"; +import Status from "./status.jsx"; +import Skeleton from "./skeleton.jsx"; import Button from "@mui/material/Button"; import { Tooltip } from "@mui/material"; import SettingsOutlinedIcon from "@mui/icons-material/SettingsOutlined"; @@ -12,10 +12,10 @@ import EmailIcon from "@mui/icons-material/Email"; import PropTypes from "prop-types"; import { useNavigate } from "react-router-dom"; import { useTheme } from "@mui/material/styles"; -import { usePauseMonitor } from "../../Hooks/monitorHooks"; -import { useSendTestEmail } from "../../Hooks/useSendTestEmail"; +import { usePauseMonitor } from "../../../Hooks/v1/monitorHooks.js"; +import { useSendTestEmail } from "../../../Hooks/v1/useSendTestEmail.js"; import { useTranslation } from "react-i18next"; -import { useTestAllNotifications } from "../../Hooks/useNotifications"; +import { useTestAllNotifications } from "../../../Hooks/v1/useNotifications.js"; /** * MonitorDetailsControlHeader component displays the control header for monitor details. * It includes status display, pause/resume button, and a configure button for admins. diff --git a/client/src/Components/MonitorDetailsControlHeader/skeleton.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/skeleton.jsx similarity index 100% rename from client/src/Components/MonitorDetailsControlHeader/skeleton.jsx rename to client/src/Components/v1/MonitorDetailsControlHeader/skeleton.jsx diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/v1/MonitorDetailsControlHeader/status.jsx similarity index 82% rename from client/src/Components/MonitorDetailsControlHeader/status.jsx rename to client/src/Components/v1/MonitorDetailsControlHeader/status.jsx index 65671a609..d9b7afc40 100644 --- a/client/src/Components/MonitorDetailsControlHeader/status.jsx +++ b/client/src/Components/v1/MonitorDetailsControlHeader/status.jsx @@ -1,14 +1,14 @@ // Components import Stack from "@mui/material/Stack"; -import PulseDot from "../../Components/Animated/PulseDot"; +import PulseDot from "../Animated/PulseDot.jsx"; import Typography from "@mui/material/Typography"; -import Dot from "../../Components/Dot"; +import Dot from "../Dot/index.jsx"; // Utils -import { formatDurationRounded } from "../../Utils/timeUtils"; +import { formatDurationRounded } from "../../../Utils/timeUtils.js"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; -import { useMonitorUtils } from "../../Hooks/useMonitorUtils"; -import { formatMonitorUrl } from "../../Utils/utils"; +import { useMonitorUtils } from "../../../Hooks/v1/useMonitorUtils.js"; +import { formatMonitorUrl } from "../../../Utils/utils.js"; /** * Status component displays the status information of a monitor. * It includes the monitor's name, URL, and check interval. diff --git a/client/src/Components/MonitorTimeFrameHeader/index.jsx b/client/src/Components/v1/MonitorTimeFrameHeader/index.jsx similarity index 97% rename from client/src/Components/MonitorTimeFrameHeader/index.jsx rename to client/src/Components/v1/MonitorTimeFrameHeader/index.jsx index 3958d507c..9d57edc41 100644 --- a/client/src/Components/MonitorTimeFrameHeader/index.jsx +++ b/client/src/Components/v1/MonitorTimeFrameHeader/index.jsx @@ -1,6 +1,6 @@ import { Stack, Typography, Button, ButtonGroup } from "@mui/material"; import { useTheme } from "@emotion/react"; -import SkeletonLayout from "./skeleton"; +import SkeletonLayout from "./skeleton.jsx"; import PropTypes from "prop-types"; const MonitorTimeFrameHeader = ({ diff --git a/client/src/Components/MonitorTimeFrameHeader/skeleton.jsx b/client/src/Components/v1/MonitorTimeFrameHeader/skeleton.jsx similarity index 100% rename from client/src/Components/MonitorTimeFrameHeader/skeleton.jsx rename to client/src/Components/v1/MonitorTimeFrameHeader/skeleton.jsx diff --git a/client/src/Components/NotificationConfig/index.jsx b/client/src/Components/v1/NotificationConfig/index.jsx similarity index 98% rename from client/src/Components/NotificationConfig/index.jsx rename to client/src/Components/v1/NotificationConfig/index.jsx index c37889eff..58096881e 100644 --- a/client/src/Components/NotificationConfig/index.jsx +++ b/client/src/Components/v1/NotificationConfig/index.jsx @@ -3,7 +3,7 @@ import Stack from "@mui/material/Stack"; import Typography from "@mui/material/Typography"; import Divider from "@mui/material/Divider"; import DeleteOutlineRoundedIcon from "@mui/icons-material/DeleteOutlineRounded"; -import Search from "../Inputs/Search"; +import Search from "../Inputs/Search/index.jsx"; // Utils import { useState, useEffect } from "react"; diff --git a/client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx similarity index 98% rename from client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx rename to client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx index dc94ee731..2aae996f6 100644 --- a/client/src/Components/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx +++ b/client/src/Components/v1/NotificationIntegrationModal/Components/NotificationIntegrationModal.jsx @@ -14,9 +14,9 @@ import { Stack, } from "@mui/material"; import { useTheme } from "@emotion/react"; -import TabPanel from "./TabPanel"; -import TabComponent from "./TabComponent"; -import useNotifications from "../Hooks/useNotification"; +import TabPanel from "./TabPanel.jsx"; +import TabComponent from "./TabComponent.jsx"; +import useNotifications from "../Hooks/useNotification.js"; // Define constants for notification types to avoid magic values const NOTIFICATION_TYPES = { diff --git a/client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx similarity index 95% rename from client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx rename to client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx index 571379c7e..87fb2c301 100644 --- a/client/src/Components/NotificationIntegrationModal/Components/TabComponent.jsx +++ b/client/src/Components/v1/NotificationIntegrationModal/Components/TabComponent.jsx @@ -2,8 +2,8 @@ import React from "react"; import { Typography, Box, Button, CircularProgress } from "@mui/material"; import { useTranslation } from "react-i18next"; import { useTheme } from "@emotion/react"; -import TextInput from "../../../Components/Inputs/TextInput"; -import Checkbox from "../../../Components/Inputs/Checkbox"; +import TextInput from "../../Inputs/TextInput/index.jsx"; +import Checkbox from "../../Inputs/Checkbox/index.jsx"; const TabComponent = ({ type, diff --git a/client/src/Components/NotificationIntegrationModal/Components/TabPanel.jsx b/client/src/Components/v1/NotificationIntegrationModal/Components/TabPanel.jsx similarity index 100% rename from client/src/Components/NotificationIntegrationModal/Components/TabPanel.jsx rename to client/src/Components/v1/NotificationIntegrationModal/Components/TabPanel.jsx diff --git a/client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js b/client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js similarity index 96% rename from client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js rename to client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js index cdbc11598..c0712fa5f 100644 --- a/client/src/Components/NotificationIntegrationModal/Hooks/useNotification.js +++ b/client/src/Components/v1/NotificationIntegrationModal/Hooks/useNotification.js @@ -1,7 +1,7 @@ import { useState } from "react"; import { useTranslation } from "react-i18next"; -import { networkService } from "../../../Utils/NetworkService"; -import { createToast } from "../../../Utils/toastUtils"; +import { networkService } from "../../../../Utils/NetworkService.js"; +import { createToast } from "../../../../Utils/toastUtils.jsx"; // Define constants for notification types to avoid magic values const NOTIFICATION_TYPES = { diff --git a/client/src/Components/PageStateWrapper/index.jsx b/client/src/Components/v1/PageStateWrapper/index.jsx similarity index 90% rename from client/src/Components/PageStateWrapper/index.jsx rename to client/src/Components/v1/PageStateWrapper/index.jsx index f971b2c9c..ac97704df 100644 --- a/client/src/Components/PageStateWrapper/index.jsx +++ b/client/src/Components/v1/PageStateWrapper/index.jsx @@ -1,9 +1,9 @@ -import GenericFallback from "../GenericFallback"; -import Fallback from "../Fallback"; +import GenericFallback from "../GenericFallback/index.jsx"; +import Fallback from "../Fallback/index.jsx"; import { Typography } from "@mui/material"; import { useTheme } from "@emotion/react"; import { useTranslation } from "react-i18next"; -import { useIsAdmin } from "../../Hooks/useIsAdmin"; +import { useIsAdmin } from "../../../Hooks/v1/useIsAdmin.js"; import PropTypes from "prop-types"; const PageStateWrapper = ({ networkError, diff --git a/client/src/Components/ProgressBars/index.css b/client/src/Components/v1/ProgressBars/index.css similarity index 100% rename from client/src/Components/ProgressBars/index.css rename to client/src/Components/v1/ProgressBars/index.css diff --git a/client/src/Components/ProgressBars/index.jsx b/client/src/Components/v1/ProgressBars/index.jsx similarity index 100% rename from client/src/Components/ProgressBars/index.jsx rename to client/src/Components/v1/ProgressBars/index.jsx diff --git a/client/src/Components/Inputs/Radio/index.css b/client/src/Components/v1/ProgressStepper/index.css similarity index 100% rename from client/src/Components/Inputs/Radio/index.css rename to client/src/Components/v1/ProgressStepper/index.css diff --git a/client/src/Components/ProgressStepper/index.jsx b/client/src/Components/v1/ProgressStepper/index.jsx similarity index 100% rename from client/src/Components/ProgressStepper/index.jsx rename to client/src/Components/v1/ProgressStepper/index.jsx diff --git a/client/src/Components/ProtectedRoute/index.jsx b/client/src/Components/v1/ProtectedRoute/index.jsx similarity index 100% rename from client/src/Components/ProtectedRoute/index.jsx rename to client/src/Components/v1/ProtectedRoute/index.jsx diff --git a/client/src/Components/RoleProtectedRoute/index.jsx b/client/src/Components/v1/RoleProtectedRoute/index.jsx similarity index 100% rename from client/src/Components/RoleProtectedRoute/index.jsx rename to client/src/Components/v1/RoleProtectedRoute/index.jsx diff --git a/client/src/Components/ShareComponent/index.jsx b/client/src/Components/v1/ShareComponent/index.jsx similarity index 100% rename from client/src/Components/ShareComponent/index.jsx rename to client/src/Components/v1/ShareComponent/index.jsx diff --git a/client/src/Components/Sidebar/components/authFooter.jsx b/client/src/Components/v1/Sidebar/components/authFooter.jsx similarity index 96% rename from client/src/Components/Sidebar/components/authFooter.jsx rename to client/src/Components/v1/Sidebar/components/authFooter.jsx index e94aeddee..2c33a2402 100644 --- a/client/src/Components/Sidebar/components/authFooter.jsx +++ b/client/src/Components/v1/Sidebar/components/authFooter.jsx @@ -3,19 +3,19 @@ import Box from "@mui/material/Box"; import Typography from "@mui/material/Typography"; import Tooltip from "@mui/material/Tooltip"; import IconButton from "@mui/material/IconButton"; -import Avatar from "../../Avatar"; +import Avatar from "../../Avatar/index.jsx"; import Menu from "@mui/material/Menu"; import MenuItem from "@mui/material/MenuItem"; import Divider from "@mui/material/Divider"; -import DotsVertical from "../../../assets/icons/dots-vertical.svg?react"; -import LogoutSvg from "../../../assets/icons/logout.svg?react"; +import DotsVertical from "../../../../assets/icons/dots-vertical.svg?react"; +import LogoutSvg from "../../../../assets/icons/logout.svg?react"; import { useTheme } from "@emotion/react"; import { useSelector } from "react-redux"; import { useTranslation } from "react-i18next"; import { useState } from "react"; import { useNavigate } from "react-router"; -import { clearAuthState } from "../../../Features/Auth/authSlice"; +import { clearAuthState } from "../../../../Features/Auth/authSlice.js"; import { useDispatch } from "react-redux"; import PropTypes from "prop-types"; diff --git a/client/src/Components/Sidebar/components/collapseButton.jsx b/client/src/Components/v1/Sidebar/components/collapseButton.jsx similarity index 88% rename from client/src/Components/Sidebar/components/collapseButton.jsx rename to client/src/Components/v1/Sidebar/components/collapseButton.jsx index e7c382e5a..e3a9c91f5 100644 --- a/client/src/Components/Sidebar/components/collapseButton.jsx +++ b/client/src/Components/v1/Sidebar/components/collapseButton.jsx @@ -1,9 +1,9 @@ import IconButton from "@mui/material/IconButton"; -import ArrowRight from "../../ArrowRight"; -import ArrowLeft from "../../ArrowLeft"; +import ArrowRight from "../../ArrowRight/index.jsx"; +import ArrowLeft from "../../ArrowLeft/index.jsx"; import { useTheme } from "@mui/material/styles"; import { useDispatch } from "react-redux"; -import { toggleSidebar } from "../../../Features/UI/uiSlice"; +import { toggleSidebar } from "../../../../Features/UI/uiSlice.js"; import PropTypes from "prop-types"; const CollapseButton = ({ collapsed }) => { diff --git a/client/src/Components/Sidebar/components/logo.jsx b/client/src/Components/v1/Sidebar/components/logo.jsx similarity index 100% rename from client/src/Components/Sidebar/components/logo.jsx rename to client/src/Components/v1/Sidebar/components/logo.jsx diff --git a/client/src/Components/Sidebar/components/navItem.jsx b/client/src/Components/v1/Sidebar/components/navItem.jsx similarity index 100% rename from client/src/Components/Sidebar/components/navItem.jsx rename to client/src/Components/v1/Sidebar/components/navItem.jsx diff --git a/client/src/Components/Sidebar/index.jsx b/client/src/Components/v1/Sidebar/index.jsx similarity index 75% rename from client/src/Components/Sidebar/index.jsx rename to client/src/Components/v1/Sidebar/index.jsx index 6b7b6577c..bd7400fa6 100644 --- a/client/src/Components/Sidebar/index.jsx +++ b/client/src/Components/v1/Sidebar/index.jsx @@ -1,29 +1,29 @@ import Stack from "@mui/material/Stack"; import List from "@mui/material/List"; -import Logo from "./components/logo"; -import CollapseButton from "./components/collapseButton"; +import Logo from "./components/logo.jsx"; +import CollapseButton from "./components/collapseButton.jsx"; import Divider from "@mui/material/Divider"; -import NavItem from "./components/navItem"; -import AuthFooter from "./components/authFooter"; +import NavItem from "./components/navItem.jsx"; +import AuthFooter from "./components/authFooter.jsx"; -import StarPrompt from "../StarPrompt"; -import LockSvg from "../../assets/icons/lock.svg?react"; -import UserSvg from "../../assets/icons/user.svg?react"; -import TeamSvg from "../../assets/icons/user-two.svg?react"; -import Support from "../../assets/icons/support.svg?react"; -import Maintenance from "../../assets/icons/maintenance.svg?react"; -import Monitors from "../../assets/icons/monitors.svg?react"; -import Incidents from "../../assets/icons/incidents.svg?react"; -import Integrations from "../../assets/icons/integrations.svg?react"; -import PageSpeed from "../../assets/icons/page-speed.svg?react"; -import Settings from "../../assets/icons/settings.svg?react"; -import ChangeLog from "../../assets/icons/changeLog.svg?react"; -import Docs from "../../assets/icons/docs.svg?react"; -import StatusPages from "../../assets/icons/status-pages.svg?react"; -import Discussions from "../../assets/icons/discussions.svg?react"; -import Notifications from "../../assets/icons/notifications.svg?react"; -import Logs from "../../assets/icons/logs.svg?react"; +import StarPrompt from "../StarPrompt/index.jsx"; +import LockSvg from "../../../assets/icons/lock.svg?react"; +import UserSvg from "../../../assets/icons/user.svg?react"; +import TeamSvg from "../../../assets/icons/user-two.svg?react"; +import Support from "../../../assets/icons/support.svg?react"; +import Maintenance from "../../../assets/icons/maintenance.svg?react"; +import Monitors from "../../../assets/icons/monitors.svg?react"; +import Incidents from "../../../assets/icons/incidents.svg?react"; +import Integrations from "../../../assets/icons/integrations.svg?react"; +import PageSpeed from "../../../assets/icons/page-speed.svg?react"; +import Settings from "../../../assets/icons/settings.svg?react"; +import ChangeLog from "../../../assets/icons/changeLog.svg?react"; +import Docs from "../../../assets/icons/docs.svg?react"; +import StatusPages from "../../../assets/icons/status-pages.svg?react"; +import Discussions from "../../../assets/icons/discussions.svg?react"; +import Notifications from "../../../assets/icons/notifications.svg?react"; +import Logs from "../../../assets/icons/logs.svg?react"; // Utils import { useTheme } from "@mui/material/styles"; diff --git a/client/src/Components/Skeletons/FullPage/index.jsx b/client/src/Components/v1/Skeletons/FullPage/index.jsx similarity index 100% rename from client/src/Components/Skeletons/FullPage/index.jsx rename to client/src/Components/v1/Skeletons/FullPage/index.jsx diff --git a/client/src/Components/StandardContainer/index.jsx b/client/src/Components/v1/StandardContainer/index.jsx similarity index 100% rename from client/src/Components/StandardContainer/index.jsx rename to client/src/Components/v1/StandardContainer/index.jsx diff --git a/client/src/Components/StarPrompt/index.jsx b/client/src/Components/v1/StarPrompt/index.jsx similarity index 97% rename from client/src/Components/StarPrompt/index.jsx rename to client/src/Components/v1/StarPrompt/index.jsx index f5f130387..6151544c1 100644 --- a/client/src/Components/StarPrompt/index.jsx +++ b/client/src/Components/v1/StarPrompt/index.jsx @@ -4,7 +4,7 @@ import CloseIcon from "@mui/icons-material/Close"; import { useTheme } from "@emotion/react"; import { useSelector, useDispatch } from "react-redux"; import { useTranslation } from "react-i18next"; -import { setStarPromptOpen } from "../../Features/UI/uiSlice"; +import { setStarPromptOpen } from "../../../Features/UI/uiSlice.js"; const StarPrompt = ({ repoUrl = "https://github.com/bluewave-labs/checkmate" }) => { const theme = useTheme(); diff --git a/client/src/Components/StatBox/index.jsx b/client/src/Components/v1/StatBox/index.jsx similarity index 97% rename from client/src/Components/StatBox/index.jsx rename to client/src/Components/v1/StatBox/index.jsx index 7d093de60..1b5f1cf6f 100644 --- a/client/src/Components/StatBox/index.jsx +++ b/client/src/Components/v1/StatBox/index.jsx @@ -1,8 +1,8 @@ import { Stack, Typography } from "@mui/material"; -import Image from "../Image"; +import Image from "../Image/index.jsx"; import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; -import { useMonitorUtils } from "../../Hooks/useMonitorUtils"; +import { useMonitorUtils } from "../../../Hooks/v1/useMonitorUtils.js"; /** * StatBox Component diff --git a/client/src/Components/StatusBoxes/index.jsx b/client/src/Components/v1/StatusBoxes/index.jsx similarity index 93% rename from client/src/Components/StatusBoxes/index.jsx rename to client/src/Components/v1/StatusBoxes/index.jsx index d97bb6211..a78337ba7 100644 --- a/client/src/Components/StatusBoxes/index.jsx +++ b/client/src/Components/v1/StatusBoxes/index.jsx @@ -1,6 +1,6 @@ // Components import { Stack } from "@mui/material"; -import SkeletonLayout from "./skeleton"; +import SkeletonLayout from "./skeleton.jsx"; // Utils import { useTheme } from "@mui/material/styles"; import PropTypes from "prop-types"; diff --git a/client/src/Components/StatusBoxes/skeleton.jsx b/client/src/Components/v1/StatusBoxes/skeleton.jsx similarity index 100% rename from client/src/Components/StatusBoxes/skeleton.jsx rename to client/src/Components/v1/StatusBoxes/skeleton.jsx diff --git a/client/src/Components/Subheader/index.jsx b/client/src/Components/v1/Subheader/index.jsx similarity index 100% rename from client/src/Components/Subheader/index.jsx rename to client/src/Components/v1/Subheader/index.jsx diff --git a/client/src/Components/Tab/index.jsx b/client/src/Components/v1/Tab/index.jsx similarity index 100% rename from client/src/Components/Tab/index.jsx rename to client/src/Components/v1/Tab/index.jsx diff --git a/client/src/Components/Table/TablePagination/Actions/index.jsx b/client/src/Components/v1/Table/TablePagination/Actions/index.jsx similarity index 95% rename from client/src/Components/Table/TablePagination/Actions/index.jsx rename to client/src/Components/v1/Table/TablePagination/Actions/index.jsx index dec72446b..0df62878e 100644 --- a/client/src/Components/Table/TablePagination/Actions/index.jsx +++ b/client/src/Components/v1/Table/TablePagination/Actions/index.jsx @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import { Box, Button } from "@mui/material"; -import LeftArrow from "../../../ArrowLeft"; -import RightArrow from "../../../ArrowRight"; +import LeftArrow from "../../../ArrowLeft/index.jsx"; +import RightArrow from "../../../ArrowRight/index.jsx"; import { useTheme } from "@emotion/react"; TablePaginationActions.propTypes = { diff --git a/client/src/Components/Table/TablePagination/index.jsx b/client/src/Components/v1/Table/TablePagination/index.jsx similarity index 96% rename from client/src/Components/Table/TablePagination/index.jsx rename to client/src/Components/v1/Table/TablePagination/index.jsx index 44b127d45..8a5af0cd5 100644 --- a/client/src/Components/Table/TablePagination/index.jsx +++ b/client/src/Components/v1/Table/TablePagination/index.jsx @@ -1,8 +1,8 @@ import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; import { Stack, TablePagination, Typography } from "@mui/material"; -import { TablePaginationActions } from "./Actions"; -import SelectorVertical from "../../../assets/icons/selector-vertical.svg?react"; +import { TablePaginationActions } from "./Actions/index.jsx"; +import SelectorVertical from "../../../../assets/icons/selector-vertical.svg?react"; Pagination.propTypes = { paginationLabel: PropTypes.string, // Label for the pagination. diff --git a/client/src/Components/Table/TableUtils.js b/client/src/Components/v1/Table/TableUtils.js similarity index 100% rename from client/src/Components/Table/TableUtils.js rename to client/src/Components/v1/Table/TableUtils.js diff --git a/client/src/Components/Table/index.jsx b/client/src/Components/v1/Table/index.jsx similarity index 99% rename from client/src/Components/Table/index.jsx rename to client/src/Components/v1/Table/index.jsx index bfafb5387..2113a2215 100644 --- a/client/src/Components/Table/index.jsx +++ b/client/src/Components/v1/Table/index.jsx @@ -8,7 +8,7 @@ import { TableRow, } from "@mui/material"; import Tooltip from "@mui/material/Tooltip"; -import SkeletonLayout from "./skeleton"; +import SkeletonLayout from "./skeleton.jsx"; import PropTypes from "prop-types"; import { useTheme } from "@emotion/react"; diff --git a/client/src/Components/Table/skeleton.jsx b/client/src/Components/v1/Table/skeleton.jsx similarity index 100% rename from client/src/Components/Table/skeleton.jsx rename to client/src/Components/v1/Table/skeleton.jsx diff --git a/client/src/Components/TextLink/index.jsx b/client/src/Components/v1/TextLink/index.jsx similarity index 100% rename from client/src/Components/TextLink/index.jsx rename to client/src/Components/v1/TextLink/index.jsx diff --git a/client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx b/client/src/Components/v1/ThemeSwitch/SunAndMoonIcon.jsx similarity index 100% rename from client/src/Components/ThemeSwitch/SunAndMoonIcon.jsx rename to client/src/Components/v1/ThemeSwitch/SunAndMoonIcon.jsx diff --git a/client/src/Components/ThemeSwitch/index.css b/client/src/Components/v1/ThemeSwitch/index.css similarity index 100% rename from client/src/Components/ThemeSwitch/index.css rename to client/src/Components/v1/ThemeSwitch/index.css diff --git a/client/src/Components/ThemeSwitch/index.jsx b/client/src/Components/v1/ThemeSwitch/index.jsx similarity index 91% rename from client/src/Components/ThemeSwitch/index.jsx rename to client/src/Components/v1/ThemeSwitch/index.jsx index 5efb17419..60763da90 100644 --- a/client/src/Components/ThemeSwitch/index.jsx +++ b/client/src/Components/v1/ThemeSwitch/index.jsx @@ -10,9 +10,9 @@ */ import { IconButton } from "@mui/material"; -import SunAndMoonIcon from "./SunAndMoonIcon"; +import SunAndMoonIcon from "./SunAndMoonIcon.jsx"; import { useDispatch, useSelector } from "react-redux"; -import { setMode } from "../../Features/UI/uiSlice"; +import { setMode } from "../../../Features/UI/uiSlice.js"; import "./index.css"; import { useTranslation } from "react-i18next"; diff --git a/client/src/Components/Toast/body.jsx b/client/src/Components/v1/Toast/body.jsx similarity index 100% rename from client/src/Components/Toast/body.jsx rename to client/src/Components/v1/Toast/body.jsx diff --git a/client/src/Components/Toast/index.jsx b/client/src/Components/v1/Toast/index.jsx similarity index 98% rename from client/src/Components/Toast/index.jsx rename to client/src/Components/v1/Toast/index.jsx index 36df0e631..5d66fca3f 100644 --- a/client/src/Components/Toast/index.jsx +++ b/client/src/Components/v1/Toast/index.jsx @@ -2,7 +2,7 @@ import Stack from "@mui/material/Stack"; import IconButton from "@mui/material/IconButton"; import Typography from "@mui/material/Typography"; import Button from "@mui/material/Button"; -import ToastBody from "./body"; +import ToastBody from "./body.jsx"; import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined"; import ErrorOutlineOutlinedIcon from "@mui/icons-material/ErrorOutlineOutlined"; import WarningAmberOutlinedIcon from "@mui/icons-material/WarningAmberOutlined"; diff --git a/client/src/Components/v2/ActionsMenu/index.tsx b/client/src/Components/v2/ActionsMenu/index.tsx new file mode 100644 index 000000000..a143be3f5 --- /dev/null +++ b/client/src/Components/v2/ActionsMenu/index.tsx @@ -0,0 +1,53 @@ +import React, { useState } from "react"; +import Menu from "@mui/material/Menu"; +import MenuItem from "@mui/material/MenuItem"; +import IconButton from "@mui/material/IconButton"; +import Settings from "@/assets/icons/settings-bold.svg?react"; + +export type ActionMenuItem = { + id: number | string; + label: React.ReactNode; + action: Function; + closeMenu?: boolean; +}; + +export const ActionsMenu = ({ items }: { items: ActionMenuItem[] }) => { + const [anchorEl, setAnchorEl] = useState(null); + const open = Boolean(anchorEl); + + const handleClick = (e: React.MouseEvent) => { + e.stopPropagation(); + setAnchorEl(e.currentTarget); + }; + + const handleClose = (e: React.MouseEvent) => { + e.stopPropagation(); + setAnchorEl(null); + }; + + return ( +
+ + + + + {items.map((item) => ( + ) => { + e.stopPropagation(); + if (item.closeMenu) handleClose(e); + item.action(); + }} + > + {item.label} + + ))} + +
+ ); +}; diff --git a/client/src/Components/v2/Arrows/ArrowLeft.tsx b/client/src/Components/v2/Arrows/ArrowLeft.tsx new file mode 100644 index 000000000..01d1342c8 --- /dev/null +++ b/client/src/Components/v2/Arrows/ArrowLeft.tsx @@ -0,0 +1,36 @@ +import LeftArrow from "@/assets/icons/left-arrow.svg?react"; +import LeftArrowDouble from "@/assets/icons/left-arrow-double.svg?react"; +import LeftArrowLong from "@/assets/icons/left-arrow-long.svg?react"; + +export const ArrowLeft = ({ + type, + color = "#667085", + ...props +}: { + type?: string; + color?: string | undefined; + [key: string]: any; +}) => { + if (type === "double") { + return ( + + ); + } else if (type === "long") { + return ( + + ); + } else { + return ( + + ); + } +}; diff --git a/client/src/Components/v2/Arrows/ArrowRight.tsx b/client/src/Components/v2/Arrows/ArrowRight.tsx new file mode 100644 index 000000000..c73165f16 --- /dev/null +++ b/client/src/Components/v2/Arrows/ArrowRight.tsx @@ -0,0 +1,28 @@ +import RightArrow from "@/assets/icons/right-arrow.svg?react"; +import RightArrowDouble from "@/assets/icons/right-arrow-double.svg?react"; + +export const ArrowRight = ({ + type, + color = "#667085", + ...props +}: { + type?: string; + color?: string | undefined; + [key: string]: any; +}) => { + if (type === "double") { + return ( + + ); + } else { + return ( + + ); + } +}; diff --git a/client/src/Components/v2/Auth/AuthBasePage.tsx b/client/src/Components/v2/Auth/AuthBasePage.tsx new file mode 100644 index 000000000..ba4230a6d --- /dev/null +++ b/client/src/Components/v2/Auth/AuthBasePage.tsx @@ -0,0 +1,48 @@ +import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import { HeaderAuth } from "@/Components/v2/Auth"; +import Logo from "@/assets/icons/checkmate-icon.svg?react"; + +import type { StackProps } from "@mui/material/Stack"; +import { useTheme } from "@mui/material/styles"; +import { Typography } from "@mui/material"; + +interface AuthBasePageProps extends StackProps { + title?: string; + subtitle?: string; + children: React.ReactNode; +} + +export const AuthBasePage: React.FC = ({ + children, + title, + subtitle, + ...props +}) => { + const theme = useTheme(); + return ( + + + + + + + {title} + {subtitle} + {children} + + + ); +}; diff --git a/client/src/Components/v2/Auth/HeaderAuth.jsx b/client/src/Components/v2/Auth/HeaderAuth.jsx new file mode 100644 index 000000000..4e437cd7e --- /dev/null +++ b/client/src/Components/v2/Auth/HeaderAuth.jsx @@ -0,0 +1,26 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Logo from "@/assets/icons/checkmate-icon.svg?react"; + +import { useTheme } from "@mui/material/styles"; +import { useTranslation } from "react-i18next"; +import { LanguageSelector, ThemeSwitch } from "@/Components/v2/Inputs"; + +export const HeaderAuth = () => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + + + + ); +}; diff --git a/client/src/Components/v2/Auth/index.jsx b/client/src/Components/v2/Auth/index.jsx new file mode 100644 index 000000000..84b742113 --- /dev/null +++ b/client/src/Components/v2/Auth/index.jsx @@ -0,0 +1,2 @@ +export { HeaderAuth } from "./HeaderAuth"; +export { AuthBasePage } from "./AuthBasePage"; diff --git a/client/src/Components/v2/DesignElements/BaseBox.tsx b/client/src/Components/v2/DesignElements/BaseBox.tsx new file mode 100644 index 000000000..14c4af1c4 --- /dev/null +++ b/client/src/Components/v2/DesignElements/BaseBox.tsx @@ -0,0 +1,23 @@ +import Box from "@mui/material/Box"; +import { useTheme } from "@mui/material/styles"; +import type { SxProps } from "@mui/material/styles"; + +type BaseBoxProps = React.PropsWithChildren<{ sx?: SxProps }>; + +export const BaseBox: React.FC = ({ children, sx }) => { + const theme = useTheme(); + return ( + + {children} + + ); +}; diff --git a/client/src/Components/v2/DesignElements/BasePage.tsx b/client/src/Components/v2/DesignElements/BasePage.tsx new file mode 100644 index 000000000..f458cbb0a --- /dev/null +++ b/client/src/Components/v2/DesignElements/BasePage.tsx @@ -0,0 +1,80 @@ +import Stack from "@mui/material/Stack"; +import { ErrorFallback, EmptyFallback } from "./Fallback"; + +import type { StackProps } from "@mui/material/Stack"; +import { useTheme } from "@mui/material/styles"; +import { useTranslation } from "react-i18next"; +interface BasePageProps extends StackProps { + children: React.ReactNode; +} + +export const BasePage: React.FC = ({ + children, + ...props +}: { + children: React.ReactNode; +}) => { + const theme = useTheme(); + return ( + + {children} + + ); +}; + +interface BasePageWithStatesProps extends StackProps { + loading: boolean; + error: any; + items: any[]; + page: string; + actionLink?: string; + children: React.ReactNode; +} + +const isEmpty = (items: any[]) => { + if (!items) return true; + if (Array.isArray(items) && items.length === 0) return true; + return false; +}; + +export const BasePageWithStates: React.FC = ({ + loading, + error, + items, + page, + actionLink, + children, + ...props +}: BasePageWithStatesProps) => { + const { t } = useTranslation(); + + if (loading) { + return null; + } + + if (error) { + return ( + + ); + } + + if (isEmpty(items)) { + return ( + + ); + } + + return {children}; +}; diff --git a/client/src/Components/v2/DesignElements/BulletPointCheck.tsx b/client/src/Components/v2/DesignElements/BulletPointCheck.tsx new file mode 100644 index 000000000..03147e011 --- /dev/null +++ b/client/src/Components/v2/DesignElements/BulletPointCheck.tsx @@ -0,0 +1,45 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import CheckOutlined from "@/assets/icons/check-outlined.svg?react"; +import { useTheme } from "@mui/material/styles"; + +export const BulletPointCheck = ({ + text, + variant = "info", +}: { + text: string; + noHighlightText?: string; + variant?: "success" | "error" | "info"; +}) => { + const theme = useTheme(); + const colors: Record = { + success: theme.palette.success.main, + error: theme.palette.error.main, + info: theme.palette.primary.contrastTextSecondary, + }; + + return ( + + + + {text} + + + ); +}; diff --git a/client/src/Components/v2/DesignElements/Dot.tsx b/client/src/Components/v2/DesignElements/Dot.tsx new file mode 100644 index 000000000..ca3884cfb --- /dev/null +++ b/client/src/Components/v2/DesignElements/Dot.tsx @@ -0,0 +1,23 @@ +export const Dot = ({ + color = "gray", + size = "4px", + style, +}: { + color?: string; + size?: string; + style?: React.CSSProperties; +}) => { + return ( + + ); +}; diff --git a/client/src/Components/v2/DesignElements/Fallback.tsx b/client/src/Components/v2/DesignElements/Fallback.tsx new file mode 100644 index 000000000..f7b48a113 --- /dev/null +++ b/client/src/Components/v2/DesignElements/Fallback.tsx @@ -0,0 +1,158 @@ +import Box from "@mui/material/Box"; +import Stack from "@mui/material/Stack"; +import OutputAnimation from "@/assets/Animations/output.gif"; +import DarkmodeOutput from "@/assets/Animations/darkmodeOutput.gif"; +import Typography from "@mui/material/Typography"; +import { BulletPointCheck } from "@/Components/v2/DesignElements"; +import { Button } from "@/Components/v2/Inputs"; + +import { useNavigate } from "react-router"; +import { useMediaQuery } from "@mui/material"; +import { useTheme } from "@mui/material/styles"; +import { useSelector } from "react-redux"; + +import type { BoxProps } from "@mui/material"; + +interface BaseFallbackProps extends BoxProps { + children: React.ReactNode; +} + +export const BaseFallback: React.FC = ({ children, ...props }) => { + const theme = useTheme(); + const mode = useSelector((state: any) => state.ui.mode); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + + return ( + + + + + + {children} + + + + ); +}; + +export const ErrorFallback = ({ + title, + subtitle, +}: { + title: string; + subtitle: string; +}) => { + const theme = useTheme(); + return ( + + + {title} + + {subtitle} + + ); +}; + +export const EmptyFallback = ({ + page, + title, + bullets, + actionButtonText, + actionLink, +}: { + page: string; + title: string; + bullets: any; + actionButtonText: string; + actionLink: string; +}) => { + const theme = useTheme(); + const navigate = useNavigate(); + return ( + + + + {title} + + + {bullets?.map((bullet: string, index: number) => ( + + ))} + + + + + + + ); +}; diff --git a/client/src/Components/v2/DesignElements/PulseDot.tsx b/client/src/Components/v2/DesignElements/PulseDot.tsx new file mode 100644 index 000000000..a785b5a0d --- /dev/null +++ b/client/src/Components/v2/DesignElements/PulseDot.tsx @@ -0,0 +1,44 @@ +import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import { useTheme } from "@mui/material/styles"; +export const PulseDot = ({ color }: { color: string }) => { + const theme = useTheme(); + return ( + + + + ); +}; diff --git a/client/src/Components/v2/DesignElements/SplitBox.tsx b/client/src/Components/v2/DesignElements/SplitBox.tsx new file mode 100644 index 000000000..f5a09d8f5 --- /dev/null +++ b/client/src/Components/v2/DesignElements/SplitBox.tsx @@ -0,0 +1,68 @@ +import { Fragment } from "react"; +import Stack from "@mui/material/Stack"; +import Box from "@mui/material/Box"; +import Typography from "@mui/material/Typography"; +import { useTheme } from "@mui/material/styles"; +import { useMediaQuery } from "@mui/material"; +export const SplitBox = ({ + left, + right, +}: { + left: React.ReactNode; + right: React.ReactNode; +}) => { + const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + return ( + + + {left} + + + {right} + + + ); +}; + +export const ConfigBox = ({ + title, + subtitle, + rightContent, +}: { + title: string; + subtitle: string; + rightContent: React.ReactNode; +}) => { + return ( + + + {title} + + {subtitle} + + } + right={rightContent} + /> + ); +}; diff --git a/client/src/Components/v2/DesignElements/StatBox.tsx b/client/src/Components/v2/DesignElements/StatBox.tsx new file mode 100644 index 000000000..3450444b2 --- /dev/null +++ b/client/src/Components/v2/DesignElements/StatBox.tsx @@ -0,0 +1,57 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import { useTheme } from "@mui/material/styles"; +import { useMediaQuery } from "@mui/material"; +import type { PaletteKey } from "@/Utils/Theme/v2/theme"; +import { BaseBox } from "@/Components/v2/DesignElements"; + +type GradientBox = React.PropsWithChildren<{ palette?: PaletteKey }>; + +export const GradientBox: React.FC = ({ children, palette }) => { + const theme = useTheme(); + const isSmall = useMediaQuery(theme.breakpoints.down("md")); + const bg = palette + ? `linear-gradient(to bottom right, ${theme.palette[palette].main} 30%, ${theme.palette[palette].lowContrast} 70%)` + : `linear-gradient(340deg, ${theme.palette.tertiary.main} 10%, ${theme.palette.primary.main} 45%)`; + + return ( + + {children} + + ); +}; + +type StatBoxProps = React.PropsWithChildren<{ + title: string; + subtitle: string; + palette?: PaletteKey; +}>; + +export const StatBox: React.FC = ({ + title, + subtitle, + palette, + children, +}) => { + const theme = useTheme(); + const textColor = palette ? theme.palette[palette].contrastText : "inherit"; + + return ( + + + {title} + {subtitle} + {children} + + + ); +}; diff --git a/client/src/Components/v2/DesignElements/StatusBox.tsx b/client/src/Components/v2/DesignElements/StatusBox.tsx new file mode 100644 index 000000000..8cd5cfbc1 --- /dev/null +++ b/client/src/Components/v2/DesignElements/StatusBox.tsx @@ -0,0 +1,100 @@ +import Stack from "@mui/material/Stack"; +import Typography from "@mui/material/Typography"; +import Box from "@mui/material/Box"; +import { BaseBox } from "@/Components/v2/DesignElements"; +import Background from "@/assets/Images/background-grid.svg?react"; +import { useTranslation } from "react-i18next"; + +import { useTheme } from "@mui/material/styles"; + +type StatusBoxProps = React.PropsWithChildren<{}>; + +export const BGBox: React.FC = ({ children }) => { + const theme = useTheme(); + return ( + + + + + {children} + + ); +}; + +const StatusBox = ({ + label, + n, + color, +}: { + label: string; + n: number; + color: string | undefined; +}) => { + const theme = useTheme(); + return ( + + + + {label} + + + {n} + + + + ); +}; + +export const UpStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; + +export const DownStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; + +export const PausedStatusBox = ({ n }: { n: number }) => { + const theme = useTheme(); + const { t } = useTranslation(); + return ( + + ); +}; diff --git a/client/src/Components/v2/DesignElements/StatusLabel.tsx b/client/src/Components/v2/DesignElements/StatusLabel.tsx new file mode 100644 index 000000000..a314c09b0 --- /dev/null +++ b/client/src/Components/v2/DesignElements/StatusLabel.tsx @@ -0,0 +1,41 @@ +import Box from "@mui/material/Box"; +import { BaseBox } from "@/Components/v2/DesignElements"; +import type { MonitorStatus } from "@/Types/Monitor"; + +import { getStatusPalette } from "@/Utils/MonitorUtils"; +import { useTheme } from "@mui/material/styles"; + +export const StatusLabel = ({ + status, + isActive, +}: { + status: MonitorStatus; + isActive?: boolean; +}) => { + const theme = useTheme(); + const palette = getStatusPalette(status); + const transformedText = status.charAt(0).toUpperCase() + status.slice(1).toLowerCase(); + + return ( + + + {isActive === false ? "Paused" : transformedText} + + ); +}; diff --git a/client/src/Components/v2/DesignElements/Table.tsx b/client/src/Components/v2/DesignElements/Table.tsx new file mode 100644 index 000000000..bf75fd9bf --- /dev/null +++ b/client/src/Components/v2/DesignElements/Table.tsx @@ -0,0 +1,215 @@ +import Paper from "@mui/material/Paper"; +import Table from "@mui/material/Table"; +import TableBody from "@mui/material/TableBody"; +import TableCell from "@mui/material/TableCell"; +import TableContainer from "@mui/material/TableContainer"; +import TableHead from "@mui/material/TableHead"; +import TableRow from "@mui/material/TableRow"; + +import IconButton from "@mui/material/IconButton"; +import LastPageIcon from "@mui/icons-material/LastPage"; +import FirstPageIcon from "@mui/icons-material/FirstPage"; +import KeyboardArrowLeft from "@mui/icons-material/KeyboardArrowLeft"; +import KeyboardArrowRight from "@mui/icons-material/KeyboardArrowRight"; + +import Box from "@mui/material/Box"; +import TablePagination from "@mui/material/TablePagination"; +import type { TablePaginationProps } from "@mui/material/TablePagination"; + +import { useTheme } from "@mui/material/styles"; +import { useMediaQuery } from "@mui/material"; +export type Header = { + id: number | string; + content: React.ReactNode; + onClick?: (event: React.MouseEvent, row: T) => void; + render: (row: T) => React.ReactNode; +}; + +type DataTableProps = { + headers: Header[]; + data: T[]; + onRowClick?: (row: T) => void; +}; + +export function DataTable< + T extends { + id?: string | number; + _id?: string | number; + onRowClick?: (row: T) => void; + }, +>({ headers, data, onRowClick }: DataTableProps) { + const theme = useTheme(); + if (data.length === 0 || headers.length === 0) return
No data
; + return ( + + + + + {headers.map((header, idx) => { + return ( + + {header.content} + + ); + })} + + + + {data.map((row) => { + const key = row.id || row._id || Math.random(); + + return ( + (onRowClick ? onRowClick(row) : null)} + > + {headers.map((header, index) => { + return ( + header.onClick!(e, row) : undefined + } + > + {header.render(row)} + + ); + })} + + ); + })} + +
+
+ ); +} + +interface TablePaginationActionsProps { + count: number; + page: number; + rowsPerPage: number; + onPageChange: (event: React.MouseEvent, newPage: number) => void; +} + +function TablePaginationActions(props: TablePaginationActionsProps) { + const theme = useTheme(); + const { count, page, rowsPerPage, onPageChange } = props; + + const handleFirstPageButtonClick = (event: React.MouseEvent) => { + onPageChange(event, 0); + }; + + const handleBackButtonClick = (event: React.MouseEvent) => { + onPageChange(event, page - 1); + }; + + const handleNextButtonClick = (event: React.MouseEvent) => { + onPageChange(event, page + 1); + }; + + const handleLastPageButtonClick = (event: React.MouseEvent) => { + onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); + }; + + return ( + + + {theme.direction === "rtl" ? : } + + + {theme.direction === "rtl" ? : } + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="next page" + > + {theme.direction === "rtl" ? : } + + = Math.ceil(count / rowsPerPage) - 1} + aria-label="last page" + > + {theme.direction === "rtl" ? : } + + + ); +} + +export const Pagination: React.FC = ({ ...props }) => { + const isSmall = useMediaQuery((theme: any) => theme.breakpoints.down("sm")); + const theme = useTheme(); + return ( + + ); +}; diff --git a/client/src/Components/v2/DesignElements/index.tsx b/client/src/Components/v2/DesignElements/index.tsx new file mode 100644 index 000000000..3574daffb --- /dev/null +++ b/client/src/Components/v2/DesignElements/index.tsx @@ -0,0 +1,9 @@ +export { SplitBox as HorizontalSplitBox, ConfigBox } from "./SplitBox"; +export { BasePage, BasePageWithStates } from "./BasePage"; +export { BGBox, UpStatusBox, DownStatusBox, PausedStatusBox } from "./StatusBox"; +export { DataTable as Table, Pagination } from "./Table"; +export { GradientBox, StatBox } from "./StatBox"; +export { BaseBox } from "./BaseBox"; +export { StatusLabel } from "./StatusLabel"; +export { BaseFallback, ErrorFallback, EmptyFallback } from "./Fallback"; +export { BulletPointCheck } from "./BulletPointCheck"; diff --git a/client/src/Components/v2/Inputs/AutoComplete.tsx b/client/src/Components/v2/Inputs/AutoComplete.tsx new file mode 100644 index 000000000..73afa365a --- /dev/null +++ b/client/src/Components/v2/Inputs/AutoComplete.tsx @@ -0,0 +1,48 @@ +import Autocomplete from "@mui/material/Autocomplete"; +import type { AutocompleteProps } from "@mui/material/Autocomplete"; +import { TextInput } from "@/Components/v2/Inputs/TextInput"; +import { CheckboxInput } from "@/Components/v2/Inputs/Checkbox"; +import ListItem from "@mui/material/ListItem"; +import { useTheme } from "@mui/material/styles"; + +type AutoCompleteInputProps = Omit< + AutocompleteProps, + "renderInput" +> & { + renderInput?: AutocompleteProps["renderInput"]; +}; + +export const AutoCompleteInput: React.FC = ({ ...props }) => { + const theme = useTheme(); + return ( + ( + + )} + getOptionKey={(option) => option._id} + renderTags={() => null} + renderOption={(props, option, { selected }) => { + const { key, ...optionProps } = props; + return ( + + + {option.name} + + ); + }} + sx={{ + "&.MuiAutocomplete-root .MuiAutocomplete-input": { + padding: `0 ${theme.spacing(5)}`, + }, + }} + /> + ); +}; diff --git a/client/src/Components/v2/Inputs/Button.tsx b/client/src/Components/v2/Inputs/Button.tsx new file mode 100644 index 000000000..2f28e8eda --- /dev/null +++ b/client/src/Components/v2/Inputs/Button.tsx @@ -0,0 +1,11 @@ +import Button from "@mui/material/Button"; +import type { ButtonProps } from "@mui/material/Button"; + +export const ButtonInput: React.FC = ({ sx, ...props }) => { + return ( +