@nice2dev/ui-monitoring 1.1.6 → 1.1.9

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