Skip to content

Commit

Permalink
Add more styling to Proxmox Cluster cards on homepage
Browse files Browse the repository at this point in the history
  • Loading branch information
emersonfelipesp committed Oct 15, 2024
1 parent fe695ac commit 94afc45
Show file tree
Hide file tree
Showing 2 changed files with 31 additions and 47 deletions.
11 changes: 7 additions & 4 deletions netbox_proxbox/main.py
Original file line number Diff line number Diff line change
Expand Up @@ -106,12 +106,15 @@ async def websocket_endpoint(

from netbox_proxbox.backend.routes.proxbox.clusters import get_nodes, get_virtual_machines

await get_nodes(nb=nb, pxs=pxs, websocket=websocket)
await get_virtual_machines(nb=nb, pxs=pxs, websocket=websocket)

while True:
data = await websocket.receive_text()
await websocket.send_text(f"Message text was: {data}")

if data == "Start":
await get_nodes(nb=nb, pxs=pxs, websocket=websocket)
await get_virtual_machines(nb=nb, pxs=pxs, websocket=websocket)


#await websocket.send_text(f"Message text was: {data}")



Expand Down
67 changes: 24 additions & 43 deletions netbox_proxbox/templates/netbox_proxbox/home.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,7 @@

{% block content %}
<h1>Log Messages</h1>
<!--
<form action="" onsubmit="sendMessage(event)">
<input type="text" id="messageText" autocomplete="off"/>
<button>Send</button>
</form>
-->

<!-- <div style="position: fixed; background-color: white; overflow: auto; border: 5px solid transparent; box-sizing: border-box; border-radius: 1rem; height: 200px; width: 100%;"> -->


<div>
<div style='overflow-y: auto; width: 100%; height: 400px;' id="scrollable-div">
<div class="card" style="flex-direction: cloumn; overflow-y: auto">
Expand All @@ -26,55 +18,42 @@ <h1>Log Messages</h1>
fastapi_endpoint = `http://${uvicorn_host}:${uvicorn_port}`
websocket_endpoint = `ws://${uvicorn_host}:${uvicorn_port}/ws`


console.log(fastapi_endpoint)
console.log(websocket_endpoint)

var ws = new WebSocket(websocket_endpoint);
ws.onmessage = function(event) {

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

message.style.lineHeight = '170%'
//var breakLine = document.createElement('br')

message.innerHTML = event.data

// var content = document.createTextNode(event.data)
// message.appendChild(content)
message.innerHTML = event.data
messages.appendChild(message)

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

};


function sendMessage(event) {
var input = document.getElementById("messageText")
ws.send(input.value)
input.value = ''
// Send Websocket Message

ws.send("Start")
//input.value = ''
event.preventDefault()
}

//function getProxmoxVersion() {

//console.log(domain)

function getBody () {
body = document.getElementsByTagName("body")
body = body[0]

let arrai = Array.from(document.getElementsByTagName("tr"))
console.log("arrai0", arrai)

body.onload = getVersion
console.log("body", body)

}

getBody()


async function getVersion() {

let elemento = document.getElementsByClassName("proxmox_version")
Expand All @@ -83,13 +62,10 @@ <h1>Log Messages</h1>

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

console.log(th[0], th[0].textContent, th[0].innerHTML)

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


const version_endpoint = `${fastapi_endpoint}/proxmox/version?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
const cluster_endpoint = `${fastapi_endpoint}/proxmox/sessions?source=netbox&list_all=false&plugin_name=netbox_proxbox&domain=${tdID}`
const endpoints = [version_endpoint, cluster_endpoint]
Expand All @@ -109,42 +85,47 @@ <h1>Log Messages</h1>
for (let value in apiResponses[0]) {

if (th[0].textContent === 'Proxmox Version') {
td[0].textContent = `${apiResponses[0][value].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].textContent = `${apiResponses[0][value].repoid}`
td[0].innerHTML = `<span class='badge text-bg-grey' title='Proxmox RepoID'>${apiResponses[0][value].repoid}</span>`
}
}

for (let value in apiResponses[1]) {

if (th[0].textContent === 'Proxmox Cluster Name') {
td[0].textContent = `${apiResponses[1].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 = "Standalone" }
if ( mode === "cluster" ) { mode = "Cluster" }
td[0].textContent = `${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-green' title='Cluster Mode'><strong><i class='mdi mdi-server'></i></strong> Cluster (Multiple Nodes)</span>" }
td[0].innerHTML = `${mode}`
}
}

}
}
}
</script>

<div class="row mb-3">


<hr>
{# Full Update Button#}
<div style="margin-bottom: 15px;" class="d-flex justify-content-center noprint">
{% if perms.netbox_proxbox.add_proxmoxvm %}
<a href="{% url 'plugins:netbox_proxbox:proxmoxvm_full_update' %}" target="_blank" class="btn btn-primary">Proxmox Full Update (probably not working on v4.0)</a>
{% endif %}

<form action="" onsubmit="sendMessage(event)">
{% if perms.netbox_proxbox.add_proxmoxvm %}
<button class="btn btn-primary">
Proxmox Full Update (probably not working on v4.0)
<!-- <a href="{% url 'plugins:netbox_proxbox:proxmoxvm_full_update' %}" target="_blank" class="btn btn-primary"></a> -->}
</button>
{% endif %}

</form>
</div>
<div style="margin-bottom: 15px;" class="d-flex justify-content-center noprint">
{% if perms.netbox_proxbox.add_proxmoxvm %}
Expand Down

0 comments on commit 94afc45

Please sign in to comment.