mirror of https://github.com/lissy93/dashy
239 lines
6.7 KiB
Vue
239 lines
6.7 KiB
Vue
<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.parseAsEnvVar(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>
|