Initial display of project settings

Show project variables

src/components/projects.vue

@@ -46,10 +46,7 @@ export default {
         .then(res => res.json())
         .then(res => {
           console.log(res);
-          let projects = res.map(function(project) {
+          this.projects = res;
-            return project;
-          });
-          this.projects = projects;
           console.log("projects", this.projects);
         });
     }

src/components/projectsettings.vue

@@ -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>

src/components/projectvars.vue

@@ -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>
+

src/components/vars.vue

@@ -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>
+
+

src/router.js

@@ -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 })
+        },
       ]
     },
   ]

src/util/data.js

@@ -9,3 +9,15 @@ 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();
+}

src/util/link.js

@@ -38,3 +38,7 @@ 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 } }
+}

src/views/Project.vue

@@ -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,
+    projectname: String
-    currentTab: {
-      type: String,
-      default: "description"
-    }
   },
   methods: {
     projectLink: projectLink,
     projectRunsLink: projectRunsLink,
     projectRunLink: projectRunLink,
-    projectRunTaskLink: projectRunTaskLink
+    projectRunTaskLink: projectRunTaskLink,
+    projectSettingsLink: projectSettingsLink
   }
 };
 </script>

src/views/User.vue

@@ -71,11 +71,7 @@ export default {
   name: "User",
   components: { tabarrow },
   props: {
-    username: String,
+    username: String
-    currentTab: {
-      type: String,
-      default: "projects"
-    }
   },
   data() {
     return {