Merge pull request #71 from kubero-dev/release/v1.6.0

Release/v1.6.0
kubero-dev · Jan 8, 2023 · cd9af4a · cd9af4a
2 parents b490ec5 + 281ba30
commit cd9af4a
Show file tree

Hide file tree

Showing 14 changed files with 481 additions and 42 deletions.
diff --git a/client/src/components/apps/new.vue b/client/src/components/apps/new.vue
@@ -366,6 +366,89 @@
         </v-col>
       </v-row>
 
+      <v-divider class="ma-5"></v-divider>
+      <!-- EXTRAVOLUMES -->
+      <h4 class="text-uppercase">Volumes</h4>
+      <div v-for="volume in extraVolumes" v-bind:key="volume.id">
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-text-field
+              v-model="volume.name"
+              label="name"
+              :readonly="app!='new'"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            cols="12"
+            md="2"
+          >
+            <v-text-field
+              v-model="volume.size"
+              label="size"
+              :readonly="app!='new'"
+            ></v-text-field>
+          </v-col>
+          <v-col
+            cols="12"
+            md="1"
+          >
+            <v-btn
+            elevation="2"
+            icon
+            small
+            @click="removeVolumeLine(volume.name)"
+            >
+                <v-icon dark >
+                    mdi-minus
+                </v-icon>
+            </v-btn>
+          </v-col>
+        </v-row>
+
+        <v-row>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-select
+              v-model="volume.storageClass"
+              :items="storageclasses"
+              label="Storage Class"
+              :readonly="app!='new'"
+            ></v-select>
+          </v-col>
+          <v-col
+            cols="12"
+            md="3"
+          >
+            <v-text-field
+              v-model="volume.mountPath"
+              label="Mount Path"
+            ></v-text-field>
+          </v-col>
+        </v-row>
+      </div>
+
+      <v-row>
+        <v-col
+          cols="12"
+        >
+          <v-btn
+          elevation="2"
+          icon
+          small
+          @click="addVolumeLine()"
+          >
+              <v-icon dark >
+                  mdi-plus
+              </v-icon>
+          </v-btn>
+        </v-col>
+      </v-row>
+
       <v-divider class="ma-5"></v-divider>
       <!-- CRONJOBS -->
       <h4 class="text-uppercase">Cronjobs</h4>
@@ -615,6 +698,24 @@ export default {
         },
         */
       ],
+      storageclasses : [
+/*
+        'standard',
+        'standard-fast',
+*/
+      ],
+      extraVolumes: [
+        /*
+        {
+          name: 'example-volume',
+          emptyDir: false,
+          storageClass: 'standard',
+          size: '1Gi',
+          accessMode: ['ReadWriteOnce']
+          mountPath: '/example/path',
+        },
+        */
+      ],
       addons: [
         /*
         {
@@ -660,6 +761,7 @@ export default {
       }
     },
     mounted() {
+      this.loadStorageClasses();
       this.loadPipeline();
       this.loadPodsizeList();
       this.loadApp(); // this may lead into a race condition with the buildpacks loaded in loadPipeline
@@ -703,6 +805,13 @@ export default {
 
         });
       },
+      loadStorageClasses() {
+        axios.get('/api/config/storageclasses').then(response => {
+          for (let i = 0; i < response.data.length; i++) {
+            this.storageclasses.push(response.data[i].name);
+          }
+        });
+      },
       loadBranches() {
 
         // encode string to base64 (for ssh url)
@@ -786,6 +895,7 @@ export default {
             this.autodeploy = response.data.spec.autodeploy;
             this.domain = response.data.spec.domain;
             this.envvars = response.data.spec.envVars;
+            this.extraVolumes = response.data.spec.extraVolumes;
             this.containerPort = response.data.spec.image.containerPort;
             this.podsize = response.data.spec.podsize;
             this.autoscale = response.data.spec.autoscale;
@@ -838,6 +948,7 @@ export default {
               targetMemoryUtilizationPercentage : 80,
             },
           },
+          extraVolumes: this.extraVolumes,
           cronjobs: this.cronjobFormat(this.cronjobs),
           addons: this.addons,
 
@@ -899,6 +1010,7 @@ export default {
               targetMemoryUtilizationPercentage : 80,
             },
           },
+          extraVolumes: this.extraVolumes,
           cronjobs: this.cronjobFormat(this.cronjobs),
           addons: this.addons,
         })
@@ -924,6 +1036,25 @@ export default {
           }
         }
       },
+      addVolumeLine() {
+        this.extraVolumes.push({
+          name: 'example-volume',
+          emptyDir: false,
+          storageClass: 'standard',
+          size: '1Gi',
+          accessModes: [
+            'ReadWriteOnce',
+          ],
+          mountPath: '/example/path',
+        });
+      },
+      removeVolumeLine(index) {
+        for (let i = 0; i < this.extraVolumes.length; i++) {
+          if (this.extraVolumes[i].name === index) {
+            this.extraVolumes.splice(i, 1);
+          }
+        }
+      },
       addCronjobLine() {
         this.cronjobs.push({
           name: 'hello world',

diff --git a/client/src/components/pipelines/list.vue b/client/src/components/pipelines/list.vue
@@ -58,12 +58,27 @@
                                         <v-btn
                                         elevation="2"
                                         fab
+                                        small
+                                        class="ma-2"
+                                        color="grey lighten-2"
                                         @click="deletePipeline(item.name)"
                                         >
                                             <v-icon dark>
                                                 mdi-delete
                                             </v-icon>
                                         </v-btn>
+                                        <v-btn
+                                        elevation="2"
+                                        fab
+                                        small
+                                        class="ma-2"
+                                        color="grey lighten-2"
+                                        :href="'#/pipeline/'+item.name"
+                                        >
+                                            <v-icon dark>
+                                                mdi-pencil
+                                            </v-icon>
+                                        </v-btn>
                                     </v-col>
 
                                 </v-row>
@@ -112,6 +127,9 @@ export default {
             console.log(error);
         });
       },
+      editPipeline(app) {
+        this.$router.push({ name: 'Edit Pipeline', params: { name: app } });
+      },
     },
 }
 </script>

diff --git a/client/src/components/pipelines/new.vue b/client/src/components/pipelines/new.vue
@@ -21,6 +21,7 @@
             :rules="nameRules"
             :counter="60"
             label="Pipeline name *"
+            :disabled="!newPipeline"
             required
           ></v-text-field>
         </v-col>
@@ -43,12 +44,12 @@
           md="8"
         >
         <v-tabs icons-and-text v-model="repotab" color="#8560A9" @change="loadRepository">
-            <v-tab href="#github" :disabled="this.repositoriesList.github == false">Github <v-icon>mdi-github</v-icon> </v-tab>
-            <v-tab href="#gitea" :disabled="this.repositoriesList.gitea == false">Gitea <v-icon class="gitea"></v-icon></v-tab>
-            <v-tab href="#gitlab" :disabled="this.repositoriesList.gitlab == false">Gitlab <v-icon>mdi-gitlab</v-icon></v-tab>
+            <v-tab href="#github" :disabled="this.repositoriesList.github == false || !newPipeline">Github <v-icon>mdi-github</v-icon> </v-tab>
+            <v-tab href="#gitea" :disabled="this.repositoriesList.gitea == false || !newPipeline">Gitea <v-icon class="gitea"></v-icon></v-tab>
+            <v-tab href="#gitlab" :disabled="this.repositoriesList.gitlab == false || !newPipeline">Gitlab <v-icon>mdi-gitlab</v-icon></v-tab>
             <!--<v-tab href="#onedev" disabled>oneDev <v-icon class="onedev"></v-icon></v-tab>-->
-            <v-tab href="#gogs" :disabled="this.repositoriesList.gogs == false">Gogs <v-icon class="gogs"></v-icon></v-tab>
-            <v-tab href="#bitbucket" :disabled="this.repositoriesList.bitbucket == false">Bitbucket <v-icon>mdi-bitbucket</v-icon></v-tab>
+            <v-tab href="#gogs" :disabled="this.repositoriesList.gogs == false || !newPipeline">Gogs <v-icon class="gogs"></v-icon></v-tab>
+            <v-tab href="#bitbucket" :disabled="this.repositoriesList.bitbucket == false || !newPipeline">Bitbucket <v-icon>mdi-bitbucket</v-icon></v-tab>
         </v-tabs>
         </v-col>
       </v-row>
@@ -64,7 +65,7 @@
             :counter="60"
             :items="gitrepoItems"
             label="Repository *"
-            :disabled="repository_status.connected"
+            :disabled="repository_status.connected || !newPipeline"
             required
           ></v-combobox>
         </v-col>
@@ -160,12 +161,22 @@
         >
             <v-btn
                 color="primary"
+                v-if="newPipeline"
                 elevation="2"
-                @click="saveForm()"
+                @click="createPipeline()"
                 :disabled="!valid
                         || !gitrepo
                         || !buildpack"
-                >Sumbit</v-btn>
+                >Create</v-btn>
+            <v-btn
+                color="primary"
+                v-if="!newPipeline"
+                elevation="2"
+                @click="updatePipeline()"
+                :disabled="!valid
+                        || !gitrepo
+                        || !buildpack"
+                >Update</v-btn>
         </v-col>
       </v-row>
     </v-container>
@@ -175,7 +186,15 @@
 <script>
 import axios from "axios";
 export default {
+    props: {
+      pipeline: {
+        type: String,
+        default: "new"
+      }
+    },
     data: () => ({
+      newPipeline: true,
+      resourceVersion: undefined,
       repotab: 'github', //selected tab
       buildpack: undefined,
       buildpackList: [],
@@ -270,6 +289,7 @@ export default {
       this.listRepositories();
       this.listBuildpacks();
       this.loadRepository();
+      this.loadPipeline();
     },
     methods: {
       updateBuildpack(buildpack) {
@@ -412,7 +432,29 @@ export default {
           this.repository_status.statusTxt = "Failed to connect to repository API";
         });
       },
-      saveForm() {
+      loadPipeline() {
+        if (this.pipeline !== 'new') {
+          axios.get(`/api/pipelines/${this.pipeline}`)
+          .then(response => {
+            this.newPipeline = false;
+            const p = response.data;
+
+            this.resourceVersion = p.resourceVersion;
+            this.pipelineName = p.name;
+            this.domain = p.domain;
+            this.gitrepo = p.git.repository.ssh_url;
+            this.phases = p.phases;
+            this.reviewapps = p.reviewapps;
+            this.git = p.git;
+            this.dockerimage = p.dockerimage;
+            this.deploymentstrategy = p.deploymentstrategy;
+            this.buildpack = p.buildpack;
+          }).catch(error => {
+            console.log(error);
+          });
+        }
+      },
+      createPipeline() {
 
         // fake the minimal requirements to create a pipeline if the repo is not connectedd
         if (!this.repository_status.connected) {
@@ -448,7 +490,29 @@ export default {
         .catch(error => {
           console.log(error);
         });
-      }
+      },
+      updatePipeline() {
+        axios.put(`/api/pipelines/${this.pipeline}`, {
+          resourceVersion: this.resourceVersion,
+          pipelineName: this.pipelineName,
+          domain: this.domain,
+          gitrepo: this.gitrepo,
+          phases: this.phases,
+          reviewapps: this.reviewapps,
+          git: this.git,
+          dockerimage: '',
+          deploymentstrategy: "git",
+          buildpack: this.buildpack,
+        })
+        .then(response => {
+          this.pipelineName = '';
+          console.log(response);
+          this.$router.push({path: '/'});
+        })
+        .catch(error => {
+          console.log(error);
+        });
+      },
     },
 }
 </script>

diff --git a/client/src/router/index.js b/client/src/router/index.js
@@ -33,6 +33,12 @@ export default new VueRouter({
       component: AppsNew,
       props: true
     },
+    {
+      path: "/pipeline/:pipeline",
+      name: "Edit Pipeline",
+      component: PipelineNew,
+      props: true
+    },
     {
       path: "/pipeline/:pipeline/:phase/:app",
       name: "Edit App",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kubero",
-  "version": "1.5.3",
+  "version": "1.6.0",
   "description": "Heroku clone on Kubernetes",
   "main": "dist/index.js",
   "author": "Gianni Carafa",