initial commit of the proxmox lists widget

docs/widgets.md

@@ -58,6 +58,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
  - [Nextcloud System](#nextcloud-system)
  - [Nextcloud Stats](#nextcloud-stats)
  - [Nextcloud PHP OPcache](#nextcloud-php-opcache-stats)
+ - [Proxmox lists](#proxmox-lists)
  - [Sabnzbd](#sabnzbd)
  - [Gluetun VPN Info](#gluetun-vpn-info)
  - [Drone CI Build](#drone-ci-builds)
@@ -1967,6 +1968,64 @@ Shows statistics about PHP OPcache performance on your Nextcloud server.
 - **Host**: Self-Hosted (see [Nextcloud](https://nextcloud.com))
 - **Privacy**: _See [Nextcloud Privacy Policy](https://nextcloud.com/privacy)_
 
+
+---
+
+### Proxmox lists
+
+Shows lists of nodes, containers, and VMs in a Proxmox virtual environment cluster, with a status indicator.
+
+#### Options
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`cluster_url`** | `string` | Required | The URL of the proxmox cluster server. No trailing `/`. for example: `https://proxmox.lan:8006`
+**`user_name`** | `string` | Required | A Proxmox API Username, for example `root@pam` or `dashy@pve`.
+**`token_name`** | `string` | Required | A Proxmox API token name. You can get a token in the API section of the cluster management interface.
+**`token_uuid`** | `string` | Required | The value of the token entered above. This is normally a UUID. 
+**`node`** | `string` | optional | A Proxmox node name. If empty or not supplied, a list of nodes will be shown.
+**`node_data`** | `string` | optional | This is required if a node is selected, Currently this accepts two values, either `lxc` or `qemu` but the widget can be improved to get other types of data from the Proxmox API.
+**`title`** | `string` | optional | A widget title.
+**`title_as_link`** | `boolean` | optional | When this is set to anything other than 0 or false, the title will be linked to the value entered in the `cluster_url` option.
+**`footer`** | `string` | optional | A widget footer.
+**`footer_as_link`** | `boolean` | optional | When this is set to anything other than 0 or false, the title will be linked to the value entered in the `cluster_url` option.
+**`hide_templates`** | `boolean` | optional | When this is set to anything other than 0 or false, templates will be filtered out of the result list.
+
+#### Example
+This will show the list of nodes.
+```yaml
+ - type: proxmox-lists
+ useProxy: true 
+ options:
+ cluster_url: https://proxmox.lan:8006
+ user_name: root@pam
+ token_name: dashy
+ token_uuid: bfb152df-abcd-abcd-abcd-ccb95a472d01
+```
+This will show the list of VMs, with a title and a linked fotter, hiding VM templates.
+```yaml
+ - type: proxmox-lists
+ useProxy: true 
+ options:
+ cluster_url: https://proxmox.lan:8006
+ user_name: root@pam
+ token_name: dashy
+ token_uuid: bfb152df-abcd-abcd-abcd-ccb95a472d01
+ node: proxmox
+ node_data: qemu
+ title: Proxmox VMs
+ title_as_link: false
+ footer: Proxmox
+ footer_as_link: true
+ hide_templates: 1
+```
+#### Info
+
+- **CORS**: 🟠 Proxied
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Proxmox Virtual Environment](https://proxmox.com/en/proxmox-ve))
+- **Privacy**: _See [Proxmox's Privacy Policy](https://proxmox.com/en/privacy-policy)_
+
 ---
 
 ### Sabnzbd

src/components/Widgets/Proxmox.vue

@@ -0,0 +1,156 @@
+<template>
+ <div class="proxmox-list">
+ <div class="proxmox-title" v-if="title">
+ <a v-if="titleAsLink" class="proxmox-link" :href="clusterUrl" target="_blank">
+ {{ title }}
+ </a>
+ <span v-if="!titleAsLink">{{ title }}</span>
+ </div>
+ <div v-for="(item, key) in data" :key="key" class="proxmox-row">
+ <div v-if="item.node" class="proxmox-cell">{{ item.node }}</div>
+ <div v-if="item.name" class="proxmox-cell">{{ item.name }}</div>
+ <div class="proxmox-cell proxmox-status"><span :class="item.status"></span></div>
+ </div>
+ <div class="proxmox-footer" v-if="footer">
+ <a v-if="footerAsLink" class="proxmox-link" :href="clusterUrl" target="_blank">
+ {{ footer }}
+ </a>
+ <span v-if="!footerAsLink">{{ title }}</span>
+ </div>
+ </div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+
+export default {
+ mixins: [WidgetMixin],
+ components: {},
+ data() {
+ return {
+ data: [],
+ };
+ },
+ computed: {
+ clusterUrl() {
+ if (!this.options.cluster_url) this.error('The cluster URL is required.');
+ return this.options.cluster_url || '';
+ },
+ userName() {
+ if (!this.options.user_name) this.error('The user name is required.');
+ return this.options.user_name || '';
+ },
+ tokenName() {
+ if (!this.options.token_name) this.error('The token name is required.');
+ return this.options.token_name || '';
+ },
+ tokenUuid() {
+ if (!this.options.token_uuid) this.error('The token uuid is required.');
+ return this.options.token_uuid || '';
+ },
+ node() {
+ return this.options.node || '';
+ },
+ nodeData() {
+ return this.options.node_data || false;
+ },
+ hideTemplates() {
+ return this.options.hide_templates || false;
+ },
+ title() {
+ return this.options.title || '';
+ },
+ titleAsLink() {
+ return this.options.title_as_link || false;
+ },
+ footer() {
+ return this.options.footer || '';
+ },
+ footerAsLink() {
+ return this.options.footer_as_link || false;
+ },
+ endpoint() {
+ if (!this.node) {
+ return `${this.clusterUrl}/api2/json/nodes`;
+ }
+ if (this.nodeData) {
+ return `${this.clusterUrl}/api2/json/nodes/${this.node}/${this.nodeData}`;
+ }
+ return '';
+ },
+ authHeaders() {
+ if (this.userName && this.tokenName && this.tokenUuid) {
+ return { Authorization: `PVEAPIToken=${this.userName}!${this.tokenName}=${this.tokenUuid}` };
+ }
+ return false;
+ },
+ },
+ methods: {
+ fetchData() {
+ const auth = this.authHeaders;
+ if (auth) {
+ this.startLoading();
+ this.makeRequest(this.endpoint, auth).then(this.processData);
+ }
+ },
+ processData(data) {
+ this.data = data.data.sort((a, b) => a.vmid > b.vmid);
+ if (this.hideTemplates) {
+ this.data = this.data.filter(item => item.template !== 1);
+ }
+ this.finishLoading();
+ },
+ },
+};
+
+</script>
+
+<style scoped lang="scss">
+
+.proxmox-list {
+ .proxmox-title, .proxmox-footer {
+ outline: 2px solid transparent;
+ border: 1px solid var(--outline-color);
+ border-radius: var(--curve-factor);
+ box-shadow: var(--item-shadow);
+ color: var(--item-text-color);
+ margin: .5rem;
+ padding: 0.3rem;
+ background: var(--item-background);
+ text-align: center;
+
+ a {
+ text-decoration: none;
+ color: var(--item-text-color);
+ }
+ }
+ .proxmox-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ color: var(--widget-text-color);
+ font-size: 1.1rem;
+ .proxmox-cell {
+ display: inline-block;
+ }
+ .proxmox-status{
+ .online, .running {
+ width: 0.8rem;
+ height: 0.8rem;
+ border-radius: 50%;
+ background-color: var(--success);
+ display: block;
+ }
+ }
+ .proxmox-link {
+ display: inline-block;
+ padding: 0.2rem;
+ margin: 0.1rem 0.2rem;
+
+ }
+ &:not(:last-child) {
+ border-bottom: 1px dashed var(--widget-text-color);
+ }
+ }
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -99,6 +99,7 @@ const COMPAT = {
  'pi-hole-stats': 'PiHoleStats',
  'pi-hole-top-queries': 'PiHoleTopQueries',
  'pi-hole-traffic': 'PiHoleTraffic',
+ 'proxmox-lists': 'Proxmox',
  'public-holidays': 'PublicHolidays',
  'public-ip': 'PublicIp',
  'rss-feed': 'RssFeed',