From e257a6ce90a0942bfb64b01789d436ee21169aa0 Mon Sep 17 00:00:00 2001 From: Matt Beaudoin Date: Tue, 3 Mar 2026 15:55:04 -0800 Subject: [PATCH 1/4] fix mock api ingestion --- .../Authenticated/Dashboard/Dashboard.tsx | 16 +- ...xample abra app ls.json => mock-apps.json} | 0 ... abra server ls.json => mock-servers.json} | 0 src/services/mockApi.ts | 152 +----------------- src/types/index.ts | 2 +- 5 files changed, 17 insertions(+), 153 deletions(-) rename src/services/{example abra app ls.json => mock-apps.json} (100%) rename src/services/{example abra server ls.json => mock-servers.json} (100%) diff --git a/src/routes/Authenticated/Dashboard/Dashboard.tsx b/src/routes/Authenticated/Dashboard/Dashboard.tsx index 96b3317..c9ede04 100644 --- a/src/routes/Authenticated/Dashboard/Dashboard.tsx +++ b/src/routes/Authenticated/Dashboard/Dashboard.tsx @@ -51,6 +51,10 @@ export const Dashboard: React.FC = () => { fetchData(); }, [isMockMode]); + // Calculate stats + const deployedAppsCount = apps.filter(a => a.status === 'deployed').length; + const serversWithAppsCount = new Set(apps.map(a => a.server)).size; + if (loading) { return (
@@ -85,7 +89,7 @@ export const Dashboard: React.FC = () => {

Apps

{apps.length}

- {apps.filter(a => a.status === 'deployed').length} deployed + {deployedAppsCount} deployed

@@ -95,7 +99,7 @@ export const Dashboard: React.FC = () => {

Servers

{servers.length}

- {servers.length} connected + {serversWithAppsCount} connected

@@ -105,7 +109,11 @@ export const Dashboard: React.FC = () => {

Recent Applications

{apps.slice(0, 5).map((app, index) => ( -
navigate(`/apps/${app.server}/${app.appName}`)}> +
navigate(`/apps/${app.server}/${app.appName}`)} + >

{app.appName}

{app.domain || 'No domain'}

@@ -121,4 +129,4 @@ export const Dashboard: React.FC = () => {
); -}; \ No newline at end of file +}; diff --git a/src/services/example abra app ls.json b/src/services/mock-apps.json similarity index 100% rename from src/services/example abra app ls.json rename to src/services/mock-apps.json diff --git a/src/services/example abra server ls.json b/src/services/mock-servers.json similarity index 100% rename from src/services/example abra server ls.json rename to src/services/mock-servers.json diff --git a/src/services/mockApi.ts b/src/services/mockApi.ts index 0d12c80..7e52479 100644 --- a/src/services/mockApi.ts +++ b/src/services/mockApi.ts @@ -1,150 +1,6 @@ - import type { AbraServer, ServerAppsResponse } from '../types'; - -// Mock data matching real API structure -export const mockAppsData: ServerAppsResponse = { - "mydomain.com": { - apps: [ - { - server: "mydomain.com", - recipe: "nextcloud", - appName: "nc.mydomain.com", - domain: "nc.mydomain.com", - status: "deployed", - chaos: "false", - chaosVersion: "unknown", - version: "12.0.1+31.0.6-fpm", - upgrade: "latest" - }, - { - server: "mydomain.com", - recipe: "traefik", - appName: "traefik.mydomain.com", - domain: "traefik.mydomain.com", - status: "deployed", - chaos: "false", - chaosVersion: "unknown", - version: "3.4.2+v3.4.5", - upgrade: "3.6.2+v3.4.5\n3.6.1+v3.4.5" - }, - { - server: "mydomain.com", - recipe: "authentik", - appName: "accounts.mydomain.com", - domain: "accounts.mydomain.com", - status: "deployed", - chaos: "false", - chaosVersion: "unknown", - version: "7.4.0+2025.6.3", - upgrade: "9.0.1+2025.8.1\n9.0.0+2025.8.1\n8.0.0+2025.8.1\n7.4.1+2025.6.4" - }, - { - server: "mydomain.com", - recipe: "backup-bot-two", - appName: "backup.mydomain.com", - domain: "", - status: "deployed", - chaos: "false", - chaosVersion: "2.3.0+2.3.0-beta", - version: "2.3.0+2.3.0-beta", - upgrade: "latest" - }, - { - server: "mydomain.com", - recipe: "collabora", - appName: "docs.mydomain.com", - domain: "docs.mydomain.com", - status: "deployed", - chaos: "false", - chaosVersion: "3.2.0+24.04.12.3.1", - version: "3.2.0+24.04.12.3.1", - upgrade: "4.0.0+25.04.4.1.1\n3.3.0+24.04.13.3.1" - }, - { - server: "myotherdomain.com", - recipe: "traefik", - appName: "traefik.myotherdomain.com", - domain: "traefik.myotherdomain.com", - status: "deployed", - chaos: "false", - chaosVersion: "unknown", - version: "3.4.2+v3.4.5", - upgrade: "3.6.2+v3.4.5\n3.6.1+v3.4.5\n3.6.0+v3.4.5\n3.5.0+v3.4.5" - } - ], - appCount: 3, - versionCount: 3, - unversionedCount: 0, - latestCount: 1, - upgradeCount: 2 - }, - "test.coop": { - apps: [ - { - server: "test.coop", - recipe: "cryptpad", - appName: "cryptpad.test.coop", - domain: "cryptpad.test.coop", - status: "deployed", - chaos: "true", - chaosVersion: "cb2a47fb", - version: "0.4.0+version-2024.3.0", - upgrade: "latest" - }, - { - server: "test.coop", - recipe: "mobilizon", - appName: "events.test.coop", - domain: "events.test.coop", - status: "deployed", - chaos: "true", - chaosVersion: "f8f874a5", - version: "0.2.1+5.1.2", - upgrade: "latest" - } - ], - appCount: 2, - versionCount: 2, - unversionedCount: 0, - latestCount: 2, - upgradeCount: 0 - } -}; - -export const mockServers: AbraServer[] = [ - { - name: 'test.coop', - host: 'test.coop', - }, - { - "host": "mydomain.com", - "name": "mydomain.com" - }, - { - "host": "coop.test.org", - "name": "coop.test.org" - }, - { - "host": "internal.website.com", - "name": "internal.website.com" - }, - { - "host": "internal.server.net", - "name": "internal.server.net" - }, - { - "host": "internal.intranet.site.com", - "name": "internal.intranet.site.com" - }, - { - "host": "internal.test.org", - "name": "internal.test.org" - }, - { - "host": "orgsite.org", - "name": "orgsite.org" - } -]; +import appsData from './mock-apps.json'; +import serversData from './mock-servers.json'; // Simulate API delay const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); @@ -152,12 +8,12 @@ const delay = (ms: number) => new Promise(resolve => setTimeout(resolve, ms)); export const mockApiService = { async getAppsGrouped(): Promise { await delay(500); - return mockAppsData; + return appsData as ServerAppsResponse; }, async getServers(): Promise { await delay(300); - return mockServers; + return serversData as AbraServer[]; }, async deployApp(appName: string): Promise { diff --git a/src/types/index.ts b/src/types/index.ts index 3b9a88b..a3ab2ac 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -24,7 +24,7 @@ export interface AbraApp { recipe: string; appName: string; domain: string; - status: string; + status: 'deployed' | 'stopped' | 'unknown'; chaos: string; chaosVersion: string; version: string; From 83873f03752a273f8d3032dd4291bca2190df5ed Mon Sep 17 00:00:00 2001 From: Matt Beaudoin Date: Tue, 3 Mar 2026 16:11:17 -0800 Subject: [PATCH 2/4] dashboard css fixes --- README.md | 3 +-- .../Authenticated/Dashboard/Dashboard.tsx | 4 +++- .../Authenticated/Dashboard/_Dashboard.scss | 18 ++++++++++++++---- 3 files changed, 18 insertions(+), 7 deletions(-) diff --git a/README.md b/README.md index f99cd06..1978622 100644 --- a/README.md +++ b/README.md @@ -4,5 +4,4 @@ This is the frontend of a web wrapper for Coop Clouds abra CLI, letting users se ## Still a work in progess! -## This is built with react, typescript, scss, and vite - +## This is built with react, typescript, scss, and vite \ No newline at end of file diff --git a/src/routes/Authenticated/Dashboard/Dashboard.tsx b/src/routes/Authenticated/Dashboard/Dashboard.tsx index c9ede04..a92a8db 100644 --- a/src/routes/Authenticated/Dashboard/Dashboard.tsx +++ b/src/routes/Authenticated/Dashboard/Dashboard.tsx @@ -81,7 +81,9 @@ export const Dashboard: React.FC = () => {
-

Dashboard

+
+

Dashboard

+