🔀 Merge pull request #1037 from m42e/drone-io-widget

Drone io widget

docs/widgets.md

@@ -58,6 +58,7 @@ Dashy has support for displaying dynamic content in the form of widgets. There a
   - [Nextcloud PHP OPcache](#nextcloud-php-opcache-stats)
   - [Sabnzbd](#sabnzbd)
   - [Gluetun VPN Info](#gluetun-vpn-info)
+  - [Drone CI Build](#drone-ci-builds)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -1947,6 +1948,42 @@ Display info from the Gluetun VPN container public IP API. This can show the IP
 
 ---
 
+### Drone CI Builds
+
+Display the last builds from a [Drone CI](https://www.drone.ci) instance. A self-hosted CI system that uses docker.
+
+<p align="center"><img width="380" src="https://i.ibb.co/nQM3BXj/Bildschirm-foto-2023-01-07-um-01-31-45.png" /></p>
+
+#### Options
+
+**Field** | **Type** | **Required** | **Description**
+--- | --- | --- | ---
+**`host`** | `string` |  Required | The histname of the Drone CI instance.
+**`apiKey`** | `string` |  Required | The API key (https://<your-drone-instance>/account).
+**`limit`** | `integer` | _Optional_ | Limit the amounts of listed builds.
+**`repo`** | `string` | _Optional_ | Show only builds of the specified repo
+
+#### Example
+
+```yaml
+- type: drone-io
+  updateInterval: 30
+  options:
+    host: https://drone.somedomain.com
+    apiKey: my-very-secret-api-key
+    limit: 10
+```
+
+#### Info
+
+- **CORS**: 🟢 Enabled
+- **Auth**: 🟢 Required
+- **Price**: 🟢 Free
+- **Host**: Self-Hosted (see [Drone](https://www.drone.io))
+- **Privacy**: _See [Drone](https://www.drone.io)_
+
+---
+
 ## System Resource Monitoring
 
 ### Glances

src/components/Widgets/DroneCi.vue

@@ -0,0 +1,238 @@
+<template>
+<div class="droneci-builds-wrapper" v-if="builds">
+  <div
+    class="build-row"
+    v-for="build in builds" :key="build.id"
+    v-tooltip="infoTooltip(build)"
+  >
+    <div class="status">
+      <p :class="build.build.status">{{ build.build.status | formatStatus }}</p>
+      <span v-if="build.build.status == 'running'">
+        {{ build.build.started*1000 | formatTimeAgo }} ago
+      </span>
+      <span v-else-if="build.build.status != 'pending' ">
+        {{ formatBuildDuration(build) }}
+      </span>
+      <span v-else>
+        {{ build.build.created*1000 | formatTimeAgo }} ago
+      </span>
+    </div>
+    <div class="info">
+      <div class="build-name">
+        {{ build.name }}
+        <a
+          class="droneci-build-number"
+          :href="build.baseurl + '/' + build.slug + '/' +build.build.number"
+          target="_blank"
+        >{{ build.build.number }}</a>
+      </div>
+      <div class="build-desc">
+        <span class="droneci-extra">
+          <template v-if="build.build.event == 'pull_request'">
+            <a
+              :href="build.build.link"
+              target="_blank"
+              class="droneci-extra-info"
+            >#{{ formatPrId(build.build.link) }}</a> to
+          </template>
+          <template v-else-if="build.build.event == 'push'">
+            <a
+              :href="build.build.link"
+              target="_blank"
+              class="droneci-extra-info"
+            >push</a> to
+          </template>
+          <a
+            :href="build.git_http_url"
+            target="_blank"
+            class="droneci-extra-info"
+          >
+            {{ build.build.target }}
+          </a>
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { getTimeAgo, getTimeDifference, timestampToDateTime } from '@/utils/MiscHelpers';
+
+export default {
+  mixins: [WidgetMixin],
+  components: {},
+  data() {
+    return {
+      builds: null,
+    };
+  },
+  filters: {
+    formatStatus(status) {
+      let symbol = '';
+      if (status === 'success') symbol = '✔';
+      if (status === 'failure' || status === 'error' || status === 'killed') symbol = '✘';
+      if (status === 'running') symbol = '❖';
+      if (status === 'skipped') symbol = '↠';
+      return `${symbol}`;
+    },
+    formatDate(timestamp) {
+      return timestampToDateTime(timestamp);
+    },
+    formatTimeAgo(timestamp) {
+      return getTimeAgo(timestamp);
+    },
+  },
+  computed: {
+    /* API endpoint, either for self-hosted or managed instance */
+    endpointBuilds() {
+      if (!this.options.host) this.error('drone.ci Host is required');
+      return `${this.options.host}/api/user/builds`;
+    },
+    endpointRepoInfo() {
+      if (!this.options.host) this.error('drone.ci Host is required');
+      return `${this.options.host}/api/repos/${this.options.repo}`;
+    },
+    endpointRepoBuilds() {
+      if (!this.options.host) this.error('drone.ci Host is required');
+      return `${this.options.host}/api/repos/${this.options.repo}/builds`;
+    },
+    repo() {
+      if (this.options.repo) return this.options.repo;
+      return false;
+    },
+    apiKey() {
+      if (!this.options.apiKey) {
+        this.error('An API key is required, please see the docs for more info');
+      }
+      return this.options.apiKey;
+    },
+  },
+  methods: {
+    /* Fetch new data, configured by updateInterval */
+    update() {
+      this.startLoading();
+      this.fetchData();
+      this.finishLoading();
+    },
+    /* Make GET request to Drone CI API endpoint */
+    fetchData() {
+      const authHeaders = { Authorization: `Bearer ${this.apiKey}` };
+      if (this.repo !== false) {
+        this.makeRequest(this.endpointRepoInfo, authHeaders).then(
+          (repoInfo) => {
+            this.makeRequest(this.endpointRepoBuilds, authHeaders).then(
+              (buildInfo) => {
+                this.processRepoBuilds(repoInfo, buildInfo);
+              },
+            );
+          },
+        );
+      } else {
+        this.makeRequest(this.endpointBuilds, authHeaders).then(
+          (response) => { this.processBuilds(response); },
+        );
+      }
+    },
+    /* Assign data variables to the returned data */
+    processBuilds(data) {
+      const results = data.slice(0, this.options.limit)
+        .map((obj) => ({ ...obj, baseurl: this.options.host }));
+      this.builds = results;
+    },
+    processRepoBuilds(repo, builds) {
+      const results = builds.slice(0, this.options.limit)
+        .map((obj) => ({ build: { ...obj }, baseurl: this.options.host, ...repo }));
+      this.builds = results;
+    },
+    infoTooltip(build) {
+      const content = `<b>Trigger:</b> ${build.build.event} by ${build.build.trigger}<br>`
+        + `<b>Repo:</b> ${build.slug}<br>`
+        + `<b>Branch:</b> ${build.build.target}<br>`;
+      return {
+        content, html: true, trigger: 'hover focus', delay: 250, classes: 'build-info-tt',
+      };
+    },
+    formatPrId(link) {
+      return link.split('/').pop();
+    },
+    formatBuildDuration(build) {
+      return getTimeDifference(build.build.started * 1000, build.build.finished * 1000);
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.droneci-builds-wrapper {
+  color: var(--widget-text-color);
+  .build-row {
+    display: grid;
+    grid-template-columns: 1fr 2.5fr;
+    justify-content: left;
+    align-items: center;
+    padding: 0.25rem 0;
+    .status {
+      font-size: 1rem;
+      font-weight: bold;
+      p {
+        margin: 0;
+        color: var(--info);
+        &.success { color: var(--success); }
+        &.failure { color: var(--danger); }
+        &.error { color: var(--danger); }
+        &.running { color: var(--neutral); }
+      }
+      span {
+        font-size: 0.75rem;
+        color: var(--secondary);
+      }
+    }
+    .info {
+      div.build-name {
+        margin: 0.25rem 0;
+        font-weight: bold;
+        color: var(--widget-text-color);
+        a, a:hover, a:visited, a:active {
+          color: inherit;
+          text-decoration: none;
+        }
+        .droneci-build-number::before {
+          content: "#";
+        }
+      }
+      div.build-desc {
+        margin: 0;
+        font-size: 0.85rem;
+        color: var(--widget-text-color);
+        opacity: var(--dimming-factor);
+        a, a:hover, a:visited, a:active {
+          color: inherit;
+          text-decoration: none;
+        }
+        .droneci-extra {
+          .droneci-extra-info {
+            margin: 0.25em;
+            padding: 0em 0.25em;
+            background: var(--item-background);
+            border: 1px solid var(--primary);
+            border-radius: 5px;
+          }
+        }
+
+      }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+
+</style>
+
+<style lang="scss">
+.build-info-tt {
+  min-width: 20rem;
+}
+</style>

src/components/Widgets/WidgetBase.vue

@@ -56,6 +56,7 @@ const COMPAT = {
   'domain-monitor': 'DomainMonitor',
   'code-stats': 'CodeStats',
   'covid-stats': 'CovidStats',
+  'drone-ci': 'DroneCi',
   embed: 'EmbedWidget',
   'eth-gas-prices': 'EthGasPrices',
   'exchange-rates': 'ExchangeRates',