@kong-ui-public/analytics-metric-provider 8.9.5-pr.2114.d6a8378f0.0 → 8.9.5

package/dist/vitals-metric-provider.es.js

@@ -0,0 +1,1185 @@
+import { ref as H, watchEffect as Me, computed as h, getCurrentInstance as xe, reactive as qe, onMounted as Ue, onUnmounted as ze, watch as Ke, isReadonly as Pe, toRefs as $e, defineComponent as Q, inject as _e, toRef as X, provide as Be, renderSlot as Ie, resolveComponent as Ae, openBlock as T, createElementBlock as _, normalizeClass as U, createElementVNode as M, unref as E, createBlock as N, resolveDynamicComponent as re, createCommentVNode as V, withCtx as ye, createTextVNode as De, toDisplayString as w, createVNode as K, Fragment as he, renderList as Xe, mergeProps as Ge, normalizeProps as je, guardReactiveProps as He } from "vue";
+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";
+import { createI18n as Ze, i18nTComponent as er } from "@kong-ui-public/i18n";
+import { useAnalyticsConfigStore as rr } from "@kong-ui-public/analytics-config-store";
+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";
+const cr = {
+  notAvailable: "N/A"
+}, dr = {
+  small: {
+    traffic: "Requests",
+    errorRate: "Error Rate",
+    averageLatency: "Avg. Latency",
+    p99Latency: "P99 Latency"
+  },
+  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"
+  }
+}, fr = {
+  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"
+}, vr = {
+  general: cr,
+  metricCard: dr,
+  trendRange: fr
+};
+function mr() {
+  const e = Ze("en-us", vr);
+  return {
+    i18n: e,
+    i18nT: er(e)
+    // Translation component <i18n-t>
+  };
+}
+const yr = 2, $ = ["1XX", "2XX", "3XX", "4XX", "5XX"], ge = ["4XX", "5XX"], gt = ["1XX", "2XX", "3XX"], hr = 30 * 1e3, gr = "analytics-query-provider";
+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 || {});
+const pr = (e) => {
+  var r, t, o, a, n;
+  return e ? !!// TODO: revisit: currently only the first check ever matters?
+  ((r = Object.keys(e)) != null && r.length || (t = e.data) != null && t.length || (a = (o = e.data) == null ? void 0 : o.data) != null && a.length || !((n = e.data) != null && n.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
+};
+function Rr(e = H({}), r, t, o = pr) {
+  const a = H(
+    "PENDING"
+    /* PENDING */
+  );
+  return Me(() => {
+    const n = o(e.value);
+    if (e.value && n && t.value) {
+      a.value = "VALIDATING_HAS_DATA";
+      return;
+    }
+    if (e.value && t.value) {
+      a.value = "VALIDATING";
+      return;
+    }
+    if (e.value && r.value) {
+      a.value = "STALE_IF_ERROR";
+      return;
+    }
+    if (e.value === void 0 && !r.value) {
+      a.value = "PENDING";
+      return;
+    }
+    if (e.value && !r.value && n) {
+      a.value = "SUCCESS_HAS_DATA";
+      return;
+    }
+    if (e.value && !r.value) {
+      a.value = "SUCCESS";
+      return;
+    }
+    e.value === void 0 && r && (a.value = "ERROR");
+  }), {
+    state: a,
+    swrvState: Le
+  };
+}
+const L = Symbol("default"), te = "status_code_grouped", pe = (e, r, t, o, a) => {
+  e[r][t] || (e[r][t] = {}), e[r][t][o] = a;
+};
+function Tr(e, r) {
+  var c;
+  const t = ((c = e.meta.metric_names) == null ? void 0 : c[0]) || "", o = e.meta.start_ms, a = Object.keys(e.meta.display || {}), n = !!a.find((f) => f === te), l = a.find((f) => f !== te);
+  return a.length > 2 || a.length > 1 && !n ? (console.error("Don't know how to work with provided dimensions:", a), {
+    previous: { [L]: { [L]: 0 } },
+    current: { [L]: { [L]: 0 } }
+  }) : e.data.reduce((f, i) => {
+    const s = i.event[t], u = l ? i.event[l] : L, d = n ? i.event[te] : L;
+    return new Date(i.timestamp).getTime() === o && r ? pe(f, "previous", u, d, s) : pe(f, "current", u, d, s), f;
+  }, {
+    previous: {},
+    current: {}
+  });
+}
+function Er(e) {
+  e.queryReady === void 0 && (e.queryReady = h(() => !0));
+  const { i18n: r } = F.useI18n(), t = h(() => {
+    var u, d;
+    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,
+      ...(d = e.filter.value) != null && d.length ? { filters: e.filter.value } : {},
+      time_range: e.timeframe.value.v4Query(e.tz.value)
+    };
+  }), o = h(() => {
+    var d, v, g, R;
+    if (!((d = e.queryReady) != null && d.value))
+      return null;
+    const u = (v = e.filter) != null && v.value ? JSON.stringify(e.filter.value) : "";
+    return `metric-fetcher-${e.timeframe.value.cacheKey()}-${(g = e.dimensions) == null ? void 0 : g.join("-")}-${(R = e.metrics.value) == null ? void 0 : R.join("-")}-${u}-${e.refreshCounter.value}`;
+  }), { response: a, error: n, isValidating: l } = F.useRequest(
+    () => o.value,
+    () => e.queryFn({
+      // TODO: Use a type guard to validate that if the datasource is basic,
+      // the query is a valid basic explore query.
+      datasource: e.datasource.value,
+      query: t.value
+    }, e.abortController ?? new AbortController()),
+    {
+      refreshInterval: e.refreshInterval,
+      revalidateOnFocus: !1,
+      errorRetryCount: yr
+    }
+  ), { state: c, swrvState: f } = Rr(a, n, l), i = h(() => {
+    var u, d, v, g, R, m, C;
+    return !((d = (u = a.value) == null ? void 0 : u.data) != null && d.length) || !((g = (v = a.value) == null ? void 0 : v.meta) != null && g.display) || !((C = (m = (R = a.value) == null ? void 0 : R.meta) == null ? void 0 : m.metric_names) != null && C.length) ? { current: {}, previous: {} } : Tr(a.value, e.withTrend.value);
+  }), s = h(() => {
+    var u, d;
+    if (e.timeframe.value.key === "custom") {
+      if (!((d = (u = a.value) == null ? void 0 : u.meta) != null && d.start_ms))
+        return "";
+      const { start_ms: v, end_ms: g } = a.value.meta;
+      let R = (g - v) / (1e3 * 60 * 60 * 24);
+      return e.withTrend.value && (R /= 2), r.t("trendRange.custom", { numDays: Math.round(R) });
+    } else
+      return e.withTrend.value ? r.t(`trendRange.${e.timeframe.value.key}`) : "";
+  });
+  return {
+    isLoading: h(() => f.PENDING === c.value),
+    hasError: h(() => f.ERROR === c.value),
+    raw: a,
+    mapped: i,
+    trendRange: s
+  };
+}
+const z = (e, r, t = L, o) => (o ?? [L]).reduce((n, l) => {
+  const c = e[r][t];
+  return c ? n + (c[l] || 0) : n;
+}, 0);
+function Cr(e) {
+  const {
+    cardType: r,
+    title: t,
+    description: o,
+    record: a,
+    hasError: n,
+    increaseIsBad: l,
+    formatValueFn: c,
+    trendRange: f
+  } = e;
+  return h(() => {
+    let i = 0, s = 0;
+    if (a != null && a.value)
+      try {
+        i = z(a.value, "current", e.lookupKey, e.sumGroupedValues), s = z(a.value, "previous", e.lookupKey, e.sumGroupedValues);
+      } catch (u) {
+        console.error(
+          "Metric card data doesn't have the expected structure:",
+          u
+        );
+      }
+    return {
+      cardType: r,
+      hasError: n.value,
+      currentValue: i,
+      previousValue: s,
+      title: t.value,
+      description: o,
+      increaseIsBad: !!l,
+      // Coerce undefined to false
+      formatValueFn: c,
+      trendRange: f == null ? void 0 : f.value
+    };
+  });
+}
+var ne = /* @__PURE__ */ new WeakMap(), Re = 0;
+function Sr(e) {
+  if (!e.length)
+    return "";
+  for (var r = "arg", t = 0; t < e.length; ++t) {
+    var o = void 0;
+    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;
+  }
+  return r;
+}
+function _r(e) {
+  if (typeof e == "function")
+    try {
+      e = e();
+    } catch {
+      e = "";
+    }
+  return Array.isArray(e) ? e = Sr(e) : e = String(e || ""), e;
+}
+var ue = (
+  /** @class */
+  function() {
+    function e(r) {
+      r === void 0 && (r = 0), this.items = /* @__PURE__ */ new Map(), this.ttl = r;
+    }
+    return e.prototype.serializeKey = function(r) {
+      return _r(r);
+    }, e.prototype.get = function(r) {
+      var t = this.serializeKey(r);
+      return this.items.get(t);
+    }, e.prototype.set = function(r, t, o) {
+      var a = this.serializeKey(r), n = o || this.ttl, l = Date.now(), c = {
+        data: t,
+        createdAt: l,
+        expiresAt: n ? l + n : 1 / 0
+      };
+      this.dispatchExpire(n, c, a), this.items.set(a, c);
+    }, e.prototype.dispatchExpire = function(r, t, o) {
+      var a = this;
+      r && setTimeout(function() {
+        var n = Date.now(), l = n >= t.expiresAt;
+        l && a.delete(o);
+      }, r);
+    }, e.prototype.delete = function(r) {
+      this.items.delete(r);
+    }, e;
+  }()
+);
+function Ir() {
+  return typeof navigator.onLine < "u" ? navigator.onLine : !0;
+}
+function Ar() {
+  return typeof document < "u" && typeof document.visibilityState < "u" ? document.visibilityState !== "hidden" : !0;
+}
+var Dr = function(e) {
+  return fetch(e).then(function(r) {
+    return r.json();
+  });
+};
+const ae = {
+  isOnline: Ir,
+  isDocumentVisible: Ar,
+  fetcher: Dr
+};
+var b = function() {
+  return b = Object.assign || function(e) {
+    for (var r, t = 1, o = arguments.length; t < o; t++) {
+      r = arguments[t];
+      for (var a in r) Object.prototype.hasOwnProperty.call(r, a) && (e[a] = r[a]);
+    }
+    return e;
+  }, b.apply(this, arguments);
+}, x = function(e, r, t, o) {
+  function a(n) {
+    return n instanceof t ? n : new t(function(l) {
+      l(n);
+    });
+  }
+  return new (t || (t = Promise))(function(n, l) {
+    function c(s) {
+      try {
+        i(o.next(s));
+      } catch (u) {
+        l(u);
+      }
+    }
+    function f(s) {
+      try {
+        i(o.throw(s));
+      } catch (u) {
+        l(u);
+      }
+    }
+    function i(s) {
+      s.done ? n(s.value) : a(s.value).then(c, f);
+    }
+    i((o = o.apply(e, r || [])).next());
+  });
+}, q = function(e, r) {
+  var t = { label: 0, sent: function() {
+    if (n[0] & 1) throw n[1];
+    return n[1];
+  }, trys: [], ops: [] }, o, a, n, l;
+  return l = { next: c(0), throw: c(1), return: c(2) }, typeof Symbol == "function" && (l[Symbol.iterator] = function() {
+    return this;
+  }), l;
+  function c(i) {
+    return function(s) {
+      return f([i, s]);
+    };
+  }
+  function f(i) {
+    if (o) throw new TypeError("Generator is already executing.");
+    for (; t; ) try {
+      if (o = 1, a && (n = i[0] & 2 ? a.return : i[0] ? a.throw || ((n = a.return) && n.call(a), 0) : a.next) && !(n = n.call(a, i[1])).done) return n;
+      switch (a = 0, n && (i = [i[0] & 2, n.value]), i[0]) {
+        case 0:
+        case 1:
+          n = i;
+          break;
+        case 4:
+          return t.label++, { value: i[1], done: !1 };
+        case 5:
+          t.label++, a = i[1], i = [0];
+          continue;
+        case 7:
+          i = t.ops.pop(), t.trys.pop();
+          continue;
+        default:
+          if (n = t.trys, !(n = n.length > 0 && n[n.length - 1]) && (i[0] === 6 || i[0] === 2)) {
+            t = 0;
+            continue;
+          }
+          if (i[0] === 3 && (!n || i[1] > n[0] && i[1] < n[3])) {
+            t.label = i[1];
+            break;
+          }
+          if (i[0] === 6 && t.label < n[1]) {
+            t.label = n[1], n = i;
+            break;
+          }
+          if (n && t.label < n[2]) {
+            t.label = n[2], t.ops.push(i);
+            break;
+          }
+          n[2] && t.ops.pop(), t.trys.pop();
+          continue;
+      }
+      i = r.call(e, t);
+    } catch (s) {
+      i = [6, s], a = 0;
+    } finally {
+      o = n = 0;
+    }
+    if (i[0] & 5) throw i[1];
+    return { value: i[0] ? i[1] : void 0, done: !0 };
+  }
+}, br = function(e, r) {
+  var t = typeof Symbol == "function" && e[Symbol.iterator];
+  if (!t) return e;
+  var o = t.call(e), a, n = [], l;
+  try {
+    for (; (r === void 0 || r-- > 0) && !(a = o.next()).done; ) n.push(a.value);
+  } catch (c) {
+    l = { error: c };
+  } finally {
+    try {
+      a && !a.done && (t = o.return) && t.call(o);
+    } finally {
+      if (l) throw l.error;
+    }
+  }
+  return n;
+}, wr = function(e, r, t) {
+  if (t || arguments.length === 2) for (var o = 0, a = r.length, n; o < a; o++)
+    (n || !(o in r)) && (n || (n = Array.prototype.slice.call(r, 0, o)), n[o] = r[o]);
+  return e.concat(n || Array.prototype.slice.call(r));
+}, Ve = new ue(), Y = new ue(), ie = new ue(), ke = {
+  cache: Ve,
+  refreshInterval: 0,
+  ttl: 0,
+  serverTTL: 1e3,
+  dedupingInterval: 2e3,
+  revalidateOnFocus: !0,
+  revalidateDebounce: 0,
+  shouldRetryOnError: !0,
+  errorRetryInterval: 5e3,
+  errorRetryCount: 5,
+  fetcher: ae.fetcher,
+  isOnline: ae.isOnline,
+  isDocumentVisible: ae.isDocumentVisible
+};
+function Or(e, r, t) {
+  var o = Y.get(e);
+  if (o)
+    o.data.push(r);
+  else {
+    var a = 5e3;
+    Y.set(e, [r], t > 0 ? t + a : t);
+  }
+}
+function Lr(e, r, t) {
+  if (t.isDocumentVisible() && !(t.errorRetryCount !== void 0 && r > t.errorRetryCount)) {
+    var o = Math.min(r || 0, t.errorRetryCount), a = o * t.errorRetryInterval;
+    setTimeout(function() {
+      e(null, { errorRetryCount: o + 1, shouldRetryOnError: !0 });
+    }, a);
+  }
+}
+var Te = function(e, r, t, o) {
+  return t === void 0 && (t = Ve), o === void 0 && (o = ke.ttl), x(void 0, void 0, void 0, function() {
+    var a, n, l, c, f, i, s;
+    return q(this, function(u) {
+      switch (u.label) {
+        case 0:
+          if (!kr(r)) return [3, 5];
+          u.label = 1;
+        case 1:
+          return u.trys.push([1, 3, , 4]), [4, r];
+        case 2:
+          return a = u.sent(), [3, 4];
+        case 3:
+          return c = u.sent(), n = c, [3, 4];
+        case 4:
+          return [3, 6];
+        case 5:
+          a = r, u.label = 6;
+        case 6:
+          if (l = !1, f = { data: a, error: n, isValidating: l }, typeof a < "u")
+            try {
+              t.set(e, f, o);
+            } catch (d) {
+              console.error("swrv(mutate): failed to set cache", d);
+            }
+          return i = Y.get(e), i && i.data.length && (s = i.data.filter(function(d) {
+            return d.key === e;
+          }), s.forEach(function(d, v) {
+            typeof f.data < "u" && (d.data = f.data), d.error = f.error, d.isValidating = f.isValidating;
+            var g = v === s.length - 1;
+            g || delete s[v];
+          }), s = s.filter(Boolean)), [2, f];
+      }
+    });
+  });
+};
+function Vr() {
+  for (var e = this, r = [], t = 0; t < arguments.length; t++)
+    r[t] = arguments[t];
+  var o, a, n = b({}, ke), l = !1, c = !1, f = xe(), i = (f == null ? void 0 : f.proxy) || f;
+  if (!i)
+    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 s = (i == null ? void 0 : i.$isServer) || !1;
+  r.length >= 1 && (o = r[0]), r.length >= 2 && (a = r[1]), r.length > 2 && (n = b(b({}, n), r[2]));
+  var u = s ? n.serverTTL : n.ttl, d = typeof o == "function" ? o : H(o);
+  typeof a > "u" && (a = n.fetcher);
+  var v = null;
+  v || (v = qe({
+    data: void 0,
+    error: void 0,
+    isValidating: !0,
+    key: null
+  }));
+  var g = function(p, y) {
+    return x(e, void 0, void 0, function() {
+      var I, S, A, P, W, de, J, fe = this;
+      return q(this, function(Z) {
+        switch (Z.label) {
+          case 0:
+            return I = v.data === void 0, S = d.value, S ? (A = n.cache.get(S), P = A && A.data, v.isValidating = !0, P && (v.data = P.data, v.error = P.error), W = p || a, !W || !n.isDocumentVisible() && !I || (y == null ? void 0 : y.forceRevalidate) !== void 0 && !(y != null && y.forceRevalidate) ? (v.isValidating = !1, [
+              2
+              /*return*/
+            ]) : A && (de = !!(Date.now() - A.createdAt >= n.dedupingInterval || y != null && y.forceRevalidate), !de) ? (v.isValidating = !1, [
+              2
+              /*return*/
+            ]) : (J = function() {
+              return x(fe, void 0, void 0, function() {
+                var k, ve, ee, me;
+                return q(this, function(B) {
+                  switch (B.label) {
+                    case 0:
+                      return k = ie.get(S), k ? [3, 2] : (ve = Array.isArray(S) ? S : [S], ee = W.apply(void 0, wr([], br(ve), !1)), ie.set(S, ee, n.dedupingInterval), [4, Te(S, ee, n.cache, u)]);
+                    case 1:
+                      return B.sent(), [3, 4];
+                    case 2:
+                      return [4, Te(S, k.data, n.cache, u)];
+                    case 3:
+                      B.sent(), B.label = 4;
+                    case 4:
+                      return v.isValidating = !1, ie.delete(S), v.error !== void 0 && (me = !l && n.shouldRetryOnError && (y ? y.shouldRetryOnError : !0), me && Lr(g, y ? y.errorRetryCount : 1, n)), [
+                        2
+                        /*return*/
+                      ];
+                  }
+                });
+              });
+            }, P && n.revalidateDebounce ? (setTimeout(function() {
+              return x(fe, void 0, void 0, function() {
+                return q(this, function(k) {
+                  switch (k.label) {
+                    case 0:
+                      return l ? [3, 2] : [4, J()];
+                    case 1:
+                      k.sent(), k.label = 2;
+                    case 2:
+                      return [
+                        2
+                        /*return*/
+                      ];
+                  }
+                });
+              });
+            }, n.revalidateDebounce), [3, 3]) : [3, 1])) : [
+              2
+              /*return*/
+            ];
+          case 1:
+            return [4, J()];
+          case 2:
+            Z.sent(), Z.label = 3;
+          case 3:
+            return [
+              2
+              /*return*/
+            ];
+        }
+      });
+    });
+  }, R = function() {
+    return x(e, void 0, void 0, function() {
+      return q(this, function(p) {
+        return [2, g(null, { shouldRetryOnError: !1 })];
+      });
+    });
+  }, m = null;
+  Ue(function() {
+    var p = function() {
+      return x(e, void 0, void 0, function() {
+        return q(this, function(y) {
+          switch (y.label) {
+            case 0:
+              return !v.error && n.isOnline() ? [4, g()] : [3, 2];
+            case 1:
+              return y.sent(), [3, 3];
+            case 2:
+              m && clearTimeout(m), y.label = 3;
+            case 3:
+              return n.refreshInterval && !l && (m = setTimeout(p, n.refreshInterval)), [
+                2
+                /*return*/
+              ];
+          }
+        });
+      });
+    };
+    n.refreshInterval && (m = setTimeout(p, n.refreshInterval)), n.revalidateOnFocus && (document.addEventListener("visibilitychange", R, !1), window.addEventListener("focus", R, !1));
+  }), ze(function() {
+    l = !0, m && clearTimeout(m), n.revalidateOnFocus && (document.removeEventListener("visibilitychange", R, !1), window.removeEventListener("focus", R, !1));
+    var p = Y.get(d.value);
+    p && (p.data = p.data.filter(function(y) {
+      return y !== v;
+    }));
+  });
+  try {
+    Ke(d, function(p) {
+      Pe(d) || (d.value = p), v.key = p, v.isValidating = !!p, Or(d.value, v, u), !s && !c && d.value && g(), c = !1;
+    }, {
+      immediate: !0
+    });
+  } catch {
+  }
+  var C = b(b({}, $e(v)), { mutate: function(p, y) {
+    return g(p, b(b({}, y), { forceRevalidate: !0 }));
+  } });
+  return C;
+}
+function kr(e) {
+  return e !== null && typeof e == "object" && typeof e.then == "function";
+}
+function Nr(e, r, t) {
+  const {
+    data: o,
+    error: a,
+    isValidating: n,
+    mutate: l
+  } = Vr(e, r, {
+    revalidateDebounce: 500,
+    revalidateOnFocus: !1,
+    dedupingInterval: 100,
+    ...t
+  });
+  return {
+    data: h(() => o.value),
+    response: o,
+    error: a,
+    isValidating: n,
+    revalidate: l
+  };
+}
+const F = {
+  useI18n: mr,
+  useMetricCardBuilder: Cr,
+  useMetricFetcher: Er,
+  useRequest: Nr
+}, Ne = Symbol("METRICS_PROVIDER_KEY"), Fr = (e) => {
+  const {
+    datasource: r,
+    dimension: t,
+    dimensionFilterValue: o,
+    additionalFilter: a,
+    queryReady: n,
+    timeframe: l,
+    tz: c,
+    hasTrendAccess: f,
+    refreshInterval: i,
+    abortController: s,
+    queryFn: u,
+    averageLatencies: d
+  } = e;
+  if (o && !t)
+    throw new Error("Must provide a dimension if filtering by a value");
+  const v = !!(t && o), g = !!(t && !o), R = h(() => {
+    const I = [];
+    return v && I.push({
+      field: t,
+      operator: "in",
+      value: [o]
+    }), a.value && I.push(...Ye(r.value, a.value)), I;
+  }), m = {
+    datasource: r,
+    metrics: H([
+      "request_count"
+    ]),
+    // Traffic and error rate cards should only try to query for the dimension if it's going to be used.
+    // It isn't used for single entity queries.
+    dimensions: [
+      ...t && !v ? [t] : [],
+      "status_code_grouped"
+    ],
+    filter: R,
+    queryReady: n,
+    timeframe: l,
+    tz: c,
+    // Traffic and error rate cards can't query trend if multiple entities are expected.
+    withTrend: h(() => f.value && !g),
+    refreshInterval: i,
+    queryFn: u,
+    abortController: s,
+    refreshCounter: e.refreshCounter
+  }, C = {
+    datasource: r,
+    metrics: h(() => [
+      d.value ? "response_latency_average" : "response_latency_p99"
+    ]),
+    // To keep single-entity queries consistent, don't bother querying the dimension for latency
+    // in the single-entity case, even though it's possible.
+    ...t && !v ? { dimensions: [t] } : {},
+    filter: R,
+    queryReady: n,
+    timeframe: l,
+    tz: c,
+    // Don't query latency trends in the multi-entity case: it's possible, but wasteful.
+    withTrend: h(() => f.value && !g),
+    refreshInterval: i,
+    queryFn: u,
+    abortController: s,
+    refreshCounter: e.refreshCounter
+  }, p = F.useMetricFetcher(m), y = F.useMetricFetcher(C);
+  return {
+    trafficData: p,
+    latencyData: y
+  };
+}, pt = /* @__PURE__ */ Q({
+  __name: "MetricsProvider",
+  props: {
+    datasource: { default: void 0 },
+    maxTimeframe: { default: se.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: hr },
+    longCardTitles: { type: Boolean, default: !1 },
+    containerTitle: { default: void 0 },
+    description: { default: void 0 },
+    percentileLatency: { type: Boolean, default: void 0 },
+    abortController: { default: void 0 },
+    refreshCounter: { default: 0 }
+  },
+  setup(e) {
+    const r = e;
+    if (r.dimension && Qe.findIndex((v) => v === r.dimension) === -1)
+      throw new Error(`Attempted to use MetricsProvider with an invalid dimension: ${r.dimension}`);
+    const t = _e(gr);
+    let o;
+    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")));
+    const a = rr(), n = h(() => !0), l = h(() => !a.loading && r.queryReady), c = h(() => r.tz ? r.tz : new Intl.DateTimeFormat().resolvedOptions().timeZone), f = h(() => r.datasource ? r.datasource : "basic"), i = h(() => r.overrideTimeframe || be.get(se.SEVEN_DAY)), s = h(() => !r.percentileLatency), {
+      trafficData: u,
+      latencyData: d
+    } = Fr({
+      datasource: f,
+      dimension: r.dimension,
+      dimensionFilterValue: r.filterValue,
+      additionalFilter: X(r, "additionalFilter"),
+      queryReady: l,
+      timeframe: i,
+      tz: c,
+      hasTrendAccess: n,
+      refreshInterval: r.refreshInterval,
+      queryFn: o,
+      averageLatencies: s,
+      abortController: r.abortController,
+      refreshCounter: X(r, "refreshCounter")
+    });
+    return Be(Ne, {
+      data: {
+        traffic: u,
+        latency: d
+      },
+      description: X(() => r.description),
+      containerTitle: X(() => r.containerTitle),
+      hasTrendAccess: n,
+      longCardTitles: r.longCardTitles,
+      averageLatencies: s
+    }), (v, g) => Ie(v.$slots, "default", {
+      hasTrendAccess: n.value,
+      timeframe: i.value
+    });
+  }
+});
+function Mr(e) {
+  return e && e.__esModule && Object.prototype.hasOwnProperty.call(e, "default") ? e.default : e;
+}
+var Fe = { exports: {} };
+(function(e) {
+  (function() {
+    function r(i, s) {
+      if (s.separator === !1 || i < 1e3)
+        return i.toString();
+      var u = typeof s.separator == "string" ? s.separator : ",", d = [], v = Math.round(i).toString().split("");
+      return v.reverse().forEach(function(g, R) {
+        R && R % 3 === 0 && d.push(u), d.push(g);
+      }), d.reverse().join("");
+    }
+    function t(i, s, u) {
+      var d = i / s, v = u.round ? "round" : "floor";
+      return u.decimal === !1 ? (i = Math[v](d), i.toString()) : (u.precision ? i = d : i = d < 10 ? Math[v](d * 10) / 10 : Math[v](d), i = i.toString(), typeof u.decimal == "string" && (i = i.replace(".", u.decimal)), i);
+    }
+    var o = 1e3, a = 1e4, n = 1e6, l = 1e9, c = 1e12;
+    function f(i, s) {
+      var u;
+      s = s || {};
+      var d = i < 0;
+      d && (i = Math.abs(i)), s.precision && (i = parseFloat(i.toPrecision(s.precision)));
+      var v = s.min10k ? a : o;
+      return i < v || s.precision && s.precision > Math.log10(i) ? u = r(t(i, 1, s), s) : i < n ? u = t(i, o, s) + "k" : i < l ? u = t(i, n, s) + "m" : i < c ? u = r(t(i, l, s), s) + "b" : u = r(t(i, c, s), s) + "t", d && (u = "-" + u), s.capital && (u = u.toUpperCase()), s.prefix && (u = s.prefix + u), s.suffix && (u = u + s.suffix), u;
+    }
+    f.addCommas = r, e.exports = f;
+  })();
+})(Fe);
+var xr = Fe.exports;
+const qr = /* @__PURE__ */ Mr(xr);
+var O = /* @__PURE__ */ ((e) => (e.GENERIC_COUNT = "GenericCount", e.TRAFFIC = "Traffic", e.ERROR_RATE = "ErrorRate", e.LATENCY = "Latency", e))(O || {}), D = /* @__PURE__ */ ((e) => (e.Small = "sm", e.Medium = "md", e.Large = "lg", e.ExtraLarge = "xl", e))(D || {});
+const le = 2, Ee = le + 2, Ur = (e, r, t = !1) => {
+  let o = !r || Number(e.toFixed(Ee)) === 0 ? 0 : Number(e.toFixed(Ee)) > 0 ? 1 : -1;
+  return t && (o *= -1), o;
+}, zr = (e, r, t) => r ? `${Math.abs(e * 100).toFixed(le)}%` : t, Kr = (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", Ce = "#52596e", Br = "#007d60", G = "16px", Xr = "20px", Gr = {
+  key: 0,
+  class: "metricscard-description"
+}, jr = { class: "metricscard-valuetrend" }, Hr = {
+  key: 0,
+  class: "metricscard-error"
+}, Yr = {
+  key: 2,
+  class: "metricscard-trend"
+}, Qr = { "data-testid": "metric-trend-change" }, Wr = {
+  key: 0,
+  class: "metricscard-trend-range"
+}, Jr = /* @__PURE__ */ Q({
+  __name: "MetricsCard",
+  props: {
+    cardType: {
+      type: String,
+      required: !0,
+      default: O.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: we
+    },
+    trendRange: {
+      type: String,
+      default: ""
+    },
+    hasError: {
+      type: Boolean,
+      default: !1
+    },
+    errorMessage: {
+      type: String,
+      default: "Vitals data error"
+    },
+    cardSize: {
+      type: String,
+      required: !1,
+      default: () => D.Large
+    },
+    hasContainerTitle: {
+      type: Boolean,
+      required: !1,
+      default: !1
+    },
+    titleTag: {
+      type: String,
+      default: "span"
+    }
+  },
+  setup(e) {
+    const r = /* @__PURE__ */ new Map([
+      [O.GENERIC_COUNT, ar],
+      [O.TRAFFIC, ir],
+      [O.ERROR_RATE, or],
+      [O.LATENCY, sr]
+    ]), t = e, o = (c) => {
+      const f = {
+        red: `var(--kui-color-text-danger-strong, ${$r})`,
+        green: `var(--kui-color-text-success, ${Br})`,
+        grey: `var(--kui-color-text-neutral-strong, ${Ce})`
+      };
+      return c > 0 ? f.green : c < 0 ? f.red : f.grey;
+    }, a = (c) => c > 0 ? "positive" : c < 0 ? "negative" : "neutral", n = [D.Medium, D.Large].includes(t.cardSize), l = [D.Small].includes(t.cardSize);
+    return (c, f) => {
+      const i = Ae("KTooltip");
+      return T(), _("div", {
+        class: U(["metricscard", e.cardSize])
+      }, [
+        M("div", {
+          class: U(["metricscard-title", e.cardSize])
+        }, [
+          E(l) ? V("", !0) : (T(), N(re(E(r).get(e.cardType)), {
+            key: 0,
+            class: "metricscard-icon",
+            color: `var(--kui-color-text-neutral, ${E(oe)})`,
+            size: E(G)
+          }, null, 8, ["color", "size"])),
+          (T(), N(re(e.titleTag), null, {
+            default: ye(() => [
+              De(w(e.title), 1)
+            ]),
+            _: 1
+          })),
+          e.tooltip ? (T(), N(i, {
+            key: 1,
+            class: "metricscard-tooltip",
+            placement: "right",
+            text: e.tooltip
+          }, {
+            default: ye(() => [
+              K(E(ur), {
+                color: `var(--kui-color-text-neutral, ${E(oe)})`,
+                size: E(G)
+              }, null, 8, ["color", "size"])
+            ]),
+            _: 1
+          }, 8, ["text"])) : V("", !0)
+        ], 2),
+        e.description && E(n) ? (T(), _("div", Gr, [
+          M("span", null, w(e.description), 1)
+        ])) : V("", !0),
+        M("div", jr, [
+          e.hasError ? (T(), _("div", Hr, [
+            K(E(Oe), {
+              color: `var(--kui-color-text-neutral, ${E(oe)})`,
+              size: E(Xr)
+            }, null, 8, ["color", "size"]),
+            M("div", null, " " + w(e.errorMessage), 1)
+          ])) : (T(), _("div", {
+            key: 1,
+            class: U(["metricscard-value", e.cardSize]),
+            "data-testid": "metric-value"
+          }, w(e.metricValue), 3)),
+          E(n) ? (T(), _("div", Yr, [
+            M("div", {
+              class: U(["metricscard-trend-change", a(e.changePolarity)]),
+              "data-testid": "metric-trend-parent"
+            }, [
+              e.changePolarity !== 0 ? (T(), N(re(e.trendIcon), {
+                key: 0,
+                color: o(e.changePolarity),
+                size: E(G)
+              }, null, 8, ["color", "size"])) : (T(), N(E(lr), {
+                key: 1,
+                color: `var(--kui-color-text-neutral-strong, ${E(Ce)})`,
+                size: E(G)
+              }, null, 8, ["color", "size"])),
+              M("div", Qr, w(e.metricChange), 1)
+            ], 2),
+            e.trendRange ? (T(), _("div", Wr, w(e.trendRange), 1)) : V("", !0)
+          ])) : V("", !0)
+        ])
+      ], 2);
+    };
+  }
+}), ce = (e, r) => {
+  const t = e.__vccOpts || e;
+  for (const [o, a] of r)
+    t[o] = a;
+  return t;
+}, Zr = /* @__PURE__ */ ce(Jr, [["__scopeId", "data-v-b1513f6f"]]), et = {}, rt = { class: "loading-tabs" };
+function tt(e, r) {
+  const t = Ae("KSkeletonBox");
+  return T(), _("div", rt, [
+    K(t, { width: "100" }),
+    K(t, { width: "75" })
+  ]);
+}
+const nt = /* @__PURE__ */ ce(et, [["render", tt], ["__scopeId", "data-v-50eab68c"]]), at = {
+  key: 0,
+  class: "container-title"
+}, it = {
+  key: 0,
+  class: "container-description"
+}, ot = {
+  key: 1,
+  class: "error-display"
+}, st = {
+  key: 0,
+  class: "error-display-message"
+}, ut = {
+  key: 2,
+  class: "cards-wrapper"
+}, lt = /* @__PURE__ */ Q({
+  __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: () => D.Large
+    },
+    containerTitle: {
+      type: String,
+      required: !1,
+      default: ""
+    },
+    containerDescription: {
+      type: String,
+      required: !1,
+      default: ""
+    }
+  },
+  setup(e) {
+    const r = e, t = h(() => r.cards.every((a) => (a == null ? void 0 : a.hasError) === !0)), o = (a) => {
+      const n = Kr(a.currentValue, a.previousValue) || 0, l = Ur(n, r.hasTrendAccess, a.increaseIsBad);
+      return {
+        metricValue: a.formatValueFn ? a.formatValueFn(a.currentValue) : qr(a.currentValue, { capital: !0, round: !0 }) || "0",
+        metricChange: a.formatChangeFn ? a.formatChangeFn(n) : zr(n, r.hasTrendAccess, r.fallbackDisplayText),
+        changePolarity: l,
+        trendIcon: Pr(l, a.increaseIsBad),
+        cardSize: r.cardSize,
+        hasContainerTitle: !!r.containerTitle
+      };
+    };
+    return (a, n) => (T(), _("div", {
+      class: U(["kong-ui-public-metric-card-container", e.cardSize])
+    }, [
+      r.containerTitle || r.containerDescription ? (T(), _("div", at, [
+        De(w(r.containerTitle) + " ", 1),
+        r.containerDescription ? (T(), _("div", it, w(r.containerDescription), 1)) : V("", !0)
+      ])) : V("", !0),
+      t.value ? (T(), _("div", ot, [
+        K(E(Oe), { class: "error-display-icon" }),
+        e.errorMessage ? (T(), _("div", st, w(e.errorMessage), 1)) : V("", !0)
+      ])) : (T(), _("div", ut, [
+        (T(!0), _(he, null, Xe(e.cards, (l, c) => (T(), _(he, null, [
+          e.loading ? (T(), N(nt, {
+            key: `skeleton-${c}`,
+            class: U(e.cardSize === E(D).Small ? "loading-tabs-small" : "loading-tabs-large")
+          }, null, 8, ["class"])) : (T(), N(Zr, Ge({
+            key: c,
+            ref_for: !0
+          }, o(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));
+  }
+}), ct = /* @__PURE__ */ ce(lt, [["__scopeId", "data-v-eac0ca04"]]), Rt = /* @__PURE__ */ Q({
+  __name: "MetricsConsumer",
+  props: {
+    lookupKey: { default: void 0 },
+    cardSize: { default: D.Large },
+    cardToDisplay: { default: void 0 }
+  },
+  setup(e) {
+    const r = e, t = _e(Ne);
+    if (!t)
+      throw new Error("MetricsConsumer must be nested inside a MetricsProvider instance.");
+    const { traffic: o, latency: a } = t.data, { i18n: n } = F.useI18n(), l = h(() => t.containerTitle.value ? D.Medium : r.cardSize), c = F.useMetricCardBuilder({
+      cardType: O.TRAFFIC,
+      title: h(() => t.longCardTitles ? n.t("metricCard.long.traffic") : n.t("metricCard.short.traffic")),
+      record: o.mapped,
+      hasError: o.hasError,
+      lookupKey: r.lookupKey,
+      sumGroupedValues: $,
+      trendRange: o.trendRange
+    }), f = (m) => `${m.toFixed(le)}%`, i = h(() => {
+      const m = o.mapped.value, C = z(m, "current", r.lookupKey, ge), p = z(m, "current", r.lookupKey, $), y = C / p * 100 || 0, I = z(m, "previous", r.lookupKey, ge), S = z(m, "previous", r.lookupKey, $), A = I / S * 100 || 0;
+      return {
+        cardType: O.ERROR_RATE,
+        hasError: o.hasError.value,
+        currentValue: y,
+        previousValue: A,
+        formatValueFn: f,
+        title: t.longCardTitles ? n.t("metricCard.long.errorRate") : n.t("metricCard.short.errorRate"),
+        increaseIsBad: !0,
+        trendRange: o.trendRange.value
+      };
+    }), s = (m) => `${m}ms`, u = F.useMetricCardBuilder({
+      cardType: O.LATENCY,
+      title: h(() => {
+        const { longCardTitles: m, averageLatencies: C } = t, p = C.value ? "averageLatency" : "p99Latency";
+        return m ? n.t(`metricCard.long.${p}`) : l.value === D.Small ? n.t(`metricCard.small.${p}`) : n.t(`metricCard.short.${p}`);
+      }),
+      hasError: a.hasError,
+      record: a.mapped,
+      lookupKey: r.lookupKey,
+      increaseIsBad: !0,
+      formatValueFn: s,
+      trendRange: a.trendRange
+    }), d = h(() => r.cardToDisplay === "TRAFFIC" ? [c.value] : r.cardToDisplay === "ERROR_RATE" ? [i.value] : r.cardToDisplay === "LATENCY" ? [u.value] : [c.value, i.value, u.value]), v = h(() => r.cardToDisplay === "TRAFFIC" || r.cardToDisplay === "ERROR_RATE" ? o.isLoading.value : r.cardToDisplay === "LATENCY" ? a.isLoading.value : o.isLoading.value || a.isLoading.value), g = h(() => ({
+      cards: d.value,
+      containerTitle: t.containerTitle.value,
+      containerDescription: t.description.value,
+      loading: v.value,
+      hasTrendAccess: t.hasTrendAccess.value,
+      fallbackDisplayText: n.t("general.notAvailable"),
+      cardSize: l.value,
+      hideTitle: !0
+    })), R = h(() => ({
+      loading: g.value.loading,
+      trafficCard: c.value,
+      errorRateCard: i.value,
+      latencyCard: u.value,
+      errorRateFormatted: f(i.value.currentValue),
+      latencyFormatted: s(u.value.currentValue)
+    }));
+    return (m, C) => Ie(m.$slots, "default", { cardValues: R.value }, () => [
+      K(ct, je(He(g.value)), null, 16)
+    ]);
+  }
+}), j = (e) => new Date(e), Tt = (e, r) => {
+  const t = e.body;
+  e.reply({
+    statusCode: 200,
+    body: dt(t, r)
+  });
+}, Se = (e) => e.reduce((r, t) => (r[t] = { name: t }, r), {}), dt = (e, r) => {
+  var g, R;
+  const t = be.get(se.ONE_DAY), o = e.granularity === "trend" ? new We(t) : new Je(t), a = o.endMs(), n = o.startMs(), l = o.granularityMs(), c = 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 f = (e.dimensions ?? []).find((m) => m !== "time"), i = (r == null ? void 0 : r.dimensionNames) ?? [], s = Math.max(i.length, 1), u = e.metrics || [], d = [];
+  for (let m = 0; m < c; m++)
+    for (let C = 0; C < s; C++) {
+      const p = f ? { [f]: i[C] } : {};
+      (g = e.dimensions) != null && g.includes("status_code_grouped") ? $.forEach((y) => {
+        const I = u.reduce((S, A) => ((r == null ? void 0 : r.deterministic) ?? !0 ? S[A] = (c - m) * 1e3 + 100 * C + 1 : S[A] = Math.round(Math.random() * 1e3), S), { ...p, status_code_grouped: y });
+        d.push({
+          version: "v1",
+          timestamp: m === 0 ? j(n).toISOString() : j(n + l).toISOString(),
+          event: I
+        });
+      }) : d.push({
+        version: "v1",
+        timestamp: m === 0 ? j(n).toISOString() : j(n + l).toISOString(),
+        event: u.reduce((y, I) => ((r == null ? void 0 : r.deterministic) ?? !0 ? y[I] = (c - m) * 1e3 + 100 * C + 1 : y[I] = Math.round(Math.random() * 1e3), y), { ...p })
+      });
+    }
+  const v = {
+    start_ms: n,
+    end_ms: a,
+    start: new Date(n).toISOString(),
+    end: new Date(a).toISOString(),
+    granularity_ms: l,
+    display: f ? {
+      [f]: Se(i),
+      ...(R = e.dimensions) != null && R.includes("status_code_grouped") ? { status_code_grouped: Se($) } : {}
+    } : {},
+    metric_names: e.metrics,
+    query_id: "test"
+  };
+  return {
+    data: d,
+    meta: v
+  };
+};
+export {
+  $ as ALL_STATUS_CODE_GROUPS,
+  hr as DEFAULT_REFRESH_INTERVAL,
+  gr as INJECT_QUERY_PROVIDER,
+  yr as MAX_ANALYTICS_REQUEST_RETRIES,
+  D as MetricCardSize,
+  O as MetricCardType,
+  Rt as MetricsConsumer,
+  pt as MetricsProvider,
+  ge as STATUS_CODES_FAILED,
+  gt as STATUS_CODES_SUCCESS,
+  dt as mockExploreResponse,
+  Tt as mockExploreResponseFromCypress
+};