a
/
agola-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #59 from sgotti/format_with_prettier
agola/agola-web/agola web build/test The run is pending Details 

*: Format with prettier
This commit is contained in:
Simone Gotti 2022-02-24 09:48:46 +01:00 committed by GitHub
parent ca0c494425 3f2c57394a
commit 77f7af09ab
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
55 changed files with 2001 additions and 1461 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.prettierrc.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
singleQuote: true,
};

6
babel.config.js
View File

@ -1,5 +1,3 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
presets: ['@vue/cli-plugin-babel/preset'],
};

20
jsconfig.json
View File

@ -1,13 +1,9 @@
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": [
"types/*"
]
}
},
"include": [
"./src/**/*"
]
}
"compilerOptions": {
"baseUrl": ".",
"paths": {
"*": ["types/*"]
}
},
"include": ["./src/**/*"]
}

16
package-lock.json generated
View File

@ -1977,6 +1977,13 @@
"yallist": "^2.1.2"
}
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"dev": true,
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
@ -9849,11 +9856,10 @@
"dev": true
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"dev": true,
"optional": true
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.5.1.tgz",
"integrity": "sha512-vBZcPRUR5MZJwoyi3ZoyQlc1rXeEck8KgeC9AwwOn+exuxLxq5toTRDTSaVrXHxelDMHy9zlicw8u66yxoSUFg==",
"dev": true
},
"pretty-error": {
"version": "2.1.2",

1
package.json
View File

@ -29,6 +29,7 @@
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"node-sass": "^4.14.1",
"prettier": "2.5.1",
"sass-loader": "^8.0.2",
"tailwindcss": "^1.9.6",
"vue-template-compiler": "^2.6.12"

7
postcss.config.js
View File

@ -1,6 +1,3 @@
module.exports = {
"plugins": [
require('tailwindcss')('tailwind.js'),
require('autoprefixer')(),
]
}
plugins: [require('tailwindcss')('tailwind.js'), require('autoprefixer')()],
};

67
src/App.vue
View File

@ -1,7 +1,9 @@
<template>
<div id="app">
<nav class="bg-gray-800 p-3 text-white">
<div class="container flex items-center justify-between flex-wrap bg-gray-800">
<div
class="container flex items-center justify-between flex-wrap bg-gray-800"
>
<div class="mr-6">
<router-link
class="font-semibold flex items-center flex-shrink-0 text-xl tracking-tight"
@ -28,12 +30,12 @@
</div>
<div
class="w-full block flex-grow lg:flex lg:items-center lg:w-auto"
:class="{'hidden' : !navActive}"
:class="{ hidden: !navActive }"
>
<div class="text-sm lg:flex-grow"></div>
<div v-if="user" class="relative mr-3">
<button
v-click-outside="() => createDropdownActive = false"
v-click-outside="() => (createDropdownActive = false)"
@click="createDropdownActive = !createDropdownActive"
class="relative flex items-center focus:outline-none"
>
@ -49,7 +51,8 @@
<router-link
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
to="/neworganization"
>New Organization</router-link>
>New Organization</router-link
>
</li>
</ul>
</div>
@ -57,11 +60,11 @@
<div v-if="user" class="relative">
<div class="flex">
<button
v-click-outside="() => userDropdownActive = false"
v-click-outside="() => (userDropdownActive = false)"
@click="userDropdownActive = !userDropdownActive"
class="relative flex items-center focus:outline-none"
>
{{user.username}}
{{ user.username }}
<i class="mdi mdi-chevron-down"></i>
</button>
</div>
@ -72,7 +75,7 @@
<ul>
<li class="block px-4 py-2 border-b">
Logged as&nbsp;
<b>{{user.username}}</b>
<b>{{ user.username }}</b>
</li>
<li>
<hr class="navbar-divider" />
@ -98,18 +101,30 @@
</div>
</div>
<div v-else class="navbar-item">
<router-link class="btn btn-blue" to="/register">Sign up</router-link>
<router-link class="ml-2 btn btn-blue" to="/login">Login</router-link>
<router-link class="btn btn-blue" to="/register"
>Sign up</router-link
>
<router-link class="ml-2 btn btn-blue" to="/login"
>Login</router-link
>
</div>
</div>
</div>
</nav>
<div v-if="error" class="container h-screen" role="alert">
<div v-if="error" class="h-full flex justify-center items-center" role="alert">
<div
v-if="error"
class="h-full flex justify-center items-center"
role="alert"
>
<div v-if="error" class="w-full" role="alert">
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">Error</div>
<div class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700">
<div class="bg-red-500 text-white font-bold rounded-t px-4 py-2">
Error
</div>
<div
class="border border-t-0 border-red-400 rounded-b bg-red-100 px-4 py-3 text-red-700"
>
<p class="mb-8">Failed to fetch data: {{ error }}</p>
<button class="btn btn-red" @click="reload()">Retry</button>
</div>
@ -123,48 +138,46 @@
</div>
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import { mapGetters } from "vuex";
import { mapGetters } from 'vuex';
import { ownerSettingsLink } from "@/util/link.js";
import { ownerSettingsLink } from '@/util/link.js';
export default {
name: "App",
name: 'App',
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
components: {},
computed: {
...mapGetters(["error", "user"])
...mapGetters(['error', 'user']),
},
data() {
return {
routerActive: true,
navActive: false,
userDropdownActive: false,
createDropdownActive: false
createDropdownActive: false,
};
},
watch: {
$route: function() {
$route: function () {
this.userDropdownActive = false;
this.createDropdownActive = false;
}
},
},
// method to reload current view from https://github.com/vuejs/vue-router/issues/296#issuecomment-356530037
methods: {
ownerSettingsLink: ownerSettingsLink,
reload() {
this.$store.dispatch("setError", null);
this.$store.dispatch('setError', null);
this.routerActive = false;
this.$nextTick(() => (this.routerActive = true));
}
}
},
},
};
</script>
<style lang="scss">
</style>
<style lang="scss"></style>

31
src/components/createorganization.vue
View File

@ -8,19 +8,21 @@
type="text"
placeholder="Organization name"
v-model="orgName"
>
/>
</div>
</div>
<div class="mb-4">
<label>
<input type="checkbox" v-model="orgIsPrivate">
<input type="checkbox" v-model="orgIsPrivate" />
Private
</label>
</div>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
@click="createOrg()"
>Create Organization</button>
>
Create Organization
</button>
<div
v-if="createOrgError"
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
@ -32,19 +34,19 @@
</template>
<script>
import { createOrganization } from "@/util/data.js";
import { createOrganization } from '@/util/data.js';
import { ownerLink } from "@/util/link.js";
import { ownerLink } from '@/util/link.js';
export default {
components: {},
name: "createorganization",
name: 'createorganization',
props: {},
data() {
return {
createOrgError: null,
orgIsPrivate: false,
orgName: null
orgName: null,
};
},
methods: {
@ -54,9 +56,9 @@ export default {
async createOrg() {
this.resetErrors();
let visibility = "public";
let visibility = 'public';
if (this.orgIsPrivate) {
visibility = "private";
visibility = 'private';
}
let { error } = await createOrganization(this.orgName, visibility);
@ -65,14 +67,11 @@ export default {
return;
}
this.$router.push(ownerLink("org", this.orgName));
}
this.$router.push(ownerLink('org', this.orgName));
},
},
created: async function() {}
created: async function () {},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

84
src/components/createproject.vue
View File

@ -7,17 +7,18 @@
type="text"
placeholder="Project Name"
v-model="projectName"
>
/>
<div class="mb-4">
<label>
<input type="checkbox" v-model="projectIsPrivate">
<input type="checkbox" v-model="projectIsPrivate" />
Private
</label>
</div>
<div class="mb-4">
<label class="checkbox">
<input type="checkbox" v-model="pass_vars_to_forked_pr" />
Pass variables to run even if triggered by PR from forked repo (DANGEROUS)
Pass variables to run even if triggered by PR from forked repo
(DANGEROUS)
</label>
</div>
<div class="mb-3 flex items-center">
@ -31,31 +32,48 @@
v-for="(rs, index) in remoteSources"
v-bind:key="rs.id"
:value="index"
>{{ rs.name }}</option>
>
{{ rs.name }}
</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<svg class="fill-current h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
<path d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"></path>
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
></path>
</svg>
</div>
</div>
<button
class="ml-3 btn btn-blue"
v-bind:class="{ 'spinner': fetchRemoteReposLoading }"
v-bind:class="{ spinner: fetchRemoteReposLoading }"
:disabled="selectedRemoteSourceIndex == null"
@click="fetchRemoteRepos()"
>Fetch remote repositories</button>
>
Fetch remote repositories
</button>
</div>
<div v-if="remoteRepos.length">
<h4 class="text-xl">Available remote repositories</h4>
<remoterepos :remoterepos="remoteRepos" v-on:reposelected="repoSelected($event)"/>
<remoterepos
:remoterepos="remoteRepos"
v-on:reposelected="repoSelected($event)"
/>
<button
class="btn btn-blue"
v-bind:class="{ 'spinner': createProjectLoading }"
v-bind:class="{ spinner: createProjectLoading }"
:disabled="!createProjectButtonEnabled"
@click="createProject()"
>Create Project</button>
>
Create Project
</button>
<div
v-if="createProjectError"
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
@ -72,20 +90,20 @@ import {
fetchCurrentUser,
fetchRemoteSources,
createProject,
userRemoteRepos
} from "@/util/data.js";
userRemoteRepos,
} from '@/util/data.js';
import { projectLink } from "@/util/link.js";
import { projectLink } from '@/util/link.js';
import remoterepos from "@/components/remoterepos.vue";
import remoterepos from '@/components/remoterepos.vue';
export default {
components: { remoterepos },
name: "createproject",
name: 'createproject',
props: {
ownertype: String,
ownername: String,
projectgroupref: Array
projectgroupref: Array,
},
data() {
return {
@ -98,15 +116,15 @@ export default {
remoteSources: null,
remoteRepos: [],
selectedRemoteSourceIndex: null,
projectName: "",
projectName: '',
projectIsPrivate: false,
remoteRepoPath: null
remoteRepoPath: null,
};
},
computed: {
createProjectButtonEnabled: function() {
createProjectButtonEnabled: function () {
return this.projectName.length && this.remoteRepoPath;
}
},
},
watch: {},
methods: {
@ -143,7 +161,7 @@ export default {
let { data, error } = await userRemoteRepos(remoteSource.id);
this.stopFetchRemoteReposLoading();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.remoteRepos = data;
@ -155,11 +173,11 @@ export default {
if (this.projectgroupref) {
refArray = [...refArray, ...this.projectgroupref];
}
let parentref = refArray.join("/");
let parentref = refArray.join('/');
let visibility = "public";
let visibility = 'public';
if (this.projectIsPrivate) {
visibility = "private";
visibility = 'private';
}
let remoteSource = this.remoteSources[this.selectedRemoteSourceIndex];
@ -186,12 +204,12 @@ export default {
this.$router.push(
projectLink(this.ownertype, this.ownername, projectref)
);
}
},
},
created: async function() {
created: async function () {
let { data, error } = await fetchCurrentUser();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.user = data;
@ -199,7 +217,7 @@ export default {
// TODO(sgotti) filter only remote source where the user has a linked account
({ data, error } = await fetchRemoteSources());
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
@ -215,10 +233,8 @@ export default {
}
this.remoteSources = remoteSources;
}
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

40
src/components/createprojectbutton.vue
View File

@ -5,9 +5,11 @@
<button
@click="clicked"
class="relative flex items-center focus:outline-none bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-green-700 rounded rounded-r-none"
>{{ buttonValue }}</button>
>
{{ buttonValue }}
</button>
<button
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
@click="dropdownActive = !dropdownActive"
class="relative flex items-center focus:outline-none bg-green-500 hover:bg-green-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-green-700 rounded rounded-l-none"
>
@ -24,14 +26,16 @@
href="#"
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
@click="setButton('project')"
>New Project</a>
>New Project</a
>
</li>
<li>
<a
href="#"
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
@click="setButton('projectgroup')"
>New Project Group</a>
>New Project Group</a
>
</li>
</ul>
</div>
@ -40,28 +44,28 @@
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
export default {
components: {},
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
name: "createprojectbutton",
name: 'createprojectbutton',
props: {},
data() {
return {
dropdownActive: false,
type: "project"
type: 'project',
};
},
computed: {
buttonValue: function() {
if (this.type == "project") {
return "New Project";
buttonValue: function () {
if (this.type == 'project') {
return 'New Project';
}
return "New Project Group";
}
return 'New Project Group';
},
},
methods: {
setButton(type) {
@ -69,12 +73,10 @@ export default {
this.dropdownActive = false;
},
clicked() {
this.$emit("click", this.type);
}
}
this.$emit('click', this.type);
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

41
src/components/createprojectgroup.vue
View File

@ -7,20 +7,22 @@
type="text"
placeholder="Project Group Name"
v-model="projectGroupName"
>
/>
<div class="mb-4">
<label>
<input type="checkbox" v-model="projectGroupIsPrivate">
<input type="checkbox" v-model="projectGroupIsPrivate" />
Private
</label>
</div>
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
v-bind:class="{ 'spinner': createProjectGroupLoading }"
v-bind:class="{ spinner: createProjectGroupLoading }"
:disabled="!createProjectGroupButtonEnabled"
@click="createProjectGroup()"
>Create ProjectGroup</button>
>
Create ProjectGroup
</button>
<div
v-if="createProjectGroupError"
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
@ -32,31 +34,31 @@
</template>
<script>
import { createProjectGroup } from "@/util/data.js";
import { createProjectGroup } from '@/util/data.js';
import { projectGroupLink } from "@/util/link.js";
import { projectGroupLink } from '@/util/link.js';
export default {
components: {},
name: "createprojectgroup",
name: 'createprojectgroup',
props: {
ownertype: String,
ownername: String,
projectgroupref: Array
projectgroupref: Array,
},
data() {
return {
createProjectGroupError: null,
createProjectGroupLoading: false,
createProjectGroupLoadingTimeout: null,
projectGroupName: "",
projectGroupIsPrivate: false
projectGroupName: '',
projectGroupIsPrivate: false,
};
},
computed: {
createProjectGroupButtonEnabled: function() {
createProjectGroupButtonEnabled: function () {
return this.projectGroupName.length;
}
},
},
methods: {
resetErrors() {
@ -78,11 +80,11 @@ export default {
if (this.projectgroupref) {
refArray = [...refArray, ...this.projectgroupref];
}
let parentref = refArray.join("/");
let parentref = refArray.join('/');
let visibility = "public";
let visibility = 'public';
if (this.projectGroupIsPrivate) {
visibility = "private";
visibility = 'private';
}
this.startProjectGroupLoading();
@ -104,12 +106,9 @@ export default {
this.$router.push(
projectGroupLink(this.ownertype, this.ownername, projectgroupref)
);
}
}
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

81
src/components/createsourceform.vue
View File

@ -2,7 +2,7 @@
<div class="w-6/12">
<h1>
If you need more advanced options or a little help,
<a
<a
class="text-blue-600"
rel="noopener noreferrer nofollow"
href="https://agola.io/tryit/#test-using-a-local-gitea-instance"
@ -12,17 +12,31 @@
</h1>
<form
class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4"
@submit.prevent="$emit('createSource', { token, name, type, clientId, clientSecret, url, skipVerify, sshHostKey, skipSshHostKeyCheck })"
@submit.prevent="
$emit('createSource', {
token,
name,
type,
clientId,
clientSecret,
url,
skipVerify,
sshHostKey,
skipSshHostKeyCheck,
})
"
>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="token">Agola Admin token</label>
<label class="block text-sm font-bold mb-2" for="token"
>Agola Admin token</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="token"
type="password"
placeholder="Agola Admin token"
v-model="token"
>
/>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="type">Type</label>
@ -37,7 +51,9 @@
</select>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="name">Source name</label>
<label class="block text-sm font-bold mb-2" for="name"
>Source name</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="name"
@ -45,17 +61,19 @@
type="text"
placeholder="Source name (only numbers, letters and -)"
v-model="name"
>
/>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="url">Source API URL</label>
<label class="block text-sm font-bold mb-2" for="url"
>Source API URL</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="url"
type="text"
placeholder="API URL"
v-model="url"
>
/>
</div>
<div class="mb-4 flex flex-row">
<input
@ -63,11 +81,15 @@
type="checkbox"
class="h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none"
v-model="skipVerify"
/>
<label class="text-sm mt-auto font-bold mx-2" for="skip_verify"
>Skip TLS certificate validation</label
>
<label class="text-sm mt-auto font-bold mx-2" for="skip_verify">Skip TLS certificate validation</label>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="ssh_key">Source Public SSH Key</label>
<label class="block text-sm font-bold mb-2" for="ssh_key"
>Source Public SSH Key</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="ssh_key"
@ -75,7 +97,7 @@
autocomplete="off"
placeholder="Public SSH key"
v-model="sshHostKey"
>
/>
</div>
<div class="mb-4 flex flex-row">
<input
@ -83,46 +105,53 @@
type="checkbox"
class="h-6 w-6 border border-gray-300 rounded-md checked:bg-blue-600 checked:border-transparent focus:outline-none"
v-model="skipSshHostKeyCheck"
/>
<label class="text-sm mt-auto font-bold mx-2" for="skip_ssh_key_check"
>Skip SSH host key check</label
>
<label class="text-sm mt-auto font-bold mx-2" for="skip_ssh_key_check">Skip SSH host key check</label>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="client_id">Source client ID</label>
<label class="block text-sm font-bold mb-2" for="client_id"
>Source client ID</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="client_id"
type="text"
placeholder="Client ID"
v-model="clientId"
>
/>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="client_secret">Source client secret</label>
<label class="block text-sm font-bold mb-2" for="client_secret"
>Source client secret</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="client_secret"
type="password"
placeholder="Client secret"
v-model="clientSecret"
>
/>
</div>
<div class="flex justify-center">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="submit"
>Create</button>
>
Create
</button>
</div>
</form>
</div>
</template>
<script>
import { GITHUB_SSH_KEY, GITHUB_API_URL } from "@/util/data"
import { GITHUB_SSH_KEY, GITHUB_API_URL } from '@/util/data';
export default {
name: "CreateSourceForm",
data: function() {
name: 'CreateSourceForm',
data: function () {
return {
name: null,
token: null,
@ -136,16 +165,14 @@ export default {
};
},
watch: {
type: function(value) {
if (value === "github") {
type: function (value) {
if (value === 'github') {
this.url = GITHUB_API_URL;
this.sshHostKey = GITHUB_SSH_KEY;
this.skipVerify = false;
this.skipSshHostKeyCheck = false;
this.skipVerify = false;
this.skipSshHostKeyCheck = false;
}
},
},
};
</script>

54
src/components/log.vue
View File

@ -43,18 +43,18 @@
</template>
<script>
import { apiurl, fetch } from "@/util/auth";
import AnsiUp from "ansi_up";
import { apiurl, fetch } from '@/util/auth';
import AnsiUp from 'ansi_up';
export default {
name: "Log",
name: 'Log',
props: {
show: Boolean,
runid: String,
taskid: String,
setup: Boolean,
step: Number,
stepphase: String
stepphase: String,
},
computed: {},
data() {
@ -65,7 +65,7 @@ export default {
fetchAbort: null,
items: [],
lastitem: "",
lastitem: '',
lines: [],
formatter: formatter,
es: null,
@ -73,7 +73,7 @@ export default {
streaming: false,
done: false,
logExists: null,
error: null
error: null,
};
},
methods: {
@ -83,7 +83,7 @@ export default {
}
let follow = false;
if (this.stepphase == "running") {
if (this.stepphase == 'running') {
follow = true;
}
@ -94,14 +94,14 @@ export default {
this.logExists = null;
this.error = null;
let path = "/logs?runID=" + this.runid + "&taskID=" + this.taskid;
let path = '/logs?runID=' + this.runid + '&taskID=' + this.taskid;
if (this.setup) {
path += "&setup";
path += '&setup';
} else {
path += "&step=" + this.step;
path += '&step=' + this.step;
}
if (follow) {
path += "&follow";
path += '&follow';
}
try {
@ -111,7 +111,7 @@ export default {
this.streaming = true;
const reader = res.body.getReader();
let lastline = "";
let lastline = '';
let j = 0;
for (;;) {
let { done, value } = await reader.read();
@ -122,12 +122,12 @@ export default {
return;
}
let data = new TextDecoder("utf-8").decode(value, { stream: true });
let data = new TextDecoder('utf-8').decode(value, { stream: true });
let part = "";
let part = '';
for (var i = 0; i < data.length; i++) {
let c = data.charAt(i);
if (c == "\r") {
if (c == '\r') {
// replace lastline from start, simulating line feed (go to start of line)
// this isn't perfect since the previous line contents could have
// been written using different colors and this will lose them but
@ -136,17 +136,17 @@ export default {
lastline.slice(0, j) + part + lastline.slice(j + part.length);
j = 0;
this.lastitem = this.formatter.ansi_to_html(lastline);
part = "";
} else if (c == "\n") {
part = '';
} else if (c == '\n') {
lastline =
lastline.slice(0, j) + part + lastline.slice(j + part.length);
j += part.length;
this.lastitem = this.formatter.ansi_to_html(lastline);
this.items.push(this.lastitem);
this.lastitem = "";
lastline = "";
this.lastitem = '';
lastline = '';
j = 0;
part = "";
part = '';
} else {
part += c;
}
@ -174,10 +174,10 @@ export default {
this.fetchAbort.abort();
}
this.fetchAbort = new AbortController();
}
},
},
watch: {
show: function(post, pre) {
show: function (post, pre) {
if (pre == false && post == true) {
this.abortFetch();
this.fetch();
@ -186,23 +186,23 @@ export default {
this.abortFetch();
}
},
stepphase: function(post) {
stepphase: function (post) {
if (!this.show) {
return;
}
if (this.fetching) {
return;
}
if (post == "running") {
if (post == 'running') {
this.abortFetch();
this.getLogs(true);
} else {
this.abortFetch();
this.getLogs(false);
}
}
},
},
created: function() {
created: function () {
this.fetchAbort = new AbortController();
if (this.show) {
@ -217,6 +217,6 @@ export default {
if (this.es !== null) {
this.es.close();
}
}
},
};
</script>

29
src/components/loginform.vue
View File

@ -5,50 +5,53 @@
@submit.prevent="$emit('login', { username, password })"
>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="username">Username</label>
<label class="block text-sm font-bold mb-2" for="username"
>Username</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="username"
type="text"
placeholder="Username"
v-model="username"
>
/>
</div>
<div class="mb-6">
<label class="block text-sm font-bold mb-2" for="password">Password</label>
<label class="block text-sm font-bold mb-2" for="password"
>Password</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 mb-3 leading-tight focus:outline-none focus:shadow-outline"
id="password"
type="password"
placeholder="******************"
v-model="password"
>
/>
</div>
<div class="flex justify-center">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="submit"
>{{action}} with {{name}}</button>
>
{{ action }} with {{ name }}
</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: "LoginForm",
name: 'LoginForm',
props: {
action: String,
name: String
name: String,
},
data: function() {
data: function () {
return {
username: null,
password: null
password: null,
};
}
},
};
</script>

27
src/components/orgmembers.vue
View File

@ -3,8 +3,8 @@
<h4 class="mb-3 text-xl">Organization Members</h4>
<ul v-if="members.length">
<li class="flex" v-for="member in members" v-bind:key="member.user.id">
<span class="w-1/2 font-bold">{{member.user.username}}</span>
<span class="w-1/2">{{member.role}}</span>
<span class="w-1/2 font-bold">{{ member.user.username }}</span>
<span class="w-1/2">{{ member.role }}</span>
</li>
</ul>
<div v-else>No Members</div>
@ -12,39 +12,38 @@
</template>
<script>
import { fetchOrgMembers } from "@/util/data.js";
import { fetchOrgMembers } from '@/util/data.js';
export default {
components: {},
name: "orgmembers",
name: 'orgmembers',
props: {
orgname: String
orgname: String,
},
data() {
return {
members: []
members: [],
};
},
watch: {
$route: async function() {
$route: async function () {
this.fetchOrgMembers(this.orgname);
}
},
},
methods: {
async fetchOrgMembers(orgname) {
let { data, error } = await fetchOrgMembers(orgname);
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.members = data.members;
}
},
},
created: function() {
created: function () {
this.fetchOrgMembers(this.orgname);
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

46
src/components/projbreadcrumbs.vue
View File

@ -2,57 +2,67 @@
<nav class="mb-4 bg-grey-light rounded font-sans w-full">
<ol class="list-reset flex text-grey-dark">
<li>
<a>{{ownertype}}</a>
<a>{{ ownertype }}</a>
</li>
<li>
<span class="mx-2">/</span>
</li>
<li>
<router-link :to="ownerLink(ownertype, ownername)">{{ownername}}</router-link>
<router-link :to="ownerLink(ownertype, ownername)">{{
ownername
}}</router-link>
</li>
<li v-for="(ref, i) in projectref" v-bind:key="i">
<span class="mx-2">/</span>
<router-link
v-if="i+1 < projectref.length"
:to="projectGroupLink(ownertype, ownername, projectref.slice(0, i+1))"
>{{ref}}</router-link>
v-if="i + 1 < projectref.length"
:to="
projectGroupLink(ownertype, ownername, projectref.slice(0, i + 1))
"
>{{ ref }}</router-link
>
<router-link
v-else
:to="projectLink(ownertype, ownername, projectref.slice(0, i+1))"
>{{ref}}</router-link>
:to="projectLink(ownertype, ownername, projectref.slice(0, i + 1))"
>{{ ref }}</router-link
>
</li>
<li v-for="(ref, i) in projectgroupref" v-bind:key="i">
<span class="mx-2">/</span>
<router-link
:to="projectGroupLink(ownertype, ownername, projectgroupref.slice(0, i+1))"
>{{ref}}</router-link>
:to="
projectGroupLink(
ownertype,
ownername,
projectgroupref.slice(0, i + 1)
)
"
>{{ ref }}</router-link
>
</li>
</ol>
</nav>
</template>
<script>
import { ownerLink, projectLink, projectGroupLink } from "@/util/link.js";
import { ownerLink, projectLink, projectGroupLink } from '@/util/link.js';
export default {
name: "projbreadcrumbs",
name: 'projbreadcrumbs',
components: {},
props: {
ownertype: String,
ownername: String,
projectref: Array,
projectgroupref: Array
projectgroupref: Array,
},
methods: {
ownerLink: ownerLink,
projectLink: projectLink,
projectGroupLink: projectGroupLink
}
projectGroupLink: projectGroupLink,
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

103
src/components/projectgroupsettings.vue
View File

@ -20,7 +20,9 @@
Private
</label>
</div>
<button class="btn btn-blue" @click="updateProjectGroup()">Update</button>
<button class="btn btn-blue" @click="updateProjectGroup()">
Update
</button>
<div
v-if="updateProjectGroupError"
@ -35,14 +37,22 @@
<div class="panel">
<p class="panel-title">Secrets</p>
<div class="p-4">
<projectsecrets :secrets="secrets" :allsecrets="allsecrets" type="projectgroup" />
<projectsecrets
:secrets="secrets"
:allsecrets="allsecrets"
type="projectgroup"
/>
</div>
</div>
<div class="panel">
<p class="panel-title">Variables</p>
<div class="p-4">
<projectvars :variables="variables" :allvariables="allvariables" type="projectgroup" />
<projectvars
:variables="variables"
:allvariables="allvariables"
type="projectgroup"
/>
</div>
</div>
@ -56,16 +66,13 @@
>
<p>
This operation
<strong>CANNOT</strong> be undone.
This operation will remove
<strong>{{projectGroupPath}}</strong>
<strong>CANNOT</strong> be undone. This operation will remove
<strong>{{ projectGroupPath }}</strong>
</p>
</div>
<label class="block mb-2">
Please type the project group name for confirmation:
<span
class="text-red-500 font-bold"
>{{ projectGroupName }}</span>
<span class="text-red-500 font-bold">{{ projectGroupName }}</span>
</label>
<div class="mb-4">
<input
@ -79,7 +86,9 @@
class="btn btn-red"
@click="deleteProjectGroup()"
:disabled="!deleteButtonEnabled"
>Delete Project Group</button>
>
Delete Project Group
</button>
</div>
</div>
<div
@ -98,21 +107,21 @@ import {
fetchSecrets,
fetchVariables,
updateProjectGroup,
deleteProjectGroup
} from "@/util/data.js";
deleteProjectGroup,
} from '@/util/data.js';
import { projectGroupLink } from "@/util/link.js";
import { projectGroupLink } from '@/util/link.js';
import projectsecrets from "@/components/projectsecrets";
import projectvars from "@/components/projectvars";
import projectsecrets from '@/components/projectsecrets';
import projectvars from '@/components/projectvars';
export default {
components: { projectsecrets, projectvars },
name: "projectgroupsettings",
name: 'projectgroupsettings',
props: {
ownertype: String,
ownername: String,
projectgroupref: Array
projectgroupref: Array,
},
data() {
return {
@ -124,24 +133,24 @@ export default {
allsecrets: [],
variables: [],
allvariables: [],
projectGroupNameToDelete: ""
projectGroupNameToDelete: '',
};
},
computed: {
projectGroupName: function() {
projectGroupName: function () {
return this.projectgroupref[this.projectgroupref.length - 1];
},
projectGroupPath: function() {
return ["", this.ownertype, this.ownername, ...this.projectgroupref].join(
"/"
projectGroupPath: function () {
return ['', this.ownertype, this.ownername, ...this.projectgroupref].join(
'/'
);
},
deleteButtonEnabled: function() {
deleteButtonEnabled: function () {
return this.projectGroupNameToDelete == this.projectGroupName;
},
isRootProjectGroup() {
return this.projectgroupref.length == 0;
}
},
},
methods: {
resetErrors() {
@ -154,12 +163,12 @@ export default {
let projectgroupref = [
this.ownertype,
this.ownername,
...this.projectgroupref
].join("/");
...this.projectgroupref,
].join('/');
let visibility = "public";
let visibility = 'public';
if (this.projectGroupIsPrivate) {
visibility = "private";
visibility = 'private';
}
let { error } = await updateProjectGroup(
projectgroupref,
@ -175,8 +184,8 @@ export default {
let projectgroupref = [
this.ownertype,
this.ownername,
...this.projectgroupref
].join("/");
...this.projectgroupref,
].join('/');
if (this.projectGroupNameToDelete == this.projectGroupName) {
let { error } = await deleteProjectGroup(projectgroupref);
@ -192,70 +201,68 @@ export default {
)
);
}
}
},
},
created: async function() {
created: async function () {
let projectgroupref = [
this.ownertype,
this.ownername,
...this.projectgroupref
].join("/");
...this.projectgroupref,
].join('/');
let { data, error } = await fetchProjectGroup(projectgroupref);
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.projectGroup = data;
this.projectGroupIsPrivate = this.projectGroup.visibility == "private";
this.projectGroupIsPrivate = this.projectGroup.visibility == 'private';
({ data, error } = await fetchSecrets(
"projectgroup",
'projectgroup',
projectgroupref,
false
));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.secrets = data;
({ data, error } = await fetchSecrets(
"projectgroup",
'projectgroup',
projectgroupref,
true
));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.allsecrets = data;
({ data, error } = await fetchVariables(
"projectgroup",
'projectgroup',
projectgroupref,
false
));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.variables = data;
({ data, error } = await fetchVariables(
"projectgroup",
'projectgroup',
projectgroupref,
true
));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.allvariables = data;
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

52
src/components/projects.vue
View File

@ -2,13 +2,20 @@
<div>
<h4 class="text-xl my-3">Projects</h4>
<div v-if="fetchProjectsLoading" class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchProjectsLoading }"></div>
<div v-bind:class="{ spinner: fetchProjectsLoading }"></div>
</div>
<ul v-else-if="projects.length > 0">
<li class="mb-2 border rounded-l" v-for="project in projects" v-bind:key="project.id">
<li
class="mb-2 border rounded-l"
v-for="project in projects"
v-bind:key="project.id"
>
<div class="pl-4 py-4 flex items-center">
<router-link class="item" :to="projectLink(ownertype, ownername, ref(project.name))">
<span class="font-bold">{{project.name}}</span>
<router-link
class="item"
:to="projectLink(ownertype, ownername, ref(project.name))"
>
<span class="font-bold">{{ project.name }}</span>
</router-link>
</div>
</li>
@ -19,7 +26,7 @@
<h4 class="text-xl my-3">Project Groups</h4>
<div v-if="fetchProjectGroupsLoading" class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchProjectGroupsLoading }"></div>
<div v-bind:class="{ spinner: fetchProjectGroupsLoading }"></div>
</div>
<ul v-else-if="projectgroups.length > 0">
<li
@ -32,7 +39,7 @@
class="item"
:to="projectGroupLink(ownertype, ownername, ref(projectgroup.name))"
>
<span class="font-bold">{{projectgroup.name}}</span>
<span class="font-bold">{{ projectgroup.name }}</span>
</router-link>
</div>
</li>
@ -44,18 +51,18 @@
<script>
import {
fetchProjectGroupProjects,
fetchProjectGroupSubgroups
} from "@/util/data.js";
fetchProjectGroupSubgroups,
} from '@/util/data.js';
import { projectLink, projectGroupLink } from "@/util/link.js";
import { projectLink, projectGroupLink } from '@/util/link.js';
export default {
components: {},
name: "Projects",
name: 'Projects',
props: {
ownertype: String,
ownername: String,
projectgroupref: Array
projectgroupref: Array,
},
data() {
return {
@ -65,18 +72,18 @@ export default {
fetchProjectsLoading: false,
projects: [],
projectgroups: []
projectgroups: [],
};
},
watch: {
$route: async function() {
$route: async function () {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
this.fetchAbort = new AbortController();
this.fetchProjects(this.ownertype, this.ownername);
this.fetchProjectGroups(this.ownertype, this.ownername);
}
},
},
methods: {
startFetchProjectsLoading() {
@ -107,7 +114,7 @@ export default {
this.startFetchProjectsLoading();
let { data, error, aborted } = await fetchProjectGroupProjects(
projectgroupref.join("/"),
projectgroupref.join('/'),
this.fetchAbort.signal
);
this.stopFetchProjectsLoading();
@ -115,7 +122,7 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.projects = data;
@ -127,7 +134,7 @@ export default {
}
this.startFetchProjectGroupsLoading();
let { data, error, aborted } = await fetchProjectGroupSubgroups(
projectgroupref.join("/"),
projectgroupref.join('/'),
this.fetchAbort.signal
);
this.stopFetchProjectGroupsLoading();
@ -135,15 +142,15 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.projectgroups = data;
},
projectLink: projectLink,
projectGroupLink: projectGroupLink
projectGroupLink: projectGroupLink,
},
created: function() {
created: function () {
this.fetchAbort = new AbortController();
this.fetchProjects(this.ownertype, this.ownername);
this.fetchProjectGroups(this.ownertype, this.ownername);
@ -152,9 +159,8 @@ export default {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

27
src/components/projectsecrets.vue
View File

@ -7,33 +7,34 @@
<hr class="my-6 border-t" />
<h5 class="text-2xl">All secrets (local and inherited)</h5>
<secrets v-if="allsecrets.length" :secrets="allsecrets" :showparentpath="true" />
<secrets
v-if="allsecrets.length"
:secrets="allsecrets"
:showparentpath="true"
/>
<span v-else>No secrets</span>
</div>
</template>
<script>
import secrets from "@/components/secrets";
import secrets from '@/components/secrets';
export default {
components: { secrets },
name: "projectsecrets",
name: 'projectsecrets',
props: {
secrets: Array,
allsecrets: Array,
type: String
type: String,
},
computed: {
typetitle() {
if (this.type == "project") return "Project";
if (this.type == "projectgroup") return "Project group";
return "";
}
}
if (this.type == 'project') return 'Project';
if (this.type == 'projectgroup') return 'Project group';
return '';
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

118
src/components/projectsettings.vue
View File

@ -21,7 +21,8 @@
<div class="mb-4">
<label class="checkbox">
<input type="checkbox" v-model="project.pass_vars_to_forked_pr" />
Pass variables to run even if triggered by PR from forked repo (DANGEROUS)
Pass variables to run even if triggered by PR from forked repo
(DANGEROUS)
</label>
</div>
<button class="btn btn-blue" @click="updateProject()">Update</button>
@ -38,14 +39,22 @@
<div class="panel">
<p class="panel-title">Secrets</p>
<div class="p-4">
<projectsecrets :secrets="secrets" :allsecrets="allsecrets" type="project" />
<projectsecrets
:secrets="secrets"
:allsecrets="allsecrets"
type="project"
/>
</div>
</div>
<div class="panel">
<p class="panel-title">Variables</p>
<div class="p-4">
<projectvars :variables="variables" :allvariables="allvariables" type="project" />
<projectvars
:variables="variables"
:allvariables="allvariables"
type="project"
/>
</div>
</div>
@ -59,16 +68,13 @@
>
<p>
This operation
<strong>CANNOT</strong> be undone.
This operation will remove
<strong>{{projectPath}}</strong>
<strong>CANNOT</strong> be undone. This operation will remove
<strong>{{ projectPath }}</strong>
</p>
</div>
<label class="block mb-2">
Please type the project name for confirmation:
<span
class="text-red-500 font-bold"
>{{ projectName }}</span>
<span class="text-red-500 font-bold">{{ projectName }}</span>
</label>
<div class="mb-4">
<input
@ -82,7 +88,9 @@
class="btn btn-red"
@click="deleteProject()"
:disabled="!deleteButtonEnabled"
>Delete Project</button>
>
Delete Project
</button>
<div
v-if="deleteProjectError"
@ -93,21 +101,30 @@
</div>
</div>
<div class="p-4 border-t">
<h4 class="mb-4 title text-xl">Change remote repository linked account</h4>
<h4 class="mb-4 title text-xl">
Change remote repository linked account
</h4>
<div
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
role="alert"
>
<p>This operation will change the linked account associated with the project remote repository to the current user linked account</p>
<p>
This operation will change the linked account associated with the
project remote repository to the current user linked account
</p>
</div>
<button class="btn btn-red" @click="updateRepoLinkedAccount()">Change</button>
<button class="btn btn-red" @click="updateRepoLinkedAccount()">
Change
</button>
<div
v-if="updateRepoLinkedAccountError"
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
role="alert"
>
<span class="block sm:inline">{{ updateRepoLinkedAccountError }}</span>
<span class="block sm:inline">{{
updateRepoLinkedAccountError
}}</span>
</div>
</div>
</div>
@ -121,21 +138,21 @@ import {
fetchVariables,
updateProject,
deleteProject,
projectUpdateRepoLinkedAccount
} from "@/util/data.js";
projectUpdateRepoLinkedAccount,
} from '@/util/data.js';
import { projectGroupLink } from "@/util/link.js";
import { projectGroupLink } from '@/util/link.js';
import projectsecrets from "@/components/projectsecrets";
import projectvars from "@/components/projectvars";
import projectsecrets from '@/components/projectsecrets';
import projectvars from '@/components/projectvars';
export default {
components: { projectsecrets, projectvars },
name: "projectsettings",
name: 'projectsettings',
props: {
ownertype: String,
ownername: String,
projectref: Array
projectref: Array,
},
data() {
return {
@ -148,19 +165,19 @@ export default {
allsecrets: [],
variables: [],
allvariables: [],
projectNameToDelete: ""
projectNameToDelete: '',
};
},
computed: {
projectName: function() {
projectName: function () {
return this.projectref[this.projectref.length - 1];
},
projectPath: function() {
return ["", this.ownertype, this.ownername, ...this.projectref].join("/");
projectPath: function () {
return ['', this.ownertype, this.ownername, ...this.projectref].join('/');
},
deleteButtonEnabled: function() {
deleteButtonEnabled: function () {
return this.projectNameToDelete == this.projectName;
}
},
},
methods: {
resetErrors() {
@ -174,12 +191,12 @@ export default {
let projectref = [
this.ownertype,
this.ownername,
...this.projectref
].join("/");
...this.projectref,
].join('/');
let visibility = "public";
let visibility = 'public';
if (this.projectIsPrivate) {
visibility = "private";
visibility = 'private';
}
let { error } = await updateProject(
projectref,
@ -198,8 +215,8 @@ export default {
let projectref = [
this.ownertype,
this.ownername,
...this.projectref
].join("/");
...this.projectref,
].join('/');
if (this.projectNameToDelete == this.projectName) {
let { error } = await deleteProject(projectref);
@ -222,60 +239,59 @@ export default {
let projectref = [
this.ownertype,
this.ownername,
...this.projectref
].join("/");
...this.projectref,
].join('/');
let { error } = await projectUpdateRepoLinkedAccount(projectref);
if (error) {
this.updateRepoLinkedAccountError = error;
return;
}
}
},
},
created: async function() {
created: async function () {
let projectref = [this.ownertype, this.ownername, ...this.projectref].join(
"/"
'/'
);
let { data, error } = await fetchProject(projectref);
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.project = data;
this.projectIsPrivate = this.project.visibility == "private";
this.projectIsPrivate = this.project.visibility == 'private';
({ data, error } = await fetchSecrets("project", projectref, false));
({ data, error } = await fetchSecrets('project', projectref, false));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.secrets = data;
({ data, error } = await fetchSecrets("project", projectref, true));
({ data, error } = await fetchSecrets('project', projectref, true));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.allsecrets = data;
({ data, error } = await fetchVariables("project", projectref, false));
({ data, error } = await fetchVariables('project', projectref, false));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.variables = data;
({ data, error } = await fetchVariables("project", projectref, true));
({ data, error } = await fetchVariables('project', projectref, true));
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.allvariables = data;
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

26
src/components/projectvars.vue
View File

@ -7,32 +7,34 @@
<hr class="my-6 border-t" />
<h5 class="text-2xl">All variables (local and inherited)</h5>
<vars v-if="allvariables.length" :variables="allvariables" :showparentpath="true" />
<vars
v-if="allvariables.length"
:variables="allvariables"
:showparentpath="true"
/>
<span v-else>No variables</span>
</div>
</template>
<script>
import vars from "@/components/vars";
import vars from '@/components/vars';
export default {
components: { vars },
name: "projectvars",
name: 'projectvars',
props: {
variables: Array,
allvariables: Array,
type: String
type: String,
},
computed: {
typetitle() {
if (this.type == "project") return "Project";
if (this.type == "projectgroup") return "Project group";
return "";
}
}
if (this.type == 'project') return 'Project';
if (this.type == 'projectgroup') return 'Project group';
return '';
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

26
src/components/registerform.vue
View File

@ -5,7 +5,9 @@
@submit.prevent="$emit('login', { username })"
>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="username">Remote Username</label>
<label class="block text-sm font-bold mb-2" for="username"
>Remote Username</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="username"
@ -13,38 +15,38 @@
placeholder="Username"
:disabled="true"
v-model="remoteUsername"
>
/>
</div>
<div class="mb-4">
<label class="block text-sm font-bold mb-2" for="username">Username</label>
<label class="block text-sm font-bold mb-2" for="username"
>Username</label
>
<input
class="appearance-none border rounded w-full py-2 px-3 leading-tight focus:outline-none focus:shadow-outline"
id="username"
type="text"
placeholder="Username"
v-model="username"
>
/>
</div>
<div class="flex justify-center">
<button
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline"
type="submit"
>Register</button>
>
Register
</button>
</div>
</form>
</div>
</template>
<script>
export default {
name: "RegisterForm",
name: 'RegisterForm',
props: {
remoteUsername: String,
username: String
}
username: String,
},
};
</script>

19
src/components/remoterepos.vue
View File

@ -7,8 +7,8 @@
v-bind:key="repo.id"
@click="select(index)"
>
<input type="radio" :checked="selectedrepo == index">
{{repo.path}}
<input type="radio" :checked="selectedrepo == index" />
{{ repo.path }}
</label>
</div>
<div v-else class="block px-4 py-2 border-b">No remote repositories</div>
@ -18,23 +18,22 @@
<script>
export default {
components: {},
name: "remoterepos",
name: 'remoterepos',
props: {
remoterepos: Array
remoterepos: Array,
},
data() {
return {
selectedrepo: null
selectedrepo: null,
};
},
methods: {
select(index) {
this.selectedrepo = index;
this.$emit("reposelected", this.remoterepos[index].path);
}
}
this.$emit('reposelected', this.remoterepos[index].path);
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

105
src/components/rundetail.vue
View File

@ -27,21 +27,29 @@
<div class="p-4 border border-l-0 rounded-r flex">
<div class="w-4/6 items-start justify-between">
<div class="flex items-center mb-1">
<h2 class="text-2xl mr-3">{{run.name}}</h2>
<h2 class="text-2xl mr-3">{{ run.name }}</h2>
<span
class="mr-3 rounded px-2 py-1 text-xs"
:class="'is-' + runResultClass(run)"
>{{ runStatus(run) | capitalize }}</span>
>{{ runStatus(run) | capitalize }}</span
>
<span
v-if="stillRunning(run)"
class="rounded bg-gray-500 text-white px-2 py-1 text-xs"
>Still running</span>
>Still running</span
>
</div>
<div class="mb-6">
{{ run.annotations.message.split(/\r?\n/)[0] }}
</div>
<div class="mb-6">{{run.annotations.message.split(/\r?\n/)[0]}}</div>
<div>
<a :href="run.annotations.commit_link" class="block" target="_blank">
<a
:href="run.annotations.commit_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-commit mdi-rotate-90"></i>
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
<span>{{ run.annotations.commit_sha.substring(0, 8) }}</span>
</a>
<a
v-if="run.annotations.ref_type == 'branch'"
@ -50,7 +58,7 @@
target="_blank"
>
<i class="mdi mdi-source-branch"></i>
<span>{{run.annotations.branch}}</span>
<span>{{ run.annotations.branch }}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'tag'"
@ -59,7 +67,7 @@
target="_blank"
>
<i class="mdi mdi-tag"></i>
<span>{{run.annotations.tag}}</span>
<span>{{ run.annotations.tag }}</span>
</a>
<a
v-else-if="run.annotations.ref_type == 'pull_request'"
@ -68,7 +76,7 @@
target="_blank"
>
<i class="mdi mdi-source-pull"></i>
<span>PR #{{run.annotations.pull_request_id}}</span>
<span>PR #{{ run.annotations.pull_request_id }}</span>
</a>
</div>
</div>
@ -85,12 +93,18 @@
<div class="w-1/6 flex items-start justify-between">
<div class="relative ml-auto mr-3">
<div
v-if="run.can_restart_from_scratch || run.can_restart_from_failed_tasks"
v-if="
run.can_restart_from_scratch ||
run.can_restart_from_failed_tasks
"
class="flex"
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
>
<div class="flex items-center">
<button class="btn btn-blue" @click="dropdownActive = !dropdownActive">
<button
class="btn btn-blue"
@click="dropdownActive = !dropdownActive"
>
<span>Restart</span>
<i class="ml-3 mdi mdi-restart" aria-hidden="true"></i>
</button>
@ -107,14 +121,16 @@
v-if="run.can_restart_from_scratch"
class="block px-4 py-2 hover:bg-blue-500 hover:text-white cursor-pointer"
@click="restartRun(run.id, true)"
>From start</a>
>From start</a
>
</li>
<li>
<a
v-if="run.can_restart_from_failed_tasks"
class="block px-4 py-2 hover:bg-blue-500 hover:text-white cursor-pointer"
@click="restartRun(run.id)"
>From failed tasks</a>
>From failed tasks</a
>
</li>
</ul>
</div>
@ -122,13 +138,17 @@
class="btn btn-red"
v-if="run.phase == 'queued'"
@click="cancelRun(run.id)"
>Cancel</button>
>
Cancel
</button>
<button
class="btn btn-red"
v-if="run.phase == 'running'"
:disabled="run.stopping"
@click="stopRun(run.id)"
>Stop</button>
>
Stop
</button>
</div>
</div>
</div>
@ -138,27 +158,27 @@
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import { cancelRun, stopRun, restartRun } from "@/util/data.js";
import { userDirectRunLink, projectRunLink } from "@/util/link.js";
import { runStatus, runResultClass } from "@/util/run.js";
import { cancelRun, stopRun, restartRun } from '@/util/data.js';
import { userDirectRunLink, projectRunLink } from '@/util/link.js';
import { runStatus, runResultClass } from '@/util/run.js';
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
import * as moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);
export default {
name: "rundetail",
name: 'rundetail',
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
props: {
ownertype: String,
ownername: String,
projectref: Array,
run: Object
run: Object,
},
data() {
return {
@ -166,7 +186,7 @@ export default {
stopRunError: null,
cancelRunError: null,
restartRunError: null,
dropdownActive: false
dropdownActive: false,
};
},
methods: {
@ -178,14 +198,14 @@ export default {
this.restartRunError = null;
},
stillRunning(run) {
return run.result != "unknown" && run.phase == "running";
return run.result != 'unknown' && run.phase == 'running';
},
taskClass(task) {
if (task.status == "success") return "success";
if (task.status == "failed") return "failed";
if (task.status == "stopped") return "failed";
if (task.status == "running") return "running";
return "unknown";
if (task.status == 'success') return 'success';
if (task.status == 'failed') return 'failed';
if (task.status == 'stopped') return 'failed';
if (task.status == 'running') return 'running';
return 'unknown';
},
async stopRun(runid) {
this.resetErrors();
@ -207,7 +227,7 @@ export default {
return;
}
this.run.phase = "cancelled";
this.run.phase = 'cancelled';
},
async restartRun(runid, fromStart) {
this.dropdownActive = false;
@ -231,7 +251,7 @@ export default {
this.$router.push(runLink);
},
duration(run) {
let formatString = "h:mm:ss[s]";
let formatString = 'h:mm:ss[s]';
let start = moment(run.start_time);
let end = moment(run.end_time);
@ -244,30 +264,29 @@ export default {
return moment.duration(end.diff(start)).format(formatString);
},
endTime(run) {
let formatString = "lll";
let formatString = 'lll';
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
return '';
}
return "Finished " + end.format(formatString);
return 'Finished ' + end.format(formatString);
},
endTimeHuman(run) {
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
return '';
}
return end.fromNow();
}
},
},
created: function() {
created: function () {
window.setInterval(() => {
this.now = moment();
}, 500);
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

101
src/components/runs.vue
View File

@ -9,7 +9,7 @@
</div>
<div class="ml-6 flex w-48">
<div v-bind:class="{ 'spinner': fetchRunsLoading }"></div>
<div v-bind:class="{ spinner: fetchRunsLoading }"></div>
</div>
<div v-if="runs">
<ul>
@ -27,21 +27,21 @@
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-source-branch mr-1"></i>
<span>{{run.annotations.branch}}</span>
<span>{{ run.annotations.branch }}</span>
</div>
<div
v-else-if="run.annotations.ref_type == 'tag'"
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-tag mr-1"></i>
<span>{{run.annotations.tag}}</span>
<span>{{ run.annotations.tag }}</span>
</div>
<div
v-else-if="run.annotations.ref_type == 'pull_request'"
class="whitespace-no-wrap overflow-x-hidden"
>
<i class="mdi mdi-source-pull mr-1"></i>
<span>PR #{{run.annotations.pull_request_id}}</span>
<span>PR #{{ run.annotations.pull_request_id }}</span>
</div>
</div>
<div v-else class="w-2/12">
@ -53,30 +53,36 @@
class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
:to="projectRunLink(ownertype, ownername, projectref, run.id)"
>
<span class="font-bold">{{run.name}}</span>
<div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
<span class="font-bold">{{ run.name }}</span>
<div>{{ run.annotations.message.split(/\r?\n/)[0] }}</div>
</router-link>
<router-link
v-else
class="w-5/12 pl-3 mr-auto whitespace-no-wrap overflow-hidden"
:to="userDirectRunLink(ownername, run.id)"
>
<span class="font-bold">{{run.name}}</span>
<div>{{run.annotations.message.split(/\r?\n/)[0]}}</div>
<span class="font-bold">{{ run.name }}</span>
<div>{{ run.annotations.message.split(/\r?\n/)[0] }}</div>
</router-link>
<span
v-if="waitingApproval(run)"
class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
>Waiting Approval</span>
>Waiting Approval</span
>
<span
v-if="stillRunning(run)"
class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
>Still running</span>
>Still running</span
>
<div class="w-32">
<span>#{{run.counter}}</span>
<a :href="run.annotations.commit_link" class="block" target="_blank">
<span>#{{ run.counter }}</span>
<a
:href="run.annotations.commit_link"
class="block"
target="_blank"
>
<i class="mdi mdi-source-commit mdi-rotate-90 mr-1"></i>
<span>{{run.annotations.commit_sha.substring(0,8)}}</span>
<span>{{ run.annotations.commit_sha.substring(0, 8) }}</span>
</a>
</div>
<div class="w-32">
@ -97,7 +103,9 @@
v-if="hasMoreRuns"
class="bg-transparent hover:bg-blue-500 text-blue-700 font-semibold hover:text-white py-2 px-4 border border-blue-500 hover:border-transparent rounded"
@click="loadMoreRuns()"
>Load more...</button>
>
Load more...
</button>
</div>
</div>
<div v-if="runs && runs.length == 0" class>No runs</div>
@ -105,22 +113,22 @@
</template>
<script>
import { fetchUser, fetchProject, fetchRuns } from "@/util/data.js";
import { userDirectRunLink, projectRunLink } from "@/util/link.js";
import { runResultClass } from "@/util/run.js";
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
import { fetchUser, fetchProject, fetchRuns } from '@/util/data.js';
import { userDirectRunLink, projectRunLink } from '@/util/link.js';
import { runResultClass } from '@/util/run.js';
import * as moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);
export default {
components: {},
name: "runs",
name: 'runs',
props: {
ownertype: String,
ownername: String,
projectref: Array,
query: String
query: String,
},
data() {
return {
@ -137,15 +145,15 @@ export default {
wantedRunsNumber: 25,
hasMoreRuns: false,
project: null,
user: null
user: null,
};
},
watch: {
$route: function() {
$route: function () {
this.runs = null;
this.hasMoreRuns = false;
this.update();
}
},
},
methods: {
projectRunLink: projectRunLink,
@ -161,7 +169,7 @@ export default {
this.fetchRunsLoading = false;
},
stillRunning(run) {
return run.result != "unknown" && run.phase == "running";
return run.result != 'unknown' && run.phase == 'running';
},
waitingApproval(run) {
return run.tasks_waiting_approval.length > 0;
@ -183,8 +191,8 @@ export default {
let projectref = [
this.ownertype,
this.ownername,
...this.projectref
].join("/");
...this.projectref,
].join('/');
let { data, error, aborted } = await fetchProject(
projectref,
@ -194,7 +202,7 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.project = data;
@ -212,7 +220,7 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.user = data;
@ -228,17 +236,17 @@ export default {
let group;
let lastrun = false;
if (this.project !== null) {
if (this.query == "branches") {
group = "/project/" + this.project.id + "/branch";
} else if (this.query == "tags") {
group = "/project/" + this.project.id + "/tag";
} else if (this.query == "pullrequests") {
group = "/project/" + this.project.id + "/pr";
if (this.query == 'branches') {
group = '/project/' + this.project.id + '/branch';
} else if (this.query == 'tags') {
group = '/project/' + this.project.id + '/tag';
} else if (this.query == 'pullrequests') {
group = '/project/' + this.project.id + '/pr';
} else {
group = "/project/" + this.project.id;
group = '/project/' + this.project.id;
}
} else if (this.user !== null) {
group = "/user/" + this.user.id;
group = '/user/' + this.user.id;
}
let newRuns = [];
@ -289,7 +297,7 @@ export default {
}, 2000);
},
duration(run) {
let formatString = "h:mm:ss[s]";
let formatString = 'h:mm:ss[s]';
let start = moment(run.start_time);
let end = moment(run.end_time);
@ -302,24 +310,24 @@ export default {
return moment.duration(end.diff(start)).format(formatString);
},
endTime(run) {
let formatString = "lll";
let formatString = 'lll';
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
return '';
}
return "Finished " + end.format(formatString);
return 'Finished ' + end.format(formatString);
},
endTimeHuman(run) {
let end = moment(run.end_time);
if (run.end_time === null) {
return "";
return '';
}
return end.fromNow();
}
},
},
created: function() {
created: function () {
window.setInterval(() => {
this.now = moment();
}, 500);
@ -331,9 +339,8 @@ export default {
this.fetchAbort.abort();
}
clearTimeout(this.fetchRunsSchedule);
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

60
src/components/runsummary.vue
View File

@ -7,7 +7,12 @@
>
<div>{{ fetchRunError }}</div>
</div>
<rundetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref" />
<rundetail
:run="run"
:ownertype="ownertype"
:ownername="ownername"
:projectref="projectref"
/>
<div v-if="run">
<div v-if="run.phase != 'setuperror'">
<div class="flex items-center my-6 justify-between">
@ -17,7 +22,7 @@
<button
@click="tasksDisplay = 'graph'"
class="relative flex items-center focus:outline-none bg-blue-500 hover:bg-blue-600 text-white font-semibold hover:text-white py-2 px-4 border border-blue-700 rounded rounded-r-none"
:class="{ 'bg-blue-600': tasksDisplay=='graph'}"
:class="{ 'bg-blue-600': tasksDisplay == 'graph' }"
title="Tasks Graph"
>
<i class="mr-1 mdi mdi-file-tree" />
@ -26,7 +31,7 @@
@click="tasksDisplay = 'list'"
class="relative flex items-center focus:outline-none bg-blue-500 hover:bg-blue-600 text-white font-semibold hover:text-white py-2 px-4 border border-l-0 border-blue-700 rounded rounded-l-none"
title="Tasks List"
:class="{ 'bg-blue-600': tasksDisplay=='list'}"
:class="{ 'bg-blue-600': tasksDisplay == 'list' }"
>
<i class="mr-1 mdi mdi-format-list-bulleted-square" />
</button>
@ -42,7 +47,8 @@
class="font-mono leading-snug text-xs"
v-for="(error, i) in run.setup_errors"
v-bind:key="i"
>{{error}}</pre>
>{{ error }}</pre
>
</div>
</div>
</div>
@ -50,21 +56,21 @@
</template>
<script>
import { fetchRun } from "@/util/data.js";
import { userDirectRunTaskLink, projectRunTaskLink } from "@/util/link.js";
import { fetchRun } from '@/util/data.js';
import { userDirectRunTaskLink, projectRunTaskLink } from '@/util/link.js';
import rundetail from "@/components/rundetail.vue";
import tasks from "@/components/tasks.vue";
import tasksgraph from "@/components/tasksgraph.vue";
import rundetail from '@/components/rundetail.vue';
import tasks from '@/components/tasks.vue';
import tasksgraph from '@/components/tasksgraph.vue';
export default {
name: "runsummary",
name: 'runsummary',
components: { rundetail, tasks, tasksgraph },
props: {
ownertype: String,
ownername: String,
projectref: Array,
runid: String
runid: String,
},
data() {
return {
@ -80,11 +86,11 @@ export default {
taskYSpace: 20,
hoverTask: null,
tasksDisplay: "graph"
tasksDisplay: 'graph',
};
},
watch: {
$route: async function() {
$route: async function () {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
@ -93,7 +99,7 @@ export default {
this.fetchAbort = new AbortController();
this.fetchRun();
}
},
},
methods: {
runTaskLink(task) {
@ -110,16 +116,16 @@ export default {
}
},
parents(task) {
return Object.keys(task.depends).map(key => {
return Object.keys(task.depends).map((key) => {
return this.run.tasks[task.depends[key].task_id].name;
});
},
taskClass(task) {
if (task.status == "success") return "success";
if (task.status == "failed") return "failed";
if (task.status == "stopped") return "failed";
if (task.status == "running") return "running";
return "unknown";
if (task.status == 'success') return 'success';
if (task.status == 'failed') return 'failed';
if (task.status == 'stopped') return 'failed';
if (task.status == 'running') return 'running';
return 'unknown';
},
async fetchRun() {
let { data, error, aborted } = await fetchRun(
@ -145,9 +151,8 @@ export default {
let task = tasks[taskID];
task.link = this.runTaskLink(task);
task.parents = this.parents(task);
task.waiting_approval = this.run.tasks_waiting_approval.includes(
taskID
);
task.waiting_approval =
this.run.tasks_waiting_approval.includes(taskID);
}
this.scheduleFetchRun();
@ -157,9 +162,9 @@ export default {
this.fetchRunSchedule = setTimeout(() => {
this.fetchRun();
}, 2000);
}
},
},
created: function() {
created: function () {
this.fetchAbort = new AbortController();
this.fetchRun();
},
@ -168,9 +173,8 @@ export default {
this.fetchAbort.abort();
}
clearTimeout(this.fetchRunSchedule);
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

18
src/components/secrets.vue
View File

@ -5,8 +5,10 @@
</div>
<div class="flex" v-for="secret in secrets" v-bind:key="secret.id">
<div class="w-2/12">
<span class="name">{{secret.name}}</span>
<div v-if="showparentpath" class="text-sm font-light">from {{secret.parent_path}}</div>
<span class="name">{{ secret.name }}</span>
<div v-if="showparentpath" class="text-sm font-light">
from {{ secret.parent_path }}
</div>
</div>
</div>
</div>
@ -15,16 +17,12 @@
<script>
export default {
components: {},
name: "secrets",
name: 'secrets',
props: {
secrets: Array,
showparentpath: Boolean
}
showparentpath: Boolean,
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

65
src/components/step.vue
View File

@ -12,7 +12,7 @@
class="inline-block mr-1 mdi mdi-arrow-right"
:class="{ 'arrow-down': active, 'arrow-right': !active }"
></i>
<span class="w-1/3 font-bold">{{step.name}}</span>
<span class="w-1/3 font-bold">{{ step.name }}</span>
</div>
<span class>{{ duration }}</span>
</div>
@ -20,18 +20,24 @@
<div v-if="step.type == 'run'">
<div class="p-3 rounded-t bg-gray-900 text-white">
<span>
<span class="w-2/12 bg-gray-700 rounded-l px-3 py-1 text-center font-semibold">Shell</span>
<span
class="w-2/12 bg-gray-700 rounded-l px-3 py-1 text-center font-semibold"
>Shell</span
>
<span
class="w-2/12 bg-gray-600 rounded-r px-3 py-1 text-center font-semibold mr-2"
>{{ step.shell}}</span>
>{{ step.shell }}</span
>
</span>
<span v-if="step.exit_status != undefined">
<span
class="w-2/12 bg-gray-700 rounded-l px-3 py-1 text-center font-semibold"
>Exit Status</span>
>Exit Status</span
>
<span
class="w-2/12 bg-gray-600 rounded-r px-3 py-1 text-center font-semibold mr-2"
>{{ step.exit_status}}</span>
>{{ step.exit_status }}</span
>
</span>
</div>
<div
@ -40,22 +46,27 @@
>
<i
class="inline-block mr-1 mdi mdi-arrow-right"
:class="{ 'arrow-down': commandActive, 'arrow-right': !commandActive }"
:class="{
'arrow-down': commandActive,
'arrow-right': !commandActive,
}"
></i>
<span>Command</span>
</div>
<div
v-show="commandActive"
class="p-3 bg-gray-900 text-white overflow-x-auto"
:class="{ 'rounded': step.type != 'run' }"
:class="{ rounded: step.type != 'run' }"
>
<pre class="font-mono text-xs">{{ step.command}}</pre>
<pre class="font-mono text-xs">{{ step.command }}</pre>
</div>
</div>
<div v-if="step.type == 'run'" class="px-3 py-2 bg-gray-700 text-white">Log</div>
<div v-if="step.type == 'run'" class="px-3 py-2 bg-gray-700 text-white">
Log
</div>
<div
class="p-3 rounded-b bg-gray-900 text-white"
:class="{ 'rounded': step.type != 'run' }"
:class="{ rounded: step.type != 'run' }"
>
<Log
v-bind:runid="runid"
@ -72,22 +83,22 @@
</template>
<script>
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
import Log from "@/components/log.vue";
import * as moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
import Log from '@/components/log.vue';
momentDurationFormatSetup(moment);
export default {
name: "step",
name: 'step',
components: {
Log
Log,
},
data() {
return {
active: false,
commandActive: true,
now: moment()
now: moment(),
};
},
props: {
@ -95,11 +106,11 @@ export default {
taskid: String,
setup: Boolean,
stepnum: Number,
step: Object
step: Object,
},
computed: {
duration() {
let formatString = "h:mm:ss[s]";
let formatString = 'h:mm:ss[s]';
let start = moment(this.step.start_time);
let end = moment(this.step.end_time);
@ -112,12 +123,12 @@ export default {
return moment.duration(end.diff(start)).format(formatString);
},
stepClass() {
if (this.step.phase == "success") return "success";
if (this.step.phase == "failed") return "failed";
if (this.step.phase == "stopped") return "failed";
if (this.step.phase == "running") return "running";
return "unknown";
}
if (this.step.phase == 'success') return 'success';
if (this.step.phase == 'failed') return 'failed';
if (this.step.phase == 'stopped') return 'failed';
if (this.step.phase == 'running') return 'running';
return 'unknown';
},
},
methods: {
toggle() {
@ -125,13 +136,13 @@ export default {
},
toggleCommand() {
this.commandActive = !this.commandActive;
}
},
},
created() {
window.setInterval(() => {
this.now = moment();
}, 500);
}
},
};
</script>
@ -144,4 +155,4 @@ export default {
transition: transform 0.2s ease-in-out;
transform: rotate(90deg);
}
</style>
</style>

10
src/components/tabarrow.vue
View File

@ -1,14 +1,18 @@
<template>
<div class="arrow">
<svg viewBox="0 0 15 15">
<path fill="none" stroke="#9d9d9d" d="M4.32.5l6.247 6.942L4.32 14.5"></path>
<path
fill="none"
stroke="#9d9d9d"
d="M4.32.5l6.247 6.942L4.32 14.5"
></path>
</svg>
</div>
</template>
<script>
export default {
name: "tabarrow"
name: 'tabarrow',
};
</script>
@ -20,4 +24,4 @@ export default {
position: relative;
top: 0.1rem;
}
</style>
</style>

51
src/components/tasks.vue
View File

@ -2,24 +2,31 @@
<ul>
<li v-for="task in sortedTasks" v-bind:key="task.id">
<div class="mb-2 border-l-5 rounded-l" :class="taskClass(task)">
<div class="px-4 py-4 flex justify-between items-center border border-l-0 rounded-r">
<div
class="px-4 py-4 flex justify-between items-center border border-l-0 rounded-r"
>
<router-link class="w-1/3 font-bold" tag="a" :to="task.link">
<span class="w-1/3 font-bold">{{task.name}}</span>
<span class="w-1/3 font-bold">{{ task.name }}</span>
</router-link>
<div class="w-1/4">
<span
v-if="task.waiting_approval"
class="w-2/12 bg-gray-200 rounded-full px-3 py-1 text-sm text-center font-semibold mr-2"
>Waiting Approval</span>
>Waiting Approval</span
>
</div>
<div class="w-1/4">
<span class="block text-xs" v-if="task.parents.length > 0">depends on: &nbsp;</span>
<span class="block text-xs" v-if="task.parents.length > 0"
>depends on: &nbsp;</span
>
<ul>
<li
class="font-thin text-xs text-gray-600"
v-for="dep in task.parents"
v-bind:key="dep"
>{{dep}}</li>
>
{{ dep }}
</li>
</ul>
</div>
<span class="w-16 text-right">{{ task.duration }}</span>
@ -30,21 +37,21 @@
</template>
<script>
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
import * as moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);
export default {
name: "tasks",
name: 'tasks',
components: {},
data() {
return {
now: moment()
now: moment(),
};
},
props: {
tasks: Object
tasks: Object,
},
computed: {
sortedTasks() {
@ -59,18 +66,18 @@ export default {
? -1
: 0
)
.map(k => tasks[k]);
.map((k) => tasks[k]);
for (let task of sortedTasks) {
task.duration = this.duration(task);
}
return sortedTasks;
}
},
},
methods: {
duration(task) {
let formatString = "h:mm:ss[s]";
let formatString = 'h:mm:ss[s]';
let start = moment(task.start_time);
let end = moment(task.end_time);
@ -83,18 +90,18 @@ export default {
return moment.duration(end.diff(start)).format(formatString);
},
taskClass(task) {
if (task.status == "success") return "success";
if (task.status == "failed") return "failed";
if (task.status == "stopped") return "failed";
if (task.status == "running") return "running";
if (task.status == "skipped") return "skipped";
return "unknown";
}
if (task.status == 'success') return 'success';
if (task.status == 'failed') return 'failed';
if (task.status == 'stopped') return 'failed';
if (task.status == 'running') return 'running';
if (task.status == 'skipped') return 'skipped';
return 'unknown';
},
},
created() {
window.setInterval(() => {
this.now = moment();
}, 500);
}
},
};
</script>
</script>

70
src/components/tasksgraph.vue
View File

@ -64,13 +64,13 @@
</template>
<script>
import * as moment from "moment";
import momentDurationFormatSetup from "moment-duration-format";
import * as moment from 'moment';
import momentDurationFormatSetup from 'moment-duration-format';
momentDurationFormatSetup(moment);
export default {
name: "tasksgraph",
name: 'tasksgraph',
components: {},
data() {
return {
@ -85,14 +85,14 @@ export default {
taskYSpace: 20,
hoverTask: null,
height: "400px"
height: '400px',
};
},
props: {
tasks: Object
tasks: Object,
},
computed: {
segments: function() {
segments: function () {
let segments = [];
for (let edge of this.edges) {
for (let i = 0; i < edge.edgePoints.length - 1; i++) {
@ -107,7 +107,7 @@ export default {
}
// TODO(sgotti) set different colors to edges based on source task status???
let stroke = "text-dark";
let stroke = 'text-dark';
segments.push({
edge: edge,
x1: edge.edgePoints[i].x,
@ -115,7 +115,7 @@ export default {
x2: edge.edgePoints[i + 1].x,
y2: edge.edgePoints[i + 1].y,
strokeWidth: strokeWidth,
stroke: stroke
stroke: stroke,
});
}
}
@ -130,16 +130,16 @@ export default {
}
return this.graphTasks;
}
},
},
watch: {
tasks: function(tasks) {
tasks: function (tasks) {
this.update(tasks);
}
},
},
methods: {
duration(task) {
let formatString = "h:mm:ss[s]";
let formatString = 'h:mm:ss[s]';
let start = moment(task.start_time);
let end = moment(task.end_time);
@ -152,12 +152,12 @@ export default {
return moment.duration(end.diff(start)).format(formatString);
},
taskClass(task) {
if (task.status == "success") return "success";
if (task.status == "failed") return "failed";
if (task.status == "stopped") return "failed";
if (task.status == "running") return "running";
if (task.status == "skipped") return "skipped";
return "unknown";
if (task.status == 'success') return 'success';
if (task.status == 'failed') return 'failed';
if (task.status == 'stopped') return 'failed';
if (task.status == 'running') return 'running';
if (task.status == 'skipped') return 'skipped';
return 'unknown';
},
update(tasks) {
// sort tasks by level
@ -169,7 +169,7 @@ export default {
? -1
: 0
)
.map(k => tasks[k]);
.map((k) => tasks[k]);
this.graphTasks = graphTasks;
@ -180,7 +180,7 @@ export default {
}
}
let taskChilds = function(tasks, task) {
let taskChilds = function (tasks, task) {
let childs = [];
for (let ot of tasks) {
for (let depTaskID in ot.depends) {
@ -192,7 +192,7 @@ export default {
return childs;
};
let taskMaxChildLevel = function(tasks, task) {
let taskMaxChildLevel = function (tasks, task) {
let level = task.level;
let childs = taskChilds(tasks, task);
for (let child of childs) {
@ -203,7 +203,7 @@ export default {
return level;
};
let levelTasks = function(tasks, level) {
let levelTasks = function (tasks, level) {
let levelTasks = [];
for (let task of tasks) {
if (task.level != level) {
@ -214,7 +214,7 @@ export default {
return levelTasks;
};
let levelsTasks = function(tasks, startLevel) {
let levelsTasks = function (tasks, startLevel) {
let levelTasks = [];
for (let task of tasks) {
if (task.level < startLevel) {
@ -225,13 +225,13 @@ export default {
return levelTasks;
};
let levelsTasksByRow = function(tasks, startLevel) {
let levelsTasksByRow = function (tasks, startLevel) {
return levelsTasks(tasks, startLevel).sort((a, b) =>
a.row > b.row ? 1 : b.row > a.row ? -1 : 0
);
};
let levelFreeRow = function(tasks, level) {
let levelFreeRow = function (tasks, level) {
let rows = [];
for (let task of tasks) {
if (task.level != level) {
@ -255,7 +255,7 @@ export default {
return prevrow;
};
let levelsMaxRow = function(tasks, level) {
let levelsMaxRow = function (tasks, level) {
let row = 0;
for (let task of tasks) {
if (level >= 0 && task.level > level) {
@ -344,7 +344,7 @@ export default {
sourceTask: pTask,
targetTask: curTask,
source: { level: pTask.level, row: pTask.row },
target: { level: curTask.level, row: curTask.row }
target: { level: curTask.level, row: curTask.row },
});
}
}
@ -362,30 +362,30 @@ export default {
edge.edgePoints.push({
x: (taskWidth + taskXSpace) * edge.source.level + taskWidth,
y: (taskHeight + taskYSpace) * edge.source.row + taskHeight / 2
y: (taskHeight + taskYSpace) * edge.source.row + taskHeight / 2,
});
edge.edgePoints.push({
x: (taskWidth + taskXSpace) * edge.target.level - taskXSpace / 2,
y: (taskHeight + taskYSpace) * edge.source.row + taskHeight / 2
y: (taskHeight + taskYSpace) * edge.source.row + taskHeight / 2,
});
edge.edgePoints.push({
x: (taskWidth + taskXSpace) * edge.target.level - taskXSpace / 2,
y: (taskHeight + taskYSpace) * edge.target.row + taskHeight / 2
y: (taskHeight + taskYSpace) * edge.target.row + taskHeight / 2,
});
edge.edgePoints.push({
x: (taskWidth + taskXSpace) * edge.target.level,
y: (taskHeight + taskYSpace) * edge.target.row + taskHeight / 2
y: (taskHeight + taskYSpace) * edge.target.row + taskHeight / 2,
});
}
let width = (maxlevel + 1) * (this.taskWidth + this.taskXSpace);
this.width = width + "px";
this.width = width + 'px';
let height =
(levelsMaxRow(graphTasks, -1) + 1) *
(this.taskHeight + this.taskYSpace);
this.height = height + "px";
}
this.height = height + 'px';
},
},
created() {
this.update(this.tasks);
@ -393,6 +393,6 @@ export default {
window.setInterval(() => {
this.now = moment();
}, 500);
}
},
};
</script>

55
src/components/tasksummary.vue
View File

@ -8,22 +8,30 @@
<div>Error fetching Run: {{ fetchRunError }}</div>
<div>Error fetching Task: {{ fetchTaskError }}</div>
</div>
<rundetail :run="run" :ownertype="ownertype" :ownername="ownername" :projectref="projectref" />
<rundetail
:run="run"
:ownertype="ownertype"
:ownername="ownername"
:projectref="projectref"
/>
<div v-if="task != null">
<div class="mt-8 mb-4 flex justify-between items-center">
<div class="flex items-center">
<span class="text-2xl mr-3">{{task.name}}</span>
<span class="text-2xl mr-3">{{ task.name }}</span>
<span
class="mr-3 rounded px-2 py-1 text-xs"
:class="taskClass(task)"
>{{ task.status | capitalize }}</span>
>{{ task.status | capitalize }}</span
>
</div>
<button
v-if="task.waiting_approval"
class="btn btn-blue"
@click="approveTask(run.id, task.id)"
>Approve</button>
>
Approve
</button>
</div>
<step
v-bind:runid="runid"
@ -44,23 +52,23 @@
</template>
<script>
import { fetchRun, fetchTask, approveTask } from "@/util/data.js";
import { fetchRun, fetchTask, approveTask } from '@/util/data.js';
import step from "@/components/step.vue";
import rundetail from "@/components/rundetail.vue";
import step from '@/components/step.vue';
import rundetail from '@/components/rundetail.vue';
export default {
components: {
step,
rundetail
rundetail,
},
name: "tasksummary",
name: 'tasksummary',
props: {
ownertype: String,
ownername: String,
projectref: Array,
runid: String,
taskid: String
taskid: String,
},
data() {
return {
@ -70,11 +78,11 @@ export default {
fetchTaskError: null,
run: null,
task: null
task: null,
};
},
watch: {
$route: async function() {
$route: async function () {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
@ -85,16 +93,16 @@ export default {
this.fetchRun();
this.fetchTask();
}
},
},
methods: {
taskClass(task) {
if (task.status == "success") return "is-success";
if (task.status == "failed") return "is-failed";
if (task.status == "stopped") return "is-failed";
if (task.status == "running") return "is-running";
if (task.status == "skipped") return "is-skipped";
return "unknown";
if (task.status == 'success') return 'is-success';
if (task.status == 'failed') return 'is-failed';
if (task.status == 'stopped') return 'is-failed';
if (task.status == 'running') return 'is-running';
if (task.status == 'skipped') return 'is-skipped';
return 'unknown';
},
async fetchRun() {
let { data, error, aborted } = await fetchRun(
@ -143,9 +151,9 @@ export default {
this.fetchTask();
}, 2000);
},
approveTask: approveTask
approveTask: approveTask,
},
created: function() {
created: function () {
this.fetchAbort = new AbortController();
this.fetchRun();
@ -157,9 +165,8 @@ export default {
}
clearTimeout(this.fetchRunSchedule);
clearTimeout(this.fetchTaskSchedule);
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

69
src/components/usersettings.vue
View File

@ -7,7 +7,10 @@
class="mb-4 bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded"
role="alert"
>
<p>Removing a Linked Account will also block all the projects that uses this Linked Account to access their remote repository</p>
<p>
Removing a Linked Account will also block all the projects that uses
this Linked Account to access their remote repository
</p>
</div>
<ul v-if="user.linked_accounts">
<li
@ -16,10 +19,14 @@
v-bind:key="index"
>
<div>
<span class="font-bold">{{la.remote_user_name}}</span>
<span class="ml-1">(on remote source {{laRemoteSourceName(la)}})</span>
<span class="font-bold">{{ la.remote_user_name }}</span>
<span class="ml-1"
>(on remote source {{ laRemoteSourceName(la) }})</span
>
</div>
<button class="btn btn-red" @click="deleteLinkedAccount(la)">Delete</button>
<button class="btn btn-red" @click="deleteLinkedAccount(la)">
Delete
</button>
</li>
<div
v-if="deleteLinkedAccountError"
@ -40,9 +47,13 @@
class="block appearance-none w-full bg-white border border-gray-400 hover:border-gray-500 px-4 py-2 pr-8 rounded shadow leading-tight focus:outline-none focus:shadow-outline"
v-model="selectedRemoteSourceName"
>
<option v-for="rs in remotesources" v-bind:key="rs.id">{{ rs.name }}</option>
<option v-for="rs in remotesources" v-bind:key="rs.id">
{{ rs.name }}
</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2">
<div
class="pointer-events-none absolute inset-y-0 right-0 flex items-center px-2"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
@ -56,7 +67,9 @@
</div>
</div>
<button class="ml-3 btn btn-blue" @click="addLinkedAccount()">Add Linked Account</button>
<button class="ml-3 btn btn-blue" @click="addLinkedAccount()">
Add Linked Account
</button>
</div>
</div>
@ -69,8 +82,10 @@
v-for="token in user.tokens"
v-bind:key="token"
>
<span class="font-bold">{{token}}</span>
<button class="btn btn-red" @click="deleteUserToken(token)">Delete</button>
<span class="font-bold">{{ token }}</span>
<button class="btn btn-red" @click="deleteUserToken(token)">
Delete
</button>
</li>
<div
v-if="deleteUserTokenError"
@ -102,8 +117,10 @@
</svg>
</div>
<div>
<p class="font-bold">User token created. Copy it now since it won't be showed again</p>
<p class="text-sm">{{token}}</p>
<p class="font-bold">
User token created. Copy it now since it won't be showed again
</p>
<p class="text-sm">{{ token }}</p>
</div>
</div>
<span
@ -130,8 +147,10 @@
type="text"
placeholder="Token name"
v-model="newtokenname"
>
<button class="ml-3 btn btn-blue" @click="createUserToken()">Create Token</button>
/>
<button class="ml-3 btn btn-blue" @click="createUserToken()">
Create Token
</button>
</div>
<div
v-if="createUserTokenError"
@ -151,14 +170,14 @@ import {
fetchRemoteSources,
createUserToken,
deleteUserToken,
deleteLinkedAccount
} from "@/util/data.js";
deleteLinkedAccount,
} from '@/util/data.js';
import { userAddLinkedAccountLink } from "@/util/link.js";
import { userAddLinkedAccountLink } from '@/util/link.js';
export default {
components: {},
name: "usersettings",
name: 'usersettings',
props: {},
data() {
return {
@ -169,7 +188,7 @@ export default {
remotesources: [],
token: null,
newtokenname: null,
selectedRemoteSourceName: null
selectedRemoteSourceName: null,
};
},
methods: {
@ -181,7 +200,7 @@ export default {
async fetchCurrentUser() {
let { data, error } = await fetchCurrentUser();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.user = data;
@ -189,7 +208,7 @@ export default {
async fetchRemoteSources() {
let { data, error } = await fetchRemoteSources();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.remotesources = data;
@ -249,15 +268,13 @@ export default {
return;
}
this.fetchCurrentUser();
}
},
},
created: function() {
created: function () {
this.fetchCurrentUser();
this.fetchRemoteSources();
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

42
src/components/vars.vue
View File

@ -18,21 +18,22 @@
</div>
<div class="flex" v-for="variable in variables" v-bind:key="variable.id">
<div class="w-2/12">
<span class="name">{{variable.name}}</span>
<div v-if="showparentpath" class="text-sm font-light">from {{variable.parent_path}}</div>
<span class="name">{{ variable.name }}</span>
<div v-if="showparentpath" class="text-sm font-light">
from {{ variable.parent_path }}
</div>
</div>
<div class="w-10/12">
<div class="flex" v-for="val in variable.values" v-bind:key="val.id">
<div class="w-2/12">
<span>{{val.secret_name}}</span>
<div
v-if="val.matching_secret_parent_path"
class="text-sm"
>using secret from {{val.matching_secret_parent_path}}</div>
<span>{{ val.secret_name }}</span>
<div v-if="val.matching_secret_parent_path" class="text-sm">
using secret from {{ val.matching_secret_parent_path }}
</div>
<div v-else class="text-sm text-red-600">no matching secret</div>
</div>
<div class="w-2/12">
<span>{{val.secret_var}}</span>
<span>{{ val.secret_var }}</span>
</div>
<div class="w-8/12">
<div v-if="val.when">
@ -43,13 +44,19 @@
<span>{{ type }}</span>
</div>
<div class="w-1/3">
<div v-for="include in val.when[type].include" v-bind:key="include.match">
<div>{{include.match}}</div>
<div
v-for="include in val.when[type].include"
v-bind:key="include.match"
>
<div>{{ include.match }}</div>
</div>
</div>
<div class="w-1/3">
<div v-for="exclude in val.when[type].exclude" v-bind:key="exclude.match">
<div>{{exclude.match}}</div>
<div
v-for="exclude in val.when[type].exclude"
v-bind:key="exclude.match"
>
<div>{{ exclude.match }}</div>
</div>
</div>
</div>
@ -66,15 +73,12 @@
<script>
export default {
components: {},
name: "vars",
name: 'vars',
props: {
variables: Array,
showparentpath: Boolean
}
showparentpath: Boolean,
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

4
src/css/tailwind.scss
View File

@ -1,7 +1,7 @@
@tailwind base;
@tailwind components;
@import "@/css/_ansi.scss";
@import '@/css/_ansi.scss';
.btn {
@apply font-bold py-2 px-4 rounded;
@ -119,7 +119,7 @@
border-radius: 290486px;
border-right-color: transparent;
border-top-color: transparent;
content: "";
content: '';
display: block;
width: 1em;
height: 1em;

26
src/main.js
View File

@ -1,11 +1,11 @@
import "@/css/tailwind.scss";
import { getUser } from "@/util/auth";
import "@mdi/font/css/materialdesignicons.css";
import Vue from "vue";
import Vue2Filters from "vue2-filters";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import '@/css/tailwind.scss';
import { getUser } from '@/util/auth';
import '@mdi/font/css/materialdesignicons.css';
import Vue from 'vue';
import Vue2Filters from 'vue2-filters';
import App from './App.vue';
import router from './router';
import store from './store';
Vue.use(Vue2Filters);
@ -13,12 +13,12 @@ Vue.use(Vue2Filters);
new Vue({
router,
store,
created: function() {
created: function () {
let user = getUser();
if (user) {
store.dispatch("setUser", user);
store.dispatch('setUser', user);
}
store.dispatch("setRegisterUser", null);
store.dispatch('setRegisterUser', null);
},
render: h => h(App)
}).$mount("#app");
render: (h) => h(App),
}).$mount('#app');

557
src/router.js
View File

@ -1,249 +1,348 @@
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "./views/Home.vue";
import User from "./views/User.vue";
import Org from "./views/Org.vue";
import Project from "./views/Project.vue";
import ProjectGroup from "./views/ProjectGroup.vue";
import AddLinkedAccount from "./views/AddLinkedAccount.vue";
import usersettings from "./components/usersettings.vue";
import projects from "./components/projects.vue";
import projectsettings from "./components/projectsettings.vue";
import projectgroupsettings from "./components/projectgroupsettings.vue";
import createproject from "./components/createproject.vue";
import createprojectgroup from "./components/createprojectgroup.vue";
import createorganization from "./components/createorganization.vue";
import orgmembers from "./components/orgmembers.vue";
import runs from "./components/runs.vue";
import runsummary from "./components/runsummary.vue";
import tasksummary from "./components/tasksummary.vue";
import Oauth2 from "./views/Oauth2.vue";
import Register from "./views/Register.vue";
import Login from "./views/Login.vue";
import Logout from "./views/Logout.vue";
import CreateSource from "./views/CreateSource.vue";
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
import User from './views/User.vue';
import Org from './views/Org.vue';
import Project from './views/Project.vue';
import ProjectGroup from './views/ProjectGroup.vue';
import AddLinkedAccount from './views/AddLinkedAccount.vue';
import usersettings from './components/usersettings.vue';
import projects from './components/projects.vue';
import projectsettings from './components/projectsettings.vue';
import projectgroupsettings from './components/projectgroupsettings.vue';
import createproject from './components/createproject.vue';
import createprojectgroup from './components/createprojectgroup.vue';
import createorganization from './components/createorganization.vue';
import orgmembers from './components/orgmembers.vue';
import runs from './components/runs.vue';
import runsummary from './components/runsummary.vue';
import tasksummary from './components/tasksummary.vue';
import Oauth2 from './views/Oauth2.vue';
import Register from './views/Register.vue';
import Login from './views/Login.vue';
import Logout from './views/Logout.vue';
import CreateSource from './views/CreateSource.vue';
import { parseRef, projectRunLink } from "@/util/link.js";
import { fetchProject } from "@/util/data.js";
import { parseRef, projectRunLink } from '@/util/link.js';
import { fetchProject } from '@/util/data.js';
import store from "./store";
import store from './store';
Vue.use(VueRouter);
const router = new VueRouter({
mode: "history",
mode: 'history',
routes: [
{
path: "/register",
name: "register",
path: '/register',
name: 'register',
component: Register,
},
{
path: "/newsource",
name: "newsource",
path: '/newsource',
name: 'newsource',
component: CreateSource,
},
{
path: "/login",
name: "login",
component: Login
path: '/login',
name: 'login',
component: Login,
},
{
path: "/logout",
name: "logout",
component: Logout
path: '/logout',
name: 'logout',
component: Logout,
},
{
path: "/oauth2/callback",
name: "oauth2callback",
component: Oauth2
path: '/oauth2/callback',
name: 'oauth2callback',
component: Oauth2,
},
{
path: "/",
name: "home",
component: Home
path: '/',
name: 'home',
component: Home,
},
{
path: "/neworganization",
path: '/neworganization',
component: createorganization,
},
{
path: "/user/:username",
path: '/user/:username',
component: User,
props: (route) => ({ username: route.params.username }),
children: [
{
path: "",
name: "user",
path: '',
name: 'user',
component: projects,
props: (route) => ({ ownertype: "user", ownername: route.params.username })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
}),
},
{
path: "projects",
name: "user projects",
path: 'projects',
name: 'user projects',
component: projects,
props: (route) => ({ ownertype: "user", ownername: route.params.username })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
}),
},
{
path: "runs",
name: "user direct runs",
path: 'runs',
name: 'user direct runs',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
}),
},
{
path: "runs/:runid",
name: "user direct run",
path: 'runs/:runid',
name: 'user direct run',
component: runsummary,
props: (route) => ({ ownertype: "user", ownername: route.params.username, runid: route.params.runid })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
runid: route.params.runid,
}),
},
{
path: "runs/:runid/tasks/:taskid",
name: "user direct run task",
path: 'runs/:runid/tasks/:taskid',
name: 'user direct run task',
component: tasksummary,
props: (route) => ({ ownertype: "user", ownername: route.params.username, runid: route.params.runid, taskid: route.params.taskid })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
runid: route.params.runid,
taskid: route.params.taskid,
}),
},
{
path: "settings",
name: "user settings",
path: 'settings',
name: 'user settings',
component: usersettings,
props: (route) => ({ username: route.params.username }),
},
{
path: "linkedaccounts/add/:remotesource",
name: "user add linked account",
path: 'linkedaccounts/add/:remotesource',
name: 'user add linked account',
component: AddLinkedAccount,
props: (route) => ({ username: route.params.username, remoteSourceName: route.params.remotesource })
props: (route) => ({
username: route.params.username,
remoteSourceName: route.params.remotesource,
}),
},
{
path: "createprojectgroup",
name: "user create project group",
path: 'createprojectgroup',
name: 'user create project group',
component: createprojectgroup,
props: (route) => ({ ownertype: "user", ownername: route.params.username })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
}),
},
{
path: "createproject",
name: "user create project",
path: 'createproject',
name: 'user create project',
component: createproject,
props: (route) => ({ ownertype: "user", ownername: route.params.username })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
}),
},
]
],
},
{
path: "/user/:username/projects/:projectref(.*\\.proj)",
path: '/user/:username/projects/:projectref(.*\\.proj)',
component: Project,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) }),
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
}),
children: [
{
path: "",
name: "user project",
path: '',
name: 'user project',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
}),
},
{
path: "runs",
name: "user project runs",
path: 'runs',
name: 'user project runs',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
}),
},
{
path: "branches",
name: "user project branches runs",
path: 'branches',
name: 'user project branches runs',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "branches" })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
query: 'branches',
}),
},
{
path: "tags",
name: "user project tags runs",
path: 'tags',
name: 'user project tags runs',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "tags" })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
query: 'tags',
}),
},
{
path: "pullrequests",
name: "user project pull requests runs",
path: 'pullrequests',
name: 'user project pull requests runs',
component: runs,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), query: "pullrequests" })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
query: 'pullrequests',
}),
},
{
path: "runs/:runid",
name: "user project run",
path: 'runs/:runid',
name: 'user project run',
component: runsummary,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), runid: route.params.runid })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
runid: route.params.runid,
}),
},
{
path: "runs/:runid/tasks/:taskid",
name: "user project run task",
path: 'runs/:runid/tasks/:taskid',
name: 'user project run task',
component: tasksummary,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref), runid: route.params.runid, taskid: route.params.taskid })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
runid: route.params.runid,
taskid: route.params.taskid,
}),
},
{
path: "settings",
name: "user project settings",
path: 'settings',
name: 'user project settings',
component: projectsettings,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectref: parseRef(route.params.projectref),
}),
},
]
],
},
{
path: "/user/:username/projectgroups/:projectgroupref(.*\\.proj)",
path: '/user/:username/projectgroups/:projectgroupref(.*\\.proj)',
component: ProjectGroup,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) }),
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
children: [
{
path: "",
name: "user project group",
path: '',
name: 'user project group',
component: projects,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) }),
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "projects",
name: "user project group projects",
path: 'projects',
name: 'user project group projects',
component: projects,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "settings",
name: "user project group settings",
path: 'settings',
name: 'user project group settings',
component: projectgroupsettings,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "createprojectgroup",
name: "user project group create project group",
path: 'createprojectgroup',
name: 'user project group create project group',
component: createprojectgroup,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "createproject",
name: "user project group create project",
path: 'createproject',
name: 'user project group create project',
component: createproject,
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'user',
ownername: route.params.username,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
]
],
},
{
path: "/org/:orgname",
path: '/org/:orgname',
component: Org,
props: (route) => ({ orgname: route.params.orgname }),
children: [
{
path: "",
name: "org",
path: '',
name: 'org',
component: projects,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
}),
},
{
path: "projects",
name: "org projects",
path: 'projects',
name: 'org projects',
component: projects,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
}),
},
{
path: "members",
name: "org members",
path: 'members',
name: 'org members',
component: orgmembers,
props: (route) => ({ orgname: route.params.orgname })
props: (route) => ({ orgname: route.params.orgname }),
},
/* {
path: "settings",
@ -252,141 +351,213 @@ const router = new VueRouter({
props: (route) => ({ username: route.params.username }),
}, */
{
path: "createprojectgroup",
name: "org create project group",
path: 'createprojectgroup',
name: 'org create project group',
component: createprojectgroup,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
}),
},
{
path: "createproject",
name: "org create project",
path: 'createproject',
name: 'org create project',
component: createproject,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
}),
},
]
],
},
{
path: "/org/:orgname/projects/:projectref(.*\\.proj)",
path: '/org/:orgname/projects/:projectref(.*\\.proj)',
component: Project,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) }),
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
}),
children: [
{
path: "",
name: "org project",
path: '',
name: 'org project',
component: runs,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
}),
},
{
path: "runs",
name: "org project runs",
path: 'runs',
name: 'org project runs',
component: runs,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
}),
},
{
path: "branches",
name: "org project branches runs",
path: 'branches',
name: 'org project branches runs',
component: runs,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "branches" })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
query: 'branches',
}),
},
{
path: "tags",
name: "org project tags runs",
path: 'tags',
name: 'org project tags runs',
component: runs,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "tags" })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
query: 'tags',
}),
},
{
path: "pullrequests",
name: "org project pull requests runs",
path: 'pullrequests',
name: 'org project pull requests runs',
component: runs,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), query: "pullrequests" })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
query: 'pullrequests',
}),
},
{
path: "runs/:runid",
name: "org project run",
path: 'runs/:runid',
name: 'org project run',
component: runsummary,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), runid: route.params.runid })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
runid: route.params.runid,
}),
},
{
path: "runs/:runid/tasks/:taskid",
name: "org project run task",
path: 'runs/:runid/tasks/:taskid',
name: 'org project run task',
component: tasksummary,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref), runid: route.params.runid, taskid: route.params.taskid })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
runid: route.params.runid,
taskid: route.params.taskid,
}),
},
{
path: "settings",
name: "org project settings",
path: 'settings',
name: 'org project settings',
component: projectsettings,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectref: parseRef(route.params.projectref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectref: parseRef(route.params.projectref),
}),
},
]
],
},
{
path: "/org/:orgname/projectgroups/:projectgroupref(.*\\.proj)",
path: '/org/:orgname/projectgroups/:projectgroupref(.*\\.proj)',
component: ProjectGroup,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) }),
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
children: [
{
path: "",
name: "org project group",
path: '',
name: 'org project group',
component: projects,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) }),
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "projects",
name: "org project group projects",
path: 'projects',
name: 'org project group projects',
component: projects,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "settings",
name: "org project group settings",
path: 'settings',
name: 'org project group settings',
component: projectgroupsettings,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "createprojectgroup",
name: "org project group create project group",
path: 'createprojectgroup',
name: 'org project group create project group',
component: createprojectgroup,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
{
path: "createproject",
name: "org project group create project",
path: 'createproject',
name: 'org project group create project',
component: createproject,
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectgroupref: parseRef(route.params.projectgroupref) })
props: (route) => ({
ownertype: 'org',
ownername: route.params.orgname,
projectgroupref: parseRef(route.params.projectgroupref),
}),
},
]
],
},
]
],
});
router.beforeEach(async (to, from, next) => {
store.dispatch("setError", null);
store.dispatch('setError', null);
const { path, query } = to
const { path, query } = to;
if (path == "/run") {
if (path == '/run') {
// generic run handler by projectref and runid
let projectref = query.projectref
let runid = query.runid
let projectref = query.projectref;
let runid = query.runid;
let { data, error } = await fetchProject(projectref);
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
let project = data;
let parts = project.path.split("/")
let nextPath = projectRunLink(parts[0], parts[1], parts.slice(2), runid)
let parts = project.path.split('/');
let nextPath = projectRunLink(parts[0], parts[1], parts.slice(2), runid);
next({ path: nextPath.path, replace: true })
next({ path: nextPath.path, replace: true });
}
next()
})
next();
});
export default router
export default router;

87
src/store.js
View File

@ -1,55 +1,54 @@
import Vue from 'vue'
import Vuex from 'vuex'
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex)
Vue.use(Vuex);
const state = {
error: null,
user: null,
registeruser: null,
}
error: null,
user: null,
registeruser: null,
};
const getters = {
// global error
error: state => {
return state.error
},
user: state => {
return state.user
},
registeruser: state => {
return state.registeruser
}
}
// global error
error: (state) => {
return state.error;
},
user: (state) => {
return state.user;
},
registeruser: (state) => {
return state.registeruser;
},
};
const mutations = {
setError(state, error) {
state.error = error
},
setUser(state, user) {
state.user = user
},
setRegisterUser(state, user) {
state.registeruser = user
}
}
setError(state, error) {
state.error = error;
},
setUser(state, user) {
state.user = user;
},
setRegisterUser(state, user) {
state.registeruser = user;
},
};
const actions = {
setError({ commit }, error) {
commit('setError', error)
},
setUser({ commit }, user) {
commit('setUser', user)
},
setRegisterUser({ commit }, user) {
commit('setRegisterUser', user)
}
}
setError({ commit }, error) {
commit('setError', error);
},
setUser({ commit }, user) {
commit('setUser', user);
},
setRegisterUser({ commit }, user) {
commit('setRegisterUser', user);
},
};
export default new Vuex.Store({
state,
getters,
actions,
mutations,
})
state,
getters,
actions,
mutations,
});

30
src/util/auth.js
View File

@ -1,8 +1,8 @@
import store from "@/store";
import store from '@/store';
const ID_TOKEN_KEY = "id_token";
const USER_KEY = "user";
const LOGIN_REDIRECT_KEY = "login_redirect";
const ID_TOKEN_KEY = 'id_token';
const USER_KEY = 'user';
const LOGIN_REDIRECT_KEY = 'login_redirect';
let API_URL = window.CONFIG.API_URL;
let API_BASE_PATH = window.CONFIG.API_BASE_PATH;
@ -10,20 +10,20 @@ let API_BASE_PATH = window.CONFIG.API_BASE_PATH;
export function setLoggedUser(token, user) {
setIdToken(token);
setUser(user);
store.dispatch("setUser", user);
store.dispatch('setUser', user);
}
export function doLogout() {
unsetIdToken();
unsetUser();
store.dispatch("setUser", null);
store.dispatch('setUser', null);
}
export function apiurlwithtoken(path) {
let u = new URL(API_URL + API_BASE_PATH + path);
let idToken = getIdToken();
if (idToken) {
u.searchParams.append("access_token", idToken);
u.searchParams.append('access_token', idToken);
}
return u;
}
@ -33,19 +33,19 @@ export function apiurl(path) {
}
export function loginurl() {
return apiurl("/auth/login");
return apiurl('/auth/login');
}
export function authorizeurl() {
return apiurl("/auth/authorize");
return apiurl('/auth/authorize');
}
export function registerurl() {
return new apiurl("/auth/register");
return new apiurl('/auth/register');
}
export function oauth2callbackurl() {
return new apiurl("/auth/oauth2/callback");
return new apiurl('/auth/oauth2/callback');
}
export async function loginapi(init) {
@ -64,19 +64,19 @@ export async function registerapi(init) {
return await window.fetch(registerurl(), init);
}
export async function fetch(url, init, signal, token, tokenType = "bearer") {
export async function fetch(url, init, signal, token, tokenType = 'bearer') {
if (!init) {
init = {};
}
if (init.headers === undefined) {
init["headers"] = {};
init['headers'] = {};
}
if (signal) {
init["signal"] = signal;
init['signal'] = signal;
}
let idToken = token || getIdToken();
if (idToken) {
init.headers["Authorization"] = tokenType + " " + idToken;
init.headers['Authorization'] = tokenType + ' ' + idToken;
}
return await window.fetch(url, init);

233
src/util/data.js
View File

@ -1,8 +1,9 @@
import router from "@/router";
import { apiurl, fetch as authfetch, loginapi, registerapi } from "@/util/auth";
import router from '@/router';
import { apiurl, fetch as authfetch, loginapi, registerapi } from '@/util/auth';
export const GITHUB_API_URL = "https://api.github.com";
export const GITHUB_SSH_KEY = "github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==";
export const GITHUB_API_URL = 'https://api.github.com';
export const GITHUB_SSH_KEY =
'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==';
export async function fetch(url, init, signal, token, tokenType) {
try {
@ -10,8 +11,8 @@ export async function fetch(url, init, signal, token, tokenType) {
if (!res.ok) {
if (res.status === 401) {
router.push({
name: "login",
query: { redirect: router.currentRoute.fullPath }
name: 'login',
query: { redirect: router.currentRoute.fullPath },
});
// if we return a response containing an error what happens is
// that router.push mounts the login view before the calling
@ -36,21 +37,21 @@ export async function fetch(url, init, signal, token, tokenType) {
return { data: await res.json(), error: null };
}
} catch (e) {
if (e.name == "AbortError") {
if (e.name == 'AbortError') {
return { data: null, error: null, aborted: true };
}
return { data: null, error: "api call failed: " + e.message };
return { data: null, error: 'api call failed: ' + e.message };
}
}
export async function login(username, password, remotesourcename) {
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
remote_source_name: remotesourcename,
login_name: username,
password: password
})
password: password,
}),
};
try {
@ -62,7 +63,7 @@ export async function login(username, password, remotesourcename) {
return { data: await res.json(), error: null };
}
} catch (e) {
return { data: null, error: "api call failed: " + e.message };
return { data: null, error: 'api call failed: ' + e.message };
}
}
@ -73,13 +74,13 @@ export async function register(
remotepassword
) {
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
username: username,
remote_source_name: remotesourcename,
remote_source_login_name: remoteloginname,
remote_source_login_password: remotepassword
})
remote_source_login_password: remotepassword,
}),
};
try {
@ -91,111 +92,122 @@ export async function register(
return { data: await res.json(), error: null };
}
} catch (e) {
return { data: null, error: "api call failed: " + e.message };
return { data: null, error: 'api call failed: ' + e.message };
}
}
export async function fetchCurrentUser(signal) {
let path = "/user";
let path = '/user';
return await fetch(apiurl(path), null, signal);
}
export async function fetchOrgMembers(orgref, signal) {
let path = "/orgs/" + orgref + "/members";
let path = '/orgs/' + orgref + '/members';
return await fetch(apiurl(path), null, signal);
}
export async function fetchRuns(group, startRunID, lastrun, signal) {
let u = apiurl("/runs");
let u = apiurl('/runs');
if (group) {
u.searchParams.append("group", group);
u.searchParams.append('group', group);
}
if (lastrun) {
u.searchParams.append("lastrun", true);
u.searchParams.append('lastrun', true);
}
if (startRunID) {
u.searchParams.append("start", startRunID);
u.searchParams.append('start', startRunID);
}
return await fetch(u, null, signal);
}
export async function fetchRun(runid, signal) {
return await fetch(apiurl("/runs/" + runid), null, signal);
return await fetch(apiurl('/runs/' + runid), null, signal);
}
export async function fetchTask(runid, taskid, signal) {
return await fetch(apiurl("/runs/" + runid + "/tasks/" + taskid), signal);
return await fetch(apiurl('/runs/' + runid + '/tasks/' + taskid), signal);
}
export async function fetchUser(username, signal) {
let path = "/users/" + username;
let path = '/users/' + username;
return await fetch(apiurl(path), null, signal);
}
export async function fetchProjectGroup(projectgroupref, signal) {
let path = "/projectgroups/" + encodeURIComponent(projectgroupref);
let path = '/projectgroups/' + encodeURIComponent(projectgroupref);
return await fetch(apiurl(path), null, signal);
}
export async function fetchProjectGroupSubgroups(projectgroupref, signal) {
let path = "/projectgroups/" + encodeURIComponent(projectgroupref);
path += "/subgroups";
let path = '/projectgroups/' + encodeURIComponent(projectgroupref);
path += '/subgroups';
return await fetch(apiurl(path), null, signal);
}
export async function fetchProjectGroupProjects(projectgroupref, signal) {
let path = "/projectgroups/" + encodeURIComponent(projectgroupref);
path += "/projects";
let path = '/projectgroups/' + encodeURIComponent(projectgroupref);
path += '/projects';
return await fetch(apiurl(path), null, signal);
}
export async function fetchProject(ref, signal) {
let path = "/projects/" + encodeURIComponent(ref);
let path = '/projects/' + encodeURIComponent(ref);
return await fetch(apiurl(path), null, signal);
}
export async function fetchSecrets(ownertype, ref, all, signal) {
let path;
if (ownertype == "project") {
path = "/projects/";
} else if (ownertype == "projectgroup") {
path = "/projectgroups/";
if (ownertype == 'project') {
path = '/projects/';
} else if (ownertype == 'projectgroup') {
path = '/projectgroups/';
}
path += encodeURIComponent(ref);
path += "/secrets";
path += '/secrets';
if (all) {
path += "?tree&removeoverridden";
path += '?tree&removeoverridden';
}
return await fetch(apiurl(path), null, signal);
}
export async function fetchVariables(ownertype, ref, all, signal) {
let path;
if (ownertype == "project") {
path = "/projects/";
} else if (ownertype == "projectgroup") {
path = "/projectgroups/";
if (ownertype == 'project') {
path = '/projects/';
} else if (ownertype == 'projectgroup') {
path = '/projectgroups/';
}
path += encodeURIComponent(ref);
path += "/variables";
path += '/variables';
if (all) {
path += "?tree&removeoverridden";
path += '?tree&removeoverridden';
}
return await fetch(apiurl(path), null, signal);
}
export async function createRemoteSource(
token, type, name, clientID, clientSecret, apiURL, authType, skipVerify,
sshHostKey, skipSshHostKeyCheck, registrationEnabled, loginEnabled, signal,
token,
type,
name,
clientID,
clientSecret,
apiURL,
authType,
skipVerify,
sshHostKey,
skipSshHostKeyCheck,
registrationEnabled,
loginEnabled,
signal
) {
let path = "/remotesources";
let path = '/remotesources';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
name,
apiurl: apiURL,
@ -208,38 +220,38 @@ export async function createRemoteSource(
oauth_2_client_secret: clientSecret,
registration_enabled: registrationEnabled,
login_enabled: loginEnabled,
})
}),
};
return await fetch(apiurl(path), init, signal, token, "token");
return await fetch(apiurl(path), init, signal, token, 'token');
}
export async function createOrganization(orgname, visibility, signal) {
let path = "/orgs";
let path = '/orgs';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
name: orgname,
visibility: visibility
})
visibility: visibility,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function createUserToken(username, tokenname, signal) {
let path = "/users/" + username + "/tokens";
let path = '/users/' + username + '/tokens';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
token_name: tokenname
})
token_name: tokenname,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function deleteUserToken(username, tokenname, signal) {
let path = "/users/" + username + "/tokens/" + tokenname;
let path = '/users/' + username + '/tokens/' + tokenname;
let init = {
method: "DELETE"
method: 'DELETE',
};
return await fetch(apiurl(path), init, signal);
}
@ -251,90 +263,90 @@ export async function createUserLinkedAccount(
password,
signal
) {
let path = "/users/" + username + "/linkedaccounts";
let path = '/users/' + username + '/linkedaccounts';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
remote_source_name: remotesourcename,
remote_source_login_name: loginname,
remote_source_login_password: password
})
remote_source_login_password: password,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function deleteLinkedAccount(username, laid, signal) {
let path = "/users/" + username + "/linkedaccounts/" + laid;
let path = '/users/' + username + '/linkedaccounts/' + laid;
let init = {
method: "DELETE"
method: 'DELETE',
};
return await fetch(apiurl(path), init, signal);
}
export async function restartRun(runid, fromStart, signal) {
let path = "/runs/" + runid + "/actions";
let path = '/runs/' + runid + '/actions';
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
action_type: "restart",
from_start: fromStart
})
action_type: 'restart',
from_start: fromStart,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function cancelRun(runid, signal) {
let path = "/runs/" + runid + "/actions";
let path = '/runs/' + runid + '/actions';
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
action_type: "cancel"
})
action_type: 'cancel',
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function stopRun(runid, signal) {
let path = "/runs/" + runid + "/actions";
let path = '/runs/' + runid + '/actions';
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
action_type: "stop"
})
action_type: 'stop',
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function approveTask(runid, taskid, signal) {
let path = "/runs/" + runid + "/tasks/" + taskid + "/actions";
let path = '/runs/' + runid + '/tasks/' + taskid + '/actions';
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
action_type: "approve"
})
action_type: 'approve',
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function fetchRemoteSources(signal) {
let path = "/remotesources";
let path = '/remotesources';
return await fetch(apiurl(path), null, signal);
}
export async function userRemoteRepos(remotesourceid, signal) {
let path = "/user/remoterepos/" + remotesourceid;
let path = '/user/remoterepos/' + remotesourceid;
return await fetch(apiurl(path, null, signal));
}
export async function createProjectGroup(parentref, name, visibility, signal) {
let path = "/projectgroups";
let path = '/projectgroups';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
name: name,
parent_ref: parentref,
visibility: visibility
})
visibility: visibility,
}),
};
return await fetch(apiurl(path), init, signal);
}
@ -345,13 +357,13 @@ export async function updateProjectGroup(
visibility,
signal
) {
let path = "/projectgroups/" + encodeURIComponent(projectgroupref);
let path = '/projectgroups/' + encodeURIComponent(projectgroupref);
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
name: name,
visibility: visibility
})
visibility: visibility,
}),
};
return await fetch(apiurl(path), init, signal);
}
@ -365,56 +377,61 @@ export async function createProject(
passvarstoforkedpr,
signal
) {
let path = "/projects";
let path = '/projects';
let init = {
method: "POST",
method: 'POST',
body: JSON.stringify({
name: name,
parent_ref: parentref,
visibility: visibility,
remote_source_name: remotesourcename,
repo_path: remoterepopath,
pass_vars_to_forked_pr: passvarstoforkedpr
})
pass_vars_to_forked_pr: passvarstoforkedpr,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function updateProject(projectref, name, visibility, passvarstoforkedpr, signal) {
let path = "/projects/" + encodeURIComponent(projectref);
export async function updateProject(
projectref,
name,
visibility,
passvarstoforkedpr,
signal
) {
let path = '/projects/' + encodeURIComponent(projectref);
let init = {
method: "PUT",
method: 'PUT',
body: JSON.stringify({
name: name,
visibility: visibility,
pass_vars_to_forked_pr: passvarstoforkedpr
})
pass_vars_to_forked_pr: passvarstoforkedpr,
}),
};
return await fetch(apiurl(path), init, signal);
}
export async function deleteProject(projectref, signal) {
let path = "/projects/" + encodeURIComponent(projectref);
let path = '/projects/' + encodeURIComponent(projectref);
let init = {
method: "DELETE"
method: 'DELETE',
};
return await fetch(apiurl(path), init, signal);
}
export async function projectUpdateRepoLinkedAccount(projectref, signal) {
let path =
"/projects/" + encodeURIComponent(projectref) + "/updaterepolinkedaccount";
'/projects/' + encodeURIComponent(projectref) + '/updaterepolinkedaccount';
let init = {
method: "PUT"
method: 'PUT',
};
return await fetch(apiurl(path), init, signal);
}
export async function deleteProjectGroup(projectgroupref, signal) {
let path = "/projectgroups/" + encodeURIComponent(projectgroupref);
let path = '/projectgroups/' + encodeURIComponent(projectgroupref);
let init = {
method: "DELETE"
method: 'DELETE',
};
return await fetch(apiurl(path), init, signal);
}

167
src/util/link.js
View File

@ -1,130 +1,173 @@
export function parseRef(ref) {
ref = ref.replace(/\.proj/, "")
// return empty array or split return an array with the empty element
if (!ref) {
return []
}
return ref.split("/")
ref = ref.replace(/\.proj/, '');
// return empty array or split return an array with the empty element
if (!ref) {
return [];
}
return ref.split('/');
}
export function ownerLink(ownertype, ownername) {
if (ownertype == "user") {
return { name: ownertype, params: { username: ownername } }
} else if (ownertype == "org") {
return { name: ownertype, params: { orgname: ownername } }
}
if (ownertype == 'user') {
return { name: ownertype, params: { username: ownername } };
} else if (ownertype == 'org') {
return { name: ownertype, params: { orgname: ownername } };
}
}
export function ownerProjectsLink(ownertype, ownername) {
return { name: ownertype + " projects", params: { ownername: ownername } }
return { name: ownertype + ' projects', params: { ownername: ownername } };
}
export function ownerSettingsLink(ownertype, ownername) {
if (ownertype == "user") {
return { name: ownertype + " settings", params: { username: ownername } }
} else if (ownertype == "org") {
return { name: ownertype + " settings", params: { orgname: ownername } }
}
if (ownertype == 'user') {
return { name: ownertype + ' settings', params: { username: ownername } };
} else if (ownertype == 'org') {
return { name: ownertype + ' settings', params: { orgname: ownername } };
}
}
export function userDirectRunsLink(username) {
return { name: "user direct runs", params: { username: username } }
return { name: 'user direct runs', params: { username: username } };
}
export function userDirectRunLink(username, runid) {
return { name: "user direct run", params: { username: username, runid: runid } }
return {
name: 'user direct run',
params: { username: username, runid: runid },
};
}
export function userDirectRunTaskLink(username, runid, taskid) {
return { name: "user direct run task", params: { username: username, runid: runid, taskid: taskid } }
return {
name: 'user direct run task',
params: { username: username, runid: runid, taskid: taskid },
};
}
export function userAddLinkedAccountLink(username, remotesourcename) {
return { name: "user add linked account", params: { username: username, remotesource: remotesourcename } }
return {
name: 'user add linked account',
params: { username: username, remotesource: remotesourcename },
};
}
export function orgMembersLink(orgname) {
return { name: "org members", params: { orgname: orgname } }
return { name: 'org members', params: { orgname: orgname } };
}
// Note, when creating a router link containing a project/projectgroup ref (a
// path), unfortunately, we cannot use route name and params since it will path
// escape it
export function projectGroupPath(ownertype, ownername, projectgroupref) {
let path = `/${ownertype}/${ownername}`
// root project group will have a .proj without a name
let projectgrouppath = (projectgroupref.join("/") + ".proj")
path = `${path}/projectgroups/${projectgrouppath}`
return path
let path = `/${ownertype}/${ownername}`;
// root project group will have a .proj without a name
let projectgrouppath = projectgroupref.join('/') + '.proj';
path = `${path}/projectgroups/${projectgrouppath}`;
return path;
}
export function projectPath(ownertype, ownername, projectref) {
let path = `/${ownertype}/${ownername}`
let projectpath = (projectref.join("/") + ".proj")
path = `${path}/projects/${projectpath}`
return path
let path = `/${ownertype}/${ownername}`;
let projectpath = projectref.join('/') + '.proj';
path = `${path}/projects/${projectpath}`;
return path;
}
export function projectGroupLink(ownertype, ownername, projectgroupref) {
return { path: projectGroupPath(ownertype, ownername, projectgroupref) }
return { path: projectGroupPath(ownertype, ownername, projectgroupref) };
}
export function projectGroupProjectsLink(ownertype, ownername, projectgroupref) {
let projectgrouppath = (projectgroupref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}/projects` }
export function projectGroupProjectsLink(
ownertype,
ownername,
projectgroupref
) {
let projectgrouppath = projectgroupref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projectgroups/${projectgrouppath}/projects`,
};
}
export function projectLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}` }
let projectpath = projectref.join('/') + '.proj';
return { path: `/${ownertype}/${ownername}/projects/${projectpath}` };
}
export function projectRunsLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs` }
let projectpath = projectref.join('/') + '.proj';
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs` };
}
export function projectBranchesRunsLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/branches` }
let projectpath = projectref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projects/${projectpath}/branches`,
};
}
export function projectTagsRunsLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/tags` }
let projectpath = projectref.join('/') + '.proj';
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/tags` };
}
export function projectPRsRunsLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/pullrequests` }
let projectpath = projectref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projects/${projectpath}/pullrequests`,
};
}
export function projectRunLink(ownertype, ownername, projectref, runid) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}` }
let projectpath = projectref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}`,
};
}
export function projectRunTaskLink(ownertype, ownername, projectref, runid, taskid) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}/tasks/${taskid}` }
export function projectRunTaskLink(
ownertype,
ownername,
projectref,
runid,
taskid
) {
let projectpath = projectref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projects/${projectpath}/runs/${runid}/tasks/${taskid}`,
};
}
export function projectGroupSettingsLink(ownertype, ownername, projectgroupref) {
let path = projectGroupPath(ownertype, ownername, projectgroupref)
return { path: `${path}/settings` }
export function projectGroupSettingsLink(
ownertype,
ownername,
projectgroupref
) {
let path = projectGroupPath(ownertype, ownername, projectgroupref);
return { path: `${path}/settings` };
}
export function projectSettingsLink(ownertype, ownername, projectref) {
let projectpath = (projectref.join("/") + ".proj")
return { path: `/${ownertype}/${ownername}/projects/${projectpath}/settings` }
let projectpath = projectref.join('/') + '.proj';
return {
path: `/${ownertype}/${ownername}/projects/${projectpath}/settings`,
};
}
export function projectGroupCreateProjectGroupLink(ownertype, ownername, projectgroupref) {
let path = projectGroupPath(ownertype, ownername, projectgroupref)
return { path: `${path}/createprojectgroup` }
export function projectGroupCreateProjectGroupLink(
ownertype,
ownername,
projectgroupref
) {
let path = projectGroupPath(ownertype, ownername, projectgroupref);
return { path: `${path}/createprojectgroup` };
}
export function projectGroupCreateProjectLink(ownertype, ownername, projectgroupref) {
let path = projectGroupPath(ownertype, ownername, projectgroupref)
return { path: `${path}/createproject` }
}
export function projectGroupCreateProjectLink(
ownertype,
ownername,
projectgroupref
) {
let path = projectGroupPath(ownertype, ownername, projectgroupref);
return { path: `${path}/createproject` };
}

37
src/util/run.js
View File

@ -1,25 +1,24 @@
export function runStatus(run) {
// * if the run has a result then return the result
// * if stopping return "stopping"
// * return the phase
if (run.result != "unknown") return run.result;
if (run.stopping) return "stopping";
if (run.phase != "finished") return run.phase;
// * if the run has a result then return the result
// * if stopping return "stopping"
// * return the phase
if (run.result != 'unknown') return run.result;
if (run.stopping) return 'stopping';
if (run.phase != 'finished') return run.phase;
return run.result;
return run.result;
}
export function runResultClass(run) {
let status = runStatus(run);
let status = runStatus(run);
if (status == "setuperror") return "setuperror";
if (status == "queued") return "unknown";
if (status == "cancelled") return "failed";
if (status == "running") return "running";
if (status == "stopping") return "failed";
if (status == "stopped") return "failed";
if (status == "success") return "success";
if (status == "failed") return "failed";
return "unknown";
}
if (status == 'setuperror') return 'setuperror';
if (status == 'queued') return 'unknown';
if (status == 'cancelled') return 'failed';
if (status == 'running') return 'running';
if (status == 'stopping') return 'failed';
if (status == 'stopped') return 'failed';
if (status == 'success') return 'success';
if (status == 'failed') return 'failed';
return 'unknown';
}

42
src/views/AddLinkedAccount.vue
View File

@ -13,36 +13,44 @@
v-if="remotesource.auth_type == 'password'"
action="Add Linked Account"
:name="remotesource.name"
v-on:login="doAddLinkedAccount(remotesource.name, $event.username, $event.password)"
v-on:login="
doAddLinkedAccount(
remotesource.name,
$event.username,
$event.password
)
"
/>
<button
v-else
class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
@click="doAddLinkedAccount(remotesource.name)"
>Add Linked Account with {{remotesource.name}}</button>
>
Add Linked Account with {{ remotesource.name }}
</button>
</div>
</div>
</div>
</template>
<script>
import LoginForm from "@/components/loginform";
import LoginForm from '@/components/loginform';
import { fetchRemoteSources, createUserLinkedAccount } from "@/util/data";
import { fetchRemoteSources, createUserLinkedAccount } from '@/util/data';
export default {
name: "AddLinkedAccount",
name: 'AddLinkedAccount',
props: {
username: String,
remoteSourceName: String
remoteSourceName: String,
},
components: {
LoginForm
LoginForm,
},
data: function() {
data: function () {
return {
addLinkedAccountError: null,
remotesource: null
remotesource: null,
};
},
methods: {
@ -52,7 +60,7 @@ export default {
async fetchRemoteSources() {
let { data, error } = await fetchRemoteSources();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
for (var i = 0; i < data.length; i++) {
@ -79,17 +87,13 @@ export default {
return;
}
this.$router.push({
name: "user settings",
params: { username: this.username }
name: 'user settings',
params: { username: this.username },
});
}
},
},
created: function() {
created: function () {
this.fetchRemoteSources();
}
},
};
</script>

63
src/views/CreateSource.vue
View File

@ -8,13 +8,9 @@
<span class="block sm:inline">{{ error }}</span>
</div>
<div>
<div >
<div
class="flex justify-center items-center w-max"
>
<CreateSourceForm
v-on:createSource="createSource($event)"
/>
<div>
<div class="flex justify-center items-center w-max">
<CreateSourceForm v-on:createSource="createSource($event)" />
</div>
</div>
</div>
@ -22,40 +18,53 @@
</template>
<script>
import CreateSourceForm from "@/components/createsourceform";
import { createRemoteSource } from "@/util/data.js";
import router from "@/router";
import CreateSourceForm from '@/components/createsourceform';
import { createRemoteSource } from '@/util/data.js';
import router from '@/router';
export default {
name: "CreateSource",
name: 'CreateSource',
components: {
CreateSourceForm
CreateSourceForm,
},
data: function() {
data: function () {
return {
error: null,
};
},
methods: {
async createSource({
token, name, type, clientId, clientSecret, url, skipVerify, sshHostKey,
async createSource({
token,
name,
type,
clientId,
clientSecret,
url,
skipVerify,
sshHostKey,
skipSshHostKeyCheck,
}) {
const res = await createRemoteSource(
token, type, name, clientId, clientSecret, url, "oauth2", skipVerify,
sshHostKey, skipSshHostKeyCheck, true, true, undefined,
token,
type,
name,
clientId,
clientSecret,
url,
'oauth2',
skipVerify,
sshHostKey,
skipSshHostKeyCheck,
true,
true,
undefined
);
if (res.error)
this.$store.dispatch("setError", res.error);
else
router.push({name: "login"});
}
if (res.error) this.$store.dispatch('setError', res.error);
else router.push({ name: 'login' });
},
},
mounted: function() {
this.$store.dispatch("setError", null);
mounted: function () {
this.$store.dispatch('setError', null);
},
};
</script>

32
src/views/Home.vue
View File

@ -1,25 +1,15 @@
<template>
<div class="home flex flex-col items-center">
<img
class="w-64 h-64"
src="/img/agola-logo-name.svg" alt="agola logo"
/>
<img class="w-64 h-64" src="/img/agola-logo-name.svg" alt="agola logo" />
<h1 class="text-2xl">CI/CD redefined</h1>
<div class="m-8">
<h1 class="text-lg">
Hi, you are almost ready to go! Just
<router-link
class="underline text-blue-600"
to="/login"
>
<router-link class="underline text-blue-600" to="/login">
login
</router-link>
into your account
or create a
<router-link
class="underline text-blue-600"
to="/register"
>
into your account or create a
<router-link class="underline text-blue-600" to="/register">
new one
</router-link>
</h1>
@ -28,22 +18,22 @@
</template>
<script>
import { mapGetters } from "vuex";
import { mapGetters } from 'vuex';
export default {
name: "Home",
name: 'Home',
components: {},
computed: {
...mapGetters(["user"])
...mapGetters(['user']),
},
created: function() {
created: function () {
let user = this.$store.getters.user;
if (user) {
this.$router.push({
name: "user",
params: { username: this.user.username }
name: 'user',
params: { username: this.user.username },
});
}
}
},
};
</script>

47
src/views/Login.vue
View File

@ -13,14 +13,9 @@
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
>
No remote sources defined
<router-link
class="underline text-blue-600 block"
to="/newsource"
>
<button class="btn btn-blue">
Create one
</button>
</router-link>
<router-link class="underline text-blue-600 block" to="/newsource">
<button class="btn btn-blue">Create one</button>
</router-link>
</div>
<div
v-else-if="!hasLoginRemoteSources"
@ -61,25 +56,25 @@
</template>
<script>
import { fetchRemoteSources, login } from "@/util/data";
import { fetchRemoteSources, login } from '@/util/data';
import {
setLoggedUser,
unsetLoginRedirect,
setLoginRedirect,
doLogout
} from "@/util/auth";
doLogout,
} from '@/util/auth';
import LoginForm from "@/components/loginform";
import LoginForm from '@/components/loginform';
export default {
name: "Login",
name: 'Login',
components: {
LoginForm
LoginForm,
},
data: function() {
data: function () {
return {
error: null,
remotesources: null
remotesources: null,
};
},
computed: {
@ -96,20 +91,20 @@ export default {
}
}
return false;
}
},
},
methods: {
async fetchRemoteSources() {
let { data, error } = await fetchRemoteSources();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.remotesources = data;
},
async doLogin(username, password, remotesourcename) {
unsetLoginRedirect();
let redirect = this.$route.query["redirect"];
let redirect = this.$route.query['redirect'];
this.error = null;
@ -131,18 +126,16 @@ export default {
unsetLoginRedirect();
this.$router.push(redirect);
} else {
this.$router.push({ name: "home" });
this.$router.push({ name: 'home' });
}
}
},
},
mounted: function() {
this.$store.dispatch("setError", null);
mounted: function () {
this.$store.dispatch('setError', null);
},
created: function() {
created: function () {
doLogout();
this.fetchRemoteSources();
}
},
};
</script>

12
src/views/Logout.vue
View File

@ -1,13 +1,11 @@
<script>
import { doLogout } from "@/util/auth";
import { doLogout } from '@/util/auth';
export default {
name: "Logout",
created: function() {
name: 'Logout',
created: function () {
doLogout();
this.$router.push("/");
}
this.$router.push('/');
},
};
</script>

37
src/views/Oauth2.vue
View File

@ -11,32 +11,32 @@
</template>
<script>
import { fetch } from "@/util/data";
import { fetch } from '@/util/data';
import {
oauth2callbackurl,
setLoggedUser,
unsetLoginRedirect,
getLoginRedirect
} from "@/util/auth";
getLoginRedirect,
} from '@/util/auth';
export default {
components: {},
name: "Oauth2",
name: 'Oauth2',
props: {},
data() {
return {
error: null,
run: null,
code: this.$route.query.code,
username: null
username: null,
};
},
methods: {
async doOauth2() {
let u = oauth2callbackurl();
u.searchParams.append("code", this.$route.query.code);
u.searchParams.append("state", this.$route.query.state);
u.searchParams.append('code', this.$route.query.code);
u.searchParams.append('state', this.$route.query.state);
let { data, error } = await fetch(u);
if (error) {
// set local login error on failed oauth2.
@ -44,29 +44,28 @@ export default {
return;
}
if (data.request_type === "loginuser") {
if (data.request_type === 'loginuser') {
setLoggedUser(data.response.token, data.response.user);
let redirect = getLoginRedirect(redirect);
if (redirect) {
unsetLoginRedirect();
this.$router.push(redirect);
} else {
this.$router.push({ name: "home" });
this.$router.push({ name: 'home' });
}
} else if (data.request_type === "authorize") {
this.$store.dispatch("setRegisterUser", data.response);
this.$router.push("/register");
} else if (data.request_type === "createuserla") {
} else if (data.request_type === 'authorize') {
this.$store.dispatch('setRegisterUser', data.response);
this.$router.push('/register');
} else if (data.request_type === 'createuserla') {
this.$router.push({
name: "user settings",
params: { username: this.username }
name: 'user settings',
params: { username: this.username },
});
}
}
},
},
created: function() {
created: function () {
this.doOauth2();
}
},
};
</script>

57
src/views/Org.vue
View File

@ -9,13 +9,15 @@
<span class="mx-2">/</span>
</li>
<li>
<router-link :to="ownerLink('org', orgname)">{{orgname}}</router-link>
<router-link :to="ownerLink('org', orgname)">{{
orgname
}}</router-link>
</li>
</ol>
</nav>
<div class="mb-8 flex justify-between">
<span class="text-3xl">{{orgname}}</span>
<span class="text-3xl">{{ orgname }}</span>
<createprojectbutton v-on:click="goToCreate($event)" />
</div>
@ -23,7 +25,12 @@
<ul class="flex-grow tab">
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name === 'org projects' || $route.name === 'org' }]"
:class="[
{
'tab-element-selected':
$route.name === 'org projects' || $route.name === 'org',
},
]"
>
<router-link :to="ownerProjectsLink('org', orgname)">
<i class="mr-1 mdi mdi-home" />
@ -42,7 +49,13 @@
<li
v-if="$route.name.endsWith('org project group settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('org project group settings') }]"
:class="[
{
'tab-element-selected': $route.name.endsWith(
'org project group settings'
),
},
]"
>
<router-link :to="projectGroupSettingsLink('org', orgname, [])">
<i class="mr-1 mdi mdi-settings" />
@ -52,7 +65,9 @@
<li
v-if="$route.name.endsWith('org settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('org settings') }]"
:class="[
{ 'tab-element-selected': $route.name.endsWith('org settings') },
]"
>
<router-link :to="ownerSettingsLink('org', orgname)">
<i class="mr-1 mdi mdi-settings" />
@ -65,7 +80,7 @@
<div class="relative">
<div
class="flex -mt-3"
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
@click="dropdownActive = !dropdownActive"
>
<button
@ -108,9 +123,8 @@
</div>
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import {
ownerLink,
@ -119,23 +133,23 @@ import {
orgMembersLink,
projectGroupCreateProjectGroupLink,
projectGroupCreateProjectLink,
projectGroupSettingsLink
} from "@/util/link.js";
projectGroupSettingsLink,
} from '@/util/link.js';
import createprojectbutton from "@/components/createprojectbutton.vue";
import createprojectbutton from '@/components/createprojectbutton.vue';
export default {
name: "Org",
name: 'Org',
components: { createprojectbutton },
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
props: {
orgname: String
orgname: String,
},
data() {
return {
dropdownActive: false
dropdownActive: false,
};
},
methods: {
@ -147,19 +161,18 @@ export default {
projectGroupCreateProjectLink: projectGroupCreateProjectLink,
projectGroupSettingsLink: projectGroupSettingsLink,
goToCreate(type) {
if (type == "project") {
if (type == 'project') {
this.$router.push(
projectGroupCreateProjectLink("org", this.orgname, [])
projectGroupCreateProjectLink('org', this.orgname, [])
);
return;
}
this.$router.push(
projectGroupCreateProjectGroupLink("org", this.orgname, [])
projectGroupCreateProjectGroupLink('org', this.orgname, [])
);
}
}
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

145
src/views/Project.vue
View File

@ -1,9 +1,13 @@
<template>
<div>
<projbreadcrumbs :ownertype="ownertype" :ownername="ownername" :projectref="projectref" />
<projbreadcrumbs
:ownertype="ownertype"
:ownername="ownername"
:projectref="projectref"
/>
<div class="mb-8">
<span class="text-3xl">{{projectName()}}</span>
<span class="text-3xl">{{ projectName() }}</span>
</div>
<div class="flex justify-between">
@ -17,7 +21,13 @@
</li>
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project runs') || $route.name.endsWith('project') }]"
:class="[
{
'tab-element-selected':
$route.name.match('project runs') ||
$route.name.endsWith('project'),
},
]"
>
<router-link :to="projectRunsLink(ownertype, ownername, projectref)">
<i class="mr-1 mdi mdi-asterisk" />
@ -26,45 +36,84 @@
</li>
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project branches runs') }]"
:class="[
{
'tab-element-selected': $route.name.match(
'project branches runs'
),
},
]"
>
<router-link :to="projectBranchesRunsLink(ownertype, ownername, projectref)">
<router-link
:to="projectBranchesRunsLink(ownertype, ownername, projectref)"
>
<i class="mr-1 mdi mdi-source-branch" />
<span>Branches</span>
</router-link>
</li>
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project tags runs') }]"
:class="[
{ 'tab-element-selected': $route.name.match('project tags runs') },
]"
>
<router-link :to="projectTagsRunsLink(ownertype, ownername, projectref)">
<router-link
:to="projectTagsRunsLink(ownertype, ownername, projectref)"
>
<i class="mr-1 mdi mdi-tag" />
<span>Tags</span>
</router-link>
</li>
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project pull requests runs') }]"
:class="[
{
'tab-element-selected': $route.name.match(
'project pull requests runs'
),
},
]"
>
<router-link :to="projectPRsRunsLink(ownertype, ownername, projectref)">
<router-link
:to="projectPRsRunsLink(ownertype, ownername, projectref)"
>
<i class="mr-1 mdi mdi-source-pull" />
<span>Pull Requests</span>
</router-link>
</li>
<li
v-if="run && ($route.name.endsWith('project run') || $route.name.endsWith('project run task'))"
v-if="
run &&
($route.name.endsWith('project run') ||
$route.name.endsWith('project run task'))
"
>
<tabarrow />
</li>
<li
class="tab-element"
v-if="run && ($route.name.endsWith('project run') || $route.name.endsWith('project run task'))"
:class="[{ 'tab-element-selected': $route.name.endsWith('project run') }]"
v-if="
run &&
($route.name.endsWith('project run') ||
$route.name.endsWith('project run task'))
"
:class="[
{ 'tab-element-selected': $route.name.endsWith('project run') },
]"
>
<router-link :to="projectRunLink(ownertype, ownername, projectref, $route.params.runid)">
<router-link
:to="
projectRunLink(
ownertype,
ownername,
projectref,
$route.params.runid
)
"
>
<p>
Run
<strong>#{{run.counter}}</strong>
<strong>#{{ run.counter }}</strong>
</p>
</router-link>
</li>
@ -74,23 +123,41 @@
<li
class="tab-element"
v-if="run && $route.name.endsWith('project run task')"
:class="[{ 'tab-element-selected': $route.name.endsWith('project run task') }]"
:class="[
{
'tab-element-selected': $route.name.endsWith('project run task'),
},
]"
>
<router-link
:to="projectRunTaskLink(ownertype, ownername, projectref, $route.params.runid, $route.params.taskid)"
:to="
projectRunTaskLink(
ownertype,
ownername,
projectref,
$route.params.runid,
$route.params.taskid
)
"
>
<p>
Task
<strong>{{run.tasks[$route.params.taskid].name}}</strong>
<strong>{{ run.tasks[$route.params.taskid].name }}</strong>
</p>
</router-link>
</li>
<li
v-if="$route.name.endsWith('project settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('project settings') }]"
:class="[
{
'tab-element-selected': $route.name.endsWith('project settings'),
},
]"
>
<router-link :to="projectSettingsLink(ownertype, ownername, projectref)">
<router-link
:to="projectSettingsLink(ownertype, ownername, projectref)"
>
<i class="mr-1 mdi mdi-settings" />
<span>Project Settings</span>
</router-link>
@ -101,7 +168,7 @@
<div class="relative">
<div
class="flex -mt-3"
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
@click="dropdownActive = !dropdownActive"
>
<button
@ -135,9 +202,8 @@
</div>
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import {
projectLink,
@ -147,35 +213,35 @@ import {
projectPRsRunsLink,
projectRunLink,
projectRunTaskLink,
projectSettingsLink
} from "@/util/link.js";
projectSettingsLink,
} from '@/util/link.js';
import { fetchRun } from "@/util/data.js";
import { fetchRun } from '@/util/data.js';
import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
import tabarrow from "@/components/tabarrow.vue";
import projbreadcrumbs from '@/components/projbreadcrumbs.vue';
import tabarrow from '@/components/tabarrow.vue';
export default {
name: "Project",
name: 'Project',
components: { projbreadcrumbs, tabarrow },
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
props: {
ownertype: String,
ownername: String,
projectref: Array
projectref: Array,
},
data() {
return {
fetchAbort: null,
dropdownActive: false,
run: null
run: null,
};
},
watch: {
$route: async function(route) {
$route: async function (route) {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
@ -191,12 +257,12 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.run = data;
}
}
},
},
methods: {
projectLink: projectLink,
@ -209,9 +275,9 @@ export default {
projectSettingsLink: projectSettingsLink,
projectName() {
return this.projectref[this.projectref.length - 1];
}
},
},
created: async function() {
created: async function () {
this.fetchAbort = new AbortController();
if (this.$route.params.runid) {
@ -223,7 +289,7 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.run = data;
@ -233,9 +299,8 @@ export default {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

71
src/views/ProjectGroup.vue
View File

@ -1,4 +1,3 @@
<template>
<div>
<projbreadcrumbs
@ -8,7 +7,7 @@
/>
<div class="mb-8 flex justify-between">
<span class="text-3xl">{{projectGroupName()}}</span>
<span class="text-3xl">{{ projectGroupName() }}</span>
<createprojectbutton v-on:click="goToCreate($event)" />
</div>
@ -16,9 +15,19 @@
<ul class="flex-grow tab">
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.match('project group project') || $route.name.endsWith('project group') }]"
:class="[
{
'tab-element-selected':
$route.name.match('project group project') ||
$route.name.endsWith('project group'),
},
]"
>
<router-link :to="projectGroupProjectsLink(ownertype, ownername, projectgroupref)">
<router-link
:to="
projectGroupProjectsLink(ownertype, ownername, projectgroupref)
"
>
<i class="mdi mdi-home" />
<span>Projects</span>
</router-link>
@ -26,9 +35,19 @@
<li
v-if="$route.name.endsWith('project group settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('project group settings') }]"
:class="[
{
'tab-element-selected': $route.name.endsWith(
'project group settings'
),
},
]"
>
<router-link :to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)">
<router-link
:to="
projectGroupSettingsLink(ownertype, ownername, projectgroupref)
"
>
<i class="mdi mdi-settings" />
<span>Project Group Settings</span>
</router-link>
@ -39,7 +58,7 @@
<div class="relative">
<div
class="flex -mt-3"
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
@click="dropdownActive = !dropdownActive"
>
<button
@ -57,7 +76,13 @@
<li>
<router-link
class="block px-4 py-2 hover:bg-blue-500 hover:text-white"
:to="projectGroupSettingsLink(ownertype, ownername, projectgroupref)"
:to="
projectGroupSettingsLink(
ownertype,
ownername,
projectgroupref
)
"
>
<i class="mdi mdi-settings" />
<span>Project Group Settings</span>
@ -73,34 +98,33 @@
</div>
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import {
projectGroupProjectsLink,
projectGroupSettingsLink,
projectGroupCreateProjectGroupLink,
projectGroupCreateProjectLink
} from "@/util/link.js";
projectGroupCreateProjectLink,
} from '@/util/link.js';
import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
import createprojectbutton from "@/components/createprojectbutton.vue";
import projbreadcrumbs from '@/components/projbreadcrumbs.vue';
import createprojectbutton from '@/components/createprojectbutton.vue';
export default {
name: "ProjectGroup",
name: 'ProjectGroup',
components: { projbreadcrumbs, createprojectbutton },
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
props: {
ownertype: String,
ownername: String,
projectgroupref: Array
projectgroupref: Array,
},
data() {
return {
dropdownActive: false
dropdownActive: false,
};
},
methods: {
@ -110,12 +134,12 @@ export default {
projectGroupCreateProjectLink: projectGroupCreateProjectLink,
projectGroupName() {
if (!this.projectgroupref.length) {
return "Root Project Group";
return 'Root Project Group';
}
return this.projectgroupref[this.projectgroupref.length - 1];
},
goToCreate(type) {
if (type == "project") {
if (type == 'project') {
this.$router.push(
projectGroupCreateProjectLink(
this.ownertype,
@ -132,10 +156,9 @@ export default {
this.projectgroupref
)
);
}
}
},
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

58
src/views/Register.vue
View File

@ -28,13 +28,8 @@
class="mb-10 bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative"
>
No remote sources defined
<router-link
class="underline text-blue-600 block"
to="/newsource"
>
<button class="btn btn-blue">
Create one
</button>
<router-link class="underline text-blue-600 block" to="/newsource">
<button class="btn btn-blue">Create one</button>
</router-link>
</div>
<div
@ -75,29 +70,29 @@
</template>
<script>
import { mapGetters } from "vuex";
import { mapGetters } from 'vuex';
import LoginForm from "@/components/loginform";
import RegisterForm from "@/components/registerform";
import LoginForm from '@/components/loginform';
import RegisterForm from '@/components/registerform';
import { fetchRemoteSources, register } from "@/util/data";
import { fetchRemoteSources, register } from '@/util/data';
import { authorizeurl, fetch, doLogout } from "@/util/auth";
import { authorizeurl, fetch, doLogout } from '@/util/auth';
export default {
name: "Register",
name: 'Register',
components: {
LoginForm,
RegisterForm
RegisterForm,
},
data: function() {
data: function () {
return {
error: null,
remotesources: null
remotesources: null,
};
},
computed: {
...mapGetters(["registeruser"]),
...mapGetters(['registeruser']),
hasRemoteSources() {
if (this.remotesources) {
@ -112,13 +107,13 @@ export default {
}
}
return false;
}
},
},
methods: {
async fetchRemoteSources() {
let { data, error } = await fetchRemoteSources();
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.remotesources = data;
@ -127,12 +122,12 @@ export default {
let u = authorizeurl();
let res = await (
await fetch(u, {
method: "POST",
method: 'POST',
body: JSON.stringify({
remote_source_name: remotesourcename,
login_name: username,
password: password
})
password: password,
}),
})
).json();
@ -140,11 +135,11 @@ export default {
window.location = res.oauth2_redirect;
return;
}
this.$store.dispatch("setRegisterUser", {
this.$store.dispatch('setRegisterUser', {
remote_user_info: res.remote_user_info,
remote_source_name: res.remote_source_name,
remote_source_login_name: username,
remote_source_login_password: password
remote_source_login_password: password,
});
},
async doRegister(
@ -170,18 +165,15 @@ export default {
window.location = data.oauth2_redirect;
return;
}
this.$router.push({ name: "home" });
}
this.$router.push({ name: 'home' });
},
},
mounted: function() {
this.$store.dispatch("setError", null);
mounted: function () {
this.$store.dispatch('setError', null);
},
created: function() {
created: function () {
doLogout();
this.fetchRemoteSources();
}
},
};
</script>

106
src/views/User.vue
View File

@ -9,13 +9,15 @@
<span class="mx-2">/</span>
</li>
<li>
<router-link :to="ownerLink('user', username)">{{username}}</router-link>
<router-link :to="ownerLink('user', username)">{{
username
}}</router-link>
</li>
</ol>
</nav>
<div class="mb-8 flex justify-between">
<span class="text-3xl">{{username}}</span>
<span class="text-3xl">{{ username }}</span>
<createprojectbutton v-on:click="goToCreate($event)" />
</div>
@ -23,7 +25,12 @@
<ul class="flex-grow tab">
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name === 'user projects' || $route.name === 'user' }]"
:class="[
{
'tab-element-selected':
$route.name === 'user projects' || $route.name === 'user',
},
]"
>
<router-link :to="ownerProjectsLink('user', username)">
<i class="mr-1 mdi mdi-home" />
@ -32,7 +39,9 @@
</li>
<li
class="tab-element"
:class="[{ 'tab-element-selected': $route.name === 'user direct runs' }]"
:class="[
{ 'tab-element-selected': $route.name === 'user direct runs' },
]"
>
<router-link :to="userDirectRunsLink(username)">
<i class="mr-1 mdi mdi-run-fast" />
@ -40,19 +49,29 @@
</router-link>
</li>
<li
v-if="run && ($route.name === 'user direct run' || $route.name == 'user direct run task')"
v-if="
run &&
($route.name === 'user direct run' ||
$route.name == 'user direct run task')
"
>
<tabarrow />
</li>
<li
class="tab-element"
v-if="run && ($route.name === 'user direct run' || $route.name == 'user direct run task')"
:class="[{ 'tab-element-selected': $route.name === 'user direct run' }]"
v-if="
run &&
($route.name === 'user direct run' ||
$route.name == 'user direct run task')
"
:class="[
{ 'tab-element-selected': $route.name === 'user direct run' },
]"
>
<router-link :to="userDirectRunLink(username, $route.params.runid)">
<span>
Run
<strong>#{{run.counter}}</strong>
<strong>#{{ run.counter }}</strong>
</span>
</router-link>
</li>
@ -62,21 +81,35 @@
<li
class="tab-element"
v-if="run && $route.name == 'user direct run task'"
:class="[{ 'tab-element-selected': $route.name === 'user direct run task' }]"
:class="[
{ 'tab-element-selected': $route.name === 'user direct run task' },
]"
>
<router-link
:to="userDirectRunTaskLink(username, $route.params.runid, $route.params.taskid)"
:to="
userDirectRunTaskLink(
username,
$route.params.runid,
$route.params.taskid
)
"
>
<span>
Task
<strong>{{run.tasks[$route.params.taskid].name}}</strong>
<strong>{{ run.tasks[$route.params.taskid].name }}</strong>
</span>
</router-link>
</li>
<li
v-if="$route.name.endsWith('user project group settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('user project group settings') }]"
:class="[
{
'tab-element-selected': $route.name.endsWith(
'user project group settings'
),
},
]"
>
<router-link :to="projectGroupSettingsLink('user', username, [])">
<i class="mr-1 mdi mdi-settings" />
@ -86,7 +119,9 @@
<li
v-if="$route.name.endsWith('user settings')"
class="tab-element"
:class="[{ 'tab-element-selected': $route.name.endsWith('user settings') }]"
:class="[
{ 'tab-element-selected': $route.name.endsWith('user settings') },
]"
>
<router-link :to="ownerSettingsLink('user', username)">
<i class="mr-1 mdi mdi-settings" />
@ -99,7 +134,7 @@
<div class="relative">
<div
class="flex -mt-3"
v-click-outside="() => dropdownActive = false"
v-click-outside="() => (dropdownActive = false)"
@click="dropdownActive = !dropdownActive"
>
<button
@ -134,7 +169,7 @@
</template>
<script>
import * as vClickOutside from "v-click-outside-x";
import * as vClickOutside from 'v-click-outside-x';
import {
ownerLink,
@ -145,33 +180,33 @@ import {
ownerSettingsLink,
projectGroupCreateProjectGroupLink,
projectGroupCreateProjectLink,
projectGroupSettingsLink
} from "@/util/link.js";
projectGroupSettingsLink,
} from '@/util/link.js';
import { fetchRun } from "@/util/data.js";
import { fetchRun } from '@/util/data.js';
import createprojectbutton from "@/components/createprojectbutton.vue";
import tabarrow from "@/components/tabarrow.vue";
import createprojectbutton from '@/components/createprojectbutton.vue';
import tabarrow from '@/components/tabarrow.vue';
export default {
name: "User",
name: 'User',
components: { createprojectbutton, tabarrow },
directives: {
clickOutside: vClickOutside.directive
clickOutside: vClickOutside.directive,
},
props: {
username: String
username: String,
},
data() {
return {
fetchAbort: null,
dropdownActive: false,
run: null
run: null,
};
},
watch: {
$route: async function(route) {
$route: async function (route) {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
@ -187,12 +222,12 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.run = data;
}
}
},
},
methods: {
ownerLink: ownerLink,
@ -205,18 +240,18 @@ export default {
projectGroupCreateProjectLink: projectGroupCreateProjectLink,
projectGroupSettingsLink: projectGroupSettingsLink,
goToCreate(type) {
if (type == "project") {
if (type == 'project') {
this.$router.push(
projectGroupCreateProjectLink("user", this.username, [])
projectGroupCreateProjectLink('user', this.username, [])
);
return;
}
this.$router.push(
projectGroupCreateProjectGroupLink("user", this.username, [])
projectGroupCreateProjectGroupLink('user', this.username, [])
);
}
},
},
created: async function() {
created: async function () {
this.fetchAbort = new AbortController();
if (this.$route.params.runid) {
@ -228,7 +263,7 @@ export default {
return;
}
if (error) {
this.$store.dispatch("setError", error);
this.$store.dispatch('setError', error);
return;
}
this.run = data;
@ -238,9 +273,8 @@ export default {
if (this.fetchAbort) {
this.fetchAbort.abort();
}
}
},
};
</script>
<style scoped lang="scss">
</style>
<style scoped lang="scss"></style>

75
tailwind.js
View File

@ -6,43 +6,54 @@ module.exports = {
padding: '2rem',
},
fontFamily: {
'sans': ['Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji']
sans: [
'Segoe UI',
'Roboto',
'Helvetica Neue',
'Arial',
'Noto Sans',
'sans-serif',
'Apple Color Emoji',
'Segoe UI Emoji',
'Segoe UI Symbol',
'Noto Color Emoji',
],
},
borderWidth: {
default: '1px',
'0': '0',
'2': '2px',
'4': '4px',
'5': '5px',
'6': '6px',
0: '0',
2: '2px',
4: '4px',
5: '5px',
6: '6px',
},
spacing: {
px: '1px',
'2px': '2px',
'3px': '3px',
'0': '0',
'1': '0.25rem',
'2': '0.5rem',
'3': '0.75rem',
'4': '1rem',
'5': '1.25rem',
'6': '1.5rem',
'8': '2rem',
'10': '2.5rem',
'12': '3rem',
'16': '4rem',
'20': '5rem',
'24': '6rem',
'32': '8rem',
'40': '10rem',
'48': '12rem',
'56': '14rem',
'64': '16rem',
0: '0',
1: '0.25rem',
2: '0.5rem',
3: '0.75rem',
4: '1rem',
5: '1.25rem',
6: '1.5rem',
8: '2rem',
10: '2.5rem',
12: '3rem',
16: '4rem',
20: '5rem',
24: '6rem',
32: '8rem',
40: '10rem',
48: '12rem',
56: '14rem',
64: '16rem',
},
colors: {
dark: '#4a4a4a',
}
}
},
},
},
variants: {
backgroundColor: ['responsive', 'hover', 'focus', 'disabled'],
@ -56,9 +67,9 @@ module.exports = {
function ({ addVariant, e }) {
addVariant('disabled', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`disabled${separator}${className}`)}:disabled`
})
})
}
]
}
return `.${e(`disabled${separator}${className}`)}:disabled`;
});
});
},
],
};

6
vue.config.js
View File

@ -1,7 +1,7 @@
const path = require("path");
const path = require('path');
module.exports = {
css: {
sourceMap: true
}
sourceMap: true,
},
};