@nsshunt/stsvueutils 1.2.32 → 1.2.34

package/dist/stsvueutils.mjs

@@ -34,11 +34,11 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _store, _storage, _workersEx, _runner, _workerId, _options, _STSInstrumentController, _app, _CreateRunnerCopy, CreateRunnerCopy_fn, _SetRunnerIntoWorker, _ProcessTelemetry, _CreateAsyncRunner, _PostMessageToWorker, _TerminateWorker, _StopRunner, _StopWorker, _requestResponseMessages, _requestResponseMessageTimeout, _port, _SetupListener, _collectorCollectorPort, _requestResponseHelper, _runners, _options2, _SetMessagePort, _AddAsyncRunner, _StopRunners;
-import { inject, defineComponent, defineAsyncComponent, ref, openBlock, createElementBlock, createVNode, unref, reactive, computed, watch, resolveComponent, createBlock, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, Fragment, renderList, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveDynamicComponent } from "vue";
+var _store, _storage, _workersEx, _runner, _workerId, _options, _STSInstrumentController, _app, _CreateRunnerCopy, CreateRunnerCopy_fn, _SetRunnerIntoWorker, _ProcessTelemetry, _CreateAsyncRunner, _PostMessageToWorker, _TerminateWorker, _StopRunner, _StopWorker, _requestResponseMessages, _requestResponseMessageTimeout, _port, _SetupListener, _collectorCollectorPort, _requestResponseHelper, _runners, _options2, _SetMessagePort, _AddAsyncRunner, _StopRunners, _socket, _observabilitySocketIOSubscriber, _logger, _observabilitySubscriptionManager, _store2, _state, _modelId, _options3, _tinyEmitter, _id, _SocketIOConnect, _SetupObservabilitySubscriber, _SetupSocketIO, _SocketConnect, _ProcessSocketError, _ProcessSocketEvents;
+import { inject, defineComponent, defineAsyncComponent, ref, openBlock, createElementBlock, createVNode, unref, reactive, computed, watch, resolveComponent, createBlock, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, Fragment, renderList, onMounted, onBeforeUnmount, pushScopeId, popScopeId, resolveDynamicComponent, isRef } from "vue";
 import debugModule from "debug";
-import { STSInstrumentControllerPluginKey, GetSTSInstrumentController, Gauge, GetSTSInstrumentControllerPluginKey } from "@nsshunt/stsobservability";
-import { ModelDelimeter, Sleep } from "@nsshunt/stsutils";
+import { STSInstrumentControllerPluginKey, GetSTSInstrumentController, Gauge, GetSTSInstrumentControllerPluginKey, ObservabilitySocketIOSubscriber, ObservabilityRESTAPISubscriber, ObservabilitySubscriptionManager, SubscriptionTopic, SocketIoClientHelper } from "@nsshunt/stsobservability";
+import { ModelDelimeter, Sleep, defaultLogger } from "@nsshunt/stsutils";
 import { defineStore } from "pinia";
 import _cloneDeep from "lodash.clonedeep";
 const STSStoragePluginKey = Symbol("storage");
@@ -2609,7 +2609,7 @@ const ModelStore = defineStore("__sts__ModelStore", {
     }
   }
 });
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "UXBarChart",
   setup(__props, { expose: __expose }) {
     const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -2690,7 +2690,7 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "UXLineChart",
   setup(__props, { expose: __expose }) {
     const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -2792,7 +2792,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "UXMultiBarChart",
   props: {
     series: {},
@@ -2892,7 +2892,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "UXRadialChart",
   props: {
     series: {},
@@ -9163,7 +9163,7 @@ function createDOMPurify() {
   return DOMPurify;
 }
 var purify = createDOMPurify();
-const _hoisted_1$4 = { class: "instDisplay text-right" };
+const _hoisted_1$5 = { class: "instDisplay text-right" };
 const _hoisted_2$4 = {
   key: 0,
   class: "instDisplayWide ml-6"
@@ -9204,7 +9204,7 @@ const _hoisted_26$2 = { key: 0 };
 const _hoisted_27$2 = ["innerHTML"];
 const _hoisted_28$2 = { key: 1 };
 const _hoisted_29$1 = ["innerHTML"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "UXModelInstrumentAgentCommon",
   props: {
     modelId: {},
@@ -9354,7 +9354,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   }),
                   createVNode(_component_v_col, { md: "10" }, {
                     default: withCtx(() => [
-                      createElementVNode("span", _hoisted_1$4, toDisplayString(round2Places(_ctx.instrumentData[`${unref(Gauge).DURATION_GAUGE}`].val)), 1),
+                      createElementVNode("span", _hoisted_1$5, toDisplayString(round2Places(_ctx.instrumentData[`${unref(Gauge).DURATION_GAUGE}`].val)), 1),
                       _ctx.isLeafNode === false ? (openBlock(), createElementBlock("span", _hoisted_2$4, toDisplayString(round2PlacesArray(_ctx.instrumentData[`${unref(Gauge).DURATION_GAUGE}`].percentile)), 1)) : createCommentVNode("", true)
                     ]),
                     _: 1
@@ -9433,7 +9433,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
                   createVNode(_component_v_col, { md: "12" }, {
                     default: withCtx(() => [
                       createElementVNode("div", null, [
-                        createVNode(_sfc_main$8, {
+                        createVNode(_sfc_main$9, {
                           ref_key: "barChartEx",
                           ref: barChartEx
                         }, null, 512)
@@ -9613,8 +9613,8 @@ const _export_sfc = (sfc, props) => {
   }
   return target2;
 };
-const UXModelInstrumentAgentCommon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-00273855"]]);
-const _hoisted_1$3 = { class: "ststitle" };
+const UXModelInstrumentAgentCommon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-00273855"]]);
+const _hoisted_1$4 = { class: "ststitle" };
 const _hoisted_2$3 = {
   key: 0,
   class: "stssubtitle"
@@ -9669,7 +9669,7 @@ const _hoisted_40 = { key: 0 };
 const _hoisted_41 = ["innerHTML"];
 const _hoisted_42 = { key: 1 };
 const _hoisted_43 = ["innerHTML"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "UXModelInstrumentServiceCommon",
   props: {
     modelId: {},
@@ -9815,7 +9815,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => clicked(_ctx.nodeid))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$3, [
+          createElementVNode("div", _hoisted_1$4, [
             createTextVNode(toDisplayString(friendlyTitle(_ctx.title)) + " ", 1),
             _ctx.title.length > 30 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
               createTextVNode(toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
@@ -9862,7 +9862,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               }, {
                 default: withCtx(() => [
                   createElementVNode("div", null, [
-                    createVNode(_sfc_main$7, {
+                    createVNode(_sfc_main$8, {
                       ref_key: "lineChartEx",
                       ref: lineChartEx
                     }, null, 512)
@@ -9994,7 +9994,7 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
               createVNode(_component_v_col, { md: "12" }, {
                 default: withCtx(() => [
                   createElementVNode("div", null, [
-                    createVNode(_sfc_main$8, {
+                    createVNode(_sfc_main$9, {
                       ref_key: "barChartEx",
                       ref: barChartEx
                     }, null, 512)
@@ -10265,9 +10265,9 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UXModelInstrumentServiceCommon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-02af10f2"]]);
+const UXModelInstrumentServiceCommon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-02af10f2"]]);
 const _withScopeId = (n) => (pushScopeId("data-v-3eab32be"), n = n(), popScopeId(), n);
-const _hoisted_1$2 = { class: "ststitle" };
+const _hoisted_1$3 = { class: "ststitle" };
 const _hoisted_2$2 = {
   key: 0,
   class: "stssubtitle"
@@ -10325,7 +10325,7 @@ const _hoisted_28 = {
   class: "stsinfo",
   style: { "text-align": "right", "padding-left": "15px" }
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "UXModelInstrumentServiceSmall",
   props: {
     modelId: {},
@@ -10587,7 +10587,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => clicked(_ctx.nodeid))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$2, [
+          createElementVNode("div", _hoisted_1$3, [
             createTextVNode(toDisplayString(friendlyTitle(_ctx.title)) + " ", 1),
             _ctx.title.length > 30 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
               createTextVNode(toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
@@ -10838,10 +10838,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UXModelInstrumentServiceSmall = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3eab32be"]]);
-const _hoisted_1$1 = ["value"];
+const UXModelInstrumentServiceSmall = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-3eab32be"]]);
+const _hoisted_1$2 = ["value"];
 const _hoisted_2$1 = { key: 0 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "UXModelNode",
   props: {
     modelId: {},
@@ -10896,11 +10896,544 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               onMyclick: navigate
             }, null, 40, ["model-id", "nodeid", "contextdata", "instrumentdata", "title"]))
           ])) : createCommentVNode("", true)
-        ], 8, _hoisted_1$1);
+        ], 8, _hoisted_1$2);
       }), 128);
     };
   }
 });
+let getRandomValues;
+const rnds8 = new Uint8Array(16);
+function rng() {
+  if (!getRandomValues) {
+    getRandomValues = typeof crypto !== "undefined" && crypto.getRandomValues && crypto.getRandomValues.bind(crypto);
+    if (!getRandomValues) {
+      throw new Error("crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported");
+    }
+  }
+  return getRandomValues(rnds8);
+}
+const byteToHex = [];
+for (let i = 0; i < 256; ++i) {
+  byteToHex.push((i + 256).toString(16).slice(1));
+}
+function unsafeStringify(arr, offset = 0) {
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + "-" + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + "-" + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + "-" + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + "-" + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+}
+const randomUUID = typeof crypto !== "undefined" && crypto.randomUUID && crypto.randomUUID.bind(crypto);
+const native = {
+  randomUUID
+};
+function v4(options, buf, offset) {
+  if (native.randomUUID && !buf && !options) {
+    return native.randomUUID();
+  }
+  options = options || {};
+  const rnds = options.random || (options.rng || rng)();
+  rnds[6] = rnds[6] & 15 | 64;
+  rnds[8] = rnds[8] & 63 | 128;
+  if (buf) {
+    offset = offset || 0;
+    for (let i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+    return buf;
+  }
+  return unsafeStringify(rnds);
+}
+const SOCKET_NAMESPACE = "stsinstrumentmanager/stsmonitor";
+class ObservabilitySubscriberManager {
+  constructor(options) {
+    __privateAdd(this, _socket, null);
+    __privateAdd(this, _observabilitySocketIOSubscriber, null);
+    __privateAdd(this, _logger, void 0);
+    __privateAdd(this, _observabilitySubscriptionManager, null);
+    __privateAdd(this, _store2, void 0);
+    __privateAdd(this, _state, "init");
+    __privateAdd(this, _modelId, void 0);
+    __privateAdd(this, _options3, void 0);
+    __privateAdd(this, _tinyEmitter, void 0);
+    __privateAdd(this, _id, void 0);
+    __privateAdd(this, _SocketIOConnect, (socket) => {
+      var _a, _b;
+      try {
+        console.log(chalk$1.cyan(`SocketIOConnect(): Starting`));
+        console.log(chalk$1.cyan(`SocketIOConnect(): State: [${__privateGet(this, _state)}]`));
+        console.log(chalk$1.cyan(`SocketIOConnect(): Current Model Subscriptions: [${(_a = __privateGet(this, _observabilitySubscriptionManager)) == null ? void 0 : _a.subscriptions}]`));
+        if (__privateGet(this, _observabilitySocketIOSubscriber) instanceof ObservabilitySocketIOSubscriber) {
+          if (socket.id) {
+            const observabilitySocketIOSubscriberSocketId = __privateGet(this, _observabilitySocketIOSubscriber).socket.id;
+            if (observabilitySocketIOSubscriberSocketId) {
+              if (socket.id.localeCompare(observabilitySocketIOSubscriberSocketId) === 0) {
+                __privateGet(this, _logger).debug(chalk$1.cyan(`AgentSocketClient:constructor:SocketIOConnectSocket(): ids are the same - ignoring`));
+              }
+            }
+          }
+          __privateGet(this, _logger).debug(chalk$1.cyan(`AgentSocketClient:constructor:SocketIOConnect(): Socket ids are different - update with new socket`));
+          __privateGet(this, _observabilitySocketIOSubscriber).socket = socket;
+          (_b = __privateGet(this, _observabilitySubscriptionManager)) == null ? void 0 : _b.Stop();
+          if (__privateGet(this, _state).localeCompare("started") === 0) {
+            setTimeout(() => {
+              var _a2;
+              __privateGet(this, _logger).debug(chalk$1.cyan(`AgentSocketClient:constructor:SocketIOConnect(): observabilitySubscriptionManager Start`));
+              (_a2 = __privateGet(this, _observabilitySubscriptionManager)) == null ? void 0 : _a2.Start();
+              __privateGet(this, _tinyEmitter).emit("connected");
+            }, 2500);
+          } else {
+            __privateGet(this, _logger).debug(chalk$1.cyan(`AgentSocketClient:constructor:SocketIOConnect(): state not in the started state, current state: [${__privateGet(this, _state)}]`));
+            __privateGet(this, _tinyEmitter).emit("connected");
+          }
+        } else {
+          __privateGet(this, _logger).debug(chalk$1.cyan(`SocketIOConnect(): this.#observabilitySocketIOSubscriber not instance of ObservabilitySocketIOSubscriber`));
+          __privateGet(this, _logger).debug(chalk$1.cyan(__privateGet(this, _observabilitySocketIOSubscriber)));
+          __privateGet(this, _tinyEmitter).emit("connected");
+        }
+      } catch (error) {
+        __privateGet(this, _logger).error(chalk$1.red(`SocketIOConnect(): Error: [${error}]`));
+        __privateGet(this, _tinyEmitter).emit("connected");
+      } finally {
+        __privateGet(this, _logger).debug(chalk$1.cyan(`SocketIOConnect(): Ended`));
+      }
+    });
+    __privateAdd(this, _SetupObservabilitySubscriber, () => {
+      __privateGet(this, _logger).debug(`ObservabilitySubscriberManager:SetupObservabilitySubscriber(): consumeInstrumentationMode: [${__privateGet(this, _options3).consumeInstrumentationMode}]`);
+      switch (__privateGet(this, _options3).consumeInstrumentationMode) {
+        case "PROXY":
+          __privateSet(this, _observabilitySocketIOSubscriber, new ObservabilitySocketIOSubscriber({
+            socket: __privateGet(this, _socket),
+            keepAlive: 2500,
+            //@@
+            logger: __privateGet(this, _logger)
+          }));
+          break;
+        case "REST":
+          __privateSet(this, _observabilitySocketIOSubscriber, new ObservabilityRESTAPISubscriber({
+            keepAlive: 1e3,
+            //@@
+            urlBase: `${__privateGet(this, _options3).instrumentManagerEndpoint}:${__privateGet(this, _options3).instrumentManagerPort}${__privateGet(this, _options3).instrumentManagerAPIRoot}`,
+            logger: __privateGet(this, _logger)
+          }));
+          break;
+        default:
+          __privateGet(this, _logger).error(chalk$1.red(`ObservabilitySubscriberManager:SetupObservabilitySubscriber(): Unsupported consumeInstrumentationMode mode: [${__privateGet(this, _options3).consumeInstrumentationMode}]`));
+          return;
+      }
+      __privateSet(this, _observabilitySubscriptionManager, new ObservabilitySubscriptionManager({
+        logger: __privateGet(this, _logger),
+        maxLogLength: 100
+      }));
+      __privateGet(this, _observabilitySubscriptionManager).observabilitySocketIOSubscriber = __privateGet(this, _observabilitySocketIOSubscriber);
+    });
+    __publicField(this, "Start", () => {
+      return new Promise((resolve) => {
+        if (__privateGet(this, _options3).consumeInstrumentationMode.localeCompare("PROXY") === 0) {
+          const onConnected = () => {
+            __privateGet(this, _tinyEmitter).off("connected", onConnected);
+            __privateGet(this, _logger).debug(chalk$1.cyan(`ObservabilitySubscriberManager:Start() connected`));
+            resolve(true);
+          };
+          __privateGet(this, _tinyEmitter).on("connected", onConnected);
+          __privateGet(this, _SetupSocketIO).call(this);
+        } else {
+          __privateGet(this, _SetupObservabilitySubscriber).call(this);
+          resolve(true);
+        }
+      });
+    });
+    __privateAdd(this, _SetupSocketIO, () => {
+      const socketUtils = new SocketIoClientHelper({});
+      __privateSet(this, _socket, socketUtils.SetupClientSideSocket(
+        "STSVueTilsTester",
+        `${__privateGet(this, _options3).instrumentManagerEndpoint}:${__privateGet(this, _options3).instrumentManagerPort}/${SOCKET_NAMESPACE}/`,
+        __privateGet(this, _SocketConnect),
+        // Connected call back
+        __privateGet(this, _ProcessSocketEvents),
+        // Custom Events
+        __privateGet(this, _ProcessSocketError)
+        // Handle socket errors
+      ));
+    });
+    __privateAdd(this, _SocketConnect, (socket) => {
+      defaultLogger.debug(chalk$1.magenta(`SocketIOConnect(): Socket ID: [${socket.id}]`));
+      if (__privateGet(this, _observabilitySubscriptionManager) === null) {
+        __privateGet(this, _SetupObservabilitySubscriber).call(this);
+      }
+      __privateGet(this, _SocketIOConnect).call(this, socket);
+    });
+    __privateAdd(this, _ProcessSocketError, (error) => {
+      defaultLogger.error(chalk$1.red(`SetupClientSideSocket error callback: [${error}]`));
+    });
+    __privateAdd(this, _ProcessSocketEvents, (socket) => {
+    });
+    __privateSet(this, _id, v4());
+    __privateSet(this, _options3, options);
+    __privateSet(this, _modelId, options.modelId);
+    __privateSet(this, _logger, defaultLogger);
+    __privateSet(this, _store2, ModelStore());
+    __privateSet(this, _tinyEmitter, new TinyEmitter());
+    if (!__privateGet(this, _options3).consumeInstrumentationMode) {
+      __privateGet(this, _options3).consumeInstrumentationMode = "PROXY";
+    }
+  }
+  get id() {
+    return __privateGet(this, _id);
+  }
+  UpdateModelCursor(subscriptions) {
+    var _a;
+    __privateGet(this, _logger).debug(chalk$1.yellow(`UpdateModelCursor`));
+    (_a = __privateGet(this, _observabilitySubscriptionManager)) == null ? void 0 : _a.Stop();
+    __privateSet(this, _state, "stopped");
+    setTimeout(() => {
+      if (__privateGet(this, _observabilitySubscriptionManager)) {
+        __privateGet(this, _observabilitySubscriptionManager).subscriptions = subscriptions;
+        __privateGet(this, _observabilitySubscriptionManager).Start();
+      } else {
+        __privateGet(this, _logger).debug(chalk$1.yellow(`UpdateModelCursor(): Could not update subscriptions, this.#observabilitySubscriptionManager not set`));
+      }
+      __privateSet(this, _state, "started");
+    }, 0);
+  }
+  TransformSubscriptionPayloadCallback(subscriptionPayload) {
+    try {
+      if (__privateGet(this, _observabilitySubscriptionManager)) {
+        __privateGet(this, _observabilitySubscriptionManager).TransformSubscriptionPayloadCallback(subscriptionPayload, false);
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllAgentsCombined) === 0) {
+          const agentModel = __privateGet(this, _observabilitySubscriptionManager).agentModel;
+          __privateGet(this, _store2).UpdateAgentModel(__privateGet(this, _modelId), agentModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllServicesCombined) === 0) {
+          const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+          __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.Services) === 0) {
+          const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+          __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstances) === 0) {
+          const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+          __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstance) === 0) {
+          const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+          __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+        }
+      } else {
+        __privateGet(this, _logger).error(`TransformSubscriptionPayloadCallback(): observabilitySubscriptionManager not set`);
+      }
+    } catch (error) {
+      __privateGet(this, _logger).error(`TransformSubscriptionPayloadCallback(): #modelId: [${__privateGet(this, _modelId)}], Error: [${error}]`);
+    }
+  }
+  Unsubscribe() {
+    var _a;
+    __privateGet(this, _logger).debug(chalk$1.cyan(`ObservabilitySubscriberManager:Unsubscribe()`));
+    __privateSet(this, _state, "stopped");
+    (_a = __privateGet(this, _observabilitySubscriptionManager)) == null ? void 0 : _a.Stop();
+    if (__privateGet(this, _options3).consumeInstrumentationMode.localeCompare("PROXY") === 0) {
+      setTimeout(() => {
+        var _a2;
+        __privateGet(this, _logger).debug(chalk$1.cyan(`ObservabilitySubscriberManager:Unsubscribe() socket.disconnect`));
+        (_a2 = __privateGet(this, _socket)) == null ? void 0 : _a2.disconnect();
+        __privateSet(this, _socket, null);
+      }, 1e3);
+    }
+  }
+}
+_socket = new WeakMap();
+_observabilitySocketIOSubscriber = new WeakMap();
+_logger = new WeakMap();
+_observabilitySubscriptionManager = new WeakMap();
+_store2 = new WeakMap();
+_state = new WeakMap();
+_modelId = new WeakMap();
+_options3 = new WeakMap();
+_tinyEmitter = new WeakMap();
+_id = new WeakMap();
+_SocketIOConnect = new WeakMap();
+_SetupObservabilitySubscriber = new WeakMap();
+_SetupSocketIO = new WeakMap();
+_SocketConnect = new WeakMap();
+_ProcessSocketError = new WeakMap();
+_ProcessSocketEvents = new WeakMap();
+const _hoisted_1$1 = { class: "d-flex flex-wrap justify-space-between" };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "UXModelNavigator",
+  props: {
+    modelId: {}
+  },
+  setup(__props, { expose: __expose }) {
+    chalk$1.level = 3;
+    const props = __props;
+    const store = ModelStore();
+    let observabilitySubscriberManager = null;
+    const TransformSubscriptionPayloadCallback = (subscriptionPayload) => {
+      observabilitySubscriberManager == null ? void 0 : observabilitySubscriberManager.TransformSubscriptionPayloadCallback(subscriptionPayload);
+    };
+    let rootLevelSubscriptions = [{
+      subscriptionKey: {
+        id: v4(),
+        topic: SubscriptionTopic.AllServicesCombined
+      },
+      cb: TransformSubscriptionPayloadCallback
+    }, {
+      subscriptionKey: {
+        id: v4(),
+        topic: SubscriptionTopic.AllAgentsCombined
+      },
+      cb: TransformSubscriptionPayloadCallback
+    }];
+    const ServicesSubscriptions = [{
+      subscriptionKey: {
+        id: v4(),
+        topic: SubscriptionTopic.Services
+      },
+      cb: TransformSubscriptionPayloadCallback
+    }];
+    const GetServiceInstancesSubscriptions = (serviceId) => {
+      return [{
+        subscriptionKey: {
+          id: v4(),
+          topic: SubscriptionTopic.ServiceInstances,
+          key: serviceId
+        },
+        cb: TransformSubscriptionPayloadCallback
+      }];
+    };
+    const GetServiceInstanceSubscriptions = (serviceId, serviceInstanceId) => {
+      return [{
+        subscriptionKey: {
+          id: v4(),
+          topic: SubscriptionTopic.ServiceInstance,
+          key: serviceId,
+          subkey: serviceInstanceId
+        },
+        cb: TransformSubscriptionPayloadCallback
+      }];
+    };
+    let navSubscriptions = rootLevelSubscriptions;
+    let navigationSubscriptions = {
+      subscriptions: [],
+      currentSubscriptions: null
+    };
+    let obj = reactive(navigationSubscriptions);
+    const getPathString = (sub2) => {
+      if (sub2.subscriptionKey.key && sub2.subscriptionKey.subkey) {
+        return `${sub2.subscriptionKey.topic}[${sub2.subscriptionKey.key}/${sub2.subscriptionKey.subkey}]`;
+      }
+      if (sub2.subscriptionKey.key) {
+        return `${sub2.subscriptionKey.topic}[${sub2.subscriptionKey.key}]`;
+      }
+      return `${sub2.subscriptionKey.topic}`;
+    };
+    const navigationPath = computed(() => {
+      let pathString = "";
+      let sep = "";
+      obj.subscriptions.forEach((s) => {
+        pathString += sep + getPathString(s[0]);
+        sep = "/";
+      });
+      if (obj.currentSubscriptions) {
+        return pathString + sep + getPathString(obj.currentSubscriptions[0]);
+      }
+      return pathString;
+    });
+    const BackDisabled = computed(() => {
+      return obj.subscriptions.length < 1;
+    });
+    const modelNode = reactive({
+      node: {}
+    });
+    computed({
+      get: () => modelNode.node,
+      set: (val) => {
+        modelNode.node = val;
+      }
+    });
+    const clicked = function(id) {
+      var _a, _b;
+      if (store._models[props.modelId]) {
+        if (store._models[props.modelId].serviceModelSubscriptionKey) {
+          switch ((_a = store._models[props.modelId].serviceModelSubscriptionKey) == null ? void 0 : _a.topic) {
+            case SubscriptionTopic.AllServicesCombined:
+              navigate(ServicesSubscriptions);
+              break;
+            case SubscriptionTopic.Services:
+              navigate(GetServiceInstancesSubscriptions(id));
+              break;
+            case SubscriptionTopic.ServiceInstances:
+              navigate(GetServiceInstanceSubscriptions((_b = store._models[props.modelId].serviceModelSubscriptionKey) == null ? void 0 : _b.key, id));
+              break;
+          }
+        }
+      }
+    };
+    const navigate = function(subscriptions) {
+      obj.subscriptions.push(navSubscriptions);
+      navSubscriptions = subscriptions;
+      obj.currentSubscriptions = subscriptions;
+      observabilitySubscriberManager == null ? void 0 : observabilitySubscriberManager.UpdateModelCursor(subscriptions);
+    };
+    const GoBack = function() {
+      if (obj.subscriptions.length > 0) {
+        let key = obj.subscriptions.pop();
+        if (key) {
+          navSubscriptions = key;
+          obj.currentSubscriptions = key;
+          observabilitySubscriberManager == null ? void 0 : observabilitySubscriberManager.UpdateModelCursor(navSubscriptions);
+        }
+      }
+    };
+    const TopLevel = function() {
+      obj.subscriptions = [];
+      navSubscriptions = rootLevelSubscriptions;
+      obj.currentSubscriptions = rootLevelSubscriptions;
+      observabilitySubscriberManager == null ? void 0 : observabilitySubscriberManager.UpdateModelCursor(navSubscriptions);
+    };
+    onMounted(() => {
+      console.log(`UXModelNavigator: onMounted()`);
+    });
+    onBeforeUnmount(() => {
+      console.log(`UXModelNavigator: onBeforeUnmount()`);
+      Stop();
+    });
+    let tab = ref(null);
+    const Stop = () => {
+      store.UpdateSate(props.modelId, _estate.STOPPING);
+      if (observabilitySubscriberManager) {
+        observabilitySubscriberManager.Unsubscribe();
+        store.UpdateObservabilitySubscriberManager(observabilitySubscriberManager.id, null);
+      }
+      observabilitySubscriberManager = null;
+      store.UpdateSate(props.modelId, _estate.IDLE);
+    };
+    const Start = async (options) => {
+      store.UpdateSate(props.modelId, _estate.STARTING);
+      observabilitySubscriberManager = new ObservabilitySubscriberManager(options);
+      store.UpdateObservabilitySubscriberManager(observabilitySubscriberManager.id, observabilitySubscriberManager);
+      await observabilitySubscriberManager.Start();
+      obj.currentSubscriptions = rootLevelSubscriptions;
+      observabilitySubscriberManager == null ? void 0 : observabilitySubscriberManager.UpdateModelCursor(rootLevelSubscriptions);
+      store.UpdateSate(props.modelId, _estate.STARTED);
+    };
+    __expose({
+      Start,
+      Stop
+    });
+    return (_ctx, _cache) => {
+      const _component_v_tab = resolveComponent("v-tab");
+      const _component_v_tabs = resolveComponent("v-tabs");
+      const _component_v_window_item = resolveComponent("v-window-item");
+      const _component_v_window = resolveComponent("v-window");
+      const _component_v_col = resolveComponent("v-col");
+      const _component_v_row = resolveComponent("v-row");
+      const _component_v_icon = resolveComponent("v-icon");
+      const _component_v_btn = resolveComponent("v-btn");
+      const _component_v_sheet = resolveComponent("v-sheet");
+      return openBlock(), createBlock(_component_v_sheet, {
+        theme: "light",
+        rounded: "lg",
+        class: "ma-4 mr-0 pa-2",
+        elevation: 10
+      }, {
+        default: withCtx(() => [
+          createTextVNode(" UXModelNavigator - Path: " + toDisplayString(navigationPath.value) + " ", 1),
+          createVNode(_component_v_row, { "no-gutters": "" }, {
+            default: withCtx(() => [
+              createVNode(_component_v_col, null, {
+                default: withCtx(() => [
+                  createVNode(_component_v_tabs, {
+                    modelValue: unref(tab),
+                    "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => isRef(tab) ? tab.value = $event : tab = $event),
+                    "background-color": "primary"
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_v_tab, { value: "summary" }, {
+                        default: withCtx(() => [
+                          createTextVNode(" Summary ")
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_v_tab, { value: "detailed" }, {
+                        default: withCtx(() => [
+                          createTextVNode(" Detailed ")
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"]),
+                  createVNode(_component_v_window, {
+                    modelValue: unref(tab),
+                    "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(tab) ? tab.value = $event : tab = $event)
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(_component_v_window_item, { value: "summary" }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$2, {
+                            "model-id": props.modelId,
+                            nodeid: "_",
+                            "small-mode": true,
+                            onMyclick: clicked
+                          }, null, 8, ["model-id"])
+                        ]),
+                        _: 1
+                      }),
+                      createVNode(_component_v_window_item, { value: "detailed" }, {
+                        default: withCtx(() => [
+                          createVNode(_sfc_main$2, {
+                            "model-id": props.modelId,
+                            nodeid: "_",
+                            "small-mode": false,
+                            onMyclick: clicked
+                          }, null, 8, ["model-id"])
+                        ]),
+                        _: 1
+                      })
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"])
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }),
+          createElementVNode("div", _hoisted_1$1, [
+            createVNode(_component_v_btn, {
+              color: "secondary",
+              class: "ma-1",
+              onClick: TopLevel
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" Top Level"),
+                createVNode(_component_v_icon, {
+                  end: "",
+                  icon: "mdi-arrow-up-circle"
+                })
+              ]),
+              _: 1
+            }),
+            createVNode(_component_v_btn, {
+              class: "ma-1",
+              color: "secondary",
+              disabled: BackDisabled.value,
+              onClick: GoBack
+            }, {
+              default: withCtx(() => [
+                createTextVNode(" Go Back"),
+                createVNode(_component_v_icon, {
+                  end: "",
+                  icon: "mdi-arrow-left-circle"
+                })
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
 const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", null, " UXTestForm ", -1);
 const _hoisted_2 = { class: "text-wrap" };
 const _hoisted_3 = { class: "ml-0 text-caption" };
@@ -11148,15 +11681,15 @@ export {
   STSWorkerManagerPluginKey,
   TelemetryStore,
   URI_BASE_VUEUTILS,
-  _sfc_main$8 as UXBarChart,
-  _sfc_main$7 as UXLineChart,
+  _sfc_main$9 as UXBarChart,
+  _sfc_main$8 as UXLineChart,
   UXModelInstrumentAgentCommon,
   UXModelInstrumentServiceCommon,
   UXModelInstrumentServiceSmall,
   _sfc_main$1 as UXModelNavigator,
-  _sfc_main$1 as UXModelNode,
-  _sfc_main$6 as UXMultiBarChart,
-  _sfc_main$5 as UXRadialChart,
+  _sfc_main$2 as UXModelNode,
+  _sfc_main$7 as UXMultiBarChart,
+  _sfc_main$6 as UXRadialChart,
   _sfc_main as UXTestForm,
   WorkerInstance,
   _estate,