c0ckp1t 1.0.0

package/core/pages/connections/connection-header-details.vue

@@ -0,0 +1,80 @@
+<script setup>
+/*
+  Used in the sidebar above the registry tree to display information about the connection
+ */
+// ________________________________________________________________________________
+// IMPORTS
+// ________________________________________________________________________________
+import {reactive, onMounted, computed, onUnmounted, defineAsyncComponent, watch, onErrorCaptured} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+
+const props = defineProps({
+  id: String
+})
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'connection-header.vue'
+const logger = getLogger(LOG_HEADER)
+logger.debug("[INIT]")
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const local = reactive({
+  id: LOG_HEADER,
+  isLoading: false,
+})
+
+const registry = storeMain.r[props.id]
+</script>
+
+
+<template>
+  <div class="connection-header"   @click="apiMain.routeByEndpoint(`/${props.id}`)">
+
+    <div class="card text-center">
+      <div class="card-header press p-1" >
+        <div class="row">
+          <div class="col">
+            <div class="instance-id text-primary fw-bold ">{{ registry?.instanceId || 'Invalid Registry'}}</div>
+          </div>
+          <div class="col">
+            <i class="text-success fa-solid fa-globe ms-1"
+               :class="{ 'text-success': registry.connection.state.isConnected, 'text-warning': !registry.connection.state.isConnected }"></i>
+            <span class="state-text ms-1 fw-bold">{{ registry.connection.state.sessionStateString }}</span>
+          </div>
+        </div>
+      </div>
+      <div class="card-body">
+        <div class="row">
+          <div class="col">
+            <x-label :isCompact="true" k="Username:">{{registry.connection.store.username}}</x-label>
+          </div>
+          <div class="col">
+            <x-label :isCompact="true" k="URL:">{{registry.connection.url}}</x-label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+
+
+  </div>
+</template>
+
+<style scoped>
+.press {
+  background-color: #212529;
+  color: #b1cfe9;
+  cursor: pointer;
+  line-height: 1.1rem;
+  text-align: center;
+}
+
+.press:hover {
+  background-color: #000000;
+  font-size: 1.1rem;
+}
+</style>

package/core/pages/connections/page-connection-default.vue

@@ -0,0 +1,92 @@
+<script setup>
+/**
+ * Manages the default connection
+ */
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import {ref, markRaw, reactive, watch, onMounted, computed} from 'vue'
+import {store as storeMain, api as methods} from 'GlobalStore'
+import {getLogger} from "Logging";
+import ClientStorage2 from  "core/ClientStorage2.mjs"
+import Constants from 'Constants'
+const storage = new ClientStorage2("auth", "default")
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'admin/page-connection.vue'
+const logger = getLogger(LOG_HEADER)
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+});
+
+
+const registry = storeMain.r['default']
+
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function init() {
+  const resGet = await storage.storageGet("authEntity")
+  if(resGet !== null) {
+    logger.info(`[AuthEntity] - read`)
+    console.log(resGet)
+    return
+  }
+  const authEntity = await storage.build("authEntity", {
+    hostname: Constants.HOSTNAME,
+    port: parseInt(Constants.PORT) + 1,
+    protocol: Constants.PROTOCOL,
+    endpoint: "socket",
+    username: Constants.defaultUsername,
+    password: Constants.defaultPassword,
+    isSecure: Constants.IS_SECURE,
+  }, "OBJECT")
+  storage.storageCreate(authEntity)
+
+  logger.info("[AuthEntity] - created")
+  console.log(authEntity)
+}
+
+onMounted(() => {
+  init()
+})
+
+</script>
+
+
+<template>
+  <x-section extra="fs-4" :visible="true" :k="`Default Connection`">
+
+    <div class="row">
+      <x-collapse k="Registry" >
+        <x-json :obj="registry"></x-json>
+      </x-collapse>
+    </div>
+
+    <x-label k="Instance Id: ">{{registry?.instanceId}}</x-label>
+
+    <p class="mt-2 fw-bold">
+      This connection is always valid because it loaded through HTTP or HTTPS as static content.
+    </p>
+
+    <p  class="fw-bold">
+    If this connection was not valid you wouldn't be seeing this or any page.
+    </p>
+
+    <x-collapse k="View Raw Entity" class="row mt-2 mb-2">
+      <x-json :obj="registry"></x-json>
+    </x-collapse>
+
+  </x-section>
+</template>
+
+
+<style scoped>
+</style>

package/core/pages/connections/page-connection.vue

@@ -0,0 +1,176 @@
+<script setup>
+/**
+ * Displays and manages the connections to server instances
+ */
+//________________________________________________________________________________
+// IMPORTS
+//________________________________________________________________________________
+import {ref, markRaw, reactive, watch, onMounted, computed} from 'vue'
+import {store as storeMain, api as apiMain} from 'GlobalStore'
+import {getLogger} from "Logging";
+import {useRouter} from "vueRouter";
+import {leafPath} from "JsUtils"
+
+import ClientStorage2 from "core/ClientStorage2.mjs"
+
+const storage = new ClientStorage2("auth", "default")
+import ConnectionHeaderDetails from "core/components/connection-header-details.vue"
+
+const router = useRouter()
+
+// ________________________________________________________________________________
+// LOGGING
+// ________________________________________________________________________________
+const LOG_HEADER = 'admin/page-connection.vue'
+const logger = getLogger(LOG_HEADER)
+
+//________________________________________________________________________________
+// STATE
+//________________________________________________________________________________
+const local = reactive({
+  isLoading: false,
+  showRegistryObject: false,
+  showConnectionObject: false,
+  showConnectionDetails: false,
+  isPasswordVisible: false
+});
+
+// TODO: how to get this ? Probably from URL? or as a prop
+const instanceId = computed(() => leafPath(router.currentRoute.value.fullPath))
+const connection = computed(() => {
+  const instance = storeMain.r[instanceId.value];
+  return instance && instance.connection ? instance.connection : null;
+})
+
+function refreshRegistry() {
+  storeMain.r[instanceId.value].rootNode()
+}
+
+const connectText = computed(() => {
+  if (connection.value.state.isConnected) {
+    return "Authenticate"
+  } else {
+    return "Connect"
+  }
+})
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+async function saveConnection() {
+  await apiMain.saveConnection(instanceId.value, connection.value.store)
+}
+async function deleteConnection() {
+  await apiMain.deleteConnection(instanceId.value)
+}
+
+
+onMounted(() => {
+})
+
+</script>
+
+
+<template>
+  <div class="mt-2 mb-2 connection" v-if="connection">
+    <div class="row mt-2 mb-2">
+      <div class="col"></div>
+      <div class="col-auto">
+        <ExecButton icon="fa-floppy-disk me-1" class="btn btn-dark" :callback="() => saveConnection()" :disabled="!connection.state.connectionDirty">Save</ExecButton>
+      </div>
+      <div class="col-auto">
+        <ExecButton icon="fa-trash me-1" class="btn btn-dark" :callback="() => deleteConnection()">Delete</ExecButton>
+      </div>
+    </div>
+
+    <connection-header-details :id="instanceId" :key="instanceId"></connection-header-details>
+
+    <div class="row mt-2 mb-1 justify-content-center">
+      <div class="col-auto">
+        <x-button icon="fa-rotate-right me-1" :isLoading="local.isLoading" @callback="refreshRegistry">
+          Refresh Registry
+        </x-button>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Connection Details" v-model="local.showConnectionDetails"></x-toggle>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Connection Entity" v-model="local.showConnectionObject"></x-toggle>
+      </div>
+      <div class="col-auto">
+        <x-toggle k="Registry Entity" v-model="local.showRegistryObject"></x-toggle>
+      </div>
+    </div>
+
+    <div class="row mt-2 mb-2" v-if="local.showRegistryObject">
+      <x-json :obj="storeMain.r[instanceId]"></x-json>
+    </div>
+
+    <div class="row mt-2 mb-2" v-if="local.showConnectionObject">
+      <x-json :obj="connection"></x-json>
+    </div>
+
+
+    <div class="row mt-2 mb-2" v-if="local.showConnectionDetails">
+      <x-label k="Connection State:">{{ connection.state.connStateString }}</x-label>
+      <x-label k="Subscription Count:">{{ connection.state.subscriptionCount }}</x-label>
+      <x-label k="Session State:">{{ connection.state.sessionStateString }}</x-label>
+      <x-label k="isConnected:">{{ connection.state.isConnected }}</x-label>
+      <x-label k="isAuthenticated:">{{ connection.state.isAuthenticated }}</x-label>
+      <x-label k="HasErrors:">{{ connection.state.errorMessages.length > 0 }}</x-label>
+
+      <x-label k="Retry Enabled:">{{ connection.state.retryEnable }}</x-label>
+      <x-label k="Retries:">{{ connection.state.retries }}</x-label>
+    </div>
+
+    <div class="mt-2 mb-2" :class="{ 'is-dirty': connection.state.connectionDirty}">
+      <!--      <x-label k="URL">{{ connection.url }}</x-label>-->
+      <x-input k="Host" v-model="connection.store.hostname"></x-input>
+      <x-input k="Port" type="number" v-model="connection.store.port"></x-input>
+      <x-input k="endpoint" v-model="connection.store.endpoint"></x-input>
+      <x-input k="username" v-model="connection.store.username"></x-input>
+      <div class="row">
+        <div class="col">
+          <x-input :type="local.isPasswordVisible ? 'text' : 'password'" v-model="connection.store.password" k="password"></x-input>
+        </div>
+        <div class="col-auto">
+          <x-toggle k="" v-model="local.isPasswordVisible"></x-toggle>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="fw-bold">Errors:</div>
+    <div v-for="errorMsg in connection.state.errorMessages">
+      {{ errorMsg }}
+    </div>
+
+    <div class="row ">
+      <div class="col"></div>
+      <div class="col-auto">
+        <ExecButton icon="" class="btn btn-primary" :callback="() => storeMain.r[instanceId].connect()">{{ connectText }}</ExecButton>
+      </div>
+      <div class="col-auto" v-if="connection.state.isConnected">
+        <ExecButton icon="" class="btn btn-warning" :callback="() => storeMain.r[instanceId].disconnect()">Disconnect</ExecButton>
+      </div>
+    </div>
+
+
+
+
+  </div>
+</template>
+
+
+<style scoped>
+.is-dirty {
+  border-left: 2px solid red;
+}
+
+.connection {
+  background-color: #f3eedc;
+  padding: 1rem;
+  border: 2px solid black;
+}
+
+</style>

package/core/pages/connections/ws-connection.vue

@@ -0,0 +1,146 @@
+<script setup>
+import { ref, reactive, watch, onMounted, computed } from 'vue'
+
+import { actions, state, connStateString, url, isAuthenticated, tryCallLoading} from "WsInterface";
+
+import Constants from 'Constants'
+import {getLogger} from "Logging";
+import {store as storeSession} from "Session";
+
+const props = defineProps({
+  id: String
+})
+
+//________________________________________________________________________________
+// Logging
+//________________________________________________________________________________
+const LOG_HEADER = 'ws-connection.vue'
+const logger = getLogger(LOG_HEADER)
+
+// ________________________________________________________________________________
+// STATE
+// ________________________________________________________________________________
+const backoffMsMax = 20000;
+
+const local = reactive({
+  isLoading: false,
+  isDev: Constants.isDev,
+
+  retries: 0,
+  retryEnable: true,
+  errorReason: "N/A",
+
+})
+
+var timeoutID = null
+
+// ________________________________________________________________________________
+// EVENT METHODS
+// ________________________________________________________________________________
+async function connectRetry() {
+  if (isAuthenticated.value === true) return connStateString.value
+  try {
+    logger.info("connectRetry")
+    await actions.connect()
+  } catch(e) {
+    local.errorReason = e
+    if(local.retryEnable) {
+      const delay = Math.min(local.retries * 2000, backoffMsMax)
+      local.retries += 1
+      timeoutID = setTimeout(() => { connectRetry() }, delay)
+    }
+  }
+}
+
+async function connect() {
+  storeSession.actor.send({type: 'c0ckp1t.connect'});
+}
+
+async function disconnect() {
+  storeSession.actor.send({type: 'c0ckp1t.disconnect'});
+}
+
+// ________________________________________________________________________________
+// INIT
+// ________________________________________________________________________________
+function init() {
+  logger.info("init")
+}
+
+onMounted(async () => { init() })
+
+</script>
+
+
+<template>
+<div class="ws-server">
+
+<div class="row mb-3">
+  <div class="input-group">
+    <span class="input-group-text">Host</span>
+    <input type="text" v-model="state.hostname" name="hostname" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Port</span>
+    <input type="text" v-model="state.port" name="port" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Endpoint</span>
+    <input type="text" v-model="state.endpoint" name="endpoint" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Username</span>
+    <input type="text" v-model="state.username" name="username" class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Password</span>
+    <input type="password" v-model="state.password" name="password" class="form-control">
+  </div>
+</div>
+
+<div class="row mb-3">
+  <div class="input-group">
+    <span class="input-group-text">URL</span>
+    <!-- URL will have to be filled in using JavaScript -->
+    <input type="text" v-model="url" readonly class="form-control">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Connection State</span>
+    <!-- Connection state will also need to be managed with JavaScript -->
+    <input type="text" v-model="connStateString" readonly class="form-control" :class="{'bg-success': connStateString === 'ONLINE'}">
+  </div>
+  <div class="input-group">
+    <span class="input-group-text">Session State</span>
+    <!-- Connection state will also need to be managed with JavaScript -->
+    <input type="text" v-model="storeSession.stateText" readonly class="form-control" >
+  </div>
+  <span class="" v-if="storeSession.errorMessage !== ''">Error Reason: {{storeSession.errorMessage}}</span>
+</div>
+
+<div class="row">
+  <div class="btn-group" role="group" aria-label="Basic example">
+    <button class="btn btn-primary me-1" @click="connect" :disabled="storeSession.isConnected">Connect</button>
+    <button class="btn btn-warning me-1" @click="disconnect" :disabled="!storeSession.isConnected">Disconnect</button>
+
+
+
+  </div>
+  <span class="">Retry Enabled: {{local.retryEnable}}</span>
+  <span class="" v-if="local.retries !== 0">Retries: {{local.retries}}</span>
+</div>
+
+</div>
+
+</template>
+
+
+<style scoped>
+.input-group-text {
+  min-width:100px;
+}
+
+.input-group-text-lg {
+  min-width: 150px;
+}
+
+</style>