Adds custom service for Proxmox #519

luixal · 2022-10-08T13:56:49Z

Description

Adds a custom service for Proxmox.

Fixes #516

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist:

I've read & comply with the contributing guidelines
I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers.
I have made corresponding changes to the documentation (README.md).
I've checked my modifications for any breaking changes, especially in the config.yml file

luixal · 2022-10-08T13:59:23Z

Hey @bastienwirtz , it would be great that, if you're merging this, you could add the HACKTOBERFEST-ACCEPTED label to the PR (and maybe the issue) :)

bastienwirtz · 2022-10-09T08:23:17Z

Of course @luixal! And thanks for the contribution!
I don't have a proxmox server on hand to test it but the code looks good 👍

CreationGuy · 2022-10-09T17:31:07Z

Thank you @luixal and @jordantrizz. I did not expect such a response!

luixal · 2022-10-10T07:01:19Z

No needed, but thank you too!

I also have a proxmox node as a home server so it fits my needs too :)

Good thing on this project is that super-easy to contribute :)

bastienwirtz · 2022-10-10T07:05:20Z

Thanks to you folks for contributing!

jordantrizz · 2022-10-10T14:22:41Z

Thank you @luixal and @jordantrizz. I did not expect such a response!

I didn't do much, it was all Luixal.

I'm still looking to show more information similar to a dashboard, id, name, status, CPU, mem, and IP. But this isn't the intent of homer, nor is there is a means to display a block of HTML anywhere aside from "message:". Having the option to displaying full width content would be great for minimalistic dashboards. You're getting a ton of data with the proxmox API so it shouldn't be any extra commands.

luixal · 2022-10-10T15:42:00Z

Yep, putting the minimum info in the card was tricky @jordantrizz .

I was thinking about including an icon on the right side that opens a modal on click to show, for example, the list of VMs and it's status info. I didn't went so far because, as you say, Homer doesn't seem to be oriented into something like that.

jordantrizz · 2022-10-10T15:53:44Z

Yep, putting the minimum info in the card was tricky @jordantrizz .

You made it look easy 😎

I think it would be a good idea for proxmox, portainer, and even being able to grab information from unifi or mikrotik devices. But you're right, I don't know if good for Homer and who we would need to convince.

luixal · 2022-10-10T16:25:00Z

I don't see it about convincing anyone, I see this project as a lightweigth homepage and adding too much info (specially remote info with complex API calls) would make it too heavy for what it's intended.

Personally, I have the heavy info in Home Assistant's dashboards, which I access from Homer :)

jordantrizz · 2022-10-10T16:38:51Z

Makes sense, I really should be looking at Home Assistant as it has a ton of other integrations I would need. What's the overhead of running Home Assistant, would a Synology be enough?

luixal · 2022-10-11T11:30:01Z

Shouldn't be too much. There's people who runs it on a RaspberryPi and a bunch of people running it on Synology devices :)

bastienwirtz · 2022-10-11T17:27:45Z

Hey @luixal, could you add a static copy of the proxmox API output in the dummy-data folder, like this.
So we could add it to the demo page to show it working on fake data :)

PS: I'll look into your other PRs soon!

luixal · 2022-10-11T18:30:49Z

Sure! Just don't merge the last PR related to proxmox and I can add it there.

bastienwirtz · 2022-10-12T08:00:29Z

Cool ! Thanks @luixal.

luixal · 2022-10-12T14:23:19Z

Not sure if this is correctly set up, @bastienwirtz is there any way to test this locally?

I've made the subfolders and put the responses from the api into index files (I've tried .html and .php) but I can't get it to work locally.

The service makes two api calls (both of them GET methods). I've hardcoded the node field to node1:

`/api2/json/nodes/node1/status`

and

/api2/json/nodes/node1/status

I've created this structure. Following the pihole example i tried with .php files and also with .html:

dummy-data/
├── _headers
├── pihole
│   └── api.php
├── proxmox
│   └── api2
│       └── json
│           └── nodes
│               └── node1
│                   ├── qemu
│                   │   └── index.html
│                   └── status
│                       └── index.php
└── README.md

but none seem to work.

I've configured my yml like this:

- name: "Proxmox - Node1"
        logo: "https://camo.githubusercontent.com/2df2ac41e1b8a1484be236c75e395981b31bfd670eff46b5c182ea0be9475310/68747470733a2f2f7777772e70726f786d6f782e636f6d2f696d616765732f70726f786d6f782f50726f786d6f785f73796d626f6c5f7374616e646172645f6865782e706e67"
        type: "Proxmox"
        tag: "sys"
        url: "https://localhost:5173/proxmox"
        node: "node1"
        warning_value: 50
        danger_value: 80
        api_token: "PVEAPIToken=root@pam!monitoring=b47646c1asdf555"

and queries are sent to:

https://localhost:5173/proxmox/api2/json/nodes/node1/status

but they throw an ERR_TIMED_OUT message after some seconds. I've tried the url manually (even adding the index.html or index.php) but they don't work.

Any idea about what's wrong or how to test this? or should I make the PR like this and you handle the rest?

bastienwirtz · 2022-10-12T14:31:14Z

qemu and status should not be folders but files containing the data. There is no default file to serve, so the final element in the path must be the file containing the data.

bastienwirtz · 2022-10-12T14:48:24Z

@luixal To test it you have to serve the dummy-data directory using a webserver. Anything can work, but it must accept CORS requesst. For example, this should do the job (requires npm (which comes with npx) installed):

cd dummy-data
npx http-server --cors

CreationGuy · 2022-10-12T16:16:26Z

Not sure if this is the right place. I have a CORS error on homer for the Proxmox query. Proxmox Homer lable says:
Error Loading Info!

Browser says:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://proxmox.my.lan/api2/json/nodes/pve/status. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

TypeError: NetworkError when attempting to fetch resource. Proxmox.46325f92.js:1:1007

Here's my Custom Locations script/code in Ngninx Proxy Manager for proxmox.my.lan:

if ($request_method = 'OPTIONS') {
 
add_header 'Access-Control-Allow-Origin' '*';
 
add_header 'Access-Control-Allow-Credentials' 'true';
 
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 
add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,x-api-key';
 
add_header 'Access-Control-Max-Age' 1728000;
 
add_header 'Content-Type' 'text/plain charset=UTF-8';
 
add_header 'Content-Length' 0;
 
return 204;
 
}
 
if ($request_method = 'POST') {
 
add_header 'Access-Control-Allow-Origin' '*';
 
add_header 'Access-Control-Allow-Credentials' 'true';
 
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 
add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,x-api-key';
 
}
 
if ($request_method = 'GET') {
 
add_header 'Access-Control-Allow-Origin' '*';
 
add_header 'Access-Control-Allow-Credentials' 'true';
 
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
 
add_header 'Access-Control-Allow-Headers' 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,x-api-key';
 
}

And, homer config:

     - name: "Proxmox"
        logo: "assets/icons/logo-proxmox.webp"
        type: "Proxmox"
        tag: "server"
        url: "https://proxmox.my.lan"
        node: "pve"
        warning_value: 50
        danger_value: 80
        api_token: "PVEAPIToken=root@pam!monitor=removed-token-for-security"

luixal · 2022-10-12T21:28:23Z

@bastienwirtz ok, I was thinking that Homer served this files directly on the demo app. In case is useful for someone, I had to use:

npx http-server --cors=Authorization

for CORS to accept the Authorization header proxmox needs. I'll make a PR with this data.

@CreationGuy I'm using this in the Advanced tab in NGINX Proxy Manager (not sure if everyhing is needed):

location / {
	add_header 'Access-Control-Allow-Origin' '*';
	add_header 'Access-Control-Allow-Headers' "Authorization";
	add_header 'Access-Control-Allow-Credentials' 'true';
	add_header 'Access-Control-Allow-Methods' 'GET,OPTIONS';
	add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
	
	
    if ($request_method = 'OPTIONS') {
      add_header 'Access-Control-Allow-Origin' '*';
      add_header 'Access-Control-Allow-Credentials' 'true';
      add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
      add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
      add_header 'Access-Control-Max-Age' 1728000;
      add_header 'Content-Type' 'text/plain charset=UTF-8';
      add_header 'Content-Length' 0;
      return 204;
    }

    include conf.d/include/proxy.conf;
}

CreationGuy · 2022-10-12T21:38:58Z

I swapped to that, getting:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://proxmox.my.lan/api2/json/nodes/pve/status. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 502.

If I go to that status page above, I get:
502 Bad Gateway
openresty

If I put my code back, I don't get open resety error.

CreationGuy · 2022-10-14T03:18:35Z

I can't get it to work. What is the
include conf.d/include/proxy.conf;

CreationGuy · 2022-10-14T16:00:33Z

@luixal
Another update, I modified my CORS here some:

if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,x-api-key,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,x-api-key,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' '*' always;
add_header 'Access-Control-Allow-Credentials' 'true' always;
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,x-api-key,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
}

I now get this on Homer in the browser console:

Error: Not 2xx response
fetch https://intranet.my.lan/resources/service.541fc1e6.js:1

That URL shows:
const d={props:{proxy:Object},created:function(){this.endpoint=this.item.endpoint||this.item.url,this.endpoint.endsWith("/")&&(this.endpoint=this.endpoint.slice(0,-1))},methods:{fetch:function(t,r,o=!0){var s;let e={};(s=this.proxy)!=null&&s.useCredentials&&(e.credentials="include"),this.item.useCredentials!==void 0&&(e.credentials=this.item.useCredentials===!0?"include":"omit"),e=Object.assign(e,r),t.startsWith("/")&&(t=t.slice(1));let n=this.endpoint;return t&&(n=${this.endpoint}/${t}),fetch(n,e).then(i=>{if(!i.ok)throw new Error("Not 2xx response");return o?i.json():i})}}};export{d as s};

Does that mean I have something wrong in the config.yml?

      - name: "Proxmox"
        logo: "assets/icons/logo-proxmox.webp"
        type: "Proxmox"
        tag: "server"
        url: "https://proxmox.my.lan"
        node: "pve"
        warning_value: 50
        danger_value: 80
        api_token: "PVEAPIToken=root@pam!homer=removed-api"

CreationGuy · 2022-10-14T16:09:36Z

Shoot, I got it working.............. All of this time, it was a check box in PVE. Privilege Separation was checked in the API Token section....

@luixal Is there a way to have the info not get cut off on homer? I can only see as far as Mem: 12.x

luixal · 2022-10-14T16:16:16Z

I noticed that in small screens data get cut off. I'll make something to hide some fields as user needs.

As this happens on small screens, maybe just setting a smaller font size would do the trick.

I'll make some tests and show results.

Could you open an issue about this so we don't hijack this PR?

Adds custom service for Proxmox

68b0d71

Adds total count for VMs.

f6cf266

bastienwirtz added hacktoberfest-accepted Hacktoberfest labels Oct 9, 2022

bastienwirtz approved these changes Oct 9, 2022

View reviewed changes

bastienwirtz merged commit e274807 into bastienwirtz:main Oct 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds custom service for Proxmox #519

Adds custom service for Proxmox #519

luixal commented Oct 8, 2022

luixal commented Oct 8, 2022

bastienwirtz commented Oct 9, 2022

CreationGuy commented Oct 9, 2022

luixal commented Oct 10, 2022

bastienwirtz commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 11, 2022

bastienwirtz commented Oct 11, 2022

luixal commented Oct 11, 2022

bastienwirtz commented Oct 12, 2022

luixal commented Oct 12, 2022

bastienwirtz commented Oct 12, 2022 •

edited

bastienwirtz commented Oct 12, 2022

CreationGuy commented Oct 12, 2022

luixal commented Oct 12, 2022

CreationGuy commented Oct 12, 2022

CreationGuy commented Oct 14, 2022 •

edited

CreationGuy commented Oct 14, 2022

CreationGuy commented Oct 14, 2022

luixal commented Oct 14, 2022

Adds custom service for Proxmox #519

Adds custom service for Proxmox #519

Conversation

luixal commented Oct 8, 2022

Description

Type of change

Checklist:

luixal commented Oct 8, 2022

bastienwirtz commented Oct 9, 2022

CreationGuy commented Oct 9, 2022

luixal commented Oct 10, 2022

bastienwirtz commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 10, 2022

jordantrizz commented Oct 10, 2022

luixal commented Oct 11, 2022

bastienwirtz commented Oct 11, 2022

luixal commented Oct 11, 2022

bastienwirtz commented Oct 12, 2022

luixal commented Oct 12, 2022

bastienwirtz commented Oct 12, 2022 • edited

bastienwirtz commented Oct 12, 2022

CreationGuy commented Oct 12, 2022

luixal commented Oct 12, 2022

CreationGuy commented Oct 12, 2022

CreationGuy commented Oct 14, 2022 • edited

CreationGuy commented Oct 14, 2022

CreationGuy commented Oct 14, 2022

luixal commented Oct 14, 2022

bastienwirtz commented Oct 12, 2022 •

edited

CreationGuy commented Oct 14, 2022 •

edited