Initial display of project settings
Show project variables
This commit is contained in:
Simone Gotti
parent
b9fb3d6860
commit
395f8454a0
|
|
@ -46,10 +46,7 @@ export default {
|
|||
.then(res => res.json())
|
||||
.then(res => {
|
||||
console.log(res);
|
||||
let projects = res.map(function(project) {
|
||||
return project;
|
||||
});
|
||||
this.projects = projects;
|
||||
this.projects = res;
|
||||
console.log("projects", this.projects);
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,45 @@
|
|||
<template>
|
||||
<div>
|
||||
<projectvars :variables="variables" :allvariables="allvariables"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { fetchVariables } from "@/util/data.js";
|
||||
|
||||
import projectvars from "@/components/projectvars";
|
||||
|
||||
export default {
|
||||
components: { projectvars },
|
||||
name: "projectsettings",
|
||||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectname: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
variables: [],
|
||||
allvariables: []
|
||||
};
|
||||
},
|
||||
created: async function() {
|
||||
this.variables = await fetchVariables(
|
||||
this.ownertype,
|
||||
this.ownername,
|
||||
this.projectname
|
||||
);
|
||||
this.allvariables = await fetchVariables(
|
||||
this.ownertype,
|
||||
this.ownername,
|
||||
this.projectname,
|
||||
true
|
||||
);
|
||||
console.log("variables", this.variables);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<div>
|
||||
<h4 class="title is-4">Project variables</h4>
|
||||
<vars :variables="variables"/>
|
||||
|
||||
<hr>
|
||||
<h4 class="title is-4">All project variables</h4>
|
||||
<vars :variables="allvariables" :showparentpath="true"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
import vars from "@/components/vars";
|
||||
|
||||
export default {
|
||||
components: { vars },
|
||||
name: "projectvars",
|
||||
props: {
|
||||
variables: Array,
|
||||
allvariables: Array
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
</style>
|
||||
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="columns has-text-weight-bold">
|
||||
<div class="column is-2">Name</div>
|
||||
<div class="column is-10">
|
||||
<div class="columns">
|
||||
<div class="column is-2">Secret Name</div>
|
||||
<div class="column is-2">Secret Value</div>
|
||||
<div class="column">
|
||||
<div class="columns">
|
||||
<div class="column">Conditions</div>
|
||||
<div class="column">Include</div>
|
||||
<div class="column">Exclude</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns" v-for="variable in variables" v-bind:key="variable.id">
|
||||
<div class="column is-2">
|
||||
<span class="name">{{variable.name}}</span>
|
||||
<div v-if="showparentpath" class="var-parent-path">from {{variable.parent_path}}</div>
|
||||
</div>
|
||||
<div class="column is-10">
|
||||
<div class="item-list" v-for="val in variable.values" v-bind:key="val.id">
|
||||
<div class="columns">
|
||||
<div class="column is-2">
|
||||
<span class="secret-name">{{val.secret_name}}</span>
|
||||
<div
|
||||
v-if="val.matching_secret_parent_path"
|
||||
class="matching-secret"
|
||||
>using secret from {{val.matching_secret_parent_path}}</div>
|
||||
<div v-else class="no-matching-secret">no matching secret</div>
|
||||
</div>
|
||||
<div class="column is-2">
|
||||
<span class="secret-var">{{val.secret_var}}</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div v-if="val.when">
|
||||
<div v-if="val.when.branch">
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<span>branch</span>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="item-list"
|
||||
v-for="include in val.when.branch.include"
|
||||
v-bind:key="include.match"
|
||||
>
|
||||
<span class="secret-name">{{include.match}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div
|
||||
class="item-list"
|
||||
v-for="exclude in val.when.branch.exclude"
|
||||
v-bind:key="exclude.match"
|
||||
>
|
||||
<span class="secret-name">{{exclude.match}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { apiurl, fetch } from "@/util/auth";
|
||||
|
||||
export default {
|
||||
components: {},
|
||||
name: "vars",
|
||||
props: {
|
||||
variables: Array,
|
||||
showparentpath: Boolean
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "@/css/_variables.scss";
|
||||
@import "~bulma/bulma.sass";
|
||||
|
||||
.name {
|
||||
}
|
||||
|
||||
.secret-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.var-parent-path {
|
||||
@extend .has-text-weight-light;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
|
||||
.matching-secret {
|
||||
@extend .has-text-weight-light;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
|
||||
.no-matching-secret {
|
||||
@extend .has-text-danger;
|
||||
@extend .is-size-7;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
|
|
@ -6,6 +6,7 @@ import Org from "./views/Org.vue";
|
|||
import Project from "./views/Project.vue";
|
||||
//import Run from "./views/Run.vue";
|
||||
import projects from "./components/projects.vue";
|
||||
import projectsettings from "./components/projectsettings.vue";
|
||||
import runs from "./components/runs.vue";
|
||||
import run from "./components/run.vue";
|
||||
import task from "./components/task.vue";
|
||||
|
|
@ -104,7 +105,12 @@ export default new VueRouter({
|
|||
component: task,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
|
||||
},
|
||||
|
||||
{
|
||||
path: "settings",
|
||||
name: "user project settings",
|
||||
component: projectsettings,
|
||||
props: (route) => ({ ownertype: "user", ownername: route.params.username, projectname: route.params.projectname })
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
@ -143,6 +149,12 @@ export default new VueRouter({
|
|||
component: task,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname, runid: route.params.runid, taskid: route.params.taskid })
|
||||
},
|
||||
{
|
||||
path: "settings",
|
||||
name: "org project settings",
|
||||
component: projectsettings,
|
||||
props: (route) => ({ ownertype: "org", ownername: route.params.orgname, projectname: route.params.projectname })
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -8,4 +8,16 @@ export async function fetchRun(runid) {
|
|||
export async function fetchTask(runid, taskid) {
|
||||
let res = await fetch(apiurl("/run/" + runid + "/task/" + taskid))
|
||||
return res.json();
|
||||
}
|
||||
|
||||
export async function fetchVariables(ownertype, ownername, projectname, all) {
|
||||
let path =
|
||||
"/projects/" +
|
||||
encodeURIComponent(ownertype + "/" + ownername + "/" + projectname);
|
||||
path += "/variables";
|
||||
if (all) {
|
||||
path += "?tree&removeoverridden";
|
||||
}
|
||||
let res = await fetch(apiurl(path));
|
||||
return res.json();
|
||||
}
|
||||
|
|
@ -37,4 +37,8 @@ export function projectRunLink(ownertype, ownername, projectname, runid) {
|
|||
|
||||
export function projectRunTaskLink(ownertype, ownername, projectname, runid, taskid) {
|
||||
return { name: ownertype + " project run task", params: { orgname: ownername, projectname: projectname, runid: runid, taskid: taskid } }
|
||||
}
|
||||
|
||||
export function projectSettingsLink(ownertype, ownername, projectname) {
|
||||
return { name: ownertype + " project settings", params: { username: ownername, projectname: projectname } }
|
||||
}
|
||||
|
|
@ -34,6 +34,11 @@
|
|||
>Task {{$route.params.taskid}}</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="is-right">
|
||||
<li :class="[{ 'is-active': $route.name.endsWith('project settings') }]">
|
||||
<router-link :to="projectSettingsLink(ownertype, ownername, projectname)">Project Settings</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
|
@ -45,7 +50,8 @@ import {
|
|||
projectLink,
|
||||
projectRunsLink,
|
||||
projectRunLink,
|
||||
projectRunTaskLink
|
||||
projectRunTaskLink,
|
||||
projectSettingsLink
|
||||
} from "@/util/link.js";
|
||||
|
||||
import projbreadcrumbs from "@/components/projbreadcrumbs.vue";
|
||||
|
|
@ -58,17 +64,14 @@ export default {
|
|||
props: {
|
||||
ownertype: String,
|
||||
ownername: String,
|
||||
projectname: String,
|
||||
currentTab: {
|
||||
type: String,
|
||||
default: "description"
|
||||
}
|
||||
projectname: String
|
||||
},
|
||||
methods: {
|
||||
projectLink: projectLink,
|
||||
projectRunsLink: projectRunsLink,
|
||||
projectRunLink: projectRunLink,
|
||||
projectRunTaskLink: projectRunTaskLink
|
||||
projectRunTaskLink: projectRunTaskLink,
|
||||
projectSettingsLink: projectSettingsLink
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -71,11 +71,7 @@ export default {
|
|||
name: "User",
|
||||
components: { tabarrow },
|
||||
props: {
|
||||
username: String,
|
||||
currentTab: {
|
||||
type: String,
|
||||
default: "projects"
|
||||
}
|
||||
username: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue