@nsshunt/stsuxvue 1.0.74 → 1.0.75

package/dist/stsuxvue.mjs

@@ -1,7 +1,7 @@
 import { defineStore } from "pinia";
 import _cloneDeep from "lodash.clonedeep";
 import { defineComponent, defineAsyncComponent, ref, createElementBlock, openBlock, createVNode, unref, reactive, computed, watch, resolveComponent, createBlock, withCtx, createTextVNode, toDisplayString, createElementVNode, createCommentVNode, Fragment, renderList, onMounted, onBeforeUnmount, resolveDynamicComponent, isRef } from "vue";
-import { Gauge, ObservabilitySocketIOSubscriber, runStates, ObservabilityRESTAPISubscriber, ObservabilitySubscriptionManager, SubscriptionTopic } from "@nsshunt/stsobservability";
+import { Gauge, ObservabilitySubscriptionManager, SubscriptionTopic } from "@nsshunt/stsobservability";
 import { defaultLogger } from "@nsshunt/stsutils";
 import { io } from "socket.io-client";
 var _estate = /* @__PURE__ */ ((_estate2) => {
@@ -18,8 +18,8 @@ const ModelStore = defineStore("__sts__ModelStore", {
   state: () => {
     return {
       _models: {},
-      _state: {},
-      _observabilitySubscriberManager: {}
+      _state: {}
+      //_observabilitySubscriberManager: { }
     };
   },
   // Getters
@@ -91,13 +91,15 @@ const ModelStore = defineStore("__sts__ModelStore", {
     UpdateSate(modelId, newSate) {
       this._state[modelId] = newSate;
     },
-    UpdateObservabilitySubscriberManager(modelId, observabilitySubscriberManager) {
-      if (observabilitySubscriberManager === null) {
-        delete this._observabilitySubscriberManager[modelId];
-      } else {
-        this._observabilitySubscriberManager[modelId] = observabilitySubscriberManager;
-      }
+    /*
+    UpdateObservabilitySubscriberManager(modelId: string, observabilitySubscriberManager: ObservabilitySubscriberManager | null): void {
+        if (observabilitySubscriberManager === null) {
+            delete this._observabilitySubscriberManager[modelId];
+        } else {
+            this._observabilitySubscriberManager[modelId] = observabilitySubscriberManager;
+        }
     },
+    */
     SetupNewModelId(modelId) {
       this._models[modelId] = {
         serviceModel: {},
@@ -9990,11 +9992,11 @@ function v4(options, buf, offset) {
   }
   return _v4(options);
 }
-var tinyEmitter$1 = { exports: {} };
-var hasRequiredTinyEmitter$1;
-function requireTinyEmitter$1() {
-  if (hasRequiredTinyEmitter$1) return tinyEmitter$1.exports;
-  hasRequiredTinyEmitter$1 = 1;
+var tinyEmitter = { exports: {} };
+var hasRequiredTinyEmitter;
+function requireTinyEmitter() {
+  if (hasRequiredTinyEmitter) return tinyEmitter.exports;
+  hasRequiredTinyEmitter = 1;
   function E() {
   }
   E.prototype = {
@@ -10039,13 +10041,13 @@ function requireTinyEmitter$1() {
       return this;
     }
   };
-  tinyEmitter$1.exports = E;
-  tinyEmitter$1.exports.TinyEmitter = E;
-  return tinyEmitter$1.exports;
+  tinyEmitter.exports = E;
+  tinyEmitter.exports.TinyEmitter = E;
+  return tinyEmitter.exports;
 }
-var tinyEmitterExports$1 = requireTinyEmitter$1();
+var tinyEmitterExports = requireTinyEmitter();
 const isNode = Object.prototype.toString.call(typeof process !== "undefined" ? process : 0) === "[object process]";
-class SocketIoClient extends tinyEmitterExports$1.TinyEmitter {
+class SocketIoClient extends tinyEmitterExports.TinyEmitter {
   #agentManager;
   #logger;
   #name;
@@ -10129,14 +10131,18 @@ class SocketIoClient extends tinyEmitterExports$1.TinyEmitter {
     this.#EstablishSocketConnect();
     return this;
   }
+  // Engine Errors / Events
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  EngineError(error) {
+  }
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ConnectCallBack(socket) {
+  EngineReconnectError(error) {
   }
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  SocketEventsCallBack(socket) {
+  EngineConnectError(error) {
   }
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  ErrorCallBack(error) {
+  EngineReconnect(attempt) {
   }
   /*
   emit<Ev extends EventNames<ClientToServerEvents>>(ev: Ev, ...args: EventParams<ClientToServerEvents, Ev>): Socket<ServerToClientEvents, ClientToServerEvents> {
@@ -10189,31 +10195,36 @@ class SocketIoClient extends tinyEmitterExports$1.TinyEmitter {
     this.#socket = io(this.#address, socketOptions);
     this.#socket.io.on("error", (err) => {
       this.LogErrorMessage(`socketDetail.socket.io.on('error'): [${err}] Address: [${this.#address}]`);
+      this.EngineError(err);
     });
     this.#socket.io.on("reconnect_error", (err) => {
       this.LogErrorMessage(`socketDetail.socket.io.on('reconnect_error'): [${err}] Address: [${this.#address}]`);
+      this.EngineReconnectError(err);
     });
     this.#socket.on("connect_error", (err) => {
       this.LogErrorMessage(`socketDetail.socket.on('connect_error'): [${err}] Address: [${this.#address}]`);
+      this.EngineConnectError(err);
     });
     this.#socket.io.on("reconnect", (attempt) => {
       this.LogErrorMessage(`socketDetail.socket.io.on('reconnect'): Number: [${attempt}] Address: [${this.#address}]`);
+      this.EngineReconnect(attempt);
     });
     this.#socket.on("connect", () => {
       if (this.#socket) {
         this.LogDebugMessage(`Socket: [${this.#socket.id}]: connected, Address: [${this.#address}]`);
         setTimeout(() => {
-          this.ConnectCallBack(this.#socket);
+          this.SocketConnect(this.#socket);
         }, 0);
-        this.SocketEventsCallBack(this.#socket);
+        this.SetupSocketEvents(this.#socket);
       } else {
         const errorMessage = "Could not get socket object from socket.io, Address: [${socketDetail.address}]";
         this.LogErrorMessage(errorMessage);
-        this.ErrorCallBack(new Error(errorMessage));
+        this.SocketConnectError(new Error(errorMessage));
       }
     });
     this.#socket.on("disconnect", (reason) => {
       this.LogDebugMessage("socket disconnect: " + reason);
+      this.SocketDisconnect(reason);
       switch (reason) {
         case "io server disconnect":
           {
@@ -10258,81 +10269,20 @@ class SocketIoClient extends tinyEmitterExports$1.TinyEmitter {
     });
   }
 }
-var tinyEmitter = { exports: {} };
-var hasRequiredTinyEmitter;
-function requireTinyEmitter() {
-  if (hasRequiredTinyEmitter) return tinyEmitter.exports;
-  hasRequiredTinyEmitter = 1;
-  function E() {
-  }
-  E.prototype = {
-    on: function(name, callback, ctx) {
-      var e = this.e || (this.e = {});
-      (e[name] || (e[name] = [])).push({
-        fn: callback,
-        ctx
-      });
-      return this;
-    },
-    once: function(name, callback, ctx) {
-      var self = this;
-      function listener() {
-        self.off(name, listener);
-        callback.apply(ctx, arguments);
-      }
-      listener._ = callback;
-      return this.on(name, listener, ctx);
-    },
-    emit: function(name) {
-      var data = [].slice.call(arguments, 1);
-      var evtArr = ((this.e || (this.e = {}))[name] || []).slice();
-      var i = 0;
-      var len = evtArr.length;
-      for (i; i < len; i++) {
-        evtArr[i].fn.apply(evtArr[i].ctx, data);
-      }
-      return this;
-    },
-    off: function(name, callback) {
-      var e = this.e || (this.e = {});
-      var evts = e[name];
-      var liveEvents = [];
-      if (evts && callback) {
-        for (var i = 0, len = evts.length; i < len; i++) {
-          if (evts[i].fn !== callback && evts[i].fn._ !== callback)
-            liveEvents.push(evts[i]);
-        }
-      }
-      liveEvents.length ? e[name] = liveEvents : delete e[name];
-      return this;
-    }
-  };
-  tinyEmitter.exports = E;
-  tinyEmitter.exports.TinyEmitter = E;
-  return tinyEmitter.exports;
-}
-var tinyEmitterExports = requireTinyEmitter();
 const SOCKET_NAMESPACE = "stsinstrumentmanager/stsmonitor";
-class ObservabilitySubscriberManager extends SocketIoClient {
-  #socket = null;
-  #observabilitySocketIOSubscriber = null;
-  #observabilitySubscriptionManager = null;
-  #store;
-  #state = "init";
-  #modelId;
+class SocketClientSubscriber extends SocketIoClient {
   #options;
-  #tinyEmitter;
   #id;
+  #currentSubscriptions = [];
+  subscriptions = {};
   constructor(options) {
     super("STSVueTilsTester");
     this.#id = v4();
     this.#options = options;
-    this.#modelId = options.modelId;
-    this.#store = ModelStore();
-    this.#tinyEmitter = new tinyEmitterExports.TinyEmitter();
-    if (!this.#options.consumeInstrumentationMode) {
-      this.#options.consumeInstrumentationMode = "PROXY";
-    }
+    this.LogDebugMessage(chalk.cyan(`${this.logPrefix}Start()`));
+    const url = `${this.#options.instrumentManagerEndpoint}:${this.#options.instrumentManagerPort}/${SOCKET_NAMESPACE}/`;
+    this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SetupSocket() url: [${url}]`));
+    this.WithAddress(url).WithLogger(this.logger ?? defaultLogger).SetupSocket();
   }
   get id() {
     return this.#id;
@@ -10344,242 +10294,75 @@ class ObservabilitySubscriberManager extends SocketIoClient {
       return `stsuxvue:ObservabilitySubscriberManager:`;
     }
   }
-  #SocketIOConnect = (socket) => {
-    try {
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Starting`));
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): State: [${this.#state}]`));
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Current Model Subscriptions: [${JSON.stringify(this.#observabilitySubscriptionManager?.subscriptions)}]`));
-      if (this.#observabilitySocketIOSubscriber instanceof ObservabilitySocketIOSubscriber) {
-        const observabilitySocketIOSubscriber = this.#observabilitySocketIOSubscriber;
-        if (socket.id) {
-          if (observabilitySocketIOSubscriber.socket) {
-            const observabilitySocketIOSubscriberSocketId = observabilitySocketIOSubscriber.socket.id;
-            if (observabilitySocketIOSubscriberSocketId) {
-              if (socket.id.localeCompare(observabilitySocketIOSubscriberSocketId) === 0) {
-                this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Socket IDs are the same, Socket ID: [${observabilitySocketIOSubscriberSocketId}]`));
-              }
-            }
-          } else {
-            (this.logger ?? defaultLogger).warn(chalk.rgb(255, 165, 0)(`${this.logPrefix}SocketIOConnect(): observabilitySocketIOSubscriber.socket does not exist`));
-            (this.logger ?? defaultLogger).warn(chalk.rgb(255, 165, 0)(`${this.logPrefix}SocketIOConnect(): this should have been set when the initial subscription manager was created`));
-          }
-        }
-        if (this.#state.localeCompare("init") === 0) {
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): state = init`));
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): state = started`));
-          this.#state = "started";
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): tinyEmitter.emit('connected')`));
-          this.#tinyEmitter.emit("connected");
-        } else {
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Socket ids are different - update with new socket`));
-          if (observabilitySocketIOSubscriber.socket) {
-            this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect():  -> Current Socket ID: [${observabilitySocketIOSubscriber.socket.id}]`));
-          } else {
-            this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect():  -> Current Socket ID: [NONE - No current socket exists]`));
-          }
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect():  -> New (updated) Socket ID: [${socket.id}]`));
-          if (this.#observabilitySubscriptionManager) {
-            if (this.#observabilitySubscriptionManager.runState !== runStates.stopped) {
-              this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): observabilitySubscriptionManager.Stop()`));
-              this.#observabilitySubscriptionManager?.Stop();
+  UpdateModelCursor = (subscriptions) => {
+    this.UnSubscribe(this.#currentSubscriptions);
+    this.#currentSubscriptions = subscriptions;
+    this.Subscribe(this.#currentSubscriptions);
+  };
+  Subscribe(subscriptions) {
+    subscriptions.map(async (subId) => {
+      try {
+        if (this.socket) {
+          this.LogDebugMessage(chalk.yellow(`ObservabilitySocketIOSubscriber:Subscribe(): Sending subscribe: subscriptionKey: [${subId.subscriptionKey.id}]`));
+          this.socket.timeout(1e3).emit("subscribe", subId.subscriptionKey, (error, data) => {
+            if (error) {
+              this.LogErrorMessage(chalk.red(`ObservabilitySocketIOSubscriber:Subscribe(): Error: [${error}], data: [${data}]`));
             } else {
-              this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): observabilitySubscriptionManager.runState: [${this.#observabilitySubscriptionManager.runState}] already stopped.`));
+              this.LogDebugMessage(chalk.green(`ObservabilitySocketIOSubscriber:Subscribe(): Response: [${JSON.stringify(data)}]`));
+              this.subscriptions[subId.subscriptionKey.id] = subId;
             }
-          } else {
-            this.LogErrorMessage(chalk.red(`${this.logPrefix}SocketIOConnect(): observabilitySubscriptionManager does not exist`));
-          }
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Setting new socket into observabilitySocketIOSubscriber, Socket ID: [${socket.id}]`));
-          observabilitySocketIOSubscriber.socket = socket;
-          if (this.#state.localeCompare("started") === 0) {
-            setTimeout(() => {
-              if (this.#observabilitySubscriptionManager?.runState !== runStates.started) {
-                this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): observabilitySubscriptionManager Start`));
-                this.#observabilitySubscriptionManager?.Start();
-              } else {
-                this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): observabilitySubscriptionManager runState: [${this.#observabilitySubscriptionManager?.runState}] already started.`));
-              }
-              this.#tinyEmitter.emit("connected");
-            }, 2500);
-          } else {
-            this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): state not in the started state, current state: [${this.#state}]`));
-            this.#tinyEmitter.emit("connected");
-          }
-        }
-      } else {
-        this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): this.#observabilitySocketIOSubscriber not instance of ObservabilitySocketIOSubscriber`));
-        this.LogDebugMessage(chalk.cyan(this.#observabilitySocketIOSubscriber));
-        this.#tinyEmitter.emit("connected");
-      }
-    } catch (error) {
-      this.LogErrorMessage(chalk.red(`${this.logPrefix}SocketIOConnect(): Error: [${error}]`));
-      this.#tinyEmitter.emit("connected");
-    } finally {
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SocketIOConnect(): Ended`));
-    }
-  };
-  #SetupObservabilitySubscriber = (socket) => {
-    this.LogDebugMessage(`${this.logPrefix}SetupObservabilitySubscriber(): consumeInstrumentationMode: [${this.#options.consumeInstrumentationMode}]`);
-    switch (this.#options.consumeInstrumentationMode) {
-      case "PROXY":
-        {
-          if (socket) {
-            const keepAlive = 2500;
-            this.LogDebugMessage(`${this.logPrefix}SetupObservabilitySubscriber(): Creating ObservabilitySocketIOSubscriber(): Socket ID: [${socket.id}], keepAlive: [${keepAlive}]`);
-            this.#observabilitySocketIOSubscriber = new ObservabilitySocketIOSubscriber({
-              socket,
-              keepAlive,
-              logger: this.logger ?? defaultLogger
-            });
-          } else {
-            this.LogErrorMessage(chalk.red(`${this.logPrefix}SetupObservabilitySubscriber(): Socket not defined. Cannot create ObservabilitySocketIOSubscriber() without socket defined.`));
-          }
-        }
-        break;
-      case "REST":
-        {
-          const urlBase = `${this.#options.instrumentManagerEndpoint}:${this.#options.instrumentManagerPort}${this.#options.instrumentManagerAPIRoot}`;
-          const keepAlive = 1e3;
-          this.LogDebugMessage(`${this.logPrefix}SetupObservabilitySubscriber(): Creating ObservabilityRESTAPISubscriber(): Url Base: [${urlBase}], keepAlive: [${keepAlive}]`);
-          this.#observabilitySocketIOSubscriber = new ObservabilityRESTAPISubscriber({
-            keepAlive,
-            urlBase,
-            logger: this.logger ?? defaultLogger
           });
         }
-        break;
-      default:
-        this.LogErrorMessage(chalk.red(`${this.logPrefix}SetupObservabilitySubscriber(): Unsupported consumeInstrumentationMode mode: [${this.#options.consumeInstrumentationMode}]`));
-        return;
-    }
-    this.#observabilitySubscriptionManager = new ObservabilitySubscriptionManager({
-      logger: this.logger ?? defaultLogger,
-      maxLogLength: 100
-    });
-    this.#observabilitySubscriptionManager.observabilitySocketIOSubscriber = this.#observabilitySocketIOSubscriber;
-  };
-  UpdateModelCursor(subscriptions) {
-    if (this.#observabilitySubscriptionManager?.runState !== runStates.stopped) {
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}UpdateModelCursor(): observabilitySubscriptionManager.Stop()`));
-      this.#observabilitySubscriptionManager?.Stop();
-    } else {
-      this.LogDebugMessage(chalk.cyan(`${this.logPrefix}UpdateModelCursor(): observabilitySubscriptionManager runState: [${this.#observabilitySubscriptionManager?.runState}] already stopped.`));
-    }
-    this.#state = "stopped";
-    setTimeout(() => {
-      if (this.#observabilitySubscriptionManager) {
-        this.LogDebugMessage(chalk.cyan(`${this.logPrefix}UpdateModelCursor(): observabilitySubscriptionManager.subscriptions: [${JSON.stringify(subscriptions)}]`));
-        this.#observabilitySubscriptionManager.subscriptions = subscriptions;
-        this.LogDebugMessage(chalk.cyan(`${this.logPrefix}UpdateModelCursor(): observabilitySubscriptionManager.Start()`));
-        this.#observabilitySubscriptionManager.Start();
-      } else {
-        this.LogDebugMessage(chalk.yellow(`${this.logPrefix}UpdateModelCursor(): Could not update subscriptions, this.#observabilitySubscriptionManager not set`));
+      } catch (error) {
+        this.LogErrorMessage(chalk.red(`ObservabilitySocketIOSubscriber:Subscribe(): Error: response: [${JSON.stringify(error)}]`));
       }
-      this.#state = "started";
-    }, 0);
+    });
   }
-  TransformSubscriptionPayloadCallback(subscriptionPayload) {
-    try {
-      if (this.#observabilitySubscriptionManager) {
-        this.#observabilitySubscriptionManager.TransformSubscriptionPayloadCallback(subscriptionPayload, false);
-        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllAgentsCombined) === 0) {
-          const agentModel = this.#observabilitySubscriptionManager.agentModel;
-          this.#store.UpdateAgentModel(this.#modelId, agentModel, subscriptionPayload.subscriptionKey);
-        }
-        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllServicesCombined) === 0) {
-          const serviceModel = this.#observabilitySubscriptionManager.serviceModel;
-          this.#store.UpdateServiceModel(this.#modelId, serviceModel, subscriptionPayload.subscriptionKey);
-        }
-        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.Services) === 0) {
-          const serviceModel = this.#observabilitySubscriptionManager.serviceModel;
-          this.#store.UpdateServiceModel(this.#modelId, serviceModel, subscriptionPayload.subscriptionKey);
-        }
-        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstances) === 0) {
-          const serviceModel = this.#observabilitySubscriptionManager.serviceModel;
-          this.#store.UpdateServiceModel(this.#modelId, serviceModel, subscriptionPayload.subscriptionKey);
-        }
-        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstance) === 0) {
-          const serviceModel = this.#observabilitySubscriptionManager.serviceModel;
-          this.#store.UpdateServiceModel(this.#modelId, serviceModel, subscriptionPayload.subscriptionKey);
+  UnSubscribe(subscriptions) {
+    subscriptions.map(async (subId) => {
+      try {
+        if (this.socket) {
+          this.LogDebugMessage(chalk.yellow(`ObservabilitySocketIOSubscriber:UnSubscribe(): Sending unsubscribe: subscriptionKey: [${subId.subscriptionKey.id}]`));
+          this.socket.timeout(1e3).emit("unsubscribe", subId.subscriptionKey, (error, data) => {
+            if (error) {
+              this.LogErrorMessage(chalk.red(`ObservabilitySocketIOSubscriber:UnSubscribe(): Error: [${error}], data: [${data}]`));
+            } else {
+              this.LogDebugMessage(chalk.green(`ObservabilitySocketIOSubscriber:UnSubscribe(): Response: [${JSON.stringify(data)}]`));
+              delete this.subscriptions[subId.subscriptionKey.id];
+            }
+          });
         }
-      } else {
-        this.LogErrorMessage(`${this.logPrefix}TransformSubscriptionPayloadCallback(): observabilitySubscriptionManager not set`);
+      } catch (error) {
+        this.LogErrorMessage(chalk.red(`ObservabilitySocketIOSubscriber:UnSubscribe(): Error response: [${JSON.stringify(error)}]`));
       }
-    } catch (error) {
-      this.LogErrorMessage(`${this.logPrefix}TransformSubscriptionPayloadCallback(): #modelId: [${this.#modelId}], Error: [${error}]`);
-    }
+    });
   }
-  Unsubscribe() {
-    this.#state = "stopped";
-    this.LogDebugMessage(chalk.cyan(`${this.logPrefix}Unsubscribe() observabilitySubscriptionManager.Stop()`));
-    this.#observabilitySubscriptionManager?.Stop();
-    if (this.#options.consumeInstrumentationMode.localeCompare("PROXY") === 0) {
-      setTimeout(() => {
-        this.LogDebugMessage(chalk.cyan(`${this.logPrefix}Unsubscribe() socket.disconnect`));
-        this.#socket?.disconnect();
-        this.#socket = null;
-      }, 1e3);
-    }
+  SocketConnect(socket) {
+    this.LogDebugMessage(chalk.magenta(`${this.logPrefix}SocketConnect(): Socket ID: [${socket.id}]`));
+    this.UpdateModelCursor(this.#currentSubscriptions);
   }
-  Start = () => {
-    this.LogDebugMessage(chalk.cyan(`${this.logPrefix}Start() return promise`));
-    return new Promise((resolve) => {
-      if (this.#options.consumeInstrumentationMode.localeCompare("PROXY") === 0) {
-        const onConnected = () => {
-          this.#tinyEmitter.off("connected", onConnected);
-          this.LogDebugMessage(chalk.cyan(`${this.logPrefix}Start(): connected`));
-          resolve(true);
-        };
-        this.#tinyEmitter.on("connected", onConnected);
-        const url = `${this.#options.instrumentManagerEndpoint}:${this.#options.instrumentManagerPort}/${SOCKET_NAMESPACE}/`;
-        this.LogDebugMessage(chalk.cyan(`${this.logPrefix}SetupSocket() url: [${url}]`));
-        this.WithAddress(url).WithLogger(this.logger ?? defaultLogger).SetupSocket();
+  SocketError(error) {
+    this.LogErrorMessage(chalk.red(`${this.logPrefix}SocketError(): Error: [${error}]`));
+  }
+  SetupSocketEvents(socket) {
+    this.LogDebugMessage(chalk.magenta(`${this.logPrefix}SetupSocketEvents(): Socket ID: [${socket.id}]`));
+    this.socket?.on("subscriptionData", (data, cb) => {
+      this.LogDebugMessage(chalk.magenta(`${this.logPrefix}SetupSocketEvents(): on subscriptionData(): Socket ID: [${socket.id}]`));
+      const subId = data.subscriptionKey.id;
+      if (this.subscriptions[subId]) {
+        this.subscriptions[subId].cb(data);
+        cb(`subscriptionData Response: [${data}]`);
       } else {
-        this.#SetupObservabilitySubscriber();
-        resolve(true);
+        cb(`subscriptionData Response: Not subscription found in subscriptions: [${data}]`);
       }
     });
-  };
-  ConnectCallBack(socket) {
-    this.LogDebugMessage(chalk.magenta(`${this.logPrefix}ConnectCallBack(): Socket ID: [${socket.id}]`));
-    if (this.#observabilitySubscriptionManager === null) {
-      this.#SetupObservabilitySubscriber(socket);
-    }
-    this.#SocketIOConnect(socket);
   }
-  ErrorCallBack(error) {
-    this.LogErrorMessage(chalk.red(`${this.logPrefix}ErrorCallBack(): Error callback: [${error}]`));
+  SocketConnectError(error) {
+    this.LogErrorMessage(chalk.red(`${this.logPrefix}SocketConnectError(): Error: [${error}]`));
   }
-  SocketEventsCallBack(socket) {
+  SocketDisconnect(reason) {
+    this.LogErrorMessage(chalk.red(`${this.logPrefix}SocketDisconnect(): reason: [${reason}]`));
   }
-  /*
-      #SetupSocketIO = () => {
-          const socketUtils = new SocketIoClientHelper({});
-  
-          this.#socket = socketUtils.SetupClientSideSocket('STSVueTilsTester', 
-              `${this.#options.instrumentManagerEndpoint}:${this.#options.instrumentManagerPort}/${SOCKET_NAMESPACE}/`,
-              '', // use default /socket.io/ path
-              this.#SocketConnect as any, // Connected call back
-              this.#ProcessSocketEvents as any, // Custom Events
-              this.#ProcessSocketError // Handle socket errors
-          ) as any;
-      }
-  
-      #SocketConnect = (socket: Socket) => {
-          defaultLogger.debug(chalk.magenta(`SocketIOConnect(): Socket ID: [${socket.id}]`));
-          if (this.#observabilitySubscriptionManager === null) {
-              this.#SetupObservabilitySubscriber();
-          }
-          this.#SocketIOConnect(socket);
-      }
-      
-      #ProcessSocketError = (error: any) => {
-          defaultLogger.error(chalk.red(`SetupClientSideSocket error callback: [${error}]`))
-      }
-      
-      #ProcessSocketEvents = (socket: Socket) => {
-      
-      }
-      */
 }
 const _hoisted_1$1 = { class: "d-flex flex-wrap justify-space-between" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
@@ -10591,16 +10374,47 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     chalk.level = 3;
     const props = __props;
     const store = ModelStore();
-    let observabilitySubscriberManager = null;
+    let observabilitySubscriptionManager = new ObservabilitySubscriptionManager({
+      logger: defaultLogger,
+      maxLogLength: 200
+    });
+    let socketClientSubscriber;
     const baseColour = chalk.hex("#57A1A8");
     const LogDebug = (message) => {
       defaultLogger.debug(baseColour(`stsuxvue:UXModelNavigator:${message}`));
     };
+    const LogError = (message) => {
+      defaultLogger.error(baseColour(`stsuxvue:UXModelNavigator:${message}`));
+    };
     const LogWarning = (message) => {
       defaultLogger.warn(baseColour(`stsuxvue:UXModelNavigator:${message}`));
     };
     const TransformSubscriptionPayloadCallback = (subscriptionPayload) => {
-      observabilitySubscriberManager?.TransformSubscriptionPayloadCallback(subscriptionPayload);
+      try {
+        observabilitySubscriptionManager.TransformSubscriptionPayloadCallback(subscriptionPayload);
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllAgentsCombined) === 0) {
+          const agentModel = observabilitySubscriptionManager.agentModel;
+          store.UpdateAgentModel(props.modelId, agentModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.AllServicesCombined) === 0) {
+          const serviceModel = observabilitySubscriptionManager.serviceModel;
+          store.UpdateServiceModel(props.modelId, serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.Services) === 0) {
+          const serviceModel = observabilitySubscriptionManager.serviceModel;
+          store.UpdateServiceModel(props.modelId, serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstances) === 0) {
+          const serviceModel = observabilitySubscriptionManager.serviceModel;
+          store.UpdateServiceModel(props.modelId, serviceModel, subscriptionPayload.subscriptionKey);
+        }
+        if (subscriptionPayload.subscriptionKey.topic.localeCompare(SubscriptionTopic.ServiceInstance) === 0) {
+          const serviceModel = observabilitySubscriptionManager.serviceModel;
+          store.UpdateServiceModel(props.modelId, serviceModel, subscriptionPayload.subscriptionKey);
+        }
+      } catch (error) {
+        LogError(`TransformSubscriptionPayloadCallback(): #modelId: [${props.modelId}], Error: [${error}]`);
+      }
     };
     const GetRootLevelSubscriptions = () => [{
       subscriptionKey: {
@@ -10644,10 +10458,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }];
     };
     let navigationSubscriptions = {
-      subscriptions: [],
+      subscriptionHistoryStack: [],
       currentSubscriptions: null
     };
-    let obj = reactive(navigationSubscriptions);
+    let reactiveNavigationSubscriptions = reactive(navigationSubscriptions);
     const getPathString = (sub2) => {
       if (sub2.subscriptionKey.key && sub2.subscriptionKey.subkey) {
         return `${sub2.subscriptionKey.topic}[${sub2.subscriptionKey.key}/${sub2.subscriptionKey.subkey}]`;
@@ -10660,17 +10474,17 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const navigationPath = computed(() => {
       let pathString = "";
       let sep = "";
-      obj.subscriptions.forEach((s) => {
+      reactiveNavigationSubscriptions.subscriptionHistoryStack.forEach((s) => {
         pathString += sep + getPathString(s[0]);
         sep = "/";
       });
-      if (obj.currentSubscriptions) {
-        return pathString + sep + getPathString(obj.currentSubscriptions[0]);
+      if (reactiveNavigationSubscriptions.currentSubscriptions) {
+        return pathString + sep + getPathString(reactiveNavigationSubscriptions.currentSubscriptions[0]);
       }
       return pathString;
     });
     const BackDisabled = computed(() => {
-      return obj.subscriptions.length < 1;
+      return reactiveNavigationSubscriptions.subscriptionHistoryStack.length < 1;
     });
     const modelNode = reactive({
       node: {}
@@ -10698,23 +10512,29 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         }
       }
     };
-    const navigate = function(subscriptions) {
-      if (obj.currentSubscriptions) {
-        obj.subscriptions.push(obj.currentSubscriptions);
+    const UpdateModelCursor = () => {
+      const subscriptions2 = reactiveNavigationSubscriptions.currentSubscriptions;
+      if (subscriptions2) {
+        socketClientSubscriber.UpdateModelCursor(subscriptions2);
+      }
+    };
+    const navigate = function(subscriptions2) {
+      if (reactiveNavigationSubscriptions.currentSubscriptions) {
+        reactiveNavigationSubscriptions.subscriptionHistoryStack.push(reactiveNavigationSubscriptions.currentSubscriptions);
       } else {
         LogWarning(`navigate: obj.currentSubscriptions not defined`);
       }
-      obj.currentSubscriptions = subscriptions;
-      LogDebug(`navigate: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(subscriptions)})`);
-      observabilitySubscriberManager?.UpdateModelCursor(subscriptions);
+      reactiveNavigationSubscriptions.currentSubscriptions = subscriptions2;
+      LogDebug(`navigate: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(subscriptions2)})`);
+      UpdateModelCursor();
     };
     const GoBack = function() {
-      if (obj.subscriptions.length > 0) {
-        let key = obj.subscriptions.pop();
+      if (reactiveNavigationSubscriptions.subscriptionHistoryStack.length > 0) {
+        let key = reactiveNavigationSubscriptions.subscriptionHistoryStack.pop();
         if (key) {
-          obj.currentSubscriptions = key;
-          LogDebug(`GoBack: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(obj.currentSubscriptions)})`);
-          observabilitySubscriberManager?.UpdateModelCursor(obj.currentSubscriptions);
+          reactiveNavigationSubscriptions.currentSubscriptions = key;
+          LogDebug(`GoBack: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(reactiveNavigationSubscriptions.currentSubscriptions)})`);
+          UpdateModelCursor();
         } else {
           LogDebug(`GoBack: subscriptions key not defined`);
         }
@@ -10723,10 +10543,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       }
     };
     const TopLevel = function() {
-      obj.subscriptions = [];
-      obj.currentSubscriptions = GetRootLevelSubscriptions();
-      LogDebug(`TopLevel: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(obj.currentSubscriptions)})`);
-      observabilitySubscriberManager?.UpdateModelCursor(obj.currentSubscriptions);
+      reactiveNavigationSubscriptions.subscriptionHistoryStack = [];
+      reactiveNavigationSubscriptions.currentSubscriptions = GetRootLevelSubscriptions();
+      LogDebug(`TopLevel: observabilitySubscriberManager().UpdateModelCursor(${JSON.stringify(reactiveNavigationSubscriptions.currentSubscriptions)})`);
+      UpdateModelCursor();
     };
     onMounted(() => {
       LogDebug(`onMounted()`);
@@ -10739,25 +10559,21 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     const Stop = () => {
       LogDebug(`Stop()`);
       store.UpdateSate(props.modelId, _estate.STOPPING);
-      if (observabilitySubscriberManager) {
-        LogDebug(`Stop(): Unsubscribe()`);
-        observabilitySubscriberManager.Unsubscribe();
-        store.UpdateObservabilitySubscriberManager(observabilitySubscriberManager.id, null);
-      }
-      observabilitySubscriberManager = null;
       store.UpdateSate(props.modelId, _estate.IDLE);
     };
     const Start = async (options) => {
       LogDebug(`Start()`);
       store.UpdateSate(props.modelId, _estate.STARTING);
-      LogDebug(`Start(): new ObservabilitySubscriberManager(), Options: ${JSON.stringify(options)}`);
-      observabilitySubscriberManager = new ObservabilitySubscriberManager(options);
-      store.UpdateObservabilitySubscriberManager(observabilitySubscriberManager.id, observabilitySubscriberManager);
-      LogDebug(`Start(): observabilitySubscriberManager().Start(): Mode: [${options.consumeInstrumentationMode}]`);
-      await observabilitySubscriberManager.Start();
-      obj.currentSubscriptions = GetRootLevelSubscriptions();
-      LogDebug(`Start(): observabilitySubscriberManager().UpdateModelCursor(): Mode: [${options.consumeInstrumentationMode}] rootLevelSubscriptions: [(${JSON.stringify(obj.currentSubscriptions)}]`);
-      observabilitySubscriberManager?.UpdateModelCursor(obj.currentSubscriptions);
+      socketClientSubscriber = new SocketClientSubscriber({
+        instrumentManagerEndpoint: options.instrumentManagerEndpoint,
+        instrumentManagerPort: options.instrumentManagerPort,
+        consumeInstrumentationMode: options.consumeInstrumentationMode,
+        instrumentManagerAPIRoot: options.instrumentManagerAPIRoot,
+        modelId: options.modelId
+      });
+      reactiveNavigationSubscriptions.currentSubscriptions = GetRootLevelSubscriptions();
+      LogDebug(`Start(): observabilitySubscriberManager().UpdateModelCursor(): Mode: [${options.consumeInstrumentationMode}] rootLevelSubscriptions: [(${JSON.stringify(reactiveNavigationSubscriptions.currentSubscriptions)}]`);
+      UpdateModelCursor();
       store.UpdateSate(props.modelId, _estate.STARTED);
     };
     __expose({