@stacksjs/defaults 0.70.206 → 0.70.208

package/views/dashboard/cloud/index.stx

@@ -0,0 +1,452 @@
+
+@title('Dashboard - Cloud')
+<div class="py-4 lg:py-8 min-h-screen dark:bg-neutral-800">
+  <div class="px-4 sm:px-6 lg:px-8">
+    <PageHeader title="Cloud Infrastructure" description="Design and manage your cloud infrastructure." />
+
+    <dl class="grid gap-5 grid-cols-2 sm:grid-cols-4 mt-8">
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Provider</dt>
+        <dd class="mt-1 font-semibold text-2xl text-gray-900 uppercase dark:text-white">{{ cloudConfig.type }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Servers</dt>
+        <dd class="mt-1 font-semibold text-2xl text-gray-900 dark:text-white">{{ serversWithDetails.length }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Server Types</dt>
+        <dd class="mt-1 font-semibold text-2xl text-gray-900 dark:text-white">{{ serversByType.length }}</dd>
+      </div>
+      <div class="overflow-hidden px-4 py-5 sm:p-6 bg-white dark:bg-neutral-700 rounded-lg shadow">
+        <dt class="font-medium text-gray-500 text-sm dark:text-neutral-400">Load Balancer</dt>
+        <dd class="mt-1 font-semibold text-2xl text-gray-900 dark:text-white">{{ cloudConfig.useLoadBalancer ? 'Enabled' : 'Disabled' }}</dd>
+      </div>
+    </dl>
+
+    <div class="mt-8 bg-white dark:bg-neutral-700 rounded-lg shadow">
+      <div class="p-6">
+        <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Topology breakdown</h4>
+        <div class="grid gap-3 grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 mt-4">
+          <template :for="group in serversByType">
+            <div class="flex items-center justify-between p-3 bg-gray-50 dark:bg-neutral-800 rounded-lg">
+              <span :class="typeBadgeClass(group.type)">{{ group.label }}</span>
+              <span class="font-mono text-gray-900 text-sm dark:text-white">×{{ group.count }}</span>
+            </div>
+          </template>
+        </div>
+
+        <div class="flex items-center justify-between mb-3 mt-6">
+          <h5 class="font-medium text-gray-900 text-sm dark:text-neutral-100">Diagram</h5>
+          <p class="text-gray-500 text-xs dark:text-neutral-400">Drag nodes · scroll to zoom</p>
+        </div>
+        <div id="cloud_topology" class="h-[420px] w-full bg-neutral-50 dark:bg-neutral-800 rounded-lg"></div>
+      </div>
+    </div>
+
+    <div class="mt-8">
+      <div class="flex items-center justify-between mb-6">
+        <div>
+          <h4 class="font-medium text-base text-gray-900 dark:text-neutral-100">Servers</h4>
+          <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">Configured application servers and their specifications.</p>
+        </div>
+        <div class="flex gap-4 items-center">
+          <StxLink to="/servers" class="inline-flex gap-1 items-center text-blue-600 text-sm dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300">
+            View All
+            <div class="h-4 w-4 i-hugeicons-arrow-right-01"></div>
+          </StxLink>
+        </div>
+      </div>
+
+      <div class="space-y-4">
+        <template :for="server in serversWithDetails">
+          <div @click="selectServer(server.key)" class="p-6 bg-white dark:bg-neutral-700 border border-transparent rounded-lg dark:border-neutral-600 hover:border-blue-300 dark:hover:border-blue-500 shadow cursor-pointer">
+            <div class="flex flex-wrap gap-4 items-start justify-between">
+              <div class="flex-1 min-w-0">
+                <div class="flex flex-wrap gap-3 items-center">
+                  <h5 class="font-medium text-gray-900 text-lg dark:text-neutral-100">{{ server.name }}</h5>
+                  <span :class="typeBadgeClass(server.type)">{{ server.label }}</span>
+                </div>
+                <div class="flex gap-2 items-center mt-1 text-gray-500 text-sm dark:text-neutral-400">
+                  <div class="h-4 w-4 i-hugeicons-link"></div>
+                  <p>{{ server.domain }}</p>
+                </div>
+                <p class="mt-2 text-gray-500 text-sm dark:text-neutral-400">{{ server.description }}</p>
+                <div class="flex flex-wrap gap-2 mt-3">
+                  <template :for="badge in server.badges">
+                    <span class="inline-flex items-center px-2 py-1 font-medium text-blue-700 text-xs dark:text-blue-300 bg-blue-100 dark:bg-blue-900 rounded-md">{{ badge }}</span>
+                  </template>
+                </div>
+              </div>
+
+              <div class="flex flex-col gap-1 items-end text-right">
+                <span class="text-gray-500 text-xs dark:text-neutral-400">{{ server.region }}</span>
+                <span class="font-mono text-gray-900 text-sm dark:text-white">{{ server.size }}</span>
+                <span class="text-gray-500 text-xs dark:text-neutral-400">{{ server.ramGb }}GB RAM · {{ server.specs.vcpu }} vCPU · {{ server.arch }}</span>
+              </div>
+            </div>
+          </div>
+        </template>
+      </div>
+    </div>
+
+    <div :show="selectedServer() !== null" @click.self="closeServer()" class="flex fixed inset-0 z-50 items-center justify-center p-4 bg-black bg-opacity-50">
+      <div class="overflow-y-auto p-6 max-h-[90vh] max-w-2xl w-full bg-white dark:bg-neutral-800 rounded-lg shadow-xl">
+        <div class="flex items-start justify-between">
+          <div>
+            <h3 class="font-semibold text-gray-900 text-lg dark:text-white">{{ selectedServer()?.name }}</h3>
+            <p class="mt-1 text-gray-500 text-sm dark:text-neutral-400">{{ selectedServer()?.domain }}</p>
+          </div>
+          <button @click="closeServer()" class="text-gray-400 dark:text-neutral-300 hover:text-gray-600 dark:hover:text-white">
+            <i class="h-5 w-5 i-hugeicons-cancel-01"></i>
+          </button>
+        </div>
+
+        <dl class="grid gap-3 grid-cols-1 sm:grid-cols-2 mt-6">
+          <template :for="entry in selectedDetails">
+            <div class="flex gap-4 justify-between py-2 border-gray-100 border-t dark:border-neutral-700">
+              <dt class="text-gray-500 text-sm dark:text-neutral-400">{{ entry.label }}</dt>
+              <dd class="font-medium text-gray-900 text-right text-sm dark:text-white">{{ entry.value }}</dd>
+            </div>
+          </template>
+        </dl>
+      </div>
+    </div>
+
+    <div class="mt-12">
+      <div class="flex items-center justify-between mb-4">
+        <div>
+          <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Recent Events</h3>
+          <p class="mt-2 text-gray-700 text-sm dark:text-neutral-400">Latest server events and notifications.</p>
+        </div>
+      </div>
+
+      <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+        <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+          <thead class="bg-gray-50 dark:bg-neutral-600">
+            <tr>
+              <th scope="col" class="pl-4 pr-3 py-3.5 sm:pl-6 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Type</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Service</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-left text-sm dark:text-neutral-100">Message</th>
+              <th scope="col" class="px-3 py-3.5 font-semibold text-gray-900 text-right text-sm dark:text-neutral-100">Timestamp</th>
+            </tr>
+          </thead>
+          <tbody class="bg-white dark:bg-neutral-700 divide-gray-200 divide-y dark:divide-neutral-700">
+            <template :for="event in recentEvents">
+              <tr class="hover:bg-gray-50 dark:hover:bg-neutral-600">
+                <td class="pl-4 pr-3 py-4 sm:pl-6 text-sm whitespace-nowrap">
+                  <div :class="eventIcon(event.type) + ' ' + eventColor(event.type)" class="h-5 w-5"></div>
+                </td>
+                <td class="px-3 py-4 text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ event.service }}</td>
+                <td class="px-3 py-4 text-gray-500 text-sm dark:text-neutral-400">{{ event.message }}</td>
+                <td class="px-3 py-4 text-gray-500 text-right text-sm whitespace-nowrap dark:text-neutral-400">{{ event.timestamp }}</td>
+              </tr>
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+// Topology demo data + view helpers — moved out of the former
+// `<script server>` block (stacksjs/stacks#1838).
+const cloudConfig = {
+  type: 'aws',
+  useLoadBalancer: true,
+}
+
+const workerSizes: Record<string, { vcpu: number, ram: number }> = {
+  't2.micro': { vcpu: 1, ram: 1024 },
+  't2.small': { vcpu: 1, ram: 2048 },
+  't2.medium': { vcpu: 2, ram: 4096 },
+  't2.large': { vcpu: 2, ram: 8192 },
+  't3.micro': { vcpu: 2, ram: 1024 },
+  't3.small': { vcpu: 2, ram: 2048 },
+  't3.medium': { vcpu: 2, ram: 4096 },
+  't3.large': { vcpu: 2, ram: 8192 },
+  'm5.large': { vcpu: 2, ram: 8192 },
+  'm5.xlarge': { vcpu: 4, ram: 16384 },
+  'c5.large': { vcpu: 2, ram: 4096 },
+  't4g.micro': { vcpu: 2, ram: 1024 },
+  't4g.medium': { vcpu: 2, ram: 4096 },
+}
+
+const serverTypeMeta: Record<string, { label: string, badges: string[], description: string }> = {
+  app: { label: 'Application Server', badges: ['Bun', 'Database', 'Nginx', 'Redis', 'Memcached', 'Search Engine'], description: 'These servers are meant to be networked to dedicated cache or database servers.' },
+  web: { label: 'Web Server', badges: ['Bun', 'Nginx'], description: 'A secure Nginx web server.' },
+  worker: { label: 'Worker Server', badges: ['Bun'], description: 'A dedicated worker server for processing queued jobs.' },
+  cache: { label: 'Cache Server', badges: ['Redis', 'Memcached'], description: 'A dedicated cache server for improved performance.' },
+  database: { label: 'Database Server', badges: ['Database'], description: 'A dedicated database server for your services.' },
+  search: { label: 'Search Server', badges: ['Search Engine', 'Nginx'], description: 'A dedicated search server for your services.' },
+  loadbalancer: { label: 'Load Balancer', badges: ['Nginx'], description: 'A load balancer to distribute traffic between two or more servers.' },
+}
+
+const serversRaw = [
+  { key: 'app', name: 'app-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'app', size: 't3.micro', diskSize: 20, privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', serverOS: 'ubuntu-20-lts-x86_64', bunVersion: '1.1.26', database: 'sqlite', databaseName: 'stacks' },
+  { key: 'worker', name: 'worker-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'worker', size: 't3.small', diskSize: 20, privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.3', database: '', databaseName: '' },
+  { key: 'database', name: 'db-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'database', size: 't3.medium', diskSize: 50, privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', serverOS: 'ubuntu-24-lts-x86_64', bunVersion: '', database: 'postgresql', databaseName: 'stacks_prod' },
+]
+
+const serversWithDetails = serversRaw.map((server) => {
+  const specs = workerSizes[server.size] ?? { vcpu: 0, ram: 0 }
+  const meta = serverTypeMeta[server.type] ?? { label: server.type, badges: [], description: '' }
+  return {
+    ...server,
+    specs,
+    ramGb: (specs.ram / 1024).toFixed(0),
+    arch: server.size.includes('g.') ? 'ARM' : 'x86',
+    label: meta.label,
+    badges: meta.badges,
+    description: meta.description,
+  }
+})
+
+const serversByType = ['loadbalancer', 'app', 'web', 'worker', 'cache', 'database', 'search'].map(type => ({
+  type,
+  label: serverTypeMeta[type]?.label ?? type,
+  count: serversWithDetails.filter(s => s.type === type).length,
+})).filter(group => group.count > 0)
+
+const recentEvents = [
+  { id: '1', service: 'App Server', type: 'success', message: 'Server deployment completed successfully', timestamp: '2024-03-21 14:23:45' },
+  { id: '2', service: 'Worker', type: 'info', message: 'New worker instance launched', timestamp: '2024-03-21 14:20:12' },
+  { id: '3', service: 'Database', type: 'warning', message: 'High CPU utilization detected', timestamp: '2024-03-21 14:15:30' },
+]
+
+function eventIcon(type: string): string {
+  switch (type) {
+    case 'success': return 'i-hugeicons-checkmark-circle-02'
+    case 'error': return 'i-hugeicons-cancel-circle'
+    case 'warning': return 'i-hugeicons-alert-02'
+    default: return 'i-hugeicons-information-circle'
+  }
+}
+
+function eventColor(type: string): string {
+  switch (type) {
+    case 'success': return 'text-green-500'
+    case 'error': return 'text-red-500'
+    case 'warning': return 'text-yellow-500'
+    default: return 'text-blue-500'
+  }
+}
+
+function typeBadgeClass(type: string): string {
+  const base = 'inline-flex px-2 py-0.5 font-semibold leading-5 text-xs rounded-full'
+  switch (type) {
+    case 'app': return `${base} bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200`
+    case 'worker': return `${base} bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200`
+    case 'cache': return `${base} bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-200`
+    case 'database': return `${base} bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200`
+    case 'search': return `${base} bg-indigo-100 text-indigo-800 dark:bg-indigo-900 dark:text-indigo-200`
+    case 'web': return `${base} bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200`
+    case 'loadbalancer': return `${base} bg-pink-100 text-pink-800 dark:bg-pink-900 dark:text-pink-200`
+    default: return `${base} bg-gray-100 text-gray-800 dark:bg-neutral-700 dark:text-neutral-200`
+  }
+}
+
+interface ServerSummary {
+  key: string
+  name: string
+  domain: string
+  region: string
+  type: string
+  label: string
+  size: string
+  diskSize: number
+  serverOS: string
+  bunVersion: string
+  database: string
+  databaseName: string
+  privateNetwork?: string
+  subnet?: string
+  ramGb: string
+  vcpu: number
+  arch: string
+}
+
+const serversData: ServerSummary[] = [
+  { key: 'app', name: 'app-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'app', label: 'Application Server', size: 't3.micro', diskSize: 20, serverOS: 'ubuntu-20-lts-x86_64', bunVersion: '1.1.26', database: 'sqlite', databaseName: 'stacks', privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', ramGb: '1', vcpu: 2, arch: 'x86' },
+  { key: 'worker', name: 'worker-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'worker', label: 'Worker Server', size: 't3.small', diskSize: 20, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: 'v1.2.3', database: '', databaseName: '', privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', ramGb: '2', vcpu: 2, arch: 'x86' },
+  { key: 'database', name: 'db-server-1', domain: 'stacksjs.com', region: 'us-east-1', type: 'database', label: 'Database Server', size: 't3.medium', diskSize: 50, serverOS: 'ubuntu-24-lts-x86_64', bunVersion: '', database: 'postgresql', databaseName: 'stacks_prod', privateNetwork: 'vpc-123456789', subnet: 'subnet-123456789', ramGb: '4', vcpu: 2, arch: 'x86' },
+]
+
+const selectedServerKey = state<string | null>(null)
+
+const selectedServer = derived(() => serversData.find(s => s.key === selectedServerKey()) ?? null)
+
+const selectedDetails = derived(() => {
+  const server = selectedServer()
+  if (!server)
+    return []
+  const entries: Array<{ label: string, value: string }> = [
+    { label: 'Type', value: server.label },
+    { label: 'Domain', value: server.domain },
+    { label: 'Region', value: server.region },
+    { label: 'Size', value: server.size },
+    { label: 'CPU / RAM', value: `${server.vcpu} vCPU · ${server.ramGb}GB` },
+    { label: 'Architecture', value: server.arch },
+    { label: 'Disk size', value: `${server.diskSize}GB` },
+    { label: 'OS', value: server.serverOS },
+  ]
+  if (server.bunVersion)
+    entries.push({ label: 'Bun version', value: server.bunVersion })
+  if (server.database)
+    entries.push({ label: 'Database', value: `${server.database}${server.databaseName ? ` (${server.databaseName})` : ''}` })
+  if (server.privateNetwork)
+    entries.push({ label: 'Network', value: server.privateNetwork })
+  if (server.subnet)
+    entries.push({ label: 'Subnet', value: server.subnet })
+  return entries
+})
+
+function selectServer(key: string) {
+  selectedServerKey.set(key)
+}
+
+function closeServer() {
+  selectedServerKey.set(null)
+}
+
+function topoFill(type: string): { ring: string, fill: string } {
+  switch (type) {
+    case 'dns': return { ring: '#EC4899', fill: '#FCE7F3' }
+    case 'lb': return { ring: '#3B82F6', fill: '#DBEAFE' }
+    case 'app': return { ring: '#10B981', fill: '#D1FAE5' }
+    case 'web': return { ring: '#EF4444', fill: '#FEE2E2' }
+    case 'worker': return { ring: '#F59E0B', fill: '#FEF3C7' }
+    case 'cache': return { ring: '#A855F7', fill: '#F3E8FF' }
+    case 'database': return { ring: '#22C55E', fill: '#DCFCE7' }
+    case 'search': return { ring: '#6366F1', fill: '#E0E7FF' }
+    default: return { ring: '#6B7280', fill: '#F3F4F6' }
+  }
+}
+
+let topologyCleanup: (() => void) | null = null
+
+interface TopoNode { id: string, type: string, label: string, key?: string, x?: number, y?: number, fx?: number | null, fy?: number | null }
+interface TopoLink { source: string | TopoNode, target: string | TopoNode }
+
+async function renderTopology() {
+  const container = document.getElementById('cloud_topology')
+  if (!container)
+    return
+  topologyCleanup?.()
+  container.innerHTML = ''
+
+  const d3 = await import('d3')
+  const width = container.clientWidth || 800
+  const height = container.clientHeight || 420
+
+  const useLb = true
+  const nodes: TopoNode[] = [
+    { id: 'dns', type: 'dns', label: 'DNS' },
+    ...(useLb ? [{ id: 'lb', type: 'lb', label: 'Load balancer' } as TopoNode] : []),
+    ...serversData.map(s => ({ id: s.key, type: s.type, label: s.name, key: s.key })),
+  ]
+  const links: TopoLink[] = []
+  if (useLb) {
+    links.push({ source: 'dns', target: 'lb' })
+    for (const s of serversData) links.push({ source: 'lb', target: s.key })
+  }
+  else {
+    for (const s of serversData) links.push({ source: 'dns', target: s.key })
+  }
+
+  const svg = d3.select(container)
+    .append('svg')
+    .attr('width', width)
+    .attr('height', height)
+    .attr('viewBox', [0, 0, width, height])
+    .attr('style', 'max-width: 100%; height: auto;')
+
+  const zoomGroup = svg.append('g')
+  const zoom = d3.zoom<SVGSVGElement, unknown>()
+    .scaleExtent([0.3, 3])
+    .on('zoom', event => zoomGroup.attr('transform', event.transform.toString()))
+  svg.call(zoom as any)
+
+  const link = zoomGroup.append('g')
+    .attr('stroke', '#94A3B8')
+    .attr('stroke-opacity', 0.5)
+    .attr('stroke-dasharray', '4,4')
+    .selectAll('line')
+    .data(links)
+    .join('line')
+    .attr('stroke-width', 2)
+
+  const node = zoomGroup.append('g')
+    .selectAll<SVGGElement, TopoNode>('g')
+    .data(nodes)
+    .join('g')
+    .attr('cursor', d => d.key ? 'pointer' : 'default')
+    .on('click', (_event, d) => {
+      if (d.key)
+        selectServer(d.key)
+    })
+
+  node.append('circle')
+    .attr('r', 26)
+    .attr('fill', d => topoFill(d.type).fill)
+    .attr('stroke', d => topoFill(d.type).ring)
+    .attr('stroke-width', 3)
+
+  node.append('text')
+    .text(d => d.label.length > 14 ? `${d.label.slice(0, 12)}…` : d.label)
+    .attr('text-anchor', 'middle')
+    .attr('dy', 44)
+    .attr('fill', 'currentColor')
+    .attr('font-size', '11px')
+    .attr('font-weight', '500')
+    .attr('class', 'text-gray-700 dark:text-neutral-200')
+    .attr('pointer-events', 'none')
+
+  const drag = d3.drag<SVGGElement, TopoNode>()
+    .on('start', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0.3).restart()
+      d.fx = d.x
+      d.fy = d.y
+    })
+    .on('drag', (event, d) => { d.fx = event.x; d.fy = event.y })
+    .on('end', (event, d) => {
+      if (!event.active)
+        simulation.alphaTarget(0)
+      d.fx = null
+      d.fy = null
+    })
+  node.call(drag as any)
+
+  const simulation = d3.forceSimulation<TopoNode>(nodes)
+    .force('link', d3.forceLink<TopoNode, TopoLink>(links).id(d => d.id).distance(120).strength(1))
+    .force('charge', d3.forceManyBody().strength(-380))
+    .force('x', d3.forceX<TopoNode>(d => d.type === 'dns' ? width * 0.15 : d.type === 'lb' ? width * 0.4 : width * 0.75).strength(0.6))
+    .force('y', d3.forceY<TopoNode>(height / 2).strength(0.15))
+    .force('collide', d3.forceCollide<TopoNode>().radius(38))
+    .on('tick', () => {
+      link
+        .attr('x1', d => (d.source as TopoNode).x ?? 0)
+        .attr('y1', d => (d.source as TopoNode).y ?? 0)
+        .attr('x2', d => (d.target as TopoNode).x ?? 0)
+        .attr('y2', d => (d.target as TopoNode).y ?? 0)
+      node.attr('transform', d => `translate(${d.x ?? 0},${d.y ?? 0})`)
+    })
+
+  topologyCleanup = () => {
+    simulation.stop()
+    container.innerHTML = ''
+  }
+}
+
+onMount(() => {
+  void renderTopology()
+})
+
+onDestroy(() => {
+  topologyCleanup?.()
+  topologyCleanup = null
+})
+</script>
+
+@endsection