🔀 Merge pull request #1649 from conlan0/master

✨ Tactical RMM Widget

docs/widgets.md

@@ -67,6 +67,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Drone CI Build](#drone-ci-builds)
   - [Linkding](#linkding)
   - [Uptime Kuma](#uptime-kuma)
+  - [Tactical RMM](#tactical-rmm)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -2333,6 +2334,41 @@ Linkding is a self-hosted bookmarking service, which has a clean interface and i
 - **Host**: Self-Hosted (see [Uptime Kuma](https://github.com/louislam/uptime-kuma) )
 - **Privacy**: _See [Uptime Kuma](https://github.com/louislam/uptime-kuma)_
 
+---
+
+### Tactical RMM
+
+[Tactical RMM](https://github.com/amidaware/tacticalrmm) is a self-hosted remote monitoring & management tool.
+
+<p align="center"><a href="https://ibb.co/NVHWpD1"><img src="https://i.ibb.co/ng5Qfd3/Capture.png" alt="Capture" border="0"></a></p>
+
+
+#### Options
+
+| **Field**    | **Type** | **Required** | **Description**                                                          |
+| ------------ | -------- | ------------ | ------------------------------------------------------------------------ |
+| **`url`**    | `string` | Required     | The status endpoint URL (https://api.example.com/core/status/)           |
+| **`token`**  | `string` | Required     | The MON_TOKEN (see https://docs.tacticalrmm.com/tipsntricks/#monitor-your-trmm-instance-via-the-built-in-monitoring-endpoint). |
+
+#### Example
+
+```yaml
+- type: trmm
+  useProxy: true
+  options:
+    token: PkPVKMzbmXgeQDlJWb0WXYvsIk3JvZyadURud2cSTdMia6hUbQ
+    url: https://api.example.com/core/status/
+```
+
+#### Info
+
+- **CORS**: 🟠 Proxied
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Tactical RMM](https://github.com/amidaware/tacticalrmm) )
+- **Privacy**: _See [Tactical RMM](https://github.com/amidaware/tacticalrmm)_
+
+
 ---
 
 ## System Resource Monitoring

services/cors-proxy.js

@@ -33,7 +33,7 @@ module.exports = (req, res) => {
   const requestConfig = {
     method: req.method,
     url: targetURL,
-    json: req.body,
+    data: req.body,
     headers,
   };
 

src/components/Widgets/TacticalRMM.vue

@@ -0,0 +1,227 @@
+<template>
+  <div class="status-section">
+    <template v-if="statusData">
+      <div class="status-wrapper">
+        <div class="status-item">
+          <div class="title">Version</div>
+          <div class="value">{{ statusData.version }}</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Agent Count</div>
+          <div class="value">{{ statusData.agent_count }}</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Client Count</div>
+          <div class="value">{{ statusData.client_count }}</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Site Count</div>
+          <div class="value">{{ statusData.site_count }}</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Disk Usage</div>
+          <div class="value">{{ statusData.disk_usage_percent }}%</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Memory Usage</div>
+          <div class="value">{{ statusData.mem_usage_percent }}%</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Days Until Cert Expires</div>
+          <div class="value">{{ statusData.days_until_cert_expires }}</div>
+        </div>
+        <div class="status-item">
+          <div class="title">Cert Expired</div>
+          <div class="value">{{ statusData.cert_expired ? 'Yes' : 'No' }}</div>
+        </div>
+        <div class="status-item services">
+          <div class="title">Services Running</div>
+          <div class="services-list">
+            <div
+              v-for="(status, service) in statusData.services_running"
+              :key="service"
+              class="service"
+            >
+              <span class="service-name">{{ service }}</span>
+              <span :class="['service-status', status ? 'running' : 'stopped']">
+                {{ status ? 'Running' : 'Stopped' }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <template v-if="errorMessage">
+      <div class="error-message">
+        <span class="text">{{ errorMessage }}</span>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+import axios from 'axios';
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { serviceEndpoints } from '@/utils/defaults';
+
+export default {
+  mixins: [WidgetMixin],
+  props: {
+    options: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      statusData: null,
+      errorMessage: null,
+      errorMessageConstants: {
+        missingToken: 'No Token set',
+        missingUrl: 'No URL set',
+      },
+    };
+  },
+  mounted() {
+    this.fetchData();
+  },
+  computed: {
+    token() {
+      return this.parseAsEnvVar(this.options.token);
+    },
+    url() {
+      return this.parseAsEnvVar(this.options.url);
+    },
+    authHeaders() {
+      return {
+        'Content-Type': 'application/json',
+      };
+    },
+    proxyReqEndpoint() {
+      const baseUrl = process.env.VUE_APP_DOMAIN || window.location.origin;
+      return `${baseUrl}${serviceEndpoints.corsProxy}`;
+    },
+  },
+  methods: {
+    update() {
+      this.startLoading();
+      this.fetchData();
+    },
+    fetchData() {
+      const {
+        authHeaders, url, token, proxyReqEndpoint,
+      } = this;
+
+      if (!this.optionsValid({ url, token })) {
+        return;
+      }
+
+      const targetURL = url;
+      const customHeaders = JSON.stringify(authHeaders);
+
+      axios.post(
+        proxyReqEndpoint,
+        { auth: token },
+        {
+          headers: {
+            'Target-URL': targetURL,
+            CustomHeaders: customHeaders,
+            'Content-Type': 'application/json',
+          },
+        },
+      )
+        .then((response) => {
+          this.processData(response.data);
+        })
+        .catch(() => {
+          this.errorMessage = 'Failed to fetch data';
+        })
+        .finally(() => {
+          this.finishLoading();
+        });
+    },
+    processData(response) {
+      this.statusData = response;
+    },
+    optionsValid({ url, token }) {
+      const errors = [];
+      if (!url) {
+        errors.push(this.errorMessageConstants.missingUrl);
+      }
+      if (!token) {
+        errors.push(this.errorMessageConstants.missingToken);
+      }
+      if (errors.length === 0) {
+        return true;
+      }
+      this.errorMessage = errors.join('\n');
+      return false;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.status-section {
+  background-color: var(--item-background);
+  padding: 1em;
+  border-radius: 8px;
+}
+
+.status-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  color: var(--item-text-color);
+}
+
+.status-item {
+  width: 48%;
+  margin: 1em 0;
+}
+
+.title {
+  font-weight: bold;
+  color: var(--item-text-color);
+}
+
+.value {
+  margin-top: 0.5em;
+  color: var(--item-text-color);
+}
+
+.services-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.service {
+  display: flex;
+  justify-content: space-between;
+  margin: 0.5em 0;
+  width: 100%;
+}
+
+.service-name {
+  font-weight: bold;
+  color: var(--item-text-color);
+}
+
+.service-status {
+  margin-left: 1em;
+}
+
+.service-status.running {
+  color: var(--success);
+  font-weight: bold;
+}
+
+.service-status.stopped {
+  color: var(--danger);
+}
+
+.error-message {
+  color: var(--item-text-color);
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -115,6 +115,7 @@ const COMPAT = {
   'synology-download': 'SynologyDownload',
   'system-info': 'SystemInfo',
   'tfl-status': 'TflStatus',
+  trmm: 'TacticalRMM',
   'uptime-kuma': 'UptimeKuma',
   'wallet-balance': 'WalletBalance',
   weather: 'Weather',