npm - @rudderjs/horizon - Versions diffs - 0.0.1 - Mend

@rudderjs/horizon 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (40) hide show

package/LICENSE +21 -0
package/README.md +87 -0
package/boost/guidelines.md +38 -0
package/dist/api/routes.d.ts +6 -0
package/dist/api/routes.d.ts.map +1 -0
package/dist/api/routes.js +140 -0
package/dist/api/routes.js.map +1 -0
package/dist/collectors/job.d.ts +12 -0
package/dist/collectors/job.d.ts.map +1 -0
package/dist/collectors/job.js +85 -0
package/dist/collectors/job.js.map +1 -0
package/dist/collectors/metrics.d.ts +19 -0
package/dist/collectors/metrics.d.ts.map +1 -0
package/dist/collectors/metrics.js +90 -0
package/dist/collectors/metrics.js.map +1 -0
package/dist/collectors/worker.d.ts +19 -0
package/dist/collectors/worker.d.ts.map +1 -0
package/dist/collectors/worker.js +44 -0
package/dist/collectors/worker.js.map +1 -0
package/dist/index.d.ts +36 -0
package/dist/index.d.ts.map +1 -0
package/dist/index.js +113 -0
package/dist/index.js.map +1 -0
package/dist/storage.d.ts +47 -0
package/dist/storage.d.ts.map +1 -0
package/dist/storage.js +303 -0
package/dist/storage.js.map +1 -0
package/dist/types.d.ts +90 -0
package/dist/types.d.ts.map +1 -0
package/dist/types.js +12 -0
package/dist/types.js.map +1 -0
package/dist/ui/layout.d.ts +6 -0
package/dist/ui/layout.d.ts.map +1 -0
package/dist/ui/layout.js +55 -0
package/dist/ui/layout.js.map +1 -0
package/dist/ui/pages.d.ts +6 -0
package/dist/ui/pages.d.ts.map +1 -0
package/dist/ui/pages.js +295 -0
package/dist/ui/pages.js.map +1 -0
package/package.json +49 -0

package/dist/ui/layout.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+/**
+ * Shared HTML layout for Horizon UI pages.
+ * Sidebar navigation + content area. Alpine.js + Tailwind CDN.
+ */
+export declare function layout(title: string, body: string, basePath: string, activePath: string): string;
+//# sourceMappingURL=layout.d.ts.map

package/dist/ui/layout.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/ui/layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAmDhG"}

package/dist/ui/layout.js ADDED Viewed

@@ -0,0 +1,55 @@
+/**
+ * Shared HTML layout for Horizon UI pages.
+ * Sidebar navigation + content area. Alpine.js + Tailwind CDN.
+ */
+export function layout(title, body, basePath, activePath) {
+    const nav = [
+        { label: 'Dashboard', path: '', icon: 'M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6' },
+        { label: 'Recent Jobs', path: '/jobs/recent', icon: 'M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2' },
+        { label: 'Failed Jobs', path: '/jobs/failed', icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z' },
+        { label: 'Queues', path: '/queues', icon: 'M4 6h16M4 10h16M4 14h16M4 18h16' },
+        { label: 'Workers', path: '/workers', icon: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.066 2.573c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.573 1.066c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.066-2.573c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z' },
+    ];
+    const navHtml = nav.map(n => {
+        const href = `${basePath}${n.path}`;
+        const active = activePath === n.path || (n.path === '' && activePath === '/');
+        return `<a href="${href}" class="flex items-center gap-3 px-3 py-2 text-sm rounded-lg transition ${active ? 'bg-teal-50 text-teal-700 font-medium' : 'text-gray-600 hover:bg-gray-50 hover:text-gray-900'}">
+      <svg class="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="${n.icon}"/></svg>
+      ${n.label}
+    </a>`;
+    }).join('\n        ');
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title} — Horizon</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
+  <style>[x-cloak] { display: none !important; }</style>
+</head>
+<body class="bg-gray-50 text-gray-900 font-sans antialiased">
+  <div class="flex min-h-screen">
+    <aside class="w-56 bg-white border-r border-gray-200 flex flex-col">
+      <div class="px-4 py-5 flex items-center gap-2 border-b border-gray-100">
+        <div class="w-7 h-7 bg-teal-600 rounded-lg flex items-center justify-center">
+          <svg class="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 10h16M4 14h16M4 18h16"/>
+          </svg>
+        </div>
+        <span class="font-semibold text-sm">Horizon</span>
+      </div>
+      <nav class="flex-1 px-3 py-4 space-y-0.5 overflow-y-auto">
+        ${navHtml}
+      </nav>
+    </aside>
+    <main class="flex-1 overflow-auto">
+      <div class="max-w-6xl mx-auto px-6 py-8">
+        ${body}
+      </div>
+    </main>
+  </div>
+</body>
+</html>`;
+}
+//# sourceMappingURL=layout.js.map

package/dist/ui/layout.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/ui/layout.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,IAAY,EAAE,QAAgB,EAAE,UAAkB;IACtF,MAAM,GAAG,GAAG;QACV,EAAE,KAAK,EAAE,WAAW,EAAK,IAAI,EAAE,EAAE,EAAe,IAAI,EAAE,kJAAkJ,EAAE;QAC1M,EAAE,KAAK,EAAE,aAAa,EAAG,IAAI,EAAE,cAAc,EAAG,IAAI,EAAE,iIAAiI,EAAE;QACzL,EAAE,KAAK,EAAE,aAAa,EAAG,IAAI,EAAE,cAAc,EAAG,IAAI,EAAE,sIAAsI,EAAE;QAC9L,EAAE,KAAK,EAAE,QAAQ,EAAQ,IAAI,EAAE,SAAS,EAAQ,IAAI,EAAE,iCAAiC,EAAE;QACzF,EAAE,KAAK,EAAE,SAAS,EAAO,IAAI,EAAE,UAAU,EAAO,IAAI,EAAE,qeAAqe,EAAE;KAC9hB,CAAA;IAED,MAAM,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE;QAC1B,MAAM,IAAI,GAAK,GAAG,QAAQ,GAAG,CAAC,CAAC,IAAI,EAAE,CAAA;QACrC,MAAM,MAAM,GAAG,UAAU,KAAK,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,CAAC,IAAI,KAAK,EAAE,IAAI,UAAU,KAAK,GAAG,CAAC,CAAA;QAC7E,OAAO,YAAY,IAAI,4EAA4E,MAAM,CAAC,CAAC,CAAC,sCAAsC,CAAC,CAAC,CAAC,oDAAoD;0KACnC,CAAC,CAAC,IAAI;QACxK,CAAC,CAAC,KAAK;SACN,CAAA;IACP,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAA;IAErB,OAAO;;;;;WAKE,KAAK;;;;;;;;;;;;;;;;;UAiBN,OAAO;;;;;UAKP,IAAI;;;;;QAKN,CAAA;AACR,CAAC"}

package/dist/ui/pages.d.ts ADDED Viewed

@@ -0,0 +1,6 @@
+export declare function dashboardPage(basePath: string, apiPrefix: string): string;
+export declare function recentJobsPage(basePath: string, apiPrefix: string): string;
+export declare function failedJobsPage(basePath: string, apiPrefix: string): string;
+export declare function queuesPage(basePath: string, apiPrefix: string): string;
+export declare function workersPage(basePath: string, apiPrefix: string): string;
+//# sourceMappingURL=pages.d.ts.map

package/dist/ui/pages.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pages.d.ts","sourceRoot":"","sources":["../../src/ui/pages.ts"],"names":[],"mappings":"AAIA,wBAAgB,aAAa,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CA6EzE;AAID,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAW1E;AAID,wBAAgB,cAAc,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAW1E;AAsFD,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAiDtE;AAID,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAuDvE"}

package/dist/ui/pages.js ADDED Viewed

@@ -0,0 +1,295 @@
+import { layout } from './layout.js';
+// ─── Dashboard ─────────────────────────────────────────────
+export function dashboardPage(basePath, apiPrefix) {
+    return layout('Dashboard', `
+    <div x-data="dashboard()" x-init="load()" x-cloak>
+      <h2 class="text-xl font-bold mb-6">Dashboard</h2>
+      <!-- Stats Cards -->
+      <div class="grid grid-cols-2 md:grid-cols-5 gap-4 mb-8">
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <div class="text-2xl font-bold" x-text="stats.jobs?.total || 0"></div>
+          <div class="text-sm text-gray-500">Total Jobs</div>
+        </div>
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <div class="text-2xl font-bold text-amber-600" x-text="stats.jobs?.pending || 0"></div>
+          <div class="text-sm text-gray-500">Pending</div>
+        </div>
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <div class="text-2xl font-bold text-blue-600" x-text="stats.jobs?.processing || 0"></div>
+          <div class="text-sm text-gray-500">Processing</div>
+        </div>
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <div class="text-2xl font-bold text-green-600" x-text="stats.jobs?.completed || 0"></div>
+          <div class="text-sm text-gray-500">Completed</div>
+        </div>
+        <div class="bg-white rounded-xl border border-gray-200 p-4 shadow-sm">
+          <div class="text-2xl font-bold text-red-600" x-text="stats.jobs?.failed || 0"></div>
+          <div class="text-sm text-gray-500">Failed</div>
+        </div>
+      </div>
+      <!-- Queue Metrics -->
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm">
+        <div class="px-5 py-4 border-b border-gray-100 flex items-center justify-between">
+          <h3 class="text-sm font-semibold text-gray-700">Queue Metrics</h3>
+          <span class="text-xs text-gray-400" x-text="stats.workers + ' worker(s)'"></span>
+        </div>
+        <div class="overflow-x-auto">
+          <table class="w-full text-sm">
+            <thead class="bg-gray-50 text-gray-500 text-xs uppercase">
+              <tr>
+                <th class="px-5 py-3 text-left">Queue</th>
+                <th class="px-5 py-3 text-right">Throughput</th>
+                <th class="px-5 py-3 text-right">Wait Time</th>
+                <th class="px-5 py-3 text-right">Runtime</th>
+                <th class="px-5 py-3 text-right">Pending</th>
+                <th class="px-5 py-3 text-right">Failed</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100">
+              <template x-for="q in stats.queues || []" :key="q.queue">
+                <tr class="hover:bg-gray-50">
+                  <td class="px-5 py-3 font-medium" x-text="q.queue"></td>
+                  <td class="px-5 py-3 text-right" x-text="q.throughput + '/min'"></td>
+                  <td class="px-5 py-3 text-right" x-text="q.waitTime + 'ms'"></td>
+                  <td class="px-5 py-3 text-right" x-text="q.runtime + 'ms'"></td>
+                  <td class="px-5 py-3 text-right text-amber-600" x-text="q.pending"></td>
+                  <td class="px-5 py-3 text-right text-red-600" x-text="q.failed"></td>
+                </tr>
+              </template>
+              <tr x-show="!stats.queues?.length">
+                <td colspan="6" class="px-5 py-8 text-center text-gray-400">No queue data yet.</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="mt-4 text-center text-xs text-gray-400">Auto-refreshes every 10 seconds</div>
+    </div>
+    <script>
+      function dashboard() {
+        return {
+          stats: {},
+          async load() { await this.refresh(); setInterval(() => this.refresh(), 10000) },
+          async refresh() { this.stats = await fetch('${apiPrefix}/stats').then(r => r.json()) }
+        }
+      }
+    </script>`, basePath, '/');
+}
+// ─── Recent Jobs ───────────────────────────────────────────
+export function recentJobsPage(basePath, apiPrefix) {
+    return layout('Recent Jobs', `
+    <div x-data="jobList('recent')" x-init="load()" x-cloak>
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-xl font-bold">Recent Jobs</h2>
+        <input type="text" x-model="search" @input.debounce.300ms="load()"
+               placeholder="Search..." class="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-teal-500 outline-none">
+      </div>
+      ${jobTable(apiPrefix)}
+    </div>
+    ${jobScript(apiPrefix)}`, basePath, '/jobs/recent');
+}
+// ─── Failed Jobs ───────────────────────────────────────────
+export function failedJobsPage(basePath, apiPrefix) {
+    return layout('Failed Jobs', `
+    <div x-data="jobList('failed')" x-init="load()" x-cloak>
+      <div class="flex items-center justify-between mb-6">
+        <h2 class="text-xl font-bold">Failed Jobs</h2>
+        <input type="text" x-model="search" @input.debounce.300ms="load()"
+               placeholder="Search..." class="text-sm border border-gray-300 rounded-lg px-3 py-1.5 focus:ring-2 focus:ring-teal-500 outline-none">
+      </div>
+      ${jobTable(apiPrefix)}
+    </div>
+    ${jobScript(apiPrefix)}`, basePath, '/jobs/failed');
+}
+function jobTable(apiPrefix) {
+    return `
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 border-b border-gray-200 text-xs uppercase text-gray-500">
+            <tr>
+              <th class="px-4 py-3 text-left">Name</th>
+              <th class="px-4 py-3 text-left">Queue</th>
+              <th class="px-4 py-3 text-left">Status</th>
+              <th class="px-4 py-3 text-right">Duration</th>
+              <th class="px-4 py-3 text-right">Time</th>
+              <th class="px-4 py-3 text-right">Actions</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100">
+            <template x-for="job in jobs" :key="job.id">
+              <tr class="hover:bg-gray-50">
+                <td class="px-4 py-3 font-mono text-xs" x-text="job.name"></td>
+                <td class="px-4 py-3" x-text="job.queue"></td>
+                <td class="px-4 py-3">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+                        :class="{pending:'bg-amber-100 text-amber-700',processing:'bg-blue-100 text-blue-700',completed:'bg-green-100 text-green-700',failed:'bg-red-100 text-red-700'}[job.status]"
+                        x-text="job.status"></span>
+                </td>
+                <td class="px-4 py-3 text-right" x-text="job.duration ? job.duration + 'ms' : '—'"></td>
+                <td class="px-4 py-3 text-right text-gray-400 text-xs" x-text="ago(job.dispatchedAt)"></td>
+                <td class="px-4 py-3 text-right">
+                  <button x-show="job.status === 'failed'" @click="retry(job.id)"
+                          class="text-xs text-teal-600 hover:text-teal-800 mr-2">Retry</button>
+                  <button @click="remove(job.id)"
+                          class="text-xs text-red-500 hover:text-red-700">Delete</button>
+                </td>
+              </tr>
+            </template>
+            <tr x-show="jobs.length === 0">
+              <td colspan="6" class="px-4 py-12 text-center text-gray-400">No jobs found.</td>
+            </tr>
+          </tbody>
+        </table>
+        <div class="flex items-center justify-between px-4 py-3 border-t border-gray-200 bg-gray-50 text-sm">
+          <span class="text-gray-500">Total: <span x-text="meta.total"></span></span>
+          <div class="flex gap-1">
+            <button @click="page > 1 && (page--, load())" :disabled="page <= 1" class="px-3 py-1 border rounded text-xs disabled:opacity-30">Prev</button>
+            <button @click="page++; load()" class="px-3 py-1 border rounded text-xs">Next</button>
+          </div>
+        </div>
+      </div>`;
+}
+function jobScript(apiPrefix) {
+    return `
+    <script>
+      function jobList(type) {
+        return {
+          jobs: [], meta: { total: 0 }, page: 1, search: '',
+          async load() {
+            const params = new URLSearchParams({ page: this.page, per_page: 50 })
+            if (this.search) params.set('search', this.search)
+            const data = await fetch('${apiPrefix}/jobs/' + type + '?' + params).then(r => r.json())
+            this.jobs = data.data || []
+            this.meta = data.meta || { total: 0 }
+          },
+          async retry(id) {
+            await fetch('${apiPrefix}/jobs/' + id + '/retry', { method: 'POST' })
+            this.load()
+          },
+          async remove(id) {
+            await fetch('${apiPrefix}/jobs/' + id, { method: 'DELETE' })
+            this.load()
+          },
+          ago(dateStr) {
+            const s = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
+            if (s < 60) return s + 's ago'
+            if (s < 3600) return Math.floor(s / 60) + 'm ago'
+            if (s < 86400) return Math.floor(s / 3600) + 'h ago'
+            return Math.floor(s / 86400) + 'd ago'
+          }
+        }
+      }
+    </script>`;
+}
+// ─── Queues ────────────────────────────────────────────────
+export function queuesPage(basePath, apiPrefix) {
+    return layout('Queues', `
+    <div x-data="queues()" x-init="load()" x-cloak>
+      <h2 class="text-xl font-bold mb-6">Queues</h2>
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 border-b border-gray-200 text-xs uppercase text-gray-500">
+            <tr>
+              <th class="px-5 py-3 text-left">Queue</th>
+              <th class="px-5 py-3 text-right">Throughput/min</th>
+              <th class="px-5 py-3 text-right">Avg Wait</th>
+              <th class="px-5 py-3 text-right">Avg Runtime</th>
+              <th class="px-5 py-3 text-right">Pending</th>
+              <th class="px-5 py-3 text-right">Active</th>
+              <th class="px-5 py-3 text-right">Completed</th>
+              <th class="px-5 py-3 text-right">Failed</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100">
+            <template x-for="q in data" :key="q.queue">
+              <tr class="hover:bg-gray-50">
+                <td class="px-5 py-3 font-medium" x-text="q.queue"></td>
+                <td class="px-5 py-3 text-right" x-text="q.throughput"></td>
+                <td class="px-5 py-3 text-right" x-text="q.waitTime + 'ms'"></td>
+                <td class="px-5 py-3 text-right" x-text="q.runtime + 'ms'"></td>
+                <td class="px-5 py-3 text-right text-amber-600" x-text="q.pending"></td>
+                <td class="px-5 py-3 text-right text-blue-600" x-text="q.active"></td>
+                <td class="px-5 py-3 text-right text-green-600" x-text="q.completed"></td>
+                <td class="px-5 py-3 text-right text-red-600" x-text="q.failed"></td>
+              </tr>
+            </template>
+            <tr x-show="data.length === 0">
+              <td colspan="8" class="px-5 py-12 text-center text-gray-400">No queue data yet.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <script>
+      function queues() {
+        return {
+          data: [],
+          async load() {
+            const res = await fetch('${apiPrefix}/queues').then(r => r.json())
+            this.data = res.data || []
+          }
+        }
+      }
+    </script>`, basePath, '/queues');
+}
+// ─── Workers ───────────────────────────────────────────────
+export function workersPage(basePath, apiPrefix) {
+    return layout('Workers', `
+    <div x-data="workers()" x-init="load()" x-cloak>
+      <h2 class="text-xl font-bold mb-6">Workers</h2>
+      <div class="bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 border-b border-gray-200 text-xs uppercase text-gray-500">
+            <tr>
+              <th class="px-5 py-3 text-left">ID</th>
+              <th class="px-5 py-3 text-left">Queue</th>
+              <th class="px-5 py-3 text-left">Status</th>
+              <th class="px-5 py-3 text-right">Jobs Run</th>
+              <th class="px-5 py-3 text-right">Memory</th>
+              <th class="px-5 py-3 text-right">Last Job</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100">
+            <template x-for="w in data" :key="w.id">
+              <tr class="hover:bg-gray-50">
+                <td class="px-5 py-3 font-mono text-xs" x-text="w.id"></td>
+                <td class="px-5 py-3" x-text="w.queue"></td>
+                <td class="px-5 py-3">
+                  <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium"
+                        :class="{active:'bg-green-100 text-green-700',idle:'bg-gray-100 text-gray-600',paused:'bg-amber-100 text-amber-700'}[w.status]"
+                        x-text="w.status"></span>
+                </td>
+                <td class="px-5 py-3 text-right" x-text="w.jobsRun"></td>
+                <td class="px-5 py-3 text-right" x-text="w.memoryMb + ' MB'"></td>
+                <td class="px-5 py-3 text-right text-gray-400 text-xs" x-text="w.lastJobAt ? ago(w.lastJobAt) : '—'"></td>
+              </tr>
+            </template>
+            <tr x-show="data.length === 0">
+              <td colspan="6" class="px-5 py-12 text-center text-gray-400">No workers registered.</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+    <script>
+      function workers() {
+        return {
+          data: [],
+          async load() {
+            const res = await fetch('${apiPrefix}/workers').then(r => r.json())
+            this.data = res.data || []
+          },
+          ago(dateStr) {
+            const s = Math.floor((Date.now() - new Date(dateStr).getTime()) / 1000)
+            if (s < 60) return s + 's ago'
+            if (s < 3600) return Math.floor(s / 60) + 'm ago'
+            return Math.floor(s / 3600) + 'h ago'
+          }
+        }
+      }
+    </script>`, basePath, '/workers');
+}
+//# sourceMappingURL=pages.js.map

package/dist/ui/pages.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"pages.js","sourceRoot":"","sources":["../../src/ui/pages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEpC,8DAA8D;AAE9D,MAAM,UAAU,aAAa,CAAC,QAAgB,EAAE,SAAiB;IAC/D,OAAO,MAAM,CAAC,WAAW,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wDAwE2B,SAAS;;;cAGnD,EAAE,QAAQ,EAAE,GAAG,CAAC,CAAA;AAC9B,CAAC;AAED,8DAA8D;AAE9D,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,SAAiB;IAChE,OAAO,MAAM,CAAC,aAAa,EAAE;;;;;;;QAOvB,QAAQ,CAAC,SAAS,CAAC;;MAErB,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAA;AACvD,CAAC;AAED,8DAA8D;AAE9D,MAAM,UAAU,cAAc,CAAC,QAAgB,EAAE,SAAiB;IAChE,OAAO,MAAM,CAAC,aAAa,EAAE;;;;;;;QAOvB,QAAQ,CAAC,SAAS,CAAC;;MAErB,SAAS,CAAC,SAAS,CAAC,EAAE,EAAE,QAAQ,EAAE,cAAc,CAAC,CAAA;AACvD,CAAC;AAED,SAAS,QAAQ,CAAC,SAAiB;IACjC,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aA6CI,CAAA;AACb,CAAC;AAED,SAAS,SAAS,CAAC,SAAiB;IAClC,OAAO;;;;;;;;wCAQ+B,SAAS;;;;;2BAKtB,SAAS;;;;2BAIT,SAAS;;;;;;;;;;;;cAYtB,CAAA;AACd,CAAC;AAED,8DAA8D;AAE9D,MAAM,UAAU,UAAU,CAAC,QAAgB,EAAE,SAAiB;IAC5D,OAAO,MAAM,CAAC,QAAQ,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA0Ca,SAAS;;;;;cAKlC,EAAE,QAAQ,EAAE,SAAS,CAAC,CAAA;AACpC,CAAC;AAED,8DAA8D;AAE9D,MAAM,UAAU,WAAW,CAAC,QAAgB,EAAE,SAAiB;IAC7D,OAAO,MAAM,CAAC,SAAS,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uCA0CY,SAAS;;;;;;;;;;;cAWlC,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAA;AACrC,CAAC"}

package/package.json ADDED Viewed

@@ -0,0 +1,49 @@
+{
+  "name": "@rudderjs/horizon",
+  "version": "0.0.1",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rudderjs/rudder",
+    "directory": "packages/horizon"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "boost"
+  ],
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@rudderjs/core": "0.0.8",
+    "@rudderjs/contracts": "0.0.3",
+    "@rudderjs/queue": "0.0.5"
+  },
+  "peerDependencies": {
+    "@rudderjs/router": "0.0.3",
+    "@rudderjs/middleware": "0.0.7"
+  },
+  "optionalDependencies": {
+    "better-sqlite3": "^11.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.0.0",
+    "@types/better-sqlite3": "^7.6.0",
+    "typescript": "^5.4.0"
+  },
+  "author": "Suleiman Shahbari",
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "dev": "tsc -p tsconfig.build.json --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src",
+    "clean": "rm -rf dist",
+    "test": "tsc -p tsconfig.test.json && node --test dist-test/index.test.js; EXIT=$?; rm -rf dist-test; exit $EXIT"
+  }
+}