Skip to content

Commit

Permalink
Rollback script to homepage template file until a official method to …
Browse files Browse the repository at this point in the history 
…plugins add js scripts is launched.
  • Loading branch information
@emersonfelipesp
emersonfelipesp committed Oct 18, 2024
1 parent dd7f667 commit e5b22fd
Show file tree
Hide file tree
Showing 2 changed files with 225 additions and 15 deletions.
28 changes: 19 additions & 9 deletions netbox_proxbox/static/netbox_proxbox/home.js
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
uvicorn_host = "{{ configuration.netbox_proxbox.fastapi.uvicorn_host }}"
uvicorn_port = "{{ configuration.netbox_proxbox.fastapi.uvicorn_port }}"
/*
This script works, but is not being used as there's not official support
to link external script on head element to plugins.
*/

fastapi_endpoint = `http://${uvicorn_host}:${uvicorn_port}`
websocket_endpoint = `ws://${uvicorn_host}:${uvicorn_port}/ws`
/*
const uvicorn_host = document.getElementById("uvicorn-host")
const uvicorn_port = document.getElementById("uvicorn-port")
console.log("uvicorn_host", uvicorn_host)
console.log("uvicorn_port", uvicorn_port)
const fastapi_endpoint = `http://${uvicorn_host}:${uvicorn_port}`
const websocket_endpoint = `ws://${uvicorn_host}:${uvicorn_port}/ws`
var ws = new WebSocket(websocket_endpoint);
ws.onmessage = function(event) {
// Add WebSockets Messages came from FastAPI backend on GUI
// Add WebSockets Messages came from FasstAPI backend on GUI
var messages = document.getElementById('messages')
var message = document.createElement('li')
Expand Down Expand Up @@ -54,7 +64,7 @@ function sendMessage(event) {
event.preventDefault()
}
async function FastAPIConnectionTest() {
async function FastAPIConnectionTest(fastapi_endpoint) {
let fastapi_docs_endpoint = `${fastapi_endpoint}/docs`
const request_fastapi = await fetch(fastapi_docs_endpoint)
Expand All @@ -80,7 +90,6 @@ function getBody () {
body = body[0]
body.onload = getVersion

}
Expand All @@ -90,7 +99,7 @@ getBody()
async function getVersion() {
// Test FastAPI Proxbox Backend Connection
console.log("1")
FastAPIConnectionTest()
FastAPIConnectionTest(fastapi_endpoint)
console.log("2")
// Get Info from Proxmox and Add to GUI Page, like Connection Status and Error Messages
Expand Down Expand Up @@ -191,4 +200,5 @@ async function getVersion() {
}
}
}
}
*/
212 changes: 206 additions & 6 deletions netbox_proxbox/templates/netbox_proxbox/home.html
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,211 @@
{% extends 'base/layout.html' %}
{% load static %}

<!-- External JSS not working. Needs FIX.
{% block head %}
<script type="text/javascript" src="{% static 'netbox_proxbox/home.js' %}"></script>
{% endblock %}
-->

{% block content %}
<script>
const uvicornHost = "{{ configuration.netbox_proxbox.fastapi.uvicorn_host }}"
const uvicornPort = "{{ configuration.netbox_proxbox.fastapi.uvicorn_port }}"

const fastapiEndpoint = `http://${uvicornHost}:${uvicornPort}`
const websocketEndpoint = `ws://${uvicornHost}:${uvicornPort}/ws`

// Instantiate WebSocket connection to FastAPI backend.
var ws = new WebSocket(websocketEndpoint);

ws.onmessage = function(event) {
// Add WebSockets Messages came from FasstAPI backend on GUI

var messages = document.getElementById('messages')
var message = document.createElement('li')

message.style.lineHeight = '170%'

message.innerHTML = event.data
messages.appendChild(message)

var test = document.getElementById('scrollable-div')
test.scrollTop = test.scrollHeight

};

ws.onerror = function(error) {
console.log("WebSocket error observed: ", error);

fullUpdateButton = document.getElementById('full-update-button')
fullUpdateButton.className = "btn btn-red"

fullUpdateMessage = document.getElementById('full-update-error-message')
fullUpdateMessage.className = "text-red"

let errorMessage = `
<p align=center>
<strong>WebSocket</strong> communication failed with <strong>${error.currentTarget.url}</strong>
<br>The most probably cause is <strong>Proxbox Backend not running</strong> properly.
</p>`

fullUpdateMessage.innerHTML = errorMessage


let statusBadgeError = document.getElementById('fastapi-connection-status')
statusBadgeError.className = "text-bg-red badge p-1"
statusBadgeError.textContent = "Connection Failed!"

let statusErrorMessage = document.getElementById('fastapi-connection-error')
statusErrorMessage.className = "text-bg-red p-2"
statusErrorMessage.innerHTML = errorMessage
}

function sendMessage(event) {
// Send Websocket Message
ws.send("Start")
event.preventDefault()
}

async function FastAPIConnectionTest(fastapiEndpoint) {
let fastapi_docs_endpoint = `${fastapiEndpoint}/docs`

const request_fastapi = await fetch(fastapi_docs_endpoint)
console.log("request_fastapi", request_fastapi)
if (request_fastapi.ok) {
console.log("FastAPI OK")
//onst response_fastapi = await request_fastapi.json()

console.log("request_fastapi", request_fastapi)

statusBadgeFastAPI = document.getElementById('fastapi-connection-status')
statusBadgeFastAPI.className = "text-bg-green badge p-1"
statusBadgeFastAPI.textContent = "Successful!"

}

}

<div>
<script src="{% static 'netbox_proxbox/home.js' %}"></script>

function getBody () {
// Load 'getVersion()' function on HTML
body = document.getElementsByTagName("body")
body = body[0]

body.onload = getVersion
}



getBody()

async function getVersion() {
// Test FastAPI Proxbox Backend Connection
console.log("1")
FastAPIConnectionTest(fastapiEndpoint)
console.log("2")

// Get Info from Proxmox and Add to GUI Page, like Connection Status and Error Messages
let elemento = document.getElementsByClassName("proxmox_version")

for (let item of elemento) {

let td = item.getElementsByTagName("td")
let th = item.getElementsByTagName("th")

if (td[0].id) {
let tdID = td[0].id

const version_endpoint = `${fastapiEndpoint}/proxmox/version?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
const cluster_endpoint = `${fastapiEndpoint}/proxmox/sessions?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
const endpoints = [version_endpoint, cluster_endpoint]

let apiResponses = []

if (endpoints) {
for (let endpoint of endpoints){
try {
const request = await fetch(endpoint)
const response = await request.json()
apiResponses.push(response[0])

if (request.ok && response[0] && response[0].domain) {
let statusBadge = document.getElementById(`proxmox-connection-status-${response[0].domain}`)

if (statusBadge) {
statusBadge.className = "text-bg-green badge p-1"
statusBadge.textContent = "Successful!"
}
}

if (request.status === 400) {

let errorStatusBadge = document.getElementsByClassName("proxmox-connection-check")

let connectionError = document.getElementById(`proxmox-connection-error-${tdID}`)
let connectionErrorFilledMessage = document.getElementById(`proxmox-filled-message-${tdID}`)

if (!connectionErrorFilledMessage) {
connectionError.className = "text-bg-red p-2"
connectionError.innerHTML = `<p id="proxmox-filled-message-${tdID}"><strong>Message: </strong>${response.message}<br><strong>Detail: </strong>${response.message}<br><strong>Python Exception: </strong>${response.python_exception}</p>`
}

for (let item of errorStatusBadge) {

if (item.id.includes(`${tdID}`)) {
console.log("ID FOUND.", item.id)
item.className = "text-bg-red badge p-1"
item.textContent = "Connection Failed!"
}
}
}

} catch (err) {
// If Connection Fails with Proxmox Cluster, continue trying to connect with other Proxmox Cluster Nodes configured.
continue
}
}
}

if (apiResponses) {
if (apiResponses[0]) {
for (let value in apiResponses[0]) {
// Add 'Proxmox Version' and 'Proxmox RepoID' to Proxmox Cluster Card Fields
// Response from FastAPI /proxmox/version
if (th[0].textContent === 'Proxmox Version') {
td[0].innerHTML = `<span class='badge text-bg-grey' title='Proxmox Version'><strong><i class='mdi mdi-tag'></i></strong> ${apiResponses[0][value].version}</span>`
}
if (th[0].textContent === 'Proxmox RepoID') {
td[0].innerHTML = `<span class='badge text-bg-grey' title='Proxmox RepoID'>${apiResponses[0][value].repoid}</span>`
}
}
}

if (apiResponses[1]) {

for (let value in apiResponses[1]) {
// Add 'Proxmox Cluster Name' and 'Proxmox Cluster Mode' to Proxmox Cluster Card Fields
// Response from FastAPI /proxmox/sessions
if (th[0].textContent === 'Proxmox Cluster Name') {
td[0].innerHTML = `<strong>${apiResponses[1].name}</strong>`
}

if (th[0].textContent === 'Proxmox Cluster Mode') {

let mode = apiResponses[1].mode
if ( mode === "standalone" ) { mode = "<span class='badge text-bg-blue' title='Standalone Mode'><strong><i class='mdi mdi-server'></i></strong> Standalone (Single Node)</span>" }
if ( mode === "cluster" ) { mode = "<span class='badge text-bg-purple' title='Cluster Mode'><strong><i class='mdi mdi-server'></i></strong> Cluster (Multiple Nodes)</span>" }
td[0].innerHTML = `${mode}`
}
}
}
}

}
}
}
</script>
<div>
<div class="row mb-3">

<div align=center id="full-update-error-message"></div>
Expand Down Expand Up @@ -256,17 +456,17 @@ <h2>
<tr>
<th scope="row"><strong>Uvicorn Host</strong></th>
{% if configuration.netbox_proxbox.fastapi.uvicorn_host %}
<td>{{ configuration.netbox_proxbox.fastapi.uvicorn_host }}</td>
<td id="uvicorn-host">{{ configuration.netbox_proxbox.fastapi.uvicorn_host }}</td>
{% else %}
<td>{{ default_config.fastapi.uvicorn_host }} (default)</td>
<td id="uvicorn-host">{{ default_config.fastapi.uvicorn_host }} (default)</td>
{% endif %}
</tr>
<tr>
<th scope="row"><strong>Uvicorn Port</strong></th>
{% if configuration.netbox_proxbox.fastapi.uvicorn_port %}
<td>{{ configuration.netbox_proxbox.fastapi.uvicorn_port }}</td>
<td id="uvicorn-port">{{ configuration.netbox_proxbox.fastapi.uvicorn_port }}</td>
{% else %}
<td>{{ default_config.fastapi.uvicorn_port }} (default)</td>
<td id="uvicorn-port">{{ default_config.fastapi.uvicorn_port }} (default)</td>
{% endif %}
</tr>
</table>
Expand Down

0 comments on commit e5b22fd

Please sign in to comment.