@nsshunt/stsvueutils 1.2.32 → 1.2.34

package/dist/stsvueutils.umd.js

@@ -38,7 +38,7 @@ var __privateMethod = (obj, member, 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;
+  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;
   const STSStoragePluginKey = Symbol("storage");
   const STSEmitterPluginKey = Symbol("emitter");
   const STSWorkerManagerPluginKey = Symbol("workerManager");
@@ -2607,7 +2607,7 @@ var __privateMethod = (obj, member, method) => {
       }
     }
   });
-  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXBarChart",
     setup(__props, { expose: __expose }) {
       const VueApexCharts = vue.defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -2688,7 +2688,7 @@ var __privateMethod = (obj, member, method) => {
       };
     }
   });
-  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXLineChart",
     setup(__props, { expose: __expose }) {
       const VueApexCharts = vue.defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -2790,7 +2790,7 @@ var __privateMethod = (obj, member, method) => {
       };
     }
   });
-  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXMultiBarChart",
     props: {
       series: {},
@@ -2890,7 +2890,7 @@ var __privateMethod = (obj, member, method) => {
       };
     }
   });
-  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXRadialChart",
     props: {
       series: {},
@@ -9161,7 +9161,7 @@ var __privateMethod = (obj, member, method) => {
     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"
@@ -9202,7 +9202,7 @@ var __privateMethod = (obj, member, method) => {
   const _hoisted_27$2 = ["innerHTML"];
   const _hoisted_28$2 = { key: 1 };
   const _hoisted_29$1 = ["innerHTML"];
-  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXModelInstrumentAgentCommon",
     props: {
       modelId: {},
@@ -9352,7 +9352,7 @@ var __privateMethod = (obj, member, method) => {
                     }),
                     vue.createVNode(_component_v_col, { md: "10" }, {
                       default: vue.withCtx(() => [
-                        vue.createElementVNode("span", _hoisted_1$4, vue.toDisplayString(round2Places(_ctx.instrumentData[`${vue.unref(stsobservability.Gauge).DURATION_GAUGE}`].val)), 1),
+                        vue.createElementVNode("span", _hoisted_1$5, vue.toDisplayString(round2Places(_ctx.instrumentData[`${vue.unref(stsobservability.Gauge).DURATION_GAUGE}`].val)), 1),
                         _ctx.isLeafNode === false ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2$4, vue.toDisplayString(round2PlacesArray(_ctx.instrumentData[`${vue.unref(stsobservability.Gauge).DURATION_GAUGE}`].percentile)), 1)) : vue.createCommentVNode("", true)
                       ]),
                       _: 1
@@ -9431,7 +9431,7 @@ var __privateMethod = (obj, member, method) => {
                     vue.createVNode(_component_v_col, { md: "12" }, {
                       default: vue.withCtx(() => [
                         vue.createElementVNode("div", null, [
-                          vue.createVNode(_sfc_main$8, {
+                          vue.createVNode(_sfc_main$9, {
                             ref_key: "barChartEx",
                             ref: barChartEx
                           }, null, 512)
@@ -9611,8 +9611,8 @@ var __privateMethod = (obj, member, method) => {
     }
     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"
@@ -9667,7 +9667,7 @@ var __privateMethod = (obj, member, method) => {
   const _hoisted_41 = ["innerHTML"];
   const _hoisted_42 = { key: 1 };
   const _hoisted_43 = ["innerHTML"];
-  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXModelInstrumentServiceCommon",
     props: {
       modelId: {},
@@ -9813,7 +9813,7 @@ var __privateMethod = (obj, member, method) => {
           onClick: _cache[0] || (_cache[0] = ($event) => clicked(_ctx.nodeid))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$3, [
+            vue.createElementVNode("div", _hoisted_1$4, [
               vue.createTextVNode(vue.toDisplayString(friendlyTitle(_ctx.title)) + " ", 1),
               _ctx.title.length > 30 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$3, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
@@ -9860,7 +9860,7 @@ var __privateMethod = (obj, member, method) => {
                 }, {
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
-                      vue.createVNode(_sfc_main$7, {
+                      vue.createVNode(_sfc_main$8, {
                         ref_key: "lineChartEx",
                         ref: lineChartEx
                       }, null, 512)
@@ -9992,7 +9992,7 @@ var __privateMethod = (obj, member, method) => {
                 vue.createVNode(_component_v_col, { md: "12" }, {
                   default: vue.withCtx(() => [
                     vue.createElementVNode("div", null, [
-                      vue.createVNode(_sfc_main$8, {
+                      vue.createVNode(_sfc_main$9, {
                         ref_key: "barChartEx",
                         ref: barChartEx
                       }, null, 512)
@@ -10263,9 +10263,9 @@ var __privateMethod = (obj, member, method) => {
       };
     }
   });
-  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) => (vue.pushScopeId("data-v-3eab32be"), n = n(), vue.popScopeId(), n);
-  const _hoisted_1$2 = { class: "ststitle" };
+  const _hoisted_1$3 = { class: "ststitle" };
   const _hoisted_2$2 = {
     key: 0,
     class: "stssubtitle"
@@ -10323,7 +10323,7 @@ var __privateMethod = (obj, member, method) => {
     class: "stsinfo",
     style: { "text-align": "right", "padding-left": "15px" }
   };
-  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXModelInstrumentServiceSmall",
     props: {
       modelId: {},
@@ -10585,7 +10585,7 @@ var __privateMethod = (obj, member, method) => {
           onClick: _cache[0] || (_cache[0] = ($event) => clicked(_ctx.nodeid))
         }, {
           default: vue.withCtx(() => [
-            vue.createElementVNode("div", _hoisted_1$2, [
+            vue.createElementVNode("div", _hoisted_1$3, [
               vue.createTextVNode(vue.toDisplayString(friendlyTitle(_ctx.title)) + " ", 1),
               _ctx.title.length > 30 ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2$2, [
                 vue.createTextVNode(vue.toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
@@ -10836,10 +10836,10 @@ var __privateMethod = (obj, member, method) => {
       };
     }
   });
-  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__ */ vue.defineComponent({
+  const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
     __name: "UXModelNode",
     props: {
       modelId: {},
@@ -10894,11 +10894,544 @@ var __privateMethod = (obj, member, method) => {
                 onMyclick: navigate
               }, null, 40, ["model-id", "nodeid", "contextdata", "instrumentdata", "title"]))
             ])) : vue.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 stsobservability.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 stsobservability.ObservabilitySocketIOSubscriber({
+              socket: __privateGet(this, _socket),
+              keepAlive: 2500,
+              //@@
+              logger: __privateGet(this, _logger)
+            }));
+            break;
+          case "REST":
+            __privateSet(this, _observabilitySocketIOSubscriber, new stsobservability.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 stsobservability.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 stsobservability.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) => {
+        stsutils.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) => {
+        stsutils.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, stsutils.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(stsobservability.SubscriptionTopic.AllAgentsCombined) === 0) {
+            const agentModel = __privateGet(this, _observabilitySubscriptionManager).agentModel;
+            __privateGet(this, _store2).UpdateAgentModel(__privateGet(this, _modelId), agentModel, subscriptionPayload.subscriptionKey);
+          }
+          if (subscriptionPayload.subscriptionKey.topic.localeCompare(stsobservability.SubscriptionTopic.AllServicesCombined) === 0) {
+            const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+            __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+          }
+          if (subscriptionPayload.subscriptionKey.topic.localeCompare(stsobservability.SubscriptionTopic.Services) === 0) {
+            const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+            __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+          }
+          if (subscriptionPayload.subscriptionKey.topic.localeCompare(stsobservability.SubscriptionTopic.ServiceInstances) === 0) {
+            const serviceModel = __privateGet(this, _observabilitySubscriptionManager).serviceModel;
+            __privateGet(this, _store2).UpdateServiceModel(__privateGet(this, _modelId), serviceModel, subscriptionPayload.subscriptionKey);
+          }
+          if (subscriptionPayload.subscriptionKey.topic.localeCompare(stsobservability.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__ */ vue.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: stsobservability.SubscriptionTopic.AllServicesCombined
+        },
+        cb: TransformSubscriptionPayloadCallback
+      }, {
+        subscriptionKey: {
+          id: v4(),
+          topic: stsobservability.SubscriptionTopic.AllAgentsCombined
+        },
+        cb: TransformSubscriptionPayloadCallback
+      }];
+      const ServicesSubscriptions = [{
+        subscriptionKey: {
+          id: v4(),
+          topic: stsobservability.SubscriptionTopic.Services
+        },
+        cb: TransformSubscriptionPayloadCallback
+      }];
+      const GetServiceInstancesSubscriptions = (serviceId) => {
+        return [{
+          subscriptionKey: {
+            id: v4(),
+            topic: stsobservability.SubscriptionTopic.ServiceInstances,
+            key: serviceId
+          },
+          cb: TransformSubscriptionPayloadCallback
+        }];
+      };
+      const GetServiceInstanceSubscriptions = (serviceId, serviceInstanceId) => {
+        return [{
+          subscriptionKey: {
+            id: v4(),
+            topic: stsobservability.SubscriptionTopic.ServiceInstance,
+            key: serviceId,
+            subkey: serviceInstanceId
+          },
+          cb: TransformSubscriptionPayloadCallback
+        }];
+      };
+      let navSubscriptions = rootLevelSubscriptions;
+      let navigationSubscriptions = {
+        subscriptions: [],
+        currentSubscriptions: null
+      };
+      let obj = vue.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 = vue.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 = vue.computed(() => {
+        return obj.subscriptions.length < 1;
+      });
+      const modelNode = vue.reactive({
+        node: {}
+      });
+      vue.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 stsobservability.SubscriptionTopic.AllServicesCombined:
+                navigate(ServicesSubscriptions);
+                break;
+              case stsobservability.SubscriptionTopic.Services:
+                navigate(GetServiceInstancesSubscriptions(id));
+                break;
+              case stsobservability.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);
+      };
+      vue.onMounted(() => {
+        console.log(`UXModelNavigator: onMounted()`);
+      });
+      vue.onBeforeUnmount(() => {
+        console.log(`UXModelNavigator: onBeforeUnmount()`);
+        Stop();
+      });
+      let tab = vue.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 = vue.resolveComponent("v-tab");
+        const _component_v_tabs = vue.resolveComponent("v-tabs");
+        const _component_v_window_item = vue.resolveComponent("v-window-item");
+        const _component_v_window = vue.resolveComponent("v-window");
+        const _component_v_col = vue.resolveComponent("v-col");
+        const _component_v_row = vue.resolveComponent("v-row");
+        const _component_v_icon = vue.resolveComponent("v-icon");
+        const _component_v_btn = vue.resolveComponent("v-btn");
+        const _component_v_sheet = vue.resolveComponent("v-sheet");
+        return vue.openBlock(), vue.createBlock(_component_v_sheet, {
+          theme: "light",
+          rounded: "lg",
+          class: "ma-4 mr-0 pa-2",
+          elevation: 10
+        }, {
+          default: vue.withCtx(() => [
+            vue.createTextVNode(" UXModelNavigator - Path: " + vue.toDisplayString(navigationPath.value) + " ", 1),
+            vue.createVNode(_component_v_row, { "no-gutters": "" }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_v_col, null, {
+                  default: vue.withCtx(() => [
+                    vue.createVNode(_component_v_tabs, {
+                      modelValue: vue.unref(tab),
+                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => vue.isRef(tab) ? tab.value = $event : tab = $event),
+                      "background-color": "primary"
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_v_tab, { value: "summary" }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(" Summary ")
+                          ]),
+                          _: 1
+                        }),
+                        vue.createVNode(_component_v_tab, { value: "detailed" }, {
+                          default: vue.withCtx(() => [
+                            vue.createTextVNode(" Detailed ")
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"]),
+                    vue.createVNode(_component_v_window, {
+                      modelValue: vue.unref(tab),
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => vue.isRef(tab) ? tab.value = $event : tab = $event)
+                    }, {
+                      default: vue.withCtx(() => [
+                        vue.createVNode(_component_v_window_item, { value: "summary" }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_sfc_main$2, {
+                              "model-id": props.modelId,
+                              nodeid: "_",
+                              "small-mode": true,
+                              onMyclick: clicked
+                            }, null, 8, ["model-id"])
+                          ]),
+                          _: 1
+                        }),
+                        vue.createVNode(_component_v_window_item, { value: "detailed" }, {
+                          default: vue.withCtx(() => [
+                            vue.createVNode(_sfc_main$2, {
+                              "model-id": props.modelId,
+                              nodeid: "_",
+                              "small-mode": false,
+                              onMyclick: clicked
+                            }, null, 8, ["model-id"])
+                          ]),
+                          _: 1
+                        })
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue"])
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }),
+            vue.createElementVNode("div", _hoisted_1$1, [
+              vue.createVNode(_component_v_btn, {
+                color: "secondary",
+                class: "ma-1",
+                onClick: TopLevel
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(" Top Level"),
+                  vue.createVNode(_component_v_icon, {
+                    end: "",
+                    icon: "mdi-arrow-up-circle"
+                  })
+                ]),
+                _: 1
+              }),
+              vue.createVNode(_component_v_btn, {
+                class: "ma-1",
+                color: "secondary",
+                disabled: BackDisabled.value,
+                onClick: GoBack
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createTextVNode(" Go Back"),
+                  vue.createVNode(_component_v_icon, {
+                    end: "",
+                    icon: "mdi-arrow-left-circle"
+                  })
+                ]),
+                _: 1
+              }, 8, ["disabled"])
+            ])
+          ]),
+          _: 1
+        });
+      };
+    }
+  });
   const _hoisted_1 = /* @__PURE__ */ vue.createElementVNode("div", null, " UXTestForm ", -1);
   const _hoisted_2 = { class: "text-wrap" };
   const _hoisted_3 = { class: "ml-0 text-caption" };
@@ -11145,15 +11678,15 @@ var __privateMethod = (obj, member, method) => {
   exports2.STSWorkerManagerPluginKey = STSWorkerManagerPluginKey;
   exports2.TelemetryStore = TelemetryStore;
   exports2.URI_BASE_VUEUTILS = URI_BASE_VUEUTILS;
-  exports2.UXBarChart = _sfc_main$8;
-  exports2.UXLineChart = _sfc_main$7;
+  exports2.UXBarChart = _sfc_main$9;
+  exports2.UXLineChart = _sfc_main$8;
   exports2.UXModelInstrumentAgentCommon = UXModelInstrumentAgentCommon;
   exports2.UXModelInstrumentServiceCommon = UXModelInstrumentServiceCommon;
   exports2.UXModelInstrumentServiceSmall = UXModelInstrumentServiceSmall;
   exports2.UXModelNavigator = _sfc_main$1;
-  exports2.UXModelNode = _sfc_main$1;
-  exports2.UXMultiBarChart = _sfc_main$6;
-  exports2.UXRadialChart = _sfc_main$5;
+  exports2.UXModelNode = _sfc_main$2;
+  exports2.UXMultiBarChart = _sfc_main$7;
+  exports2.UXRadialChart = _sfc_main$6;
   exports2.UXTestForm = _sfc_main;
   exports2.WorkerInstance = WorkerInstance;
   exports2._estate = _estate;