@nice2dev/ui-monitoring 1.2.0 → 1.2.1

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