@nsshunt/stsvueutils 1.2.28 → 1.2.30

package/dist/stsvueutils.mjs

@@ -35,7 +35,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;
-import { inject, defineComponent, onMounted, ref, resolveComponent, openBlock, createBlock, withCtx, createVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, defineAsyncComponent, unref, reactive, computed, watch, onBeforeUnmount, pushScopeId, popScopeId, resolveDynamicComponent } from "vue";
+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";
 import debugModule from "debug";
 import { STSInstrumentControllerPluginKey, GetSTSInstrumentController, Gauge, GetSTSInstrumentControllerPluginKey } from "@nsshunt/stsobservability";
 import { ModelDelimeter, Sleep } from "@nsshunt/stsutils";
@@ -2609,235 +2609,7 @@ const ModelStore = defineStore("__sts__ModelStore", {
     }
   }
 });
-const _hoisted_1$3 = /* @__PURE__ */ createElementVNode("div", null, " UXTestForm ", -1);
-const _hoisted_2$3 = { class: "text-wrap" };
-const _hoisted_3$2 = { class: "ml-0 text-caption" };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  __name: "UXTestForm",
-  props: {
-    showFormValues: { type: Boolean, default: true }
-  },
-  setup(__props, { expose: __expose }) {
-    onMounted(() => {
-      console.log(chalk$1.green("onMounted"));
-    });
-    const formData = ref([
-      {
-        elementType: "textField",
-        model: "My test Profile",
-        label: "Profile Name",
-        hint: "Profile name. Used as output file name."
-      },
-      {
-        elementType: "radio",
-        model: "so2",
-        radioGroup: [
-          {
-            key: "o1",
-            label: "Option One",
-            value: "so1"
-          },
-          {
-            key: "o2",
-            label: "Option Two",
-            value: "so2"
-          }
-        ]
-      },
-      {
-        elementType: "slider",
-        model: 5,
-        description: "Some description for the slider one."
-      },
-      {
-        elementType: "slider",
-        model: 2,
-        description: "Some description for the slider two."
-      },
-      {
-        elementType: "checkbox",
-        model: true,
-        description: "Some description for checkbox 1"
-      },
-      {
-        elementType: "divider"
-      },
-      {
-        elementType: "checkbox",
-        model: false,
-        description: "Some description for checkbox 2"
-      }
-    ]);
-    __expose({
-      formData
-    });
-    return (_ctx, _cache) => {
-      const _component_v_divider = resolveComponent("v-divider");
-      const _component_v_row = resolveComponent("v-row");
-      const _component_v_col = resolveComponent("v-col");
-      const _component_v_radio = resolveComponent("v-radio");
-      const _component_v_radio_group = resolveComponent("v-radio-group");
-      const _component_v_text_field = resolveComponent("v-text-field");
-      const _component_v_checkbox = resolveComponent("v-checkbox");
-      const _component_v_slider = resolveComponent("v-slider");
-      const _component_v_container = resolveComponent("v-container");
-      return openBlock(), createBlock(_component_v_container, { class: "yellowgreen" }, {
-        default: withCtx(() => [
-          createVNode(_component_v_row, null, {
-            default: withCtx(() => [
-              _hoisted_1$3,
-              createVNode(_component_v_divider)
-            ]),
-            _: 1
-          }),
-          _ctx.showFormValues ? (openBlock(), createBlock(_component_v_row, { key: 0 }, {
-            default: withCtx(() => [
-              createVNode(_component_v_col, { cols: "12" }, {
-                default: withCtx(() => [
-                  (openBlock(true), createElementBlock(Fragment, null, renderList(formData.value, (formDataElement, index) => {
-                    return openBlock(), createBlock(_component_v_row, {
-                      key: index,
-                      class: "ml-1 text-caption"
-                    }, {
-                      default: withCtx(() => [
-                        createTextVNode(toDisplayString(formDataElement.model), 1)
-                      ]),
-                      _: 2
-                    }, 1024);
-                  }), 128))
-                ]),
-                _: 1
-              })
-            ]),
-            _: 1
-          })) : createCommentVNode("", true),
-          createVNode(_component_v_row, null, {
-            default: withCtx(() => [
-              createVNode(_component_v_divider)
-            ]),
-            _: 1
-          }),
-          (openBlock(true), createElementBlock(Fragment, null, renderList(formData.value, (formDataElement, index) => {
-            return openBlock(), createBlock(_component_v_row, { key: index }, {
-              default: withCtx(() => [
-                formDataElement.elementType.localeCompare("divider") === 0 ? (openBlock(), createBlock(_component_v_col, {
-                  key: 0,
-                  cols: "12",
-                  class: "ma-0 pa-0"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_v_divider)
-                  ]),
-                  _: 1
-                })) : createCommentVNode("", true),
-                formDataElement.elementType.localeCompare("radio") === 0 ? (openBlock(), createBlock(_component_v_col, {
-                  key: 1,
-                  cols: "12",
-                  class: "ma-0 pa-0"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_v_radio_group, {
-                      modelValue: formDataElement.model,
-                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
-                      "hide-details": true
-                    }, {
-                      default: withCtx(() => [
-                        (openBlock(true), createElementBlock(Fragment, null, renderList(formDataElement.radioGroup, (n) => {
-                          return openBlock(), createBlock(_component_v_radio, {
-                            key: n.key,
-                            label: `${n.label}`,
-                            value: n.value
-                          }, null, 8, ["label", "value"]);
-                        }), 128))
-                      ]),
-                      _: 2
-                    }, 1032, ["modelValue", "onUpdate:modelValue"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true),
-                formDataElement.elementType.localeCompare("textField") === 0 ? (openBlock(), createBlock(_component_v_col, {
-                  key: 2,
-                  cols: "12",
-                  class: "ma-0 pa-0"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_v_text_field, {
-                      modelValue: formDataElement.model,
-                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
-                      label: formDataElement.label,
-                      required: "",
-                      hint: formDataElement.hint,
-                      "persistent-hint": ""
-                    }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "hint"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true),
-                formDataElement.elementType.localeCompare("checkbox") === 0 ? (openBlock(), createBlock(_component_v_col, {
-                  key: 3,
-                  cols: "12",
-                  class: "ma-0 pa-0"
-                }, {
-                  default: withCtx(() => [
-                    createVNode(_component_v_checkbox, {
-                      modelValue: formDataElement.model,
-                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
-                      "hide-details": true
-                    }, {
-                      label: withCtx(() => [
-                        createElementVNode("div", _hoisted_2$3, toDisplayString(formDataElement.description), 1)
-                      ]),
-                      _: 2
-                    }, 1032, ["modelValue", "onUpdate:modelValue"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true),
-                formDataElement.elementType.localeCompare("slider") === 0 ? (openBlock(), createBlock(_component_v_col, {
-                  key: 4,
-                  cols: "12",
-                  class: "mx-3",
-                  style: { "padding": "0 10px 0 0" }
-                }, {
-                  default: withCtx(() => [
-                    createElementVNode("div", _hoisted_3$2, toDisplayString(formDataElement.description), 1),
-                    createVNode(_component_v_slider, {
-                      modelValue: formDataElement.model,
-                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
-                      class: "align-center",
-                      max: "5",
-                      min: "1",
-                      step: "1",
-                      "show-ticks": "always",
-                      "tick-size": "6",
-                      "hide-details": ""
-                    }, {
-                      append: withCtx(() => [
-                        createVNode(_component_v_text_field, {
-                          modelValue: formDataElement.model,
-                          "onUpdate:modelValue": ($event) => formDataElement.model = $event,
-                          "hide-details": "",
-                          "single-line": "",
-                          density: "compact",
-                          type: "number",
-                          style: { "width": "110px" },
-                          variant: "outlined"
-                        }, null, 8, ["modelValue", "onUpdate:modelValue"])
-                      ]),
-                      _: 2
-                    }, 1032, ["modelValue", "onUpdate:modelValue"])
-                  ]),
-                  _: 2
-                }, 1024)) : createCommentVNode("", true)
-              ]),
-              _: 2
-            }, 1024);
-          }), 128))
-        ]),
-        _: 1
-      });
-    };
-  }
-});
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "UXBarChart",
   setup(__props, { expose: __expose }) {
     const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -2918,7 +2690,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "UXLineChart",
   setup(__props, { expose: __expose }) {
     const VueApexCharts = defineAsyncComponent(() => import("vue3-apexcharts"));
@@ -3020,7 +2792,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "UXMultiBarChart",
   props: {
     series: {},
@@ -3120,7 +2892,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "UXRadialChart",
   props: {
     series: {},
@@ -9391,35 +9163,486 @@ function createDOMPurify() {
   return DOMPurify;
 }
 var purify = createDOMPurify();
-const _hoisted_1$2 = { class: "ststitle" };
-const _hoisted_2$2 = {
+const _hoisted_1$4 = { class: "instDisplay text-right" };
+const _hoisted_2$4 = {
   key: 0,
-  class: "stssubtitle"
+  class: "instDisplayWide ml-6"
 };
-const _hoisted_3$1 = { class: "d-flex flex-row flex-wrap" };
-const _hoisted_4$1 = { class: "instDisplay text-right" };
-const _hoisted_5$1 = { class: "stdWidth text-right" };
-const _hoisted_6$1 = { class: "stdWidth text-right" };
-const _hoisted_7$1 = { class: "d-flex flex-row flex-wrap" };
-const _hoisted_8$1 = { class: "instDisplay text-right" };
-const _hoisted_9$1 = { class: "stdWidth text-right" };
-const _hoisted_10$1 = { class: "stdWidth text-right" };
-const _hoisted_11$1 = { class: "d-flex flex-row flex-nowrap" };
-const _hoisted_12$1 = { class: "stdWidth text-right" };
-const _hoisted_13$1 = { class: "stdWidth text-right" };
-const _hoisted_14$1 = { class: "d-flex flex-row" };
-const _hoisted_15$1 = { class: "instDisplay text-right" };
-const _hoisted_16$1 = { class: "stdWidth text-right" };
-const _hoisted_17$1 = { class: "stdWidth text-right" };
-const _hoisted_18$1 = { class: "d-flex flex-row flex-nowrap" };
-const _hoisted_19$1 = { class: "stdWidth text-right" };
-const _hoisted_20$1 = { class: "stdWidth text-right" };
-const _hoisted_21$1 = { class: "instDisplay text-right" };
-const _hoisted_22$1 = { class: "instDisplay text-right" };
-const _hoisted_23$1 = { class: "instDisplay text-right" };
-const _hoisted_24$1 = { class: "instDisplay ml-6" };
-const _hoisted_25$1 = { class: "instDisplay ml-6" };
-const _hoisted_26$1 = { class: "instDisplay text-right" };
+const _hoisted_3$3 = { class: "d-flex flex-row flex-wrap" };
+const _hoisted_4$2 = { class: "stdWidth text-right" };
+const _hoisted_5$2 = { class: "stdWidth text-right" };
+const _hoisted_6$2 = { class: "instDisplay text-right" };
+const _hoisted_7$2 = {
+  key: 0,
+  class: "instDisplayWide ml-6"
+};
+const _hoisted_8$2 = { class: "d-flex flex-row flex-wrap" };
+const _hoisted_9$2 = { class: "stdWidth text-right" };
+const _hoisted_10$2 = { class: "stdWidth text-right" };
+const _hoisted_11$2 = { class: "instDisplay text-right" };
+const _hoisted_12$2 = { class: "instDisplay ml-6" };
+const _hoisted_13$2 = { class: "instDisplay ml-6" };
+const _hoisted_14$2 = { class: "instDisplay ml-6" };
+const _hoisted_15$2 = { class: "instDisplay ml-6" };
+const _hoisted_16$2 = { class: "instDisplay ml-6" };
+const _hoisted_17$2 = { class: "instDisplay text-right" };
+const _hoisted_18$2 = { class: "subDisplay ml-1" };
+const _hoisted_19$2 = { class: "instDisplay ml-6" };
+const _hoisted_20$2 = { class: "instDisplay ml-6" };
+const _hoisted_21$2 = { class: "instDisplay text-right" };
+const _hoisted_22$2 = {
+  key: 0,
+  class: "instDisplayWide ml-6"
+};
+const _hoisted_23$2 = { class: "instDisplay text-right" };
+const _hoisted_24$2 = { class: "instDisplay text-right" };
+const _hoisted_25$2 = {
+  class: "overflow-x-auto",
+  style: { "max-height": "400px" }
+};
+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({
+  __name: "UXModelInstrumentAgentCommon",
+  props: {
+    modelId: {},
+    instrumentData: {},
+    contextData: {},
+    isLeafNode: { type: Boolean },
+    nodeid: {},
+    title: {}
+  },
+  emits: ["myclick"],
+  setup(__props, { emit: __emit }) {
+    const convert = new Convert();
+    const store = ModelStore();
+    const props = __props;
+    const LogData = computed(() => {
+      if (props.instrumentData[`${Gauge.LOGGER}`]) {
+        return props.instrumentData[`${Gauge.LOGGER}`].val;
+      } else {
+        return [];
+      }
+    });
+    const LogDataCopy = computed(() => {
+      if (props.instrumentData[`${Gauge.LOGGER_COPY}`]) {
+        return props.instrumentData[`${Gauge.LOGGER_COPY}`].val;
+      } else {
+        return [];
+      }
+    });
+    const velocityFormat = function(value) {
+      return "" + Math.round(value);
+    };
+    const round2Places = function(value) {
+      return "" + (Math.round(value * 100) / 100).toFixed(2);
+    };
+    const round0PlacesArray = function(value) {
+      try {
+        let sep = "";
+        let retVal = "";
+        for (let i = 0; i < value.length; i++) {
+          retVal += `${sep}${value[i][0]}/${value[i][1]}`;
+          sep = ", ";
+        }
+        return retVal;
+      } catch (error) {
+        return "";
+      }
+    };
+    const round2PlacesArray = function(value) {
+      try {
+        let sep2 = "";
+        let retVal = "";
+        for (let i = 0; i < value.length; i++) {
+          const bp = Math.round(value[i][0] * 1e4) / 100;
+          const val = Math.round(value[i][1] * 100) / 100;
+          retVal += `${sep2}${bp}/${val.toFixed(2)}`;
+          sep2 = ", ";
+        }
+        return retVal;
+      } catch (error) {
+        return "";
+      }
+      let numArray = value.map((value2) => (Math.round(value2[1] * 100) / 100).toFixed(2));
+      let sep = "";
+      return "[" + numArray.reduce((prev, current) => {
+        const retVal = prev += sep + current;
+        sep = ", ";
+        return retVal;
+      }, "") + "]";
+    };
+    const convertMS = function(ms) {
+      let s = Math.floor(ms / 1e3);
+      let m = Math.floor(s / 60);
+      s = s % 60;
+      let h = Math.floor(m / 60);
+      m = m % 60;
+      const d = Math.floor(h / 24);
+      h = h % 24;
+      const pad = function(n) {
+        return n < 10 ? "0" + n : n.toString();
+      };
+      return (d + "." + pad(h) + ":" + pad(m) + ":" + pad(s)).padStart(12);
+    };
+    const convertHtml = function(value) {
+      return purify.sanitize(convert.toHtml(value));
+    };
+    const detailMode = computed({
+      get: () => {
+        if (store._models[props.modelId]) {
+          if (store._models[props.modelId].modelMeta[props.nodeid] && store._models[props.modelId].modelMeta[props.nodeid].detailView) {
+            return store._models[props.modelId].modelMeta[props.nodeid].detailView;
+          }
+        }
+        return false;
+      },
+      set: (val) => {
+        if (store._models[props.modelId]) {
+          if (store._models[props.modelId].modelMeta[props.nodeid]) {
+            store._models[props.modelId].modelMeta[props.nodeid].detailView = val;
+          } else {
+            store._models[props.modelId].modelMeta[props.nodeid] = {
+              detailView: val
+            };
+          }
+        }
+      }
+    });
+    const barChartEx = ref();
+    let barUpdate = 0;
+    watch(() => props.instrumentData, (val) => {
+      if (barChartEx.value) {
+        const now = performance.now();
+        if (now - barUpdate > 4500) {
+          barUpdate = now;
+          barChartEx.value.UpdateGraph(props.instrumentData[Gauge.DURATION_HISTOGRAM_GAUGE].hist, props.instrumentData[Gauge.LATENCY_HISTOGRAM_GAUGE].hist);
+        }
+      }
+    }, { deep: true });
+    return (_ctx, _cache) => {
+      const _component_v_switch = resolveComponent("v-switch");
+      const _component_v_col = resolveComponent("v-col");
+      const _component_v_row = resolveComponent("v-row");
+      const _component_v_card = resolveComponent("v-card");
+      const _component_v_container = resolveComponent("v-container");
+      return openBlock(), createBlock(_component_v_container, null, {
+        default: withCtx(() => [
+          createVNode(_component_v_card, {
+            class: "ma-2 pa-2",
+            color: "#002255",
+            theme: "dark",
+            "prepend-icon": "mdi-desktop-tower",
+            title: `${_ctx.title}`
+          }, {
+            text: withCtx(() => [
+              createTextVNode(" [" + toDisplayString(_ctx.nodeid) + "] ", 1),
+              createVNode(_component_v_switch, {
+                modelValue: detailMode.value,
+                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => detailMode.value = $event),
+                label: `Detailed Mode: ${detailMode.value.toString()}`
+              }, null, 8, ["modelValue", "label"]),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Duration ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_1$4, 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
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Duration Histo ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_3$3, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instrumentData[`${unref(Gauge).DURATION_HISTOGRAM_GAUGE}`].hist, (histo, index) => {
+                          return openBlock(), createElementBlock("div", { key: index }, [
+                            createElementVNode("div", _hoisted_4$2, toDisplayString(histo[1]), 1),
+                            createElementVNode("div", _hoisted_5$2, toDisplayString(histo[0]), 1)
+                          ]);
+                        }), 128))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Latency ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_6$2, toDisplayString(round2Places(_ctx.instrumentData[`${unref(Gauge).LATENCY_GAUGE}`].val)), 1),
+                      _ctx.isLeafNode === false ? (openBlock(), createElementBlock("span", _hoisted_7$2, toDisplayString(round2PlacesArray(_ctx.instrumentData[`${unref(Gauge).LATENCY_GAUGE}`].percentile)), 1)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Latency Histo ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_8$2, [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instrumentData[`${unref(Gauge).LATENCY_HISTOGRAM_GAUGE}`].hist, (histo, index) => {
+                          return openBlock(), createElementBlock("div", { key: index }, [
+                            createElementVNode("div", _hoisted_9$2, toDisplayString(histo[1]), 1),
+                            createElementVNode("div", _hoisted_10$2, toDisplayString(histo[0]), 1)
+                          ]);
+                        }), 128))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "12" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", null, [
+                        createVNode(_sfc_main$8, {
+                          ref_key: "barChartEx",
+                          ref: barChartEx
+                        }, null, 512)
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Request Count ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_11$2, toDisplayString(_ctx.instrumentData[`${unref(Gauge).REQUEST_COUNT_GAUGE}`].val), 1),
+                      createElementVNode("span", _hoisted_12$2, "Error: " + toDisplayString(_ctx.instrumentData[`${unref(Gauge).ERROR_COUNT_GAUGE}`].val), 1),
+                      createElementVNode("span", _hoisted_13$2, "Retry: " + toDisplayString(_ctx.instrumentData[`${unref(Gauge).RETRY_COUNT_GAUGE}`].val), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Authentication Count ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_14$2, toDisplayString(_ctx.instrumentData[`${unref(Gauge).AUTHENTICATION_COUNT_GAUGE}`].val), 1),
+                      createElementVNode("span", _hoisted_15$2, "Error: " + toDisplayString(_ctx.instrumentData[`${unref(Gauge).AUTHENTICATION_ERROR_COUNT_GAUGE}`].val), 1),
+                      createElementVNode("span", _hoisted_16$2, "Retry: " + toDisplayString(_ctx.instrumentData[`${unref(Gauge).AUTHENTICATION_RETRY_COUNT_GAUGE}`].val), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Velocity ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_17$2, [
+                        createTextVNode(toDisplayString(velocityFormat(_ctx.instrumentData[`${unref(Gauge).VELOCITY_GAUGE}`].va)) + " ", 1),
+                        createElementVNode("span", _hoisted_18$2, "[" + toDisplayString(velocityFormat(_ctx.instrumentData[`${unref(Gauge).VELOCITY_GAUGE}`].velocity)) + "]", 1)
+                      ]),
+                      createElementVNode("span", _hoisted_19$2, "Delta: " + toDisplayString(velocityFormat(_ctx.instrumentData[`${unref(Gauge).VELOCITY_GAUGE}`].delta)), 1),
+                      createElementVNode("span", _hoisted_20$2, "Max: " + toDisplayString(velocityFormat(_ctx.instrumentData[`${unref(Gauge).VELOCITY_GAUGE}`].maxVelocity)), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Active Request Count ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_21$2, toDisplayString(_ctx.instrumentData[`${unref(Gauge).ACTIVE_REQUEST_GAUGE}`].val), 1),
+                      _ctx.isLeafNode === false ? (openBlock(), createElementBlock("span", _hoisted_22$2, toDisplayString(round0PlacesArray(_ctx.instrumentData[`${unref(Gauge).ACTIVE_REQUEST_GAUGE}`].percentile)), 1)) : createCommentVNode("", true)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Core Count ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_23$2, toDisplayString(_ctx.instrumentData[`${unref(Gauge).CORE_COUNT_GAUGE}`].val), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Time ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("span", _hoisted_24$2, toDisplayString(convertMS(_ctx.instrumentData[`${unref(Gauge).TIMER_GAUGE}`].val)), 1)
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              }),
+              createVNode(_component_v_row, { cols: "12" }, {
+                default: withCtx(() => [
+                  createVNode(_component_v_col, { md: "2" }, {
+                    default: withCtx(() => [
+                      createTextVNode(" Logs ")
+                    ]),
+                    _: 1
+                  }),
+                  createVNode(_component_v_col, { md: "10" }, {
+                    default: withCtx(() => [
+                      createElementVNode("div", _hoisted_25$2, [
+                        _ctx.isLeafNode ? (openBlock(), createElementBlock("div", _hoisted_26$2, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(LogDataCopy.value, (logLine, index) => {
+                            return openBlock(), createElementBlock("div", {
+                              key: `ln-${index}`,
+                              class: "instDisplayXWide"
+                            }, [
+                              createElementVNode("span", {
+                                innerHTML: convertHtml(logLine)
+                              }, null, 8, _hoisted_27$2)
+                            ]);
+                          }), 128))
+                        ])) : (openBlock(), createElementBlock("div", _hoisted_28$2, [
+                          (openBlock(true), createElementBlock(Fragment, null, renderList(LogData.value, (logLine, index) => {
+                            return openBlock(), createElementBlock("div", {
+                              key: `nlf-${index}`,
+                              class: "instDisplayXWide"
+                            }, [
+                              createElementVNode("span", {
+                                innerHTML: convertHtml(logLine)
+                              }, null, 8, _hoisted_29$1)
+                            ]);
+                          }), 128))
+                        ]))
+                      ])
+                    ]),
+                    _: 1
+                  })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["title"])
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target2 = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target2[key] = val;
+  }
+  return target2;
+};
+const UXModelInstrumentAgentCommon = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-00273855"]]);
+const _hoisted_1$3 = { class: "ststitle" };
+const _hoisted_2$3 = {
+  key: 0,
+  class: "stssubtitle"
+};
+const _hoisted_3$2 = { class: "d-flex flex-row flex-wrap" };
+const _hoisted_4$1 = { class: "instDisplay text-right" };
+const _hoisted_5$1 = { class: "stdWidth text-right" };
+const _hoisted_6$1 = { class: "stdWidth text-right" };
+const _hoisted_7$1 = { class: "d-flex flex-row flex-wrap" };
+const _hoisted_8$1 = { class: "instDisplay text-right" };
+const _hoisted_9$1 = { class: "stdWidth text-right" };
+const _hoisted_10$1 = { class: "stdWidth text-right" };
+const _hoisted_11$1 = { class: "d-flex flex-row flex-nowrap" };
+const _hoisted_12$1 = { class: "stdWidth text-right" };
+const _hoisted_13$1 = { class: "stdWidth text-right" };
+const _hoisted_14$1 = { class: "d-flex flex-row" };
+const _hoisted_15$1 = { class: "instDisplay text-right" };
+const _hoisted_16$1 = { class: "stdWidth text-right" };
+const _hoisted_17$1 = { class: "stdWidth text-right" };
+const _hoisted_18$1 = { class: "d-flex flex-row flex-nowrap" };
+const _hoisted_19$1 = { class: "stdWidth text-right" };
+const _hoisted_20$1 = { class: "stdWidth text-right" };
+const _hoisted_21$1 = { class: "instDisplay text-right" };
+const _hoisted_22$1 = { class: "instDisplay text-right" };
+const _hoisted_23$1 = { class: "instDisplay text-right" };
+const _hoisted_24$1 = { class: "instDisplay ml-6" };
+const _hoisted_25$1 = { class: "instDisplay ml-6" };
+const _hoisted_26$1 = { class: "instDisplay text-right" };
 const _hoisted_27$1 = { class: "instDisplay ml-6" };
 const _hoisted_28$1 = { class: "instDisplay ml-6" };
 const _hoisted_29 = { class: "instDisplay text-right" };
@@ -9446,7 +9669,7 @@ const _hoisted_40 = { key: 0 };
 const _hoisted_41 = ["innerHTML"];
 const _hoisted_42 = { key: 1 };
 const _hoisted_43 = ["innerHTML"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "UXModelInstrumentServiceCommon",
   props: {
     modelId: {},
@@ -9592,9 +9815,9 @@ 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, [
+            _ctx.title.length > 30 ? (openBlock(), createElementBlock("div", _hoisted_2$3, [
               createTextVNode(toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
               createElementVNode("div", null, toDisplayString(_ctx.title.split("@")[1]), 1)
             ])) : createCommentVNode("", true)
@@ -9613,7 +9836,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }),
               createVNode(_component_v_col, { cols: "10" }, {
                 default: withCtx(() => [
-                  createElementVNode("div", _hoisted_3$1, [
+                  createElementVNode("div", _hoisted_3$2, [
                     createElementVNode("div", _hoisted_4$1, toDisplayString(CPU.value), 1),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.instrumentdata[`${unref(Gauge).CPU_LOAD_GAUGE}`].percentile, (perc, index) => {
                       return openBlock(), createElementBlock("div", { key: index }, [
@@ -9639,7 +9862,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               }, {
                 default: withCtx(() => [
                   createElementVNode("div", null, [
-                    createVNode(_sfc_main$5, {
+                    createVNode(_sfc_main$7, {
                       ref_key: "lineChartEx",
                       ref: lineChartEx
                     }, null, 512)
@@ -9771,7 +9994,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               createVNode(_component_v_col, { md: "12" }, {
                 default: withCtx(() => [
                   createElementVNode("div", null, [
-                    createVNode(_sfc_main$6, {
+                    createVNode(_sfc_main$8, {
                       ref_key: "barChartEx",
                       ref: barChartEx
                     }, null, 512)
@@ -10042,21 +10265,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _export_sfc = (sfc, props) => {
-  const target2 = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target2[key] = val;
-  }
-  return target2;
-};
-const UXModelInstrumentServiceCommon = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-02af10f2"]]);
+const UXModelInstrumentServiceCommon = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-02af10f2"]]);
 const _withScopeId = (n) => (pushScopeId("data-v-3eab32be"), n = n(), popScopeId(), n);
-const _hoisted_1$1 = { class: "ststitle" };
-const _hoisted_2$1 = {
+const _hoisted_1$2 = { class: "ststitle" };
+const _hoisted_2$2 = {
   key: 0,
   class: "stssubtitle"
 };
-const _hoisted_3 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "stsbiginfolabel" }, " CPU ", -1));
+const _hoisted_3$1 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "stsbiginfolabel" }, " CPU ", -1));
 const _hoisted_4 = { class: "stsbiginfo" };
 const _hoisted_5 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "stsbiginfolabel" }, " Velocity ", -1));
 const _hoisted_6 = { class: "stsbiginfo" };
@@ -10109,7 +10325,7 @@ const _hoisted_28 = {
   class: "stsinfo",
   style: { "text-align": "right", "padding-left": "15px" }
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "UXModelInstrumentServiceSmall",
   props: {
     modelId: {},
@@ -10371,9 +10587,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => clicked(_ctx.nodeid))
       }, {
         default: withCtx(() => [
-          createElementVNode("div", _hoisted_1$1, [
+          createElementVNode("div", _hoisted_1$2, [
             createTextVNode(toDisplayString(friendlyTitle(_ctx.title)) + " ", 1),
-            _ctx.title.length > 30 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
+            _ctx.title.length > 30 ? (openBlock(), createElementBlock("div", _hoisted_2$2, [
               createTextVNode(toDisplayString(_ctx.title.split("@")[0]) + " ", 1),
               createElementVNode("div", null, toDisplayString(_ctx.title.split("@")[1]), 1)
             ])) : createCommentVNode("", true)
@@ -10385,7 +10601,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             default: withCtx(() => [
               createVNode(_component_v_col, { cols: "6" }, {
                 default: withCtx(() => [
-                  _hoisted_3,
+                  _hoisted_3$1,
                   createElementVNode("div", _hoisted_4, [
                     createTextVNode(toDisplayString(round2Places(CPU.value)) + "% ", 1),
                     createVNode(_component_v_progress_circular, {
@@ -10622,10 +10838,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const UXModelInstrumentServiceSmall = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-3eab32be"]]);
-const _hoisted_1 = ["value"];
-const _hoisted_2 = { key: 0 };
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const UXModelInstrumentServiceSmall = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-3eab32be"]]);
+const _hoisted_1$1 = ["value"];
+const _hoisted_2$1 = { key: 0 };
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "UXModelNode",
   props: {
     modelId: {},
@@ -10669,7 +10885,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           value: svc,
           class: "d-inline-flex align-center justify-center ma-0 pa-0"
         }, [
-          cpu(svc) > 0 ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          cpu(svc) > 0 ? (openBlock(), createElementBlock("div", _hoisted_2$1, [
             (openBlock(), createBlock(resolveDynamicComponent(_ctx.smallMode ? UXModelInstrumentServiceSmall : UXModelInstrumentServiceCommon), {
               isleafnode: false,
               "model-id": props.modelId,
@@ -10680,11 +10896,239 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               onMyclick: navigate
             }, null, 40, ["model-id", "nodeid", "contextdata", "instrumentdata", "title"]))
           ])) : createCommentVNode("", true)
-        ], 8, _hoisted_1);
+        ], 8, _hoisted_1$1);
       }), 128);
     };
   }
 });
+const _hoisted_1 = /* @__PURE__ */ createElementVNode("div", null, " UXTestForm ", -1);
+const _hoisted_2 = { class: "text-wrap" };
+const _hoisted_3 = { class: "ml-0 text-caption" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "UXTestForm",
+  props: {
+    showFormValues: { type: Boolean, default: true }
+  },
+  setup(__props, { expose: __expose }) {
+    onMounted(() => {
+      console.log(chalk$1.green("onMounted"));
+    });
+    const formData = ref([
+      {
+        elementType: "textField",
+        model: "My test Profile",
+        label: "Profile Name",
+        hint: "Profile name. Used as output file name."
+      },
+      {
+        elementType: "radio",
+        model: "so2",
+        radioGroup: [
+          {
+            key: "o1",
+            label: "Option One",
+            value: "so1"
+          },
+          {
+            key: "o2",
+            label: "Option Two",
+            value: "so2"
+          }
+        ]
+      },
+      {
+        elementType: "slider",
+        model: 5,
+        description: "Some description for the slider one."
+      },
+      {
+        elementType: "slider",
+        model: 2,
+        description: "Some description for the slider two."
+      },
+      {
+        elementType: "checkbox",
+        model: true,
+        description: "Some description for checkbox 1"
+      },
+      {
+        elementType: "divider"
+      },
+      {
+        elementType: "checkbox",
+        model: false,
+        description: "Some description for checkbox 2"
+      }
+    ]);
+    __expose({
+      formData
+    });
+    return (_ctx, _cache) => {
+      const _component_v_divider = resolveComponent("v-divider");
+      const _component_v_row = resolveComponent("v-row");
+      const _component_v_col = resolveComponent("v-col");
+      const _component_v_radio = resolveComponent("v-radio");
+      const _component_v_radio_group = resolveComponent("v-radio-group");
+      const _component_v_text_field = resolveComponent("v-text-field");
+      const _component_v_checkbox = resolveComponent("v-checkbox");
+      const _component_v_slider = resolveComponent("v-slider");
+      const _component_v_container = resolveComponent("v-container");
+      return openBlock(), createBlock(_component_v_container, { class: "yellowgreen" }, {
+        default: withCtx(() => [
+          createVNode(_component_v_row, null, {
+            default: withCtx(() => [
+              _hoisted_1,
+              createVNode(_component_v_divider)
+            ]),
+            _: 1
+          }),
+          _ctx.showFormValues ? (openBlock(), createBlock(_component_v_row, { key: 0 }, {
+            default: withCtx(() => [
+              createVNode(_component_v_col, { cols: "12" }, {
+                default: withCtx(() => [
+                  (openBlock(true), createElementBlock(Fragment, null, renderList(formData.value, (formDataElement, index) => {
+                    return openBlock(), createBlock(_component_v_row, {
+                      key: index,
+                      class: "ml-1 text-caption"
+                    }, {
+                      default: withCtx(() => [
+                        createTextVNode(toDisplayString(formDataElement.model), 1)
+                      ]),
+                      _: 2
+                    }, 1024);
+                  }), 128))
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          })) : createCommentVNode("", true),
+          createVNode(_component_v_row, null, {
+            default: withCtx(() => [
+              createVNode(_component_v_divider)
+            ]),
+            _: 1
+          }),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(formData.value, (formDataElement, index) => {
+            return openBlock(), createBlock(_component_v_row, { key: index }, {
+              default: withCtx(() => [
+                formDataElement.elementType.localeCompare("divider") === 0 ? (openBlock(), createBlock(_component_v_col, {
+                  key: 0,
+                  cols: "12",
+                  class: "ma-0 pa-0"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_divider)
+                  ]),
+                  _: 1
+                })) : createCommentVNode("", true),
+                formDataElement.elementType.localeCompare("radio") === 0 ? (openBlock(), createBlock(_component_v_col, {
+                  key: 1,
+                  cols: "12",
+                  class: "ma-0 pa-0"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_radio_group, {
+                      modelValue: formDataElement.model,
+                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
+                      "hide-details": true
+                    }, {
+                      default: withCtx(() => [
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(formDataElement.radioGroup, (n) => {
+                          return openBlock(), createBlock(_component_v_radio, {
+                            key: n.key,
+                            label: `${n.label}`,
+                            value: n.value
+                          }, null, 8, ["label", "value"]);
+                        }), 128))
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                formDataElement.elementType.localeCompare("textField") === 0 ? (openBlock(), createBlock(_component_v_col, {
+                  key: 2,
+                  cols: "12",
+                  class: "ma-0 pa-0"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_text_field, {
+                      modelValue: formDataElement.model,
+                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
+                      label: formDataElement.label,
+                      required: "",
+                      hint: formDataElement.hint,
+                      "persistent-hint": ""
+                    }, null, 8, ["modelValue", "onUpdate:modelValue", "label", "hint"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                formDataElement.elementType.localeCompare("checkbox") === 0 ? (openBlock(), createBlock(_component_v_col, {
+                  key: 3,
+                  cols: "12",
+                  class: "ma-0 pa-0"
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_v_checkbox, {
+                      modelValue: formDataElement.model,
+                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
+                      "hide-details": true
+                    }, {
+                      label: withCtx(() => [
+                        createElementVNode("div", _hoisted_2, toDisplayString(formDataElement.description), 1)
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true),
+                formDataElement.elementType.localeCompare("slider") === 0 ? (openBlock(), createBlock(_component_v_col, {
+                  key: 4,
+                  cols: "12",
+                  class: "mx-3",
+                  style: { "padding": "0 10px 0 0" }
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_3, toDisplayString(formDataElement.description), 1),
+                    createVNode(_component_v_slider, {
+                      modelValue: formDataElement.model,
+                      "onUpdate:modelValue": ($event) => formDataElement.model = $event,
+                      class: "align-center",
+                      max: "5",
+                      min: "1",
+                      step: "1",
+                      "show-ticks": "always",
+                      "tick-size": "6",
+                      "hide-details": ""
+                    }, {
+                      append: withCtx(() => [
+                        createVNode(_component_v_text_field, {
+                          modelValue: formDataElement.model,
+                          "onUpdate:modelValue": ($event) => formDataElement.model = $event,
+                          "hide-details": "",
+                          "single-line": "",
+                          density: "compact",
+                          type: "number",
+                          style: { "width": "110px" },
+                          variant: "outlined"
+                        }, null, 8, ["modelValue", "onUpdate:modelValue"])
+                      ]),
+                      _: 2
+                    }, 1032, ["modelValue", "onUpdate:modelValue"])
+                  ]),
+                  _: 2
+                }, 1024)) : createCommentVNode("", true)
+              ]),
+              _: 2
+            }, 1024);
+          }), 128))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
 export {
   ClientStorageFactory,
   ClientStorageType,
@@ -10704,14 +11148,16 @@ export {
   STSWorkerManagerPluginKey,
   TelemetryStore,
   URI_BASE_VUEUTILS,
-  _sfc_main$6 as UXBarChart,
-  _sfc_main$5 as UXLineChart,
+  _sfc_main$8 as UXBarChart,
+  _sfc_main$7 as UXLineChart,
+  UXModelInstrumentAgentCommon,
   UXModelInstrumentServiceCommon,
   UXModelInstrumentServiceSmall,
-  _sfc_main as UXModelNode,
-  _sfc_main$4 as UXMultiBarChart,
-  _sfc_main$3 as UXRadialChart,
-  _sfc_main$7 as UXTestForm,
+  _sfc_main$1 as UXModelNavigator,
+  _sfc_main$1 as UXModelNode,
+  _sfc_main$6 as UXMultiBarChart,
+  _sfc_main$5 as UXRadialChart,
+  _sfc_main as UXTestForm,
   WorkerInstance,
   _estate,
   eIWMessageCommands,