@stacksjs/ts-cloud 0.7.62 → 0.7.64

package/dist/ui-src/pages/server/sites.stx

@@ -19,6 +19,7 @@ function tone(s) { return s === 'live' ? 'ok' : (s === 'failed' ? 'bad' : 'warn'
 </script>
 <script client>
 import { useOpConfirm } from '../../functions/useOpConfirm.ts'
+import { usePolling } from '../../functions/usePolling.ts'
 
 // Reactive site management - add, per-site deploy/edit/remove - via signals +
 // directives. Mutation responses replace the site signal without reloading, so
@@ -28,6 +29,60 @@ const addDeploy = state('server'); const addPort = state(''); const addBuild = s
 const addMsg = state(''); const addMsgKind = state('')
 const addBusy = state(false)
 const siteRows = state(initialSites)
+const monitorSeries = state([])
+const monitoredAt = state('')
+function monitorParams() {
+  const to = new Date(), from = new Date(to.getTime() - 24 * 60 * 60 * 1000)
+  return new URLSearchParams({
+    from: from.toISOString(),
+    to: to.toISOString(),
+    timezone: Intl.DateTimeFormat().resolvedOptions().timeZone || 'UTC',
+    names: 'site.health.up,site.response.time,site.http.status,site.tls.days_remaining',
+    aggregation: 'avg',
+    bucketMs: String(15 * 60 * 1000),
+  })
+}
+const { pollingState, pollingError, lastUpdatedAt, refresh } = usePolling(async () => {
+  const [dashboardResponse, telemetryResponse] = await Promise.all([
+    fetch('/api/dashboard-data'),
+    fetch('/api/telemetry/series?' + monitorParams()),
+  ])
+  const dashboard = await dashboardResponse.json()
+  const telemetry = await telemetryResponse.json()
+  if (!dashboardResponse.ok) throw new Error(dashboard.error || 'Site health refresh failed.')
+  if (!telemetryResponse.ok || telemetry.ok === false) throw new Error(telemetry.error || 'Site history refresh failed.')
+  if (Array.isArray(dashboard.sitesDetail)) siteRows.set(dashboard.sitesDetail)
+  monitorSeries.set(telemetry.series || [])
+  monitoredAt.set(dashboard.siteHealth?.[0]?.checkedAt || '')
+}, 30000)
+function monitorSource(site) {
+  const project = site.project || 'stacks'
+  const name = String(site.name || '').startsWith(project + ':') ? String(site.name).slice(project.length + 1) : site.name
+  return `site:${project}:${name}`
+}
+function metricSeries(site, name) { return monitorSeries().find(item => item.source === monitorSource(site) && item.name === name) }
+function metricPoints(site, name) { return (metricSeries(site, name)?.points || []).filter(point => !point.gap && point.value != null) }
+function latestMetric(site, name) { const values = metricPoints(site, name); return values.length ? Number(values.at(-1).value) : null }
+function uptime(site) {
+  const values = metricPoints(site, 'site.health.up')
+  return values.length ? values.reduce((sum, point) => sum + Number(point.value || 0), 0) / values.length * 100 : null
+}
+function historyPath(site) {
+  const values = metricPoints(site, 'site.response.time')
+  if (!values.length) return ''
+  const max = Math.max(1, ...values.map(point => Number(point.value)))
+  return values.map((point, index) => {
+    const x = values.length === 1 ? 50 : index / (values.length - 1) * 100
+    const y = 25 - Math.max(0, Math.min(1, Number(point.value) / max)) * 22
+    return `${index ? 'L' : 'M'} ${x.toFixed(2)} ${y.toFixed(2)}`
+  }).join(' ')
+}
+function fmtMs(value) { return value == null ? 'collecting' : `${Math.round(value)} ms` }
+function fmtUptime(value) { return value == null ? 'collecting' : `${value.toFixed(value >= 99 ? 2 : 1)}%` }
+function tlsTone(days) { return days == null ? 'warn' : days < 7 ? 'bad' : days < 30 ? 'warn' : 'ok' }
+const liveSites = derived(() => siteRows().filter(site => site.status === 'live').length)
+const failedSites = derived(() => siteRows().filter(site => site.status === 'failed').length)
+const attachedSites = derived(() => siteRows().filter(site => site.managedBy === 'attached').length)
 async function addSite() {
   if (addBusy()) return
   addBusy.set(true); addMsg.set('Adding site...'); addMsgKind.set('')
@@ -97,10 +152,17 @@ async function saveEdit(name) {
       @if (isMember)
         <div><h1>Sites</h1><p>The sites you have been given access to.</p></div>
       @else
-        <div><h1>Sites</h1><p>Server routes served from the box, each deployed as an atomic release.</p></div>
-        <div class="cmds header-actions"><span class="accent cmd">cloud site:add &lt;name&gt;</span></div>
+        <div><h1>Sites</h1><p>Every route discovered on this shared server, including attached projects.</p></div>
+        <div class="cmds header-actions"><span class="pill" :class="pollingState() === 'live' ? 'ok' : 'warn'">{{ pollingState() }}</span><small>{{ lastUpdatedAt()?.toLocaleTimeString() || 'connecting' }}</small><span class="accent cmd">cloud site:add &lt;name&gt;</span></div>
       @endif
     </header>
+    <p class="bad notice" role="status" @show="!!pollingError()">{{ pollingError() }}</p>
+    <div class="site-summary">
+      <div class="panel"><span>Routes monitored</span><strong>{{ siteRows().length }}</strong><small>{{ monitoredAt() ? 'checked ' + new Date(monitoredAt()).toLocaleTimeString() : 'checking now' }}</small></div>
+      <div class="panel"><span>Healthy</span><strong class="ok-text">{{ liveSites() }}</strong><small>HTTP probe below 500</small></div>
+      <div class="panel"><span>Failed</span><strong :class="failedSites() ? 'bad-text' : ''">{{ failedSites() }}</strong><small>Timeouts and 5xx responses</small></div>
+      <div class="panel"><span>Attached projects</span><strong>{{ attachedSites() }}</strong><small>Discovered from rpx registry</small></div>
+    </div>
     @if (!isMember)
       <div class="section">
         <h2>Add site</h2>
@@ -127,7 +189,18 @@ async function saveEdit(name) {
     @endif
     <template :for="site in siteRows()">
       <div class="section">
-        <h2>{{ site.name }} <span class="more"><span class="pill" :class="tone(site.status)">{{ site.status }}</span></span></h2>
+        <h2>{{ site.name }} <span class="more"><span class="tag" @show="!!site.project">{{ site.project }}</span><span class="pill" :class="tone(site.status)">{{ site.status }}</span></span></h2>
+          <div class="panel site-health">
+          <div><span>HTTP</span><strong>{{ site.httpStatus || 'checking' }}</strong><small>{{ site.checkedAt ? new Date(site.checkedAt).toLocaleTimeString() : 'probe pending' }}</small></div>
+          <div><span>Response time</span><strong>{{ fmtMs(site.responseMs ?? latestMetric(site, 'site.response.time')) }}</strong><small>Latest endpoint probe</small></div>
+          <div><span>TLS expires</span><strong>{{ site.tlsDaysRemaining != null ? site.tlsDaysRemaining + ' days' : 'checking' }}</strong><small><span class="pill" :class="tlsTone(site.tlsDaysRemaining)">{{ site.tlsDaysRemaining == null ? 'unknown' : site.tlsDaysRemaining < 30 ? 'renew soon' : 'valid' }}</span></small></div>
+          <div><span>24h availability</span><strong>{{ fmtUptime(uptime(site)) }}</strong><small>{{ metricPoints(site, 'site.health.up').length }} samples</small></div>
+          <div class="latency-chart">
+            <span>24h response history</span>
+            <svg viewBox="0 0 100 28" preserveAspectRatio="none" role="img" :aria-label="site.name + ' response time history'"><line x1="0" x2="100" y1="25" y2="25"></line><path :d="historyPath(site)"></path></svg>
+            <small>{{ fmtMs(latestMetric(site, 'site.response.time')) }} latest</small>
+          </div>
+        </div>
         <div class="cols">
           <div class="panel">
             <div class="kv"><span>route</span> <b class="mono"><a :href="site.href" @show="!!site.href">{{ site.route }}</a><span @show="!site.href">{{ site.route }}</span></b></div>
@@ -139,6 +212,9 @@ async function saveEdit(name) {
             <div class="kv"><span>web root</span> <b class="mono" style="font-size:11px">{{ site.root }}</b></div>
             <div class="kv"><span>source</span> <b class="mono">{{ site.branch }}</b></div>
             <div class="kv"><span>deploy</span> <b>{{ site.deploy }}</b></div>
+            <div class="kv"><span>ownership</span> <b>{{ site.managedBy === 'attached' ? 'attached project' : 'server owner' }}</b></div>
+            <div class="kv" @show="!!site.release"><span>release</span> <b class="mono">{{ site.release }}</b></div>
+            <div class="kv" @show="!!site.deployedAt"><span>deployed</span> <b>{{ new Date(site.deployedAt).toLocaleString() }}</b></div>
             <div class="kv" @show="site.envKeys && site.envKeys.length"><span>env vars</span> <b class="mono">{{ (site.envKeys || []).join(', ') }}</b></div>
             <div class="kv" @show="site.aliases && site.aliases.length"><span>aliases</span> <b class="mono">{{ (site.aliases || []).join(', ') }}</b></div>
             <div class="kv" @show="site.redirects && Object.keys(site.redirects).length"><span>redirects</span> <b class="mono">{{ Object.keys(site.redirects || {}).length }}</b></div>
@@ -147,12 +223,13 @@ async function saveEdit(name) {
         </div>
         <div class="row-actions" style="margin-top:12px;">
           <a class="btn ghost sm" :href="'/operations/workloads?service=' + encodeURIComponent(site.name)">Backing workloads</a>
-          @if (canDeploy)<button class="btn sm" type="button" @click="askDeploy(site.name)">Deploy</button>@endif
-          @if (canEdit)<button class="btn ghost sm" type="button" @click="toggleEdit(site.name)">Edit</button>@endif
+          @if (canDeploy)<button class="btn sm" type="button" @show="site.managedBy !== 'attached'" @click="askDeploy(site.name)">Deploy</button>@endif
+          @if (canEdit)<button class="btn ghost sm" type="button" @show="site.managedBy !== 'attached'" @click="toggleEdit(site.name)">Edit</button>@endif
           @if (!isMember)
-            <button class="btn danger sm" type="button" :aria-label="'Remove site ' + site.name" @click="askRemove(site.name)">Remove</button>
+            <button class="btn danger sm" type="button" @show="site.managedBy !== 'attached'" :aria-label="'Remove site ' + site.name" @click="askRemove(site.name)">Remove</button>
           @endif
         </div>
+        <p class="note" @show="site.managedBy === 'attached'">This route is managed by the {{ site.project }} project. Deploy and configuration actions belong in that project.</p>
         @if (!canDeploy && !canEdit)<p class="note">This membership is read-only for {{ site.name }}. Ask an organization owner for deployment or configuration access.</p>@endif
         <form class="form-grid" style="margin-top:14px;" @show="editing() === site.name" @submit.prevent="saveEdit(site.name)">
           <div class="field-block">
@@ -185,5 +262,20 @@ async function saveEdit(name) {
     </template>
     @include('../partials/op-confirm')
   </div>
+  <style>
+    .site-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:24px}
+    .site-summary .panel{display:grid;gap:5px;padding:14px 16px}
+    .site-summary span,.site-health>div>span{color:var(--txt3);font-size:11px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
+    .site-summary strong{font-size:24px}.site-summary small{color:var(--txt3);font-size:11px}
+    .ok-text{color:var(--ok)}.bad-text{color:var(--bad)}
+    .site-health{display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) minmax(220px,1.6fr);gap:0;padding:0;margin-bottom:14px;overflow:hidden}
+    .site-health>div{display:grid;gap:5px;padding:15px 16px;border-right:1px solid var(--panel-br)}
+    .site-health>div:last-child{border-right:0}
+    .site-health strong{font-size:18px}.site-health small{color:var(--txt3);font-size:11px}
+    .site-health .pill{font-size:10px;padding:2px 7px}
+    .latency-chart svg{width:100%;height:36px}.latency-chart line{stroke:rgba(255,255,255,.08);vector-effect:non-scaling-stroke}.latency-chart path{fill:none;stroke:var(--accent);stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
+    @media(max-width:1000px){.site-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.site-health{grid-template-columns:repeat(2,minmax(0,1fr))}.site-health>div{border-bottom:1px solid var(--panel-br)}.latency-chart{grid-column:1/-1}}
+    @media(max-width:600px){.site-summary,.site-health{grid-template-columns:1fr}.latency-chart{grid-column:auto}.site-health>div{border-right:0}}
+  </style>
 </body>
 </html>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/ts-cloud",
   "type": "module",
-  "version": "0.7.62",
+  "version": "0.7.64",
   "description": "A lightweight, performant infrastructure-as-code library and CLI for deploying both server-based (EC2) and serverless applications.",
   "author": "Chris Breuer <chris@stacksjs.com>",
   "license": "MIT",
@@ -90,8 +90,8 @@
   },
   "dependencies": {
     "@stacksjs/ts-xml": "^0.1.0",
-    "@ts-cloud/aws-types": "0.7.62",
-    "@ts-cloud/core": "0.7.62"
+    "@ts-cloud/aws-types": "0.7.64",
+    "@ts-cloud/core": "0.7.64"
   },
   "devDependencies": {
     "better-dx": "^0.2.16",