Implement bundled app management in RPC and UI

- Added new RPC methods for starting and stopping bundled apps, allowing management of pre-loaded container images. - Enhanced container listing logic to include a fallback to Podman for bundled apps. - Updated the UI to display bundled apps with their respective statuses, including start and stop functionality. - Introduced a new Pinia store structure to manage loading states and app statuses for bundled applications. - Refactored existing components to improve user experience and streamline app management.
2026-02-01 06:04:36 +00:00
parent 66c823e2fd
commit 00d1af12f0
8 changed files with 561 additions and 106 deletions
@@ -1,17 +1,17 @@
 <template>
  <div class="p-6">
    <div class="mb-8">
-      <h1 class="text-3xl font-bold text-white mb-2">Container Apps</h1>
-      <p class="text-white/70">Manage containerized applications running on your Archipelago node</p>
+      <h1 class="text-3xl font-bold text-white mb-2">My Apps</h1>
+      <p class="text-white/70">Manage your Archipelago applications</p>
    </div>

-    <!-- Loading State -->
-    <div v-if="store.loading" class="flex items-center justify-center py-12">
+    <!-- Loading State (initial load) -->
+    <div v-if="store.loading && !hasAnyApps" class="flex items-center justify-center py-12">
      <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-white/60"></div>
    </div>

    <!-- Error State -->
-    <div v-else-if="store.error" class="glass-card p-6 mb-6">
+    <div v-if="store.error" class="glass-card p-6 mb-6">
      <div class="flex items-center gap-3 text-red-400">
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
@@ -20,146 +20,295 @@
      </div>
    </div>

-    <!-- Container List -->
-    <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+    <!-- Apps Grid -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      <!-- Bundled Apps -->
      <div
-        v-for="container in store.containers"
-        :key="container.id"
-        class="glass-card p-6 hover:bg-white/5 transition-colors cursor-pointer"
-        @click="$router.push(`/dashboard/containers/${extractAppId(container.name)}`)"
+        v-for="app in BUNDLED_APPS"
+        :key="app.id"
+        class="glass-card p-6 hover:bg-white/5 transition-colors"
      >
        <div class="flex items-start justify-between mb-4">
-          <div class="flex-1">
-            <h3 class="text-lg font-semibold text-white mb-1">
-              {{ extractAppName(container.name) }}
-            </h3>
-            <p class="text-sm text-white/60">{{ container.image }}</p>
+          <div class="flex items-center gap-3">
+            <span class="text-3xl">{{ app.icon }}</span>
+            <div>
+              <h3 class="text-lg font-semibold text-white">{{ app.name }}</h3>
+              <p class="text-sm text-white/60">{{ app.description }}</p>
+            </div>
          </div>
-          <ContainerStatus 
-            :state="container.state as any"
-            :health="store.getHealthStatus(extractAppId(container.name)) as any"
-          />
        </div>

-        <div class="space-y-2 mb-4">
-          <div class="flex items-center justify-between text-sm">
-            <span class="text-white/60">Container ID</span>
-            <span class="text-white/80 font-mono text-xs">{{ container.id.substring(0, 12) }}</span>
-          </div>
-          <div class="flex items-center justify-between text-sm">
-            <span class="text-white/60">Created</span>
-            <span class="text-white/80 text-xs">{{ formatDate(container.created) }}</span>
+        <!-- Status Badge -->
+        <div class="mb-4">
+          <span 
+            :class="getStatusBadgeClass(app.id)"
+            class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium"
+          >
+            <!-- Loading spinner -->
+            <svg 
+              v-if="store.isAppLoading(app.id)" 
+              class="w-3 h-3 animate-spin" 
+              fill="none" 
+              viewBox="0 0 24 24"
+            >
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <!-- Status dot -->
+            <span 
+              v-else
+              :class="getStatusDotClass(app.id)"
+              class="w-2 h-2 rounded-full"
+            ></span>
+            {{ getStatusText(app.id) }}
+          </span>
+        </div>
+
+        <!-- Port info -->
+        <div class="text-sm text-white/50 mb-4">
+          <span v-if="store.getAppState(app.id) === 'running'">
+            Port{{ app.ports.length > 1 ? 's' : '' }}: 
+            {{ app.ports.map(p => p.host).join(', ') }}
+          </span>
+          <span v-else>
+            {{ app.image.split('/').pop() }}
+          </span>
+        </div>
+
+        <!-- Action Buttons -->
+        <div class="flex gap-2">
+          <!-- Not installed: Start button -->
+          <button
+            v-if="store.getAppState(app.id) === 'not-installed'"
+            @click="handleStartApp(app)"
+            :disabled="store.isAppLoading(app.id)"
+            class="flex-1 px-4 py-2 bg-green-600 hover:bg-green-500 disabled:bg-green-800 disabled:cursor-not-allowed rounded text-sm font-medium text-white transition-colors flex items-center justify-center gap-2"
+          >
+            <svg v-if="store.isAppLoading(app.id)" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span>{{ store.isAppLoading(app.id) ? 'Starting...' : 'Start' }}</span>
+          </button>
+
+          <!-- Stopped: Start button -->
+          <button
+            v-else-if="store.getAppState(app.id) === 'stopped' || store.getAppState(app.id) === 'exited'"
+            @click="handleStartApp(app)"
+            :disabled="store.isAppLoading(app.id)"
+            class="flex-1 px-4 py-2 bg-green-600 hover:bg-green-500 disabled:bg-green-800 disabled:cursor-not-allowed rounded text-sm font-medium text-white transition-colors flex items-center justify-center gap-2"
+          >
+            <svg v-if="store.isAppLoading(app.id)" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+              <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+              <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span>{{ store.isAppLoading(app.id) ? 'Starting...' : 'Start' }}</span>
+          </button>
+
+          <!-- Running: Stop and Launch buttons -->
+          <template v-else-if="store.getAppState(app.id) === 'running'">
+            <button
+              @click="handleStopApp(app.id)"
+              :disabled="store.isAppLoading(app.id)"
+              class="flex-1 px-4 py-2 glass-button rounded text-sm font-medium text-white/90 hover:text-white disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2"
+            >
+              <svg v-if="store.isAppLoading(app.id)" class="w-4 h-4 animate-spin" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+              </svg>
+              <span>{{ store.isAppLoading(app.id) ? 'Stopping...' : 'Stop' }}</span>
+            </button>
+            <a
+              :href="getLaunchUrl(app)"
+              target="_blank"
+              class="px-4 py-2 bg-blue-600 hover:bg-blue-500 rounded text-sm font-medium text-white transition-colors flex items-center gap-2"
+            >
+              <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
+              </svg>
+              Launch
+            </a>
+          </template>
+        </div>
+      </div>
+
+      <!-- Other containers (not bundled) -->
+      <div
+        v-for="container in otherContainers"
+        :key="container.id"
+        class="glass-card p-6 hover:bg-white/5 transition-colors"
+      >
+        <div class="flex items-start justify-between mb-4">
+          <div class="flex items-center gap-3">
+            <span class="text-3xl">📦</span>
+            <div>
+              <h3 class="text-lg font-semibold text-white">{{ extractAppName(container.name) }}</h3>
+              <p class="text-sm text-white/60">{{ container.image }}</p>
+            </div>
          </div>
        </div>

+        <div class="mb-4">
+          <ContainerStatus :state="container.state as any" />
+        </div>
+
        <div class="flex gap-2">
          <button
            v-if="container.state !== 'running'"
-            @click.stop="handleStart(extractAppId(container.name))"
+            @click="handleStartContainer(container.name)"
            class="flex-1 px-4 py-2 glass-button rounded text-sm font-medium text-white/90 hover:text-white transition-colors"
          >
            Start
          </button>
          <button
            v-else
-            @click.stop="handleStop(extractAppId(container.name))"
+            @click="handleStopContainer(container.name)"
            class="flex-1 px-4 py-2 glass-button rounded text-sm font-medium text-white/90 hover:text-white transition-colors"
          >
            Stop
          </button>
-          <button
-            @click.stop="handleRemove(extractAppId(container.name))"
-            class="px-4 py-2 glass-button rounded text-sm font-medium text-red-400/90 hover:text-red-400 transition-colors"
-          >
-            Remove
-          </button>
        </div>
      </div>
+    </div>

-      <!-- Empty State -->
-      <div v-if="store.containers.length === 0" class="col-span-full glass-card p-12 text-center">
-        <svg class="w-16 h-16 mx-auto mb-4 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
-        </svg>
-        <h3 class="text-xl font-semibold text-white mb-2">No containers found</h3>
-        <p class="text-white/60 mb-6">Install your first container app to get started</p>
-        <button
-          @click="$router.push('/dashboard/marketplace')"
-          class="px-6 py-3 glass-button rounded-lg font-medium text-white/90 hover:text-white transition-colors"
-        >
-          Browse Marketplace
-        </button>
-      </div>
+    <!-- Empty state (when no bundled apps - shouldn't happen) -->
+    <div v-if="!hasAnyApps && !store.loading" class="glass-card p-12 text-center">
+      <svg class="w-16 h-16 mx-auto mb-4 text-white/40" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4" />
+      </svg>
+      <h3 class="text-xl font-semibold text-white mb-2">No apps available</h3>
+      <p class="text-white/60">Check your Archipelago installation</p>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { onMounted } from 'vue'
-import { useContainerStore } from '@/stores/container'
+import { onMounted, computed } from 'vue'
+import { useContainerStore, BUNDLED_APPS, type BundledApp } from '@/stores/container'
 import ContainerStatus from '@/components/ContainerStatus.vue'

 const store = useContainerStore()

+// Get current host for launch URLs
+const currentHost = computed(() => window.location.hostname)
+
 onMounted(async () => {
  await store.fetchContainers()
  await store.fetchHealthStatus()
  
-  // Refresh every 30 seconds
+  // Refresh every 10 seconds
  setInterval(async () => {
    await store.fetchContainers()
    await store.fetchHealthStatus()
-  }, 30000)
+  }, 10000)
 })

-function extractAppId(containerName: string): string {
-  // Extract app ID from container name like "archipelago-bitcoin-core"
-  return containerName.replace('archipelago-', '')
-}
+// Containers that aren't bundled apps
+const otherContainers = computed(() => {
+  const bundledIds = BUNDLED_APPS.map(a => a.id)
+  return store.containers.filter(c => {
+    const name = c.name.toLowerCase()
+    return !bundledIds.some(id => name.includes(id))
+  })
+})
+
+const hasAnyApps = computed(() => BUNDLED_APPS.length > 0 || store.containers.length > 0)

 function extractAppName(containerName: string): string {
-  const appId = extractAppId(containerName)
-  // Convert kebab-case to Title Case
-  return appId
+  return containerName
+    .replace('archipelago-', '')
+    .replace('-dev', '')
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
 }

-function formatDate(dateString: string): string {
-  try {
-    const date = new Date(dateString)
-    return date.toLocaleDateString()
-  } catch {
-    return dateString
+function getStatusBadgeClass(appId: string): string {
+  if (store.isAppLoading(appId)) {
+    return 'bg-yellow-500/20 text-yellow-400'
+  }
+  const state = store.getAppState(appId)
+  switch (state) {
+    case 'running':
+      return 'bg-green-500/20 text-green-400'
+    case 'stopped':
+    case 'exited':
+      return 'bg-gray-500/20 text-gray-400'
+    case 'not-installed':
+    default:
+      return 'bg-blue-500/20 text-blue-400'
  }
 }

-async function handleStart(appId: string) {
+function getStatusDotClass(appId: string): string {
+  const state = store.getAppState(appId)
+  switch (state) {
+    case 'running':
+      return 'bg-green-400'
+    case 'stopped':
+    case 'exited':
+      return 'bg-gray-400'
+    case 'not-installed':
+    default:
+      return 'bg-blue-400'
+  }
+}
+
+function getStatusText(appId: string): string {
+  if (store.isAppLoading(appId)) {
+    return 'Loading...'
+  }
+  const state = store.getAppState(appId)
+  switch (state) {
+    case 'running':
+      return 'Running'
+    case 'stopped':
+    case 'exited':
+      return 'Stopped'
+    case 'not-installed':
+      return 'Ready to Start'
+    default:
+      return state
+  }
+}
+
+function getLaunchUrl(app: BundledApp): string {
+  const port = app.ports[0]?.host
+  if (!port) return '#'
+  return `http://${currentHost.value}:${port}`
+}
+
+async function handleStartApp(app: BundledApp) {
  try {
+    await store.startBundledApp(app)
+  } catch (e) {
+    console.error('Failed to start app:', e)
+  }
+}
+
+async function handleStopApp(appId: string) {
+  try {
+    await store.stopBundledApp(appId)
+  } catch (e) {
+    console.error('Failed to stop app:', e)
+  }
+}
+
+async function handleStartContainer(name: string) {
+  try {
+    const appId = name.replace('archipelago-', '').replace('-dev', '')
    await store.startContainer(appId)
  } catch (e) {
    console.error('Failed to start container:', e)
  }
 }

-async function handleStop(appId: string) {
+async function handleStopContainer(name: string) {
  try {
+    const appId = name.replace('archipelago-', '').replace('-dev', '')
    await store.stopContainer(appId)
  } catch (e) {
    console.error('Failed to stop container:', e)
  }
 }
-
-async function handleRemove(appId: string) {
-  if (!confirm(`Are you sure you want to remove ${appId}? This will delete the container.`)) {
-    return
-  }
-  
-  try {
-    await store.removeContainer(appId)
-  } catch (e) {
-    console.error('Failed to remove container:', e)
-  }
-}
 </script>
@@ -154,8 +154,8 @@ const isSetupMode = computed(() => {
 onMounted(async () => {
  if (isSetupMode.value) {
    try {
-      const result = await rpcClient.call({ method: 'auth.isSetup', params: {} })
-      isSetup.value = result?.result || false
+      const result = await rpcClient.call<boolean>({ method: 'auth.isSetup', params: {} })
+      isSetup.value = Boolean(result)
    } catch (err) {
      console.error('Failed to check setup status:', err)
      // Assume not set up if check fails