c0ckp1t 1.0.0

package/core/main-offcanvas.vue

@@ -0,0 +1,99 @@
+<script setup>
+/*
+    offcanvas.vue
+    https://getbootstrap.com/docs/5.0/components/offcanvas/
+
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, markRaw, onMounted, ref, defineAsyncComponent, watch} from 'vue'
+import {store as storeMain, api as apiMain } from 'GlobalStore'
+import {getLogger} from "Logging";
+import node from "/core/nodes/node.vue"
+import ConnectionHeader from "/core/sfc/connection-header.vue"
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'main-offcanvas.vue'
+const logger = getLogger(LOG_HEADER)
+
+// ________________________________________________________________________________
+// LOCAL STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+})
+
+const itemRef = ref(null)
+
+// ________________________________________________________________________________
+// API
+// ________________________________________________________________________________
+function close() {
+  storeMain.mainOffCanvas.hide()
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  storeMain.mainOffCanvas = markRaw(new bootstrap.Offcanvas(itemRef.value))
+  // storeMain.mainOffCanvas.show()
+}
+
+onMounted(async () => {
+  // Add event listeners FIRST (before init() calls show())
+  itemRef.value.addEventListener('show.bs.offcanvas', () => {
+    storeMain.mainOffCanvasOpen = true
+  })
+  
+  itemRef.value.addEventListener('shown.bs.offcanvas', () => {
+    // Measure actual width after fully shown
+    storeMain.mainOffCanvasWidth = itemRef.value.offsetWidth
+  })
+  
+  itemRef.value.addEventListener('hide.bs.offcanvas', () => {
+    storeMain.mainOffCanvasOpen = false
+  })
+  
+  itemRef.value.addEventListener('hidden.bs.offcanvas', () => {
+    storeMain.mainOffCanvasWidth = 0
+  })
+  
+  // THEN initialize and show
+  await init()
+})
+
+</script>
+
+
+<template>
+  <div ref="itemRef" class="offcanvas offcanvas-start" tabindex="-1"  data-bs-scroll="true"
+       data-bs-backdrop="false" aria-labelledby="offcanvasRightLabel">
+
+    <div class="offcanvas-body">
+      <div v-for="(v, k) in storeMain.r" :class="{'registry-active': k === storeMain.selectedInstId}" class="mt-2 mb-2">
+        <connection-header :id="k"></connection-header>
+        <ul v-if="storeMain.r[k].store.root" class="nav nav-pills flex-column"
+            v-show="storeMain.r[k].store.showRegistry">
+          <node :v="storeMain.r[k].store.root" :id="k"></node>
+        </ul>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.offcanvas {
+  width: fit-content;                   /* Shrink to content */
+  max-width: 500px;                     /* Your chosen max-width */
+  top: var(--navbar-height);            /* Start below navbar */
+  height: calc(100vh - var(--navbar-height)); /* Fill remaining viewport */
+  z-index: 1020;                        /* Below navbar (1030) */
+}
+
+</style>
+

package/core/nodes/_api.vue

@@ -0,0 +1,82 @@
+<script setup>
+/* Note this doesn't load because you need VueRouter
+  <RouterView ></RouterView> in parent component that is api place holder node
+
+  Sued where?
+ */
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, onMounted, onUnmounted, defineAsyncComponent, watch, onErrorCaptured, computed} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {api as notify} from "NotifyUtils"
+import {getLogger} from "Logging"
+import {substrAfterFirstSlash} from "JsUtils"
+import {useRouter} from "vue-router";
+
+const router = useRouter()
+
+const InfoApi = defineAsyncComponent(() => import("/core/sfc/info-api.vue"))
+
+const instanceId = computed(() => {
+  return substrAfterFirstSlash(router.currentRoute.value.fullPath)
+})
+
+const selectedNode = computed(() => {
+  return storeMain.r[instanceId.value].store.selectedNode
+})
+
+const adminEndpoint = computed(() => {
+  return selectedNode.value.endpoint.replace("/_admin", "")
+})
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'node/_api.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// ________________________________________________________________________________
+// lcoal store
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  id: LOG_HEADER,
+})
+
+</script>
+
+
+<template>
+
+  <div class="_api" >
+    <x-section extra="fs-4" :visible="true" :k="`API Node for endpoint=${adminEndpoint}`" v-if="selectedNode">
+
+      <template v-slot:header>
+        <ExecButton icon="fa-info" @callback="apiMain.selectDocumentation(storeMain.documentation)"></ExecButton>
+      </template>
+
+      <x-collapse k="CurrentRoute ">
+        <x-json :obj="JSON.parse(JSON.stringify(router.currentRoute._rawValue))"></x-json>
+      </x-collapse>
+
+      <x-section extra="fs-4" :visible="false" :k="`API (${adminEndpoint})`">
+        <info-api :endpoint="adminEndpoint" :instanceId="storeMain.selectedInstId"></info-api>
+      </x-section>
+
+      <x-section extra="fs-4" :visible="true" :k="`Node`">
+        <div class="row mt-4 mb-4">
+          <x-collapse k="Node Entity">
+            <x-json :obj="selectedNode"></x-json>
+          </x-collapse>
+        </div>
+      </x-section>
+
+    </x-section>
+  </div>
+</template>
+
+<style scoped>
+
+</style>

package/core/nodes/node-container.vue

@@ -0,0 +1,103 @@
+<script setup>
+/*
+  Usage: 
+    const P1tLogger = defineAsyncComponent(() => import('/v2/reg/logger.vue'))
+    
+    const NodeContainer = defineAsyncComponent(() => import("/v2/reg/node-container.vue"))
+    <node-container :node="local.node">
+        <p1t-logger :endpoint="props.node.endpoint"></p1t-logger>
+    </node-container>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {onMounted, defineAsyncComponent, reactive} from "vue"
+import {store} from "GlobalStore"
+import {getLogger} from "Logging"
+// import {api as apiRegistry, store as storeRegistry} from "Registry";
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'node-container.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  displayInfo: false,
+  info: {}
+})
+
+// ________________________________________________________________________________
+// PROPERTIES
+// ________________________________________________________________________________
+const props = defineProps({
+  node: Object
+})
+
+async function findApiResources() {
+  const args = ['info']
+  const resp = await apiRegistry.exec(props.node.endpoint, args)
+  logger.info(resp)
+  if (!resp.isOk) {
+    logger.info(`[API_ERROR] - [${local.id}] - findApiResources - ${resp.result}`)
+    return
+  }
+  local.info = JSON.parse(resp.result)
+}
+
+function infoToggle() {
+  local.displayInfo = !local.displayInfo
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  if (store.connected) {
+    findApiResources()
+  } else {
+    setTimeout(async () => { await init() }, 1000) }
+}
+
+onMounted(async () => { init() })
+
+</script>
+
+
+<template>
+  <div class="container">
+    <div class="row mb-2">
+      <div class="col">
+        <x-label k="Endpoint">{{props.node.endpoint}}</x-label>
+      </div>
+      <div class="col-auto">
+        <x-label k="Type">{{props.node.type}}</x-label>
+      </div>
+      <div class="col-auto">
+        <x-button @click="infoToggle" icon="fa-info me-1" class="me-2" :isLoading="local.isLoading"
+                  :extras="local.displayInfo  ? 'btn btn-success' : 'btn btn-dark'">
+          API
+        </x-button>
+      </div>
+    </div>
+
+    <div class="row info" v-if="local.displayInfo">
+      <x-label :isCompact="true" k="stack:">{{local.info.stack}}</x-label>
+      <div v-for="f in local.info.functions">
+        {{ f.name }}  - {{ f.params }}
+      </div>
+    </div>
+
+    <slot></slot>
+  </div>
+</template>
+
+
+<style scoped>
+/* node-container.vue */
+</style>

package/core/nodes/node.vue

@@ -0,0 +1,246 @@
+<script setup>
+/*
+  Usage: 
+    const node = defineAsyncComponent(() => import("/v2/reg/node.vue"))
+    <node :v="storeMain.r[props.id].store.root"></node>
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, computed, onMounted, onUnmounted, defineAsyncComponent} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+
+// must use defineAsyncComponent for recursive component
+const node = defineAsyncComponent(() => import("./node.vue"))
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'node.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+const props = defineProps({
+  v: Object,
+  id: String
+})
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+  root: {},
+  icons: {
+    'CCR_SERVICE': "fa-list",
+    'STORAGE_NAMESPACE': "fa-database",
+    'LOGGER': "fa-scroll",
+    'API': "fa-plug",
+    'WORKFLOW': 'fa-computer' // '
+  }
+})
+
+const name = computed(() => {
+  if (props.v?.children?.length > 0) {
+    return `${props.v.name}/`
+  } else {
+    return `${props.v.name}`
+  }
+})
+
+const endpoint = computed(() => {
+  return storeMain.r[props.id]?.store?.selectedNode?.endpoint
+})
+
+const isParent = computed(() => {
+  return props.v?.children?.length > 0
+})
+
+const icon = computed(() => {
+  if (props.v.type in local.icons) {
+    return local.icons[props.v.type]
+  } else if (isParent.value && !props.v._expanded) {
+    return 'fa-folder'
+  } else if (isParent.value && props.v._expanded) {
+    return 'fa-folder-open'
+  } else if (!isParent.value) {
+    return 'fa-file'
+  } else {
+    'fa-bug'
+  }
+})
+
+// ________________________________________________________________________________
+// EVENTS
+// ________________________________________________________________________________
+async function toggle() {
+  if (isParent.value) {
+    props.v._expanded = !props.v._expanded
+  }
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  if (storeMain.connected) {
+  } else {
+    setTimeout(async () => {
+      await init()
+    }, 1000)
+  }
+}
+
+onMounted(async () => {
+  init()
+})
+
+
+</script>
+
+
+<template>
+  <li v-if="storeMain.r[props.id].store">
+    <div class="content" :style="{ '--level': props.v.depth }">
+      <i class="fa-solid me-1" :class="icon" @click="toggle"></i>
+      <span :class="{'name': endpoint === props.v.endpoint}" class="folder" @click="storeMain.r[props.id].selectNode(props.v)" v-if="isParent">{{ name }} </span>
+      <span :class="{'name': endpoint === props.v.endpoint}" class="item" @click="storeMain.r[props.id].selectNode(props.v)" v-else>{{ name }}</span>
+    </div>
+    <ul  v-show="isParent && props.v._expanded">
+      <node v-for="child in props.v.children" :v="child" :key="child.endpoint" :id="props.id"></node>
+    </ul>
+  </li>
+</template>
+
+<style scoped>
+.content {
+  --level: 1;
+}
+/* Remove default list styles and set relative positioning */
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding-left: 1em; /* Indentation for nested lists */
+  padding-top: 0.0em;
+  position: relative;
+}
+
+/* Draw the vertical line for the list */
+ul::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0.5em; /* Align with the indentation */
+  bottom: 0;
+  width: 0;
+  border-left: 1px solid var(--bs-border-color); /* Vertical line */
+}
+
+/* Position list items relative to parent */
+li {
+  position: relative;
+  margin: 0;
+  /* top | left and right | bottom */
+  padding: 0.1em 0 0 0.1em;
+}
+
+/* Draw the horizontal connector line */
+li::before {
+  content: "";
+  position: absolute;
+  top: 1em; /* Position vertically centered with the text */
+  left: -0.5em; /* Align with the vertical line */
+  width: 0.5em; /* Length of the horizontal line */
+  height: 0;
+  border-top: 1px solid var(--bs-border-color); /* Horizontal line */
+}
+
+/* Remove vertical line after the last child */
+li:last-child > ul::before {
+  //display: none;
+}
+
+/* Remove horizontal line from the root node */
+ul:not(:first-of-type)::before {
+  top: 0;
+}
+
+/* Remove horizontal line from last child */
+li:last-child::before {
+  background: var(--bs-body-bg);
+}
+
+/* Styling for selected node */
+.name {
+  color: var(--bs-primary);
+  font-weight: 600;
+  background-color: var(--bs-primary-bg-subtle);
+  border-radius: var(--bs-border-radius-sm);
+}
+
+/* Common styles for items and folders */
+.item,
+.folder {
+  display: inline-block;
+  padding: 0.125rem 0.5rem;
+  border-radius: var(--bs-border-radius-sm);
+  transition: all 0.15s ease-in-out;
+  //border: 1px solid black;
+  //min-width: calc(var(--level) * 20px);
+}
+
+/* Hover effects */
+.item:hover,
+.folder:hover {
+  cursor: pointer;
+  background-color: var(--bs-primary-bg-subtle);
+  color: var(--bs-primary);
+}
+
+/* Specific hover colors */
+.item:hover {
+  color: var(--bs-primary);
+}
+
+
+/* Icons colors */
+.fa-folder {
+  color: var(--bs-warning);
+  transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+.fa-folder-open {
+  color: var(--bs-orange);
+  transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+.fa-file {
+  color: var(--bs-secondary);
+  transition: transform 0.15s ease-in-out, color 0.15s ease-in-out;
+}
+
+/* Icon hover effects */
+i.fa-solid {
+  cursor: pointer;
+}
+
+i.fa-solid:hover {
+  transform: scale(1.15);
+}
+
+.folder:hover {
+  cursor: pointer;
+  color: var(--bs-primary);
+  background-color: var(--bs-primary-bg-subtle);
+}
+
+/* Focus states for accessibility */
+.item:focus-visible,
+.folder:focus-visible {
+  outline: 2px solid var(--bs-primary);
+  outline-offset: 2px;
+}
+
+</style>

package/core/nodes/place-holder.vue

@@ -0,0 +1,47 @@
+<script setup>
+/*
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, onMounted, onUnmounted, defineAsyncComponent, watch, onErrorCaptured, computed} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+
+const InfoApi = defineAsyncComponent(() => import("../components/info-api.vue"))
+
+const selectedNode = computed(() => {
+  return storeMain.r[storeMain.selectedInstId]?.store?.selectedNode
+})
+
+</script>
+
+
+<template>
+
+  <div class="place-holder" v-if="selectedNode">
+    <x-section extra="fs-4" :visible="true" :k="`Place Holder Node (endpoint=${selectedNode.endpoint})`">
+
+      <template v-slot:header>
+        <x-button icon="fa-info" @callback="apiMain.selectDocumentation(storeMain.documentation)"></x-button>
+      </template>
+
+      <x-section extra="fs-4" :visible="false" :k="`API Information`">
+        <info-api :endpoint="selectedNode.endpoint" :instanceId="storeMain.selectedInstId"></info-api>
+      </x-section>
+
+      <x-section extra="fs-4" :visible="false" :k="`Node Information`">
+        <div class="row mt-4 mb-4">
+          <x-collapse k="Node Entity">
+            <x-json :obj="selectedNode"></x-json>
+          </x-collapse>
+        </div>
+      </x-section>
+
+    </x-section>
+  </div>
+</template>
+
+<style scoped>
+
+
+</style>

package/core/nodes/root.vue

@@ -0,0 +1,52 @@
+<script setup>
+/*
+  Vue Component for Root Nodes
+*/
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, onMounted, onUnmounted, defineAsyncComponent, watch, onErrorCaptured, computed} from 'vue'
+import {store as storeMain, methods } from 'GlobalStore'
+import {substrAfterFirstSlash} from "JsUtils";
+
+const Overview = defineAsyncComponent(() => import("../components/overview.vue"))
+
+import {useRouter} from "vue-router";
+const router = useRouter()
+
+const instanceId = computed(() => {
+  return substrAfterFirstSlash(router.currentRoute.value.fullPath)
+})
+const registry= computed(() => {
+  return storeMain.r[instanceId.value]
+})
+
+</script>
+
+
+<template>
+  <x-section extra="fs-4" :visible="true" k="Root Node">
+
+    <div class="row">
+      <div class="col">
+        <x-label k="instanceId">{{ registry?.instanceId ?? 'Invalid Registry' }}</x-label>
+      </div>
+      <div class="col">
+        <x-label k="accessLevel">{{ registry?.store?.context?.accessLevel ?? 'Unknown' }}</x-label>
+      </div>
+      <div class="col">
+        <x-label k="uniqueId">{{ registry?.store?.context?.uniqueId ?? 'Unknown' }}</x-label>
+      </div>
+    </div>
+
+    <div v-if="registry?.store?.context?.accessLevel < 1000" class="mt-4 mb-4">
+      Overview:
+      <Overview></Overview>
+    </div>
+
+    </x-section>
+</template>
+
+<style scoped>
+
+</style>