From 9a70d1cd8d651576b411fc4c50a5c2a4480f3950 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sat, 7 Jan 2023 01:25:47 +0100
Subject: [PATCH 1/9] Added Widget for drone.io

---
 src/components/Widgets/DroneIo.vue | 138 +++++++++++++++++++++++++++++
 1 file changed, 138 insertions(+)
 create mode 100644 src/components/Widgets/DroneIo.vue

diff --git a/src/components/Widgets/DroneIo.vue b/src/components/Widgets/DroneIo.vue
new file mode 100644
index 00000000..63adcab1
--- /dev/null
+++ b/src/components/Widgets/DroneIo.vue
@@ -0,0 +1,138 @@
+<template>
+<div class="droneio-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>
+    </div>
+    <div class="info">
+      <p class="build-name"><a :href="build.git_http_url">{{ build.name }}</a></p>
+      <p class="build-desc"><a :href="build.link + '/' + build.build.number">{{ build.build.number }}</a></p>
+    </div>
+  </div>
+</div>
+</template>
+
+<script>
+import WidgetMixin from '@/mixins/WidgetMixin';
+import { widgetApiEndpoints } from '@/utils/defaults';
+import { capitalize, 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') symbol = '✘';
+      if (status === 'running') symbol = '❖';
+      return `${symbol}`;
+    },
+    formatDate(timestamp) {
+      return timestampToDateTime(timestamp);
+    },
+  },
+  computed: {
+    /* API endpoint, either for self-hosted or managed instance */
+    endpoint() {
+      if (this.options.host) return `${this.options.host}/api/user/builds`;
+      this.error('Drone.io Host is required');
+    },
+    apiKey() {
+      if (!this.options.apiKey) {
+        this.error('An API key is required, please see the docs for more info');
+      }
+      return this.options.apiKey;
+    },
+  },
+  methods: {
+    /* Make GET request to CoinGecko API endpoint */
+    fetchData() {
+      this.overrideProxyChoice = true;
+      const authHeaders = { 'Authorization': `Bearer ${this.apiKey}` };
+      this.makeRequest(this.endpoint, authHeaders).then(
+        (response) => { this.processData(response); },
+      );
+    },
+    /* Assign data variables to the returned data */
+    processData(data) {
+      this.builds = data.slice(0, this.options.limit);
+    },
+    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',
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.droneio-builds-wrapper {
+  color: var(--widget-text-color);
+  .build-row {
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    padding: 0.25rem 0;
+    .status {
+      min-width: 5rem;
+      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); }
+      }
+    }
+    .info {
+      p.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;
+        }
+      }
+      p.build-desc {
+        margin: 0;
+        color: var(--widget-text-color);
+        opacity: var(--dimming-factor);
+        a, a:hover, a:visited, a:active {
+          color: inherit;
+          text-decoration: none;
+        }
+      }
+      p.build-desc::before {
+        content: "#";
+      }
+    }
+    &:not(:last-child) {
+      border-bottom: 1px dashed var(--widget-text-color);
+    }
+  }
+}
+
+</style>
+
+<style lang="scss">
+.build-info-tt {
+  min-width: 20rem;
+}
+</style>

From 71510eeb9330b0e4c750b984038e6069b61740ed Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sat, 7 Jan 2023 01:35:59 +0100
Subject: [PATCH 2/9] Added info for Drone Widget

---
 docs/widgets.md                    | 35 ++++++++++++++++++++++++++++++
 src/components/Widgets/DroneIo.vue |  3 +--
 2 files changed, 36 insertions(+), 2 deletions(-)

diff --git a/docs/widgets.md b/docs/widgets.md
index 783fd26c..485b9635 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -57,6 +57,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.io](#drone-io-builds)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -1910,6 +1911,40 @@ Display info from the Gluetun VPN container public IP API. This can show the IP
 
 ---
 
+### Drone.io Builds
+
+Display the last builds from a (drone.io)(https://www.drone.io] instance. 
+
+<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.io instance
+**`apiKey`** | `string` |  Required | The API key (https://<drone-instance>/account)
+**`limit`** | `integer` |  Optional | Limit the amounts of listed builds.
+
+#### Example
+
+```yaml
+- type: DroneIo
+  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
diff --git a/src/components/Widgets/DroneIo.vue b/src/components/Widgets/DroneIo.vue
index 63adcab1..0924d75b 100644
--- a/src/components/Widgets/DroneIo.vue
+++ b/src/components/Widgets/DroneIo.vue
@@ -18,8 +18,7 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
-import { widgetApiEndpoints } from '@/utils/defaults';
-import { capitalize, timestampToDateTime } from '@/utils/MiscHelpers';
+import { timestampToDateTime } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],

From f0a5c249b0261acf594ca0379e60836ca0b0746a Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sat, 7 Jan 2023 21:12:55 +0100
Subject: [PATCH 3/9] New Window + update support

---
 src/components/Widgets/DroneIo.vue | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/components/Widgets/DroneIo.vue b/src/components/Widgets/DroneIo.vue
index 0924d75b..e426e1c3 100644
--- a/src/components/Widgets/DroneIo.vue
+++ b/src/components/Widgets/DroneIo.vue
@@ -9,8 +9,8 @@
       <p :class="build.build.status">{{ build.build.status | formatStatus }}</p>
     </div>
     <div class="info">
-      <p class="build-name"><a :href="build.git_http_url">{{ build.name }}</a></p>
-      <p class="build-desc"><a :href="build.link + '/' + build.build.number">{{ build.build.number }}</a></p>
+      <p class="build-name"><a :href="build.git_http_url" target="_blank">{{ build.name }}</a></p>
+      <p class="build-desc"><a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a></p>
     </div>
   </div>
 </div>
@@ -54,6 +54,11 @@ export default {
     },
   },
   methods: {
+    update() {
+      this.startLoading();
+      this.fetchData();
+      this.finishLoading();
+    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       this.overrideProxyChoice = true;
@@ -64,7 +69,10 @@ export default {
     },
     /* Assign data variables to the returned data */
     processData(data) {
-      this.builds = data.slice(0, this.options.limit);
+      const results = data.slice(0, this.options.limit).map(obj => {
+        return {...obj, baseurl: this.options.host};
+      });
+      this.builds = results;
     },
     infoTooltip(build) {
       const content = `<b>Trigger:</b> ${build.build.event} by ${build.build.trigger}<br>`

From 97ccdd44b232fb3f050ad32465ba0970201ecdbc Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 05:57:48 +0100
Subject: [PATCH 4/9] Use `drone-io` in config and minor doc improvement for
 drone-io

---
 docs/widgets.md                       | 6 +++---
 src/components/Widgets/WidgetBase.vue | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/docs/widgets.md b/docs/widgets.md
index 485b9635..89eab92a 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -57,7 +57,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.io](#drone-io-builds)
+  - [Drone.io](#droneio-builds)
 - **[System Resource Monitoring](#system-resource-monitoring)**
   - [CPU Usage Current](#current-cpu-usage)
   - [CPU Usage Per Core](#cpu-usage-per-core)
@@ -1913,7 +1913,7 @@ Display info from the Gluetun VPN container public IP API. This can show the IP
 
 ### Drone.io Builds
 
-Display the last builds from a (drone.io)(https://www.drone.io] instance. 
+Display the last builds from a [drone.io](https://www.drone.io) instance. 
 
 <p align="center"><img width="380" src="https://i.ibb.co/nQM3BXj/Bildschirm-foto-2023-01-07-um-01-31-45.png" /></p>
 
@@ -1928,7 +1928,7 @@ Display the last builds from a (drone.io)(https://www.drone.io] instance.
 #### Example
 
 ```yaml
-- type: DroneIo
+- type: drone-io
   options:
     host: https://drone.somedomain.com
     apiKey: my-very-secret-api-key
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index ecd7b536..480df189 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -56,6 +56,7 @@ const COMPAT = {
   'domain-monitor': 'DomainMonitor',
   'code-stats': 'CodeStats',
   'covid-stats': 'CovidStats',
+  'drone-io': 'DroneIo',
   embed: 'EmbedWidget',
   'eth-gas-prices': 'EthGasPrices',
   'exchange-rates': 'ExchangeRates',

From f14eaf5f0b74343dac554fc713201318a7f6eee0 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 06:01:31 +0100
Subject: [PATCH 5/9] WIP: updated drone

---
 src/components/Widgets/DroneIo.vue | 40 ++++++++++++++++++++++++------
 1 file changed, 33 insertions(+), 7 deletions(-)

diff --git a/src/components/Widgets/DroneIo.vue b/src/components/Widgets/DroneIo.vue
index e426e1c3..9687a399 100644
--- a/src/components/Widgets/DroneIo.vue
+++ b/src/components/Widgets/DroneIo.vue
@@ -10,7 +10,21 @@
     </div>
     <div class="info">
       <p class="build-name"><a :href="build.git_http_url" target="_blank">{{ build.name }}</a></p>
-      <p class="build-desc"><a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a></p>
+      <p class="build-desc">
+        <a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a>
+        <template v-if="build.event == 'pull_request'">
+          <a :href="build.build.link" target="_blank" class="droneio-extra-info">#{{ formatPrId(build.build.link) }}</a> to <span class="droneio-info-link">{{ build.build.target }}</span>
+        </template>
+        <template v-if="build.event == 'push'">
+          <a :href="build.build.link" target="_blank" class="droneio-extra-info">push</a> to <span class="droneio-extra-info">{{ build.build.target }}</span>
+        </template>
+        <template v-else>
+          <span class="droneio-extra-info">{{ build.build.target }}</span>
+        </template>
+        <span v-if="build.status == 'running'">{{ build.build.started*1000 | formatTimeAgo }}</span>
+        <span v-else-if="build.status != 'running' || build.status != 'pending' ">{{ formatBuildDuration(build) }}</span>
+        <span v-else>Missing Time</span>
+      </p>
     </div>
   </div>
 </div>
@@ -18,7 +32,7 @@
 
 <script>
 import WidgetMixin from '@/mixins/WidgetMixin';
-import { timestampToDateTime } from '@/utils/MiscHelpers';
+import { getTimeAgo, getTimeDifference, timestampToDateTime } from '@/utils/MiscHelpers';
 
 export default {
   mixins: [WidgetMixin],
@@ -34,11 +48,15 @@ export default {
       if (status === 'success') symbol = '✔';
       if (status === 'failure' || status === 'error') 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 */
@@ -54,11 +72,6 @@ export default {
     },
   },
   methods: {
-    update() {
-      this.startLoading();
-      this.fetchData();
-      this.finishLoading();
-    },
     /* Make GET request to CoinGecko API endpoint */
     fetchData() {
       this.overrideProxyChoice = true;
@@ -82,6 +95,12 @@ export default {
         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>
@@ -125,6 +144,13 @@ export default {
           color: inherit;
           text-decoration: none;
         }
+        .droneio-extra-info {
+          margin: 0.25em;
+          padding: 0.25em;
+          background: var(--item-background);
+          border: 1px solid var(--primary);
+          border-radius: 5px;
+        }
       }
       p.build-desc::before {
         content: "#";

From f43966fdb0199a7969fe6ac8c7e752ee6b8a9ad1 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 06:13:29 +0100
Subject: [PATCH 6/9] Rename DroneIo to DroneCi

Drone CI is the current term used for the Build System (or just Drone,
which is a bit to unspecific for identification)
---
 docs/widgets.md                                  | 11 ++++++-----
 .../Widgets/{DroneIo.vue => DroneCi.vue}         | 16 ++++++++--------
 src/components/Widgets/WidgetBase.vue            |  2 +-
 3 files changed, 15 insertions(+), 14 deletions(-)
 rename src/components/Widgets/{DroneIo.vue => DroneCi.vue} (91%)

diff --git a/docs/widgets.md b/docs/widgets.md
index 89eab92a..a1cd1543 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -57,7 +57,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.io](#droneio-builds)
+  - [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)
@@ -1911,9 +1911,9 @@ Display info from the Gluetun VPN container public IP API. This can show the IP
 
 ---
 
-### Drone.io Builds
+### Drone CI Builds
 
-Display the last builds from a [drone.io](https://www.drone.io) instance. 
+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>
 
@@ -1921,14 +1921,15 @@ Display the last builds from a [drone.io](https://www.drone.io) instance.
 
 **Field** | **Type** | **Required** | **Description**
 --- | --- | --- | ---
-**`host`** | `string` |  Required | The histname of the drone.io instance
-**`apiKey`** | `string` |  Required | The API key (https://<drone-instance>/account)
+**`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.
 
 #### Example
 
 ```yaml
 - type: drone-io
+  updateInterval: 30
   options:
     host: https://drone.somedomain.com
     apiKey: my-very-secret-api-key
diff --git a/src/components/Widgets/DroneIo.vue b/src/components/Widgets/DroneCi.vue
similarity index 91%
rename from src/components/Widgets/DroneIo.vue
rename to src/components/Widgets/DroneCi.vue
index 9687a399..c8b0ff04 100644
--- a/src/components/Widgets/DroneIo.vue
+++ b/src/components/Widgets/DroneCi.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="droneio-builds-wrapper" v-if="builds">
+<div class="droneci-builds-wrapper" v-if="builds">
   <div
     class="build-row"
     v-for="build in builds" :key="build.id"
@@ -13,13 +13,13 @@
       <p class="build-desc">
         <a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a>
         <template v-if="build.event == 'pull_request'">
-          <a :href="build.build.link" target="_blank" class="droneio-extra-info">#{{ formatPrId(build.build.link) }}</a> to <span class="droneio-info-link">{{ build.build.target }}</span>
+          <a :href="build.build.link" target="_blank" class="droneci-extra-info">#{{ formatPrId(build.build.link) }}</a> to <span class="droneci-info-link">{{ build.build.target }}</span>
         </template>
         <template v-if="build.event == 'push'">
-          <a :href="build.build.link" target="_blank" class="droneio-extra-info">push</a> to <span class="droneio-extra-info">{{ build.build.target }}</span>
+          <a :href="build.build.link" target="_blank" class="droneci-extra-info">push</a> to <span class="droneci-extra-info">{{ build.build.target }}</span>
         </template>
         <template v-else>
-          <span class="droneio-extra-info">{{ build.build.target }}</span>
+          <span class="droneci-extra-info">{{ build.build.target }}</span>
         </template>
         <span v-if="build.status == 'running'">{{ build.build.started*1000 | formatTimeAgo }}</span>
         <span v-else-if="build.status != 'running' || build.status != 'pending' ">{{ formatBuildDuration(build) }}</span>
@@ -62,7 +62,7 @@ export default {
     /* API endpoint, either for self-hosted or managed instance */
     endpoint() {
       if (this.options.host) return `${this.options.host}/api/user/builds`;
-      this.error('Drone.io Host is required');
+      this.error('Drone CI Host is required');
     },
     apiKey() {
       if (!this.options.apiKey) {
@@ -72,7 +72,7 @@ export default {
     },
   },
   methods: {
-    /* Make GET request to CoinGecko API endpoint */
+    /* Make GET request to Drone CI API endpoint */
     fetchData() {
       this.overrideProxyChoice = true;
       const authHeaders = { 'Authorization': `Bearer ${this.apiKey}` };
@@ -106,7 +106,7 @@ export default {
 </script>
 
 <style scoped lang="scss">
-.droneio-builds-wrapper {
+.droneci-builds-wrapper {
   color: var(--widget-text-color);
   .build-row {
     display: flex;
@@ -144,7 +144,7 @@ export default {
           color: inherit;
           text-decoration: none;
         }
-        .droneio-extra-info {
+        .droneci-extra-info {
           margin: 0.25em;
           padding: 0.25em;
           background: var(--item-background);
diff --git a/src/components/Widgets/WidgetBase.vue b/src/components/Widgets/WidgetBase.vue
index 480df189..a5cbf1c2 100644
--- a/src/components/Widgets/WidgetBase.vue
+++ b/src/components/Widgets/WidgetBase.vue
@@ -56,7 +56,7 @@ const COMPAT = {
   'domain-monitor': 'DomainMonitor',
   'code-stats': 'CodeStats',
   'covid-stats': 'CovidStats',
-  'drone-io': 'DroneIo',
+  'drone-ci': 'DroneCi',
   embed: 'EmbedWidget',
   'eth-gas-prices': 'EthGasPrices',
   'exchange-rates': 'ExchangeRates',

From 120c351f40fb32eb2c003ac61120f32351c2f610 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 06:17:17 +0100
Subject: [PATCH 7/9] Add update function for DroneCi Widget

---
 src/components/Widgets/DroneCi.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/Widgets/DroneCi.vue b/src/components/Widgets/DroneCi.vue
index c8b0ff04..8d9259e5 100644
--- a/src/components/Widgets/DroneCi.vue
+++ b/src/components/Widgets/DroneCi.vue
@@ -72,6 +72,12 @@ export default {
     },
   },
   methods: {
+    /* Fetch new data, configured by updateInterval */
+    update() {
+      this.startLoading();
+      this.fetchData();
+      this.finishLoading();
+    },
     /* Make GET request to Drone CI API endpoint */
     fetchData() {
       this.overrideProxyChoice = true;

From 0948a3f8458883b2863aeb15a78ef746be58fbe8 Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 08:58:08 +0100
Subject: [PATCH 8/9] updated Format and allow single repo listing

---
 docs/widgets.md                    |   3 +-
 src/components/Widgets/DroneCi.vue | 149 ++++++++++++++++++++---------
 2 files changed, 107 insertions(+), 45 deletions(-)

diff --git a/docs/widgets.md b/docs/widgets.md
index a1cd1543..8c06120b 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -1923,7 +1923,8 @@ Display the last builds from a [Drone CI](https://www.drone.ci) instance. A self
 --- | --- | --- | ---
 **`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.
+**`limit`** | `integer` | _Optional_ | Limit the amounts of listed builds.
+**`repo`** | `string` | _Optional_ | Show only builds of the specified repo
 
 #### Example
 
diff --git a/src/components/Widgets/DroneCi.vue b/src/components/Widgets/DroneCi.vue
index 8d9259e5..4bd32ded 100644
--- a/src/components/Widgets/DroneCi.vue
+++ b/src/components/Widgets/DroneCi.vue
@@ -7,24 +7,50 @@
   >
     <div class="status">
       <p :class="build.build.status">{{ build.build.status | formatStatus }}</p>
+      <span v-if="build.status == 'running'">
+        {{ build.build.started*1000 | formatTimeAgo }} ago
+      </span>
+      <span v-else-if="build.status != 'pending' ">
+        {{ formatBuildDuration(build) }}
+      </span>
+      <span v-else>
+        {{ build.build.created*1000 | formatTimeAgo }} ago
+      </span>
     </div>
     <div class="info">
-      <p class="build-name"><a :href="build.git_http_url" target="_blank">{{ build.name }}</a></p>
-      <p class="build-desc">
-        <a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a>
-        <template v-if="build.event == 'pull_request'">
-          <a :href="build.build.link" target="_blank" class="droneci-extra-info">#{{ formatPrId(build.build.link) }}</a> to <span class="droneci-info-link">{{ build.build.target }}</span>
-        </template>
-        <template v-if="build.event == 'push'">
-          <a :href="build.build.link" target="_blank" class="droneci-extra-info">push</a> to <span class="droneci-extra-info">{{ build.build.target }}</span>
-        </template>
-        <template v-else>
-          <span class="droneci-extra-info">{{ build.build.target }}</span>
-        </template>
-        <span v-if="build.status == 'running'">{{ build.build.started*1000 | formatTimeAgo }}</span>
-        <span v-else-if="build.status != 'running' || build.status != 'pending' ">{{ formatBuildDuration(build) }}</span>
-        <span v-else>Missing Time</span>
-      </p>
+      <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>
@@ -60,9 +86,21 @@ export default {
   },
   computed: {
     /* API endpoint, either for self-hosted or managed instance */
-    endpoint() {
-      if (this.options.host) return `${this.options.host}/api/user/builds`;
-      this.error('Drone CI Host is required');
+    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) {
@@ -80,23 +118,38 @@ export default {
     },
     /* Make GET request to Drone CI API endpoint */
     fetchData() {
-      this.overrideProxyChoice = true;
-      const authHeaders = { 'Authorization': `Bearer ${this.apiKey}` };
-      this.makeRequest(this.endpoint, authHeaders).then(
-        (response) => { this.processData(response); },
-      );
+      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 */
-    processData(data) {
-      const results = data.slice(0, this.options.limit).map(obj => {
-        return {...obj, baseurl: this.options.host};
-      });
+    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>`
+        + `<b>Branch:</b> ${build.build.target}<br>`;
       return {
         content, html: true, trigger: 'hover focus', delay: 250, classes: 'build-info-tt',
       };
@@ -104,8 +157,8 @@ export default {
     formatPrId(link) {
       return link.split('/').pop();
     },
-    formatBuildDuration(build){
-      return getTimeDifference(build.build.started*1000, build.build.finished*1000);
+    formatBuildDuration(build) {
+      return getTimeDifference(build.build.started * 1000, build.build.finished * 1000);
     },
   },
 };
@@ -115,12 +168,12 @@ export default {
 .droneci-builds-wrapper {
   color: var(--widget-text-color);
   .build-row {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 2.5fr;
     justify-content: left;
     align-items: center;
     padding: 0.25rem 0;
     .status {
-      min-width: 5rem;
       font-size: 1rem;
       font-weight: bold;
       p {
@@ -131,9 +184,13 @@ export default {
         &.error { color: var(--danger); }
         &.running { color: var(--neutral); }
       }
+      span {
+        font-size: 0.75rem;
+        color: var(--secondary);
+      }
     }
     .info {
-      p.build-name {
+      div.build-name {
         margin: 0.25rem 0;
         font-weight: bold;
         color: var(--widget-text-color);
@@ -141,25 +198,29 @@ export default {
           color: inherit;
           text-decoration: none;
         }
+        .droneci-build-number::before {
+          content: "#";
+        }
       }
-      p.build-desc {
+      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-info {
-          margin: 0.25em;
-          padding: 0.25em;
-          background: var(--item-background);
-          border: 1px solid var(--primary);
-          border-radius: 5px;
+        .droneci-extra {
+          .droneci-extra-info {
+            margin: 0.25em;
+            padding: 0em 0.25em;
+            background: var(--item-background);
+            border: 1px solid var(--primary);
+            border-radius: 5px;
+          }
         }
-      }
-      p.build-desc::before {
-        content: "#";
+
       }
     }
     &:not(:last-child) {

From db8abb28311df4327b9550d77cf506dca875b28f Mon Sep 17 00:00:00 2001
From: Matthias Bilger <matthias@bilger.info>
Date: Sun, 8 Jan 2023 23:13:01 +0100
Subject: [PATCH 9/9] Added skipped icon, use correct status

---
 src/components/Widgets/DroneCi.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Widgets/DroneCi.vue b/src/components/Widgets/DroneCi.vue
index 4bd32ded..8ffb4e84 100644
--- a/src/components/Widgets/DroneCi.vue
+++ b/src/components/Widgets/DroneCi.vue
@@ -7,10 +7,10 @@
   >
     <div class="status">
       <p :class="build.build.status">{{ build.build.status | formatStatus }}</p>
-      <span v-if="build.status == 'running'">
+      <span v-if="build.build.status == 'running'">
         {{ build.build.started*1000 | formatTimeAgo }} ago
       </span>
-      <span v-else-if="build.status != 'pending' ">
+      <span v-else-if="build.build.status != 'pending' ">
         {{ formatBuildDuration(build) }}
       </span>
       <span v-else>
@@ -72,7 +72,7 @@ export default {
     formatStatus(status) {
       let symbol = '';
       if (status === 'success') symbol = '✔';
-      if (status === 'failure' || status === 'error') symbol = '✘';
+      if (status === 'failure' || status === 'error' || status === 'killed') symbol = '✘';
       if (status === 'running') symbol = '❖';
       if (status === 'skipped') symbol = '↠';
       return `${symbol}`;