@kong-ui-public/dashboard-renderer 0.28.14 → 0.29.0

package/dist/dashboard-renderer.es.js

@@ -1,56 +1,56 @@
-import { ref as I, watchEffect as pe, defineComponent as _, inject as z, onUnmounted as Y, computed as h, resolveComponent as O, unref as m, openBlock as d, createBlock as f, withCtx as v, createTextVNode as j, toDisplayString as $, renderSlot as F, createCommentVNode as Z, useCssVars as P, createElementVNode as X, createVNode as A, mergeProps as ee, createSlots as te, createElementBlock as R, normalizeProps as de, guardReactiveProps as ue, resolveDynamicComponent as ye, onMounted as me, Fragment as he, renderList as ge, normalizeClass as fe, normalizeStyle as M } from "vue";
+import { ref as E, watchEffect as ue, defineComponent as _, inject as z, onUnmounted as Y, computed as f, resolveComponent as O, unref as m, openBlock as p, createBlock as g, withCtx as v, createTextVNode as j, toDisplayString as $, renderSlot as V, createCommentVNode as Z, useCssVars as P, createElementVNode as X, createVNode as T, mergeProps as ee, createSlots as te, createElementBlock as C, normalizeProps as pe, guardReactiveProps as de, resolveDynamicComponent as ye, onMounted as he, Fragment as me, renderList as fe, normalizeClass as ge, normalizeStyle as M } from "vue";
 import { SimpleChart as ve, AnalyticsChart as _e, TopNTable as be, ChartMetricDisplay as qe } from "@kong-ui-public/analytics-chart";
 import Se from "swrv";
 import "axios";
-import { createI18n as Te, i18nTComponent as Re } from "@kong-ui-public/i18n";
-import { stripUnknownFilters as Ae, Timeframe as Ee, TimePeriods as xe, granularityValues as De, exploreFilterTypesV2 as Ce, exploreAggregations as Ie, queryableExploreDimensions as we, filterableExploreDimensions as ke, basicExploreAggregations as Oe, queryableBasicExploreDimensions as Pe, filterableBasicExploreDimensions as Le, aiExploreAggregations as Ne, queryableAiExploreDimensions as ze, filterableAiExploreDimensions as je, relativeTimeRangeValuesV4 as $e } from "@kong-ui-public/analytics-utilities";
-import { MetricsProvider as Fe, MetricsConsumer as Ve } from "@kong-ui-public/analytics-metric-provider";
+import { createI18n as Ce, i18nTComponent as Te } from "@kong-ui-public/i18n";
+import { stripUnknownFilters as Ae, Timeframe as Re, TimePeriods as De, granularityValues as Ee, exploreFilterTypesV2 as Ie, exploreAggregations as xe, queryableExploreDimensions as we, filterableExploreDimensions as ke, basicExploreAggregations as Oe, queryableBasicExploreDimensions as Pe, filterableBasicExploreDimensions as Le, aiExploreAggregations as Ne, queryableAiExploreDimensions as ze, filterableAiExploreDimensions as je, relativeTimeRangeValuesV4 as $e } from "@kong-ui-public/analytics-utilities";
+import { MetricsProvider as Ve, MetricsConsumer as Fe } from "@kong-ui-public/analytics-metric-provider";
 import { EntityLink as Be } from "@kong-ui-public/entities-shared";
-import { useAnalyticsConfigStore as Ke } from "@kong-ui-public/analytics-config-store";
-var re = /* @__PURE__ */ ((t) => (t.VALIDATING = "VALIDATING", t.VALIDATING_HAS_DATA = "VALIDATING_HAS_DATA", t.PENDING = "PENDING", t.SUCCESS = "SUCCESS", t.SUCCESS_HAS_DATA = "SUCCESS_HAS_DATA", t.ERROR = "ERROR", t.STALE_IF_ERROR = "STALE_IF_ERROR", t))(re || {});
-const Ge = (t) => {
-  var r, e, o, i, n;
-  return t ? !!// TODO: revisit: currently only the first check ever matters?
-  ((r = Object.keys(t)) != null && r.length || (e = t.data) != null && e.length || (i = (o = t.data) == null ? void 0 : o.data) != null && i.length || !((n = t.data) != null && n.data) && typeof t.data == "object" && Object.keys(t == null ? void 0 : t.data).length) : !1;
+import { useAnalyticsConfigStore as Ge } from "@kong-ui-public/analytics-config-store";
+var re = /* @__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))(re || {});
+const Ke = (e) => {
+  var t, r, n, o, i;
+  return e ? !!// TODO: revisit: currently only the first check ever matters?
+  ((t = Object.keys(e)) != null && t.length || (r = e.data) != null && r.length || (o = (n = e.data) == null ? void 0 : n.data) != null && o.length || !((i = e.data) != null && i.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
 };
-function Ue(t = I({}), r, e, o = Ge) {
-  const i = I(
+function He(e = E({}), t, r, n = Ke) {
+  const o = E(
     "PENDING"
     /* PENDING */
   );
-  return pe(() => {
-    const n = o(t.value);
-    if (t.value && n && e.value) {
-      i.value = "VALIDATING_HAS_DATA";
+  return ue(() => {
+    const i = n(e.value);
+    if (e.value && i && r.value) {
+      o.value = "VALIDATING_HAS_DATA";
       return;
     }
-    if (t.value && e.value) {
-      i.value = "VALIDATING";
+    if (e.value && r.value) {
+      o.value = "VALIDATING";
       return;
     }
-    if (t.value && r.value) {
-      i.value = "STALE_IF_ERROR";
+    if (e.value && t.value) {
+      o.value = "STALE_IF_ERROR";
       return;
     }
-    if (t.value === void 0 && !r.value) {
-      i.value = "PENDING";
+    if (e.value === void 0 && !t.value) {
+      o.value = "PENDING";
       return;
     }
-    if (t.value && !r.value && n) {
-      i.value = "SUCCESS_HAS_DATA";
+    if (e.value && !t.value && i) {
+      o.value = "SUCCESS_HAS_DATA";
       return;
     }
-    if (t.value && !r.value) {
-      i.value = "SUCCESS";
+    if (e.value && !t.value) {
+      o.value = "SUCCESS";
       return;
     }
-    t.value === void 0 && r && (i.value = "ERROR");
+    e.value === void 0 && t && (o.value = "ERROR");
   }), {
-    state: i,
+    state: o,
     swrvState: re
   };
 }
-const He = {
+const Ue = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
@@ -61,83 +61,84 @@ const He = {
 }, Qe = {
   timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
 }, Me = {
-  renderer: He,
+  renderer: Ue,
   queryDataProvider: Qe
 };
 function Je() {
-  const t = Te("en-us", Me);
+  const e = Ce("en-us", Me);
   return {
-    i18n: t,
-    i18nT: Re(t)
+    i18n: e,
+    i18nT: Te(e)
     // Translation component <i18n-t>
   };
 }
-const V = {
+const F = {
   useI18n: Je
-}, L = 170, B = "analytics-query-provider", J = "{entity-id}", We = "{cp-id}", Ye = "{timeframe}", Ze = 30 * 1e3, K = /* @__PURE__ */ _({
+}, L = 170, B = "analytics-query-provider", J = "{entity-id}", We = "{cp-id}", Ye = "{timeframe}", Ze = 30 * 1e3, G = /* @__PURE__ */ _({
   __name: "QueryDataProvider",
   props: {
     context: {},
     query: {},
-    queryReady: { type: Boolean }
+    queryReady: { type: Boolean },
+    refreshCounter: {}
   },
   emits: ["queryComplete"],
-  setup(t, { emit: r }) {
-    const e = t, o = r, { i18n: i } = V.useI18n(), n = z(B), c = () => e.queryReady && n ? JSON.stringify([e.query, e.context]) : null, a = new AbortController();
+  setup(e, { emit: t }) {
+    const r = e, n = t, { i18n: o } = F.useI18n(), i = z(B), c = () => r.queryReady && i ? JSON.stringify([r.query, r.context, r.refreshCounter]) : null, s = new AbortController();
     Y(() => {
-      a.abort();
+      s.abort();
     });
-    const l = (T, q, x) => {
-      const S = [];
-      return q && S.push(...q), S.push(...Ae(T, x)), S;
-    }, { data: s, error: E, isValidating: C } = Se(c, async () => {
-      var T, q, x, S;
+    const l = (u, h, b) => {
+      const q = [];
+      return h && q.push(...h), q.push(...Ae(u, b)), q;
+    }, { data: a, error: A, isValidating: x } = Se(c, async () => {
+      var u, h, b, q;
       try {
         let {
-          datasource: y,
+          datasource: d,
           ...se
-        } = e.query;
-        y || (y = "basic");
-        const ce = l(y, e.query.filters, e.context.filters), le = {
-          datasource: y,
+        } = r.query;
+        d || (d = "basic");
+        const ce = l(d, r.query.filters, r.context.filters), le = {
+          datasource: d,
           query: {
             ...se,
             time_range: {
-              ...e.context.timeSpec,
-              tz: e.context.tz
+              ...r.context.timeSpec,
+              tz: r.context.tz
             },
             filters: ce
           }
         };
-        return n == null ? void 0 : n.queryFn(le, a);
-      } catch (y) {
-        u.value = ((q = (T = y == null ? void 0 : y.response) == null ? void 0 : T.data) == null ? void 0 : q.message) === "Range not allowed for this tier" ? i.t("queryDataProvider.timeRangeExceeded") : ((S = (x = y == null ? void 0 : y.response) == null ? void 0 : x.data) == null ? void 0 : S.message) || (y == null ? void 0 : y.message);
+        return i == null ? void 0 : i.queryFn(le, s);
+      } catch (d) {
+        k.value = ((h = (u = d == null ? void 0 : d.response) == null ? void 0 : u.data) == null ? void 0 : h.message) === "Range not allowed for this tier" ? o.t("queryDataProvider.timeRangeExceeded") : ((q = (b = d == null ? void 0 : d.response) == null ? void 0 : b.data) == null ? void 0 : q.message) || (d == null ? void 0 : d.message);
       } finally {
-        o("queryComplete");
+        n("queryComplete");
       }
     }, {
-      refreshInterval: e.context.refreshInterval,
+      refreshInterval: r.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: p, swrvState: b } = Ue(s, E, C), u = I(null), g = h(() => p.value === b.ERROR || !!u.value), k = h(() => !e.queryReady || p.value === b.PENDING);
-    return (T, q) => {
-      const x = O("KSkeleton"), S = O("KEmptyState");
-      return k.value || !m(s) && !g.value ? (d(), f(x, {
+    }), { state: R, swrvState: D } = He(a, A, x), k = E(null), y = f(() => R.value === D.ERROR || !!k.value), S = f(() => !r.queryReady || [D.PENDING, D.VALIDATING, D.VALIDATING_HAS_DATA].includes(R.value));
+    return (u, h) => {
+      const b = O("KSkeleton"), q = O("KEmptyState");
+      return S.value || !m(a) && !y.value ? (p(), g(b, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : g.value ? (d(), f(S, {
+      })) : y.value ? (p(), g(q, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
         default: v(() => [
-          j($(u.value), 1)
+          j($(k.value), 1)
         ]),
         _: 1
-      })) : m(s) ? F(T.$slots, "default", {
+      })) : m(a) ? V(u.$slots, "default", {
         key: 2,
-        data: m(s)
+        data: m(a)
       }) : Z("", !0);
     };
   }
@@ -148,36 +149,38 @@ const V = {
     context: {},
     queryReady: { type: Boolean },
     chartOptions: {},
-    height: {}
+    height: {},
+    refreshCounter: {}
   },
-  setup(t) {
-    P((e) => ({
-      "6fb24a14": `${e.height}px`
+  setup(e) {
+    P((r) => ({
+      bc149350: `${r.height}px`
     }));
-    const r = t;
-    return (e, o) => (d(), f(K, {
-      context: e.context,
-      query: e.query,
-      "query-ready": e.queryReady
+    const t = e;
+    return (r, n) => (p(), g(G, {
+      context: r.context,
+      query: r.query,
+      "query-ready": r.queryReady,
+      "refresh-counter": r.refreshCounter
     }, {
-      default: v(({ data: i }) => [
+      default: v(({ data: o }) => [
         X("div", Xe, [
-          A(m(ve), {
-            "chart-data": i,
-            "chart-options": r.chartOptions,
-            "synthetics-data-key": e.chartOptions.syntheticsDataKey
+          T(m(ve), {
+            "chart-data": o,
+            "chart-options": t.chartOptions,
+            "synthetics-data-key": r.chartOptions.syntheticsDataKey
           }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
         ])
       ]),
       _: 1
-    }, 8, ["context", "query", "query-ready"]));
+    }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), D = (t, r) => {
-  const e = t.__vccOpts || t;
-  for (const [o, i] of r)
-    e[o] = i;
-  return e;
-}, tt = /* @__PURE__ */ D(et, [["__scopeId", "data-v-af07dcbf"]]), rt = { class: "analytics-chart" }, it = /* @__PURE__ */ _({
+}), I = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [n, o] of t)
+    r[n] = o;
+  return r;
+}, tt = /* @__PURE__ */ I(et, [["__scopeId", "data-v-e770c4a0"]]), rt = { class: "analytics-chart" }, ot = /* @__PURE__ */ _({
   __name: "BaseAnalyticsChartRenderer",
   props: {
     query: {},
@@ -185,57 +188,59 @@ const V = {
     queryReady: { type: Boolean },
     chartOptions: {},
     height: {},
+    refreshCounter: {},
     extraProps: {}
   },
   emits: ["edit-tile"],
-  setup(t, { emit: r }) {
-    P((s) => ({
-      c31507a4: `${s.height}px`
+  setup(e, { emit: t }) {
+    P((a) => ({
+      "38f70f43": `${a.height}px`
     }));
-    const e = t, o = r, i = z(B), { i18n: n } = V.useI18n(), c = h(() => ({
-      type: e.chartOptions.type,
-      stacked: e.chartOptions.stacked ?? !1,
-      chartDatasetColors: e.chartOptions.chartDatasetColors
-    })), a = h(() => {
-      if (i && i.exploreBaseUrl) {
-        const s = {
-          filters: [...e.context.filters, ...e.query.filters ?? []],
-          metrics: e.query.metrics ?? [],
-          dimensions: e.query.dimensions ?? [],
-          time_range: e.query.time_range || e.context.timeSpec
-        }, E = ["advanced", "ai"].includes(e.query.datasource) ? e.query.datasource : "advanced";
-        return `${i.exploreBaseUrl()}?q=${JSON.stringify(s)}&d=${E}&c=${e.chartOptions.type}`;
+    const r = e, n = t, o = z(B), { i18n: i } = F.useI18n(), c = f(() => ({
+      type: r.chartOptions.type,
+      stacked: r.chartOptions.stacked ?? !1,
+      chartDatasetColors: r.chartOptions.chartDatasetColors
+    })), s = f(() => {
+      if (o && o.exploreBaseUrl) {
+        const a = {
+          filters: [...r.context.filters, ...r.query.filters ?? []],
+          metrics: r.query.metrics ?? [],
+          dimensions: r.query.dimensions ?? [],
+          time_range: r.query.time_range || r.context.timeSpec
+        }, A = ["advanced", "ai"].includes(r.query.datasource) ? r.query.datasource : "advanced";
+        return `${o.exploreBaseUrl()}?q=${JSON.stringify(a)}&d=${A}&c=${r.chartOptions.type}`;
       }
       return "";
     }), l = () => {
-      o("edit-tile");
+      n("edit-tile");
     };
-    return (s, E) => {
-      const C = O("KDropdownItem");
-      return d(), f(K, {
-        context: s.context,
-        query: s.query,
-        "query-ready": s.queryReady
+    return (a, A) => {
+      const x = O("KDropdownItem");
+      return p(), g(G, {
+        context: a.context,
+        query: a.query,
+        "query-ready": a.queryReady,
+        "refresh-counter": a.refreshCounter
       }, {
-        default: v(({ data: p }) => [
+        default: v(({ data: R }) => [
           X("div", rt, [
-            A(m(_e), ee({
-              "allow-csv-export": s.chartOptions.allowCsvExport,
-              "chart-data": p,
+            T(m(_e), ee({
+              "allow-csv-export": a.chartOptions.allowCsvExport,
+              "chart-data": R,
               "chart-options": c.value,
-              "chart-title": s.chartOptions.chartTitle,
-              "go-to-explore": a.value,
+              "chart-title": a.chartOptions.chartTitle,
+              "go-to-explore": s.value,
               "legend-position": "bottom",
-              "show-menu": s.context.editable,
-              "synthetics-data-key": s.chartOptions.syntheticsDataKey,
+              "show-menu": a.context.editable,
+              "synthetics-data-key": a.chartOptions.syntheticsDataKey,
               "tooltip-title": ""
-            }, s.extraProps), te({ _: 2 }, [
-              s.context.editable ? {
+            }, a.extraProps), te({ _: 2 }, [
+              a.context.editable ? {
                 name: "menu-items",
                 fn: v(() => [
-                  A(C, { onClick: l }, {
+                  T(x, { onClick: l }, {
                     default: v(() => [
-                      j($(m(n).t("renderer.edit")), 1)
+                      j($(m(i).t("renderer.edit")), 1)
                     ]),
                     _: 1
                   })
@@ -246,145 +251,153 @@ const V = {
           ])
         ]),
         _: 1
-      }, 8, ["context", "query", "query-ready"]);
+      }, 8, ["context", "query", "query-ready", "refresh-counter"]);
     };
   }
-}), ie = /* @__PURE__ */ D(it, [["__scopeId", "data-v-774172eb"]]), W = /* @__PURE__ */ _({
+}), oe = /* @__PURE__ */ I(ot, [["__scopeId", "data-v-42e7ce7e"]]), W = /* @__PURE__ */ _({
   __name: "BarChartRenderer",
   props: {
     query: {},
     context: {},
     queryReady: { type: Boolean },
     chartOptions: {},
-    height: {}
+    height: {},
+    refreshCounter: {}
   },
-  setup(t) {
-    return (r, e) => (d(), f(ie, {
-      "chart-options": r.chartOptions,
-      context: r.context,
+  setup(e) {
+    return (t, r) => (p(), g(oe, {
+      "chart-options": t.chartOptions,
+      context: t.context,
       "extra-props": { showAnnotations: !1 },
-      height: r.height,
-      query: r.query,
-      "query-ready": r.queryReady
-    }, null, 8, ["chart-options", "context", "height", "query", "query-ready"]));
+      height: t.height,
+      query: t.query,
+      "query-ready": t.queryReady,
+      "refresh-counter": t.refreshCounter
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), ot = /* @__PURE__ */ _({
+}), nt = /* @__PURE__ */ _({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
     context: {},
     queryReady: { type: Boolean },
     chartOptions: {},
-    height: {}
+    height: {},
+    refreshCounter: {}
   },
-  setup(t) {
-    return (r, e) => (d(), f(ie, {
-      "chart-options": r.chartOptions,
-      context: r.context,
-      height: r.height,
-      query: r.query,
-      "query-ready": r.queryReady
-    }, null, 8, ["chart-options", "context", "height", "query", "query-ready"]));
+  setup(e) {
+    return (t, r) => (p(), g(oe, {
+      "chart-options": t.chartOptions,
+      context: t.context,
+      height: t.height,
+      query: t.query,
+      "query-ready": t.queryReady,
+      "refresh-counter": t.refreshCounter
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready", "refresh-counter"]));
   }
-}), nt = { class: "metric-card-tile-wrapper" }, at = /* @__PURE__ */ _({
+}), it = { class: "metric-card-tile-wrapper" }, at = /* @__PURE__ */ _({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
     context: {},
     queryReady: { type: Boolean },
     chartOptions: {},
-    height: {}
+    height: {},
+    refreshCounter: {}
   },
-  setup(t) {
-    const r = t, e = h(() => {
-      const i = r.context.timeSpec;
-      if (i.type === "absolute")
-        return new Ee({
+  setup(e) {
+    const t = e, r = f(() => {
+      const o = t.context.timeSpec;
+      if (o.type === "absolute")
+        return new Re({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
-          startCustom: i.start,
-          endCustom: i.end,
-          timeframeLength: () => i.end.getTime() - i.start.getTime(),
+          startCustom: o.start,
+          endCustom: o.end,
+          timeframeLength: () => o.end.getTime() - o.start.getTime(),
           defaultResponseGranularity: "daily",
           dataGranularity: "daily",
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const n = xe.get(i.time_range);
-      if (!n)
+      const i = De.get(o.time_range);
+      if (!i)
         throw new Error("Unknown time range");
-      return n;
-    }), o = h(() => {
-      var n, c;
-      const i = (n = r.query) == null ? void 0 : n.datasource;
-      if (i && i !== "advanced" && i !== "basic")
-        throw new Error(`Invalid datasource value: ${i}`);
+      return i;
+    }), n = f(() => {
+      var i, c;
+      const o = (i = t.query) == null ? void 0 : i.datasource;
+      if (o && o !== "advanced" && o !== "basic")
+        throw new Error(`Invalid datasource value: ${o}`);
       return {
-        datasource: (c = r.query) == null ? void 0 : c.datasource,
-        overrideTimeframe: e.value,
-        tz: r.context.tz,
-        additionalFilter: r.context.filters,
+        datasource: (c = t.query) == null ? void 0 : c.datasource,
+        overrideTimeframe: r.value,
+        tz: t.context.tz,
+        additionalFilter: t.context.filters,
         // TODO: Decide how to handle metric card filters.
-        longCardTitles: r.chartOptions.longCardTitles,
-        containerTitle: r.chartOptions.chartTitle,
-        description: r.chartOptions.description,
-        percentileLatency: r.chartOptions.percentileLatency,
-        refreshInterval: r.context.refreshInterval,
-        queryReady: r.queryReady
+        longCardTitles: t.chartOptions.longCardTitles,
+        containerTitle: t.chartOptions.chartTitle,
+        description: t.chartOptions.description,
+        percentileLatency: t.chartOptions.percentileLatency,
+        refreshInterval: t.context.refreshInterval,
+        queryReady: t.queryReady,
+        refreshCounter: t.refreshCounter
       };
     });
-    return (i, n) => (d(), R("div", nt, [
-      A(m(Fe), de(ue(o.value)), {
+    return (o, i) => (p(), C("div", it, [
+      T(m(Ve), pe(de(n.value)), {
         default: v(() => [
-          A(m(Ve))
+          T(m(Fe))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), st = /* @__PURE__ */ D(at, [["__scopeId", "data-v-f2a5f36e"]]), oe = "20px", ct = /* @__PURE__ */ _({
+}), st = /* @__PURE__ */ I(at, [["__scopeId", "data-v-48bea474"]]), ne = "20px", ct = /* @__PURE__ */ _({
   __name: "TopNTableRenderer",
   props: {
     query: {},
     context: {},
     queryReady: { type: Boolean },
     chartOptions: {},
-    height: {}
+    height: {},
+    refreshCounter: {}
   },
-  setup(t) {
-    const r = t, e = (o) => {
-      var i;
-      if ((i = r.chartOptions) != null && i.entityLink)
-        if (o.id.includes(":")) {
-          const [n, c] = o.id.split(":");
-          return r.chartOptions.entityLink.replace(We, n).replace(J, c);
+  setup(e) {
+    const t = e, r = (n) => {
+      var o;
+      if ((o = t.chartOptions) != null && o.entityLink)
+        if (n.id.includes(":")) {
+          const [i, c] = n.id.split(":");
+          return t.chartOptions.entityLink.replace(We, i).replace(J, c);
         } else
-          return r.chartOptions.entityLink.replace(J, o.id);
+          return t.chartOptions.entityLink.replace(J, n.id);
       return "";
     };
-    return (o, i) => (d(), f(K, {
-      context: o.context,
-      query: o.query,
-      "query-ready": o.queryReady
+    return (n, o) => (p(), g(G, {
+      context: n.context,
+      query: n.query,
+      "query-ready": n.queryReady,
+      "refresh-counter": n.refreshCounter
     }, {
-      default: v(({ data: n }) => [
-        A(m(be), {
-          data: n,
-          description: o.chartOptions.description,
-          "synthetics-data-key": o.chartOptions.syntheticsDataKey,
-          title: o.chartOptions.chartTitle || ""
+      default: v(({ data: i }) => [
+        T(m(be), {
+          data: i,
+          description: n.chartOptions.description,
+          "synthetics-data-key": n.chartOptions.syntheticsDataKey,
+          title: n.chartOptions.chartTitle || ""
         }, te({ _: 2 }, [
-          r.chartOptions.entityLink ? {
+          t.chartOptions.entityLink ? {
             name: "name",
             fn: v(({ record: c }) => [
-              A(m(Be), {
+              T(m(Be), {
                 "entity-link-data": {
                   id: c.id,
                   label: c.name,
                   deleted: c.deleted
                 },
-                "external-link": e(c)
+                "external-link": r(c)
               }, null, 8, ["entity-link-data", "external-link"])
             ]),
             key: "0"
@@ -392,58 +405,60 @@ const V = {
         ]), 1032, ["data", "description", "synthetics-data-key", "title"])
       ]),
       _: 1
-    }, 8, ["context", "query", "query-ready"]));
+    }, 8, ["context", "query", "query-ready", "refresh-counter"]));
   }
-}), lt = { class: "tile-boundary" }, pt = /* @__PURE__ */ _({
+}), lt = { class: "tile-boundary" }, ut = /* @__PURE__ */ _({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
     height: { default: L },
-    queryReady: { type: Boolean }
+    queryReady: { type: Boolean },
+    refreshCounter: {}
   },
   emits: ["edit-tile"],
-  setup(t, { emit: r }) {
+  setup(e, { emit: t }) {
     P((l) => ({
-      ab2e7a42: `${l.height}px`
+      "1bafe566": `${l.height}px`
     }));
-    const e = parseInt(oe, 10), o = t, i = r, n = {
-      timeseries_line: ot,
+    const r = parseInt(ne, 10), n = e, o = t, i = {
+      timeseries_line: nt,
       horizontal_bar: W,
       vertical_bar: W,
       gauge: tt,
       golden_signals: st,
       top_n: ct,
       slottable: void 0
-    }, c = h(() => {
-      const l = n[o.definition.chart.type];
+    }, c = f(() => {
+      const l = i[n.definition.chart.type];
       return l && {
         component: l,
         rendererProps: {
-          query: o.definition.query,
-          context: o.context,
-          queryReady: o.queryReady,
-          chartOptions: o.definition.chart,
-          height: o.height - e * 2
+          query: n.definition.query,
+          context: n.context,
+          queryReady: n.queryReady,
+          chartOptions: n.definition.chart,
+          height: n.height - r * 2,
+          refreshCounter: n.refreshCounter
         }
       };
-    }), a = () => {
-      i("edit-tile", o.definition);
+    }), s = () => {
+      o("edit-tile", n.definition);
     };
-    return (l, s) => (d(), R("div", lt, [
-      c.value ? (d(), f(ye(c.value.component), ee({ key: 0 }, c.value.rendererProps, { onEditTile: a }), null, 16)) : Z("", !0)
+    return (l, a) => (p(), C("div", lt, [
+      c.value ? (p(), g(ye(c.value.component), ee({ key: 0 }, c.value.rendererProps, { onEditTile: s }), null, 16)) : Z("", !0)
     ]));
   }
-}), dt = /* @__PURE__ */ D(pt, [["__scopeId", "data-v-56df5ab7"]]), ut = (t, r, e) => {
-  const o = /* @__PURE__ */ new Map();
-  e.forEach((n) => {
-    const c = n.layout.position.row, a = o.get(c), l = n.layout.size.rows === 1 && !!n.layout.size.fitToContent;
-    a === void 0 ? o.set(c, l) : o.set(c, a && l);
+}), pt = /* @__PURE__ */ I(ut, [["__scopeId", "data-v-c13de16a"]]), dt = (e, t, r) => {
+  const n = /* @__PURE__ */ new Map();
+  r.forEach((i) => {
+    const c = i.layout.position.row, s = n.get(c), l = i.layout.size.rows === 1 && !!i.layout.size.fitToContent;
+    s === void 0 ? n.set(c, l) : n.set(c, s && l);
   });
-  const i = [];
-  for (let n = 0; n < t; n++)
-    o.get(n) ? i.push("auto") : i.push(`${r}px`);
-  return i;
+  const o = [];
+  for (let i = 0; i < e; i++)
+    n.get(i) ? o.push("auto") : o.push(`${t}px`);
+  return o;
 }, yt = /* @__PURE__ */ _({
   __name: "GridLayout",
   props: {
@@ -461,127 +476,130 @@ const V = {
       required: !0
     }
   },
-  setup(t) {
-    P((a) => ({
-      "3bc5e939": t.gridSize.cols,
-      "77aa3028": n.value
+  setup(e) {
+    P((s) => ({
+      "3bc5e939": e.gridSize.cols,
+      "77aa3028": i.value
     }));
-    const r = t, e = I(null), o = I(0), i = new ResizeObserver((a) => {
+    const t = e, r = E(null), n = E(0), o = new ResizeObserver((s) => {
       window.requestAnimationFrame(() => {
-        !Array.isArray(a) || !a.length || (o.value = a[0].contentRect.width);
+        !Array.isArray(s) || !s.length || (n.value = s[0].contentRect.width);
       });
     });
-    me(() => {
-      e.value && i.observe(e.value);
+    he(() => {
+      r.value && o.observe(r.value);
     }), Y(() => {
-      e.value && i.unobserve(e.value);
+      r.value && o.unobserve(r.value);
     });
-    const n = h(() => {
+    const i = f(() => {
       var l;
-      return ut((l = r.gridSize) == null ? void 0 : l.rows, r.tileHeight, r.tiles).join(" ");
-    }), c = h(() => r.tiles.map((a, l) => ({
+      return dt((l = t.gridSize) == null ? void 0 : l.rows, t.tileHeight, t.tiles).join(" ");
+    }), c = f(() => t.tiles.map((s, l) => ({
       key: `tile-${l}`,
-      tile: a,
+      tile: s,
       style: {
-        "grid-column-start": a.layout.position.col + 1,
-        "grid-column-end": a.layout.position.col + 1 + a.layout.size.cols,
-        "grid-row-start": a.layout.position.row + 1,
-        "grid-row-end": a.layout.position.row + 1 + a.layout.size.rows
+        "grid-column-start": s.layout.position.col + 1,
+        "grid-column-end": s.layout.position.col + 1 + s.layout.size.cols,
+        "grid-row-start": s.layout.position.row + 1,
+        "grid-row-end": s.layout.position.row + 1 + s.layout.size.rows
       }
     })));
-    return (a, l) => (d(), R("div", {
+    return (s, l) => (p(), C("div", {
       ref_key: "gridContainer",
-      ref: e,
+      ref: r,
       class: "kong-ui-public-grid-layout"
     }, [
-      (d(!0), R(he, null, ge(c.value, (s) => (d(), R("div", {
-        key: s.key,
-        class: fe(["grid-cell", {
-          "empty-cell": !s.tile
+      (p(!0), C(me, null, fe(c.value, (a) => (p(), C("div", {
+        key: a.key,
+        class: ge(["grid-cell", {
+          "empty-cell": !a.tile
         }]),
-        style: M(s.style)
+        style: M(a.style)
       }, [
-        F(a.$slots, "tile", {
-          style: M(s.style),
-          tile: s.tile
+        V(s.$slots, "tile", {
+          style: M(a.style),
+          tile: a.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), mt = /* @__PURE__ */ D(yt, [["__scopeId", "data-v-f43eb7b8"]]), ht = { class: "kong-ui-public-dashboard-renderer" }, gt = {
+}), ht = /* @__PURE__ */ I(yt, [["__scopeId", "data-v-f43eb7b8"]]), mt = { class: "kong-ui-public-dashboard-renderer" }, ft = {
   key: 0,
   class: "tile-container"
-}, ft = /* @__PURE__ */ _({
+}, gt = /* @__PURE__ */ _({
   __name: "DashboardRenderer",
   props: {
     context: {},
     config: {}
   },
   emits: ["edit-tile"],
-  setup(t, { emit: r }) {
-    const e = t, o = r, { i18n: i } = V.useI18n(), n = z(B);
-    n || (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/dashboard-renderer/README.md#requirements"));
-    const c = Ke(), a = h(() => e.context.timeSpec ? e.context.timeSpec : {
+  setup(e, { expose: t, emit: r }) {
+    const n = e, o = r, { i18n: i } = F.useI18n(), c = E(0), s = z(B);
+    s || (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/dashboard-renderer/README.md#requirements"));
+    const l = Ge(), a = f(() => n.context.timeSpec ? n.context.timeSpec : {
       type: "relative",
-      time_range: c.defaultQueryTimeForOrg
-    }), l = h(() => !!e.context.timeSpec || !c.loading), s = h(() => e.config.tiles.map((p, b) => {
-      var g;
-      let u = p.definition;
+      time_range: l.defaultQueryTimeForOrg
+    }), A = f(() => !!n.context.timeSpec || !l.loading), x = f(() => n.config.tiles.map((y, S) => {
+      var h;
+      let u = y.definition;
       if ("description" in u.chart) {
-        const k = (g = u.chart.description) == null ? void 0 : g.replace(Ye, () => {
-          const q = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
-          return i.te(q) ? i.t(q) : "";
+        const b = (h = u.chart.description) == null ? void 0 : h.replace(Ye, () => {
+          const d = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
+          return i.te(d) ? i.t(d) : "";
         });
         u = {
           ...u,
           chart: {
             ...u.chart,
-            description: k
+            description: b
           }
         };
       }
       return {
-        layout: p.layout,
+        layout: y.layout,
         meta: u,
         // Add a unique key to each tile internally.
-        id: b
+        id: S
       };
-    })), E = h(() => {
-      let { tz: p, refreshInterval: b, editable: u } = e.context;
-      return p || (p = new Intl.DateTimeFormat().resolvedOptions().timeZone), b === void 0 && (b = Ze), u === void 0 && (u = !1), {
-        ...e.context,
-        tz: p,
+    })), R = f(() => {
+      let { tz: y, refreshInterval: S, editable: u } = n.context;
+      return y || (y = new Intl.DateTimeFormat().resolvedOptions().timeZone), S === void 0 && (S = Ze), u === void 0 && (u = !1), {
+        ...n.context,
+        tz: y,
         timeSpec: a.value,
-        refreshInterval: b,
+        refreshInterval: S,
         editable: u
       };
-    }), C = (p) => {
-      o("edit-tile", p);
+    }), D = (y) => {
+      o("edit-tile", y);
     };
-    return (p, b) => {
+    return t({ refresh: () => {
+      c.value++;
+    } }), (y, S) => {
       const u = O("KAlert");
-      return d(), R("div", ht, [
-        m(n) ? (d(), f(mt, {
+      return p(), C("div", mt, [
+        m(s) ? (p(), g(ht, {
           key: 1,
-          "grid-size": p.config.gridSize,
-          "tile-height": p.config.tileHeight,
-          tiles: s.value
+          "grid-size": y.config.gridSize,
+          "tile-height": y.config.tileHeight,
+          tiles: x.value
         }, {
-          tile: v(({ tile: g }) => [
-            g.meta.chart.type === "slottable" ? (d(), R("div", gt, [
-              F(p.$slots, g.meta.chart.id, {}, void 0, !0)
-            ])) : (d(), f(dt, {
+          tile: v(({ tile: h }) => [
+            h.meta.chart.type === "slottable" ? (p(), C("div", ft, [
+              V(y.$slots, h.meta.chart.id, {}, void 0, !0)
+            ])) : (p(), g(pt, {
               key: 1,
               class: "tile-container",
-              context: E.value,
-              definition: g.meta,
-              height: g.layout.size.rows * (p.config.tileHeight || m(L)) + parseInt(m(oe), 10),
-              "query-ready": l.value,
-              onEditTile: (k) => C(g)
-            }, null, 8, ["context", "definition", "height", "query-ready", "onEditTile"]))
+              context: R.value,
+              definition: h.meta,
+              height: h.layout.size.rows * (y.config.tileHeight || m(L)) + parseInt(m(ne), 10),
+              "query-ready": A.value,
+              "refresh-counter": c.value,
+              onEditTile: (b) => D(h)
+            }, null, 8, ["context", "definition", "height", "query-ready", "refresh-counter", "onEditTile"]))
           ]),
           _: 3
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (d(), f(u, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (p(), g(u, {
           key: 0,
           appearance: "danger"
         }, {
@@ -593,7 +611,7 @@ const V = {
       ]);
     };
   }
-}), Bt = /* @__PURE__ */ D(ft, [["__scopeId", "data-v-cd57ea9c"]]), Kt = [
+}), Bt = /* @__PURE__ */ I(gt, [["__scopeId", "data-v-26130807"]]), Gt = [
   "horizontal_bar",
   "vertical_bar",
   "gauge",
@@ -605,7 +623,7 @@ const V = {
   type: "string"
 }, w = {
   type: "string"
-}, ne = {
+}, ie = {
   type: "boolean"
 }, ae = {
   type: ["object", "array"],
@@ -641,7 +659,7 @@ const V = {
     chartDatasetColors: ae,
     syntheticsDataKey: N,
     chartTitle: w,
-    allowCsvExport: ne
+    allowCsvExport: ie
   },
   required: ["type"],
   additionalProperties: !1
@@ -658,7 +676,7 @@ const V = {
     chartDatasetColors: ae,
     syntheticsDataKey: N,
     chartTitle: w,
-    allowCsvExport: ne
+    allowCsvExport: ie
   },
   required: ["type"],
   additionalProperties: !1
@@ -702,7 +720,7 @@ const V = {
   },
   required: ["type"],
   additionalProperties: !1
-}, Tt = {
+}, Ct = {
   type: "object",
   properties: {
     chartTitle: w,
@@ -722,7 +740,7 @@ const V = {
   },
   required: ["type"],
   additionalProperties: !1
-}, Rt = {
+}, Tt = {
   type: "object",
   properties: {
     tz: {
@@ -772,17 +790,17 @@ const V = {
     "end"
   ],
   additionalProperties: !1
-}, G = {
+}, K = {
   granularity: {
     type: "string",
     description: 'Force time grouping into buckets of this duration. Only has an effect if "time" is in the "dimensions" list.',
-    enum: De
+    enum: Ee
   },
   time_range: {
     type: "object",
     description: "The time range to query.",
     anyOf: [
-      Rt,
+      Tt,
       At
     ],
     default: {
@@ -796,23 +814,23 @@ const V = {
   meta: {
     type: "object"
   }
-}, U = (t) => ({
+}, H = (e) => ({
   type: "array",
   description: "List of aggregated metrics to collect across the requested time span.",
   items: {
     type: "string",
-    enum: t
+    enum: e
   }
-}), H = (t) => ({
+}), U = (e) => ({
   type: "array",
   description: "List of attributes or entity types to group by.",
   minItems: 0,
   maxItems: 2,
   items: {
     type: "string",
-    enum: t
+    enum: e
   }
-}), Q = (t) => ({
+}), Q = (e) => ({
   type: "array",
   description: "A list of filters to apply to the query.",
   items: {
@@ -821,11 +839,11 @@ const V = {
     properties: {
       dimension: {
         type: "string",
-        enum: t
+        enum: e
       },
       type: {
         type: "string",
-        enum: Ce
+        enum: Ie
       },
       values: {
         type: "array",
@@ -841,7 +859,7 @@ const V = {
     ],
     additionalProperties: !1
   }
-}), Et = {
+}), Rt = {
   type: "object",
   description: "A query to launch at the advanced explore API",
   properties: {
@@ -851,14 +869,14 @@ const V = {
         "advanced"
       ]
     },
-    metrics: U(Ie),
-    dimensions: H(we),
+    metrics: H(xe),
+    dimensions: U(we),
     filters: Q(ke),
-    ...G
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
-}, xt = {
+}, Dt = {
   type: "object",
   description: "A query to launch at the basic explore API",
   properties: {
@@ -868,14 +886,14 @@ const V = {
         "basic"
       ]
     },
-    metrics: U(Oe),
-    dimensions: H(Pe),
+    metrics: H(Oe),
+    dimensions: U(Pe),
     filters: Q(Le),
-    ...G
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Dt = {
+}, Et = {
   type: "object",
   description: "A query to launch at the AI explore API",
   properties: {
@@ -885,21 +903,21 @@ const V = {
         "ai"
       ]
     },
-    metrics: U(Ne),
-    dimensions: H(ze),
+    metrics: H(Ne),
+    dimensions: U(ze),
     filters: Q(je),
-    ...G
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Ct = {
-  anyOf: [Et, xt, Dt]
 }, It = {
+  anyOf: [Rt, Dt, Et]
+}, xt = {
   type: "object",
   properties: {
-    query: Ct,
+    query: It,
     chart: {
-      anyOf: [_t, qt, bt, Tt, St, vt]
+      anyOf: [_t, qt, bt, Ct, St, vt]
     }
   },
   required: ["query", "chart"],
@@ -944,12 +962,12 @@ const V = {
 }, kt = {
   type: "object",
   properties: {
-    definition: It,
+    definition: xt,
     layout: wt
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, Gt = {
+}, Kt = {
   type: "object",
   properties: {
     tiles: {
@@ -984,22 +1002,22 @@ export {
   Ze as DEFAULT_TILE_REFRESH_INTERVAL_MS,
   Bt as DashboardRenderer,
   J as ENTITY_ID_TOKEN,
-  mt as GridLayout,
+  ht as GridLayout,
   B as INJECT_QUERY_PROVIDER,
   Ye as TIMEFRAME_TOKEN,
-  Dt as aiQuerySchema,
+  Et as aiQuerySchema,
   _t as barChartSchema,
-  xt as basicQuerySchema,
-  Gt as dashboardConfigSchema,
-  Kt as dashboardTileTypes,
-  Et as exploreV4QuerySchema,
+  Dt as basicQuerySchema,
+  Kt as dashboardConfigSchema,
+  Gt as dashboardTileTypes,
+  Rt as exploreV4QuerySchema,
   qt as gaugeChartSchema,
-  Tt as metricCardSchema,
+  Ct as metricCardSchema,
   vt as slottableSchema,
   kt as tileConfigSchema,
-  It as tileDefinitionSchema,
+  xt as tileDefinitionSchema,
   wt as tileLayoutSchema,
   bt as timeseriesChartSchema,
   St as topNTableSchema,
-  Ct as validDashboardQuery
+  It as validDashboardQuery
 };