@nice2dev/ui-monitoring 1.2.0 → 1.2.2

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 +334 -311
  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 h, useMemo as oe } from "react";
4
+ const se = [], pe = [], xe = [], $ = {
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: T,
46
+ isLoading: b,
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: y,
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(), [D, l] = h(""), [W, j] = h("now-1h"), [U, ne] = h(1e3), [I, ee] = h(
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] = h(/* @__PURE__ */ new Set()), [re, P] = h(null), [o, n] = h(!1), [a, m] = h(""), [v, g] = h("logs"), [x, f] = h(""), p = oe(() => c.filter((r) => !(!I.has(r.level) || x && !r.message.toLowerCase().includes(x.toLowerCase()))), [c, I, x]), A = 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({
71
- query: I,
72
- timeRange: { from: _, to: "now" },
73
- limit: J,
74
+ return c.forEach((d) => r[d.level]++), r;
75
+ }, [c]), k = () => {
76
+ Q({
77
+ query: D,
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, D), 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 ${y || ""}`,
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",
@@ -122,9 +128,12 @@ const V = {
122
128
  "input",
123
129
  {
124
130
  type: "text",
125
- value: I,
126
- onChange: (r) => S(r.target.value),
127
- placeholder: 'Enter query... e.g., {service="api"} |= "error"',
131
+ value: D,
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: b,
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: b ? "not-allowed" : "pointer",
169
178
  fontSize: "13px",
170
179
  fontWeight: 500,
171
- opacity: h ? 0.7 : 1
180
+ opacity: b ? 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: b ? "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 ? i("logExplorer.stop", "Stop") : i("logExplorer.tail", "Tail")
211
220
  ]
212
221
  }
213
222
  )
214
223
  ] }),
215
224
  /* @__PURE__ */ t("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
216
- /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: "Levels:" }),
217
- Object.keys(V).map((r) => {
218
- const a = V[r], p = T[r], R = B.has(r);
225
+ /* @__PURE__ */ e("span", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.levels", "Levels:") }),
226
+ Object.keys($).map((r) => {
227
+ const d = $[r], u = A[r], E = I.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,12 +429,26 @@ 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
+ {
433
+ id: "logs",
434
+ icon: "file",
435
+ label: i("logExplorer.logs", "Logs ({filteredLogs})").replace(
436
+ "{filteredLogs}",
437
+ String(p.length)
438
+ )
439
+ },
440
+ {
441
+ id: "patterns",
442
+ icon: "flask",
443
+ label: i("logExplorer.patterns", "Patterns ({patterns})").replace(
444
+ "{patterns}",
445
+ String(z.length)
446
+ )
447
+ }
425
448
  ].map((r) => /* @__PURE__ */ t(
426
449
  "button",
427
450
  {
428
- onClick: () => x(r.id),
451
+ onClick: () => g(r.id),
429
452
  style: {
430
453
  padding: "10px 20px",
431
454
  border: "none",
@@ -436,7 +459,7 @@ const V = {
436
459
  borderBottom: v === r.id ? "2px solid var(--nice-primary, #3b82f6)" : "2px solid transparent"
437
460
  },
438
461
  children: [
439
- /* @__PURE__ */ e(l, { name: r.icon, size: 12, style: Y }),
462
+ /* @__PURE__ */ e(s, { name: r.icon, size: 12, style: K }),
440
463
  r.label
441
464
  ]
442
465
  },
@@ -457,7 +480,7 @@ const V = {
457
480
  cursor: "pointer",
458
481
  fontSize: "10px"
459
482
  },
460
- children: "JSON"
483
+ children: i("logExplorer.json", "JSON")
461
484
  }
462
485
  ),
463
486
  /* @__PURE__ */ e(
@@ -481,8 +504,8 @@ const V = {
481
504
  }
482
505
  ),
483
506
  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);
507
+ p.map((r) => {
508
+ const d = $[r.level], u = C.has(r.id);
486
509
  return /* @__PURE__ */ t(
487
510
  "div",
488
511
  {
@@ -491,14 +514,14 @@ const V = {
491
514
  /* @__PURE__ */ t(
492
515
  "div",
493
516
  {
494
- onClick: () => C(r.id),
517
+ onClick: () => R(r.id),
495
518
  style: {
496
519
  display: "flex",
497
520
  alignItems: "flex-start",
498
521
  gap: "8px",
499
522
  padding: "6px 12px",
500
523
  cursor: "pointer",
501
- background: p ? "var(--nice-bg-elevated, #252525)" : "transparent"
524
+ background: u ? "var(--nice-bg-elevated, #252525)" : "transparent"
502
525
  },
503
526
  children: [
504
527
  /* @__PURE__ */ e(
@@ -518,8 +541,8 @@ const V = {
518
541
  style: {
519
542
  padding: "2px 6px",
520
543
  borderRadius: "4px",
521
- background: a.bg,
522
- color: a.color,
544
+ background: d.bg,
545
+ color: d.color,
523
546
  fontSize: "10px",
524
547
  fontWeight: 500,
525
548
  minWidth: "50px",
@@ -547,13 +570,13 @@ const V = {
547
570
  "span",
548
571
  {
549
572
  style: { flex: 1, whiteSpace: "pre-wrap", wordBreak: "break-all" },
550
- dangerouslySetInnerHTML: { __html: de(r.message) }
573
+ dangerouslySetInnerHTML: { __html: le(r.message) }
551
574
  }
552
575
  )
553
576
  ]
554
577
  }
555
578
  ),
556
- p && /* @__PURE__ */ t(
579
+ u && /* @__PURE__ */ t(
557
580
  "div",
558
581
  {
559
582
  style: {
@@ -581,7 +604,7 @@ const V = {
581
604
  color: "var(--nice-text-muted, #888)",
582
605
  marginBottom: "2px"
583
606
  },
584
- children: "Source"
607
+ children: i("logExplorer.source", "Source")
585
608
  }
586
609
  ),
587
610
  /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.source })
@@ -595,7 +618,7 @@ const V = {
595
618
  color: "var(--nice-text-muted, #888)",
596
619
  marginBottom: "2px"
597
620
  },
598
- children: "Host"
621
+ children: i("logExplorer.host", "Host")
599
622
  }
600
623
  ),
601
624
  /* @__PURE__ */ e("div", { style: { fontSize: "11px" }, children: r.host })
@@ -609,7 +632,7 @@ const V = {
609
632
  color: "var(--nice-text-muted, #888)",
610
633
  marginBottom: "2px"
611
634
  },
612
- children: "Trace ID"
635
+ children: i("logExplorer.traceId", "Trace ID")
613
636
  }
614
637
  ),
615
638
  /* @__PURE__ */ e("div", { style: { fontSize: "11px", fontFamily: "monospace" }, children: r.traceId })
@@ -626,10 +649,10 @@ const V = {
626
649
  color: "var(--nice-text-muted, #888)",
627
650
  marginBottom: "4px"
628
651
  },
629
- children: "Attributes"
652
+ children: i("logExplorer.attributes", "Attributes")
630
653
  }
631
654
  ),
632
- /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([R, le]) => /* @__PURE__ */ t(
655
+ /* @__PURE__ */ e("div", { style: { display: "flex", flexWrap: "wrap", gap: "4px" }, children: Object.entries(r.attributes).map(([E, de]) => /* @__PURE__ */ t(
633
656
  "span",
634
657
  {
635
658
  style: {
@@ -639,12 +662,12 @@ const V = {
639
662
  fontSize: "10px"
640
663
  },
641
664
  children: [
642
- R,
665
+ E,
643
666
  "=",
644
- String(le)
667
+ String(de)
645
668
  ]
646
669
  },
647
- R
670
+ E
648
671
  )) })
649
672
  ] }),
650
673
  r.stackTrace && /* @__PURE__ */ t("div", { children: [
@@ -656,7 +679,7 @@ const V = {
656
679
  color: "var(--nice-text-muted, #888)",
657
680
  marginBottom: "4px"
658
681
  },
659
- children: "Stack Trace"
682
+ children: i("logExplorer.stackTrace", "Stack Trace")
660
683
  }
661
684
  ),
662
685
  /* @__PURE__ */ e(
@@ -680,7 +703,7 @@ const V = {
680
703
  /* @__PURE__ */ e(
681
704
  "button",
682
705
  {
683
- onClick: () => D(r),
706
+ onClick: () => N(r),
684
707
  style: {
685
708
  padding: "4px 12px",
686
709
  borderRadius: "4px",
@@ -690,13 +713,13 @@ const V = {
690
713
  cursor: "pointer",
691
714
  fontSize: "10px"
692
715
  },
693
- children: "View Details"
716
+ children: i("logExplorer.viewDetails", "View Details")
694
717
  }
695
718
  ),
696
719
  r.traceId && /* @__PURE__ */ e(
697
720
  "button",
698
721
  {
699
- onClick: () => S(`{traceId="${r.traceId}"}`),
722
+ onClick: () => l(`{traceId="${r.traceId}"}`),
700
723
  style: {
701
724
  padding: "4px 12px",
702
725
  borderRadius: "4px",
@@ -706,7 +729,7 @@ const V = {
706
729
  cursor: "pointer",
707
730
  fontSize: "10px"
708
731
  },
709
- children: "Show Trace"
732
+ children: i("logExplorer.showTrace", "Show Trace")
710
733
  }
711
734
  )
712
735
  ] })
@@ -718,7 +741,7 @@ const V = {
718
741
  r.id
719
742
  );
720
743
  }),
721
- c.length === 0 && !h && /* @__PURE__ */ t(
744
+ p.length === 0 && !b && /* @__PURE__ */ t(
722
745
  "div",
723
746
  {
724
747
  style: {
@@ -727,12 +750,12 @@ const V = {
727
750
  color: "var(--nice-text-muted, #666)"
728
751
  },
729
752
  children: [
730
- /* @__PURE__ */ e(l, { name: "archive", size: 48 }),
731
- /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: "No logs match your query" })
753
+ /* @__PURE__ */ e(s, { name: "archive", size: 48 }),
754
+ /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: i("logExplorer.noLogsMatchYourQuery", "No logs match your query") })
732
755
  ]
733
756
  }
734
757
  ),
735
- h && /* @__PURE__ */ t(
758
+ b && /* @__PURE__ */ t(
736
759
  "div",
737
760
  {
738
761
  style: {
@@ -741,15 +764,15 @@ const V = {
741
764
  color: "var(--nice-text-muted, #666)"
742
765
  },
743
766
  children: [
744
- /* @__PURE__ */ e(l, { name: "clock", size: 48 }),
745
- /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: "Loading logs..." })
767
+ /* @__PURE__ */ e(s, { name: "clock", size: 48 }),
768
+ /* @__PURE__ */ e("p", { style: { marginTop: "16px" }, children: i("logExplorer.loadingLogs", "Loading logs...") })
746
769
  ]
747
770
  }
748
771
  )
749
772
  ] }),
750
773
  v === "patterns" && /* @__PURE__ */ t("div", { style: { flex: 1, overflow: "auto", padding: "16px" }, children: [
751
- w.map((r) => {
752
- const a = V[r.level];
774
+ z.map((r) => {
775
+ const d = $[r.level];
753
776
  return /* @__PURE__ */ t(
754
777
  "div",
755
778
  {
@@ -758,7 +781,7 @@ const V = {
758
781
  padding: "16px",
759
782
  background: "var(--nice-bg-elevated, #252525)",
760
783
  borderRadius: "8px",
761
- borderLeft: `3px solid ${a.color}`
784
+ borderLeft: `3px solid ${d.color}`
762
785
  },
763
786
  children: [
764
787
  /* @__PURE__ */ t(
@@ -772,7 +795,7 @@ const V = {
772
795
  },
773
796
  children: [
774
797
  /* @__PURE__ */ e("span", { style: { fontFamily: "monospace", fontSize: "12px", fontWeight: 500 }, children: r.pattern }),
775
- /* @__PURE__ */ t(
798
+ /* @__PURE__ */ e(
776
799
  "span",
777
800
  {
778
801
  style: {
@@ -781,25 +804,25 @@ const V = {
781
804
  borderRadius: "4px",
782
805
  fontSize: "11px"
783
806
  },
784
- children: [
785
- r.count,
786
- " occurrences"
787
- ]
807
+ children: i("logExplorer.occurrences", "{count} occurrences").replace(
808
+ "{count}",
809
+ String(r.count)
810
+ )
788
811
  }
789
812
  )
790
813
  ]
791
814
  }
792
815
  ),
793
- /* @__PURE__ */ t("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
794
- "Sample: ",
795
- r.samples[0]
796
- ] })
816
+ /* @__PURE__ */ e("div", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: i("logExplorer.sample", "Sample: {samples}").replace(
817
+ "{samples}",
818
+ String(r.samples[0])
819
+ ) })
797
820
  ]
798
821
  },
799
822
  r.id
800
823
  );
801
824
  }),
802
- w.length === 0 && /* @__PURE__ */ e(
825
+ z.length === 0 && /* @__PURE__ */ e(
803
826
  "div",
804
827
  {
805
828
  style: {
@@ -807,13 +830,16 @@ const V = {
807
830
  textAlign: "center",
808
831
  color: "var(--nice-text-muted, #666)"
809
832
  },
810
- children: /* @__PURE__ */ e("p", { children: "No patterns detected. Run a query first." })
833
+ children: /* @__PURE__ */ e("p", { children: i(
834
+ "logExplorer.noPatternsDetectedRunA",
835
+ "No patterns detected. Run a query first."
836
+ ) })
811
837
  }
812
838
  )
813
839
  ] })
814
840
  ] })
815
841
  ] }),
816
- n && /* @__PURE__ */ e(
842
+ o && /* @__PURE__ */ e(
817
843
  "div",
818
844
  {
819
845
  style: {
@@ -835,14 +861,14 @@ const V = {
835
861
  padding: "24px"
836
862
  },
837
863
  children: [
838
- /* @__PURE__ */ e("h3", { style: { margin: "0 0 16px 0", fontSize: "14px" }, children: "Save Query" }),
864
+ /* @__PURE__ */ e("h3", { style: { margin: "0 0 16px 0", fontSize: "14px" }, children: i("logExplorer.saveQuery2", "Save Query") }),
839
865
  /* @__PURE__ */ e(
840
866
  "input",
841
867
  {
842
868
  type: "text",
843
- value: i,
844
- onChange: (r) => y(r.target.value),
845
- placeholder: "Query name...",
869
+ value: a,
870
+ onChange: (r) => m(r.target.value),
871
+ placeholder: i("logExplorer.queryName", "Query name..."),
846
872
  style: {
847
873
  width: "100%",
848
874
  padding: "10px",
@@ -859,7 +885,7 @@ const V = {
859
885
  /* @__PURE__ */ e(
860
886
  "button",
861
887
  {
862
- onClick: () => o(!1),
888
+ onClick: () => n(!1),
863
889
  style: {
864
890
  padding: "8px 16px",
865
891
  borderRadius: "6px",
@@ -868,7 +894,7 @@ const V = {
868
894
  color: "var(--nice-text-primary, #fff)",
869
895
  cursor: "pointer"
870
896
  },
871
- children: "Cancel"
897
+ children: i("logExplorer.cancel", "Cancel")
872
898
  }
873
899
  ),
874
900
  /* @__PURE__ */ e(
@@ -883,7 +909,7 @@ const V = {
883
909
  color: "var(--nice-text-on-primary, #fff)",
884
910
  cursor: "pointer"
885
911
  },
886
- children: "Save"
912
+ children: i("logExplorer.save", "Save")
887
913
  }
888
914
  )
889
915
  ] })
@@ -895,14 +921,14 @@ const V = {
895
921
  ]
896
922
  }
897
923
  );
898
- }, pe = {
924
+ }, ge = {
899
925
  critical: { color: "var(--nice-color-error, #ef4444)", icon: "error" },
900
926
  warning: { color: "var(--nice-color-warning, #f59e0b)", icon: "warning" },
901
927
  info: { color: "var(--nice-color-primary, #3b82f6)", icon: "info" }
902
- }, F = {
928
+ }, V = {
903
929
  verticalAlign: "text-bottom",
904
930
  marginRight: "var(--nice-space-1, 4px)"
905
- }, xe = [
931
+ }, he = [
906
932
  { from: "now-5m", to: "now", display: "Last 5 minutes" },
907
933
  { from: "now-15m", to: "now", display: "Last 15 minutes" },
908
934
  { from: "now-1h", to: "now", display: "Last 1 hour" },
@@ -912,33 +938,33 @@ const V = {
912
938
  { from: "now-24h", to: "now", display: "Last 24 hours" },
913
939
  { from: "now-7d", to: "now", display: "Last 7 days" },
914
940
  { 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,
941
+ ], ve = {}, fe = ({
942
+ dashboard: c,
943
+ metrics: S = ve,
944
+ alerts: T = [],
945
+ timeRanges: b = he,
946
+ onTimeRangeChange: B,
947
+ onVariableChange: z,
948
+ onPanelEdit: Q,
949
+ onPanelAdd: F,
950
+ onPanelRemove: O,
925
951
  onPanelMove: Z,
926
- onAlertAcknowledge: D,
952
+ onAlertAcknowledge: N,
927
953
  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
954
+ onQueryExecute: M,
955
+ onDashboardSave: G,
956
+ onRefresh: w,
957
+ isEditing: y = !1,
958
+ onEditModeToggle: _,
959
+ className: q,
960
+ style: H,
961
+ testId: Y,
962
+ "data-testid": i
937
963
  }) => {
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) {
964
+ const D = i ?? Y, { t: l } = X(), [W, j] = h(!1), [U, ne] = h(!0), [I, ee] = h(null), C = T.filter((o) => o.status === "firing"), J = (o) => {
965
+ var a, m, v;
966
+ const n = (a = o.queries[0]) != null && a.expression ? S[o.queries[0].expression] : null;
967
+ switch (o.type) {
942
968
  case "stat":
943
969
  return /* @__PURE__ */ t(
944
970
  "div",
@@ -957,12 +983,12 @@ const V = {
957
983
  style: {
958
984
  fontSize: "48px",
959
985
  fontWeight: 600,
960
- color: o ? j(o.currentValue, n.thresholds) : "var(--nice-text-primary, #e0e0e0)"
986
+ color: n ? P(n.currentValue, o.thresholds) : "var(--nice-text-primary, #e0e0e0)"
961
987
  },
962
- children: (o == null ? void 0 : o.currentValue.toFixed(2)) ?? "-"
988
+ children: (n == null ? void 0 : n.currentValue.toFixed(2)) ?? "-"
963
989
  }
964
990
  ),
965
- (o == null ? void 0 : o.unit) && /* @__PURE__ */ e(
991
+ (n == null ? void 0 : n.unit) && /* @__PURE__ */ e(
966
992
  "div",
967
993
  {
968
994
  style: {
@@ -970,14 +996,14 @@ const V = {
970
996
  color: "var(--nice-text-muted, #888)",
971
997
  marginTop: "4px"
972
998
  },
973
- children: o.unit
999
+ children: n.unit
974
1000
  }
975
1001
  )
976
1002
  ]
977
1003
  }
978
1004
  );
979
1005
  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);
1006
+ const g = (n == null ? void 0 : n.currentValue) ?? 0, x = ((v = (m = o.thresholds) == null ? void 0 : m[o.thresholds.length - 1]) == null ? void 0 : v.value) ?? 100, f = Math.min(g / x * 100, 100);
981
1007
  return /* @__PURE__ */ e(
982
1008
  "div",
983
1009
  {
@@ -1003,7 +1029,7 @@ const V = {
1003
1029
  {
1004
1030
  d: "M 10 50 A 40 40 0 0 1 90 50",
1005
1031
  fill: "none",
1006
- stroke: j(x, n.thresholds),
1032
+ stroke: P(g, o.thresholds),
1007
1033
  strokeWidth: "8",
1008
1034
  strokeDasharray: `${f * 1.26} 126`
1009
1035
  }
@@ -1017,7 +1043,7 @@ const V = {
1017
1043
  fill: "var(--nice-text-primary, #e0e0e0)",
1018
1044
  fontSize: "16",
1019
1045
  fontWeight: "600",
1020
- children: x.toFixed(1)
1046
+ children: g.toFixed(1)
1021
1047
  }
1022
1048
  )
1023
1049
  ] })
@@ -1025,7 +1051,7 @@ const V = {
1025
1051
  );
1026
1052
  }
1027
1053
  case "timeseries":
1028
- return re(n, o);
1054
+ return re(o, n);
1029
1055
  case "table":
1030
1056
  return /* @__PURE__ */ e("div", { style: { overflow: "auto", height: "100%" }, children: /* @__PURE__ */ t("table", { style: { width: "100%", fontSize: "11px", borderCollapse: "collapse" }, children: [
1031
1057
  /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ t("tr", { style: { background: "var(--nice-bg-elevated, #252525)" }, children: [
@@ -1037,7 +1063,7 @@ const V = {
1037
1063
  textAlign: "left",
1038
1064
  borderBottom: "1px solid var(--nice-border-color, #333)"
1039
1065
  },
1040
- children: "Time"
1066
+ children: l("metricsDashboard.time", "Time")
1041
1067
  }
1042
1068
  ),
1043
1069
  /* @__PURE__ */ e(
@@ -1048,11 +1074,11 @@ const V = {
1048
1074
  textAlign: "right",
1049
1075
  borderBottom: "1px solid var(--nice-border-color, #333)"
1050
1076
  },
1051
- children: "Value"
1077
+ children: l("metricsDashboard.value", "Value")
1052
1078
  }
1053
1079
  )
1054
1080
  ] }) }),
1055
- /* @__PURE__ */ e("tbody", { children: o == null ? void 0 : o.values.slice(-10).reverse().map((x, s) => /* @__PURE__ */ t("tr", { children: [
1081
+ /* @__PURE__ */ e("tbody", { children: n == null ? void 0 : n.values.slice(-10).reverse().map((g, x) => /* @__PURE__ */ t("tr", { children: [
1056
1082
  /* @__PURE__ */ e(
1057
1083
  "td",
1058
1084
  {
@@ -1060,7 +1086,7 @@ const V = {
1060
1086
  padding: "4px 8px",
1061
1087
  borderBottom: "1px solid var(--nice-border-color, #333)"
1062
1088
  },
1063
- children: new Date(x.timestamp).toLocaleTimeString()
1089
+ children: new Date(g.timestamp).toLocaleTimeString()
1064
1090
  }
1065
1091
  ),
1066
1092
  /* @__PURE__ */ t(
@@ -1072,13 +1098,13 @@ const V = {
1072
1098
  textAlign: "right"
1073
1099
  },
1074
1100
  children: [
1075
- x.value.toFixed(2),
1101
+ g.value.toFixed(2),
1076
1102
  " ",
1077
- o.unit
1103
+ n.unit
1078
1104
  ]
1079
1105
  }
1080
1106
  )
1081
- ] }, s)) })
1107
+ ] }, x)) })
1082
1108
  ] }) });
1083
1109
  case "bar_gauge":
1084
1110
  return /* @__PURE__ */ e(
@@ -1091,9 +1117,9 @@ const V = {
1091
1117
  flexDirection: "column",
1092
1118
  justifyContent: "center"
1093
1119
  },
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;
1120
+ children: o.queries.map((g, x) => {
1121
+ var k, R;
1122
+ const f = S[g.expression], p = (f == null ? void 0 : f.currentValue) ?? 0, A = ((R = (k = o.thresholds) == null ? void 0 : k[o.thresholds.length - 1]) == null ? void 0 : R.value) ?? 100;
1097
1123
  return /* @__PURE__ */ t("div", { style: { marginBottom: "8px" }, children: [
1098
1124
  /* @__PURE__ */ t(
1099
1125
  "div",
@@ -1105,8 +1131,8 @@ const V = {
1105
1131
  marginBottom: "4px"
1106
1132
  },
1107
1133
  children: [
1108
- /* @__PURE__ */ e("span", { children: x.legendFormat ?? x.expression }),
1109
- /* @__PURE__ */ e("span", { children: c.toFixed(1) })
1134
+ /* @__PURE__ */ e("span", { children: g.legendFormat ?? g.expression }),
1135
+ /* @__PURE__ */ e("span", { children: p.toFixed(1) })
1110
1136
  ]
1111
1137
  }
1112
1138
  ),
@@ -1124,26 +1150,26 @@ const V = {
1124
1150
  {
1125
1151
  style: {
1126
1152
  height: "100%",
1127
- width: `${c / T * 100}%`,
1128
- background: j(c, n.thresholds),
1153
+ width: `${p / A * 100}%`,
1154
+ background: P(p, o.thresholds),
1129
1155
  borderRadius: "4px"
1130
1156
  }
1131
1157
  }
1132
1158
  )
1133
1159
  }
1134
1160
  )
1135
- ] }, s);
1161
+ ] }, x);
1136
1162
  })
1137
1163
  }
1138
1164
  );
1139
1165
  case "text":
1140
- return /* @__PURE__ */ e("div", { style: { padding: "12px", fontSize: "12px", lineHeight: "1.6" }, children: n.description });
1166
+ return /* @__PURE__ */ e("div", { style: { padding: "12px", fontSize: "12px", lineHeight: "1.6" }, children: o.description });
1141
1167
  default:
1142
- return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--nice-text-muted, #666)" }, children: "Unsupported panel type" });
1168
+ return /* @__PURE__ */ e("div", { style: { padding: "12px", color: "var(--nice-text-muted, #666)" }, children: l("metricsDashboard.unsupportedPanelType", "Unsupported panel type") });
1143
1169
  }
1144
- }, re = (n, o) => {
1145
- const i = (o == null ? void 0 : o.values) ?? [];
1146
- if (i.length === 0)
1170
+ }, re = (o, n) => {
1171
+ const a = (n == null ? void 0 : n.values) ?? [];
1172
+ if (a.length === 0)
1147
1173
  return /* @__PURE__ */ e(
1148
1174
  "div",
1149
1175
  {
@@ -1154,12 +1180,12 @@ const V = {
1154
1180
  height: "100%",
1155
1181
  color: "var(--nice-text-muted, #666)"
1156
1182
  },
1157
- children: "No data"
1183
+ children: l("metricsDashboard.noData", "No data")
1158
1184
  }
1159
1185
  );
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}`;
1186
+ const m = a.map((p) => p.value), v = Math.min(...m), x = Math.max(...m) - v || 1, f = a.map((p, A) => {
1187
+ const k = A / (a.length - 1) * 100, R = 100 - (p.value - v) / x * 80;
1188
+ return `${k},${R}`;
1163
1189
  }).join(" ");
1164
1190
  return /* @__PURE__ */ t(
1165
1191
  "svg",
@@ -1168,19 +1194,19 @@ const V = {
1168
1194
  preserveAspectRatio: "none",
1169
1195
  style: { width: "100%", height: "100%" },
1170
1196
  children: [
1171
- [0, 25, 50, 75, 100].map((c) => /* @__PURE__ */ e(
1197
+ [0, 25, 50, 75, 100].map((p) => /* @__PURE__ */ e(
1172
1198
  "line",
1173
1199
  {
1174
1200
  x1: "0",
1175
- y1: c,
1201
+ y1: p,
1176
1202
  x2: "100",
1177
- y2: c,
1203
+ y2: p,
1178
1204
  stroke: "var(--nice-text, #333)",
1179
1205
  strokeWidth: "0.5"
1180
1206
  },
1181
- c
1207
+ p
1182
1208
  )),
1183
- n.chartType === "area" || n.chartType === "stacked_area" ? /* @__PURE__ */ e(
1209
+ o.chartType === "area" || o.chartType === "stacked_area" ? /* @__PURE__ */ e(
1184
1210
  "polygon",
1185
1211
  {
1186
1212
  points: `0,100 ${f} 100,100`,
@@ -1199,27 +1225,27 @@ const V = {
1199
1225
  ]
1200
1226
  }
1201
1227
  );
1202
- }, j = (n, o) => {
1203
- if (!o || o.length === 0)
1228
+ }, P = (o, n) => {
1229
+ if (!n || n.length === 0)
1204
1230
  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;
1231
+ for (let a = n.length - 1; a >= 0; a--)
1232
+ if (o >= n[a].value)
1233
+ return n[a].color;
1208
1234
  return "var(--nice-color-success, #22c55e)";
1209
1235
  };
1210
1236
  return /* @__PURE__ */ t(
1211
1237
  "div",
1212
1238
  {
1213
- className: `nice-metrics-dashboard ${G || ""}`,
1239
+ className: `nice-metrics-dashboard ${q || ""}`,
1214
1240
  style: {
1215
1241
  display: "flex",
1216
1242
  flexDirection: "column",
1217
1243
  height: "100%",
1218
1244
  background: "var(--nice-bg-elevated, #1e1e1e)",
1219
1245
  color: "var(--nice-text-primary, #e0e0e0)",
1220
- ...M
1246
+ ...H
1221
1247
  },
1222
- "data-testid": I,
1248
+ "data-testid": D,
1223
1249
  children: [
1224
1250
  /* @__PURE__ */ t(
1225
1251
  "div",
@@ -1233,13 +1259,13 @@ const V = {
1233
1259
  background: "var(--nice-bg-elevated, #252525)"
1234
1260
  },
1235
1261
  children: [
1236
- /* @__PURE__ */ e(l, { name: "bar-chart", size: 20 }),
1237
- /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: d.name }),
1262
+ /* @__PURE__ */ e(s, { name: "bar-chart", size: 20 }),
1263
+ /* @__PURE__ */ e("span", { style: { fontWeight: 500, fontSize: "14px" }, children: c.name }),
1238
1264
  /* @__PURE__ */ e("div", { style: { flex: 1 } }),
1239
- z.length > 0 && /* @__PURE__ */ t(
1265
+ C.length > 0 && /* @__PURE__ */ t(
1240
1266
  "button",
1241
1267
  {
1242
- onClick: () => $(!0),
1268
+ onClick: () => j(!0),
1243
1269
  style: {
1244
1270
  display: "flex",
1245
1271
  alignItems: "center",
@@ -1253,21 +1279,19 @@ const V = {
1253
1279
  fontSize: "12px"
1254
1280
  },
1255
1281
  children: [
1256
- /* @__PURE__ */ e(l, { name: "error", size: 14 }),
1282
+ /* @__PURE__ */ e(s, { name: "error", size: 14 }),
1257
1283
  " ",
1258
- z.length,
1259
- " Alert",
1260
- z.length !== 1 && "s"
1284
+ (C.length === 1 ? l("metricsDashboard.oneAlert", "1 Alert") : l("metricsDashboard.alertsCount", "{count} Alerts")).replace("{count}", String(C.length))
1261
1285
  ]
1262
1286
  }
1263
1287
  ),
1264
1288
  /* @__PURE__ */ e(
1265
1289
  "select",
1266
1290
  {
1267
- value: d.timeRange.display,
1268
- onChange: (n) => {
1269
- const o = h.find((i) => i.display === n.target.value);
1270
- o && A(o);
1291
+ value: c.timeRange.display,
1292
+ onChange: (o) => {
1293
+ const n = b.find((a) => a.display === o.target.value);
1294
+ n && B(n);
1271
1295
  },
1272
1296
  style: {
1273
1297
  padding: "6px 12px",
@@ -1277,13 +1301,13 @@ const V = {
1277
1301
  color: "var(--nice-text-primary, #fff)",
1278
1302
  fontSize: "12px"
1279
1303
  },
1280
- children: h.map((n) => /* @__PURE__ */ e("option", { value: n.display, children: n.display }, n.display))
1304
+ children: b.map((o) => /* @__PURE__ */ e("option", { value: o.display, children: o.display }, o.display))
1281
1305
  }
1282
1306
  ),
1283
1307
  /* @__PURE__ */ t(
1284
1308
  "button",
1285
1309
  {
1286
- onClick: m,
1310
+ onClick: w,
1287
1311
  style: {
1288
1312
  padding: "6px 12px",
1289
1313
  borderRadius: "4px",
@@ -1294,16 +1318,16 @@ const V = {
1294
1318
  fontSize: "12px"
1295
1319
  },
1296
1320
  children: [
1297
- /* @__PURE__ */ e(l, { name: "refresh", size: 14, style: F }),
1298
- "Refresh"
1321
+ /* @__PURE__ */ e(s, { name: "refresh", size: 14, style: V }),
1322
+ l("metricsDashboard.refresh", "Refresh")
1299
1323
  ]
1300
1324
  }
1301
1325
  ),
1302
- g ? /* @__PURE__ */ t(te, { children: [
1326
+ y ? /* @__PURE__ */ t(te, { children: [
1303
1327
  /* @__PURE__ */ t(
1304
1328
  "button",
1305
1329
  {
1306
- onClick: P,
1330
+ onClick: F,
1307
1331
  style: {
1308
1332
  padding: "6px 12px",
1309
1333
  borderRadius: "4px",
@@ -1314,15 +1338,15 @@ const V = {
1314
1338
  fontSize: "12px"
1315
1339
  },
1316
1340
  children: [
1317
- /* @__PURE__ */ e(l, { name: "plus", size: 14, style: F }),
1318
- "Add Panel"
1341
+ /* @__PURE__ */ e(s, { name: "plus", size: 14, style: V }),
1342
+ l("metricsDashboard.addPanel", "Add Panel")
1319
1343
  ]
1320
1344
  }
1321
1345
  ),
1322
1346
  /* @__PURE__ */ t(
1323
1347
  "button",
1324
1348
  {
1325
- onClick: q,
1349
+ onClick: G,
1326
1350
  style: {
1327
1351
  padding: "6px 12px",
1328
1352
  borderRadius: "4px",
@@ -1333,35 +1357,35 @@ const V = {
1333
1357
  fontSize: "12px"
1334
1358
  },
1335
1359
  children: [
1336
- /* @__PURE__ */ e(l, { name: "save", size: 14, style: F }),
1337
- "Save"
1360
+ /* @__PURE__ */ e(s, { name: "save", size: 14, style: V }),
1361
+ l("metricsDashboard.save", "Save")
1338
1362
  ]
1339
1363
  }
1340
1364
  )
1341
1365
  ] }) : null,
1342
- E && /* @__PURE__ */ t(
1366
+ _ && /* @__PURE__ */ t(
1343
1367
  "button",
1344
1368
  {
1345
- onClick: E,
1369
+ onClick: _,
1346
1370
  style: {
1347
1371
  padding: "6px 12px",
1348
1372
  borderRadius: "4px",
1349
1373
  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)",
1374
+ background: y ? "var(--nice-color-warning, #f59e0b)" : "var(--nice-bg-tertiary, #333)",
1375
+ color: y ? "var(--nice-color-white, #fff)" : "var(--nice-text-primary, #fff)",
1352
1376
  cursor: "pointer",
1353
1377
  fontSize: "12px"
1354
1378
  },
1355
1379
  children: [
1356
- /* @__PURE__ */ e(l, { name: g ? "check" : "edit", size: 14, style: F }),
1357
- g ? "Done" : "Edit"
1380
+ /* @__PURE__ */ e(s, { name: y ? "check" : "edit", size: 14, style: V }),
1381
+ y ? l("metricsDashboard.done", "Done") : l("metricsDashboard.edit", "Edit")
1358
1382
  ]
1359
1383
  }
1360
1384
  )
1361
1385
  ]
1362
1386
  }
1363
1387
  ),
1364
- d.variables.length > 0 && J && /* @__PURE__ */ e(
1388
+ c.variables.length > 0 && U && /* @__PURE__ */ e(
1365
1389
  "div",
1366
1390
  {
1367
1391
  style: {
@@ -1372,19 +1396,19 @@ const V = {
1372
1396
  borderBottom: "1px solid var(--nice-border-color, #333)",
1373
1397
  background: "var(--nice-bg-elevated, #252525)"
1374
1398
  },
1375
- children: d.variables.map((n) => {
1376
- var o;
1399
+ children: c.variables.map((o) => {
1400
+ var n;
1377
1401
  return /* @__PURE__ */ t("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
1378
1402
  /* @__PURE__ */ t("label", { style: { fontSize: "11px", color: "var(--nice-text-muted, #888)" }, children: [
1379
- n.label,
1403
+ o.label,
1380
1404
  ":"
1381
1405
  ] }),
1382
- n.type === "textbox" ? /* @__PURE__ */ e(
1406
+ o.type === "textbox" ? /* @__PURE__ */ e(
1383
1407
  "input",
1384
1408
  {
1385
1409
  type: "text",
1386
- value: n.current,
1387
- onChange: (i) => w(n.id, i.target.value),
1410
+ value: o.current,
1411
+ onChange: (a) => z(o.id, a.target.value),
1388
1412
  style: {
1389
1413
  padding: "4px 8px",
1390
1414
  borderRadius: "4px",
@@ -1398,8 +1422,8 @@ const V = {
1398
1422
  ) : /* @__PURE__ */ e(
1399
1423
  "select",
1400
1424
  {
1401
- value: n.current,
1402
- onChange: (i) => w(n.id, i.target.value),
1425
+ value: o.current,
1426
+ onChange: (a) => z(o.id, a.target.value),
1403
1427
  style: {
1404
1428
  padding: "4px 8px",
1405
1429
  borderRadius: "4px",
@@ -1408,10 +1432,10 @@ const V = {
1408
1432
  color: "var(--nice-text-primary, #fff)",
1409
1433
  fontSize: "11px"
1410
1434
  },
1411
- children: (o = n.options) == null ? void 0 : o.map((i) => /* @__PURE__ */ e("option", { value: i, children: i }, i))
1435
+ children: (n = o.options) == null ? void 0 : n.map((a) => /* @__PURE__ */ e("option", { value: a, children: a }, a))
1412
1436
  }
1413
1437
  )
1414
- ] }, n.id);
1438
+ ] }, o.id);
1415
1439
  })
1416
1440
  }
1417
1441
  ),
@@ -1424,16 +1448,16 @@ const V = {
1424
1448
  gridAutoRows: "minmax(100px, auto)",
1425
1449
  gap: "16px"
1426
1450
  },
1427
- children: d.panels.map((n) => /* @__PURE__ */ t(
1451
+ children: c.panels.map((o) => /* @__PURE__ */ t(
1428
1452
  "div",
1429
1453
  {
1430
1454
  style: {
1431
- gridColumn: `span ${n.position.w}`,
1432
- gridRow: `span ${n.position.h}`,
1455
+ gridColumn: `span ${o.position.w}`,
1456
+ gridRow: `span ${o.position.h}`,
1433
1457
  background: "var(--nice-bg-elevated, #252525)",
1434
1458
  borderRadius: "8px",
1435
1459
  overflow: "hidden",
1436
- border: B === n.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1460
+ border: I === o.id ? "2px solid var(--nice-primary, #3b82f6)" : "1px solid var(--nice-border-color, #333)"
1437
1461
  },
1438
1462
  children: [
1439
1463
  /* @__PURE__ */ t(
@@ -1447,12 +1471,12 @@ const V = {
1447
1471
  background: "var(--nice-bg-elevated, #1e1e1e)"
1448
1472
  },
1449
1473
  children: [
1450
- /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: n.title }),
1451
- g && /* @__PURE__ */ t(te, { children: [
1474
+ /* @__PURE__ */ e("span", { style: { flex: 1, fontSize: "12px", fontWeight: 500 }, children: o.title }),
1475
+ y && /* @__PURE__ */ t(te, { children: [
1452
1476
  /* @__PURE__ */ e(
1453
1477
  "button",
1454
1478
  {
1455
- onClick: () => O(n),
1479
+ onClick: () => Q(o),
1456
1480
  style: {
1457
1481
  padding: "2px 6px",
1458
1482
  marginLeft: "4px",
@@ -1464,11 +1488,11 @@ const V = {
1464
1488
  fontSize: "10px"
1465
1489
  },
1466
1490
  children: /* @__PURE__ */ e(
1467
- l,
1491
+ s,
1468
1492
  {
1469
1493
  name: "edit",
1470
1494
  size: 12,
1471
- title: S("metricsDashboard.editPanel", "Edit panel")
1495
+ title: l("metricsDashboard.editPanel", "Edit panel")
1472
1496
  }
1473
1497
  )
1474
1498
  }
@@ -1476,7 +1500,7 @@ const V = {
1476
1500
  /* @__PURE__ */ e(
1477
1501
  "button",
1478
1502
  {
1479
- onClick: () => Q(n.id),
1503
+ onClick: () => O(o.id),
1480
1504
  style: {
1481
1505
  padding: "2px 6px",
1482
1506
  marginLeft: "4px",
@@ -1488,11 +1512,11 @@ const V = {
1488
1512
  fontSize: "10px"
1489
1513
  },
1490
1514
  children: /* @__PURE__ */ e(
1491
- l,
1515
+ s,
1492
1516
  {
1493
1517
  name: "close",
1494
1518
  size: 12,
1495
- title: S("metricsDashboard.removePanel", "Remove panel")
1519
+ title: l("metricsDashboard.removePanel", "Remove panel")
1496
1520
  }
1497
1521
  )
1498
1522
  }
@@ -1501,14 +1525,14 @@ const V = {
1501
1525
  ]
1502
1526
  }
1503
1527
  ),
1504
- /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: K(n) })
1528
+ /* @__PURE__ */ e("div", { style: { height: "calc(100% - 40px)" }, children: J(o) })
1505
1529
  ]
1506
1530
  },
1507
- n.id
1531
+ o.id
1508
1532
  ))
1509
1533
  }
1510
1534
  ) }),
1511
- _ && /* @__PURE__ */ e(
1535
+ W && /* @__PURE__ */ e(
1512
1536
  "div",
1513
1537
  {
1514
1538
  style: {
@@ -1542,15 +1566,14 @@ const V = {
1542
1566
  borderBottom: "1px solid var(--nice-border-color, #333)"
1543
1567
  },
1544
1568
  children: [
1545
- /* @__PURE__ */ t("span", { style: { fontWeight: 600 }, children: [
1546
- "Active Alerts (",
1547
- z.length,
1548
- ")"
1549
- ] }),
1569
+ /* @__PURE__ */ e("span", { style: { fontWeight: 600 }, children: l("metricsDashboard.activeAlerts", "Active Alerts ({firingAlerts})").replace(
1570
+ "{firingAlerts}",
1571
+ String(C.length)
1572
+ ) }),
1550
1573
  /* @__PURE__ */ e(
1551
1574
  "button",
1552
1575
  {
1553
- onClick: () => $(!1),
1576
+ onClick: () => j(!1),
1554
1577
  style: {
1555
1578
  background: "none",
1556
1579
  border: "none",
@@ -1558,22 +1581,22 @@ const V = {
1558
1581
  cursor: "pointer",
1559
1582
  fontSize: "18px"
1560
1583
  },
1561
- children: /* @__PURE__ */ e(l, { name: "close", size: 18, title: S("close", "Close") })
1584
+ children: /* @__PURE__ */ e(s, { name: "close", size: 18, title: l("close", "Close") })
1562
1585
  }
1563
1586
  )
1564
1587
  ]
1565
1588
  }
1566
1589
  ),
1567
1590
  /* @__PURE__ */ t("div", { style: { maxHeight: "60vh", overflow: "auto" }, children: [
1568
- N.map((n) => {
1569
- const o = pe[n.severity];
1591
+ T.map((o) => {
1592
+ const n = ge[o.severity];
1570
1593
  return /* @__PURE__ */ t(
1571
1594
  "div",
1572
1595
  {
1573
1596
  style: {
1574
1597
  padding: "16px",
1575
1598
  borderBottom: "1px solid var(--nice-border-color, #333)",
1576
- borderLeft: `4px solid ${o.color}`
1599
+ borderLeft: `4px solid ${n.color}`
1577
1600
  },
1578
1601
  children: [
1579
1602
  /* @__PURE__ */ t(
@@ -1586,8 +1609,8 @@ const V = {
1586
1609
  marginBottom: "8px"
1587
1610
  },
1588
1611
  children: [
1589
- /* @__PURE__ */ e(l, { name: o.icon, size: 14, color: o.color }),
1590
- /* @__PURE__ */ e("span", { style: { fontWeight: 500 }, children: n.name }),
1612
+ /* @__PURE__ */ e(s, { name: n.icon, size: 14, color: n.color }),
1613
+ /* @__PURE__ */ e("span", { style: { fontWeight: 500 }, children: o.name }),
1591
1614
  /* @__PURE__ */ e(
1592
1615
  "span",
1593
1616
  {
@@ -1595,11 +1618,11 @@ const V = {
1595
1618
  marginLeft: "auto",
1596
1619
  padding: "2px 8px",
1597
1620
  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)",
1621
+ background: o.status === "firing" ? "var(--nice-danger-tint-15, #ef444422)" : "var(--nice-success-tint-15, #22c55e22)",
1622
+ color: o.status === "firing" ? "var(--nice-color-error, #ef4444)" : "var(--nice-color-success, #22c55e)",
1600
1623
  fontSize: "10px"
1601
1624
  },
1602
- children: n.status
1625
+ children: o.status
1603
1626
  }
1604
1627
  )
1605
1628
  ]
@@ -1613,7 +1636,7 @@ const V = {
1613
1636
  fontSize: "12px",
1614
1637
  color: "var(--nice-text-muted, #888)"
1615
1638
  },
1616
- children: n.message
1639
+ children: o.message
1617
1640
  }
1618
1641
  ),
1619
1642
  /* @__PURE__ */ t(
@@ -1626,25 +1649,25 @@ const V = {
1626
1649
  color: "var(--nice-text-muted, #666)"
1627
1650
  },
1628
1651
  children: [
1629
- /* @__PURE__ */ t("span", { children: [
1630
- "Value: ",
1631
- n.value
1632
- ] }),
1652
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.value2", "Value: {value}").replace(
1653
+ "{value}",
1654
+ String(o.value)
1655
+ ) }),
1633
1656
  /* @__PURE__ */ e("span", { children: "•" }),
1634
- /* @__PURE__ */ t("span", { children: [
1635
- "Threshold: ",
1636
- n.threshold
1637
- ] }),
1657
+ /* @__PURE__ */ e("span", { children: l("metricsDashboard.threshold", "Threshold: {threshold}").replace(
1658
+ "{threshold}",
1659
+ String(o.threshold)
1660
+ ) }),
1638
1661
  /* @__PURE__ */ e("span", { children: "•" }),
1639
- /* @__PURE__ */ e("span", { children: new Date(n.startsAt).toLocaleString() })
1662
+ /* @__PURE__ */ e("span", { children: new Date(o.startsAt).toLocaleString() })
1640
1663
  ]
1641
1664
  }
1642
1665
  ),
1643
- n.status === "firing" && D && /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
1666
+ o.status === "firing" && N && /* @__PURE__ */ t("div", { style: { marginTop: "12px", display: "flex", gap: "8px" }, children: [
1644
1667
  /* @__PURE__ */ e(
1645
1668
  "button",
1646
1669
  {
1647
- onClick: () => D(n.id),
1670
+ onClick: () => N(o.id),
1648
1671
  style: {
1649
1672
  padding: "4px 12px",
1650
1673
  borderRadius: "4px",
@@ -1654,13 +1677,13 @@ const V = {
1654
1677
  cursor: "pointer",
1655
1678
  fontSize: "11px"
1656
1679
  },
1657
- children: "Acknowledge"
1680
+ children: l("metricsDashboard.acknowledge", "Acknowledge")
1658
1681
  }
1659
1682
  ),
1660
1683
  L && /* @__PURE__ */ e(
1661
1684
  "button",
1662
1685
  {
1663
- onClick: () => L(n.id, 36e5),
1686
+ onClick: () => L(o.id, 36e5),
1664
1687
  style: {
1665
1688
  padding: "4px 12px",
1666
1689
  borderRadius: "4px",
@@ -1670,16 +1693,16 @@ const V = {
1670
1693
  cursor: "pointer",
1671
1694
  fontSize: "11px"
1672
1695
  },
1673
- children: "Silence 1h"
1696
+ children: l("metricsDashboard.silence1h", "Silence 1h")
1674
1697
  }
1675
1698
  )
1676
1699
  ] })
1677
1700
  ]
1678
1701
  },
1679
- n.id
1702
+ o.id
1680
1703
  );
1681
1704
  }),
1682
- N.length === 0 && /* @__PURE__ */ e(
1705
+ T.length === 0 && /* @__PURE__ */ e(
1683
1706
  "div",
1684
1707
  {
1685
1708
  style: {
@@ -1687,7 +1710,7 @@ const V = {
1687
1710
  textAlign: "center",
1688
1711
  color: "var(--nice-text-muted, #666)"
1689
1712
  },
1690
- children: "No alerts"
1713
+ children: l("metricsDashboard.noAlerts", "No alerts")
1691
1714
  }
1692
1715
  )
1693
1716
  ] })
@@ -1699,19 +1722,19 @@ const V = {
1699
1722
  ]
1700
1723
  }
1701
1724
  );
1702
- }, be = (d) => {
1703
- const { t: b } = X();
1704
- return d.dashboard ? /* @__PURE__ */ e(ve, { ...d, dashboard: d.dashboard }) : /* @__PURE__ */ e(
1725
+ }, we = (c) => {
1726
+ const { t: S } = X();
1727
+ return c.dashboard ? /* @__PURE__ */ e(fe, { ...c, dashboard: c.dashboard }) : /* @__PURE__ */ e(
1705
1728
  "div",
1706
1729
  {
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") })
1730
+ className: c.className,
1731
+ style: c.style,
1732
+ "data-testid": c["data-testid"] ?? c.testId,
1733
+ children: /* @__PURE__ */ e(ce, { title: S("metricsDashboard.noDashboard", "No dashboard") })
1711
1734
  }
1712
1735
  );
1713
1736
  };
1714
1737
  export {
1715
- ye as NiceLogExplorer,
1716
- be as NiceMetricsDashboard
1738
+ Se as NiceLogExplorer,
1739
+ we as NiceMetricsDashboard
1717
1740
  };