@kong-ui-public/analytics-metric-provider 11.0.4-pr.2673.6e2178c96.0 → 11.0.4-pr.2700.d98d1061d.0

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 (50) hide show
  1. package/dist/style.css +1 -0
  2. package/dist/types/components/MetricCardContainer.vue.d.ts +91 -0
  3. package/dist/types/components/MetricCardContainer.vue.d.ts.map +1 -0
  4. package/dist/types/components/MetricsConsumer.vue.d.ts +34 -0
  5. package/dist/types/components/MetricsConsumer.vue.d.ts.map +1 -0
  6. package/dist/types/components/MetricsProvider.vue.d.ts +48 -0
  7. package/dist/types/components/MetricsProvider.vue.d.ts.map +1 -0
  8. package/dist/types/components/MetricsTestHarness.vue.d.ts +26 -0
  9. package/dist/types/components/MetricsTestHarness.vue.d.ts.map +1 -0
  10. package/dist/types/components/display/MetricCardLoadingSkeleton.vue.d.ts +3 -0
  11. package/dist/types/components/display/MetricCardLoadingSkeleton.vue.d.ts.map +1 -0
  12. package/dist/types/components/display/MetricsCard.vue.d.ts +397 -0
  13. package/dist/types/components/display/MetricsCard.vue.d.ts.map +1 -0
  14. package/dist/types/components/metricsProviderUtil.d.ts +35 -0
  15. package/dist/types/components/metricsProviderUtil.d.ts.map +1 -0
  16. package/dist/types/composables/index.d.ts +12 -0
  17. package/dist/types/composables/index.d.ts.map +1 -0
  18. package/dist/types/composables/useI18n.d.ts +9 -0
  19. package/dist/types/composables/useI18n.d.ts.map +1 -0
  20. package/dist/types/composables/useMetricCardBuilder.d.ts +20 -0
  21. package/dist/types/composables/useMetricCardBuilder.d.ts.map +1 -0
  22. package/dist/types/composables/useMetricFetcher.d.ts +19 -0
  23. package/dist/types/composables/useMetricFetcher.d.ts.map +1 -0
  24. package/dist/types/composables/useRequest.d.ts +12 -0
  25. package/dist/types/composables/useRequest.d.ts.map +1 -0
  26. package/dist/types/constants.d.ts +7 -0
  27. package/dist/types/constants.d.ts.map +1 -0
  28. package/dist/types/enums/index.d.ts +3 -0
  29. package/dist/types/enums/index.d.ts.map +1 -0
  30. package/dist/types/enums/metric-card-size.enum.d.ts +7 -0
  31. package/dist/types/enums/metric-card-size.enum.d.ts.map +1 -0
  32. package/dist/types/enums/metric-card-type.enum.d.ts +7 -0
  33. package/dist/types/enums/metric-card-type.enum.d.ts.map +1 -0
  34. package/dist/types/index.d.ts +8 -0
  35. package/dist/types/index.d.ts.map +1 -0
  36. package/dist/types/mockExploreResponse.d.ts +12 -0
  37. package/dist/types/mockExploreResponse.d.ts.map +1 -0
  38. package/dist/types/types/fetcher-types.d.ts +16 -0
  39. package/dist/types/types/fetcher-types.d.ts.map +1 -0
  40. package/dist/types/types/index.d.ts +3 -0
  41. package/dist/types/types/index.d.ts.map +1 -0
  42. package/dist/types/types/metric-card.d.ts +36 -0
  43. package/dist/types/types/metric-card.d.ts.map +1 -0
  44. package/dist/types/utilities/index.d.ts +2 -0
  45. package/dist/types/utilities/index.d.ts.map +1 -0
  46. package/dist/types/utilities/trend-display.d.ts +24 -0
  47. package/dist/types/utilities/trend-display.d.ts.map +1 -0
  48. package/dist/vitals-metric-provider.es.js +1211 -0
  49. package/dist/vitals-metric-provider.umd.js +1 -0
  50. package/package.json +5 -5
@@ -0,0 +1,1211 @@
1
+ import { ref as Y, watchEffect as ke, computed as p, getCurrentInstance as Me, reactive as Fe, onMounted as xe, onUnmounted as qe, watch as Ue, isReadonly as Pe, toRefs as $e, defineComponent as W, inject as Ce, toRef as G, provide as ze, renderSlot as Se, resolveComponent as Ie, createElementBlock as S, openBlock as T, normalizeClass as z, createElementVNode as q, createCommentVNode as V, createBlock as U, unref as C, resolveDynamicComponent as re, withCtx as me, createTextVNode as Ae, toDisplayString as w, createVNode as F, Fragment as ge, renderList as Ke, mergeProps as Be, normalizeProps as Xe, guardReactiveProps as Ge } from "vue";
2
+ import { stripUnknownFilters as je, queryableExploreDimensions as He } from "@kong-ui-public/analytics-utilities";
3
+ import { createI18n as Ye, i18nTComponent as Qe } from "@kong-ui-public/i18n";
4
+ import "axios";
5
+ import { useAnalyticsConfigStore as We } from "@kong-ui-public/analytics-config-store";
6
+ import { TrendUpIcon as Je, TrendDownIcon as Ze, IndeterminateSmallIcon as De, VitalsIcon as er, CloudUploadIcon as rr, WarningOutlineIcon as tr, ResponseIcon as nr, InfoIcon as ar, WarningIcon as be, EqualIcon as ir } from "@kong/icons";
7
+ const or = {
8
+ notAvailable: "N/A"
9
+ }, sr = {
10
+ small: {
11
+ traffic: "Requests",
12
+ errorRate: "Error rate",
13
+ averageLatency: "Avg. latency",
14
+ p99Latency: "P99 latency"
15
+ },
16
+ short: {
17
+ traffic: "Requests",
18
+ errorRate: "Error rate",
19
+ averageLatency: "Average latency",
20
+ p99Latency: "P99 latency"
21
+ },
22
+ long: {
23
+ traffic: "Number of requests",
24
+ errorRate: "Average error rate",
25
+ averageLatency: "Average latency",
26
+ p99Latency: "P99 latency"
27
+ }
28
+ }, ur = {
29
+ custom_days: "vs previous {numDays, plural, =1 {day} other {# days}}",
30
+ custom_hours: "vs previous {numHours, plural, =1 {hour} other {# hours}}",
31
+ custom_minutes: "vs previous {numMinutes, plural, =1 {minute} other {# minutes}}",
32
+ "15m": "vs previous 15 minutes",
33
+ "1h": "vs previous hour",
34
+ "6h": "vs previous 6 hours",
35
+ "12h": "vs previous 12 hours",
36
+ "24h": "vs previous 24 hours",
37
+ "7d": "vs previous 7 days",
38
+ "30d": "vs previous 30 days",
39
+ current_week: "vs previous week",
40
+ current_month: "vs previous month",
41
+ current_quarter: "vs previous quarter",
42
+ previous_week: "vs previous time period",
43
+ previous_month: "vs previous time period",
44
+ previous_quarter: "vs previous quarter"
45
+ }, lr = {
46
+ general: or,
47
+ metricCard: sr,
48
+ trendRange: ur
49
+ };
50
+ function cr() {
51
+ const e = Ye("en-us", lr);
52
+ return {
53
+ i18n: e,
54
+ i18nT: Qe(e)
55
+ // Translation component <i18n-t>
56
+ };
57
+ }
58
+ const dr = 2, B = ["1XX", "2XX", "3XX", "4XX", "5XX"], ye = ["4XX", "5XX"], mt = ["1XX", "2XX", "3XX"], fr = 30 * 1e3, vr = "analytics-query-provider";
59
+ var we = /* @__PURE__ */ ((e) => (e.VALIDATING = "VALIDATING", e.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", e.PENDING = "PENDING", e.SUCCESS = "SUCCESS", e.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", e.ERROR = "ERROR", e.STALE_IF_ERROR = "STALE_IF_ERROR", e))(we || {});
60
+ const mr = (e) => {
61
+ var r, t, o, a, n;
62
+ return e ? !!// TODO: revisit: currently only the first check ever matters?
63
+ ((r = Object.keys(e)) != null && r.length || (t = e.data) != null && t.length || (a = (o = e.data) == null ? void 0 : o.data) != null && a.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
64
+ };
65
+ function gr(e = Y({}), r, t, o = mr) {
66
+ const a = Y(
67
+ "PENDING"
68
+ /* PENDING */
69
+ );
70
+ return ke(() => {
71
+ const n = o(e.value);
72
+ if (e.value && n && t.value) {
73
+ a.value = "VALIDATING_HAS_DATA";
74
+ return;
75
+ }
76
+ if (e.value && t.value) {
77
+ a.value = "VALIDATING";
78
+ return;
79
+ }
80
+ if (e.value && r.value) {
81
+ a.value = "STALE_IF_ERROR";
82
+ return;
83
+ }
84
+ if (e.value === void 0 && !r.value) {
85
+ a.value = "PENDING";
86
+ return;
87
+ }
88
+ if (e.value && !r.value && n) {
89
+ a.value = "SUCCESS_HAS_DATA";
90
+ return;
91
+ }
92
+ if (e.value && !r.value) {
93
+ a.value = "SUCCESS";
94
+ return;
95
+ }
96
+ e.value === void 0 && r && (a.value = "ERROR");
97
+ }), {
98
+ state: a,
99
+ swrvState: we
100
+ };
101
+ }
102
+ const L = Symbol("default"), te = "status_code_grouped", he = (e, r, t, o, a) => {
103
+ e[r][t] || (e[r][t] = {}), e[r][t][o] = a;
104
+ };
105
+ function yr(e, r) {
106
+ var d;
107
+ const t = ((d = e.meta.metric_names) == null ? void 0 : d[0]) || "", o = e.meta.start_ms, a = Object.keys(e.meta.display || {}), n = !!a.find((f) => f === te), u = a.find((f) => f !== te);
108
+ return a.length > 2 || a.length > 1 && !n ? (console.error("Don't know how to work with provided dimensions:", a), {
109
+ previous: { [L]: { [L]: 0 } },
110
+ current: { [L]: { [L]: 0 } }
111
+ }) : e.data.reduce((f, i) => {
112
+ const s = i.event[t], l = u ? i.event[u] : L, c = n ? i.event[te] : L;
113
+ return new Date(i.timestamp).getTime() === o && r ? he(f, "previous", l, c, s) : he(f, "current", l, c, s), f;
114
+ }, {
115
+ previous: {},
116
+ current: {}
117
+ });
118
+ }
119
+ function hr(e) {
120
+ e.queryReady === void 0 && (e.queryReady = p(() => !0));
121
+ const { i18n: r } = M.useI18n(), t = p(() => {
122
+ var l, c;
123
+ return {
124
+ metrics: e.metrics.value,
125
+ dimensions: [
126
+ ...(l = e.dimensions) != null && l.length ? [...e.dimensions] : [],
127
+ ...e.withTrend.value ? ["time"] : []
128
+ ],
129
+ granularity: e.withTrend.value ? "trend" : void 0,
130
+ ...(c = e.filter.value) != null && c.length ? { filters: e.filter.value } : {},
131
+ time_range: e.timeRange.value
132
+ };
133
+ }), o = p(() => {
134
+ var c, v, h, R;
135
+ if (!((c = e.queryReady) != null && c.value))
136
+ return null;
137
+ const l = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
138
+ return `metric-fetcher-${JSON.stringify(e.timeRange.value)}-${(h = e.dimensions) == null ? void 0 : h.join("-")}-${(R = e.metrics.value) == null ? void 0 : R.join("-")}-${l}-${e.refreshCounter.value}`;
139
+ }), { response: a, error: n, isValidating: u } = M.useRequest(
140
+ () => o.value,
141
+ () => e.queryFn({
142
+ // TODO: Use a type guard to validate that if the datasource is basic,
143
+ // the query is a valid basic explore query.
144
+ datasource: e.datasource.value,
145
+ query: t.value
146
+ }, e.abortController ?? new AbortController()),
147
+ {
148
+ refreshInterval: e.refreshInterval,
149
+ revalidateOnFocus: !1,
150
+ errorRetryCount: dr
151
+ }
152
+ ), { state: d, swrvState: f } = gr(a, n, u), i = p(() => {
153
+ var l, c, v, h, R, y, _;
154
+ return !((c = (l = a.value) == null ? void 0 : l.data) != null && c.length) || !((h = (v = a.value) == null ? void 0 : v.meta) != null && h.display) || !((_ = (y = (R = a.value) == null ? void 0 : R.meta) == null ? void 0 : y.metric_names) != null && _.length) ? { current: {}, previous: {} } : yr(a.value, e.withTrend.value);
155
+ }), s = p(() => {
156
+ var l, c;
157
+ if (e.timeRange.value.type === "absolute") {
158
+ if (!((c = (l = a.value) == null ? void 0 : l.meta) != null && c.start_ms))
159
+ return "";
160
+ const { start_ms: v, end_ms: h } = a.value.meta;
161
+ let R = (h - v) / (1e3 * 60 * 60 * 24), y = (h - v) / (1e3 * 60 * 60), _ = (h - v) / (1e3 * 60);
162
+ return e.withTrend.value && (R /= 2, y /= 2, _ /= 2), R >= 1 ? r.t("trendRange.custom_days", { numDays: Math.round(R) }) : y >= 1 ? r.t("trendRange.custom_hours", { numHours: Math.round(y) }) : _ >= 1 ? r.t("trendRange.custom_minutes", { numMinutes: Math.round(_) }) : r.t("trendRange.custom_days", { numDays: Math.round(R) });
163
+ } else
164
+ return e.withTrend.value ? r.t(`trendRange.${e.timeRange.value.time_range}`) : "";
165
+ });
166
+ return {
167
+ isLoading: p(() => f.PENDING === d.value),
168
+ hasError: p(() => f.ERROR === d.value),
169
+ raw: a,
170
+ mapped: i,
171
+ trendRange: s
172
+ };
173
+ }
174
+ const K = (e, r, t = L, o) => (o ?? [L]).reduce((n, u) => {
175
+ const d = e[r][t];
176
+ return d ? n + (d[u] || 0) : n;
177
+ }, 0);
178
+ function pr(e) {
179
+ const {
180
+ cardType: r,
181
+ title: t,
182
+ description: o,
183
+ record: a,
184
+ hasError: n,
185
+ increaseIsBad: u,
186
+ formatValueFn: d,
187
+ trendRange: f
188
+ } = e;
189
+ return p(() => {
190
+ let i = 0, s = 0;
191
+ if (a != null && a.value)
192
+ try {
193
+ i = K(a.value, "current", e.lookupKey, e.sumGroupedValues), s = K(a.value, "previous", e.lookupKey, e.sumGroupedValues);
194
+ } catch (l) {
195
+ console.error(
196
+ "Metric card data doesn't have the expected structure:",
197
+ l
198
+ );
199
+ }
200
+ return {
201
+ cardType: r,
202
+ hasError: n.value,
203
+ currentValue: i,
204
+ previousValue: s,
205
+ title: t.value,
206
+ description: o,
207
+ increaseIsBad: !!u,
208
+ // Coerce undefined to false
209
+ formatValueFn: d,
210
+ trendRange: f == null ? void 0 : f.value
211
+ };
212
+ });
213
+ }
214
+ var ne = /* @__PURE__ */ new WeakMap(), pe = 0;
215
+ function Rr(e) {
216
+ if (!e.length)
217
+ return "";
218
+ for (var r = "arg", t = 0; t < e.length; ++t) {
219
+ var o = void 0;
220
+ e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? o = '"' + e[t] + '"' : o = String(e[t]) : ne.has(e[t]) ? o = ne.get(e[t]) : (o = pe, ne.set(e[t], pe++)), r += "@" + o;
221
+ }
222
+ return r;
223
+ }
224
+ function Tr(e) {
225
+ if (typeof e == "function")
226
+ try {
227
+ e = e();
228
+ } catch {
229
+ e = "";
230
+ }
231
+ return Array.isArray(e) ? e = Rr(e) : e = String(e || ""), e;
232
+ }
233
+ var se = (
234
+ /** @class */
235
+ function() {
236
+ function e(r) {
237
+ r === void 0 && (r = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = r;
238
+ }
239
+ return e.prototype.serializeKey = function(r) {
240
+ return Tr(r);
241
+ }, e.prototype.get = function(r) {
242
+ var t = this.serializeKey(r);
243
+ return this.items.get(t);
244
+ }, e.prototype.set = function(r, t, o) {
245
+ var a = this.serializeKey(r), n = o || this.ttl, u = Date.now(), d = {
246
+ data: t,
247
+ createdAt: u,
248
+ expiresAt: n ? u + n : 1 / 0
249
+ };
250
+ this.dispatchExpire(n, d, a), this.items.set(a, d);
251
+ }, e.prototype.dispatchExpire = function(r, t, o) {
252
+ var a = this;
253
+ r && setTimeout(function() {
254
+ var n = Date.now(), u = n >= t.expiresAt;
255
+ u && a.delete(o);
256
+ }, r);
257
+ }, e.prototype.delete = function(r) {
258
+ this.items.delete(r);
259
+ }, e;
260
+ }()
261
+ );
262
+ function Er() {
263
+ return typeof navigator.onLine < "u" ? navigator.onLine : !0;
264
+ }
265
+ function _r() {
266
+ return typeof document < "u" && typeof document.visibilityState < "u" ? document.visibilityState !== "hidden" : !0;
267
+ }
268
+ var Cr = function(e) {
269
+ return fetch(e).then(function(r) {
270
+ return r.json();
271
+ });
272
+ };
273
+ const ae = {
274
+ isOnline: Er,
275
+ isDocumentVisible: _r,
276
+ fetcher: Cr
277
+ };
278
+ var b = function() {
279
+ return b = Object.assign || function(e) {
280
+ for (var r, t = 1, o = arguments.length; t < o; t++) {
281
+ r = arguments[t];
282
+ for (var a in r) Object.prototype.hasOwnProperty.call(r, a) && (e[a] = r[a]);
283
+ }
284
+ return e;
285
+ }, b.apply(this, arguments);
286
+ }, P = function(e, r, t, o) {
287
+ function a(n) {
288
+ return n instanceof t ? n : new t(function(u) {
289
+ u(n);
290
+ });
291
+ }
292
+ return new (t || (t = Promise))(function(n, u) {
293
+ function d(s) {
294
+ try {
295
+ i(o.next(s));
296
+ } catch (l) {
297
+ u(l);
298
+ }
299
+ }
300
+ function f(s) {
301
+ try {
302
+ i(o.throw(s));
303
+ } catch (l) {
304
+ u(l);
305
+ }
306
+ }
307
+ function i(s) {
308
+ s.done ? n(s.value) : a(s.value).then(d, f);
309
+ }
310
+ i((o = o.apply(e, r || [])).next());
311
+ });
312
+ }, $ = function(e, r) {
313
+ var t = { label: 0, sent: function() {
314
+ if (n[0] & 1) throw n[1];
315
+ return n[1];
316
+ }, trys: [], ops: [] }, o, a, n, u;
317
+ return u = { next: d(0), throw: d(1), return: d(2) }, typeof Symbol == "function" && (u[Symbol.iterator] = function() {
318
+ return this;
319
+ }), u;
320
+ function d(i) {
321
+ return function(s) {
322
+ return f([i, s]);
323
+ };
324
+ }
325
+ function f(i) {
326
+ if (o) throw new TypeError("Generator is already executing.");
327
+ for (; t; ) try {
328
+ if (o = 1, a && (n = i[0] & 2 ? a.return : i[0] ? a.throw || ((n = a.return) && n.call(a), 0) : a.next) && !(n = n.call(a, i[1])).done) return n;
329
+ switch (a = 0, n && (i = [i[0] & 2, n.value]), i[0]) {
330
+ case 0:
331
+ case 1:
332
+ n = i;
333
+ break;
334
+ case 4:
335
+ return t.label++, { value: i[1], done: !1 };
336
+ case 5:
337
+ t.label++, a = i[1], i = [0];
338
+ continue;
339
+ case 7:
340
+ i = t.ops.pop(), t.trys.pop();
341
+ continue;
342
+ default:
343
+ if (n = t.trys, !(n = n.length > 0 && n[n.length - 1]) && (i[0] === 6 || i[0] === 2)) {
344
+ t = 0;
345
+ continue;
346
+ }
347
+ if (i[0] === 3 && (!n || i[1] > n[0] && i[1] < n[3])) {
348
+ t.label = i[1];
349
+ break;
350
+ }
351
+ if (i[0] === 6 && t.label < n[1]) {
352
+ t.label = n[1], n = i;
353
+ break;
354
+ }
355
+ if (n && t.label < n[2]) {
356
+ t.label = n[2], t.ops.push(i);
357
+ break;
358
+ }
359
+ n[2] && t.ops.pop(), t.trys.pop();
360
+ continue;
361
+ }
362
+ i = r.call(e, t);
363
+ } catch (s) {
364
+ i = [6, s], a = 0;
365
+ } finally {
366
+ o = n = 0;
367
+ }
368
+ if (i[0] & 5) throw i[1];
369
+ return { value: i[0] ? i[1] : void 0, done: !0 };
370
+ }
371
+ }, Sr = function(e, r) {
372
+ var t = typeof Symbol == "function" && e[Symbol.iterator];
373
+ if (!t) return e;
374
+ var o = t.call(e), a, n = [], u;
375
+ try {
376
+ for (; (r === void 0 || r-- > 0) && !(a = o.next()).done; ) n.push(a.value);
377
+ } catch (d) {
378
+ u = { error: d };
379
+ } finally {
380
+ try {
381
+ a && !a.done && (t = o.return) && t.call(o);
382
+ } finally {
383
+ if (u) throw u.error;
384
+ }
385
+ }
386
+ return n;
387
+ }, Ir = function(e, r, t) {
388
+ if (t || arguments.length === 2) for (var o = 0, a = r.length, n; o < a; o++)
389
+ (n || !(o in r)) && (n || (n = Array.prototype.slice.call(r, 0, o)), n[o] = r[o]);
390
+ return e.concat(n || Array.prototype.slice.call(r));
391
+ }, Oe = new se(), Q = new se(), ie = new se(), Le = {
392
+ cache: Oe,
393
+ refreshInterval: 0,
394
+ ttl: 0,
395
+ serverTTL: 1e3,
396
+ dedupingInterval: 2e3,
397
+ revalidateOnFocus: !0,
398
+ revalidateDebounce: 0,
399
+ shouldRetryOnError: !0,
400
+ errorRetryInterval: 5e3,
401
+ errorRetryCount: 5,
402
+ fetcher: ae.fetcher,
403
+ isOnline: ae.isOnline,
404
+ isDocumentVisible: ae.isDocumentVisible
405
+ };
406
+ function Ar(e, r, t) {
407
+ var o = Q.get(e);
408
+ if (o)
409
+ o.data.push(r);
410
+ else {
411
+ var a = 5e3;
412
+ Q.set(e, [r], t > 0 ? t + a : t);
413
+ }
414
+ }
415
+ function Dr(e, r, t) {
416
+ if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && r > t.errorRetryCount)) {
417
+ var o = Math.min(r || 0, t.errorRetryCount), a = o * t.errorRetryInterval;
418
+ setTimeout(function() {
419
+ e(null, { errorRetryCount: o + 1, shouldRetryOnError: !0 });
420
+ }, a);
421
+ }
422
+ }
423
+ var Re = function(e, r, t, o) {
424
+ return t === void 0 && (t = Oe), o === void 0 && (o = Le.ttl), P(void 0, void 0, void 0, function() {
425
+ var a, n, u, d, f, i, s;
426
+ return $(this, function(l) {
427
+ switch (l.label) {
428
+ case 0:
429
+ if (!wr(r)) return [3, 5];
430
+ l.label = 1;
431
+ case 1:
432
+ return l.trys.push([1, 3, , 4]), [4, r];
433
+ case 2:
434
+ return a = l.sent(), [3, 4];
435
+ case 3:
436
+ return d = l.sent(), n = d, [3, 4];
437
+ case 4:
438
+ return [3, 6];
439
+ case 5:
440
+ a = r, l.label = 6;
441
+ case 6:
442
+ if (u = !1, f = { data: a, error: n, isValidating: u }, typeof a < "u")
443
+ try {
444
+ t.set(e, f, o);
445
+ } catch (c) {
446
+ console.error("swrv(mutate): failed to set cache", c);
447
+ }
448
+ return i = Q.get(e), i && i.data.length && (s = i.data.filter(function(c) {
449
+ return c.key === e;
450
+ }), s.forEach(function(c, v) {
451
+ typeof f.data < "u" && (c.data = f.data), c.error = f.error, c.isValidating = f.isValidating, c.isLoading = f.isValidating;
452
+ var h = v === s.length - 1;
453
+ h || delete s[v];
454
+ }), s = s.filter(Boolean)), [2, f];
455
+ }
456
+ });
457
+ });
458
+ };
459
+ function br() {
460
+ for (var e = this, r = [], t = 0; t < arguments.length; t++)
461
+ r[t] = arguments[t];
462
+ var o, a, n = b({}, Le), u = !1, d = !1, f = Me(), i = (f == null ? void 0 : f.proxy) || f;
463
+ if (!i)
464
+ return console.error("Could not get current instance, check to make sure that `useSwrv` is declared in the top level of the setup function."), null;
465
+ var s = (i == null ? void 0 : i.$isServer) || !1;
466
+ r.length >= 1 && (o = r[0]), r.length >= 2 && (a = r[1]), r.length > 2 && (n = b(b({}, n), r[2]));
467
+ var l = s ? n.serverTTL : n.ttl, c = typeof o == "function" ? o : Y(o);
468
+ typeof a > "u" && (a = n.fetcher);
469
+ var v = null;
470
+ v || (v = Fe({
471
+ data: void 0,
472
+ error: void 0,
473
+ isValidating: !0,
474
+ isLoading: !0,
475
+ key: null
476
+ }));
477
+ var h = function(m, g) {
478
+ return P(e, void 0, void 0, function() {
479
+ var N, E, I, A, x, ce, J, de = this;
480
+ return $(this, function(Z) {
481
+ switch (Z.label) {
482
+ case 0:
483
+ return N = v.data === void 0, E = c.value, E ? (I = n.cache.get(E), A = I && I.data, v.isValidating = !0, v.isLoading = !A, A && (v.data = A.data, v.error = A.error), x = m || a, !x || !n.isDocumentVisible() && !N || (g == null ? void 0 : g.forceRevalidate) !== void 0 && !(g != null && g.forceRevalidate) ? (v.isValidating = !1, v.isLoading = !1, [
484
+ 2
485
+ /*return*/
486
+ ]) : I && (ce = !!(Date.now() - I.createdAt >= n.dedupingInterval || g != null && g.forceRevalidate), !ce) ? (v.isValidating = !1, v.isLoading = !1, [
487
+ 2
488
+ /*return*/
489
+ ]) : (J = function() {
490
+ return P(de, void 0, void 0, function() {
491
+ var k, fe, ee, ve;
492
+ return $(this, function(X) {
493
+ switch (X.label) {
494
+ case 0:
495
+ return k = ie.get(E), k ? [3, 2] : (fe = Array.isArray(E) ? E : [E], ee = x.apply(void 0, Ir([], Sr(fe), !1)), ie.set(E, ee, n.dedupingInterval), [4, Re(E, ee, n.cache, l)]);
496
+ case 1:
497
+ return X.sent(), [3, 4];
498
+ case 2:
499
+ return [4, Re(E, k.data, n.cache, l)];
500
+ case 3:
501
+ X.sent(), X.label = 4;
502
+ case 4:
503
+ return v.isValidating = !1, v.isLoading = !1, ie.delete(E), v.error !== void 0 && (ve = !u && n.shouldRetryOnError && (g ? g.shouldRetryOnError : !0), ve && Dr(h, g ? g.errorRetryCount : 1, n)), [
504
+ 2
505
+ /*return*/
506
+ ];
507
+ }
508
+ });
509
+ });
510
+ }, A && n.revalidateDebounce ? (setTimeout(function() {
511
+ return P(de, void 0, void 0, function() {
512
+ return $(this, function(k) {
513
+ switch (k.label) {
514
+ case 0:
515
+ return u ? [3, 2] : [4, J()];
516
+ case 1:
517
+ k.sent(), k.label = 2;
518
+ case 2:
519
+ return [
520
+ 2
521
+ /*return*/
522
+ ];
523
+ }
524
+ });
525
+ });
526
+ }, n.revalidateDebounce), [3, 3]) : [3, 1])) : [
527
+ 2
528
+ /*return*/
529
+ ];
530
+ case 1:
531
+ return [4, J()];
532
+ case 2:
533
+ Z.sent(), Z.label = 3;
534
+ case 3:
535
+ return [
536
+ 2
537
+ /*return*/
538
+ ];
539
+ }
540
+ });
541
+ });
542
+ }, R = function() {
543
+ return P(e, void 0, void 0, function() {
544
+ return $(this, function(m) {
545
+ return [2, h(null, { shouldRetryOnError: !1 })];
546
+ });
547
+ });
548
+ }, y = null;
549
+ xe(function() {
550
+ var m = function() {
551
+ return P(e, void 0, void 0, function() {
552
+ return $(this, function(g) {
553
+ switch (g.label) {
554
+ case 0:
555
+ return !v.error && n.isOnline() ? [4, h()] : [3, 2];
556
+ case 1:
557
+ return g.sent(), [3, 3];
558
+ case 2:
559
+ y && clearTimeout(y), g.label = 3;
560
+ case 3:
561
+ return n.refreshInterval && !u && (y = setTimeout(m, n.refreshInterval)), [
562
+ 2
563
+ /*return*/
564
+ ];
565
+ }
566
+ });
567
+ });
568
+ };
569
+ n.refreshInterval && (y = setTimeout(m, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", R, !1), window.addEventListener("focus", R, !1));
570
+ }), qe(function() {
571
+ u = !0, y && clearTimeout(y), n.revalidateOnFocus && (document.removeEventListener("visibilitychange", R, !1), window.removeEventListener("focus", R, !1));
572
+ var m = Q.get(c.value);
573
+ m && (m.data = m.data.filter(function(g) {
574
+ return g !== v;
575
+ }));
576
+ });
577
+ try {
578
+ Ue(c, function(m) {
579
+ Pe(c) || (c.value = m), v.key = m, v.isValidating = !!m, Ar(c.value, v, l), !s && !d && c.value && h(), d = !1;
580
+ }, {
581
+ immediate: !0
582
+ });
583
+ } catch {
584
+ }
585
+ var _ = b(b({}, $e(v)), { mutate: function(m, g) {
586
+ return h(m, b(b({}, g), { forceRevalidate: !0 }));
587
+ } });
588
+ return _;
589
+ }
590
+ function wr(e) {
591
+ return e !== null && typeof e == "object" && typeof e.then == "function";
592
+ }
593
+ function Or(e, r, t) {
594
+ const {
595
+ data: o,
596
+ error: a,
597
+ isValidating: n,
598
+ mutate: u
599
+ } = br(e, r, {
600
+ revalidateDebounce: 500,
601
+ revalidateOnFocus: !1,
602
+ dedupingInterval: 100,
603
+ ...t
604
+ });
605
+ return {
606
+ data: p(() => o.value),
607
+ response: o,
608
+ error: a,
609
+ isValidating: n,
610
+ revalidate: u
611
+ };
612
+ }
613
+ const M = {
614
+ useI18n: cr,
615
+ useMetricCardBuilder: pr,
616
+ useMetricFetcher: hr,
617
+ useRequest: Or
618
+ }, Ve = Symbol("METRICS_PROVIDER_KEY"), Lr = (e) => {
619
+ const {
620
+ datasource: r,
621
+ dimension: t,
622
+ dimensionFilterValue: o,
623
+ additionalFilter: a,
624
+ queryReady: n,
625
+ timeRange: u,
626
+ hasTrendAccess: d,
627
+ refreshInterval: f,
628
+ abortController: i,
629
+ queryFn: s,
630
+ averageLatencies: l
631
+ } = e;
632
+ if (o && !t)
633
+ throw new Error("Must provide a dimension if filtering by a value");
634
+ const c = !!(t && o), v = !!(t && !o), h = p(() => {
635
+ const g = [];
636
+ return c && g.push({
637
+ field: t,
638
+ operator: "in",
639
+ value: [o]
640
+ }), a.value && g.push(...je(r.value, a.value)), g;
641
+ }), R = {
642
+ datasource: r,
643
+ metrics: Y([
644
+ "request_count"
645
+ ]),
646
+ // Traffic and error rate cards should only try to query for the dimension if it's going to be used.
647
+ // It isn't used for single entity queries.
648
+ dimensions: [
649
+ ...t && !c ? [t] : [],
650
+ "status_code_grouped"
651
+ ],
652
+ filter: h,
653
+ queryReady: n,
654
+ timeRange: u,
655
+ // Traffic and error rate cards can't query trend if multiple entities are expected.
656
+ withTrend: p(() => d.value && !v),
657
+ refreshInterval: f,
658
+ queryFn: s,
659
+ abortController: i,
660
+ refreshCounter: e.refreshCounter
661
+ }, y = {
662
+ datasource: r,
663
+ metrics: p(() => [
664
+ l.value ? "response_latency_average" : "response_latency_p99"
665
+ ]),
666
+ // To keep single-entity queries consistent, don't bother querying the dimension for latency
667
+ // in the single-entity case, even though it's possible.
668
+ ...t && !c ? { dimensions: [t] } : {},
669
+ filter: h,
670
+ queryReady: n,
671
+ timeRange: u,
672
+ // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
673
+ withTrend: p(() => d.value && !v),
674
+ refreshInterval: f,
675
+ queryFn: s,
676
+ abortController: i,
677
+ refreshCounter: e.refreshCounter
678
+ }, _ = M.useMetricFetcher(R), m = M.useMetricFetcher(y);
679
+ return {
680
+ trafficData: _,
681
+ latencyData: m
682
+ };
683
+ }, gt = /* @__PURE__ */ W({
684
+ __name: "MetricsProvider",
685
+ props: {
686
+ datasource: { default: void 0 },
687
+ maxTimeRange: { default: "30d" },
688
+ overrideTimeRange: { default: void 0 },
689
+ dimension: { default: void 0 },
690
+ filterValue: { default: void 0 },
691
+ additionalFilter: { default: void 0 },
692
+ queryReady: { type: Boolean, default: !0 },
693
+ refreshInterval: { default: fr },
694
+ longCardTitles: { type: Boolean, default: !1 },
695
+ containerTitle: { default: void 0 },
696
+ description: { default: void 0 },
697
+ percentileLatency: { type: Boolean, default: void 0 },
698
+ abortController: { default: void 0 },
699
+ refreshCounter: { default: 0 }
700
+ },
701
+ setup(e) {
702
+ const r = e;
703
+ if (r.dimension && He.findIndex((c) => c === r.dimension) === -1)
704
+ throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
705
+ const t = Ce(vr);
706
+ let o;
707
+ t ? o = t.queryFn : (console.warn("Analytics dashboards require a query bridge supplied via provide / inject."), console.warn("Please ensure your application has a query bridge provided under the key 'analytics-query-provider', as described in"), console.warn("https://github.com/Kong/public-ui-components/blob/main/packages/analytics/analytics-metric-provider/README.md#requirements"), o = () => Promise.reject(new Error("Query bridge required")));
708
+ const a = We(), n = p(() => !0), u = p(() => !a.loading && r.queryReady), d = p(() => r.datasource ? r.datasource : "basic"), f = p(() => {
709
+ const c = r.overrideTimeRange;
710
+ return c && !c.tz && (c.tz = new Intl.DateTimeFormat().resolvedOptions().timeZone), c || {
711
+ type: "relative",
712
+ time_range: "7d",
713
+ tz: new Intl.DateTimeFormat().resolvedOptions().timeZone
714
+ };
715
+ }), i = p(() => !r.percentileLatency), {
716
+ trafficData: s,
717
+ latencyData: l
718
+ } = Lr({
719
+ datasource: d,
720
+ dimension: r.dimension,
721
+ dimensionFilterValue: r.filterValue,
722
+ additionalFilter: G(r, "additionalFilter"),
723
+ queryReady: u,
724
+ timeRange: f,
725
+ hasTrendAccess: n,
726
+ refreshInterval: r.refreshInterval,
727
+ queryFn: o,
728
+ averageLatencies: i,
729
+ abortController: r.abortController,
730
+ refreshCounter: G(r, "refreshCounter")
731
+ });
732
+ return ze(Ve, {
733
+ data: {
734
+ traffic: s,
735
+ latency: l
736
+ },
737
+ description: G(() => r.description),
738
+ containerTitle: G(() => r.containerTitle),
739
+ hasTrendAccess: n,
740
+ longCardTitles: r.longCardTitles,
741
+ averageLatencies: i
742
+ }), (c, v) => Se(c.$slots, "default", {
743
+ hasTrendAccess: n.value,
744
+ timeRange: f.value
745
+ });
746
+ }
747
+ });
748
+ function Vr(e) {
749
+ return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
750
+ }
751
+ var Ne = { exports: {} };
752
+ (function(e) {
753
+ (function() {
754
+ function r(i, s) {
755
+ if (s.separator === !1 || i < 1e3)
756
+ return i.toString();
757
+ var l = typeof s.separator == "string" ? s.separator : ",", c = [], v = Math.round(i).toString().split("");
758
+ return v.reverse().forEach(function(h, R) {
759
+ R && R % 3 === 0 && c.push(l), c.push(h);
760
+ }), c.reverse().join("");
761
+ }
762
+ function t(i, s, l) {
763
+ var c = i / s, v = l.round ? "round" : "floor";
764
+ return l.decimal === !1 ? (i = Math[v](c), i.toString()) : (l.precision ? i = c : i = c < 10 ? Math[v](c * 10) / 10 : Math[v](c), i = i.toString(), typeof l.decimal == "string" && (i = i.replace(".", l.decimal)), i);
765
+ }
766
+ var o = 1e3, a = 1e4, n = 1e6, u = 1e9, d = 1e12;
767
+ function f(i, s) {
768
+ var l;
769
+ s = s || {};
770
+ var c = i < 0;
771
+ c && (i = Math.abs(i)), s.precision && (i = parseFloat(i.toPrecision(s.precision)));
772
+ var v = s.min10k ? a : o;
773
+ return i < v || s.precision && s.precision > Math.log10(i) ? l = r(t(i, 1, s), s) : i < n ? l = t(i, o, s) + "k" : i < u ? l = t(i, n, s) + "m" : i < d ? l = r(t(i, u, s), s) + "b" : l = r(t(i, d, s), s) + "t", c && (l = "-" + l), s.capital && (l = l.toUpperCase()), s.prefix && (l = s.prefix + l), s.suffix && (l = l + s.suffix), l;
774
+ }
775
+ f.addCommas = r, e.exports = f;
776
+ })();
777
+ })(Ne);
778
+ var Nr = Ne.exports;
779
+ const kr = /* @__PURE__ */ Vr(Nr);
780
+ var O = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(O || {}), D = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.ExtraLarge = "xl", e))(D || {});
781
+ const ue = 2, Te = ue + 2, Mr = (e, r, t = !1) => {
782
+ let o = !r || Number(e.toFixed(Te)) === 0 ? 0 : Number(e.toFixed(Te)) > 0 ? 1 : -1;
783
+ return t && (o *= -1), o;
784
+ }, Fr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(ue)}%` : t, xr = (e, r) => r === 0 ? 0 : e / r - 1, qr = (e, r = !1) => (r && (e *= -1), e > 0 ? Je : e < 0 ? Ze : De), Ur = "#ad000e", oe = "#6c7489", Ee = "#52596e", Pr = "#007d60", j = "16px", $r = "20px", zr = {
785
+ key: 0,
786
+ class: "metricscard-description"
787
+ }, Kr = { class: "metricscard-valuetrend" }, Br = {
788
+ key: 0,
789
+ class: "metricscard-error"
790
+ }, Xr = {
791
+ key: 2,
792
+ class: "metricscard-trend"
793
+ }, Gr = { "data-testid": "metric-trend-change" }, jr = {
794
+ key: 0,
795
+ class: "metricscard-trend-range"
796
+ }, Hr = /* @__PURE__ */ W({
797
+ __name: "MetricsCard",
798
+ props: {
799
+ cardType: {
800
+ type: String,
801
+ required: !0,
802
+ default: O.GENERIC_COUNT
803
+ },
804
+ title: {
805
+ type: String,
806
+ default: "0%",
807
+ required: !0
808
+ },
809
+ description: {
810
+ type: String,
811
+ default: "",
812
+ required: !1
813
+ },
814
+ tooltip: {
815
+ type: String,
816
+ required: !1,
817
+ default: ""
818
+ },
819
+ timeframe: {
820
+ type: String,
821
+ required: !1,
822
+ default: ""
823
+ },
824
+ metricValue: {
825
+ type: String,
826
+ default: ""
827
+ },
828
+ metricChange: {
829
+ type: String,
830
+ required: !0
831
+ },
832
+ changePolarity: {
833
+ type: Number,
834
+ required: !0
835
+ },
836
+ trendIcon: {
837
+ type: Object,
838
+ default: De
839
+ },
840
+ trendRange: {
841
+ type: String,
842
+ default: ""
843
+ },
844
+ hasError: {
845
+ type: Boolean,
846
+ default: !1
847
+ },
848
+ errorMessage: {
849
+ type: String,
850
+ default: "Vitals data error"
851
+ },
852
+ cardSize: {
853
+ type: String,
854
+ required: !1,
855
+ default: () => D.Large
856
+ },
857
+ hasContainerTitle: {
858
+ type: Boolean,
859
+ required: !1,
860
+ default: !1
861
+ },
862
+ titleTag: {
863
+ type: String,
864
+ default: "span"
865
+ }
866
+ },
867
+ setup(e) {
868
+ const r = /* @__PURE__ */ new Map([
869
+ [O.GENERIC_COUNT, er],
870
+ [O.TRAFFIC, rr],
871
+ [O.ERROR_RATE, tr],
872
+ [O.LATENCY, nr]
873
+ ]), t = e, o = (d) => {
874
+ const f = {
875
+ red: `var(--kui-color-text-danger-strong, ${Ur})`,
876
+ green: `var(--kui-color-text-success, ${Pr})`,
877
+ grey: `var(--kui-color-text-neutral-strong, ${Ee})`
878
+ };
879
+ return d > 0 ? f.green : d < 0 ? f.red : f.grey;
880
+ }, a = (d) => d > 0 ? "positive" : d < 0 ? "negative" : "neutral", n = [D.Medium, D.Large].includes(t.cardSize), u = [D.Small].includes(t.cardSize);
881
+ return (d, f) => {
882
+ const i = Ie("KTooltip");
883
+ return T(), S("div", {
884
+ class: z(["metricscard", e.cardSize])
885
+ }, [
886
+ q("div", {
887
+ class: z(["metricscard-title", e.cardSize])
888
+ }, [
889
+ C(u) ? V("", !0) : (T(), U(re(C(r).get(e.cardType)), {
890
+ key: 0,
891
+ class: "metricscard-icon",
892
+ color: `var(--kui-color-text-neutral, ${C(oe)})`,
893
+ size: C(j)
894
+ }, null, 8, ["color", "size"])),
895
+ (T(), U(re(e.titleTag), null, {
896
+ default: me(() => [
897
+ Ae(w(e.title), 1)
898
+ ]),
899
+ _: 1
900
+ })),
901
+ e.tooltip ? (T(), U(i, {
902
+ key: 1,
903
+ class: "metricscard-tooltip",
904
+ placement: "right",
905
+ text: e.tooltip
906
+ }, {
907
+ default: me(() => [
908
+ F(C(ar), {
909
+ color: `var(--kui-color-text-neutral, ${C(oe)})`,
910
+ size: C(j)
911
+ }, null, 8, ["color", "size"])
912
+ ]),
913
+ _: 1
914
+ }, 8, ["text"])) : V("", !0)
915
+ ], 2),
916
+ e.description && C(n) ? (T(), S("div", zr, [
917
+ q("span", null, w(e.description), 1)
918
+ ])) : V("", !0),
919
+ q("div", Kr, [
920
+ e.hasError ? (T(), S("div", Br, [
921
+ F(C(be), {
922
+ color: `var(--kui-color-text-neutral, ${C(oe)})`,
923
+ size: C($r)
924
+ }, null, 8, ["color", "size"]),
925
+ q("div", null, " " + w(e.errorMessage), 1)
926
+ ])) : (T(), S("div", {
927
+ key: 1,
928
+ class: z(["metricscard-value", e.cardSize]),
929
+ "data-testid": "metric-value"
930
+ }, w(e.metricValue), 3)),
931
+ C(n) ? (T(), S("div", Xr, [
932
+ q("div", {
933
+ class: z(["metricscard-trend-change", a(e.changePolarity)]),
934
+ "data-testid": "metric-trend-parent"
935
+ }, [
936
+ e.changePolarity !== 0 ? (T(), U(re(e.trendIcon), {
937
+ key: 0,
938
+ color: o(e.changePolarity),
939
+ size: C(j)
940
+ }, null, 8, ["color", "size"])) : (T(), U(C(ir), {
941
+ key: 1,
942
+ color: `var(--kui-color-text-neutral-strong, ${C(Ee)})`,
943
+ size: C(j)
944
+ }, null, 8, ["color", "size"])),
945
+ q("div", Gr, w(e.metricChange), 1)
946
+ ], 2),
947
+ e.trendRange ? (T(), S("div", jr, w(e.trendRange), 1)) : V("", !0)
948
+ ])) : V("", !0)
949
+ ])
950
+ ], 2);
951
+ };
952
+ }
953
+ }), le = (e, r) => {
954
+ const t = e.__vccOpts || e;
955
+ for (const [o, a] of r)
956
+ t[o] = a;
957
+ return t;
958
+ }, Yr = /* @__PURE__ */ le(Hr, [["__scopeId", "data-v-b1513f6f"]]), Qr = {}, Wr = { class: "loading-tabs" };
959
+ function Jr(e, r) {
960
+ const t = Ie("KSkeletonBox");
961
+ return T(), S("div", Wr, [
962
+ F(t, { width: "100" }),
963
+ F(t, { width: "75" })
964
+ ]);
965
+ }
966
+ const Zr = /* @__PURE__ */ le(Qr, [["render", Jr], ["__scopeId", "data-v-9c7113d7"]]), et = {
967
+ key: 0,
968
+ class: "container-title"
969
+ }, rt = {
970
+ key: 0,
971
+ class: "container-description"
972
+ }, tt = {
973
+ key: 1,
974
+ class: "error-display"
975
+ }, nt = {
976
+ key: 0,
977
+ class: "error-display-message"
978
+ }, at = {
979
+ key: 2,
980
+ class: "cards-wrapper"
981
+ }, it = /* @__PURE__ */ W({
982
+ __name: "MetricCardContainer",
983
+ props: {
984
+ fallbackDisplayText: {
985
+ type: String,
986
+ required: !0
987
+ },
988
+ cards: {
989
+ type: Array,
990
+ required: !0
991
+ },
992
+ errorMessage: {
993
+ type: String,
994
+ required: !1,
995
+ default: ""
996
+ },
997
+ loading: {
998
+ type: Boolean,
999
+ required: !1,
1000
+ default: !1
1001
+ },
1002
+ hasTrendAccess: {
1003
+ type: Boolean,
1004
+ required: !1,
1005
+ default: !0
1006
+ },
1007
+ cardSize: {
1008
+ type: String,
1009
+ required: !1,
1010
+ default: () => D.Large
1011
+ },
1012
+ containerTitle: {
1013
+ type: String,
1014
+ required: !1,
1015
+ default: ""
1016
+ },
1017
+ containerDescription: {
1018
+ type: String,
1019
+ required: !1,
1020
+ default: ""
1021
+ }
1022
+ },
1023
+ setup(e) {
1024
+ const r = e, t = p(() => r.cards.every((a) => (a == null ? void 0 : a.hasError) === !0)), o = (a) => {
1025
+ const n = xr(a.currentValue, a.previousValue) || 0, u = Mr(n, r.hasTrendAccess, a.increaseIsBad);
1026
+ return {
1027
+ metricValue: a.formatValueFn ? a.formatValueFn(a.currentValue) : kr(a.currentValue, { capital: !0, round: !0 }) || "0",
1028
+ metricChange: a.formatChangeFn ? a.formatChangeFn(n) : Fr(n, r.hasTrendAccess, r.fallbackDisplayText),
1029
+ changePolarity: u,
1030
+ trendIcon: qr(u, a.increaseIsBad),
1031
+ cardSize: r.cardSize,
1032
+ hasContainerTitle: !!r.containerTitle
1033
+ };
1034
+ };
1035
+ return (a, n) => (T(), S("div", {
1036
+ class: z(["kong-ui-public-metric-card-container", e.cardSize])
1037
+ }, [
1038
+ r.containerTitle || r.containerDescription ? (T(), S("div", et, [
1039
+ Ae(w(r.containerTitle) + " ", 1),
1040
+ r.containerDescription ? (T(), S("div", rt, w(r.containerDescription), 1)) : V("", !0)
1041
+ ])) : V("", !0),
1042
+ t.value ? (T(), S("div", tt, [
1043
+ F(C(be), { class: "error-display-icon" }),
1044
+ e.errorMessage ? (T(), S("div", nt, w(e.errorMessage), 1)) : V("", !0)
1045
+ ])) : (T(), S("div", at, [
1046
+ (T(!0), S(ge, null, Ke(e.cards, (u, d) => (T(), S(ge, null, [
1047
+ e.loading ? (T(), S("div", {
1048
+ key: `skeleton-${d}`,
1049
+ class: "loading-tab"
1050
+ }, [
1051
+ F(Zr, {
1052
+ class: z(e.cardSize === C(D).Small ? "loading-tabs-small" : "loading-tabs-large")
1053
+ }, null, 8, ["class"])
1054
+ ])) : (T(), U(Yr, Be({ key: d }, { ref_for: !0 }, o(u), {
1055
+ "card-size": e.cardSize,
1056
+ "card-type": u.cardType,
1057
+ description: u.description,
1058
+ "error-message": e.errorMessage,
1059
+ "has-error": u.hasError,
1060
+ title: u.title,
1061
+ "title-tag": u.titleTag,
1062
+ tooltip: u.tooltip,
1063
+ "trend-range": u.trendRange
1064
+ }), null, 16, ["card-size", "card-type", "description", "error-message", "has-error", "title", "title-tag", "tooltip", "trend-range"]))
1065
+ ], 64))), 256))
1066
+ ]))
1067
+ ], 2));
1068
+ }
1069
+ }), ot = /* @__PURE__ */ le(it, [["__scopeId", "data-v-7080ba56"]]), yt = /* @__PURE__ */ W({
1070
+ __name: "MetricsConsumer",
1071
+ props: {
1072
+ lookupKey: { default: void 0 },
1073
+ cardSize: { default: D.Large },
1074
+ cardToDisplay: { default: void 0 }
1075
+ },
1076
+ setup(e) {
1077
+ const r = e, t = Ce(Ve);
1078
+ if (!t)
1079
+ throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
1080
+ const { traffic: o, latency: a } = t.data, { i18n: n } = M.useI18n(), u = p(() => t.containerTitle.value ? D.Medium : r.cardSize), d = M.useMetricCardBuilder({
1081
+ cardType: O.TRAFFIC,
1082
+ title: p(() => t.longCardTitles ? n.t("metricCard.long.traffic") : n.t("metricCard.short.traffic")),
1083
+ record: o.mapped,
1084
+ hasError: o.hasError,
1085
+ lookupKey: r.lookupKey,
1086
+ sumGroupedValues: B,
1087
+ trendRange: o.trendRange
1088
+ }), f = (y) => `${y.toFixed(ue)}%`, i = p(() => {
1089
+ const y = o.mapped.value, _ = K(y, "current", r.lookupKey, ye), m = K(y, "current", r.lookupKey, B), g = _ / m * 100 || 0, N = K(y, "previous", r.lookupKey, ye), E = K(y, "previous", r.lookupKey, B), I = N / E * 100 || 0;
1090
+ return {
1091
+ cardType: O.ERROR_RATE,
1092
+ hasError: o.hasError.value,
1093
+ currentValue: g,
1094
+ previousValue: I,
1095
+ formatValueFn: f,
1096
+ title: t.longCardTitles ? n.t("metricCard.long.errorRate") : n.t("metricCard.short.errorRate"),
1097
+ increaseIsBad: !0,
1098
+ trendRange: o.trendRange.value
1099
+ };
1100
+ }), s = (y) => `${y}ms`, l = M.useMetricCardBuilder({
1101
+ cardType: O.LATENCY,
1102
+ title: p(() => {
1103
+ const { longCardTitles: y, averageLatencies: _ } = t, m = _.value ? "averageLatency" : "p99Latency";
1104
+ return y ? n.t(`metricCard.long.${m}`) : u.value === D.Small ? n.t(`metricCard.small.${m}`) : n.t(`metricCard.short.${m}`);
1105
+ }),
1106
+ hasError: a.hasError,
1107
+ record: a.mapped,
1108
+ lookupKey: r.lookupKey,
1109
+ increaseIsBad: !0,
1110
+ formatValueFn: s,
1111
+ trendRange: a.trendRange
1112
+ }), c = p(() => r.cardToDisplay === "TRAFFIC" ? [d.value] : r.cardToDisplay === "ERROR_RATE" ? [i.value] : r.cardToDisplay === "LATENCY" ? [l.value] : [d.value, i.value, l.value]), v = p(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? o.isLoading.value : r.cardToDisplay === "LATENCY" ? a.isLoading.value : o.isLoading.value || a.isLoading.value), h = p(() => ({
1113
+ cards: c.value,
1114
+ containerTitle: t.containerTitle.value,
1115
+ containerDescription: t.description.value,
1116
+ loading: v.value,
1117
+ hasTrendAccess: t.hasTrendAccess.value,
1118
+ fallbackDisplayText: n.t("general.notAvailable"),
1119
+ cardSize: u.value,
1120
+ hideTitle: !0
1121
+ })), R = p(() => ({
1122
+ loading: h.value.loading,
1123
+ trafficCard: d.value,
1124
+ errorRateCard: i.value,
1125
+ latencyCard: l.value,
1126
+ errorRateFormatted: f(i.value.currentValue),
1127
+ latencyFormatted: s(l.value.currentValue)
1128
+ }));
1129
+ return (y, _) => Se(y.$slots, "default", { cardValues: R.value }, () => [
1130
+ F(ot, Xe(Ge(h.value)), null, 16)
1131
+ ]);
1132
+ }
1133
+ }), H = (e) => new Date(e), ht = (e, r) => {
1134
+ const t = e.body;
1135
+ e.reply({
1136
+ statusCode: 200,
1137
+ body: st(t, r)
1138
+ });
1139
+ }, _e = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), st = (e, r) => {
1140
+ var R, y, _;
1141
+ const t = r != null && r.timeRange && {
1142
+ start: r.timeRange.start,
1143
+ end: r.timeRange.end
1144
+ } || ((R = e.time_range) == null ? void 0 : R.type) === "absolute" ? {
1145
+ // @ts-ignore - already asserted time range is absolute above
1146
+ start: new Date(e.time_range.start),
1147
+ // @ts-ignore - already asserted time range is absolute above
1148
+ end: new Date(e.time_range.end)
1149
+ } : {
1150
+ start: new Date(Date.now() - 864e5),
1151
+ end: /* @__PURE__ */ new Date()
1152
+ }, o = t.end.getTime() - t.start.getTime(), a = e.granularity === "trend" ? {
1153
+ start: new Date(t.start.getTime() - o),
1154
+ end: t.end,
1155
+ granularity: t.end.getTime() - t.start.getTime()
1156
+ } : {
1157
+ start: t.start,
1158
+ end: t.end,
1159
+ granularity: t.end.getTime() - t.start.getTime()
1160
+ }, n = a.end.getTime(), u = a.start.getTime(), d = a.granularity, f = e.granularity === "trend" ? 2 : 1;
1161
+ if ((e.dimensions ?? []).length > 2)
1162
+ throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);
1163
+ const i = (e.dimensions ?? []).find((m) => m !== "time"), s = (r == null ? void 0 : r.dimensionNames) ?? [], l = Math.max(s.length, 1), c = e.metrics || [], v = [];
1164
+ for (let m = 0; m < f; m++)
1165
+ for (let g = 0; g < l; g++) {
1166
+ const N = i ? { [i]: s[g] } : {};
1167
+ (y = e.dimensions) != null && y.includes("status_code_grouped") ? B.forEach((E) => {
1168
+ const I = c.reduce((A, x) => ((r == null ? void 0 : r.deterministic) ?? !0 ? A[x] = (f - m) * 1e3 + 100 * g + 1 : A[x] = Math.round(Math.random() * 1e3), A), { ...N, status_code_grouped: E });
1169
+ v.push({
1170
+ version: "v1",
1171
+ timestamp: m === 0 ? H(u).toISOString() : H(u + d).toISOString(),
1172
+ event: I
1173
+ });
1174
+ }) : v.push({
1175
+ version: "v1",
1176
+ timestamp: m === 0 ? H(u).toISOString() : H(u + d).toISOString(),
1177
+ event: c.reduce((E, I) => ((r == null ? void 0 : r.deterministic) ?? !0 ? E[I] = (f - m) * 1e3 + 100 * g + 1 : E[I] = Math.round(Math.random() * 1e3), E), { ...N })
1178
+ });
1179
+ }
1180
+ const h = {
1181
+ start_ms: u,
1182
+ end_ms: n,
1183
+ start: new Date(u).toISOString(),
1184
+ end: new Date(n).toISOString(),
1185
+ granularity_ms: d,
1186
+ display: i ? {
1187
+ [i]: _e(s),
1188
+ ...(_ = e.dimensions) != null && _.includes("status_code_grouped") ? { status_code_grouped: _e(B) } : {}
1189
+ } : {},
1190
+ metric_names: e.metrics,
1191
+ query_id: "test"
1192
+ };
1193
+ return {
1194
+ data: v,
1195
+ meta: h
1196
+ };
1197
+ };
1198
+ export {
1199
+ B as ALL_STATUS_CODE_GROUPS,
1200
+ fr as DEFAULT_REFRESH_INTERVAL,
1201
+ vr as INJECT_QUERY_PROVIDER,
1202
+ dr as MAX_ANALYTICS_REQUEST_RETRIES,
1203
+ D as MetricCardSize,
1204
+ O as MetricCardType,
1205
+ yt as MetricsConsumer,
1206
+ gt as MetricsProvider,
1207
+ ye as STATUS_CODES_FAILED,
1208
+ mt as STATUS_CODES_SUCCESS,
1209
+ st as mockExploreResponse,
1210
+ ht as mockExploreResponseFromCypress
1211
+ };