@kong-ui-public/dashboard-renderer 0.26.32 → 0.27.0

package/dist/dashboard-renderer.es.js

@@ -1,30 +1,30 @@
-import { ref as E, watchEffect as le, defineComponent as v, inject as U, onUnmounted as M, computed as u, resolveComponent as N, unref as d, openBlock as l, createBlock as f, withCtx as g, createTextVNode as Q, toDisplayString as J, renderSlot as z, createCommentVNode as W, useCssVars as x, createElementVNode as j, createVNode as S, createElementBlock as q, normalizeProps as Y, guardReactiveProps as pe, createSlots as de, resolveDynamicComponent as ue, mergeProps as ye, onMounted as me, Fragment as he, renderList as fe, normalizeClass as ge, normalizeStyle as K } from "vue";
-import { SimpleChart as ve, AnalyticsChart as Z, TopNTable as be, ChartMetricDisplay as _e } from "@kong-ui-public/analytics-chart";
-import qe from "swrv";
+import { ref as I, watchEffect as pe, defineComponent as _, inject as J, onUnmounted as W, computed as h, resolveComponent as k, unref as m, openBlock as l, createBlock as g, withCtx as v, createTextVNode as z, toDisplayString as j, renderSlot as $, createCommentVNode as Y, useCssVars as O, createElementVNode as Z, createVNode as A, mergeProps as X, createSlots as ee, createElementBlock as R, normalizeProps as de, guardReactiveProps as ue, resolveDynamicComponent as ye, onMounted as me, Fragment as he, renderList as fe, normalizeClass as ge, normalizeStyle as U } 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 Se, i18nTComponent as Te } from "@kong-ui-public/i18n";
-import { stripUnknownFilters as Re, Timeframe as De, TimePeriods as Ae, granularityValues as Ce, exploreFilterTypesV2 as Ee, exploreAggregations as xe, queryableExploreDimensions as Ie, filterableExploreDimensions as we, basicExploreAggregations as ke, queryableBasicExploreDimensions as Oe, filterableBasicExploreDimensions as Pe, aiExploreAggregations as Le, queryableAiExploreDimensions as Ne, filterableAiExploreDimensions as ze, relativeTimeRangeValuesV4 as je } from "@kong-ui-public/analytics-utilities";
-import { MetricsProvider as $e, MetricsConsumer as Fe } from "@kong-ui-public/analytics-metric-provider";
-import { EntityLink as Ve } from "@kong-ui-public/entities-shared";
+import { createI18n as Te, i18nTComponent as Re } from "@kong-ui-public/i18n";
+import { stripUnknownFilters as Ae, Timeframe as Ee, TimePeriods as De, granularityValues as Ce, exploreFilterTypesV2 as Ie, exploreAggregations as we, queryableExploreDimensions as xe, 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 { EntityLink as Ke } from "@kong-ui-public/entities-shared";
 import { useAnalyticsConfigStore as Ge } from "@kong-ui-public/analytics-config-store";
-var X = /* @__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))(X || {});
-const Ke = (e) => {
-  var t, o, r, i, a;
+var te = /* @__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))(te || {});
+const Be = (e) => {
+  var t, r, n, i, a;
   return e ? !!// TODO: revisit: currently only the first check ever matters?
-  ((t = Object.keys(e)) != null && t.length || (o = e.data) != null && o.length || (i = (r = e.data) == null ? void 0 : r.data) != null && i.length || !((a = e.data) != null && a.data) && typeof e.data == "object" && Object.keys(e == null ? void 0 : e.data).length) : !1;
+  ((t = Object.keys(e)) != null && t.length || (r = e.data) != null && r.length || (i = (n = e.data) == null ? void 0 : n.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 Be(e = E({}), t, o, r = Ke) {
-  const i = E(
+function He(e = I({}), t, r, n = Be) {
+  const i = I(
     "PENDING"
     /* PENDING */
   );
-  return le(() => {
-    const a = r(e.value);
-    if (e.value && a && o.value) {
+  return pe(() => {
+    const a = n(e.value);
+    if (e.value && a && r.value) {
       i.value = "VALIDATING_HAS_DATA";
       return;
     }
-    if (e.value && o.value) {
+    if (e.value && r.value) {
       i.value = "VALIDATING";
       return;
     }
@@ -47,33 +47,34 @@ function Be(e = E({}), t, o, r = Ke) {
     e.value === void 0 && t && (i.value = "ERROR");
   }), {
     state: i,
-    swrvState: X
+    swrvState: te
   };
 }
-const He = {
+const Ue = {
   noQueryBridge: "No query bridge provided.  Unable to render dashboard.",
   trendRange: {
     "24h": "Last 24-Hour Summary",
     "7d": "Last 7-Day Summary",
     "30d": "Last 30-Day Summary"
-  }
-}, Ue = {
-  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
+  },
+  edit: "Edit"
 }, Me = {
-  renderer: He,
-  queryDataProvider: Ue
+  timeRangeExceeded: "The time range for this report is outside of your organization's data retention period"
+}, Qe = {
+  renderer: Ue,
+  queryDataProvider: Me
 };
-function Qe() {
-  const e = Se("en-us", Me);
+function Je() {
+  const e = Te("en-us", Qe);
   return {
     i18n: e,
-    i18nT: Te(e)
+    i18nT: Re(e)
     // Translation component <i18n-t>
   };
 }
-const ee = {
-  useI18n: Qe
-}, O = 170, te = "analytics-query-provider", B = "{entity-id}", Je = "{cp-id}", We = "{timeframe}", Ye = 30 * 1e3, P = /* @__PURE__ */ v({
+const F = {
+  useI18n: Je
+}, P = 170, re = "analytics-query-provider", M = "{entity-id}", We = "{cp-id}", Ye = "{timeframe}", Ze = 30 * 1e3, V = /* @__PURE__ */ _({
   __name: "QueryDataProvider",
   props: {
     context: {},
@@ -82,65 +83,65 @@ const ee = {
   },
   emits: ["queryComplete"],
   setup(e, { emit: t }) {
-    const o = e, r = t, { i18n: i } = ee.useI18n(), a = U(te), c = () => o.queryReady && a ? JSON.stringify([o.query, o.context]) : null, n = new AbortController();
-    M(() => {
-      n.abort();
+    const r = e, n = t, { i18n: i } = F.useI18n(), a = J(re), s = () => r.queryReady && a ? JSON.stringify([r.query, r.context]) : null, o = new AbortController();
+    W(() => {
+      o.abort();
     });
-    const y = (R, D, A) => {
-      const _ = [];
-      return D && _.push(...D), _.push(...Re(R, A)), _;
-    }, { data: s, error: b, isValidating: m } = qe(c, async () => {
-      var R, D, A, _;
+    const c = (T, q, E) => {
+      const S = [];
+      return q && S.push(...q), S.push(...Ae(T, E)), S;
+    }, { data: u, error: C, isValidating: N } = Se(s, async () => {
+      var T, q, E, S;
       try {
         let {
-          datasource: p,
-          ...ne
-        } = o.query;
-        p || (p = "basic");
-        const se = y(p, o.query.filters, o.context.filters), ce = {
-          datasource: p,
+          datasource: y,
+          ...se
+        } = r.query;
+        y || (y = "basic");
+        const ce = c(y, r.query.filters, r.context.filters), le = {
+          datasource: y,
           query: {
-            ...ne,
+            ...se,
             time_range: {
-              ...o.context.timeSpec,
-              tz: o.context.tz
+              ...r.context.timeSpec,
+              tz: r.context.tz
             },
-            filters: se
+            filters: ce
           }
         };
-        return a == null ? void 0 : a.queryFn(ce, n);
-      } catch (p) {
-        k.value = ((D = (R = p == null ? void 0 : p.response) == null ? void 0 : R.data) == null ? void 0 : D.message) === "Range not allowed for this tier" ? i.t("queryDataProvider.timeRangeExceeded") : ((_ = (A = p == null ? void 0 : p.response) == null ? void 0 : A.data) == null ? void 0 : _.message) || (p == null ? void 0 : p.message);
+        return a == null ? void 0 : a.queryFn(le, o);
+      } catch (y) {
+        d.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 = (E = y == null ? void 0 : y.response) == null ? void 0 : E.data) == null ? void 0 : S.message) || (y == null ? void 0 : y.message);
       } finally {
-        r("queryComplete");
+        n("queryComplete");
       }
     }, {
-      refreshInterval: o.context.refreshInterval,
+      refreshInterval: r.context.refreshInterval,
       revalidateOnFocus: !1
-    }), { state: h, swrvState: w } = Be(s, b, m), k = E(null), C = u(() => h.value === w.ERROR || !!k.value), ae = u(() => !o.queryReady || h.value === w.PENDING);
-    return (R, D) => {
-      const A = N("KSkeleton"), _ = N("KEmptyState");
-      return ae.value || !d(s) && !C.value ? (l(), f(A, {
+    }), { state: p, swrvState: b } = He(u, C, N), d = I(null), f = h(() => p.value === b.ERROR || !!d.value), x = h(() => !r.queryReady || p.value === b.PENDING);
+    return (T, q) => {
+      const E = k("KSkeleton"), S = k("KEmptyState");
+      return x.value || !m(u) && !f.value ? (l(), g(E, {
         key: 0,
         class: "chart-skeleton",
         type: "table"
-      })) : C.value ? (l(), f(_, {
+      })) : f.value ? (l(), g(S, {
         key: 1,
         "action-button-visible": !1,
         "data-testid": "chart-empty-state",
         "icon-variant": "error"
       }, {
-        default: g(() => [
-          Q(J(k.value), 1)
+        default: v(() => [
+          z(j(d.value), 1)
         ]),
         _: 1
-      })) : d(s) ? z(R.$slots, "default", {
+      })) : m(u) ? $(T.$slots, "default", {
         key: 2,
-        data: d(s)
-      }) : W("", !0);
+        data: m(u)
+      }) : Y("", !0);
     };
   }
-}), Ze = { class: "analytics-chart" }, Xe = /* @__PURE__ */ v({
+}), Xe = { class: "analytics-chart" }, et = /* @__PURE__ */ _({
   __name: "SimpleChartRenderer",
   props: {
     query: {},
@@ -150,33 +151,93 @@ const ee = {
     height: {}
   },
   setup(e) {
-    x((o) => ({
-      "6fb24a14": `${o.height}px`
+    O((r) => ({
+      "6fb24a14": `${r.height}px`
     }));
     const t = e;
-    return (o, r) => (l(), f(P, {
-      context: o.context,
-      query: o.query,
-      "query-ready": o.queryReady
+    return (r, n) => (l(), g(V, {
+      context: r.context,
+      query: r.query,
+      "query-ready": r.queryReady
     }, {
-      default: g(({ data: i }) => [
-        j("div", Ze, [
-          S(d(ve), {
+      default: v(({ data: i }) => [
+        Z("div", Xe, [
+          A(m(ve), {
             "chart-data": i,
             "chart-options": t.chartOptions,
-            "synthetics-data-key": o.chartOptions.syntheticsDataKey
+            "synthetics-data-key": r.chartOptions.syntheticsDataKey
           }, null, 8, ["chart-data", "chart-options", "synthetics-data-key"])
         ])
       ]),
       _: 1
     }, 8, ["context", "query", "query-ready"]));
   }
-}), T = (e, t) => {
-  const o = e.__vccOpts || e;
-  for (const [r, i] of t)
-    o[r] = i;
-  return o;
-}, et = /* @__PURE__ */ T(Xe, [["__scopeId", "data-v-af07dcbf"]]), tt = { class: "analytics-chart" }, rt = /* @__PURE__ */ v({
+}), D = (e, t) => {
+  const r = e.__vccOpts || e;
+  for (const [n, i] of t)
+    r[n] = i;
+  return r;
+}, tt = /* @__PURE__ */ D(et, [["__scopeId", "data-v-af07dcbf"]]), rt = { class: "analytics-chart" }, it = /* @__PURE__ */ _({
+  __name: "BaseAnalyticsChartRenderer",
+  props: {
+    query: {},
+    context: {},
+    queryReady: { type: Boolean },
+    chartOptions: {},
+    height: {},
+    extraProps: {}
+  },
+  emits: ["edit-tile"],
+  setup(e, { emit: t }) {
+    O((o) => ({
+      "25fcb4c4": `${o.height}px`
+    }));
+    const r = e, n = t, { i18n: i } = F.useI18n(), a = h(() => ({
+      type: r.chartOptions.type,
+      stacked: r.chartOptions.stacked ?? !1,
+      chartDatasetColors: r.chartOptions.chartDatasetColors
+    })), s = () => {
+      n("edit-tile");
+    };
+    return (o, c) => {
+      const u = k("KDropdownItem");
+      return l(), g(V, {
+        context: o.context,
+        query: o.query,
+        "query-ready": o.queryReady
+      }, {
+        default: v(({ data: C }) => [
+          Z("div", rt, [
+            A(m(_e), X({
+              "allow-csv-export": o.chartOptions.allowCsvExport,
+              "chart-data": C,
+              "chart-options": a.value,
+              "chart-title": o.chartOptions.chartTitle,
+              "legend-position": "bottom",
+              "show-menu": o.context.editable,
+              "synthetics-data-key": o.chartOptions.syntheticsDataKey,
+              "tooltip-title": ""
+            }, o.extraProps), ee({ _: 2 }, [
+              o.context.editable ? {
+                name: "menu-items",
+                fn: v(() => [
+                  A(u, { onClick: s }, {
+                    default: v(() => [
+                      z(j(m(i).t("renderer.edit")), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                key: "0"
+              } : void 0
+            ]), 1040, ["allow-csv-export", "chart-data", "chart-options", "chart-title", "show-menu", "synthetics-data-key"])
+          ])
+        ]),
+        _: 1
+      }, 8, ["context", "query", "query-ready"]);
+    };
+  }
+}), ie = /* @__PURE__ */ D(it, [["__scopeId", "data-v-4365e4b4"]]), Q = /* @__PURE__ */ _({
   __name: "BarChartRenderer",
   props: {
     query: {},
@@ -186,37 +247,16 @@ const ee = {
     height: {}
   },
   setup(e) {
-    x((r) => ({
-      "19cb7414": `${r.height}px`
-    }));
-    const t = e, o = u(() => ({
-      type: t.chartOptions.type,
-      stacked: t.chartOptions.stacked,
-      chartDatasetColors: t.chartOptions.chartDatasetColors
-    }));
-    return (r, i) => (l(), f(P, {
-      context: r.context,
-      query: r.query,
-      "query-ready": r.queryReady
-    }, {
-      default: g(({ data: a }) => [
-        j("div", tt, [
-          S(d(Z), {
-            "allow-csv-export": r.chartOptions.allowCsvExport,
-            "chart-data": a,
-            "chart-options": o.value,
-            "chart-title": r.chartOptions.chartTitle,
-            "legend-position": "bottom",
-            "show-annotations": !1,
-            "synthetics-data-key": r.chartOptions.syntheticsDataKey,
-            "tooltip-title": ""
-          }, null, 8, ["allow-csv-export", "chart-data", "chart-options", "chart-title", "synthetics-data-key"])
-        ])
-      ]),
-      _: 1
-    }, 8, ["context", "query", "query-ready"]));
+    return (t, r) => (l(), g(ie, {
+      "chart-options": t.chartOptions,
+      context: t.context,
+      "extra-props": { showAnnotations: !1 },
+      height: t.height,
+      query: t.query,
+      "query-ready": t.queryReady
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready"]));
   }
-}), H = /* @__PURE__ */ T(rt, [["__scopeId", "data-v-bc4b7018"]]), ot = { class: "analytics-chart" }, it = /* @__PURE__ */ v({
+}), nt = /* @__PURE__ */ _({
   __name: "TimeseriesChartRenderer",
   props: {
     query: {},
@@ -226,39 +266,15 @@ const ee = {
     height: {}
   },
   setup(e) {
-    x((r) => ({
-      "75618b0a": `${r.height}px`
-    }));
-    const t = e, o = u(() => {
-      const r = t.chartOptions.stacked ?? !1;
-      return {
-        type: t.chartOptions.type,
-        stacked: r,
-        chartDatasetColors: t.chartOptions.chartDatasetColors
-      };
-    });
-    return (r, i) => (l(), f(P, {
-      context: r.context,
-      query: r.query,
-      "query-ready": r.queryReady
-    }, {
-      default: g(({ data: a }) => [
-        j("div", ot, [
-          S(d(Z), {
-            "allow-csv-export": r.chartOptions.allowCsvExport,
-            "chart-data": a,
-            "chart-options": o.value,
-            "chart-title": r.chartOptions.chartTitle,
-            "legend-position": "bottom",
-            "synthetics-data-key": r.chartOptions.syntheticsDataKey,
-            "tooltip-title": ""
-          }, null, 8, ["allow-csv-export", "chart-data", "chart-options", "chart-title", "synthetics-data-key"])
-        ])
-      ]),
-      _: 1
-    }, 8, ["context", "query", "query-ready"]));
+    return (t, r) => (l(), g(ie, {
+      "chart-options": t.chartOptions,
+      context: t.context,
+      height: t.height,
+      query: t.query,
+      "query-ready": t.queryReady
+    }, null, 8, ["chart-options", "context", "height", "query", "query-ready"]));
   }
-}), at = /* @__PURE__ */ T(it, [["__scopeId", "data-v-f6bf3426"]]), nt = { class: "metric-card-tile-wrapper" }, st = /* @__PURE__ */ v({
+}), ot = { class: "metric-card-tile-wrapper" }, at = /* @__PURE__ */ _({
   __name: "GoldenSignalsRenderer",
   props: {
     query: {},
@@ -268,10 +284,10 @@ const ee = {
     height: {}
   },
   setup(e) {
-    const t = e, o = u(() => {
+    const t = e, r = h(() => {
       const i = t.context.timeSpec;
       if (i.type === "absolute")
-        return new De({
+        return new Ee({
           key: "custom",
           timeframeText: "custom",
           display: "custom",
@@ -283,15 +299,18 @@ const ee = {
           isRelative: !1,
           allowedTiers: ["free", "plus", "enterprise"]
         });
-      const a = Ae.get(i.time_range);
+      const a = De.get(i.time_range);
       if (!a)
         throw new Error("Unknown time range");
       return a;
-    }), r = u(() => {
-      var i;
+    }), n = h(() => {
+      var a, s;
+      const i = (a = t.query) == null ? void 0 : a.datasource;
+      if (i && i !== "advanced" && i !== "basic")
+        throw new Error(`Invalid datasource value: ${i}`);
       return {
-        datasource: (i = t.query) == null ? void 0 : i.datasource,
-        overrideTimeframe: o.value,
+        datasource: (s = t.query) == null ? void 0 : s.datasource,
+        overrideTimeframe: r.value,
         tz: t.context.tz,
         additionalFilter: t.context.filters,
         // TODO: Decide how to handle metric card filters.
@@ -303,16 +322,16 @@ const ee = {
         queryReady: t.queryReady
       };
     });
-    return (i, a) => (l(), q("div", nt, [
-      S(d($e), Y(pe(r.value)), {
-        default: g(() => [
-          S(d(Fe))
+    return (i, a) => (l(), R("div", ot, [
+      A(m(Fe), de(ue(n.value)), {
+        default: v(() => [
+          A(m(Ve))
         ]),
         _: 1
       }, 16)
     ]));
   }
-}), ct = /* @__PURE__ */ T(st, [["__scopeId", "data-v-1fadf6cf"]]), re = "20px", lt = /* @__PURE__ */ v({
+}), st = /* @__PURE__ */ D(at, [["__scopeId", "data-v-f2a5f36e"]]), ne = "20px", ct = /* @__PURE__ */ _({
   __name: "TopNTableRenderer",
   props: {
     query: {},
@@ -322,38 +341,38 @@ const ee = {
     height: {}
   },
   setup(e) {
-    const t = e, o = (r) => {
+    const t = e, r = (n) => {
       var i;
       if ((i = t.chartOptions) != null && i.entityLink)
-        if (r.id.includes(":")) {
-          const [a, c] = r.id.split(":");
-          return t.chartOptions.entityLink.replace(Je, a).replace(B, c);
+        if (n.id.includes(":")) {
+          const [a, s] = n.id.split(":");
+          return t.chartOptions.entityLink.replace(We, a).replace(M, s);
         } else
-          return t.chartOptions.entityLink.replace(B, r.id);
+          return t.chartOptions.entityLink.replace(M, n.id);
       return "";
     };
-    return (r, i) => (l(), f(P, {
-      context: r.context,
-      query: r.query,
-      "query-ready": r.queryReady
+    return (n, i) => (l(), g(V, {
+      context: n.context,
+      query: n.query,
+      "query-ready": n.queryReady
     }, {
-      default: g(({ data: a }) => [
-        S(d(be), {
+      default: v(({ data: a }) => [
+        A(m(be), {
           data: a,
-          description: r.chartOptions.description,
-          "synthetics-data-key": r.chartOptions.syntheticsDataKey,
-          title: r.chartOptions.chartTitle || ""
-        }, de({ _: 2 }, [
+          description: n.chartOptions.description,
+          "synthetics-data-key": n.chartOptions.syntheticsDataKey,
+          title: n.chartOptions.chartTitle || ""
+        }, ee({ _: 2 }, [
           t.chartOptions.entityLink ? {
             name: "name",
-            fn: g(({ record: c }) => [
-              S(d(Ve), {
+            fn: v(({ record: s }) => [
+              A(m(Ke), {
                 "entity-link-data": {
-                  id: c.id,
-                  label: c.name,
-                  deleted: c.deleted
+                  id: s.id,
+                  label: s.name,
+                  deleted: s.deleted
                 },
-                "external-link": o(c)
+                "external-link": r(s)
               }, null, 8, ["entity-link-data", "external-link"])
             ]),
             key: "0"
@@ -363,54 +382,57 @@ const ee = {
       _: 1
     }, 8, ["context", "query", "query-ready"]));
   }
-}), pt = { class: "tile-boundary" }, dt = /* @__PURE__ */ v({
+}), lt = { class: "tile-boundary" }, pt = /* @__PURE__ */ _({
   __name: "DashboardTile",
   props: {
     definition: {},
     context: {},
-    height: { default: O },
+    height: { default: P },
     queryReady: { type: Boolean }
   },
-  setup(e) {
-    x((a) => ({
-      15141831: `${a.height}px`
+  emits: ["edit-tile"],
+  setup(e, { emit: t }) {
+    O((c) => ({
+      ab2e7a42: `${c.height}px`
     }));
-    const t = parseInt(re, 10), o = e, r = {
-      timeseries_line: at,
-      horizontal_bar: H,
-      vertical_bar: H,
-      gauge: et,
-      golden_signals: ct,
-      top_n: lt,
+    const r = parseInt(ne, 10), n = e, i = t, a = {
+      timeseries_line: nt,
+      horizontal_bar: Q,
+      vertical_bar: Q,
+      gauge: tt,
+      golden_signals: st,
+      top_n: ct,
       slottable: void 0
-    }, i = u(() => {
-      const a = r[o.definition.chart.type];
-      return a && {
-        component: a,
+    }, s = h(() => {
+      const c = a[n.definition.chart.type];
+      return c && {
+        component: c,
         rendererProps: {
-          query: o.definition.query,
-          context: o.context,
-          queryReady: o.queryReady,
-          chartOptions: o.definition.chart,
-          height: o.height - t * 2
+          query: n.definition.query,
+          context: n.context,
+          queryReady: n.queryReady,
+          chartOptions: n.definition.chart,
+          height: n.height - r * 2
         }
       };
-    });
-    return (a, c) => (l(), q("div", pt, [
-      i.value ? (l(), f(ue(i.value.component), Y(ye({ key: 0 }, i.value.rendererProps)), null, 16)) : W("", !0)
+    }), o = () => {
+      i("edit-tile", n.definition);
+    };
+    return (c, u) => (l(), R("div", lt, [
+      s.value ? (l(), g(ye(s.value.component), X({ key: 0 }, s.value.rendererProps, { onEditTile: o }), null, 16)) : Y("", !0)
     ]));
   }
-}), ut = /* @__PURE__ */ T(dt, [["__scopeId", "data-v-daac5f24"]]), yt = (e, t, o) => {
-  const r = /* @__PURE__ */ new Map();
-  o.forEach((a) => {
-    const c = a.layout.position.row, n = r.get(c), y = a.layout.size.rows === 1 && !!a.layout.size.fitToContent;
-    n === void 0 ? r.set(c, y) : r.set(c, n && y);
+}), dt = /* @__PURE__ */ D(pt, [["__scopeId", "data-v-56df5ab7"]]), ut = (e, t, r) => {
+  const n = /* @__PURE__ */ new Map();
+  r.forEach((a) => {
+    const s = a.layout.position.row, o = n.get(s), c = a.layout.size.rows === 1 && !!a.layout.size.fitToContent;
+    o === void 0 ? n.set(s, c) : n.set(s, o && c);
   });
   const i = [];
   for (let a = 0; a < e; a++)
-    r.get(a) ? i.push("auto") : i.push(`${t}px`);
+    n.get(a) ? i.push("auto") : i.push(`${t}px`);
   return i;
-}, mt = /* @__PURE__ */ v({
+}, yt = /* @__PURE__ */ _({
   __name: "GridLayout",
   props: {
     gridSize: {
@@ -420,7 +442,7 @@ const ee = {
     tileHeight: {
       type: Number,
       required: !1,
-      default: () => O
+      default: () => P
     },
     tiles: {
       type: Array,
@@ -428,133 +450,138 @@ const ee = {
     }
   },
   setup(e) {
-    x((n) => ({
+    O((o) => ({
       "3bc5e939": e.gridSize.cols,
       "77aa3028": a.value
     }));
-    const t = e, o = E(null), r = E(0), i = new ResizeObserver((n) => {
+    const t = e, r = I(null), n = I(0), i = new ResizeObserver((o) => {
       window.requestAnimationFrame(() => {
-        !Array.isArray(n) || !n.length || (r.value = n[0].contentRect.width);
+        !Array.isArray(o) || !o.length || (n.value = o[0].contentRect.width);
       });
     });
     me(() => {
-      o.value && i.observe(o.value);
-    }), M(() => {
-      o.value && i.unobserve(o.value);
+      r.value && i.observe(r.value);
+    }), W(() => {
+      r.value && i.unobserve(r.value);
     });
-    const a = u(() => {
-      var y;
-      return yt((y = t.gridSize) == null ? void 0 : y.rows, t.tileHeight, t.tiles).join(" ");
-    }), c = u(() => t.tiles.map((n, y) => ({
-      key: `tile-${y}`,
-      tile: n,
+    const a = h(() => {
+      var c;
+      return ut((c = t.gridSize) == null ? void 0 : c.rows, t.tileHeight, t.tiles).join(" ");
+    }), s = h(() => t.tiles.map((o, c) => ({
+      key: `tile-${c}`,
+      tile: o,
       style: {
-        "grid-column-start": n.layout.position.col + 1,
-        "grid-column-end": n.layout.position.col + 1 + n.layout.size.cols,
-        "grid-row-start": n.layout.position.row + 1,
-        "grid-row-end": n.layout.position.row + 1 + n.layout.size.rows
+        "grid-column-start": o.layout.position.col + 1,
+        "grid-column-end": o.layout.position.col + 1 + o.layout.size.cols,
+        "grid-row-start": o.layout.position.row + 1,
+        "grid-row-end": o.layout.position.row + 1 + o.layout.size.rows
       }
     })));
-    return (n, y) => (l(), q("div", {
+    return (o, c) => (l(), R("div", {
       ref_key: "gridContainer",
-      ref: o,
+      ref: r,
       class: "kong-ui-public-grid-layout"
     }, [
-      (l(!0), q(he, null, fe(c.value, (s) => (l(), q("div", {
-        key: s.key,
+      (l(!0), R(he, null, fe(s.value, (u) => (l(), R("div", {
+        key: u.key,
         class: ge(["grid-cell", {
-          "empty-cell": !s.tile
+          "empty-cell": !u.tile
         }]),
-        style: K(s.style)
+        style: U(u.style)
       }, [
-        z(n.$slots, "tile", {
-          style: K(s.style),
-          tile: s.tile
+        $(o.$slots, "tile", {
+          style: U(u.style),
+          tile: u.tile
         }, void 0, !0)
       ], 6))), 128))
     ], 512));
   }
-}), ht = /* @__PURE__ */ T(mt, [["__scopeId", "data-v-f43eb7b8"]]), ft = { class: "kong-ui-public-dashboard-renderer" }, gt = {
+}), mt = /* @__PURE__ */ D(yt, [["__scopeId", "data-v-f43eb7b8"]]), ht = { class: "kong-ui-public-dashboard-renderer" }, ft = {
   key: 0,
   class: "tile-container"
-}, vt = /* @__PURE__ */ v({
+}, gt = /* @__PURE__ */ _({
   __name: "DashboardRenderer",
   props: {
     context: {},
     config: {}
   },
-  setup(e) {
-    const t = e, { i18n: o } = ee.useI18n(), r = U(te);
-    r || (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 i = Ge(), a = u(() => t.context.timeSpec ? t.context.timeSpec : {
+  emits: ["edit-tile"],
+  setup(e, { emit: t }) {
+    const r = e, n = t, { i18n: i } = F.useI18n(), a = J(re);
+    a || (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 s = Ge(), o = h(() => r.context.timeSpec ? r.context.timeSpec : {
       type: "relative",
-      time_range: i.defaultQueryTimeForOrg
-    }), c = u(() => !!t.context.timeSpec || !i.loading), n = u(() => t.config.tiles.map((s, b) => {
-      var h;
-      let m = s.definition;
-      if ("description" in m.chart) {
-        const w = (h = m.chart.description) == null ? void 0 : h.replace(We, () => {
-          const C = `renderer.trendRange.${a.value.type === "absolute" ? "custom" : a.value.time_range}`;
-          return o.te(C) ? o.t(C) : "";
+      time_range: s.defaultQueryTimeForOrg
+    }), c = h(() => !!r.context.timeSpec || !s.loading), u = h(() => r.config.tiles.map((p, b) => {
+      var f;
+      let d = p.definition;
+      if ("description" in d.chart) {
+        const x = (f = d.chart.description) == null ? void 0 : f.replace(Ye, () => {
+          const q = `renderer.trendRange.${o.value.type === "absolute" ? "custom" : o.value.time_range}`;
+          return i.te(q) ? i.t(q) : "";
         });
-        m = {
-          ...m,
+        d = {
+          ...d,
           chart: {
-            ...m.chart,
-            description: w
+            ...d.chart,
+            description: x
           }
         };
       }
       return {
-        layout: s.layout,
-        meta: m,
+        layout: p.layout,
+        meta: d,
         // Add a unique key to each tile internally.
         id: b
       };
-    })), y = u(() => {
-      let { tz: s, refreshInterval: b } = t.context;
-      return s || (s = new Intl.DateTimeFormat().resolvedOptions().timeZone), b === void 0 && (b = Ye), {
-        ...t.context,
-        tz: s,
-        timeSpec: a.value,
-        refreshInterval: b
+    })), C = h(() => {
+      let { tz: p, refreshInterval: b, editable: d } = r.context;
+      return p || (p = new Intl.DateTimeFormat().resolvedOptions().timeZone), b === void 0 && (b = Ze), d === void 0 && (d = !1), {
+        ...r.context,
+        tz: p,
+        timeSpec: o.value,
+        refreshInterval: b,
+        editable: d
       };
-    });
-    return (s, b) => {
-      const m = N("KAlert");
-      return l(), q("div", ft, [
-        d(r) ? (l(), f(ht, {
+    }), N = (p) => {
+      n("edit-tile", p);
+    };
+    return (p, b) => {
+      const d = k("KAlert");
+      return l(), R("div", ht, [
+        m(a) ? (l(), g(mt, {
           key: 1,
-          "grid-size": s.config.gridSize,
-          "tile-height": s.config.tileHeight,
-          tiles: n.value
+          "grid-size": p.config.gridSize,
+          "tile-height": p.config.tileHeight,
+          tiles: u.value
         }, {
-          tile: g(({ tile: h }) => [
-            h.meta.chart.type === "slottable" ? (l(), q("div", gt, [
-              z(s.$slots, h.meta.chart.id, {}, void 0, !0)
-            ])) : (l(), f(ut, {
+          tile: v(({ tile: f }) => [
+            f.meta.chart.type === "slottable" ? (l(), R("div", ft, [
+              $(p.$slots, f.meta.chart.id, {}, void 0, !0)
+            ])) : (l(), g(dt, {
               key: 1,
               class: "tile-container",
-              context: y.value,
-              definition: h.meta,
-              height: h.layout.size.rows * (s.config.tileHeight || d(O)) + parseInt(d(re), 10),
-              "query-ready": c.value
-            }, null, 8, ["context", "definition", "height", "query-ready"]))
+              context: C.value,
+              definition: f.meta,
+              height: f.layout.size.rows * (p.config.tileHeight || m(P)) + parseInt(m(ne), 10),
+              "query-ready": c.value,
+              onEditTile: (x) => N(f)
+            }, null, 8, ["context", "definition", "height", "query-ready", "onEditTile"]))
           ]),
           _: 3
-        }, 8, ["grid-size", "tile-height", "tiles"])) : (l(), f(m, {
+        }, 8, ["grid-size", "tile-height", "tiles"])) : (l(), g(d, {
           key: 0,
           appearance: "danger"
         }, {
-          default: g(() => [
-            Q(J(d(o).t("renderer.noQueryBridge")), 1)
+          default: v(() => [
+            z(j(m(i).t("renderer.noQueryBridge")), 1)
           ]),
           _: 1
         }))
       ]);
     };
   }
-}), Kt = /* @__PURE__ */ T(vt, [["__scopeId", "data-v-c49fe29b"]]), Bt = [
+}), Kt = /* @__PURE__ */ D(gt, [["__scopeId", "data-v-cd57ea9c"]]), Gt = [
   "horizontal_bar",
   "vertical_bar",
   "gauge",
@@ -564,11 +591,11 @@ const ee = {
   "slottable"
 ], L = {
   type: "string"
-}, I = {
+}, w = {
   type: "string"
 }, oe = {
   type: "boolean"
-}, ie = {
+}, ae = {
   type: ["object", "array"],
   items: {
     type: "string"
@@ -576,7 +603,7 @@ const ee = {
   additionalProperties: {
     type: "string"
   }
-}, bt = {
+}, vt = {
   type: "object",
   properties: {
     type: {
@@ -599,14 +626,14 @@ const ee = {
     stacked: {
       type: "boolean"
     },
-    chartDatasetColors: ie,
+    chartDatasetColors: ae,
     syntheticsDataKey: L,
-    chartTitle: I,
+    chartTitle: w,
     allowCsvExport: oe
   },
   required: ["type"],
   additionalProperties: !1
-}, qt = {
+}, bt = {
   type: "object",
   properties: {
     type: {
@@ -616,14 +643,14 @@ const ee = {
     stacked: {
       type: "boolean"
     },
-    chartDatasetColors: ie,
+    chartDatasetColors: ae,
     syntheticsDataKey: L,
-    chartTitle: I,
+    chartTitle: w,
     allowCsvExport: oe
   },
   required: ["type"],
   additionalProperties: !1
-}, St = {
+}, qt = {
   type: "object",
   properties: {
     type: {
@@ -632,7 +659,7 @@ const ee = {
     },
     metricDisplay: {
       type: "string",
-      enum: Object.values(_e)
+      enum: Object.values(qe)
     },
     reverseDataset: {
       type: "boolean"
@@ -641,14 +668,14 @@ const ee = {
       type: "number"
     },
     syntheticsDataKey: L,
-    chartTitle: I
+    chartTitle: w
   },
   required: ["type"],
   additionalProperties: !1
-}, Tt = {
+}, St = {
   type: "object",
   properties: {
-    chartTitle: I,
+    chartTitle: w,
     syntheticsDataKey: L,
     type: {
       type: "string",
@@ -663,10 +690,10 @@ const ee = {
   },
   required: ["type"],
   additionalProperties: !1
-}, Rt = {
+}, Tt = {
   type: "object",
   properties: {
-    chartTitle: I,
+    chartTitle: w,
     type: {
       type: "string",
       enum: ["golden_signals"]
@@ -683,7 +710,7 @@ const ee = {
   },
   required: ["type"],
   additionalProperties: !1
-}, Dt = {
+}, Rt = {
   type: "object",
   properties: {
     tz: {
@@ -698,7 +725,7 @@ const ee = {
     },
     time_range: {
       type: "string",
-      enum: je,
+      enum: $e,
       default: "1h"
     }
   },
@@ -733,7 +760,7 @@ const ee = {
     "end"
   ],
   additionalProperties: !1
-}, $ = {
+}, K = {
   granularity: {
     type: "string",
     description: 'Force time grouping into buckets of this duration. Only has an effect if "time" is in the "dimensions" list.',
@@ -743,7 +770,7 @@ const ee = {
     type: "object",
     description: "The time range to query.",
     anyOf: [
-      Dt,
+      Rt,
       At
     ],
     default: {
@@ -757,14 +784,14 @@ const ee = {
   meta: {
     type: "object"
   }
-}, F = (e) => ({
+}, G = (e) => ({
   type: "array",
   description: "List of aggregated metrics to collect across the requested time span.",
   items: {
     type: "string",
     enum: e
   }
-}), V = (e) => ({
+}), B = (e) => ({
   type: "array",
   description: "List of attributes or entity types to group by.",
   minItems: 0,
@@ -773,7 +800,7 @@ const ee = {
     type: "string",
     enum: e
   }
-}), G = (e) => ({
+}), H = (e) => ({
   type: "array",
   description: "A list of filters to apply to the query.",
   items: {
@@ -786,7 +813,7 @@ const ee = {
       },
       type: {
         type: "string",
-        enum: Ee
+        enum: Ie
       },
       values: {
         type: "array",
@@ -802,7 +829,7 @@ const ee = {
     ],
     additionalProperties: !1
   }
-}), Ct = {
+}), Et = {
   type: "object",
   description: "A query to launch at the advanced explore API",
   properties: {
@@ -812,14 +839,14 @@ const ee = {
         "advanced"
       ]
     },
-    metrics: F(xe),
-    dimensions: V(Ie),
-    filters: G(we),
-    ...$
+    metrics: G(we),
+    dimensions: B(xe),
+    filters: H(ke),
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
-}, Et = {
+}, Dt = {
   type: "object",
   description: "A query to launch at the basic explore API",
   properties: {
@@ -829,14 +856,14 @@ const ee = {
         "basic"
       ]
     },
-    metrics: F(ke),
-    dimensions: V(Oe),
-    filters: G(Pe),
-    ...$
+    metrics: G(Oe),
+    dimensions: B(Pe),
+    filters: H(Le),
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
-}, xt = {
+}, Ct = {
   type: "object",
   description: "A query to launch at the AI explore API",
   properties: {
@@ -846,26 +873,26 @@ const ee = {
         "ai"
       ]
     },
-    metrics: F(Le),
-    dimensions: V(Ne),
-    filters: G(ze),
-    ...$
+    metrics: G(Ne),
+    dimensions: B(ze),
+    filters: H(je),
+    ...K
   },
   required: ["datasource"],
   additionalProperties: !1
 }, It = {
-  anyOf: [Ct, Et, xt]
+  anyOf: [Et, Dt, Ct]
 }, wt = {
   type: "object",
   properties: {
     query: It,
     chart: {
-      anyOf: [_t, St, qt, Rt, Tt, bt]
+      anyOf: [_t, qt, bt, Tt, St, vt]
     }
   },
   required: ["query", "chart"],
   additionalProperties: !1
-}, kt = {
+}, xt = {
   type: "object",
   properties: {
     position: {
@@ -902,24 +929,24 @@ const ee = {
   },
   required: ["position", "size"],
   additionalProperties: !1
-}, Ot = {
+}, kt = {
   type: "object",
   properties: {
     definition: wt,
-    layout: kt
+    layout: xt
   },
   required: ["definition", "layout"],
   additionalProperties: !1
-}, Ht = {
+}, Bt = {
   type: "object",
   properties: {
     tiles: {
       type: "array",
-      items: Ot
+      items: kt
     },
     tileHeight: {
       type: "number",
-      description: `Height of each tile in pixels. Default: ${O}`
+      description: `Height of each tile in pixels. Default: ${P}`
     },
     gridSize: {
       type: "object",
@@ -940,27 +967,27 @@ const ee = {
   additionalProperties: !1
 };
 export {
-  Je as CP_ID_TOKEN,
-  O as DEFAULT_TILE_HEIGHT,
-  Ye as DEFAULT_TILE_REFRESH_INTERVAL_MS,
+  We as CP_ID_TOKEN,
+  P as DEFAULT_TILE_HEIGHT,
+  Ze as DEFAULT_TILE_REFRESH_INTERVAL_MS,
   Kt as DashboardRenderer,
-  B as ENTITY_ID_TOKEN,
-  ht as GridLayout,
-  te as INJECT_QUERY_PROVIDER,
-  We as TIMEFRAME_TOKEN,
-  xt as aiQuerySchema,
+  M as ENTITY_ID_TOKEN,
+  mt as GridLayout,
+  re as INJECT_QUERY_PROVIDER,
+  Ye as TIMEFRAME_TOKEN,
+  Ct as aiQuerySchema,
   _t as barChartSchema,
-  Et as basicQuerySchema,
-  Ht as dashboardConfigSchema,
-  Bt as dashboardTileTypes,
-  Ct as exploreV4QuerySchema,
-  St as gaugeChartSchema,
-  Rt as metricCardSchema,
-  bt as slottableSchema,
-  Ot as tileConfigSchema,
+  Dt as basicQuerySchema,
+  Bt as dashboardConfigSchema,
+  Gt as dashboardTileTypes,
+  Et as exploreV4QuerySchema,
+  qt as gaugeChartSchema,
+  Tt as metricCardSchema,
+  vt as slottableSchema,
+  kt as tileConfigSchema,
   wt as tileDefinitionSchema,
-  kt as tileLayoutSchema,
-  qt as timeseriesChartSchema,
-  Tt as topNTableSchema,
+  xt as tileLayoutSchema,
+  bt as timeseriesChartSchema,
+  St as topNTableSchema,
   It as validDashboardQuery
 };