@kong-ui-public/analytics-metric-provider 8.4.38 → 8.4.39
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useMetricFetcher.d.ts","sourceRoot":"","sources":["../../../src/composables/useMetricFetcher.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,KAAK,EAGV,eAAe,EAChB,MAAM,qCAAqC,CAAA;AAC5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"useMetricFetcher.d.ts","sourceRoot":"","sources":["../../../src/composables/useMetricFetcher.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAE9B,OAAO,KAAK,EAGV,eAAe,EAChB,MAAM,qCAAqC,CAAA;AAC5C,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,UAAU,CAAA;AAKpD,eAAO,MAAM,WAAW,eAAoB,CAAA;AAC5C,MAAM,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,GAAG,OAAO,WAAW,EAAE,MAAM,CAAC,MAAM,GAAG,OAAO,WAAW,EAAE,MAAM,CAAC,CAAC,CAAA;AAM5G,MAAM,WAAW,0BAA0B;IACzC,OAAO,EAAE,aAAa,CAAA;IACtB,QAAQ,EAAE,aAAa,CAAA;CACxB;AAED,MAAM,WAAW,aAAa;IAC5B,SAAS,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACvB,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC,CAAA;IACtB,GAAG,EAAE,GAAG,CAAC,eAAe,GAAG,SAAS,CAAC,CAAA;IACrC,MAAM,EAAE,GAAG,CAAC,0BAA0B,CAAC,CAAA;IACvC,UAAU,EAAE,GAAG,CAAC,MAAM,CAAC,CAAA;CACxB;AASD,wBAAgB,iBAAiB,CAAC,MAAM,EAAE,eAAe,EAAE,SAAS,EAAE,OAAO,GAAG,0BAA0B,CAiDzG;AAED,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,IAAI,EAAE,oBAAoB,GAAG,aAAa,CA2FlF"}
|
|
@@ -3,6 +3,7 @@ import type { ExploreQuery, ExploreResultV4 } from '@kong-ui-public/analytics-ut
|
|
|
3
3
|
export interface MockOptions {
|
|
4
4
|
dimensionNames?: string[];
|
|
5
5
|
injectErrors?: 'latency' | 'traffic' | 'all';
|
|
6
|
+
deterministic?: boolean;
|
|
6
7
|
}
|
|
7
8
|
export declare const mockExploreResponseFromCypress: (req: CyHttpMessages.IncomingHttpRequest, opts?: MockOptions) => void;
|
|
8
9
|
export declare const mockExploreResponse: (body: ExploreQuery, opts?: MockOptions) => ExploreResultV4;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mockExploreResponse.d.ts","sourceRoot":"","sources":["../../src/mockExploreResponse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAEhE,OAAO,KAAK,EAEV,YAAY,EACZ,eAAe,EAGhB,MAAM,qCAAqC,CAAA;AAM5C,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAA;
|
|
1
|
+
{"version":3,"file":"mockExploreResponse.d.ts","sourceRoot":"","sources":["../../src/mockExploreResponse.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAA;AAEhE,OAAO,KAAK,EAEV,YAAY,EACZ,eAAe,EAGhB,MAAM,qCAAqC,CAAA;AAM5C,MAAM,WAAW,WAAW;IAC1B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,KAAK,CAAA;IAC5C,aAAa,CAAC,EAAE,OAAO,CAAA;CACxB;AAED,eAAO,MAAM,8BAA8B,QACpC,cAAc,CAAC,mBAAmB,SAChC,WAAW,SAQnB,CAAA;AAQD,eAAO,MAAM,mBAAmB,SACxB,YAAY,SACX,WAAW,KAoFb,eACN,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { ref as j, watchEffect as Me, computed as
|
|
2
|
-
import {
|
|
1
|
+
import { ref as j, watchEffect as Me, computed as h, getCurrentInstance as xe, reactive as qe, onMounted as Ue, onUnmounted as Ke, watch as ze, isReadonly as Pe, toRefs as $e, defineComponent as Y, inject as Ce, toRef as ee, provide as Be, renderSlot as Ie, resolveComponent as Ae, openBlock as T, createElementBlock as C, createElementVNode as M, normalizeClass as P, unref as E, createBlock as N, resolveDynamicComponent as re, createCommentVNode as V, withCtx as ye, createTextVNode as De, toDisplayString as D, createVNode as K, Fragment as he, renderList as Xe, mergeProps as Ge, normalizeProps as je, guardReactiveProps as He } from "vue";
|
|
2
|
+
import { stripUnknownFilters as Ye, TimeframeKeys as se, queryableExploreDimensions as Qe, TimePeriods as be, DeltaQueryTime as We, UnaryQueryTime as Je } from "@kong-ui-public/analytics-utilities";
|
|
3
3
|
import { createI18n as Ze, i18nTComponent as er } from "@kong-ui-public/i18n";
|
|
4
4
|
import { useAnalyticsConfigStore as rr } from "@kong-ui-public/analytics-config-store";
|
|
5
5
|
import { TrendUpIcon as tr, TrendDownIcon as nr, IndeterminateSmallIcon as we, VitalsIcon as ar, CloudUploadIcon as ir, WarningOutlineIcon as or, ResponseIcon as sr, InfoIcon as ur, WarningIcon as Oe, EqualIcon as lr } from "@kong/icons";
|
|
@@ -46,7 +46,7 @@ function mr() {
|
|
|
46
46
|
// Translation component <i18n-t>
|
|
47
47
|
};
|
|
48
48
|
}
|
|
49
|
-
const yr = 2, $ = ["1XX", "2XX", "3XX", "4XX", "5XX"],
|
|
49
|
+
const yr = 2, $ = ["1XX", "2XX", "3XX", "4XX", "5XX"], ge = ["4XX", "5XX"], pt = ["1XX", "2XX", "3XX"], hr = 30 * 1e3, gr = "analytics-query-provider";
|
|
50
50
|
var Le = /* @__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))(Le || {});
|
|
51
51
|
const pr = (e) => {
|
|
52
52
|
var r, t, o, a, n;
|
|
@@ -90,26 +90,26 @@ function Rr(e = j({}), r, t, o = pr) {
|
|
|
90
90
|
swrvState: Le
|
|
91
91
|
};
|
|
92
92
|
}
|
|
93
|
-
const
|
|
93
|
+
const L = Symbol("default"), te = "status_code_grouped", pe = (e, r, t, o, a) => {
|
|
94
94
|
e[r][t] || (e[r][t] = {}), e[r][t][o] = a;
|
|
95
95
|
};
|
|
96
96
|
function Tr(e, r) {
|
|
97
97
|
var d;
|
|
98
|
-
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((c) => c ===
|
|
98
|
+
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((c) => c === te), u = a.find((c) => c !== te);
|
|
99
99
|
return a.length > 2 || a.length > 1 && !n ? (console.error("Don't know how to work with provided dimensions:", a), {
|
|
100
|
-
previous: { [
|
|
101
|
-
current: { [
|
|
100
|
+
previous: { [L]: { [L]: 0 } },
|
|
101
|
+
current: { [L]: { [L]: 0 } }
|
|
102
102
|
}) : e.data.reduce((c, i) => {
|
|
103
|
-
const s = i.event[t], l = u ? i.event[u] :
|
|
104
|
-
return new Date(i.timestamp).getTime() === o && r ?
|
|
103
|
+
const s = i.event[t], l = u ? i.event[u] : L, f = n ? i.event[te] : L;
|
|
104
|
+
return new Date(i.timestamp).getTime() === o && r ? pe(c, "previous", l, f, s) : pe(c, "current", l, f, s), c;
|
|
105
105
|
}, {
|
|
106
106
|
previous: {},
|
|
107
107
|
current: {}
|
|
108
108
|
});
|
|
109
109
|
}
|
|
110
110
|
function Er(e) {
|
|
111
|
-
e.queryReady === void 0 && (e.queryReady =
|
|
112
|
-
const { i18n: r } = F.useI18n(), t =
|
|
111
|
+
e.queryReady === void 0 && (e.queryReady = h(() => !0));
|
|
112
|
+
const { i18n: r } = F.useI18n(), t = h(() => {
|
|
113
113
|
var l, f;
|
|
114
114
|
return {
|
|
115
115
|
metrics: e.metrics.value,
|
|
@@ -121,12 +121,12 @@ function Er(e) {
|
|
|
121
121
|
...(f = e.filter.value) != null && f.length ? { filters: e.filter.value } : {},
|
|
122
122
|
time_range: e.timeframe.value.v4Query(e.tz.value)
|
|
123
123
|
};
|
|
124
|
-
}), o =
|
|
125
|
-
var f, v,
|
|
124
|
+
}), o = h(() => {
|
|
125
|
+
var f, v, g, m;
|
|
126
126
|
if (!((f = e.queryReady) != null && f.value))
|
|
127
127
|
return null;
|
|
128
128
|
const l = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
|
|
129
|
-
return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(
|
|
129
|
+
return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(g = e.dimensions) == null ? void 0 : g.join("-")}-${(m = e.metrics.value) == null ? void 0 : m.join("-")}-${l}`;
|
|
130
130
|
}), { response: a, error: n, isValidating: u } = F.useRequest(
|
|
131
131
|
() => o.value,
|
|
132
132
|
() => e.queryFn({
|
|
@@ -140,29 +140,29 @@ function Er(e) {
|
|
|
140
140
|
revalidateOnFocus: !1,
|
|
141
141
|
errorRetryCount: yr
|
|
142
142
|
}
|
|
143
|
-
), { state: d, swrvState: c } = Rr(a, n, u), i =
|
|
144
|
-
var l, f, v,
|
|
145
|
-
return !((f = (l = a.value) == null ? void 0 : l.data) != null && f.length) || !((
|
|
146
|
-
}), s =
|
|
147
|
-
var l, f
|
|
143
|
+
), { state: d, swrvState: c } = Rr(a, n, u), i = h(() => {
|
|
144
|
+
var l, f, v, g, m, p, _;
|
|
145
|
+
return !((f = (l = a.value) == null ? void 0 : l.data) != null && f.length) || !((g = (v = a.value) == null ? void 0 : v.meta) != null && g.display) || !((_ = (p = (m = a.value) == null ? void 0 : m.meta) == null ? void 0 : p.metric_names) != null && _.length) ? { current: {}, previous: {} } : Tr(a.value, e.withTrend.value);
|
|
146
|
+
}), s = h(() => {
|
|
147
|
+
var l, f;
|
|
148
148
|
if (e.timeframe.value.key === "custom") {
|
|
149
149
|
if (!((f = (l = a.value) == null ? void 0 : l.meta) != null && f.start_ms))
|
|
150
150
|
return "";
|
|
151
|
-
const { start_ms:
|
|
152
|
-
let
|
|
153
|
-
return e.withTrend.value && (
|
|
151
|
+
const { start_ms: v, end_ms: g } = a.value.meta;
|
|
152
|
+
let m = (g - v) / (1e3 * 60 * 60 * 24);
|
|
153
|
+
return e.withTrend.value && (m /= 2), r.t("trendRange.custom", { numDays: Math.round(m) });
|
|
154
154
|
} else
|
|
155
|
-
return e.withTrend.value ? r.t(`trendRange.${e.timeframe.value.key}`) :
|
|
155
|
+
return e.withTrend.value ? r.t(`trendRange.${e.timeframe.value.key}`) : "";
|
|
156
156
|
});
|
|
157
157
|
return {
|
|
158
|
-
isLoading:
|
|
159
|
-
hasError:
|
|
158
|
+
isLoading: h(() => c.PENDING === d.value),
|
|
159
|
+
hasError: h(() => c.ERROR === d.value),
|
|
160
160
|
raw: a,
|
|
161
161
|
mapped: i,
|
|
162
162
|
trendRange: s
|
|
163
163
|
};
|
|
164
164
|
}
|
|
165
|
-
const U = (e, r, t =
|
|
165
|
+
const U = (e, r, t = L, o) => (o ?? [L]).reduce((n, u) => {
|
|
166
166
|
const d = e[r][t];
|
|
167
167
|
return d ? n + (d[u] || 0) : n;
|
|
168
168
|
}, 0);
|
|
@@ -177,7 +177,7 @@ function _r(e) {
|
|
|
177
177
|
formatValueFn: d,
|
|
178
178
|
trendRange: c
|
|
179
179
|
} = e;
|
|
180
|
-
return
|
|
180
|
+
return h(() => {
|
|
181
181
|
let i = 0, s = 0;
|
|
182
182
|
if (a != null && a.value)
|
|
183
183
|
try {
|
|
@@ -202,13 +202,13 @@ function _r(e) {
|
|
|
202
202
|
};
|
|
203
203
|
});
|
|
204
204
|
}
|
|
205
|
-
var
|
|
205
|
+
var ne = /* @__PURE__ */ new WeakMap(), Re = 0;
|
|
206
206
|
function Sr(e) {
|
|
207
207
|
if (!e.length)
|
|
208
208
|
return "";
|
|
209
209
|
for (var r = "arg", t = 0; t < e.length; ++t) {
|
|
210
210
|
var o = void 0;
|
|
211
|
-
e[t] === null || typeof e[t] != "object" && typeof e[t] != "function" ? typeof e[t] == "string" ? o = '"' + e[t] + '"' : o = String(e[t]) :
|
|
211
|
+
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 = Re, ne.set(e[t], Re++)), r += "@" + o;
|
|
212
212
|
}
|
|
213
213
|
return r;
|
|
214
214
|
}
|
|
@@ -221,7 +221,7 @@ function Cr(e) {
|
|
|
221
221
|
}
|
|
222
222
|
return Array.isArray(e) ? e = Sr(e) : e = String(e || ""), e;
|
|
223
223
|
}
|
|
224
|
-
var
|
|
224
|
+
var ue = (
|
|
225
225
|
/** @class */
|
|
226
226
|
function() {
|
|
227
227
|
function e(r) {
|
|
@@ -261,7 +261,7 @@ var Dr = function(e) {
|
|
|
261
261
|
return r.json();
|
|
262
262
|
});
|
|
263
263
|
};
|
|
264
|
-
const
|
|
264
|
+
const ae = {
|
|
265
265
|
isOnline: Ir,
|
|
266
266
|
isDocumentVisible: Ar,
|
|
267
267
|
fetcher: Dr
|
|
@@ -379,7 +379,7 @@ var A = function() {
|
|
|
379
379
|
if (t || arguments.length === 2) for (var o = 0, a = r.length, n; o < a; o++)
|
|
380
380
|
(n || !(o in r)) && (n || (n = Array.prototype.slice.call(r, 0, o)), n[o] = r[o]);
|
|
381
381
|
return e.concat(n || Array.prototype.slice.call(r));
|
|
382
|
-
}, Ve = new
|
|
382
|
+
}, Ve = new ue(), H = new ue(), ie = new ue(), ke = {
|
|
383
383
|
cache: Ve,
|
|
384
384
|
refreshInterval: 0,
|
|
385
385
|
ttl: 0,
|
|
@@ -390,9 +390,9 @@ var A = function() {
|
|
|
390
390
|
shouldRetryOnError: !0,
|
|
391
391
|
errorRetryInterval: 5e3,
|
|
392
392
|
errorRetryCount: 5,
|
|
393
|
-
fetcher:
|
|
394
|
-
isOnline:
|
|
395
|
-
isDocumentVisible:
|
|
393
|
+
fetcher: ae.fetcher,
|
|
394
|
+
isOnline: ae.isOnline,
|
|
395
|
+
isDocumentVisible: ae.isDocumentVisible
|
|
396
396
|
};
|
|
397
397
|
function Or(e, r, t) {
|
|
398
398
|
var o = H.get(e);
|
|
@@ -411,7 +411,7 @@ function Lr(e, r, t) {
|
|
|
411
411
|
}, a);
|
|
412
412
|
}
|
|
413
413
|
}
|
|
414
|
-
var
|
|
414
|
+
var Te = function(e, r, t, o) {
|
|
415
415
|
return t === void 0 && (t = Ve), o === void 0 && (o = ke.ttl), x(void 0, void 0, void 0, function() {
|
|
416
416
|
var a, n, u, d, c, i, s;
|
|
417
417
|
return q(this, function(l) {
|
|
@@ -440,8 +440,8 @@ var Ee = function(e, r, t, o) {
|
|
|
440
440
|
return f.key === e;
|
|
441
441
|
}), s.forEach(function(f, v) {
|
|
442
442
|
typeof c.data < "u" && (f.data = c.data), f.error = c.error, f.isValidating = c.isValidating;
|
|
443
|
-
var
|
|
444
|
-
|
|
443
|
+
var g = v === s.length - 1;
|
|
444
|
+
g || delete s[v];
|
|
445
445
|
}), s = s.filter(Boolean)), [2, c];
|
|
446
446
|
}
|
|
447
447
|
});
|
|
@@ -464,33 +464,33 @@ function Vr() {
|
|
|
464
464
|
isValidating: !0,
|
|
465
465
|
key: null
|
|
466
466
|
}));
|
|
467
|
-
var
|
|
467
|
+
var g = function(R, y) {
|
|
468
468
|
return x(e, void 0, void 0, function() {
|
|
469
|
-
var I, S,
|
|
470
|
-
return q(this, function(
|
|
471
|
-
switch (
|
|
469
|
+
var I, S, O, z, Q, de, W, fe = this;
|
|
470
|
+
return q(this, function(J) {
|
|
471
|
+
switch (J.label) {
|
|
472
472
|
case 0:
|
|
473
|
-
return I = v.data === void 0, S = f.value, S ? (
|
|
473
|
+
return I = v.data === void 0, S = f.value, S ? (O = n.cache.get(S), z = O && O.data, v.isValidating = !0, z && (v.data = z.data, v.error = z.error), Q = R || a, !Q || !n.isDocumentVisible() && !I || (y == null ? void 0 : y.forceRevalidate) !== void 0 && !(y != null && y.forceRevalidate) ? (v.isValidating = !1, [
|
|
474
474
|
2
|
|
475
475
|
/*return*/
|
|
476
|
-
]) :
|
|
476
|
+
]) : O && (de = !!(Date.now() - O.createdAt >= n.dedupingInterval || y != null && y.forceRevalidate), !de) ? (v.isValidating = !1, [
|
|
477
477
|
2
|
|
478
478
|
/*return*/
|
|
479
|
-
]) : (
|
|
480
|
-
return x(
|
|
481
|
-
var k,
|
|
479
|
+
]) : (W = function() {
|
|
480
|
+
return x(fe, void 0, void 0, function() {
|
|
481
|
+
var k, ve, Z, me;
|
|
482
482
|
return q(this, function(B) {
|
|
483
483
|
switch (B.label) {
|
|
484
484
|
case 0:
|
|
485
|
-
return k =
|
|
485
|
+
return k = ie.get(S), k ? [3, 2] : (ve = Array.isArray(S) ? S : [S], Z = Q.apply(void 0, wr([], br(ve), !1)), ie.set(S, Z, n.dedupingInterval), [4, Te(S, Z, n.cache, l)]);
|
|
486
486
|
case 1:
|
|
487
487
|
return B.sent(), [3, 4];
|
|
488
488
|
case 2:
|
|
489
|
-
return [4,
|
|
489
|
+
return [4, Te(S, k.data, n.cache, l)];
|
|
490
490
|
case 3:
|
|
491
491
|
B.sent(), B.label = 4;
|
|
492
492
|
case 4:
|
|
493
|
-
return v.isValidating = !1,
|
|
493
|
+
return v.isValidating = !1, ie.delete(S), v.error !== void 0 && (me = !u && n.shouldRetryOnError && (y ? y.shouldRetryOnError : !0), me && Lr(g, y ? y.errorRetryCount : 1, n)), [
|
|
494
494
|
2
|
|
495
495
|
/*return*/
|
|
496
496
|
];
|
|
@@ -498,11 +498,11 @@ function Vr() {
|
|
|
498
498
|
});
|
|
499
499
|
});
|
|
500
500
|
}, z && n.revalidateDebounce ? (setTimeout(function() {
|
|
501
|
-
return x(
|
|
501
|
+
return x(fe, void 0, void 0, function() {
|
|
502
502
|
return q(this, function(k) {
|
|
503
503
|
switch (k.label) {
|
|
504
504
|
case 0:
|
|
505
|
-
return u ? [3, 2] : [4,
|
|
505
|
+
return u ? [3, 2] : [4, W()];
|
|
506
506
|
case 1:
|
|
507
507
|
k.sent(), k.label = 2;
|
|
508
508
|
case 2:
|
|
@@ -518,9 +518,9 @@ function Vr() {
|
|
|
518
518
|
/*return*/
|
|
519
519
|
];
|
|
520
520
|
case 1:
|
|
521
|
-
return [4,
|
|
521
|
+
return [4, W()];
|
|
522
522
|
case 2:
|
|
523
|
-
|
|
523
|
+
J.sent(), J.label = 3;
|
|
524
524
|
case 3:
|
|
525
525
|
return [
|
|
526
526
|
2
|
|
@@ -532,23 +532,23 @@ function Vr() {
|
|
|
532
532
|
}, m = function() {
|
|
533
533
|
return x(e, void 0, void 0, function() {
|
|
534
534
|
return q(this, function(R) {
|
|
535
|
-
return [2,
|
|
535
|
+
return [2, g(null, { shouldRetryOnError: !1 })];
|
|
536
536
|
});
|
|
537
537
|
});
|
|
538
|
-
},
|
|
538
|
+
}, p = null;
|
|
539
539
|
Ue(function() {
|
|
540
540
|
var R = function() {
|
|
541
541
|
return x(e, void 0, void 0, function() {
|
|
542
542
|
return q(this, function(y) {
|
|
543
543
|
switch (y.label) {
|
|
544
544
|
case 0:
|
|
545
|
-
return !v.error && n.isOnline() ? [4,
|
|
545
|
+
return !v.error && n.isOnline() ? [4, g()] : [3, 2];
|
|
546
546
|
case 1:
|
|
547
547
|
return y.sent(), [3, 3];
|
|
548
548
|
case 2:
|
|
549
|
-
|
|
549
|
+
p && clearTimeout(p), y.label = 3;
|
|
550
550
|
case 3:
|
|
551
|
-
return n.refreshInterval && !u && (
|
|
551
|
+
return n.refreshInterval && !u && (p = setTimeout(R, n.refreshInterval)), [
|
|
552
552
|
2
|
|
553
553
|
/*return*/
|
|
554
554
|
];
|
|
@@ -556,9 +556,9 @@ function Vr() {
|
|
|
556
556
|
});
|
|
557
557
|
});
|
|
558
558
|
};
|
|
559
|
-
n.refreshInterval && (
|
|
559
|
+
n.refreshInterval && (p = setTimeout(R, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", m, !1), window.addEventListener("focus", m, !1));
|
|
560
560
|
}), Ke(function() {
|
|
561
|
-
u = !0,
|
|
561
|
+
u = !0, p && clearTimeout(p), n.revalidateOnFocus && (document.removeEventListener("visibilitychange", m, !1), window.removeEventListener("focus", m, !1));
|
|
562
562
|
var R = H.get(f.value);
|
|
563
563
|
R && (R.data = R.data.filter(function(y) {
|
|
564
564
|
return y !== v;
|
|
@@ -566,14 +566,14 @@ function Vr() {
|
|
|
566
566
|
});
|
|
567
567
|
try {
|
|
568
568
|
ze(f, function(R) {
|
|
569
|
-
Pe(f) || (f.value = R), v.key = R, v.isValidating = !!R, Or(f.value, v, l), !s && !d && f.value &&
|
|
569
|
+
Pe(f) || (f.value = R), v.key = R, v.isValidating = !!R, Or(f.value, v, l), !s && !d && f.value && g(), d = !1;
|
|
570
570
|
}, {
|
|
571
571
|
immediate: !0
|
|
572
572
|
});
|
|
573
573
|
} catch {
|
|
574
574
|
}
|
|
575
575
|
var _ = A(A({}, $e(v)), { mutate: function(R, y) {
|
|
576
|
-
return
|
|
576
|
+
return g(R, A(A({}, y), { forceRevalidate: !0 }));
|
|
577
577
|
} });
|
|
578
578
|
return _;
|
|
579
579
|
}
|
|
@@ -593,7 +593,7 @@ function Nr(e, r, t) {
|
|
|
593
593
|
...t
|
|
594
594
|
});
|
|
595
595
|
return {
|
|
596
|
-
data:
|
|
596
|
+
data: h(() => o.value),
|
|
597
597
|
response: o,
|
|
598
598
|
error: a,
|
|
599
599
|
isValidating: n,
|
|
@@ -622,14 +622,14 @@ const F = {
|
|
|
622
622
|
} = e;
|
|
623
623
|
if (o && !t)
|
|
624
624
|
throw new Error("Must provide a dimension if filtering by a value");
|
|
625
|
-
const v = !!(t && o),
|
|
625
|
+
const v = !!(t && o), g = !!(t && !o), m = h(() => {
|
|
626
626
|
const I = [];
|
|
627
627
|
return v && I.push({
|
|
628
628
|
dimension: t,
|
|
629
629
|
type: "in",
|
|
630
630
|
values: [o]
|
|
631
|
-
}), a.value && I.push(...
|
|
632
|
-
}),
|
|
631
|
+
}), a.value && I.push(...Ye(r.value, a.value)), I;
|
|
632
|
+
}), p = {
|
|
633
633
|
datasource: r,
|
|
634
634
|
metrics: j([
|
|
635
635
|
"request_count"
|
|
@@ -645,13 +645,13 @@ const F = {
|
|
|
645
645
|
timeframe: u,
|
|
646
646
|
tz: d,
|
|
647
647
|
// Traffic and error rate cards can't query trend if multiple entities are expected.
|
|
648
|
-
withTrend:
|
|
648
|
+
withTrend: h(() => c.value && !g),
|
|
649
649
|
refreshInterval: i,
|
|
650
650
|
queryFn: l,
|
|
651
651
|
abortController: s
|
|
652
652
|
}, _ = {
|
|
653
653
|
datasource: r,
|
|
654
|
-
metrics:
|
|
654
|
+
metrics: h(() => [
|
|
655
655
|
f.value ? "response_latency_average" : "response_latency_p99"
|
|
656
656
|
]),
|
|
657
657
|
// To keep single-entity queries consistent, don't bother querying the dimension for latency
|
|
@@ -662,20 +662,20 @@ const F = {
|
|
|
662
662
|
timeframe: u,
|
|
663
663
|
tz: d,
|
|
664
664
|
// Don't query latency trends in the multi-entity case: it's possible, but wasteful.
|
|
665
|
-
withTrend:
|
|
665
|
+
withTrend: h(() => c.value && !g),
|
|
666
666
|
refreshInterval: i,
|
|
667
667
|
queryFn: l,
|
|
668
668
|
abortController: s
|
|
669
|
-
}, R = F.useMetricFetcher(
|
|
669
|
+
}, R = F.useMetricFetcher(p), y = F.useMetricFetcher(_);
|
|
670
670
|
return {
|
|
671
671
|
trafficData: R,
|
|
672
672
|
latencyData: y
|
|
673
673
|
};
|
|
674
|
-
}, Rt = /* @__PURE__ */
|
|
674
|
+
}, Rt = /* @__PURE__ */ Y({
|
|
675
675
|
__name: "MetricsProvider",
|
|
676
676
|
props: {
|
|
677
677
|
datasource: { default: void 0 },
|
|
678
|
-
maxTimeframe: { default:
|
|
678
|
+
maxTimeframe: { default: se.THIRTY_DAY },
|
|
679
679
|
overrideTimeframe: { default: void 0 },
|
|
680
680
|
tz: { default: void 0 },
|
|
681
681
|
dimension: { default: void 0 },
|
|
@@ -693,17 +693,17 @@ const F = {
|
|
|
693
693
|
const r = e;
|
|
694
694
|
if (r.dimension && Qe.findIndex((v) => v === r.dimension) === -1)
|
|
695
695
|
throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
|
|
696
|
-
const t =
|
|
696
|
+
const t = Ce(gr);
|
|
697
697
|
let o;
|
|
698
698
|
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")));
|
|
699
|
-
const a = rr(), n =
|
|
699
|
+
const a = rr(), n = h(() => !0), u = h(() => !a.loading && r.queryReady), d = h(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), c = h(() => r.datasource ? r.datasource : "basic"), i = h(() => r.overrideTimeframe || be.get(se.SEVEN_DAY)), s = h(() => !r.percentileLatency), {
|
|
700
700
|
trafficData: l,
|
|
701
701
|
latencyData: f
|
|
702
702
|
} = Fr({
|
|
703
703
|
datasource: c,
|
|
704
704
|
dimension: r.dimension,
|
|
705
705
|
dimensionFilterValue: r.filterValue,
|
|
706
|
-
additionalFilter:
|
|
706
|
+
additionalFilter: ee(r, "additionalFilter"),
|
|
707
707
|
queryReady: u,
|
|
708
708
|
timeframe: i,
|
|
709
709
|
tz: d,
|
|
@@ -718,12 +718,12 @@ const F = {
|
|
|
718
718
|
traffic: l,
|
|
719
719
|
latency: f
|
|
720
720
|
},
|
|
721
|
-
description:
|
|
722
|
-
containerTitle:
|
|
721
|
+
description: ee(() => r.description),
|
|
722
|
+
containerTitle: ee(() => r.containerTitle),
|
|
723
723
|
hasTrendAccess: n,
|
|
724
724
|
longCardTitles: r.longCardTitles,
|
|
725
725
|
averageLatencies: s
|
|
726
|
-
}), (v,
|
|
726
|
+
}), (v, g) => Ie(v.$slots, "default", {
|
|
727
727
|
hasTrendAccess: n.value,
|
|
728
728
|
timeframe: i.value
|
|
729
729
|
});
|
|
@@ -739,8 +739,8 @@ var Fe = { exports: {} };
|
|
|
739
739
|
if (s.separator === !1 || i < 1e3)
|
|
740
740
|
return i.toString();
|
|
741
741
|
var l = typeof s.separator == "string" ? s.separator : ",", f = [], v = Math.round(i).toString().split("");
|
|
742
|
-
return v.reverse().forEach(function(
|
|
743
|
-
m && m % 3 === 0 && f.push(l), f.push(
|
|
742
|
+
return v.reverse().forEach(function(g, m) {
|
|
743
|
+
m && m % 3 === 0 && f.push(l), f.push(g);
|
|
744
744
|
}), f.reverse().join("");
|
|
745
745
|
}
|
|
746
746
|
function t(i, s, l) {
|
|
@@ -762,13 +762,13 @@ var Fe = { exports: {} };
|
|
|
762
762
|
var xr = Fe.exports;
|
|
763
763
|
const qr = /* @__PURE__ */ Mr(xr);
|
|
764
764
|
var b = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(b || {}), w = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.ExtraLarge = "xl", e))(w || {});
|
|
765
|
-
const
|
|
766
|
-
let o = !r || Number(e.toFixed(
|
|
765
|
+
const le = 2, Ee = le + 2, Ur = (e, r, t = !1) => {
|
|
766
|
+
let o = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
|
|
767
767
|
return t && (o *= -1), o;
|
|
768
|
-
}, Kr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(
|
|
768
|
+
}, Kr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(le)}%` : t, zr = (e, r) => r === 0 ? 0 : e / r - 1, Pr = (e, r = !1) => (r && (e *= -1), e > 0 ? tr : e < 0 ? nr : we), $r = "#ad000e", oe = "#6c7489", _e = "#52596e", Br = "#007d60", X = "16px", Xr = "20px", Gr = { class: "metricscard" }, jr = {
|
|
769
769
|
key: 0,
|
|
770
770
|
class: "metricscard-description"
|
|
771
|
-
},
|
|
771
|
+
}, Hr = { class: "metricscard-valuetrend" }, Yr = {
|
|
772
772
|
key: 0,
|
|
773
773
|
class: "metricscard-error"
|
|
774
774
|
}, Qr = {
|
|
@@ -777,7 +777,7 @@ const ce = 2, _e = ce + 2, Ur = (e, r, t = !1) => {
|
|
|
777
777
|
}, Wr = { "data-testid": "metric-trend-change" }, Jr = {
|
|
778
778
|
key: 0,
|
|
779
779
|
class: "metricscard-trend-range"
|
|
780
|
-
}, Zr = /* @__PURE__ */
|
|
780
|
+
}, Zr = /* @__PURE__ */ Y({
|
|
781
781
|
__name: "MetricsCard",
|
|
782
782
|
props: {
|
|
783
783
|
cardType: {
|
|
@@ -858,25 +858,25 @@ const ce = 2, _e = ce + 2, Ur = (e, r, t = !1) => {
|
|
|
858
858
|
const c = {
|
|
859
859
|
red: `var(--kui-color-text-danger-strong, ${$r})`,
|
|
860
860
|
green: `var(--kui-color-text-success, ${Br})`,
|
|
861
|
-
grey: `var(--kui-color-text-neutral-strong, ${
|
|
861
|
+
grey: `var(--kui-color-text-neutral-strong, ${_e})`
|
|
862
862
|
};
|
|
863
863
|
return d > 0 ? c.green : d < 0 ? c.red : c.grey;
|
|
864
864
|
}, a = (d) => d > 0 ? "positive" : d < 0 ? "negative" : "neutral", n = [w.Medium, w.Large].includes(t.cardSize), u = [w.Small].includes(t.cardSize);
|
|
865
865
|
return (d, c) => {
|
|
866
|
-
const i =
|
|
866
|
+
const i = Ae("KTooltip");
|
|
867
867
|
return T(), C("div", Gr, [
|
|
868
868
|
M("div", {
|
|
869
869
|
class: P(["metricscard-title", e.cardSize])
|
|
870
870
|
}, [
|
|
871
|
-
E(u) ?
|
|
871
|
+
E(u) ? V("", !0) : (T(), N(re(E(r).get(e.cardType)), {
|
|
872
872
|
key: 0,
|
|
873
873
|
class: "metricscard-icon",
|
|
874
|
-
color: `var(--kui-color-text-neutral, ${E(
|
|
874
|
+
color: `var(--kui-color-text-neutral, ${E(oe)})`,
|
|
875
875
|
size: E(X)
|
|
876
876
|
}, null, 8, ["color", "size"])),
|
|
877
|
-
(T(), N(
|
|
878
|
-
default:
|
|
879
|
-
|
|
877
|
+
(T(), N(re(e.titleTag), null, {
|
|
878
|
+
default: ye(() => [
|
|
879
|
+
De(D(e.title), 1)
|
|
880
880
|
]),
|
|
881
881
|
_: 1
|
|
882
882
|
})),
|
|
@@ -886,22 +886,22 @@ const ce = 2, _e = ce + 2, Ur = (e, r, t = !1) => {
|
|
|
886
886
|
placement: "right",
|
|
887
887
|
text: e.tooltip
|
|
888
888
|
}, {
|
|
889
|
-
default:
|
|
889
|
+
default: ye(() => [
|
|
890
890
|
K(E(ur), {
|
|
891
|
-
color: `var(--kui-color-text-neutral, ${E(
|
|
891
|
+
color: `var(--kui-color-text-neutral, ${E(oe)})`,
|
|
892
892
|
size: E(X)
|
|
893
893
|
}, null, 8, ["color", "size"])
|
|
894
894
|
]),
|
|
895
895
|
_: 1
|
|
896
|
-
}, 8, ["text"])) :
|
|
896
|
+
}, 8, ["text"])) : V("", !0)
|
|
897
897
|
], 2),
|
|
898
898
|
e.description && E(n) ? (T(), C("div", jr, [
|
|
899
899
|
M("span", null, D(e.description), 1)
|
|
900
|
-
])) :
|
|
901
|
-
M("div",
|
|
902
|
-
e.hasError ? (T(), C("div",
|
|
900
|
+
])) : V("", !0),
|
|
901
|
+
M("div", Hr, [
|
|
902
|
+
e.hasError ? (T(), C("div", Yr, [
|
|
903
903
|
K(E(Oe), {
|
|
904
|
-
color: `var(--kui-color-text-neutral, ${E(
|
|
904
|
+
color: `var(--kui-color-text-neutral, ${E(oe)})`,
|
|
905
905
|
size: E(Xr)
|
|
906
906
|
}, null, 8, ["color", "size"]),
|
|
907
907
|
M("div", null, " " + D(e.errorMessage), 1)
|
|
@@ -915,37 +915,37 @@ const ce = 2, _e = ce + 2, Ur = (e, r, t = !1) => {
|
|
|
915
915
|
class: P(["metricscard-trend-change", a(e.changePolarity)]),
|
|
916
916
|
"data-testid": "metric-trend-parent"
|
|
917
917
|
}, [
|
|
918
|
-
e.changePolarity !== 0 ? (T(), N(
|
|
918
|
+
e.changePolarity !== 0 ? (T(), N(re(e.trendIcon), {
|
|
919
919
|
key: 0,
|
|
920
920
|
color: o(e.changePolarity),
|
|
921
921
|
size: E(X)
|
|
922
922
|
}, null, 8, ["color", "size"])) : (T(), N(E(lr), {
|
|
923
923
|
key: 1,
|
|
924
|
-
color: `var(--kui-color-text-neutral-strong, ${E(
|
|
924
|
+
color: `var(--kui-color-text-neutral-strong, ${E(_e)})`,
|
|
925
925
|
size: E(X)
|
|
926
926
|
}, null, 8, ["color", "size"])),
|
|
927
927
|
M("div", Wr, D(e.metricChange), 1)
|
|
928
928
|
], 2),
|
|
929
|
-
e.trendRange ? (T(), C("div", Jr, D(e.trendRange), 1)) :
|
|
930
|
-
])) :
|
|
929
|
+
e.trendRange ? (T(), C("div", Jr, D(e.trendRange), 1)) : V("", !0)
|
|
930
|
+
])) : V("", !0)
|
|
931
931
|
])
|
|
932
932
|
]);
|
|
933
933
|
};
|
|
934
934
|
}
|
|
935
|
-
}),
|
|
935
|
+
}), ce = (e, r) => {
|
|
936
936
|
const t = e.__vccOpts || e;
|
|
937
937
|
for (const [o, a] of r)
|
|
938
938
|
t[o] = a;
|
|
939
939
|
return t;
|
|
940
|
-
}, et = /* @__PURE__ */
|
|
940
|
+
}, et = /* @__PURE__ */ ce(Zr, [["__scopeId", "data-v-43293fa2"]]), rt = {}, tt = { class: "loading-tabs" };
|
|
941
941
|
function nt(e, r) {
|
|
942
|
-
const t =
|
|
942
|
+
const t = Ae("KSkeletonBox");
|
|
943
943
|
return T(), C("div", tt, [
|
|
944
944
|
K(t, { width: "100" }),
|
|
945
945
|
K(t, { width: "75" })
|
|
946
946
|
]);
|
|
947
947
|
}
|
|
948
|
-
const at = /* @__PURE__ */
|
|
948
|
+
const at = /* @__PURE__ */ ce(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c40"]]), it = {
|
|
949
949
|
key: 0,
|
|
950
950
|
class: "container-title"
|
|
951
951
|
}, ot = {
|
|
@@ -960,7 +960,7 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
960
960
|
}, lt = {
|
|
961
961
|
key: 2,
|
|
962
962
|
class: "cards-wrapper"
|
|
963
|
-
}, ct = /* @__PURE__ */
|
|
963
|
+
}, ct = /* @__PURE__ */ Y({
|
|
964
964
|
__name: "MetricCardContainer",
|
|
965
965
|
props: {
|
|
966
966
|
fallbackDisplayText: {
|
|
@@ -1003,7 +1003,7 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1003
1003
|
}
|
|
1004
1004
|
},
|
|
1005
1005
|
setup(e) {
|
|
1006
|
-
const r = e, t =
|
|
1006
|
+
const r = e, t = h(() => r.cards.every((a) => (a == null ? void 0 : a.hasError) === !0)), o = (a) => {
|
|
1007
1007
|
const n = zr(a.currentValue, a.previousValue) || 0, u = Ur(n, r.hasTrendAccess, a.increaseIsBad);
|
|
1008
1008
|
return {
|
|
1009
1009
|
metricValue: a.formatValueFn ? a.formatValueFn(a.currentValue) : qr(a.currentValue, { capital: !0, round: !0 }) || "0",
|
|
@@ -1018,14 +1018,14 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1018
1018
|
class: P(["kong-ui-public-metric-card-container", e.cardSize])
|
|
1019
1019
|
}, [
|
|
1020
1020
|
r.containerTitle ? (T(), C("div", it, [
|
|
1021
|
-
|
|
1022
|
-
r.containerDescription ? (T(), C("div", ot, D(r.containerDescription), 1)) :
|
|
1023
|
-
])) :
|
|
1021
|
+
De(D(r.containerTitle) + " ", 1),
|
|
1022
|
+
r.containerDescription ? (T(), C("div", ot, D(r.containerDescription), 1)) : V("", !0)
|
|
1023
|
+
])) : V("", !0),
|
|
1024
1024
|
t.value ? (T(), C("div", st, [
|
|
1025
1025
|
K(E(Oe), { class: "error-display-icon" }),
|
|
1026
|
-
e.errorMessage ? (T(), C("div", ut, D(e.errorMessage), 1)) :
|
|
1026
|
+
e.errorMessage ? (T(), C("div", ut, D(e.errorMessage), 1)) : V("", !0)
|
|
1027
1027
|
])) : (T(), C("div", lt, [
|
|
1028
|
-
(T(!0), C(
|
|
1028
|
+
(T(!0), C(he, null, Xe(e.cards, (u, d) => (T(), C(he, null, [
|
|
1029
1029
|
e.loading ? (T(), N(at, {
|
|
1030
1030
|
key: `skeleton-${d}`,
|
|
1031
1031
|
class: P(e.cardSize === E(w).Small ? "loading-tabs-small" : "loading-tabs-large")
|
|
@@ -1047,7 +1047,7 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1047
1047
|
]))
|
|
1048
1048
|
], 2));
|
|
1049
1049
|
}
|
|
1050
|
-
}), dt = /* @__PURE__ */
|
|
1050
|
+
}), dt = /* @__PURE__ */ ce(ct, [["__scopeId", "data-v-f8f8341b"]]), Tt = /* @__PURE__ */ Y({
|
|
1051
1051
|
__name: "MetricsConsumer",
|
|
1052
1052
|
props: {
|
|
1053
1053
|
lookupKey: { default: void 0 },
|
|
@@ -1055,19 +1055,19 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1055
1055
|
cardToDisplay: { default: void 0 }
|
|
1056
1056
|
},
|
|
1057
1057
|
setup(e) {
|
|
1058
|
-
const r = e, t =
|
|
1058
|
+
const r = e, t = Ce(Ne);
|
|
1059
1059
|
if (!t)
|
|
1060
1060
|
throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
|
|
1061
1061
|
const { traffic: o, latency: a } = t.data, { i18n: n } = F.useI18n(), u = F.useMetricCardBuilder({
|
|
1062
1062
|
cardType: b.TRAFFIC,
|
|
1063
|
-
title:
|
|
1063
|
+
title: h(() => t.longCardTitles ? n.t("metricCard.long.traffic") : n.t("metricCard.short.traffic")),
|
|
1064
1064
|
record: o.mapped,
|
|
1065
1065
|
hasError: o.hasError,
|
|
1066
1066
|
lookupKey: r.lookupKey,
|
|
1067
1067
|
sumGroupedValues: $,
|
|
1068
1068
|
trendRange: o.trendRange
|
|
1069
|
-
}), d = (m) => `${m.toFixed(
|
|
1070
|
-
const m = o.mapped.value,
|
|
1069
|
+
}), d = (m) => `${m.toFixed(le)}%`, c = h(() => {
|
|
1070
|
+
const m = o.mapped.value, p = U(m, "current", r.lookupKey, ge), _ = U(m, "current", r.lookupKey, $), R = p / _ * 100 || 0, y = U(m, "previous", r.lookupKey, ge), I = U(m, "previous", r.lookupKey, $), S = y / I * 100 || 0;
|
|
1071
1071
|
return {
|
|
1072
1072
|
cardType: b.ERROR_RATE,
|
|
1073
1073
|
hasError: o.hasError.value,
|
|
@@ -1080,8 +1080,8 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1080
1080
|
};
|
|
1081
1081
|
}), i = (m) => `${m}ms`, s = F.useMetricCardBuilder({
|
|
1082
1082
|
cardType: b.LATENCY,
|
|
1083
|
-
title:
|
|
1084
|
-
const { longCardTitles: m, averageLatencies:
|
|
1083
|
+
title: h(() => {
|
|
1084
|
+
const { longCardTitles: m, averageLatencies: p } = t, _ = p.value ? "averageLatency" : "p99Latency";
|
|
1085
1085
|
return m ? n.t(`metricCard.long.${_}`) : n.t(`metricCard.short.${_}`);
|
|
1086
1086
|
}),
|
|
1087
1087
|
hasError: a.hasError,
|
|
@@ -1090,7 +1090,7 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1090
1090
|
increaseIsBad: !0,
|
|
1091
1091
|
formatValueFn: i,
|
|
1092
1092
|
trendRange: a.trendRange
|
|
1093
|
-
}), l =
|
|
1093
|
+
}), l = h(() => r.cardToDisplay === "TRAFFIC" ? [u.value] : r.cardToDisplay === "ERROR_RATE" ? [c.value] : r.cardToDisplay === "LATENCY" ? [s.value] : [u.value, c.value, s.value]), f = h(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? o.isLoading.value : r.cardToDisplay === "LATENCY" ? a.isLoading.value : o.isLoading.value || a.isLoading.value), v = h(() => ({
|
|
1094
1094
|
cards: l.value,
|
|
1095
1095
|
containerTitle: t.containerTitle.value,
|
|
1096
1096
|
containerDescription: t.description.value,
|
|
@@ -1100,7 +1100,7 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1100
1100
|
// If the parent container has a title, we enforce a Medium card size; otherwise, pass down provided cardSize
|
|
1101
1101
|
cardSize: t.containerTitle.value ? w.Medium : r.cardSize,
|
|
1102
1102
|
hideTitle: !0
|
|
1103
|
-
})),
|
|
1103
|
+
})), g = h(() => ({
|
|
1104
1104
|
loading: v.value.loading,
|
|
1105
1105
|
trafficCard: u.value,
|
|
1106
1106
|
errorRateCard: c.value,
|
|
@@ -1108,8 +1108,8 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1108
1108
|
errorRateFormatted: d(c.value.currentValue),
|
|
1109
1109
|
latencyFormatted: i(s.value.currentValue)
|
|
1110
1110
|
}));
|
|
1111
|
-
return (m,
|
|
1112
|
-
K(dt, je(
|
|
1111
|
+
return (m, p) => Ie(m.$slots, "default", { cardValues: g.value }, () => [
|
|
1112
|
+
K(dt, je(He(v.value)), null, 16)
|
|
1113
1113
|
]);
|
|
1114
1114
|
}
|
|
1115
1115
|
}), G = (e) => new Date(e), Et = (e, r) => {
|
|
@@ -1118,26 +1118,26 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1118
1118
|
statusCode: 200,
|
|
1119
1119
|
body: ft(t, r)
|
|
1120
1120
|
});
|
|
1121
|
-
},
|
|
1122
|
-
var
|
|
1123
|
-
const t =
|
|
1121
|
+
}, Se = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), ft = (e, r) => {
|
|
1122
|
+
var g, m;
|
|
1123
|
+
const t = be.get(se.ONE_DAY), o = e.granularity === "trend" ? new We(t) : new Je(t), a = o.endMs(), n = o.startMs(), u = o.granularityMs(), d = e.granularity === "trend" ? 2 : 1;
|
|
1124
1124
|
if ((e.dimensions ?? []).length > 2)
|
|
1125
1125
|
throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);
|
|
1126
|
-
const c = (e.dimensions ?? []).find((
|
|
1127
|
-
for (let
|
|
1126
|
+
const c = (e.dimensions ?? []).find((p) => p !== "time"), i = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(i.length, 1), l = e.metrics || [], f = [];
|
|
1127
|
+
for (let p = 0; p < d; p++)
|
|
1128
1128
|
for (let _ = 0; _ < s; _++) {
|
|
1129
1129
|
const R = c ? { [c]: i[_] } : {};
|
|
1130
|
-
(
|
|
1131
|
-
const I = l.reduce((S,
|
|
1130
|
+
(g = e.dimensions) != null && g.includes("status_code_grouped") ? $.forEach((y) => {
|
|
1131
|
+
const I = l.reduce((S, O) => ((r == null ? void 0 : r.deterministic) ?? !0 ? S[O] = (d - p) * 1e3 + 100 * _ + 1 : S[O] = Math.round(Math.random() * 1e3), S), { ...R, status_code_grouped: y });
|
|
1132
1132
|
f.push({
|
|
1133
1133
|
version: "v1",
|
|
1134
|
-
timestamp:
|
|
1134
|
+
timestamp: p === 0 ? G(n).toISOString() : G(n + u).toISOString(),
|
|
1135
1135
|
event: I
|
|
1136
1136
|
});
|
|
1137
1137
|
}) : f.push({
|
|
1138
1138
|
version: "v1",
|
|
1139
|
-
timestamp:
|
|
1140
|
-
event: l.reduce((y, I) => (y[I] = (d -
|
|
1139
|
+
timestamp: p === 0 ? G(n).toISOString() : G(n + u).toISOString(),
|
|
1140
|
+
event: l.reduce((y, I) => ((r == null ? void 0 : r.deterministic) ?? !0 ? y[I] = (d - p) * 1e3 + 100 * _ + 1 : y[I] = Math.round(Math.random() * 1e3), y), { ...R })
|
|
1141
1141
|
});
|
|
1142
1142
|
}
|
|
1143
1143
|
const v = {
|
|
@@ -1145,8 +1145,8 @@ const at = /* @__PURE__ */ de(rt, [["render", nt], ["__scopeId", "data-v-f7eb9c4
|
|
|
1145
1145
|
end_ms: a,
|
|
1146
1146
|
granularity_ms: u,
|
|
1147
1147
|
display: c ? {
|
|
1148
|
-
[c]:
|
|
1149
|
-
...(m = e.dimensions) != null && m.includes("status_code_grouped") ? { status_code_grouped:
|
|
1148
|
+
[c]: Se(i),
|
|
1149
|
+
...(m = e.dimensions) != null && m.includes("status_code_grouped") ? { status_code_grouped: Se($) } : {}
|
|
1150
1150
|
} : {},
|
|
1151
1151
|
metric_names: e.metrics,
|
|
1152
1152
|
query_id: "test"
|
|
@@ -1165,7 +1165,7 @@ export {
|
|
|
1165
1165
|
b as MetricCardType,
|
|
1166
1166
|
Tt as MetricsConsumer,
|
|
1167
1167
|
Rt as MetricsProvider,
|
|
1168
|
-
|
|
1168
|
+
ge as STATUS_CODES_FAILED,
|
|
1169
1169
|
pt as STATUS_CODES_SUCCESS,
|
|
1170
1170
|
ft as mockExploreResponse,
|
|
1171
1171
|
Et as mockExploreResponseFromCypress
|
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(T,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue"),require("@kong-ui-public/analytics-utilities"),require("@kong-ui-public/i18n"),require("@kong-ui-public/analytics-config-store"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-utilities","@kong-ui-public/i18n","@kong-ui-public/analytics-config-store","@kong/icons"],r):(T=typeof globalThis<"u"?globalThis:T||self,r(T["kong-ui-public-vitals-metric-provider"]={},T.Vue,T["kong-ui-public-analytics-utilities"],T["kong-ui-public-i18n"],T["kong-ui-public-analytics-config-store"],T.KongIcons))})(this,function(T,r,I,re,Re,C){"use strict";const Se={general:{notAvailable:"N/A"},metricCard:{short:{traffic:"Requests",errorRate:"Error Rate",averageLatency:"Average Latency",p99Latency:"P99 Latency"},long:{traffic:"Number of Requests",errorRate:"Average Error Rate",averageLatency:"Average Latency",p99Latency:"P99 Latency"}},trendRange:{custom:"vs previous {numDays, plural, =1 {day} other {# days}}","15m":"vs previous 15 minutes","1h":"vs previous hour","6h":"vs previous 6 hours","12h":"vs previous 12 hours","24h":"vs previous 24 hours","7d":"vs previous 7 days","30d":"vs previous 30 days",current_week:"vs previous week",current_month:"vs previous month",current_quarter:"vs previous quarter",previous_week:"vs previous time period",previous_month:"vs previous time period",previous_quarter:"vs previous quarter"}};function Ce(){const e=re.createI18n("en-us",Se);return{i18n:e,i18nT:re.i18nTComponent(e)}}const te=2,w=["1XX","2XX","3XX","4XX","5XX"],P=["4XX","5XX"],_e=["1XX","2XX","3XX"],ne=30*1e3,ae="analytics-query-provider";var ie=(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))(ie||{});const Ie=e=>{var t,n,s,i,a;return e?!!((t=Object.keys(e))!=null&&t.length||(n=e.data)!=null&&n.length||(i=(s=e.data)==null?void 0:s.data)!=null&&i.length||!((a=e.data)!=null&&a.data)&&typeof e.data=="object"&&Object.keys(e==null?void 0:e.data).length):!1};function ke(e=r.ref({}),t,n,s=Ie){const i=r.ref("PENDING");return r.watchEffect(()=>{const a=s(e.value);if(e.value&&a&&n.value){i.value="VALIDATING_HAS_DATA";return}if(e.value&&n.value){i.value="VALIDATING";return}if(e.value&&t.value){i.value="STALE_IF_ERROR";return}if(e.value===void 0&&!t.value){i.value="PENDING";return}if(e.value&&!t.value&&a){i.value="SUCCESS_HAS_DATA";return}if(e.value&&!t.value){i.value="SUCCESS";return}e.value===void 0&&t&&(i.value="ERROR")}),{state:i,swrvState:ie}}const b=Symbol("default"),$="status_code_grouped",oe=(e,t,n,s,i)=>{e[t][n]||(e[t][n]={}),e[t][n][s]=i};function Ae(e,t){var f;const n=((f=e.meta.metric_names)==null?void 0:f[0])||"",s=e.meta.start_ms,i=Object.keys(e.meta.display||{}),a=!!i.find(d=>d===$),l=i.find(d=>d!==$);return i.length>2||i.length>1&&!a?(console.error("Don't know how to work with provided dimensions:",i),{previous:{[b]:{[b]:0}},current:{[b]:{[b]:0}}}):e.data.reduce((d,o)=>{const c=o.event[n],u=l?o.event[l]:b,m=a?o.event[$]:b;return new Date(o.timestamp).getTime()===s&&t?oe(d,"previous",u,m,c):oe(d,"current",u,m,c),d},{previous:{},current:{}})}function De(e){e.queryReady===void 0&&(e.queryReady=r.computed(()=>!0));const{i18n:t}=V.useI18n(),n=r.computed(()=>{var u,m;return{metrics:e.metrics.value,dimensions:[...(u=e.dimensions)!=null&&u.length?[...e.dimensions]:[],...e.withTrend.value?["time"]:[]],granularity:e.withTrend.value?"trend":void 0,...(m=e.filter.value)!=null&&m.length?{filters:e.filter.value}:{},time_range:e.timeframe.value.v4Query(e.tz.value)}}),s=r.computed(()=>{var m,y,v,p;if(!((m=e.queryReady)!=null&&m.value))return null;const u=(y=e.filter)!=null&&y.value?JSON.stringify(e.filter.value):"";return`metric-fetcher-${e.timeframe.value.cacheKey()}-${(v=e.dimensions)==null?void 0:v.join("-")}-${(p=e.metrics.value)==null?void 0:p.join("-")}-${u}`}),{response:i,error:a,isValidating:l}=V.useRequest(()=>s.value,()=>e.queryFn({datasource:e.datasource.value,query:n.value},e.abortController??new AbortController),{refreshInterval:e.refreshInterval,revalidateOnFocus:!1,errorRetryCount:te}),{state:f,swrvState:d}=ke(i,a,l),o=r.computed(()=>{var u,m,y,v,p,h,R;return!((m=(u=i.value)==null?void 0:u.data)!=null&&m.length)||!((v=(y=i.value)==null?void 0:y.meta)!=null&&v.display)||!((R=(h=(p=i.value)==null?void 0:p.meta)==null?void 0:h.metric_names)!=null&&R.length)?{current:{},previous:{}}:Ae(i.value,e.withTrend.value)}),c=r.computed(()=>{var u,m,y;if(e.timeframe.value.key==="custom"){if(!((m=(u=i.value)==null?void 0:u.meta)!=null&&m.start_ms))return"";const{start_ms:v,end_ms:p}=i.value.meta;let h=(p-v)/(1e3*60*60*24);return e.withTrend.value&&(h/=2),t.t("trendRange.custom",{numDays:Math.round(h)})}else return e.withTrend.value?t.t(`trendRange.${e.timeframe.value.key}`):t.t(`trendRange.${(y=I.TimePeriods.get(I.TimeframeKeys.ONE_DAY))==null?void 0:y.key}`)});return{isLoading:r.computed(()=>d.PENDING===f.value),hasError:r.computed(()=>d.ERROR===f.value),raw:i,mapped:o,trendRange:c}}const L=(e,t,n=b,s)=>(s??[b]).reduce((a,l)=>{const f=e[t][n];return f?a+(f[l]||0):a},0);function be(e){const{cardType:t,title:n,description:s,record:i,hasError:a,increaseIsBad:l,formatValueFn:f,trendRange:d}=e;return r.computed(()=>{let o=0,c=0;if(i!=null&&i.value)try{o=L(i.value,"current",e.lookupKey,e.sumGroupedValues),c=L(i.value,"previous",e.lookupKey,e.sumGroupedValues)}catch(u){console.error("Metric card data doesn't have the expected structure:",u)}return{cardType:t,hasError:a.value,currentValue:o,previousValue:c,title:n.value,description:s,increaseIsBad:!!l,formatValueFn:f,trendRange:d==null?void 0:d.value}})}var U=new WeakMap,se=0;function Ve(e){if(!e.length)return"";for(var t="arg",n=0;n<e.length;++n){var s=void 0;e[n]===null||typeof e[n]!="object"&&typeof e[n]!="function"?typeof e[n]=="string"?s='"'+e[n]+'"':s=String(e[n]):U.has(e[n])?s=U.get(e[n]):(s=se,U.set(e[n],se++)),t+="@"+s}return t}function Ne(e){if(typeof e=="function")try{e=e()}catch{e=""}return Array.isArray(e)?e=Ve(e):e=String(e||""),e}var X=function(){function e(t){t===void 0&&(t=0),this.items=new Map,this.ttl=t}return e.prototype.serializeKey=function(t){return Ne(t)},e.prototype.get=function(t){var n=this.serializeKey(t);return this.items.get(n)},e.prototype.set=function(t,n,s){var i=this.serializeKey(t),a=s||this.ttl,l=Date.now(),f={data:n,createdAt:l,expiresAt:a?l+a:1/0};this.dispatchExpire(a,f,i),this.items.set(i,f)},e.prototype.dispatchExpire=function(t,n,s){var i=this;t&&setTimeout(function(){var a=Date.now(),l=a>=n.expiresAt;l&&i.delete(s)},t)},e.prototype.delete=function(t){this.items.delete(t)},e}();function Oe(){return typeof navigator.onLine<"u"?navigator.onLine:!0}function we(){return typeof document<"u"&&typeof document.visibilityState<"u"?document.visibilityState!=="hidden":!0}var Le=function(e){return fetch(e).then(function(t){return t.json()})};const G={isOnline:Oe,isDocumentVisible:we,fetcher:Le};var D=function(){return D=Object.assign||function(e){for(var t,n=1,s=arguments.length;n<s;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},D.apply(this,arguments)},B=function(e,t,n,s){function i(a){return a instanceof n?a:new n(function(l){l(a)})}return new(n||(n=Promise))(function(a,l){function f(c){try{o(s.next(c))}catch(u){l(u)}}function d(c){try{o(s.throw(c))}catch(u){l(u)}}function o(c){c.done?a(c.value):i(c.value).then(f,d)}o((s=s.apply(e,t||[])).next())})},F=function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,i,a,l;return l={next:f(0),throw:f(1),return:f(2)},typeof Symbol=="function"&&(l[Symbol.iterator]=function(){return this}),l;function f(o){return function(c){return d([o,c])}}function d(o){if(s)throw new TypeError("Generator is already executing.");for(;n;)try{if(s=1,i&&(a=o[0]&2?i.return:o[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;switch(i=0,a&&(o=[o[0]&2,a.value]),o[0]){case 0:case 1:a=o;break;case 4:return n.label++,{value:o[1],done:!1};case 5:n.label++,i=o[1],o=[0];continue;case 7:o=n.ops.pop(),n.trys.pop();continue;default:if(a=n.trys,!(a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1],a=o;break}if(a&&n.label<a[2]){n.label=a[2],n.ops.push(o);break}a[2]&&n.ops.pop(),n.trys.pop();continue}o=t.call(e,n)}catch(c){o=[6,c],i=0}finally{s=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}},Be=function(e,t){var n=typeof Symbol=="function"&&e[Symbol.iterator];if(!n)return e;var s=n.call(e),i,a=[],l;try{for(;(t===void 0||t-- >0)&&!(i=s.next()).done;)a.push(i.value)}catch(f){l={error:f}}finally{try{i&&!i.done&&(n=s.return)&&n.call(s)}finally{if(l)throw l.error}}return a},Fe=function(e,t,n){if(n||arguments.length===2)for(var s=0,i=t.length,a;s<i;s++)(a||!(s in t))&&(a||(a=Array.prototype.slice.call(t,0,s)),a[s]=t[s]);return e.concat(a||Array.prototype.slice.call(t))},ce=new X,q=new X,j=new X,le={cache:ce,refreshInterval:0,ttl:0,serverTTL:1e3,dedupingInterval:2e3,revalidateOnFocus:!0,revalidateDebounce:0,shouldRetryOnError:!0,errorRetryInterval:5e3,errorRetryCount:5,fetcher:G.fetcher,isOnline:G.isOnline,isDocumentVisible:G.isDocumentVisible};function Me(e,t,n){var s=q.get(e);if(s)s.data.push(t);else{var i=5e3;q.set(e,[t],n>0?n+i:n)}}function qe(e,t,n){if(n.isDocumentVisible()&&!(n.errorRetryCount!==void 0&&t>n.errorRetryCount)){var s=Math.min(t||0,n.errorRetryCount),i=s*n.errorRetryInterval;setTimeout(function(){e(null,{errorRetryCount:s+1,shouldRetryOnError:!0})},i)}}var ue=function(e,t,n,s){return n===void 0&&(n=ce),s===void 0&&(s=le.ttl),B(void 0,void 0,void 0,function(){var i,a,l,f,d,o,c;return F(this,function(u){switch(u.label){case 0:if(!ze(t))return[3,5];u.label=1;case 1:return u.trys.push([1,3,,4]),[4,t];case 2:return i=u.sent(),[3,4];case 3:return f=u.sent(),a=f,[3,4];case 4:return[3,6];case 5:i=t,u.label=6;case 6:if(l=!1,d={data:i,error:a,isValidating:l},typeof i<"u")try{n.set(e,d,s)}catch(m){console.error("swrv(mutate): failed to set cache",m)}return o=q.get(e),o&&o.data.length&&(c=o.data.filter(function(m){return m.key===e}),c.forEach(function(m,y){typeof d.data<"u"&&(m.data=d.data),m.error=d.error,m.isValidating=d.isValidating;var v=y===c.length-1;v||delete c[y]}),c=c.filter(Boolean)),[2,d]}})})};function xe(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var s,i,a=D({},le),l=!1,f=!1,d=r.getCurrentInstance(),o=(d==null?void 0:d.proxy)||d;if(!o)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;var c=(o==null?void 0:o.$isServer)||!1;t.length>=1&&(s=t[0]),t.length>=2&&(i=t[1]),t.length>2&&(a=D(D({},a),t[2]));var u=c?a.serverTTL:a.ttl,m=typeof s=="function"?s:r.ref(s);typeof i>"u"&&(i=a.fetcher);var y=null;y||(y=r.reactive({data:void 0,error:void 0,isValidating:!0,key:null}));var v=function(E,g){return B(e,void 0,void 0,function(){var _,S,N,M,W,he,J,ve=this;return F(this,function(Z){switch(Z.label){case 0:return _=y.data===void 0,S=m.value,S?(N=a.cache.get(S),M=N&&N.data,y.isValidating=!0,M&&(y.data=M.data,y.error=M.error),W=E||i,!W||!a.isDocumentVisible()&&!_||(g==null?void 0:g.forceRevalidate)!==void 0&&!(g!=null&&g.forceRevalidate)?(y.isValidating=!1,[2]):N&&(he=!!(Date.now()-N.createdAt>=a.dedupingInterval||g!=null&&g.forceRevalidate),!he)?(y.isValidating=!1,[2]):(J=function(){return B(ve,void 0,void 0,function(){var O,Ee,ee,Te;return F(this,function(K){switch(K.label){case 0:return O=j.get(S),O?[3,2]:(Ee=Array.isArray(S)?S:[S],ee=W.apply(void 0,Fe([],Be(Ee),!1)),j.set(S,ee,a.dedupingInterval),[4,ue(S,ee,a.cache,u)]);case 1:return K.sent(),[3,4];case 2:return[4,ue(S,O.data,a.cache,u)];case 3:K.sent(),K.label=4;case 4:return y.isValidating=!1,j.delete(S),y.error!==void 0&&(Te=!l&&a.shouldRetryOnError&&(g?g.shouldRetryOnError:!0),Te&&qe(v,g?g.errorRetryCount:1,a)),[2]}})})},M&&a.revalidateDebounce?(setTimeout(function(){return B(ve,void 0,void 0,function(){return F(this,function(O){switch(O.label){case 0:return l?[3,2]:[4,J()];case 1:O.sent(),O.label=2;case 2:return[2]}})})},a.revalidateDebounce),[3,3]):[3,1])):[2];case 1:return[4,J()];case 2:Z.sent(),Z.label=3;case 3:return[2]}})})},p=function(){return B(e,void 0,void 0,function(){return F(this,function(E){return[2,v(null,{shouldRetryOnError:!1})]})})},h=null;r.onMounted(function(){var E=function(){return B(e,void 0,void 0,function(){return F(this,function(g){switch(g.label){case 0:return!y.error&&a.isOnline()?[4,v()]:[3,2];case 1:return g.sent(),[3,3];case 2:h&&clearTimeout(h),g.label=3;case 3:return a.refreshInterval&&!l&&(h=setTimeout(E,a.refreshInterval)),[2]}})})};a.refreshInterval&&(h=setTimeout(E,a.refreshInterval)),a.revalidateOnFocus&&(document.addEventListener("visibilitychange",p,!1),window.addEventListener("focus",p,!1))}),r.onUnmounted(function(){l=!0,h&&clearTimeout(h),a.revalidateOnFocus&&(document.removeEventListener("visibilitychange",p,!1),window.removeEventListener("focus",p,!1));var E=q.get(m.value);E&&(E.data=E.data.filter(function(g){return g!==y}))});try{r.watch(m,function(E){r.isReadonly(m)||(m.value=E),y.key=E,y.isValidating=!!E,Me(m.value,y,u),!c&&!f&&m.value&&v(),f=!1},{immediate:!0})}catch{}var R=D(D({},r.toRefs(y)),{mutate:function(E,g){return v(E,D(D({},g),{forceRevalidate:!0}))}});return R}function ze(e){return e!==null&&typeof e=="object"&&typeof e.then=="function"}function Ke(e,t,n){const{data:s,error:i,isValidating:a,mutate:l}=xe(e,t,{revalidateDebounce:500,revalidateOnFocus:!1,dedupingInterval:100,...n});return{data:r.computed(()=>s.value),response:s,error:i,isValidating:a,revalidate:l}}const V={useI18n:Ce,useMetricCardBuilder:be,useMetricFetcher:De,useRequest:Ke},de=Symbol("METRICS_PROVIDER_KEY"),Pe=e=>{const{datasource:t,dimension:n,dimensionFilterValue:s,additionalFilter:i,queryReady:a,timeframe:l,tz:f,hasTrendAccess:d,refreshInterval:o,abortController:c,queryFn:u,averageLatencies:m}=e;if(s&&!n)throw new Error("Must provide a dimension if filtering by a value");const y=!!(n&&s),v=!!(n&&!s),p=r.computed(()=>{const _=[];return y&&_.push({dimension:n,type:"in",values:[s]}),i.value&&_.push(...I.stripUnknownFilters(t.value,i.value)),_}),h={datasource:t,metrics:r.ref(["request_count"]),dimensions:[...n&&!y?[n]:[],"status_code_grouped"],filter:p,queryReady:a,timeframe:l,tz:f,withTrend:r.computed(()=>d.value&&!v),refreshInterval:o,queryFn:u,abortController:c},R={datasource:t,metrics:r.computed(()=>[m.value?"response_latency_average":"response_latency_p99"]),...n&&!y?{dimensions:[n]}:{},filter:p,queryReady:a,timeframe:l,tz:f,withTrend:r.computed(()=>d.value&&!v),refreshInterval:o,queryFn:u,abortController:c},E=V.useMetricFetcher(h),g=V.useMetricFetcher(R);return{trafficData:E,latencyData:g}},$e=r.defineComponent({__name:"MetricsProvider",props:{datasource:{default:void 0},maxTimeframe:{default:I.TimeframeKeys.THIRTY_DAY},overrideTimeframe:{default:void 0},tz:{default:void 0},dimension:{default:void 0},filterValue:{default:void 0},additionalFilter:{default:void 0},queryReady:{type:Boolean,default:!0},refreshInterval:{default:ne},longCardTitles:{type:Boolean,default:!1},containerTitle:{default:void 0},description:{default:void 0},percentileLatency:{type:Boolean,default:void 0},abortController:{default:void 0}},setup(e){const t=e;if(t.dimension&&I.queryableExploreDimensions.findIndex(y=>y===t.dimension)===-1)throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${t.dimension}`);const n=r.inject(ae);let s;n?s=n.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"),s=()=>Promise.reject(new Error("Query bridge required")));const i=Re.useAnalyticsConfigStore(),a=r.computed(()=>!0),l=r.computed(()=>!i.loading&&t.queryReady),f=r.computed(()=>t.tz?t.tz:new Intl.DateTimeFormat().resolvedOptions().timeZone),d=r.computed(()=>t.datasource?t.datasource:"basic"),o=r.computed(()=>t.overrideTimeframe||I.TimePeriods.get(I.TimeframeKeys.SEVEN_DAY)),c=r.computed(()=>!t.percentileLatency),{trafficData:u,latencyData:m}=Pe({datasource:d,dimension:t.dimension,dimensionFilterValue:t.filterValue,additionalFilter:r.toRef(t,"additionalFilter"),queryReady:l,timeframe:o,tz:f,hasTrendAccess:a,refreshInterval:t.refreshInterval,queryFn:s,averageLatencies:c,abortController:t.abortController});return r.provide(de,{data:{traffic:u,latency:m},description:r.toRef(()=>t.description),containerTitle:r.toRef(()=>t.containerTitle),hasTrendAccess:a,longCardTitles:t.longCardTitles,averageLatencies:c}),(y,v)=>r.renderSlot(y.$slots,"default",{hasTrendAccess:a.value,timeframe:o.value})}});function Ue(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var fe={exports:{}};(function(e){(function(){function t(o,c){if(c.separator===!1||o<1e3)return o.toString();var u=typeof c.separator=="string"?c.separator:",",m=[],y=Math.round(o).toString().split("");return y.reverse().forEach(function(v,p){p&&p%3===0&&m.push(u),m.push(v)}),m.reverse().join("")}function n(o,c,u){var m=o/c,y=u.round?"round":"floor";return u.decimal===!1?(o=Math[y](m),o.toString()):(u.precision?o=m:o=m<10?Math[y](m*10)/10:Math[y](m),o=o.toString(),typeof u.decimal=="string"&&(o=o.replace(".",u.decimal)),o)}var s=1e3,i=1e4,a=1e6,l=1e9,f=1e12;function d(o,c){var u;c=c||{};var m=o<0;m&&(o=Math.abs(o)),c.precision&&(o=parseFloat(o.toPrecision(c.precision)));var y=c.min10k?i:s;return o<y||c.precision&&c.precision>Math.log10(o)?u=t(n(o,1,c),c):o<a?u=n(o,s,c)+"k":o<l?u=n(o,a,c)+"m":o<f?u=t(n(o,l,c),c)+"b":u=t(n(o,f,c),c)+"t",m&&(u="-"+u),c.capital&&(u=u.toUpperCase()),c.prefix&&(u=c.prefix+u),c.suffix&&(u=u+c.suffix),u}d.addCommas=t,e.exports=d})()})(fe);var Xe=fe.exports;const Ge=Ue(Xe);var k=(e=>(e.GENERIC_COUNT="GenericCount",e.TRAFFIC="Traffic",e.ERROR_RATE="ErrorRate",e.LATENCY="Latency",e))(k||{}),A=(e=>(e.Small="sm",e.Medium="md",e.Large="lg",e.ExtraLarge="xl",e))(A||{});const Y=2,me=Y+2,je=(e,t,n=!1)=>{let s=!t||Number(e.toFixed(me))===0?0:Number(e.toFixed(me))>0?1:-1;return n&&(s*=-1),s},Ye=(e,t,n)=>t?`${Math.abs(e*100).toFixed(Y)}%`:n,He=(e,t)=>t===0?0:e/t-1,Qe=(e,t=!1)=>(t&&(e*=-1),e>0?C.TrendUpIcon:e<0?C.TrendDownIcon:C.IndeterminateSmallIcon),We="#ad000e",H="#6c7489",ye="#52596e",Je="#007d60",x="16px",Ze="20px",er={class:"metricscard"},rr={key:0,class:"metricscard-description"},tr={class:"metricscard-valuetrend"},nr={key:0,class:"metricscard-error"},ar={key:2,class:"metricscard-trend"},ir={"data-testid":"metric-trend-change"},or={key:0,class:"metricscard-trend-range"},sr=r.defineComponent({__name:"MetricsCard",props:{cardType:{type:String,required:!0,default:k.GENERIC_COUNT},title:{type:String,default:"0%",required:!0},description:{type:String,default:"",required:!1},tooltip:{type:String,required:!1,default:""},timeframe:{type:String,required:!1,default:""},metricValue:{type:String,default:""},metricChange:{type:String,required:!0},changePolarity:{type:Number,required:!0},trendIcon:{type:Object,default:C.IndeterminateSmallIcon},trendRange:{type:String,default:""},hasError:{type:Boolean,default:!1},errorMessage:{type:String,default:"Vitals data error"},cardSize:{type:String,required:!1,default:()=>A.Large},hasContainerTitle:{type:Boolean,required:!1,default:!1},titleTag:{type:String,default:"span"}},setup(e){const t=new Map([[k.GENERIC_COUNT,C.VitalsIcon],[k.TRAFFIC,C.CloudUploadIcon],[k.ERROR_RATE,C.WarningOutlineIcon],[k.LATENCY,C.ResponseIcon]]),n=e,s=f=>{const d={red:`var(--kui-color-text-danger-strong, ${We})`,green:`var(--kui-color-text-success, ${Je})`,grey:`var(--kui-color-text-neutral-strong, ${ye})`};return f>0?d.green:f<0?d.red:d.grey},i=f=>f>0?"positive":f<0?"negative":"neutral",a=[A.Medium,A.Large].includes(n.cardSize),l=[A.Small].includes(n.cardSize);return(f,d)=>{const o=r.resolveComponent("KTooltip");return r.openBlock(),r.createElementBlock("div",er,[r.createElementVNode("div",{class:r.normalizeClass(["metricscard-title",e.cardSize])},[r.unref(l)?r.createCommentVNode("",!0):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).get(e.cardType)),{key:0,class:"metricscard-icon",color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(x)},null,8,["color","size"])),(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.titleTag),null,{default:r.withCtx(()=>[r.createTextVNode(r.toDisplayString(e.title),1)]),_:1})),e.tooltip?(r.openBlock(),r.createBlock(o,{key:1,class:"metricscard-tooltip",placement:"right",text:e.tooltip},{default:r.withCtx(()=>[r.createVNode(r.unref(C.InfoIcon),{color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(x)},null,8,["color","size"])]),_:1},8,["text"])):r.createCommentVNode("",!0)],2),e.description&&r.unref(a)?(r.openBlock(),r.createElementBlock("div",rr,[r.createElementVNode("span",null,r.toDisplayString(e.description),1)])):r.createCommentVNode("",!0),r.createElementVNode("div",tr,[e.hasError?(r.openBlock(),r.createElementBlock("div",nr,[r.createVNode(r.unref(C.WarningIcon),{color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(Ze)},null,8,["color","size"]),r.createElementVNode("div",null," "+r.toDisplayString(e.errorMessage),1)])):(r.openBlock(),r.createElementBlock("div",{key:1,class:r.normalizeClass(["metricscard-value",e.cardSize]),"data-testid":"metric-value"},r.toDisplayString(e.metricValue),3)),r.unref(a)?(r.openBlock(),r.createElementBlock("div",ar,[r.createElementVNode("div",{class:r.normalizeClass(["metricscard-trend-change",i(e.changePolarity)]),"data-testid":"metric-trend-parent"},[e.changePolarity!==0?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.trendIcon),{key:0,color:s(e.changePolarity),size:r.unref(x)},null,8,["color","size"])):(r.openBlock(),r.createBlock(r.unref(C.EqualIcon),{key:1,color:`var(--kui-color-text-neutral-strong, ${r.unref(ye)})`,size:r.unref(x)},null,8,["color","size"])),r.createElementVNode("div",ir,r.toDisplayString(e.metricChange),1)],2),e.trendRange?(r.openBlock(),r.createElementBlock("div",or,r.toDisplayString(e.trendRange),1)):r.createCommentVNode("",!0)])):r.createCommentVNode("",!0)])])}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[s,i]of t)n[s]=i;return n},cr=Q(sr,[["__scopeId","data-v-43293fa2"]]),lr={},ur={class:"loading-tabs"};function dr(e,t){const n=r.resolveComponent("KSkeletonBox");return r.openBlock(),r.createElementBlock("div",ur,[r.createVNode(n,{width:"100"}),r.createVNode(n,{width:"75"})])}const fr=Q(lr,[["render",dr],["__scopeId","data-v-f7eb9c40"]]),mr={key:0,class:"container-title"},yr={key:0,class:"container-description"},pr={key:1,class:"error-display"},gr={key:0,class:"error-display-message"},hr={key:2,class:"cards-wrapper"},vr=Q(r.defineComponent({__name:"MetricCardContainer",props:{fallbackDisplayText:{type:String,required:!0},cards:{type:Array,required:!0},errorMessage:{type:String,required:!1,default:""},loading:{type:Boolean,required:!1,default:!1},hasTrendAccess:{type:Boolean,required:!1,default:!0},cardSize:{type:String,required:!1,default:()=>A.Large},containerTitle:{type:String,required:!1,default:""},containerDescription:{type:String,required:!1,default:""}},setup(e){const t=e,n=r.computed(()=>t.cards.every(i=>(i==null?void 0:i.hasError)===!0)),s=i=>{const a=He(i.currentValue,i.previousValue)||0,l=je(a,t.hasTrendAccess,i.increaseIsBad);return{metricValue:i.formatValueFn?i.formatValueFn(i.currentValue):Ge(i.currentValue,{capital:!0,round:!0})||"0",metricChange:i.formatChangeFn?i.formatChangeFn(a):Ye(a,t.hasTrendAccess,t.fallbackDisplayText),changePolarity:l,trendIcon:Qe(l,i.increaseIsBad),cardSize:t.cardSize,hasContainerTitle:!!t.containerTitle}};return(i,a)=>(r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["kong-ui-public-metric-card-container",e.cardSize])},[t.containerTitle?(r.openBlock(),r.createElementBlock("div",mr,[r.createTextVNode(r.toDisplayString(t.containerTitle)+" ",1),t.containerDescription?(r.openBlock(),r.createElementBlock("div",yr,r.toDisplayString(t.containerDescription),1)):r.createCommentVNode("",!0)])):r.createCommentVNode("",!0),n.value?(r.openBlock(),r.createElementBlock("div",pr,[r.createVNode(r.unref(C.WarningIcon),{class:"error-display-icon"}),e.errorMessage?(r.openBlock(),r.createElementBlock("div",gr,r.toDisplayString(e.errorMessage),1)):r.createCommentVNode("",!0)])):(r.openBlock(),r.createElementBlock("div",hr,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.cards,(l,f)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[e.loading?(r.openBlock(),r.createBlock(fr,{key:`skeleton-${f}`,class:r.normalizeClass(e.cardSize===r.unref(A).Small?"loading-tabs-small":"loading-tabs-large")},null,8,["class"])):(r.openBlock(),r.createBlock(cr,r.mergeProps({key:f,ref_for:!0},s(l),{"card-size":e.cardSize,"card-type":l.cardType,description:l.description,"error-message":e.errorMessage,"has-error":l.hasError,title:l.title,"title-tag":l.titleTag,tooltip:l.tooltip,"trend-range":l.trendRange}),null,16,["card-size","card-type","description","error-message","has-error","title","title-tag","tooltip","trend-range"]))],64))),256))]))],2))}}),[["__scopeId","data-v-f8f8341b"]]),Er=r.defineComponent({__name:"MetricsConsumer",props:{lookupKey:{default:void 0},cardSize:{default:A.Large},cardToDisplay:{default:void 0}},setup(e){const t=e,n=r.inject(de);if(!n)throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");const{traffic:s,latency:i}=n.data,{i18n:a}=V.useI18n(),l=V.useMetricCardBuilder({cardType:k.TRAFFIC,title:r.computed(()=>n.longCardTitles?a.t("metricCard.long.traffic"):a.t("metricCard.short.traffic")),record:s.mapped,hasError:s.hasError,lookupKey:t.lookupKey,sumGroupedValues:w,trendRange:s.trendRange}),f=p=>`${p.toFixed(Y)}%`,d=r.computed(()=>{const p=s.mapped.value,h=L(p,"current",t.lookupKey,P),R=L(p,"current",t.lookupKey,w),E=h/R*100||0,g=L(p,"previous",t.lookupKey,P),_=L(p,"previous",t.lookupKey,w),S=g/_*100||0;return{cardType:k.ERROR_RATE,hasError:s.hasError.value,currentValue:E,previousValue:S,formatValueFn:f,title:n.longCardTitles?a.t("metricCard.long.errorRate"):a.t("metricCard.short.errorRate"),increaseIsBad:!0,trendRange:s.trendRange.value}}),o=p=>`${p}ms`,c=V.useMetricCardBuilder({cardType:k.LATENCY,title:r.computed(()=>{const{longCardTitles:p,averageLatencies:h}=n,R=h.value?"averageLatency":"p99Latency";return p?a.t(`metricCard.long.${R}`):a.t(`metricCard.short.${R}`)}),hasError:i.hasError,record:i.mapped,lookupKey:t.lookupKey,increaseIsBad:!0,formatValueFn:o,trendRange:i.trendRange}),u=r.computed(()=>t.cardToDisplay==="TRAFFIC"?[l.value]:t.cardToDisplay==="ERROR_RATE"?[d.value]:t.cardToDisplay==="LATENCY"?[c.value]:[l.value,d.value,c.value]),m=r.computed(()=>t.cardToDisplay==="TRAFFIC"||t.cardToDisplay==="ERROR_RATE"?s.isLoading.value:t.cardToDisplay==="LATENCY"?i.isLoading.value:s.isLoading.value||i.isLoading.value),y=r.computed(()=>({cards:u.value,containerTitle:n.containerTitle.value,containerDescription:n.description.value,loading:m.value,hasTrendAccess:n.hasTrendAccess.value,fallbackDisplayText:a.t("general.notAvailable"),cardSize:n.containerTitle.value?A.Medium:t.cardSize,hideTitle:!0})),v=r.computed(()=>({loading:y.value.loading,trafficCard:l.value,errorRateCard:d.value,latencyCard:c.value,errorRateFormatted:f(d.value.currentValue),latencyFormatted:o(c.value.currentValue)}));return(p,h)=>r.renderSlot(p.$slots,"default",{cardValues:v.value},()=>[r.createVNode(vr,r.normalizeProps(r.guardReactiveProps(y.value)),null,16)])}}),z=e=>new Date(e),Tr=(e,t)=>{const n=e.body;e.reply({statusCode:200,body:ge(n,t)})},pe=e=>e.reduce((t,n)=>(t[n]={name:n},t),{}),ge=(e,t)=>{var v,p;const n=I.TimePeriods.get(I.TimeframeKeys.ONE_DAY),s=e.granularity==="trend"?new I.DeltaQueryTime(n):new I.UnaryQueryTime(n),i=s.endMs(),a=s.startMs(),l=s.granularityMs(),f=e.granularity==="trend"?2:1;if((e.dimensions??[]).length>2)throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);const d=(e.dimensions??[]).find(h=>h!=="time"),o=(t==null?void 0:t.dimensionNames)??[],c=Math.max(o.length,1),u=e.metrics||[],m=[];for(let h=0;h<f;h++)for(let R=0;R<c;R++){const E=d?{[d]:o[R]}:{};(v=e.dimensions)!=null&&v.includes("status_code_grouped")?w.forEach(g=>{const _=u.reduce((S,N)=>(S[N]=(f-h)*1e3+100*R+1,S),{...E,status_code_grouped:g});m.push({version:"v1",timestamp:h===0?z(a).toISOString():z(a+l).toISOString(),event:_})}):m.push({version:"v1",timestamp:h===0?z(a).toISOString():z(a+l).toISOString(),event:u.reduce((g,_)=>(g[_]=(f-h)*1e3+100*R+1,g),{...E})})}const y={start_ms:a,end_ms:i,granularity_ms:l,display:d?{[d]:pe(o),...(p=e.dimensions)!=null&&p.includes("status_code_grouped")?{status_code_grouped:pe(w)}:{}}:{},metric_names:e.metrics,query_id:"test"};return{data:m,meta:y}};T.ALL_STATUS_CODE_GROUPS=w,T.DEFAULT_REFRESH_INTERVAL=ne,T.INJECT_QUERY_PROVIDER=ae,T.MAX_ANALYTICS_REQUEST_RETRIES=te,T.MetricCardSize=A,T.MetricCardType=k,T.MetricsConsumer=Er,T.MetricsProvider=$e,T.STATUS_CODES_FAILED=P,T.STATUS_CODES_SUCCESS=_e,T.mockExploreResponse=ge,T.mockExploreResponseFromCypress=Tr,Object.defineProperty(T,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
(function(R,r){typeof exports=="object"&&typeof module<"u"?r(exports,require("vue"),require("@kong-ui-public/analytics-utilities"),require("@kong-ui-public/i18n"),require("@kong-ui-public/analytics-config-store"),require("@kong/icons")):typeof define=="function"&&define.amd?define(["exports","vue","@kong-ui-public/analytics-utilities","@kong-ui-public/i18n","@kong-ui-public/analytics-config-store","@kong/icons"],r):(R=typeof globalThis<"u"?globalThis:R||self,r(R["kong-ui-public-vitals-metric-provider"]={},R.Vue,R["kong-ui-public-analytics-utilities"],R["kong-ui-public-i18n"],R["kong-ui-public-analytics-config-store"],R.KongIcons))})(this,function(R,r,A,re,Te,_){"use strict";const Se={general:{notAvailable:"N/A"},metricCard:{short:{traffic:"Requests",errorRate:"Error Rate",averageLatency:"Average Latency",p99Latency:"P99 Latency"},long:{traffic:"Number of Requests",errorRate:"Average Error Rate",averageLatency:"Average Latency",p99Latency:"P99 Latency"}},trendRange:{custom:"vs previous {numDays, plural, =1 {day} other {# days}}","15m":"vs previous 15 minutes","1h":"vs previous hour","6h":"vs previous 6 hours","12h":"vs previous 12 hours","24h":"vs previous 24 hours","7d":"vs previous 7 days","30d":"vs previous 30 days",current_week:"vs previous week",current_month:"vs previous month",current_quarter:"vs previous quarter",previous_week:"vs previous time period",previous_month:"vs previous time period",previous_quarter:"vs previous quarter"}};function Ce(){const e=re.createI18n("en-us",Se);return{i18n:e,i18nT:re.i18nTComponent(e)}}const te=2,w=["1XX","2XX","3XX","4XX","5XX"],P=["4XX","5XX"],_e=["1XX","2XX","3XX"],ne=30*1e3,ae="analytics-query-provider";var ie=(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))(ie||{});const Ie=e=>{var t,n,s,i,a;return e?!!((t=Object.keys(e))!=null&&t.length||(n=e.data)!=null&&n.length||(i=(s=e.data)==null?void 0:s.data)!=null&&i.length||!((a=e.data)!=null&&a.data)&&typeof e.data=="object"&&Object.keys(e==null?void 0:e.data).length):!1};function ke(e=r.ref({}),t,n,s=Ie){const i=r.ref("PENDING");return r.watchEffect(()=>{const a=s(e.value);if(e.value&&a&&n.value){i.value="VALIDATING_HAS_DATA";return}if(e.value&&n.value){i.value="VALIDATING";return}if(e.value&&t.value){i.value="STALE_IF_ERROR";return}if(e.value===void 0&&!t.value){i.value="PENDING";return}if(e.value&&!t.value&&a){i.value="SUCCESS_HAS_DATA";return}if(e.value&&!t.value){i.value="SUCCESS";return}e.value===void 0&&t&&(i.value="ERROR")}),{state:i,swrvState:ie}}const b=Symbol("default"),U="status_code_grouped",oe=(e,t,n,s,i)=>{e[t][n]||(e[t][n]={}),e[t][n][s]=i};function Ae(e,t){var f;const n=((f=e.meta.metric_names)==null?void 0:f[0])||"",s=e.meta.start_ms,i=Object.keys(e.meta.display||{}),a=!!i.find(d=>d===U),l=i.find(d=>d!==U);return i.length>2||i.length>1&&!a?(console.error("Don't know how to work with provided dimensions:",i),{previous:{[b]:{[b]:0}},current:{[b]:{[b]:0}}}):e.data.reduce((d,o)=>{const c=o.event[n],u=l?o.event[l]:b,m=a?o.event[U]:b;return new Date(o.timestamp).getTime()===s&&t?oe(d,"previous",u,m,c):oe(d,"current",u,m,c),d},{previous:{},current:{}})}function De(e){e.queryReady===void 0&&(e.queryReady=r.computed(()=>!0));const{i18n:t}=N.useI18n(),n=r.computed(()=>{var u,m;return{metrics:e.metrics.value,dimensions:[...(u=e.dimensions)!=null&&u.length?[...e.dimensions]:[],...e.withTrend.value?["time"]:[]],granularity:e.withTrend.value?"trend":void 0,...(m=e.filter.value)!=null&&m.length?{filters:e.filter.value}:{},time_range:e.timeframe.value.v4Query(e.tz.value)}}),s=r.computed(()=>{var m,y,h,p;if(!((m=e.queryReady)!=null&&m.value))return null;const u=(y=e.filter)!=null&&y.value?JSON.stringify(e.filter.value):"";return`metric-fetcher-${e.timeframe.value.cacheKey()}-${(h=e.dimensions)==null?void 0:h.join("-")}-${(p=e.metrics.value)==null?void 0:p.join("-")}-${u}`}),{response:i,error:a,isValidating:l}=N.useRequest(()=>s.value,()=>e.queryFn({datasource:e.datasource.value,query:n.value},e.abortController??new AbortController),{refreshInterval:e.refreshInterval,revalidateOnFocus:!1,errorRetryCount:te}),{state:f,swrvState:d}=ke(i,a,l),o=r.computed(()=>{var u,m,y,h,p,v,T;return!((m=(u=i.value)==null?void 0:u.data)!=null&&m.length)||!((h=(y=i.value)==null?void 0:y.meta)!=null&&h.display)||!((T=(v=(p=i.value)==null?void 0:p.meta)==null?void 0:v.metric_names)!=null&&T.length)?{current:{},previous:{}}:Ae(i.value,e.withTrend.value)}),c=r.computed(()=>{var u,m;if(e.timeframe.value.key==="custom"){if(!((m=(u=i.value)==null?void 0:u.meta)!=null&&m.start_ms))return"";const{start_ms:y,end_ms:h}=i.value.meta;let p=(h-y)/(1e3*60*60*24);return e.withTrend.value&&(p/=2),t.t("trendRange.custom",{numDays:Math.round(p)})}else return e.withTrend.value?t.t(`trendRange.${e.timeframe.value.key}`):""});return{isLoading:r.computed(()=>d.PENDING===f.value),hasError:r.computed(()=>d.ERROR===f.value),raw:i,mapped:o,trendRange:c}}const L=(e,t,n=b,s)=>(s??[b]).reduce((a,l)=>{const f=e[t][n];return f?a+(f[l]||0):a},0);function be(e){const{cardType:t,title:n,description:s,record:i,hasError:a,increaseIsBad:l,formatValueFn:f,trendRange:d}=e;return r.computed(()=>{let o=0,c=0;if(i!=null&&i.value)try{o=L(i.value,"current",e.lookupKey,e.sumGroupedValues),c=L(i.value,"previous",e.lookupKey,e.sumGroupedValues)}catch(u){console.error("Metric card data doesn't have the expected structure:",u)}return{cardType:t,hasError:a.value,currentValue:o,previousValue:c,title:n.value,description:s,increaseIsBad:!!l,formatValueFn:f,trendRange:d==null?void 0:d.value}})}var $=new WeakMap,se=0;function Ve(e){if(!e.length)return"";for(var t="arg",n=0;n<e.length;++n){var s=void 0;e[n]===null||typeof e[n]!="object"&&typeof e[n]!="function"?typeof e[n]=="string"?s='"'+e[n]+'"':s=String(e[n]):$.has(e[n])?s=$.get(e[n]):(s=se,$.set(e[n],se++)),t+="@"+s}return t}function Ne(e){if(typeof e=="function")try{e=e()}catch{e=""}return Array.isArray(e)?e=Ve(e):e=String(e||""),e}var X=function(){function e(t){t===void 0&&(t=0),this.items=new Map,this.ttl=t}return e.prototype.serializeKey=function(t){return Ne(t)},e.prototype.get=function(t){var n=this.serializeKey(t);return this.items.get(n)},e.prototype.set=function(t,n,s){var i=this.serializeKey(t),a=s||this.ttl,l=Date.now(),f={data:n,createdAt:l,expiresAt:a?l+a:1/0};this.dispatchExpire(a,f,i),this.items.set(i,f)},e.prototype.dispatchExpire=function(t,n,s){var i=this;t&&setTimeout(function(){var a=Date.now(),l=a>=n.expiresAt;l&&i.delete(s)},t)},e.prototype.delete=function(t){this.items.delete(t)},e}();function Oe(){return typeof navigator.onLine<"u"?navigator.onLine:!0}function we(){return typeof document<"u"&&typeof document.visibilityState<"u"?document.visibilityState!=="hidden":!0}var Le=function(e){return fetch(e).then(function(t){return t.json()})};const G={isOnline:Oe,isDocumentVisible:we,fetcher:Le};var D=function(){return D=Object.assign||function(e){for(var t,n=1,s=arguments.length;n<s;n++){t=arguments[n];for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])}return e},D.apply(this,arguments)},B=function(e,t,n,s){function i(a){return a instanceof n?a:new n(function(l){l(a)})}return new(n||(n=Promise))(function(a,l){function f(c){try{o(s.next(c))}catch(u){l(u)}}function d(c){try{o(s.throw(c))}catch(u){l(u)}}function o(c){c.done?a(c.value):i(c.value).then(f,d)}o((s=s.apply(e,t||[])).next())})},F=function(e,t){var n={label:0,sent:function(){if(a[0]&1)throw a[1];return a[1]},trys:[],ops:[]},s,i,a,l;return l={next:f(0),throw:f(1),return:f(2)},typeof Symbol=="function"&&(l[Symbol.iterator]=function(){return this}),l;function f(o){return function(c){return d([o,c])}}function d(o){if(s)throw new TypeError("Generator is already executing.");for(;n;)try{if(s=1,i&&(a=o[0]&2?i.return:o[0]?i.throw||((a=i.return)&&a.call(i),0):i.next)&&!(a=a.call(i,o[1])).done)return a;switch(i=0,a&&(o=[o[0]&2,a.value]),o[0]){case 0:case 1:a=o;break;case 4:return n.label++,{value:o[1],done:!1};case 5:n.label++,i=o[1],o=[0];continue;case 7:o=n.ops.pop(),n.trys.pop();continue;default:if(a=n.trys,!(a=a.length>0&&a[a.length-1])&&(o[0]===6||o[0]===2)){n=0;continue}if(o[0]===3&&(!a||o[1]>a[0]&&o[1]<a[3])){n.label=o[1];break}if(o[0]===6&&n.label<a[1]){n.label=a[1],a=o;break}if(a&&n.label<a[2]){n.label=a[2],n.ops.push(o);break}a[2]&&n.ops.pop(),n.trys.pop();continue}o=t.call(e,n)}catch(c){o=[6,c],i=0}finally{s=a=0}if(o[0]&5)throw o[1];return{value:o[0]?o[1]:void 0,done:!0}}},Be=function(e,t){var n=typeof Symbol=="function"&&e[Symbol.iterator];if(!n)return e;var s=n.call(e),i,a=[],l;try{for(;(t===void 0||t-- >0)&&!(i=s.next()).done;)a.push(i.value)}catch(f){l={error:f}}finally{try{i&&!i.done&&(n=s.return)&&n.call(s)}finally{if(l)throw l.error}}return a},Fe=function(e,t,n){if(n||arguments.length===2)for(var s=0,i=t.length,a;s<i;s++)(a||!(s in t))&&(a||(a=Array.prototype.slice.call(t,0,s)),a[s]=t[s]);return e.concat(a||Array.prototype.slice.call(t))},ce=new X,q=new X,j=new X,le={cache:ce,refreshInterval:0,ttl:0,serverTTL:1e3,dedupingInterval:2e3,revalidateOnFocus:!0,revalidateDebounce:0,shouldRetryOnError:!0,errorRetryInterval:5e3,errorRetryCount:5,fetcher:G.fetcher,isOnline:G.isOnline,isDocumentVisible:G.isDocumentVisible};function Me(e,t,n){var s=q.get(e);if(s)s.data.push(t);else{var i=5e3;q.set(e,[t],n>0?n+i:n)}}function qe(e,t,n){if(n.isDocumentVisible()&&!(n.errorRetryCount!==void 0&&t>n.errorRetryCount)){var s=Math.min(t||0,n.errorRetryCount),i=s*n.errorRetryInterval;setTimeout(function(){e(null,{errorRetryCount:s+1,shouldRetryOnError:!0})},i)}}var ue=function(e,t,n,s){return n===void 0&&(n=ce),s===void 0&&(s=le.ttl),B(void 0,void 0,void 0,function(){var i,a,l,f,d,o,c;return F(this,function(u){switch(u.label){case 0:if(!ze(t))return[3,5];u.label=1;case 1:return u.trys.push([1,3,,4]),[4,t];case 2:return i=u.sent(),[3,4];case 3:return f=u.sent(),a=f,[3,4];case 4:return[3,6];case 5:i=t,u.label=6;case 6:if(l=!1,d={data:i,error:a,isValidating:l},typeof i<"u")try{n.set(e,d,s)}catch(m){console.error("swrv(mutate): failed to set cache",m)}return o=q.get(e),o&&o.data.length&&(c=o.data.filter(function(m){return m.key===e}),c.forEach(function(m,y){typeof d.data<"u"&&(m.data=d.data),m.error=d.error,m.isValidating=d.isValidating;var h=y===c.length-1;h||delete c[y]}),c=c.filter(Boolean)),[2,d]}})})};function xe(){for(var e=this,t=[],n=0;n<arguments.length;n++)t[n]=arguments[n];var s,i,a=D({},le),l=!1,f=!1,d=r.getCurrentInstance(),o=(d==null?void 0:d.proxy)||d;if(!o)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;var c=(o==null?void 0:o.$isServer)||!1;t.length>=1&&(s=t[0]),t.length>=2&&(i=t[1]),t.length>2&&(a=D(D({},a),t[2]));var u=c?a.serverTTL:a.ttl,m=typeof s=="function"?s:r.ref(s);typeof i>"u"&&(i=a.fetcher);var y=null;y||(y=r.reactive({data:void 0,error:void 0,isValidating:!0,key:null}));var h=function(E,g){return B(e,void 0,void 0,function(){var C,S,V,M,W,he,J,ve=this;return F(this,function(Z){switch(Z.label){case 0:return C=y.data===void 0,S=m.value,S?(V=a.cache.get(S),M=V&&V.data,y.isValidating=!0,M&&(y.data=M.data,y.error=M.error),W=E||i,!W||!a.isDocumentVisible()&&!C||(g==null?void 0:g.forceRevalidate)!==void 0&&!(g!=null&&g.forceRevalidate)?(y.isValidating=!1,[2]):V&&(he=!!(Date.now()-V.createdAt>=a.dedupingInterval||g!=null&&g.forceRevalidate),!he)?(y.isValidating=!1,[2]):(J=function(){return B(ve,void 0,void 0,function(){var O,Ee,ee,Re;return F(this,function(K){switch(K.label){case 0:return O=j.get(S),O?[3,2]:(Ee=Array.isArray(S)?S:[S],ee=W.apply(void 0,Fe([],Be(Ee),!1)),j.set(S,ee,a.dedupingInterval),[4,ue(S,ee,a.cache,u)]);case 1:return K.sent(),[3,4];case 2:return[4,ue(S,O.data,a.cache,u)];case 3:K.sent(),K.label=4;case 4:return y.isValidating=!1,j.delete(S),y.error!==void 0&&(Re=!l&&a.shouldRetryOnError&&(g?g.shouldRetryOnError:!0),Re&&qe(h,g?g.errorRetryCount:1,a)),[2]}})})},M&&a.revalidateDebounce?(setTimeout(function(){return B(ve,void 0,void 0,function(){return F(this,function(O){switch(O.label){case 0:return l?[3,2]:[4,J()];case 1:O.sent(),O.label=2;case 2:return[2]}})})},a.revalidateDebounce),[3,3]):[3,1])):[2];case 1:return[4,J()];case 2:Z.sent(),Z.label=3;case 3:return[2]}})})},p=function(){return B(e,void 0,void 0,function(){return F(this,function(E){return[2,h(null,{shouldRetryOnError:!1})]})})},v=null;r.onMounted(function(){var E=function(){return B(e,void 0,void 0,function(){return F(this,function(g){switch(g.label){case 0:return!y.error&&a.isOnline()?[4,h()]:[3,2];case 1:return g.sent(),[3,3];case 2:v&&clearTimeout(v),g.label=3;case 3:return a.refreshInterval&&!l&&(v=setTimeout(E,a.refreshInterval)),[2]}})})};a.refreshInterval&&(v=setTimeout(E,a.refreshInterval)),a.revalidateOnFocus&&(document.addEventListener("visibilitychange",p,!1),window.addEventListener("focus",p,!1))}),r.onUnmounted(function(){l=!0,v&&clearTimeout(v),a.revalidateOnFocus&&(document.removeEventListener("visibilitychange",p,!1),window.removeEventListener("focus",p,!1));var E=q.get(m.value);E&&(E.data=E.data.filter(function(g){return g!==y}))});try{r.watch(m,function(E){r.isReadonly(m)||(m.value=E),y.key=E,y.isValidating=!!E,Me(m.value,y,u),!c&&!f&&m.value&&h(),f=!1},{immediate:!0})}catch{}var T=D(D({},r.toRefs(y)),{mutate:function(E,g){return h(E,D(D({},g),{forceRevalidate:!0}))}});return T}function ze(e){return e!==null&&typeof e=="object"&&typeof e.then=="function"}function Ke(e,t,n){const{data:s,error:i,isValidating:a,mutate:l}=xe(e,t,{revalidateDebounce:500,revalidateOnFocus:!1,dedupingInterval:100,...n});return{data:r.computed(()=>s.value),response:s,error:i,isValidating:a,revalidate:l}}const N={useI18n:Ce,useMetricCardBuilder:be,useMetricFetcher:De,useRequest:Ke},de=Symbol("METRICS_PROVIDER_KEY"),Pe=e=>{const{datasource:t,dimension:n,dimensionFilterValue:s,additionalFilter:i,queryReady:a,timeframe:l,tz:f,hasTrendAccess:d,refreshInterval:o,abortController:c,queryFn:u,averageLatencies:m}=e;if(s&&!n)throw new Error("Must provide a dimension if filtering by a value");const y=!!(n&&s),h=!!(n&&!s),p=r.computed(()=>{const C=[];return y&&C.push({dimension:n,type:"in",values:[s]}),i.value&&C.push(...A.stripUnknownFilters(t.value,i.value)),C}),v={datasource:t,metrics:r.ref(["request_count"]),dimensions:[...n&&!y?[n]:[],"status_code_grouped"],filter:p,queryReady:a,timeframe:l,tz:f,withTrend:r.computed(()=>d.value&&!h),refreshInterval:o,queryFn:u,abortController:c},T={datasource:t,metrics:r.computed(()=>[m.value?"response_latency_average":"response_latency_p99"]),...n&&!y?{dimensions:[n]}:{},filter:p,queryReady:a,timeframe:l,tz:f,withTrend:r.computed(()=>d.value&&!h),refreshInterval:o,queryFn:u,abortController:c},E=N.useMetricFetcher(v),g=N.useMetricFetcher(T);return{trafficData:E,latencyData:g}},Ue=r.defineComponent({__name:"MetricsProvider",props:{datasource:{default:void 0},maxTimeframe:{default:A.TimeframeKeys.THIRTY_DAY},overrideTimeframe:{default:void 0},tz:{default:void 0},dimension:{default:void 0},filterValue:{default:void 0},additionalFilter:{default:void 0},queryReady:{type:Boolean,default:!0},refreshInterval:{default:ne},longCardTitles:{type:Boolean,default:!1},containerTitle:{default:void 0},description:{default:void 0},percentileLatency:{type:Boolean,default:void 0},abortController:{default:void 0}},setup(e){const t=e;if(t.dimension&&A.queryableExploreDimensions.findIndex(y=>y===t.dimension)===-1)throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${t.dimension}`);const n=r.inject(ae);let s;n?s=n.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"),s=()=>Promise.reject(new Error("Query bridge required")));const i=Te.useAnalyticsConfigStore(),a=r.computed(()=>!0),l=r.computed(()=>!i.loading&&t.queryReady),f=r.computed(()=>t.tz?t.tz:new Intl.DateTimeFormat().resolvedOptions().timeZone),d=r.computed(()=>t.datasource?t.datasource:"basic"),o=r.computed(()=>t.overrideTimeframe||A.TimePeriods.get(A.TimeframeKeys.SEVEN_DAY)),c=r.computed(()=>!t.percentileLatency),{trafficData:u,latencyData:m}=Pe({datasource:d,dimension:t.dimension,dimensionFilterValue:t.filterValue,additionalFilter:r.toRef(t,"additionalFilter"),queryReady:l,timeframe:o,tz:f,hasTrendAccess:a,refreshInterval:t.refreshInterval,queryFn:s,averageLatencies:c,abortController:t.abortController});return r.provide(de,{data:{traffic:u,latency:m},description:r.toRef(()=>t.description),containerTitle:r.toRef(()=>t.containerTitle),hasTrendAccess:a,longCardTitles:t.longCardTitles,averageLatencies:c}),(y,h)=>r.renderSlot(y.$slots,"default",{hasTrendAccess:a.value,timeframe:o.value})}});function $e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var fe={exports:{}};(function(e){(function(){function t(o,c){if(c.separator===!1||o<1e3)return o.toString();var u=typeof c.separator=="string"?c.separator:",",m=[],y=Math.round(o).toString().split("");return y.reverse().forEach(function(h,p){p&&p%3===0&&m.push(u),m.push(h)}),m.reverse().join("")}function n(o,c,u){var m=o/c,y=u.round?"round":"floor";return u.decimal===!1?(o=Math[y](m),o.toString()):(u.precision?o=m:o=m<10?Math[y](m*10)/10:Math[y](m),o=o.toString(),typeof u.decimal=="string"&&(o=o.replace(".",u.decimal)),o)}var s=1e3,i=1e4,a=1e6,l=1e9,f=1e12;function d(o,c){var u;c=c||{};var m=o<0;m&&(o=Math.abs(o)),c.precision&&(o=parseFloat(o.toPrecision(c.precision)));var y=c.min10k?i:s;return o<y||c.precision&&c.precision>Math.log10(o)?u=t(n(o,1,c),c):o<a?u=n(o,s,c)+"k":o<l?u=n(o,a,c)+"m":o<f?u=t(n(o,l,c),c)+"b":u=t(n(o,f,c),c)+"t",m&&(u="-"+u),c.capital&&(u=u.toUpperCase()),c.prefix&&(u=c.prefix+u),c.suffix&&(u=u+c.suffix),u}d.addCommas=t,e.exports=d})()})(fe);var Xe=fe.exports;const Ge=$e(Xe);var I=(e=>(e.GENERIC_COUNT="GenericCount",e.TRAFFIC="Traffic",e.ERROR_RATE="ErrorRate",e.LATENCY="Latency",e))(I||{}),k=(e=>(e.Small="sm",e.Medium="md",e.Large="lg",e.ExtraLarge="xl",e))(k||{});const Y=2,me=Y+2,je=(e,t,n=!1)=>{let s=!t||Number(e.toFixed(me))===0?0:Number(e.toFixed(me))>0?1:-1;return n&&(s*=-1),s},Ye=(e,t,n)=>t?`${Math.abs(e*100).toFixed(Y)}%`:n,He=(e,t)=>t===0?0:e/t-1,Qe=(e,t=!1)=>(t&&(e*=-1),e>0?_.TrendUpIcon:e<0?_.TrendDownIcon:_.IndeterminateSmallIcon),We="#ad000e",H="#6c7489",ye="#52596e",Je="#007d60",x="16px",Ze="20px",er={class:"metricscard"},rr={key:0,class:"metricscard-description"},tr={class:"metricscard-valuetrend"},nr={key:0,class:"metricscard-error"},ar={key:2,class:"metricscard-trend"},ir={"data-testid":"metric-trend-change"},or={key:0,class:"metricscard-trend-range"},sr=r.defineComponent({__name:"MetricsCard",props:{cardType:{type:String,required:!0,default:I.GENERIC_COUNT},title:{type:String,default:"0%",required:!0},description:{type:String,default:"",required:!1},tooltip:{type:String,required:!1,default:""},timeframe:{type:String,required:!1,default:""},metricValue:{type:String,default:""},metricChange:{type:String,required:!0},changePolarity:{type:Number,required:!0},trendIcon:{type:Object,default:_.IndeterminateSmallIcon},trendRange:{type:String,default:""},hasError:{type:Boolean,default:!1},errorMessage:{type:String,default:"Vitals data error"},cardSize:{type:String,required:!1,default:()=>k.Large},hasContainerTitle:{type:Boolean,required:!1,default:!1},titleTag:{type:String,default:"span"}},setup(e){const t=new Map([[I.GENERIC_COUNT,_.VitalsIcon],[I.TRAFFIC,_.CloudUploadIcon],[I.ERROR_RATE,_.WarningOutlineIcon],[I.LATENCY,_.ResponseIcon]]),n=e,s=f=>{const d={red:`var(--kui-color-text-danger-strong, ${We})`,green:`var(--kui-color-text-success, ${Je})`,grey:`var(--kui-color-text-neutral-strong, ${ye})`};return f>0?d.green:f<0?d.red:d.grey},i=f=>f>0?"positive":f<0?"negative":"neutral",a=[k.Medium,k.Large].includes(n.cardSize),l=[k.Small].includes(n.cardSize);return(f,d)=>{const o=r.resolveComponent("KTooltip");return r.openBlock(),r.createElementBlock("div",er,[r.createElementVNode("div",{class:r.normalizeClass(["metricscard-title",e.cardSize])},[r.unref(l)?r.createCommentVNode("",!0):(r.openBlock(),r.createBlock(r.resolveDynamicComponent(r.unref(t).get(e.cardType)),{key:0,class:"metricscard-icon",color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(x)},null,8,["color","size"])),(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.titleTag),null,{default:r.withCtx(()=>[r.createTextVNode(r.toDisplayString(e.title),1)]),_:1})),e.tooltip?(r.openBlock(),r.createBlock(o,{key:1,class:"metricscard-tooltip",placement:"right",text:e.tooltip},{default:r.withCtx(()=>[r.createVNode(r.unref(_.InfoIcon),{color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(x)},null,8,["color","size"])]),_:1},8,["text"])):r.createCommentVNode("",!0)],2),e.description&&r.unref(a)?(r.openBlock(),r.createElementBlock("div",rr,[r.createElementVNode("span",null,r.toDisplayString(e.description),1)])):r.createCommentVNode("",!0),r.createElementVNode("div",tr,[e.hasError?(r.openBlock(),r.createElementBlock("div",nr,[r.createVNode(r.unref(_.WarningIcon),{color:`var(--kui-color-text-neutral, ${r.unref(H)})`,size:r.unref(Ze)},null,8,["color","size"]),r.createElementVNode("div",null," "+r.toDisplayString(e.errorMessage),1)])):(r.openBlock(),r.createElementBlock("div",{key:1,class:r.normalizeClass(["metricscard-value",e.cardSize]),"data-testid":"metric-value"},r.toDisplayString(e.metricValue),3)),r.unref(a)?(r.openBlock(),r.createElementBlock("div",ar,[r.createElementVNode("div",{class:r.normalizeClass(["metricscard-trend-change",i(e.changePolarity)]),"data-testid":"metric-trend-parent"},[e.changePolarity!==0?(r.openBlock(),r.createBlock(r.resolveDynamicComponent(e.trendIcon),{key:0,color:s(e.changePolarity),size:r.unref(x)},null,8,["color","size"])):(r.openBlock(),r.createBlock(r.unref(_.EqualIcon),{key:1,color:`var(--kui-color-text-neutral-strong, ${r.unref(ye)})`,size:r.unref(x)},null,8,["color","size"])),r.createElementVNode("div",ir,r.toDisplayString(e.metricChange),1)],2),e.trendRange?(r.openBlock(),r.createElementBlock("div",or,r.toDisplayString(e.trendRange),1)):r.createCommentVNode("",!0)])):r.createCommentVNode("",!0)])])}}}),Q=(e,t)=>{const n=e.__vccOpts||e;for(const[s,i]of t)n[s]=i;return n},cr=Q(sr,[["__scopeId","data-v-43293fa2"]]),lr={},ur={class:"loading-tabs"};function dr(e,t){const n=r.resolveComponent("KSkeletonBox");return r.openBlock(),r.createElementBlock("div",ur,[r.createVNode(n,{width:"100"}),r.createVNode(n,{width:"75"})])}const fr=Q(lr,[["render",dr],["__scopeId","data-v-f7eb9c40"]]),mr={key:0,class:"container-title"},yr={key:0,class:"container-description"},pr={key:1,class:"error-display"},gr={key:0,class:"error-display-message"},hr={key:2,class:"cards-wrapper"},vr=Q(r.defineComponent({__name:"MetricCardContainer",props:{fallbackDisplayText:{type:String,required:!0},cards:{type:Array,required:!0},errorMessage:{type:String,required:!1,default:""},loading:{type:Boolean,required:!1,default:!1},hasTrendAccess:{type:Boolean,required:!1,default:!0},cardSize:{type:String,required:!1,default:()=>k.Large},containerTitle:{type:String,required:!1,default:""},containerDescription:{type:String,required:!1,default:""}},setup(e){const t=e,n=r.computed(()=>t.cards.every(i=>(i==null?void 0:i.hasError)===!0)),s=i=>{const a=He(i.currentValue,i.previousValue)||0,l=je(a,t.hasTrendAccess,i.increaseIsBad);return{metricValue:i.formatValueFn?i.formatValueFn(i.currentValue):Ge(i.currentValue,{capital:!0,round:!0})||"0",metricChange:i.formatChangeFn?i.formatChangeFn(a):Ye(a,t.hasTrendAccess,t.fallbackDisplayText),changePolarity:l,trendIcon:Qe(l,i.increaseIsBad),cardSize:t.cardSize,hasContainerTitle:!!t.containerTitle}};return(i,a)=>(r.openBlock(),r.createElementBlock("div",{class:r.normalizeClass(["kong-ui-public-metric-card-container",e.cardSize])},[t.containerTitle?(r.openBlock(),r.createElementBlock("div",mr,[r.createTextVNode(r.toDisplayString(t.containerTitle)+" ",1),t.containerDescription?(r.openBlock(),r.createElementBlock("div",yr,r.toDisplayString(t.containerDescription),1)):r.createCommentVNode("",!0)])):r.createCommentVNode("",!0),n.value?(r.openBlock(),r.createElementBlock("div",pr,[r.createVNode(r.unref(_.WarningIcon),{class:"error-display-icon"}),e.errorMessage?(r.openBlock(),r.createElementBlock("div",gr,r.toDisplayString(e.errorMessage),1)):r.createCommentVNode("",!0)])):(r.openBlock(),r.createElementBlock("div",hr,[(r.openBlock(!0),r.createElementBlock(r.Fragment,null,r.renderList(e.cards,(l,f)=>(r.openBlock(),r.createElementBlock(r.Fragment,null,[e.loading?(r.openBlock(),r.createBlock(fr,{key:`skeleton-${f}`,class:r.normalizeClass(e.cardSize===r.unref(k).Small?"loading-tabs-small":"loading-tabs-large")},null,8,["class"])):(r.openBlock(),r.createBlock(cr,r.mergeProps({key:f,ref_for:!0},s(l),{"card-size":e.cardSize,"card-type":l.cardType,description:l.description,"error-message":e.errorMessage,"has-error":l.hasError,title:l.title,"title-tag":l.titleTag,tooltip:l.tooltip,"trend-range":l.trendRange}),null,16,["card-size","card-type","description","error-message","has-error","title","title-tag","tooltip","trend-range"]))],64))),256))]))],2))}}),[["__scopeId","data-v-f8f8341b"]]),Er=r.defineComponent({__name:"MetricsConsumer",props:{lookupKey:{default:void 0},cardSize:{default:k.Large},cardToDisplay:{default:void 0}},setup(e){const t=e,n=r.inject(de);if(!n)throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");const{traffic:s,latency:i}=n.data,{i18n:a}=N.useI18n(),l=N.useMetricCardBuilder({cardType:I.TRAFFIC,title:r.computed(()=>n.longCardTitles?a.t("metricCard.long.traffic"):a.t("metricCard.short.traffic")),record:s.mapped,hasError:s.hasError,lookupKey:t.lookupKey,sumGroupedValues:w,trendRange:s.trendRange}),f=p=>`${p.toFixed(Y)}%`,d=r.computed(()=>{const p=s.mapped.value,v=L(p,"current",t.lookupKey,P),T=L(p,"current",t.lookupKey,w),E=v/T*100||0,g=L(p,"previous",t.lookupKey,P),C=L(p,"previous",t.lookupKey,w),S=g/C*100||0;return{cardType:I.ERROR_RATE,hasError:s.hasError.value,currentValue:E,previousValue:S,formatValueFn:f,title:n.longCardTitles?a.t("metricCard.long.errorRate"):a.t("metricCard.short.errorRate"),increaseIsBad:!0,trendRange:s.trendRange.value}}),o=p=>`${p}ms`,c=N.useMetricCardBuilder({cardType:I.LATENCY,title:r.computed(()=>{const{longCardTitles:p,averageLatencies:v}=n,T=v.value?"averageLatency":"p99Latency";return p?a.t(`metricCard.long.${T}`):a.t(`metricCard.short.${T}`)}),hasError:i.hasError,record:i.mapped,lookupKey:t.lookupKey,increaseIsBad:!0,formatValueFn:o,trendRange:i.trendRange}),u=r.computed(()=>t.cardToDisplay==="TRAFFIC"?[l.value]:t.cardToDisplay==="ERROR_RATE"?[d.value]:t.cardToDisplay==="LATENCY"?[c.value]:[l.value,d.value,c.value]),m=r.computed(()=>t.cardToDisplay==="TRAFFIC"||t.cardToDisplay==="ERROR_RATE"?s.isLoading.value:t.cardToDisplay==="LATENCY"?i.isLoading.value:s.isLoading.value||i.isLoading.value),y=r.computed(()=>({cards:u.value,containerTitle:n.containerTitle.value,containerDescription:n.description.value,loading:m.value,hasTrendAccess:n.hasTrendAccess.value,fallbackDisplayText:a.t("general.notAvailable"),cardSize:n.containerTitle.value?k.Medium:t.cardSize,hideTitle:!0})),h=r.computed(()=>({loading:y.value.loading,trafficCard:l.value,errorRateCard:d.value,latencyCard:c.value,errorRateFormatted:f(d.value.currentValue),latencyFormatted:o(c.value.currentValue)}));return(p,v)=>r.renderSlot(p.$slots,"default",{cardValues:h.value},()=>[r.createVNode(vr,r.normalizeProps(r.guardReactiveProps(y.value)),null,16)])}}),z=e=>new Date(e),Rr=(e,t)=>{const n=e.body;e.reply({statusCode:200,body:ge(n,t)})},pe=e=>e.reduce((t,n)=>(t[n]={name:n},t),{}),ge=(e,t)=>{var h,p;const n=A.TimePeriods.get(A.TimeframeKeys.ONE_DAY),s=e.granularity==="trend"?new A.DeltaQueryTime(n):new A.UnaryQueryTime(n),i=s.endMs(),a=s.startMs(),l=s.granularityMs(),f=e.granularity==="trend"?2:1;if((e.dimensions??[]).length>2)throw new Error(`Explore only supports 0-2 dimensions; got: ${JSON.stringify(e.dimensions)}`);const d=(e.dimensions??[]).find(v=>v!=="time"),o=(t==null?void 0:t.dimensionNames)??[],c=Math.max(o.length,1),u=e.metrics||[],m=[];for(let v=0;v<f;v++)for(let T=0;T<c;T++){const E=d?{[d]:o[T]}:{};(h=e.dimensions)!=null&&h.includes("status_code_grouped")?w.forEach(g=>{const C=u.reduce((S,V)=>((t==null?void 0:t.deterministic)??!0?S[V]=(f-v)*1e3+100*T+1:S[V]=Math.round(Math.random()*1e3),S),{...E,status_code_grouped:g});m.push({version:"v1",timestamp:v===0?z(a).toISOString():z(a+l).toISOString(),event:C})}):m.push({version:"v1",timestamp:v===0?z(a).toISOString():z(a+l).toISOString(),event:u.reduce((g,C)=>((t==null?void 0:t.deterministic)??!0?g[C]=(f-v)*1e3+100*T+1:g[C]=Math.round(Math.random()*1e3),g),{...E})})}const y={start_ms:a,end_ms:i,granularity_ms:l,display:d?{[d]:pe(o),...(p=e.dimensions)!=null&&p.includes("status_code_grouped")?{status_code_grouped:pe(w)}:{}}:{},metric_names:e.metrics,query_id:"test"};return{data:m,meta:y}};R.ALL_STATUS_CODE_GROUPS=w,R.DEFAULT_REFRESH_INTERVAL=ne,R.INJECT_QUERY_PROVIDER=ae,R.MAX_ANALYTICS_REQUEST_RETRIES=te,R.MetricCardSize=k,R.MetricCardType=I,R.MetricsConsumer=Er,R.MetricsProvider=Ue,R.STATUS_CODES_FAILED=P,R.STATUS_CODES_SUCCESS=_e,R.mockExploreResponse=ge,R.mockExploreResponseFromCypress=Rr,Object.defineProperty(R,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong-ui-public/analytics-metric-provider",
|
|
3
|
-
"version": "8.4.
|
|
3
|
+
"version": "8.4.39",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./dist/vitals-metric-provider.umd.js",
|
|
6
6
|
"module": "./dist/vitals-metric-provider.es.js",
|
|
@@ -40,17 +40,17 @@
|
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
|
42
42
|
"@kong/kongponents": "^9.11.2",
|
|
43
|
-
"@kong-ui-public/analytics-config-store": "^0.8.16",
|
|
44
43
|
"@kong-ui-public/analytics-utilities": "^5.0.4",
|
|
44
|
+
"@kong-ui-public/analytics-config-store": "^0.8.16",
|
|
45
45
|
"@kong-ui-public/i18n": "^2.2.3"
|
|
46
46
|
},
|
|
47
47
|
"devDependencies": {
|
|
48
48
|
"@kong/design-tokens": "1.17.2",
|
|
49
49
|
"@kong/kongponents": "9.12.1",
|
|
50
50
|
"pinia": ">= 2.1.7 < 3",
|
|
51
|
-
"@kong-ui-public/analytics-
|
|
51
|
+
"@kong-ui-public/analytics-config-store": "^0.8.16",
|
|
52
52
|
"@kong-ui-public/i18n": "^2.2.3",
|
|
53
|
-
"@kong-ui-public/analytics-
|
|
53
|
+
"@kong-ui-public/analytics-utilities": "^5.0.4"
|
|
54
54
|
},
|
|
55
55
|
"scripts": {
|
|
56
56
|
"dev": "cross-env USE_SANDBOX=true vite",
|