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