updated Format and allow single repo listing

This commit is contained in:
Matthias Bilger 2023-01-08 08:58:08 +01:00
parent 120c351f40
commit 0948a3f845
2 changed files with 107 additions and 45 deletions

View File

@ -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. **`host`** | `string` | Required | The histname of the Drone CI instance.
**`apiKey`** | `string` | Required | The API key (https://<your-drone-instance>/account). **`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 #### Example

View File

@ -7,24 +7,50 @@
> >
<div class="status"> <div class="status">
<p :class="build.build.status">{{ build.build.status | formatStatus }}</p> <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>
<div class="info"> <div class="info">
<p class="build-name"><a :href="build.git_http_url" target="_blank">{{ build.name }}</a></p> <div class="build-name">
<p class="build-desc"> {{ build.name }}
<a :href="build.baseurl + '/' + build.slug + '/' +build.build.number" target="_blank">{{ build.build.number }}</a> <a
<template v-if="build.event == 'pull_request'"> class="droneci-build-number"
<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> :href="build.baseurl + '/' + build.slug + '/' +build.build.number"
</template> target="_blank"
<template v-if="build.event == 'push'"> >{{ build.build.number }}</a>
<a :href="build.build.link" target="_blank" class="droneci-extra-info">push</a> to <span class="droneci-extra-info">{{ build.build.target }}</span> </div>
</template> <div class="build-desc">
<template v-else> <span class="droneci-extra">
<span class="droneci-extra-info">{{ build.build.target }}</span> <template v-if="build.build.event == 'pull_request'">
</template> <a
<span v-if="build.status == 'running'">{{ build.build.started*1000 | formatTimeAgo }}</span> :href="build.build.link"
<span v-else-if="build.status != 'running' || build.status != 'pending' ">{{ formatBuildDuration(build) }}</span> target="_blank"
<span v-else>Missing Time</span> class="droneci-extra-info"
</p> >#{{ 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> </div>
</div> </div>
@ -60,9 +86,21 @@ export default {
}, },
computed: { computed: {
/* API endpoint, either for self-hosted or managed instance */ /* API endpoint, either for self-hosted or managed instance */
endpoint() { endpointBuilds() {
if (this.options.host) return `${this.options.host}/api/user/builds`; if (!this.options.host) this.error('drone.ci Host is required');
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() { apiKey() {
if (!this.options.apiKey) { if (!this.options.apiKey) {
@ -80,23 +118,38 @@ export default {
}, },
/* Make GET request to Drone CI API endpoint */ /* Make GET request to Drone CI API endpoint */
fetchData() { fetchData() {
this.overrideProxyChoice = true; const authHeaders = { Authorization: `Bearer ${this.apiKey}` };
const authHeaders = { 'Authorization': `Bearer ${this.apiKey}` }; if (this.repo !== false) {
this.makeRequest(this.endpoint, authHeaders).then( this.makeRequest(this.endpointRepoInfo, authHeaders).then(
(response) => { this.processData(response); }, (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 */ /* Assign data variables to the returned data */
processData(data) { processBuilds(data) {
const results = data.slice(0, this.options.limit).map(obj => { const results = data.slice(0, this.options.limit)
return {...obj, baseurl: this.options.host}; .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; this.builds = results;
}, },
infoTooltip(build) { infoTooltip(build) {
const content = `<b>Trigger:</b> ${build.build.event} by ${build.build.trigger}<br>` const content = `<b>Trigger:</b> ${build.build.event} by ${build.build.trigger}<br>`
+ `<b>Repo:</b> ${build.slug}<br>` + `<b>Repo:</b> ${build.slug}<br>`
+ `<b>Branch:</b> ${build.build.target}<br>` + `<b>Branch:</b> ${build.build.target}<br>`;
return { return {
content, html: true, trigger: 'hover focus', delay: 250, classes: 'build-info-tt', content, html: true, trigger: 'hover focus', delay: 250, classes: 'build-info-tt',
}; };
@ -104,8 +157,8 @@ export default {
formatPrId(link) { formatPrId(link) {
return link.split('/').pop(); return link.split('/').pop();
}, },
formatBuildDuration(build){ formatBuildDuration(build) {
return getTimeDifference(build.build.started*1000, build.build.finished*1000); return getTimeDifference(build.build.started * 1000, build.build.finished * 1000);
}, },
}, },
}; };
@ -115,12 +168,12 @@ export default {
.droneci-builds-wrapper { .droneci-builds-wrapper {
color: var(--widget-text-color); color: var(--widget-text-color);
.build-row { .build-row {
display: flex; display: grid;
grid-template-columns: 1fr 2.5fr;
justify-content: left; justify-content: left;
align-items: center; align-items: center;
padding: 0.25rem 0; padding: 0.25rem 0;
.status { .status {
min-width: 5rem;
font-size: 1rem; font-size: 1rem;
font-weight: bold; font-weight: bold;
p { p {
@ -131,9 +184,13 @@ export default {
&.error { color: var(--danger); } &.error { color: var(--danger); }
&.running { color: var(--neutral); } &.running { color: var(--neutral); }
} }
span {
font-size: 0.75rem;
color: var(--secondary);
}
} }
.info { .info {
p.build-name { div.build-name {
margin: 0.25rem 0; margin: 0.25rem 0;
font-weight: bold; font-weight: bold;
color: var(--widget-text-color); color: var(--widget-text-color);
@ -141,25 +198,29 @@ export default {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.droneci-build-number::before {
content: "#";
}
} }
p.build-desc { div.build-desc {
margin: 0; margin: 0;
font-size: 0.85rem;
color: var(--widget-text-color); color: var(--widget-text-color);
opacity: var(--dimming-factor); opacity: var(--dimming-factor);
a, a:hover, a:visited, a:active { a, a:hover, a:visited, a:active {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
} }
.droneci-extra-info { .droneci-extra {
margin: 0.25em; .droneci-extra-info {
padding: 0.25em; margin: 0.25em;
background: var(--item-background); padding: 0em 0.25em;
border: 1px solid var(--primary); background: var(--item-background);
border-radius: 5px; border: 1px solid var(--primary);
border-radius: 5px;
}
} }
}
p.build-desc::before {
content: "#";
} }
} }
&:not(:last-child) { &:not(:last-child) {