@nice2dev/ui-monitoring 1.1.5 → 1.1.7

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 (4) hide show
  1. package/dist/index.cjs +1 -1
  2. package/dist/index.d.ts +10 -3
  3. package/dist/index.mjs +444 -396
  4. package/package.json +3 -4
package/dist/index.mjs CHANGED
@@ -1,25 +1,30 @@
1
- import { jsxs as t, jsx as e, Fragment as Y } from "react/jsx-runtime";
2
- import { useState as p, useMemo as X } from "react";
3
- const _ = {
4
- trace: { color: "var(--text-muted, #888)", bg: "var(--nice-overlay-15, #88888822)", icon: "⋯" },
5
- debug: { color: "var(--color-accent, #8b5cf6)", bg: "#8b5cf622", icon: "🔍" },
1
+ import { jsxs as n, jsx as e, Fragment as Y } from "react/jsx-runtime";
2
+ import { useState as x, useMemo as X } from "react";
3
+ import { useNiceTranslation as ie, NiceEmpty as oe } from "@nice2dev/ui";
4
+ const $ = {
5
+ trace: {
6
+ color: "var(--nice-text-muted, #888)",
7
+ bg: "var(--nice-overlay-15, #88888822)",
8
+ icon: "⋯"
9
+ },
10
+ debug: { color: "var(--nice-color-accent, #8b5cf6)", bg: "#8b5cf622", icon: "🔍" },
6
11
  info: {
7
- color: "var(--color-primary, #3b82f6)",
12
+ color: "var(--nice-color-primary, #3b82f6)",
8
13
  bg: "var(--nice-primary-tint-15, #3b82f622)",
9
14
  icon: "ℹī¸"
10
15
  },
11
16
  warn: {
12
- color: "var(--color-warning, #f59e0b)",
17
+ color: "var(--nice-color-warning, #f59e0b)",
13
18
  bg: "var(--nice-warning-tint-15, #f59e0b22)",
14
19
  icon: "⚠ī¸"
15
20
  },
16
21
  error: {
17
- color: "var(--color-error, #ef4444)",
22
+ color: "var(--nice-color-error, #ef4444)",
18
23
  bg: "var(--nice-danger-tint-15, #ef444422)",
19
24
  icon: "❌"
20
25
  },
21
- fatal: { color: "var(--color-error, #dc2626)", bg: "#dc262622", icon: "💀" }
22
- }, ne = [
26
+ fatal: { color: "var(--nice-color-error, #dc2626)", bg: "#dc262622", icon: "💀" }
27
+ }, ae = [
23
28
  { label: "Last 5 min", value: "now-5m" },
24
29
  { label: "Last 15 min", value: "now-15m" },
25
30
  { label: "Last 30 min", value: "now-30m" },
@@ -29,30 +34,30 @@ const _ = {
29
34
  { label: "Last 12 hours", value: "now-12h" },
30
35
  { label: "Last 24 hours", value: "now-24h" },
31
36
  { label: "Last 7 days", value: "now-7d" }
32
- ], se = ({
33
- logs: u,
34
- streams: w,
37
+ ], ge = ({
38
+ logs: d,
39
+ streams: h,
35
40
  totalCount: T,
36
41
  isLoading: v,
37
42
  savedQueries: A,
38
- patterns: b = [],
43
+ patterns: y = [],
39
44
  onQueryExecute: E,
40
- onQuerySave: F,
41
- onQueryDelete: V,
45
+ onQuerySave: V,
46
+ onQueryDelete: F,
42
47
  onStreamToggle: U,
43
- onLogClick: W,
48
+ onLogClick: N,
44
49
  onExport: z,
45
50
  onTailStart: O,
46
51
  onTailStop: P,
47
52
  isTailing: C = !1,
48
- className: y,
49
- style: j,
53
+ className: m,
54
+ style: D,
50
55
  testId: H,
51
- "data-testid": Q
56
+ "data-testid": M
52
57
  }) => {
53
- const q = Q ?? H, [R, L] = p(""), [N, $] = p("now-1h"), [G, Z] = p(1e3), [I, J] = p(
58
+ const Q = M ?? H, [R, L] = x(""), [W, j] = x("now-1h"), [q, Z] = x(1e3), [I, J] = x(
54
59
  /* @__PURE__ */ new Set(["trace", "debug", "info", "warn", "error", "fatal"])
55
- ), [m, M] = p(/* @__PURE__ */ new Set()), [K, D] = p(null), [o, n] = p(!1), [i, f] = p(""), [x, c] = p("logs"), [l, g] = p(""), d = X(() => u.filter((r) => !(!I.has(r.level) || l && !r.message.toLowerCase().includes(l.toLowerCase()))), [u, I, l]), B = X(() => {
60
+ ), [S, G] = x(/* @__PURE__ */ new Set()), [K, _] = x(null), [t, i] = x(!1), [o, f] = x(""), [u, p] = x("logs"), [c, g] = x(""), l = X(() => d.filter((r) => !(!I.has(r.level) || c && !r.message.toLowerCase().includes(c.toLowerCase()))), [d, I, c]), B = X(() => {
56
61
  const r = {
57
62
  trace: 0,
58
63
  debug: 0,
@@ -61,16 +66,16 @@ const _ = {
61
66
  error: 0,
62
67
  fatal: 0
63
68
  };
64
- return u.forEach((a) => r[a.level]++), r;
65
- }, [u]), h = () => {
69
+ return d.forEach((a) => r[a.level]++), r;
70
+ }, [d]), b = () => {
66
71
  E({
67
72
  query: R,
68
- timeRange: { from: N, to: "now" },
69
- limit: G,
73
+ timeRange: { from: W, to: "now" },
74
+ limit: q,
70
75
  direction: "backward"
71
76
  });
72
- }, S = (r) => {
73
- M((a) => {
77
+ }, w = (r) => {
78
+ G((a) => {
74
79
  const s = new Set(a);
75
80
  return s.has(r) ? s.delete(r) : s.add(r), s;
76
81
  });
@@ -80,40 +85,40 @@ const _ = {
80
85
  return s.has(r) ? s.delete(r) : s.add(r), s;
81
86
  });
82
87
  }, re = () => {
83
- i.trim() && (F(i, R), n(!1), f(""));
84
- }, te = (r) => {
85
- if (!l)
88
+ o.trim() && (V(o, R), i(!1), f(""));
89
+ }, ne = (r) => {
90
+ if (!c)
86
91
  return r;
87
- const a = new RegExp(`(${l})`, "gi");
92
+ const a = new RegExp(`(${c})`, "gi");
88
93
  return r.replace(
89
94
  a,
90
95
  '<mark style="background: var(--nice-warning, #f59e0b); color: black; padding: 0 var(--nice-space-0-5, 2px); border-radius: var(--nice-radius-sm, 2px);">$1</mark>'
91
96
  );
92
97
  };
93
- return /* @__PURE__ */ t(
98
+ return /* @__PURE__ */ n(
94
99
  "div",
95
100
  {
96
- className: `nice-log-explorer ${y || ""}`,
101
+ className: `nice-log-explorer ${m || ""}`,
97
102
  style: {
98
103
  display: "flex",
99
104
  flexDirection: "column",
100
105
  height: "100%",
101
- background: "var(--bg-elevated, #1e1e1e)",
102
- color: "var(--text-primary, #e0e0e0)",
103
- ...j
106
+ background: "var(--nice-bg-elevated, #1e1e1e)",
107
+ color: "var(--nice-text-primary, #e0e0e0)",
108
+ ...D
104
109
  },
105
- "data-testid": q,
110
+ "data-testid": Q,
106
111
  children: [
107
- /* @__PURE__ */ t(
112
+ /* @__PURE__ */ n(
108
113
  "div",
109
114
  {
110
115
  style: {
111
116
  padding: "12px 16px",
112
- borderBottom: "1px solid var(--border-color, #333)",
113
- background: "var(--bg-elevated, #252525)"
117
+ borderBottom: "1px solid var(--nice-border-color, #333)",
118
+ background: "var(--nice-bg-elevated, #252525)"
114
119
  },
115
120
  children: [
116
- /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", marginBottom: "12px" }, children: [
121
+ /* @__PURE__ */ n("div", { style: { display: "flex", gap: "8px", marginBottom: "12px" }, children: [
117
122
  /* @__PURE__ */ e(
118
123
  "input",
119
124
  {
@@ -121,14 +126,14 @@ const _ = {
121
126
  value: R,
122
127
  onChange: (r) => L(r.target.value),
123
128
  placeholder: 'Enter query... e.g., {service="api"} |= "error"',
124
- onKeyDown: (r) => r.key === "Enter" && h(),
129
+ onKeyDown: (r) => r.key === "Enter" && b(),
125
130
  style: {
126
131
  flex: 1,
127
132
  padding: "10px 16px",
128
133
  borderRadius: "8px",
129
- border: "1px solid var(--border-color, #444)",
130
- background: "var(--bg-elevated, #1e1e1e)",
131
- color: "var(--bg-primary, #fff)",
134
+ border: "1px solid var(--nice-border-color, #444)",
135
+ background: "var(--nice-bg-elevated, #1e1e1e)",
136
+ color: "var(--nice-bg-primary, #fff)",
132
137
  fontSize: "13px",
133
138
  fontFamily: "monospace"
134
139
  }
@@ -137,30 +142,30 @@ const _ = {
137
142
  /* @__PURE__ */ e(
138
143
  "select",
139
144
  {
140
- value: N,
141
- onChange: (r) => $(r.target.value),
145
+ value: W,
146
+ onChange: (r) => j(r.target.value),
142
147
  style: {
143
148
  padding: "10px 12px",
144
149
  borderRadius: "8px",
145
- border: "1px solid var(--border-color, #444)",
146
- background: "var(--bg-elevated, #1e1e1e)",
147
- color: "var(--bg-primary, #fff)",
150
+ border: "1px solid var(--nice-border-color, #444)",
151
+ background: "var(--nice-bg-elevated, #1e1e1e)",
152
+ color: "var(--nice-bg-primary, #fff)",
148
153
  fontSize: "12px"
149
154
  },
150
- children: ne.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
155
+ children: ae.map((r) => /* @__PURE__ */ e("option", { value: r.value, children: r.label }, r.value))
151
156
  }
152
157
  ),
153
- /* @__PURE__ */ t(
158
+ /* @__PURE__ */ n(
154
159
  "button",
155
160
  {
156
- onClick: h,
161
+ onClick: b,
157
162
  disabled: v,
158
163
  style: {
159
164
  padding: "10px 24px",
160
165
  borderRadius: "8px",
161
166
  border: "none",
162
- background: "var(--color-primary, #3b82f6)",
163
- color: "var(--bg-primary, #fff)",
167
+ background: "var(--nice-color-primary, #3b82f6)",
168
+ color: "var(--nice-bg-primary, #fff)",
164
169
  cursor: v ? "not-allowed" : "pointer",
165
170
  fontSize: "13px",
166
171
  fontWeight: 500,
@@ -175,13 +180,13 @@ const _ = {
175
180
  /* @__PURE__ */ e(
176
181
  "button",
177
182
  {
178
- onClick: () => n(!0),
183
+ onClick: () => i(!0),
179
184
  style: {
180
185
  padding: "10px 12px",
181
186
  borderRadius: "8px",
182
187
  border: "none",
183
- background: "var(--bg-tertiary, #333)",
184
- color: "var(--bg-primary, #fff)",
188
+ background: "var(--nice-bg-tertiary, #333)",
189
+ color: "var(--nice-bg-primary, #fff)",
185
190
  cursor: "pointer",
186
191
  fontSize: "12px"
187
192
  },
@@ -196,8 +201,8 @@ const _ = {
196
201
  padding: "10px 16px",
197
202
  borderRadius: "8px",
198
203
  border: "none",
199
- background: C ? "var(--color-success, #22c55e)" : "var(--bg-tertiary, #333)",
200
- color: "var(--bg-primary, #fff)",
204
+ background: C ? "var(--nice-color-success, #22c55e)" : "var(--nice-bg-tertiary, #333)",
205
+ color: "var(--nice-bg-primary, #fff)",
201
206
  cursor: "pointer",
202
207
  fontSize: "12px"
203
208
  },
@@ -205,11 +210,11 @@ const _ = {
205
210
  }
206
211
  )
207
212
  ] }),
208
- /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
209
- /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--text-muted, #888)" }, children: "Levels:" }),
210
- Object.keys(_).map((r) => {
211
- const a = _[r], s = B[r], k = I.has(r);
212
- return /* @__PURE__ */ t(
213
+ /* @__PURE__ */ n("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
214
+ /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: "Levels:" }),
215
+ Object.keys($).map((r) => {
216
+ const a = $[r], s = B[r], k = I.has(r);
217
+ return /* @__PURE__ */ n(
213
218
  "button",
214
219
  {
215
220
  onClick: () => ee(r),
@@ -221,7 +226,7 @@ const _ = {
221
226
  borderRadius: "4px",
222
227
  border: "none",
223
228
  background: k ? a.bg : "transparent",
224
- color: k ? a.color : "var(--text-muted, #666)",
229
+ color: k ? a.color : "var(--nice-text-muted, #666)",
225
230
  cursor: "pointer",
226
231
  fontSize: "11px",
227
232
  opacity: k ? 1 : 0.5
@@ -241,15 +246,15 @@ const _ = {
241
246
  "input",
242
247
  {
243
248
  type: "text",
244
- value: l,
249
+ value: c,
245
250
  onChange: (r) => g(r.target.value),
246
251
  placeholder: "Filter results...",
247
252
  style: {
248
253
  padding: "4px 8px",
249
254
  borderRadius: "4px",
250
- border: "1px solid var(--border-color, #444)",
251
- background: "var(--bg-elevated, #1e1e1e)",
252
- color: "var(--bg-primary, #fff)",
255
+ border: "1px solid var(--nice-border-color, #444)",
256
+ background: "var(--nice-bg-elevated, #1e1e1e)",
257
+ color: "var(--nice-bg-primary, #fff)",
253
258
  fontSize: "11px",
254
259
  width: "150px"
255
260
  }
@@ -259,32 +264,32 @@ const _ = {
259
264
  ]
260
265
  }
261
266
  ),
262
- /* @__PURE__ */ t("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
263
- /* @__PURE__ */ t(
267
+ /* @__PURE__ */ n("div", { style: { flex: 1, display: "flex", overflow: "hidden" }, children: [
268
+ /* @__PURE__ */ n(
264
269
  "div",
265
270
  {
266
271
  style: {
267
272
  width: "220px",
268
- borderRight: "1px solid var(--border-color, #333)",
273
+ borderRight: "1px solid var(--nice-border-color, #333)",
269
274
  display: "flex",
270
275
  flexDirection: "column",
271
276
  overflow: "hidden"
272
277
  },
273
278
  children: [
274
- /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
279
+ /* @__PURE__ */ n("div", { style: { flex: 1, overflow: "auto", padding: "12px" }, children: [
275
280
  /* @__PURE__ */ e(
276
281
  "h4",
277
282
  {
278
283
  style: {
279
284
  margin: "0 0 8px 0",
280
285
  fontSize: "11px",
281
- color: "var(--text-muted, #888)",
286
+ color: "var(--nice-text-muted, #888)",
282
287
  textTransform: "uppercase"
283
288
  },
284
289
  children: "Log Streams"
285
290
  }
286
291
  ),
287
- w.map((r) => /* @__PURE__ */ t(
292
+ h.map((r) => /* @__PURE__ */ n(
288
293
  "label",
289
294
  {
290
295
  style: {
@@ -320,13 +325,13 @@ const _ = {
320
325
  },
321
326
  r.id
322
327
  )),
323
- w.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--text-muted, #666)", fontSize: "11px" }, children: "No streams discovered" })
328
+ h.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--nice-text-muted, #666)", fontSize: "11px" }, children: "No streams discovered" })
324
329
  ] }),
325
- /* @__PURE__ */ t(
330
+ /* @__PURE__ */ n(
326
331
  "div",
327
332
  {
328
333
  style: {
329
- borderTop: "1px solid var(--border-color, #333)",
334
+ borderTop: "1px solid var(--nice-border-color, #333)",
330
335
  padding: "12px",
331
336
  maxHeight: "200px",
332
337
  overflow: "auto"
@@ -338,13 +343,13 @@ const _ = {
338
343
  style: {
339
344
  margin: "0 0 8px 0",
340
345
  fontSize: "11px",
341
- color: "var(--text-muted, #888)",
346
+ color: "var(--nice-text-muted, #888)",
342
347
  textTransform: "uppercase"
343
348
  },
344
349
  children: "Saved Queries"
345
350
  }
346
351
  ),
347
- A.map((r) => /* @__PURE__ */ t(
352
+ A.map((r) => /* @__PURE__ */ n(
348
353
  "div",
349
354
  {
350
355
  style: {
@@ -353,7 +358,7 @@ const _ = {
353
358
  gap: "8px",
354
359
  padding: "6px 8px",
355
360
  marginBottom: "4px",
356
- background: "var(--bg-elevated, #252525)",
361
+ background: "var(--nice-bg-elevated, #252525)",
357
362
  borderRadius: "4px",
358
363
  cursor: "pointer",
359
364
  fontSize: "11px"
@@ -376,12 +381,12 @@ const _ = {
376
381
  "button",
377
382
  {
378
383
  onClick: (a) => {
379
- a.stopPropagation(), V(r.id);
384
+ a.stopPropagation(), F(r.id);
380
385
  },
381
386
  style: {
382
387
  background: "none",
383
388
  border: "none",
384
- color: "var(--text-muted, #666)",
389
+ color: "var(--nice-text-muted, #666)",
385
390
  cursor: "pointer",
386
391
  fontSize: "10px"
387
392
  },
@@ -392,97 +397,103 @@ const _ = {
392
397
  },
393
398
  r.id
394
399
  )),
395
- A.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--text-muted, #666)", fontSize: "11px" }, children: "No saved queries" })
400
+ A.length === 0 && /* @__PURE__ */ e("div", { style: { color: "var(--nice-text-muted, #666)", fontSize: "11px" }, children: "No saved queries" })
396
401
  ]
397
402
  }
398
403
  )
399
404
  ]
400
405
  }
401
406
  ),
402
- /* @__PURE__ */ t("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
403
- /* @__PURE__ */ t("div", { style: { display: "flex", borderBottom: "1px solid var(--border-color, #333)" }, children: [
404
- [
405
- { id: "logs", label: `📜 Logs (${d.length})` },
406
- { id: "patterns", label: `đŸ”Ŧ Patterns (${b.length})` }
407
- ].map((r) => /* @__PURE__ */ e(
408
- "button",
409
- {
410
- onClick: () => c(r.id),
411
- style: {
412
- padding: "10px 20px",
413
- border: "none",
414
- background: x === r.id ? "var(--bg-elevated, #1e1e1e)" : "transparent",
415
- color: x === r.id ? "var(--bg-primary, #fff)" : "var(--text-muted, #888)",
416
- cursor: "pointer",
417
- fontSize: "12px",
418
- borderBottom: x === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
419
- },
420
- children: r.label
421
- },
422
- r.id
423
- )),
424
- /* @__PURE__ */ e("div", { style: { flex: 1 } }),
425
- /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", padding: "8px" }, children: [
426
- /* @__PURE__ */ e(
427
- "button",
428
- {
429
- onClick: () => z("json"),
430
- style: {
431
- padding: "4px 8px",
432
- borderRadius: "4px",
433
- border: "none",
434
- background: "var(--bg-tertiary, #333)",
435
- color: "var(--bg-primary, #fff)",
436
- cursor: "pointer",
437
- fontSize: "10px"
438
- },
439
- children: "JSON"
440
- }
441
- ),
442
- /* @__PURE__ */ e(
443
- "button",
444
- {
445
- onClick: () => z("csv"),
446
- style: {
447
- padding: "4px 8px",
448
- borderRadius: "4px",
449
- border: "none",
450
- background: "var(--bg-tertiary, #333)",
451
- color: "var(--bg-primary, #fff)",
452
- cursor: "pointer",
453
- fontSize: "10px"
407
+ /* @__PURE__ */ n("div", { style: { flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }, children: [
408
+ /* @__PURE__ */ n(
409
+ "div",
410
+ {
411
+ style: { display: "flex", borderBottom: "1px solid var(--nice-border-color, #333)" },
412
+ children: [
413
+ [
414
+ { id: "logs", label: `📜 Logs (${l.length})` },
415
+ { id: "patterns", label: `đŸ”Ŧ Patterns (${y.length})` }
416
+ ].map((r) => /* @__PURE__ */ e(
417
+ "button",
418
+ {
419
+ onClick: () => p(r.id),
420
+ style: {
421
+ padding: "10px 20px",
422
+ border: "none",
423
+ background: u === r.id ? "var(--nice-bg-elevated, #1e1e1e)" : "transparent",
424
+ color: u === r.id ? "var(--nice-bg-primary, #fff)" : "var(--nice-text-muted, #888)",
425
+ cursor: "pointer",
426
+ fontSize: "12px",
427
+ borderBottom: u === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
428
+ },
429
+ children: r.label
454
430
  },
455
- children: "CSV"
456
- }
457
- )
458
- ] })
459
- ] }),
460
- x === "logs" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
461
- d.map((r) => {
462
- const a = _[r.level], s = m.has(r.id);
463
- return /* @__PURE__ */ t(
431
+ r.id
432
+ )),
433
+ /* @__PURE__ */ e("div", { style: { flex: 1 } }),
434
+ /* @__PURE__ */ n("div", { style: { display: "flex", gap: "8px", padding: "8px" }, children: [
435
+ /* @__PURE__ */ e(
436
+ "button",
437
+ {
438
+ onClick: () => z("json"),
439
+ style: {
440
+ padding: "4px 8px",
441
+ borderRadius: "4px",
442
+ border: "none",
443
+ background: "var(--nice-bg-tertiary, #333)",
444
+ color: "var(--nice-bg-primary, #fff)",
445
+ cursor: "pointer",
446
+ fontSize: "10px"
447
+ },
448
+ children: "JSON"
449
+ }
450
+ ),
451
+ /* @__PURE__ */ e(
452
+ "button",
453
+ {
454
+ onClick: () => z("csv"),
455
+ style: {
456
+ padding: "4px 8px",
457
+ borderRadius: "4px",
458
+ border: "none",
459
+ background: "var(--nice-bg-tertiary, #333)",
460
+ color: "var(--nice-bg-primary, #fff)",
461
+ cursor: "pointer",
462
+ fontSize: "10px"
463
+ },
464
+ children: "CSV"
465
+ }
466
+ )
467
+ ] })
468
+ ]
469
+ }
470
+ ),
471
+ u === "logs" && /* @__PURE__ */ n("div", { style: { flex: 1, overflow: "auto", fontFamily: "monospace", fontSize: "12px" }, children: [
472
+ l.map((r) => {
473
+ const a = $[r.level], s = S.has(r.id);
474
+ return /* @__PURE__ */ n(
464
475
  "div",
465
476
  {
466
477
  style: { borderBottom: "1px solid var(--nice-bg-secondary, #252525)" },
467
478
  children: [
468
- /* @__PURE__ */ t(
479
+ /* @__PURE__ */ n(
469
480
  "div",
470
481
  {
471
- onClick: () => S(r.id),
482
+ onClick: () => w(r.id),
472
483
  style: {
473
484
  display: "flex",
474
485
  alignItems: "flex-start",
475
486
  gap: "8px",
476
487
  padding: "6px 12px",
477
488
  cursor: "pointer",
478
- background: s ? "var(--bg-elevated, #252525)" : "transparent"
489
+ background: s ? "var(--nice-bg-elevated, #252525)" : "transparent"
479
490
  },
480
491
  children: [
481
492
  /* @__PURE__ */ e(
482
493
  "span",
483
494
  {
484
495
  style: {
485
- color: "var(--text-muted, #666)",
496
+ color: "var(--nice-text-muted, #666)",
486
497
  fontSize: "10px",
487
498
  minWidth: "160px"
488
499
  },
@@ -505,11 +516,11 @@ const _ = {
505
516
  children: r.level.toUpperCase()
506
517
  }
507
518
  ),
508
- r.service && /* @__PURE__ */ t(
519
+ r.service && /* @__PURE__ */ n(
509
520
  "span",
510
521
  {
511
522
  style: {
512
- color: "var(--color-accent, #8b5cf6)",
523
+ color: "var(--nice-color-accent, #8b5cf6)",
513
524
  fontSize: "10px",
514
525
  minWidth: "80px"
515
526
  },
@@ -524,22 +535,22 @@ const _ = {
524
535
  "span",
525
536
  {
526
537
  style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
527
- dangerouslySetInnerHTML: { __html: te(r.message) }
538
+ dangerouslySetInnerHTML: { __html: ne(r.message) }
528
539
  }
529
540
  )
530
541
  ]
531
542
  }
532
543
  ),
533
- s && /* @__PURE__ */ t(
544
+ s && /* @__PURE__ */ n(
534
545
  "div",
535
546
  {
536
547
  style: {
537
548
  padding: "12px 12px 12px 200px",
538
- background: "var(--bg-elevated, #252525)",
539
- borderTop: "1px solid var(--border-color, #333)"
549
+ background: "var(--nice-bg-elevated, #252525)",
550
+ borderTop: "1px solid var(--nice-border-color, #333)"
540
551
  },
541
552
  children: [
542
- /* @__PURE__ */ t(
553
+ /* @__PURE__ */ n(
543
554
  "div",
544
555
  {
545
556
  style: {
@@ -549,13 +560,13 @@ const _ = {
549
560
  marginBottom: "12px"
550
561
  },
551
562
  children: [
552
- /* @__PURE__ */ t("div", { children: [
563
+ /* @__PURE__ */ n("div", { children: [
553
564
  /* @__PURE__ */ e(
554
565
  "div",
555
566
  {
556
567
  style: {
557
568
  fontSize: "10px",
558
- color: "var(--text-muted, #888)",
569
+ color: "var(--nice-text-muted, #888)",
559
570
  marginBottom: "2px"
560
571
  },
561
572
  children: "Source"
@@ -563,13 +574,13 @@ const _ = {
563
574
  ),
564
575
  /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.source })
565
576
  ] }),
566
- r.host && /* @__PURE__ */ t("div", { children: [
577
+ r.host && /* @__PURE__ */ n("div", { children: [
567
578
  /* @__PURE__ */ e(
568
579
  "div",
569
580
  {
570
581
  style: {
571
582
  fontSize: "10px",
572
- color: "var(--text-muted, #888)",
583
+ color: "var(--nice-text-muted, #888)",
573
584
  marginBottom: "2px"
574
585
  },
575
586
  children: "Host"
@@ -577,13 +588,13 @@ const _ = {
577
588
  ),
578
589
  /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.host })
579
590
  ] }),
580
- r.traceId && /* @__PURE__ */ t("div", { children: [
591
+ r.traceId && /* @__PURE__ */ n("div", { children: [
581
592
  /* @__PURE__ */ e(
582
593
  "div",
583
594
  {
584
595
  style: {
585
596
  fontSize: "10px",
586
- color: "var(--text-muted, #888)",
597
+ color: "var(--nice-text-muted, #888)",
587
598
  marginBottom: "2px"
588
599
  },
589
600
  children: "Trace ID"
@@ -594,43 +605,43 @@ const _ = {
594
605
  ]
595
606
  }
596
607
  ),
597
- Object.keys(r.attributes).length > 0 && /* @__PURE__ */ t("div", { style: { marginBottom: "12px" }, children: [
608
+ Object.keys(r.attributes).length > 0 && /* @__PURE__ */ n("div", { style: { marginBottom: "12px" }, children: [
598
609
  /* @__PURE__ */ e(
599
610
  "div",
600
611
  {
601
612
  style: {
602
613
  fontSize: "10px",
603
- color: "var(--text-muted, #888)",
614
+ color: "var(--nice-text-muted, #888)",
604
615
  marginBottom: "4px"
605
616
  },
606
617
  children: "Attributes"
607
618
  }
608
619
  ),
609
- /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([k, oe]) => /* @__PURE__ */ t(
620
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([k, te]) => /* @__PURE__ */ n(
610
621
  "span",
611
622
  {
612
623
  style: {
613
624
  padding: "2px 8px",
614
- background: "var(--bg-tertiary, #333)",
625
+ background: "var(--nice-bg-tertiary, #333)",
615
626
  borderRadius: "4px",
616
627
  fontSize: "10px"
617
628
  },
618
629
  children: [
619
630
  k,
620
631
  "=",
621
- String(oe)
632
+ String(te)
622
633
  ]
623
634
  },
624
635
  k
625
636
  )) })
626
637
  ] }),
627
- r.stackTrace && /* @__PURE__ */ t("div", { children: [
638
+ r.stackTrace && /* @__PURE__ */ n("div", { children: [
628
639
  /* @__PURE__ */ e(
629
640
  "div",
630
641
  {
631
642
  style: {
632
643
  fontSize: "10px",
633
- color: "var(--text-muted, #888)",
644
+ color: "var(--nice-text-muted, #888)",
634
645
  marginBottom: "4px"
635
646
  },
636
647
  children: "Stack Trace"
@@ -642,28 +653,28 @@ const _ = {
642
653
  style: {
643
654
  margin: 0,
644
655
  padding: "8px",
645
- background: "var(--bg-elevated, #1e1e1e)",
656
+ background: "var(--nice-bg-elevated, #1e1e1e)",
646
657
  borderRadius: "4px",
647
658
  fontSize: "10px",
648
659
  overflow: "auto",
649
660
  maxHeight: "200px",
650
- color: "var(--color-error, #ef4444)"
661
+ color: "var(--nice-color-error, #ef4444)"
651
662
  },
652
663
  children: r.stackTrace
653
664
  }
654
665
  )
655
666
  ] }),
656
- /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
667
+ /* @__PURE__ */ n("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
657
668
  /* @__PURE__ */ e(
658
669
  "button",
659
670
  {
660
- onClick: () => W(r),
671
+ onClick: () => N(r),
661
672
  style: {
662
673
  padding: "4px 12px",
663
674
  borderRadius: "4px",
664
675
  border: "none",
665
- background: "var(--color-primary, #3b82f6)",
666
- color: "var(--bg-primary, #fff)",
676
+ background: "var(--nice-color-primary, #3b82f6)",
677
+ color: "var(--nice-bg-primary, #fff)",
667
678
  cursor: "pointer",
668
679
  fontSize: "10px"
669
680
  },
@@ -678,8 +689,8 @@ const _ = {
678
689
  padding: "4px 12px",
679
690
  borderRadius: "4px",
680
691
  border: "none",
681
- background: "var(--bg-tertiary, #333)",
682
- color: "var(--bg-primary, #fff)",
692
+ background: "var(--nice-bg-tertiary, #333)",
693
+ color: "var(--nice-bg-primary, #fff)",
683
694
  cursor: "pointer",
684
695
  fontSize: "10px"
685
696
  },
@@ -695,20 +706,28 @@ const _ = {
695
706
  r.id
696
707
  );
697
708
  }),
698
- d.length === 0 && !v && /* @__PURE__ */ t(
709
+ l.length === 0 && !v && /* @__PURE__ */ n(
699
710
  "div",
700
711
  {
701
- style: { padding: "48px", textAlign: "center", color: "var(--text-muted, #666)" },
712
+ style: {
713
+ padding: "48px",
714
+ textAlign: "center",
715
+ color: "var(--nice-text-muted, #666)"
716
+ },
702
717
  children: [
703
718
  /* @__PURE__ */ e("span", { style: { fontSize: "48px" }, children: "📭" }),
704
719
  /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: "No logs match your query" })
705
720
  ]
706
721
  }
707
722
  ),
708
- v && /* @__PURE__ */ t(
723
+ v && /* @__PURE__ */ n(
709
724
  "div",
710
725
  {
711
- style: { padding: "48px", textAlign: "center", color: "var(--text-muted, #666)" },
726
+ style: {
727
+ padding: "48px",
728
+ textAlign: "center",
729
+ color: "var(--nice-text-muted, #666)"
730
+ },
712
731
  children: [
713
732
  /* @__PURE__ */ e("span", { style: { fontSize: "48px" }, children: "âŗ" }),
714
733
  /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: "Loading logs..." })
@@ -716,21 +735,21 @@ const _ = {
716
735
  }
717
736
  )
718
737
  ] }),
719
- x === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
720
- b.map((r) => {
721
- const a = _[r.level];
722
- return /* @__PURE__ */ t(
738
+ u === "patterns" && /* @__PURE__ */ n("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
739
+ y.map((r) => {
740
+ const a = $[r.level];
741
+ return /* @__PURE__ */ n(
723
742
  "div",
724
743
  {
725
744
  style: {
726
745
  marginBottom: "12px",
727
746
  padding: "16px",
728
- background: "var(--bg-elevated, #252525)",
747
+ background: "var(--nice-bg-elevated, #252525)",
729
748
  borderRadius: "8px",
730
749
  borderLeft: `3px solid ${a.color}`
731
750
  },
732
751
  children: [
733
- /* @__PURE__ */ t(
752
+ /* @__PURE__ */ n(
734
753
  "div",
735
754
  {
736
755
  style: {
@@ -741,12 +760,12 @@ const _ = {
741
760
  },
742
761
  children: [
743
762
  /* @__PURE__ */ e("span", { style: { fontFamily: "monospace", fontSize: "12px", fontWeight: 500 }, children: r.pattern }),
744
- /* @__PURE__ */ t(
763
+ /* @__PURE__ */ n(
745
764
  "span",
746
765
  {
747
766
  style: {
748
767
  padding: "2px 8px",
749
- background: "var(--bg-tertiary, #333)",
768
+ background: "var(--nice-bg-tertiary, #333)",
750
769
  borderRadius: "4px",
751
770
  fontSize: "11px"
752
771
  },
@@ -759,7 +778,7 @@ const _ = {
759
778
  ]
760
779
  }
761
780
  ),
762
- /* @__PURE__ */ t("div", { style: { fontSize: "11px", color: "var(--text-muted, #888)" }, children: [
781
+ /* @__PURE__ */ n("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
763
782
  "Sample: ",
764
783
  r.samples[0]
765
784
  ] })
@@ -768,17 +787,21 @@ const _ = {
768
787
  r.id
769
788
  );
770
789
  }),
771
- b.length === 0 && /* @__PURE__ */ e(
790
+ y.length === 0 && /* @__PURE__ */ e(
772
791
  "div",
773
792
  {
774
- style: { padding: "48px", textAlign: "center", color: "var(--text-muted, #666)" },
793
+ style: {
794
+ padding: "48px",
795
+ textAlign: "center",
796
+ color: "var(--nice-text-muted, #666)"
797
+ },
775
798
  children: /* @__PURE__ */ e("p", { children: "No patterns detected. Run a query first." })
776
799
  }
777
800
  )
778
801
  ] })
779
802
  ] })
780
803
  ] }),
781
- o && /* @__PURE__ */ e(
804
+ t && /* @__PURE__ */ e(
782
805
  "div",
783
806
  {
784
807
  style: {
@@ -790,12 +813,12 @@ const _ = {
790
813
  justifyContent: "center",
791
814
  zIndex: 1e3
792
815
  },
793
- children: /* @__PURE__ */ t(
816
+ children: /* @__PURE__ */ n(
794
817
  "div",
795
818
  {
796
819
  style: {
797
820
  width: "400px",
798
- background: "var(--bg-elevated, #252525)",
821
+ background: "var(--nice-bg-elevated, #252525)",
799
822
  borderRadius: "12px",
800
823
  padding: "24px"
801
824
  },
@@ -805,32 +828,32 @@ const _ = {
805
828
  "input",
806
829
  {
807
830
  type: "text",
808
- value: i,
831
+ value: o,
809
832
  onChange: (r) => f(r.target.value),
810
833
  placeholder: "Query name...",
811
834
  style: {
812
835
  width: "100%",
813
836
  padding: "10px",
814
837
  borderRadius: "8px",
815
- border: "1px solid var(--border-color, #444)",
816
- background: "var(--bg-elevated, #1e1e1e)",
817
- color: "var(--bg-primary, #fff)",
838
+ border: "1px solid var(--nice-border-color, #444)",
839
+ background: "var(--nice-bg-elevated, #1e1e1e)",
840
+ color: "var(--nice-bg-primary, #fff)",
818
841
  fontSize: "13px",
819
842
  marginBottom: "16px"
820
843
  }
821
844
  }
822
845
  ),
823
- /* @__PURE__ */ t("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px" }, children: [
846
+ /* @__PURE__ */ n("div", { style: { display: "flex", justifyContent: "flex-end", gap: "8px" }, children: [
824
847
  /* @__PURE__ */ e(
825
848
  "button",
826
849
  {
827
- onClick: () => n(!1),
850
+ onClick: () => i(!1),
828
851
  style: {
829
852
  padding: "8px 16px",
830
853
  borderRadius: "6px",
831
854
  border: "none",
832
- background: "var(--bg-tertiary, #333)",
833
- color: "var(--bg-primary, #fff)",
855
+ background: "var(--nice-bg-tertiary, #333)",
856
+ color: "var(--nice-bg-primary, #fff)",
834
857
  cursor: "pointer"
835
858
  },
836
859
  children: "Cancel"
@@ -844,8 +867,8 @@ const _ = {
844
867
  padding: "8px 16px",
845
868
  borderRadius: "6px",
846
869
  border: "none",
847
- background: "var(--color-primary, #3b82f6)",
848
- color: "var(--bg-primary, #fff)",
870
+ background: "var(--nice-color-primary, #3b82f6)",
871
+ color: "var(--nice-bg-primary, #fff)",
849
872
  cursor: "pointer"
850
873
  },
851
874
  children: "Save"
@@ -860,11 +883,11 @@ const _ = {
860
883
  ]
861
884
  }
862
885
  );
863
- }, ie = {
864
- critical: { color: "var(--color-error, #ef4444)", icon: "🔴" },
865
- warning: { color: "var(--color-warning, #f59e0b)", icon: "🟡" },
866
- info: { color: "var(--color-primary, #3b82f6)", icon: "đŸ”ĩ" }
867
- }, ae = [
886
+ }, de = {
887
+ critical: { color: "var(--nice-color-error, #ef4444)", icon: "🔴" },
888
+ warning: { color: "var(--nice-color-warning, #f59e0b)", icon: "🟡" },
889
+ info: { color: "var(--nice-color-primary, #3b82f6)", icon: "đŸ”ĩ" }
890
+ }, le = [
868
891
  { from: "now-5m", to: "now", display: "Last 5 minutes" },
869
892
  { from: "now-15m", to: "now", display: "Last 15 minutes" },
870
893
  { from: "now-1h", to: "now", display: "Last 1 hour" },
@@ -874,35 +897,35 @@ const _ = {
874
897
  { from: "now-24h", to: "now", display: "Last 24 hours" },
875
898
  { from: "now-7d", to: "now", display: "Last 7 days" },
876
899
  { from: "now-30d", to: "now", display: "Last 30 days" }
877
- ], ce = ({
878
- dashboard: u,
879
- metrics: w,
900
+ ], ce = {}, se = ({
901
+ dashboard: d,
902
+ metrics: h = ce,
880
903
  alerts: T = [],
881
- timeRanges: v = ae,
904
+ timeRanges: v = le,
882
905
  onTimeRangeChange: A,
883
- onVariableChange: b,
906
+ onVariableChange: y,
884
907
  onPanelEdit: E,
885
- onPanelAdd: F,
886
- onPanelRemove: V,
908
+ onPanelAdd: V,
909
+ onPanelRemove: F,
887
910
  onPanelMove: U,
888
- onAlertAcknowledge: W,
911
+ onAlertAcknowledge: N,
889
912
  onAlertSilence: z,
890
913
  onQueryExecute: O,
891
914
  onDashboardSave: P,
892
915
  onRefresh: C,
893
- isEditing: y = !1,
894
- onEditModeToggle: j,
916
+ isEditing: m = !1,
917
+ onEditModeToggle: D,
895
918
  className: H,
896
- style: Q,
897
- testId: q,
919
+ style: M,
920
+ testId: Q,
898
921
  "data-testid": R
899
922
  }) => {
900
- const L = R ?? q, [N, $] = p(!1), [G, Z] = p(!0), [I, J] = p(null), m = T.filter((o) => o.status === "firing"), M = (o) => {
901
- var i, f, x;
902
- const n = (i = o.queries[0]) != null && i.expression ? w[o.queries[0].expression] : null;
903
- switch (o.type) {
923
+ const L = R ?? Q, [W, j] = x(!1), [q, Z] = x(!0), [I, J] = x(null), S = T.filter((t) => t.status === "firing"), G = (t) => {
924
+ var o, f, u;
925
+ const i = (o = t.queries[0]) != null && o.expression ? h[t.queries[0].expression] : null;
926
+ switch (t.type) {
904
927
  case "stat":
905
- return /* @__PURE__ */ t(
928
+ return /* @__PURE__ */ n(
906
929
  "div",
907
930
  {
908
931
  style: {
@@ -919,17 +942,27 @@ const _ = {
919
942
  style: {
920
943
  fontSize: "48px",
921
944
  fontWeight: 600,
922
- color: n ? D(n.currentValue, o.thresholds) : "var(--text-primary, #e0e0e0)"
945
+ color: i ? _(i.currentValue, t.thresholds) : "var(--nice-text-primary, #e0e0e0)"
923
946
  },
924
- children: (n == null ? void 0 : n.currentValue.toFixed(2)) ?? "-"
947
+ children: (i == null ? void 0 : i.currentValue.toFixed(2)) ?? "-"
925
948
  }
926
949
  ),
927
- (n == null ? void 0 : n.unit) && /* @__PURE__ */ e("div", { style: { fontSize: "14px", color: "var(--text-muted, #888)", marginTop: "4px" }, children: n.unit })
950
+ (i == null ? void 0 : i.unit) && /* @__PURE__ */ e(
951
+ "div",
952
+ {
953
+ style: {
954
+ fontSize: "14px",
955
+ color: "var(--nice-text-muted, #888)",
956
+ marginTop: "4px"
957
+ },
958
+ children: i.unit
959
+ }
960
+ )
928
961
  ]
929
962
  }
930
963
  );
931
964
  case "gauge": {
932
- const c = (n == null ? void 0 : n.currentValue) ?? 0, l = ((x = (f = o.thresholds) == null ? void 0 : f[o.thresholds.length - 1]) == null ? void 0 : x.value) ?? 100, g = Math.min(c / l * 100, 100);
965
+ const p = (i == null ? void 0 : i.currentValue) ?? 0, c = ((u = (f = t.thresholds) == null ? void 0 : f[t.thresholds.length - 1]) == null ? void 0 : u.value) ?? 100, g = Math.min(p / c * 100, 100);
933
966
  return /* @__PURE__ */ e(
934
967
  "div",
935
968
  {
@@ -940,7 +973,7 @@ const _ = {
940
973
  justifyContent: "center",
941
974
  height: "100%"
942
975
  },
943
- children: /* @__PURE__ */ t("svg", { viewBox: "0 0 100 60", style: { width: "100%", maxWidth: "200px" }, children: [
976
+ children: /* @__PURE__ */ n("svg", { viewBox: "0 0 100 60", style: { width: "100%", maxWidth: "200px" }, children: [
944
977
  /* @__PURE__ */ e(
945
978
  "path",
946
979
  {
@@ -955,7 +988,7 @@ const _ = {
955
988
  {
956
989
  d: "M 10 50 A 40 40 0 0 1 90 50",
957
990
  fill: "none",
958
- stroke: D(c, o.thresholds),
991
+ stroke: _(p, t.thresholds),
959
992
  strokeWidth: "8",
960
993
  strokeDasharray: `${g * 1.26} 126`
961
994
  }
@@ -969,7 +1002,7 @@ const _ = {
969
1002
  fill: "var(--nice-border, #e0e0e0)",
970
1003
  fontSize: "16",
971
1004
  fontWeight: "600",
972
- children: c.toFixed(1)
1005
+ children: p.toFixed(1)
973
1006
  }
974
1007
  )
975
1008
  ] })
@@ -977,17 +1010,17 @@ const _ = {
977
1010
  );
978
1011
  }
979
1012
  case "timeseries":
980
- return K(o, n);
1013
+ return K(t, i);
981
1014
  case "table":
982
- return /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ t("table", { style: { width: "100%", fontSize: "11px", borderCollapse: "collapse" }, children: [
983
- /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { style: { background: "var(--bg-elevated, #252525)" }, children: [
1015
+ return /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ n("table", { style: { width: "100%", fontSize: "11px", borderCollapse: "collapse" }, children: [
1016
+ /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ n("tr", { style: { background: "var(--nice-bg-elevated, #252525)" }, children: [
984
1017
  /* @__PURE__ */ e(
985
1018
  "th",
986
1019
  {
987
1020
  style: {
988
1021
  padding: "6px 8px",
989
1022
  textAlign: "left",
990
- borderBottom: "1px solid var(--border-color, #333)"
1023
+ borderBottom: "1px solid var(--nice-border-color, #333)"
991
1024
  },
992
1025
  children: "Time"
993
1026
  }
@@ -998,39 +1031,39 @@ const _ = {
998
1031
  style: {
999
1032
  padding: "6px 8px",
1000
1033
  textAlign: "right",
1001
- borderBottom: "1px solid var(--border-color, #333)"
1034
+ borderBottom: "1px solid var(--nice-border-color, #333)"
1002
1035
  },
1003
1036
  children: "Value"
1004
1037
  }
1005
1038
  )
1006
1039
  ] }) }),
1007
- /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((c, l) => /* @__PURE__ */ t("tr", { children: [
1040
+ /* @__PURE__ */ e("tbody", { children: i == null ? void 0 : i.values.slice(-10).reverse().map((p, c) => /* @__PURE__ */ n("tr", { children: [
1008
1041
  /* @__PURE__ */ e(
1009
1042
  "td",
1010
1043
  {
1011
1044
  style: {
1012
1045
  padding: "4px 8px",
1013
- borderBottom: "1px solid var(--border-color, #333)"
1046
+ borderBottom: "1px solid var(--nice-border-color, #333)"
1014
1047
  },
1015
- children: new Date(c.timestamp).toLocaleTimeString()
1048
+ children: new Date(p.timestamp).toLocaleTimeString()
1016
1049
  }
1017
1050
  ),
1018
- /* @__PURE__ */ t(
1051
+ /* @__PURE__ */ n(
1019
1052
  "td",
1020
1053
  {
1021
1054
  style: {
1022
1055
  padding: "4px 8px",
1023
- borderBottom: "1px solid var(--border-color, #333)",
1056
+ borderBottom: "1px solid var(--nice-border-color, #333)",
1024
1057
  textAlign: "right"
1025
1058
  },
1026
1059
  children: [
1027
- c.value.toFixed(2),
1060
+ p.value.toFixed(2),
1028
1061
  " ",
1029
- n.unit
1062
+ i.unit
1030
1063
  ]
1031
1064
  }
1032
1065
  )
1033
- ] }, l)) })
1066
+ ] }, c)) })
1034
1067
  ] }) });
1035
1068
  case "bar_gauge":
1036
1069
  return /* @__PURE__ */ e(
@@ -1043,11 +1076,11 @@ const _ = {
1043
1076
  flexDirection: "column",
1044
1077
  justifyContent: "center"
1045
1078
  },
1046
- children: o.queries.map((c, l) => {
1047
- var h, S;
1048
- const g = w[c.expression], d = (g == null ? void 0 : g.currentValue) ?? 0, B = ((S = (h = o.thresholds) == null ? void 0 : h[o.thresholds.length - 1]) == null ? void 0 : S.value) ?? 100;
1049
- return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
1050
- /* @__PURE__ */ t(
1079
+ children: t.queries.map((p, c) => {
1080
+ var b, w;
1081
+ const g = h[p.expression], l = (g == null ? void 0 : g.currentValue) ?? 0, B = ((w = (b = t.thresholds) == null ? void 0 : b[t.thresholds.length - 1]) == null ? void 0 : w.value) ?? 100;
1082
+ return /* @__PURE__ */ n("div", { style: { marginBottom: "8px" }, children: [
1083
+ /* @__PURE__ */ n(
1051
1084
  "div",
1052
1085
  {
1053
1086
  style: {
@@ -1057,8 +1090,8 @@ const _ = {
1057
1090
  marginBottom: "4px"
1058
1091
  },
1059
1092
  children: [
1060
- /* @__PURE__ */ e("span", { children: c.legendFormat ?? c.expression }),
1061
- /* @__PURE__ */ e("span", { children: d.toFixed(1) })
1093
+ /* @__PURE__ */ e("span", { children: p.legendFormat ?? p.expression }),
1094
+ /* @__PURE__ */ e("span", { children: l.toFixed(1) })
1062
1095
  ]
1063
1096
  }
1064
1097
  ),
@@ -1067,7 +1100,7 @@ const _ = {
1067
1100
  {
1068
1101
  style: {
1069
1102
  height: "16px",
1070
- background: "var(--bg-tertiary, #333)",
1103
+ background: "var(--nice-bg-tertiary, #333)",
1071
1104
  borderRadius: "4px",
1072
1105
  overflow: "hidden"
1073
1106
  },
@@ -1076,26 +1109,26 @@ const _ = {
1076
1109
  {
1077
1110
  style: {
1078
1111
  height: "100%",
1079
- width: `${d / B * 100}%`,
1080
- background: D(d, o.thresholds),
1112
+ width: `${l / B * 100}%`,
1113
+ background: _(l, t.thresholds),
1081
1114
  borderRadius: "4px"
1082
1115
  }
1083
1116
  }
1084
1117
  )
1085
1118
  }
1086
1119
  )
1087
- ] }, l);
1120
+ ] }, c);
1088
1121
  })
1089
1122
  }
1090
1123
  );
1091
1124
  case "text":
1092
- return /* @__PURE__ */ e("div", { style: { padding: "12px", fontSize: "12px", lineHeight: "1.6" }, children: o.description });
1125
+ return /* @__PURE__ */ e("div", { style: { padding: "12px", fontSize: "12px", lineHeight: "1.6" }, children: t.description });
1093
1126
  default:
1094
- return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--text-muted, #666)" }, children: "Unsupported panel type" });
1127
+ return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--nice-text-muted, #666)" }, children: "Unsupported panel type" });
1095
1128
  }
1096
- }, K = (o, n) => {
1097
- const i = (n == null ? void 0 : n.values) ?? [];
1098
- if (i.length === 0)
1129
+ }, K = (t, i) => {
1130
+ const o = (i == null ? void 0 : i.values) ?? [];
1131
+ if (o.length === 0)
1099
1132
  return /* @__PURE__ */ e(
1100
1133
  "div",
1101
1134
  {
@@ -1104,35 +1137,35 @@ const _ = {
1104
1137
  alignItems: "center",
1105
1138
  justifyContent: "center",
1106
1139
  height: "100%",
1107
- color: "var(--text-muted, #666)"
1140
+ color: "var(--nice-text-muted, #666)"
1108
1141
  },
1109
1142
  children: "No data"
1110
1143
  }
1111
1144
  );
1112
- const f = i.map((d) => d.value), x = Math.min(...f), l = Math.max(...f) - x || 1, g = i.map((d, B) => {
1113
- const h = B / (i.length - 1) * 100, S = 100 - (d.value - x) / l * 80;
1114
- return `${h},${S}`;
1145
+ const f = o.map((l) => l.value), u = Math.min(...f), c = Math.max(...f) - u || 1, g = o.map((l, B) => {
1146
+ const b = B / (o.length - 1) * 100, w = 100 - (l.value - u) / c * 80;
1147
+ return `${b},${w}`;
1115
1148
  }).join(" ");
1116
- return /* @__PURE__ */ t(
1149
+ return /* @__PURE__ */ n(
1117
1150
  "svg",
1118
1151
  {
1119
1152
  viewBox: "0 0 100 100",
1120
1153
  preserveAspectRatio: "none",
1121
1154
  style: { width: "100%", height: "100%" },
1122
1155
  children: [
1123
- [0, 25, 50, 75, 100].map((d) => /* @__PURE__ */ e(
1156
+ [0, 25, 50, 75, 100].map((l) => /* @__PURE__ */ e(
1124
1157
  "line",
1125
1158
  {
1126
1159
  x1: "0",
1127
- y1: d,
1160
+ y1: l,
1128
1161
  x2: "100",
1129
- y2: d,
1162
+ y2: l,
1130
1163
  stroke: "var(--nice-text, #333)",
1131
1164
  strokeWidth: "0.5"
1132
1165
  },
1133
- d
1166
+ l
1134
1167
  )),
1135
- o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e(
1168
+ t.chartType === "area" || t.chartType === "stacked_area" ? /* @__PURE__ */ e(
1136
1169
  "polygon",
1137
1170
  {
1138
1171
  points: `0,100 ${g} 100,100`,
@@ -1151,15 +1184,15 @@ const _ = {
1151
1184
  ]
1152
1185
  }
1153
1186
  );
1154
- }, D = (o, n) => {
1155
- if (!n || n.length === 0)
1156
- return "var(--color-primary, #3b82f6)";
1157
- for (let i = n.length - 1; i >= 0; i--)
1158
- if (o >= n[i].value)
1159
- return n[i].color;
1160
- return "var(--color-success, #22c55e)";
1187
+ }, _ = (t, i) => {
1188
+ if (!i || i.length === 0)
1189
+ return "var(--nice-color-primary, #3b82f6)";
1190
+ for (let o = i.length - 1; o >= 0; o--)
1191
+ if (t >= i[o].value)
1192
+ return i[o].color;
1193
+ return "var(--nice-color-success, #22c55e)";
1161
1194
  };
1162
- return /* @__PURE__ */ t(
1195
+ return /* @__PURE__ */ n(
1163
1196
  "div",
1164
1197
  {
1165
1198
  className: `nice-metrics-dashboard ${H || ""}`,
@@ -1167,13 +1200,13 @@ const _ = {
1167
1200
  display: "flex",
1168
1201
  flexDirection: "column",
1169
1202
  height: "100%",
1170
- background: "var(--bg-elevated, #1e1e1e)",
1171
- color: "var(--text-primary, #e0e0e0)",
1172
- ...Q
1203
+ background: "var(--nice-bg-elevated, #1e1e1e)",
1204
+ color: "var(--nice-text-primary, #e0e0e0)",
1205
+ ...M
1173
1206
  },
1174
1207
  "data-testid": L,
1175
1208
  children: [
1176
- /* @__PURE__ */ t(
1209
+ /* @__PURE__ */ n(
1177
1210
  "div",
1178
1211
  {
1179
1212
  style: {
@@ -1181,17 +1214,17 @@ const _ = {
1181
1214
  alignItems: "center",
1182
1215
  gap: "12px",
1183
1216
  padding: "12px 16px",
1184
- borderBottom: "1px solid var(--border-color, #333)",
1185
- background: "var(--bg-elevated, #252525)"
1217
+ borderBottom: "1px solid var(--nice-border-color, #333)",
1218
+ background: "var(--nice-bg-elevated, #252525)"
1186
1219
  },
1187
1220
  children: [
1188
1221
  /* @__PURE__ */ e("span", { style: { fontSize: "20px" }, children: "📊" }),
1189
- /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: u.name }),
1222
+ /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: d.name }),
1190
1223
  /* @__PURE__ */ e("div", { style: { flex: 1 } }),
1191
- m.length > 0 && /* @__PURE__ */ t(
1224
+ S.length > 0 && /* @__PURE__ */ n(
1192
1225
  "button",
1193
1226
  {
1194
- onClick: () => $(!0),
1227
+ onClick: () => j(!0),
1195
1228
  style: {
1196
1229
  display: "flex",
1197
1230
  alignItems: "center",
@@ -1200,35 +1233,35 @@ const _ = {
1200
1233
  borderRadius: "4px",
1201
1234
  border: "none",
1202
1235
  background: "var(--nice-danger-tint-15, #ef444422)",
1203
- color: "var(--color-error, #ef4444)",
1236
+ color: "var(--nice-color-error, #ef4444)",
1204
1237
  cursor: "pointer",
1205
1238
  fontSize: "12px"
1206
1239
  },
1207
1240
  children: [
1208
1241
  "🔴 ",
1209
- m.length,
1242
+ S.length,
1210
1243
  " Alert",
1211
- m.length !== 1 && "s"
1244
+ S.length !== 1 && "s"
1212
1245
  ]
1213
1246
  }
1214
1247
  ),
1215
1248
  /* @__PURE__ */ e(
1216
1249
  "select",
1217
1250
  {
1218
- value: u.timeRange.display,
1219
- onChange: (o) => {
1220
- const n = v.find((i) => i.display === o.target.value);
1221
- n && A(n);
1251
+ value: d.timeRange.display,
1252
+ onChange: (t) => {
1253
+ const i = v.find((o) => o.display === t.target.value);
1254
+ i && A(i);
1222
1255
  },
1223
1256
  style: {
1224
1257
  padding: "6px 12px",
1225
1258
  borderRadius: "4px",
1226
- border: "1px solid var(--border-color, #444)",
1227
- background: "var(--bg-elevated, #1e1e1e)",
1228
- color: "var(--bg-primary, #fff)",
1259
+ border: "1px solid var(--nice-border-color, #444)",
1260
+ background: "var(--nice-bg-elevated, #1e1e1e)",
1261
+ color: "var(--nice-bg-primary, #fff)",
1229
1262
  fontSize: "12px"
1230
1263
  },
1231
- children: v.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1264
+ children: v.map((t) => /* @__PURE__ */ e("option", { value: t.display, children: t.display }, t.display))
1232
1265
  }
1233
1266
  ),
1234
1267
  /* @__PURE__ */ e(
@@ -1239,25 +1272,25 @@ const _ = {
1239
1272
  padding: "6px 12px",
1240
1273
  borderRadius: "4px",
1241
1274
  border: "none",
1242
- background: "var(--bg-tertiary, #333)",
1243
- color: "var(--bg-primary, #fff)",
1275
+ background: "var(--nice-bg-tertiary, #333)",
1276
+ color: "var(--nice-bg-primary, #fff)",
1244
1277
  cursor: "pointer",
1245
1278
  fontSize: "12px"
1246
1279
  },
1247
1280
  children: "🔄 Refresh"
1248
1281
  }
1249
1282
  ),
1250
- y ? /* @__PURE__ */ t(Y, { children: [
1283
+ m ? /* @__PURE__ */ n(Y, { children: [
1251
1284
  /* @__PURE__ */ e(
1252
1285
  "button",
1253
1286
  {
1254
- onClick: F,
1287
+ onClick: V,
1255
1288
  style: {
1256
1289
  padding: "6px 12px",
1257
1290
  borderRadius: "4px",
1258
1291
  border: "none",
1259
- background: "var(--color-primary, #3b82f6)",
1260
- color: "var(--bg-primary, #fff)",
1292
+ background: "var(--nice-color-primary, #3b82f6)",
1293
+ color: "var(--nice-bg-primary, #fff)",
1261
1294
  cursor: "pointer",
1262
1295
  fontSize: "12px"
1263
1296
  },
@@ -1272,8 +1305,8 @@ const _ = {
1272
1305
  padding: "6px 12px",
1273
1306
  borderRadius: "4px",
1274
1307
  border: "none",
1275
- background: "var(--color-success, #22c55e)",
1276
- color: "var(--bg-primary, #fff)",
1308
+ background: "var(--nice-color-success, #22c55e)",
1309
+ color: "var(--nice-bg-primary, #fff)",
1277
1310
  cursor: "pointer",
1278
1311
  fontSize: "12px"
1279
1312
  },
@@ -1281,26 +1314,26 @@ const _ = {
1281
1314
  }
1282
1315
  )
1283
1316
  ] }) : null,
1284
- j && /* @__PURE__ */ e(
1317
+ D && /* @__PURE__ */ e(
1285
1318
  "button",
1286
1319
  {
1287
- onClick: j,
1320
+ onClick: D,
1288
1321
  style: {
1289
1322
  padding: "6px 12px",
1290
1323
  borderRadius: "4px",
1291
1324
  border: "none",
1292
- background: y ? "var(--color-warning, #f59e0b)" : "var(--bg-tertiary, #333)",
1293
- color: "var(--bg-primary, #fff)",
1325
+ background: m ? "var(--nice-color-warning, #f59e0b)" : "var(--nice-bg-tertiary, #333)",
1326
+ color: "var(--nice-bg-primary, #fff)",
1294
1327
  cursor: "pointer",
1295
1328
  fontSize: "12px"
1296
1329
  },
1297
- children: y ? "✓ Done" : "✏ī¸ Edit"
1330
+ children: m ? "✓ Done" : "✏ī¸ Edit"
1298
1331
  }
1299
1332
  )
1300
1333
  ]
1301
1334
  }
1302
1335
  ),
1303
- u.variables.length > 0 && G && /* @__PURE__ */ e(
1336
+ d.variables.length > 0 && q && /* @__PURE__ */ e(
1304
1337
  "div",
1305
1338
  {
1306
1339
  style: {
@@ -1308,28 +1341,28 @@ const _ = {
1308
1341
  flexWrap: "wrap",
1309
1342
  gap: "12px",
1310
1343
  padding: "12px 16px",
1311
- borderBottom: "1px solid var(--border-color, #333)",
1312
- background: "var(--bg-elevated, #252525)"
1344
+ borderBottom: "1px solid var(--nice-border-color, #333)",
1345
+ background: "var(--nice-bg-elevated, #252525)"
1313
1346
  },
1314
- children: u.variables.map((o) => {
1315
- var n;
1316
- return /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1317
- /* @__PURE__ */ t("label", { style: { fontSize: "11px", color: "var(--text-muted, #888)" }, children: [
1318
- o.label,
1347
+ children: d.variables.map((t) => {
1348
+ var i;
1349
+ return /* @__PURE__ */ n("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1350
+ /* @__PURE__ */ n("label", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
1351
+ t.label,
1319
1352
  ":"
1320
1353
  ] }),
1321
- o.type === "textbox" ? /* @__PURE__ */ e(
1354
+ t.type === "textbox" ? /* @__PURE__ */ e(
1322
1355
  "input",
1323
1356
  {
1324
1357
  type: "text",
1325
- value: o.current,
1326
- onChange: (i) => b(o.id, i.target.value),
1358
+ value: t.current,
1359
+ onChange: (o) => y(t.id, o.target.value),
1327
1360
  style: {
1328
1361
  padding: "4px 8px",
1329
1362
  borderRadius: "4px",
1330
- border: "1px solid var(--border-color, #444)",
1331
- background: "var(--bg-elevated, #1e1e1e)",
1332
- color: "var(--bg-primary, #fff)",
1363
+ border: "1px solid var(--nice-border-color, #444)",
1364
+ background: "var(--nice-bg-elevated, #1e1e1e)",
1365
+ color: "var(--nice-bg-primary, #fff)",
1333
1366
  fontSize: "11px",
1334
1367
  width: "120px"
1335
1368
  }
@@ -1337,20 +1370,20 @@ const _ = {
1337
1370
  ) : /* @__PURE__ */ e(
1338
1371
  "select",
1339
1372
  {
1340
- value: o.current,
1341
- onChange: (i) => b(o.id, i.target.value),
1373
+ value: t.current,
1374
+ onChange: (o) => y(t.id, o.target.value),
1342
1375
  style: {
1343
1376
  padding: "4px 8px",
1344
1377
  borderRadius: "4px",
1345
- border: "1px solid var(--border-color, #444)",
1346
- background: "var(--bg-elevated, #1e1e1e)",
1347
- color: "var(--bg-primary, #fff)",
1378
+ border: "1px solid var(--nice-border-color, #444)",
1379
+ background: "var(--nice-bg-elevated, #1e1e1e)",
1380
+ color: "var(--nice-bg-primary, #fff)",
1348
1381
  fontSize: "11px"
1349
1382
  },
1350
- children: (n = o.options) == null ? void 0 : n.map((i) => /* @__PURE__ */ e("option", { value: i, children: i }, i))
1383
+ children: (i = t.options) == null ? void 0 : i.map((o) => /* @__PURE__ */ e("option", { value: o, children: o }, o))
1351
1384
  }
1352
1385
  )
1353
- ] }, o.id);
1386
+ ] }, t.id);
1354
1387
  })
1355
1388
  }
1356
1389
  ),
@@ -1363,42 +1396,42 @@ const _ = {
1363
1396
  gridAutoRows: "minmax(100px, auto)",
1364
1397
  gap: "16px"
1365
1398
  },
1366
- children: u.panels.map((o) => /* @__PURE__ */ t(
1399
+ children: d.panels.map((t) => /* @__PURE__ */ n(
1367
1400
  "div",
1368
1401
  {
1369
1402
  style: {
1370
- gridColumn: `span ${o.position.w}`,
1371
- gridRow: `span ${o.position.h}`,
1372
- background: "var(--bg-elevated, #252525)",
1403
+ gridColumn: `span ${t.position.w}`,
1404
+ gridRow: `span ${t.position.h}`,
1405
+ background: "var(--nice-bg-elevated, #252525)",
1373
1406
  borderRadius: "8px",
1374
1407
  overflow: "hidden",
1375
- border: I === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--border-color, #333)"
1408
+ border: I === t.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1376
1409
  },
1377
1410
  children: [
1378
- /* @__PURE__ */ t(
1411
+ /* @__PURE__ */ n(
1379
1412
  "div",
1380
1413
  {
1381
1414
  style: {
1382
1415
  display: "flex",
1383
1416
  alignItems: "center",
1384
1417
  padding: "8px 12px",
1385
- borderBottom: "1px solid var(--border-color, #333)",
1386
- background: "var(--bg-elevated, #1e1e1e)"
1418
+ borderBottom: "1px solid var(--nice-border-color, #333)",
1419
+ background: "var(--nice-bg-elevated, #1e1e1e)"
1387
1420
  },
1388
1421
  children: [
1389
- /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
1390
- y && /* @__PURE__ */ t(Y, { children: [
1422
+ /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: t.title }),
1423
+ m && /* @__PURE__ */ n(Y, { children: [
1391
1424
  /* @__PURE__ */ e(
1392
1425
  "button",
1393
1426
  {
1394
- onClick: () => E(o),
1427
+ onClick: () => E(t),
1395
1428
  style: {
1396
1429
  padding: "2px 6px",
1397
1430
  marginLeft: "4px",
1398
1431
  borderRadius: "4px",
1399
1432
  border: "none",
1400
- background: "var(--bg-tertiary, #333)",
1401
- color: "var(--text-muted, #888)",
1433
+ background: "var(--nice-bg-tertiary, #333)",
1434
+ color: "var(--nice-text-muted, #888)",
1402
1435
  cursor: "pointer",
1403
1436
  fontSize: "10px"
1404
1437
  },
@@ -1408,14 +1441,14 @@ const _ = {
1408
1441
  /* @__PURE__ */ e(
1409
1442
  "button",
1410
1443
  {
1411
- onClick: () => V(o.id),
1444
+ onClick: () => F(t.id),
1412
1445
  style: {
1413
1446
  padding: "2px 6px",
1414
1447
  marginLeft: "4px",
1415
1448
  borderRadius: "4px",
1416
1449
  border: "none",
1417
- background: "var(--color-error, #ef4444)",
1418
- color: "var(--bg-primary, #fff)",
1450
+ background: "var(--nice-color-error, #ef4444)",
1451
+ color: "var(--nice-bg-primary, #fff)",
1419
1452
  cursor: "pointer",
1420
1453
  fontSize: "10px"
1421
1454
  },
@@ -1426,14 +1459,14 @@ const _ = {
1426
1459
  ]
1427
1460
  }
1428
1461
  ),
1429
- /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: M(o) })
1462
+ /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: G(t) })
1430
1463
  ]
1431
1464
  },
1432
- o.id
1465
+ t.id
1433
1466
  ))
1434
1467
  }
1435
1468
  ) }),
1436
- N && /* @__PURE__ */ e(
1469
+ W && /* @__PURE__ */ e(
1437
1470
  "div",
1438
1471
  {
1439
1472
  style: {
@@ -1445,18 +1478,18 @@ const _ = {
1445
1478
  justifyContent: "center",
1446
1479
  zIndex: 1e3
1447
1480
  },
1448
- children: /* @__PURE__ */ t(
1481
+ children: /* @__PURE__ */ n(
1449
1482
  "div",
1450
1483
  {
1451
1484
  style: {
1452
1485
  width: "600px",
1453
1486
  maxHeight: "80vh",
1454
- background: "var(--bg-elevated, #252525)",
1487
+ background: "var(--nice-bg-elevated, #252525)",
1455
1488
  borderRadius: "12px",
1456
1489
  overflow: "hidden"
1457
1490
  },
1458
1491
  children: [
1459
- /* @__PURE__ */ t(
1492
+ /* @__PURE__ */ n(
1460
1493
  "div",
1461
1494
  {
1462
1495
  style: {
@@ -1464,22 +1497,22 @@ const _ = {
1464
1497
  justifyContent: "space-between",
1465
1498
  alignItems: "center",
1466
1499
  padding: "16px",
1467
- borderBottom: "1px solid var(--border-color, #333)"
1500
+ borderBottom: "1px solid var(--nice-border-color, #333)"
1468
1501
  },
1469
1502
  children: [
1470
- /* @__PURE__ */ t("span", { style: { fontWeight: 600 }, children: [
1503
+ /* @__PURE__ */ n("span", { style: { fontWeight: 600 }, children: [
1471
1504
  "Active Alerts (",
1472
- m.length,
1505
+ S.length,
1473
1506
  ")"
1474
1507
  ] }),
1475
1508
  /* @__PURE__ */ e(
1476
1509
  "button",
1477
1510
  {
1478
- onClick: () => $(!1),
1511
+ onClick: () => j(!1),
1479
1512
  style: {
1480
1513
  background: "none",
1481
1514
  border: "none",
1482
- color: "var(--text-muted, #888)",
1515
+ color: "var(--nice-text-muted, #888)",
1483
1516
  cursor: "pointer",
1484
1517
  fontSize: "18px"
1485
1518
  },
@@ -1489,19 +1522,19 @@ const _ = {
1489
1522
  ]
1490
1523
  }
1491
1524
  ),
1492
- /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1493
- T.map((o) => {
1494
- const n = ie[o.severity];
1495
- return /* @__PURE__ */ t(
1525
+ /* @__PURE__ */ n("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1526
+ T.map((t) => {
1527
+ const i = de[t.severity];
1528
+ return /* @__PURE__ */ n(
1496
1529
  "div",
1497
1530
  {
1498
1531
  style: {
1499
1532
  padding: "16px",
1500
- borderBottom: "1px solid var(--border-color, #333)",
1501
- borderLeft: `4px solid ${n.color}`
1533
+ borderBottom: "1px solid var(--nice-border-color, #333)",
1534
+ borderLeft: `4px solid ${i.color}`
1502
1535
  },
1503
1536
  children: [
1504
- /* @__PURE__ */ t(
1537
+ /* @__PURE__ */ n(
1505
1538
  "div",
1506
1539
  {
1507
1540
  style: {
@@ -1511,8 +1544,8 @@ const _ = {
1511
1544
  marginBottom: "8px"
1512
1545
  },
1513
1546
  children: [
1514
- /* @__PURE__ */ e("span", { children: n.icon }),
1515
- /* @__PURE__ */ e("span", { style: { fontWeight: 500 }, children: o.name }),
1547
+ /* @__PURE__ */ e("span", { children: i.icon }),
1548
+ /* @__PURE__ */ e("span", { style: { fontWeight: 500 }, children: t.name }),
1516
1549
  /* @__PURE__ */ e(
1517
1550
  "span",
1518
1551
  {
@@ -1520,11 +1553,11 @@ const _ = {
1520
1553
  marginLeft: "auto",
1521
1554
  padding: "2px 8px",
1522
1555
  borderRadius: "4px",
1523
- background: o.status === "firing" ? "var(--nice-danger-tint-15, #ef444422)" : "var(--nice-success-tint-15, #22c55e22)",
1524
- color: o.status === "firing" ? "var(--color-error, #ef4444)" : "var(--color-success, #22c55e)",
1556
+ background: t.status === "firing" ? "var(--nice-danger-tint-15, #ef444422)" : "var(--nice-success-tint-15, #22c55e22)",
1557
+ color: t.status === "firing" ? "var(--nice-color-error, #ef4444)" : "var(--nice-color-success, #22c55e)",
1525
1558
  fontSize: "10px"
1526
1559
  },
1527
- children: o.status
1560
+ children: t.status
1528
1561
  }
1529
1562
  )
1530
1563
  ]
@@ -1536,46 +1569,46 @@ const _ = {
1536
1569
  style: {
1537
1570
  margin: "0 0 8px 0",
1538
1571
  fontSize: "12px",
1539
- color: "var(--text-muted, #888)"
1572
+ color: "var(--nice-text-muted, #888)"
1540
1573
  },
1541
- children: o.message
1574
+ children: t.message
1542
1575
  }
1543
1576
  ),
1544
- /* @__PURE__ */ t(
1577
+ /* @__PURE__ */ n(
1545
1578
  "div",
1546
1579
  {
1547
1580
  style: {
1548
1581
  display: "flex",
1549
1582
  gap: "8px",
1550
1583
  fontSize: "11px",
1551
- color: "var(--text-muted, #666)"
1584
+ color: "var(--nice-text-muted, #666)"
1552
1585
  },
1553
1586
  children: [
1554
- /* @__PURE__ */ t("span", { children: [
1587
+ /* @__PURE__ */ n("span", { children: [
1555
1588
  "Value: ",
1556
- o.value
1589
+ t.value
1557
1590
  ] }),
1558
1591
  /* @__PURE__ */ e("span", { children: "â€ĸ" }),
1559
- /* @__PURE__ */ t("span", { children: [
1592
+ /* @__PURE__ */ n("span", { children: [
1560
1593
  "Threshold: ",
1561
- o.threshold
1594
+ t.threshold
1562
1595
  ] }),
1563
1596
  /* @__PURE__ */ e("span", { children: "â€ĸ" }),
1564
- /* @__PURE__ */ e("span", { children: new Date(o.startsAt).toLocaleString() })
1597
+ /* @__PURE__ */ e("span", { children: new Date(t.startsAt).toLocaleString() })
1565
1598
  ]
1566
1599
  }
1567
1600
  ),
1568
- o.status === "firing" && W && /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
1601
+ t.status === "firing" && N && /* @__PURE__ */ n("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
1569
1602
  /* @__PURE__ */ e(
1570
1603
  "button",
1571
1604
  {
1572
- onClick: () => W(o.id),
1605
+ onClick: () => N(t.id),
1573
1606
  style: {
1574
1607
  padding: "4px 12px",
1575
1608
  borderRadius: "4px",
1576
1609
  border: "none",
1577
- background: "var(--color-primary, #3b82f6)",
1578
- color: "var(--bg-primary, #fff)",
1610
+ background: "var(--nice-color-primary, #3b82f6)",
1611
+ color: "var(--nice-bg-primary, #fff)",
1579
1612
  cursor: "pointer",
1580
1613
  fontSize: "11px"
1581
1614
  },
@@ -1585,13 +1618,13 @@ const _ = {
1585
1618
  z && /* @__PURE__ */ e(
1586
1619
  "button",
1587
1620
  {
1588
- onClick: () => z(o.id, 36e5),
1621
+ onClick: () => z(t.id, 36e5),
1589
1622
  style: {
1590
1623
  padding: "4px 12px",
1591
1624
  borderRadius: "4px",
1592
1625
  border: "none",
1593
- background: "var(--bg-tertiary, #333)",
1594
- color: "var(--bg-primary, #fff)",
1626
+ background: "var(--nice-bg-tertiary, #333)",
1627
+ color: "var(--nice-bg-primary, #fff)",
1595
1628
  cursor: "pointer",
1596
1629
  fontSize: "11px"
1597
1630
  },
@@ -1601,13 +1634,17 @@ const _ = {
1601
1634
  ] })
1602
1635
  ]
1603
1636
  },
1604
- o.id
1637
+ t.id
1605
1638
  );
1606
1639
  }),
1607
1640
  T.length === 0 && /* @__PURE__ */ e(
1608
1641
  "div",
1609
1642
  {
1610
- style: { padding: "24px", textAlign: "center", color: "var(--text-muted, #666)" },
1643
+ style: {
1644
+ padding: "24px",
1645
+ textAlign: "center",
1646
+ color: "var(--nice-text-muted, #666)"
1647
+ },
1611
1648
  children: "No alerts"
1612
1649
  }
1613
1650
  )
@@ -1620,8 +1657,19 @@ const _ = {
1620
1657
  ]
1621
1658
  }
1622
1659
  );
1660
+ }, ve = (d) => {
1661
+ const { t: h } = ie();
1662
+ return d.dashboard ? /* @__PURE__ */ e(se, { ...d, dashboard: d.dashboard }) : /* @__PURE__ */ e(
1663
+ "div",
1664
+ {
1665
+ className: d.className,
1666
+ style: d.style,
1667
+ "data-testid": d["data-testid"] ?? d.testId,
1668
+ children: /* @__PURE__ */ e(oe, { title: h("metricsDashboard.noDashboard", "No dashboard") })
1669
+ }
1670
+ );
1623
1671
  };
1624
1672
  export {
1625
- se as NiceLogExplorer,
1626
- ce as NiceMetricsDashboard
1673
+ ge as NiceLogExplorer,
1674
+ ve as NiceMetricsDashboard
1627
1675
  };