@mayurbhusare/resilient-queue-ui 0.0.0-stage → 1.0.0
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.
- package/LICENSE +21 -0
- package/README.md +205 -3
- package/package.json +55 -4
- package/src/adapters/express.js +39 -0
- package/src/adapters/fastify.js +192 -0
- package/src/dispatcher.js +936 -0
- package/src/handlers/dlq.js +51 -0
- package/src/handlers/job.js +87 -0
- package/src/handlers/metrics.js +60 -0
- package/src/handlers/queues.js +58 -0
- package/src/index.js +44 -0
- package/src/registry.js +102 -0
- package/src/ui/api-client.js +228 -0
- package/src/ui/app.js +1303 -0
- package/src/ui/index.html +141 -0
- package/src/ui/styles.css +1197 -0
- package/src/ui/views/dlq.js +501 -0
- package/src/ui/views/job.js +549 -0
- package/src/ui/views/overview.js +670 -0
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<meta name="description" content="Administration dashboard for @mayurbhusare/resilient-queue" />
|
|
7
|
+
<title>ResilientQueue Dashboard</title>
|
|
8
|
+
<link rel="stylesheet" href="./styles.css" />
|
|
9
|
+
</head>
|
|
10
|
+
<body>
|
|
11
|
+
<a href="#content-container" class="skip-link">Skip to main content</a>
|
|
12
|
+
<div class="mobile-backdrop" id="mobile-backdrop" aria-hidden="true"></div>
|
|
13
|
+
|
|
14
|
+
<div class="app-container">
|
|
15
|
+
<div id="live-announcer" class="visually-hidden" role="status" aria-live="polite" aria-atomic="true"></div>
|
|
16
|
+
<!-- Sidebar Navigation -->
|
|
17
|
+
<aside class="sidebar" id="sidebar" aria-label="Dashboard Navigation">
|
|
18
|
+
<div class="sidebar-header">
|
|
19
|
+
<a href="#/overview" class="brand" aria-label="ResilientQueue Home">
|
|
20
|
+
<div class="brand-icon" aria-hidden="true">RQ</div>
|
|
21
|
+
<span class="brand-title">ResilientQueue</span>
|
|
22
|
+
<span class="brand-tag">UI</span>
|
|
23
|
+
</a>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<nav class="sidebar-nav" aria-label="Main Navigation">
|
|
27
|
+
<button
|
|
28
|
+
type="button"
|
|
29
|
+
class="nav-link active"
|
|
30
|
+
data-view="overview"
|
|
31
|
+
aria-current="page"
|
|
32
|
+
aria-label="Navigate to Queue Overview"
|
|
33
|
+
>
|
|
34
|
+
<span aria-hidden="true">📊</span>
|
|
35
|
+
<span>Queue Overview</span>
|
|
36
|
+
</button>
|
|
37
|
+
|
|
38
|
+
<button
|
|
39
|
+
type="button"
|
|
40
|
+
class="nav-link"
|
|
41
|
+
data-view="dlq"
|
|
42
|
+
aria-label="Navigate to Dead Letter Queue"
|
|
43
|
+
>
|
|
44
|
+
<span aria-hidden="true">📥</span>
|
|
45
|
+
<span>Dead Letter Queue</span>
|
|
46
|
+
<span class="nav-badge badge-muted">DLQ</span>
|
|
47
|
+
</button>
|
|
48
|
+
|
|
49
|
+
<button
|
|
50
|
+
type="button"
|
|
51
|
+
class="nav-link"
|
|
52
|
+
data-view="job"
|
|
53
|
+
aria-label="Navigate to Job Inspection"
|
|
54
|
+
>
|
|
55
|
+
<span aria-hidden="true">🔍</span>
|
|
56
|
+
<span>Job Inspection</span>
|
|
57
|
+
<span class="nav-badge badge-amber" title="Requires @mayurbhusare/resilient-queue@^2.2.0 for live lookups">Preview</span>
|
|
58
|
+
</button>
|
|
59
|
+
</nav>
|
|
60
|
+
|
|
61
|
+
<div class="sidebar-footer">
|
|
62
|
+
<div>@mayurbhusare/resilient-queue-ui</div>
|
|
63
|
+
<div style="margin-top: 0.25rem;">
|
|
64
|
+
<a href="https://github.com/resilient-queue/resilient-queue-ui#readme" target="_blank" rel="noopener noreferrer">
|
|
65
|
+
Documentation →
|
|
66
|
+
</a>
|
|
67
|
+
</div>
|
|
68
|
+
</div>
|
|
69
|
+
</aside>
|
|
70
|
+
|
|
71
|
+
<!-- Main Content Area -->
|
|
72
|
+
<div class="main-wrapper">
|
|
73
|
+
<header class="top-bar">
|
|
74
|
+
<div class="top-bar-left">
|
|
75
|
+
<button
|
|
76
|
+
type="button"
|
|
77
|
+
class="mobile-toggle"
|
|
78
|
+
id="mobile-toggle-btn"
|
|
79
|
+
aria-label="Toggle navigation menu"
|
|
80
|
+
aria-haspopup="true"
|
|
81
|
+
aria-expanded="false"
|
|
82
|
+
aria-controls="sidebar"
|
|
83
|
+
>
|
|
84
|
+
☰
|
|
85
|
+
</button>
|
|
86
|
+
<h1 class="view-title" id="view-title">Queue Overview</h1>
|
|
87
|
+
</div>
|
|
88
|
+
|
|
89
|
+
<div class="top-bar-actions">
|
|
90
|
+
<div class="status-indicator">
|
|
91
|
+
<span class="status-dot loading" id="status-dot" aria-hidden="true"></span>
|
|
92
|
+
<span id="status-text">Connecting...</span>
|
|
93
|
+
</div>
|
|
94
|
+
|
|
95
|
+
<div class="auto-refresh-wrapper" id="auto-refresh-wrapper">
|
|
96
|
+
<label for="poll-interval-select" class="visually-hidden">Auto-refresh Interval</label>
|
|
97
|
+
<select
|
|
98
|
+
id="poll-interval-select"
|
|
99
|
+
class="poll-select"
|
|
100
|
+
aria-label="Auto-refresh polling interval"
|
|
101
|
+
>
|
|
102
|
+
<option value="0">Off (Manual)</option>
|
|
103
|
+
<option value="2000">Every 2s</option>
|
|
104
|
+
<option value="5000" selected>Every 5s</option>
|
|
105
|
+
<option value="10000">Every 10s</option>
|
|
106
|
+
<option value="30000">Every 30s</option>
|
|
107
|
+
<option value="60000">Every 60s</option>
|
|
108
|
+
</select>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<button
|
|
112
|
+
type="button"
|
|
113
|
+
class="btn btn-secondary btn-sm"
|
|
114
|
+
id="refresh-btn"
|
|
115
|
+
aria-label="Refresh Queue Telemetry"
|
|
116
|
+
>
|
|
117
|
+
<span>↻</span>
|
|
118
|
+
<span>Refresh</span>
|
|
119
|
+
</button>
|
|
120
|
+
</div>
|
|
121
|
+
</header>
|
|
122
|
+
|
|
123
|
+
<main class="content-area" id="content-container" role="main" tabindex="-1">
|
|
124
|
+
<!-- Rendered dynamically by app.js -->
|
|
125
|
+
<div class="state-container loading-state" role="status">
|
|
126
|
+
<div class="spinner" aria-hidden="true"></div>
|
|
127
|
+
<h3 class="state-title">Initializing Dashboard...</h3>
|
|
128
|
+
<p class="state-description">Establishing connection to the adapter API.</p>
|
|
129
|
+
</div>
|
|
130
|
+
</main>
|
|
131
|
+
</div>
|
|
132
|
+
</div>
|
|
133
|
+
|
|
134
|
+
<!-- Scripts -->
|
|
135
|
+
<script src="./api-client.js"></script>
|
|
136
|
+
<script src="./views/overview.js"></script>
|
|
137
|
+
<script src="./views/dlq.js"></script>
|
|
138
|
+
<script src="./views/job.js"></script>
|
|
139
|
+
<script src="./app.js"></script>
|
|
140
|
+
</body>
|
|
141
|
+
</html>
|