Merge pull request #69 from kubero-dev/feature/make-pipelines-editable

mms-gianni · web-flow · commit 7426fa15b910 · 2023-01-02T22:12:56.000+01:00
make pipelines editable
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/src/kubero.ts b/src/kubero.ts
@@ -128,7 +128,7 @@ export class Kubero {
 
     // creates a new pipeline in the same namespace as the kubero app
     public async newPipeline(pipeline: IPipeline) {
-        debug.debug('create newPipeline: '+pipeline.name);
+        debug.debug('create Pipeline: '+pipeline.name);
 
         // Create the Pipeline CRD
         await this.kubectl.createPipeline(pipeline);
@@ -140,6 +140,21 @@ export class Kubero {
         this._io.emit('updatedPipelines', "created");
     }
 
+    // updates a new pipeline in the same namespace as the kubero app
+    public async updatePipeline(pipeline: IPipeline, resourceVersion: string) {
+        debug.debug('update Pipeline: '+pipeline.name);
+
+        // Create the Pipeline CRD
+        await this.kubectl.updatePipeline(pipeline, resourceVersion);
+        this.updateState();
+
+        this.kubectl.createEvent('Normal', 'Updated', 'pipeline.updated', 'updated pipeline: '+pipeline.name);
+
+        // update agents
+        this._io.emit('updatedPipelines', "updated");
+    }
+
+
     public async listPipelines(): Promise<IPipelineList> {
         debug.debug('listPipelines');
         let pipelines = await this.kubectl.getPipelinesList();
@@ -162,6 +177,7 @@ export class Kubero {
         });
 
         if (pipeline) {
+            pipeline.spec.resourceVersion = pipeline.metadata.resourceVersion;
             return pipeline.spec;
         }
     }
diff --git a/src/modules/kubectl.ts b/src/modules/kubectl.ts
@@ -103,7 +103,6 @@ export class Kubectl {
         return pipelines.body as IKubectlPipelineList;
     }
 
-
     public async createPipeline(pl: IPipeline) {
         debug.log("create pipeline: " + pl.name);
         let pipeline = new KubectlPipeline(pl);
@@ -120,6 +119,24 @@ export class Kubectl {
         });
     }
 
+    public async updatePipeline(pl: IPipeline, resourceVersion: string ) {
+        debug.log("update pipeline: " + pl.name);
+        let pipeline = new KubectlPipeline(pl);
+        pipeline.metadata.resourceVersion = resourceVersion;
+
+        this.kc.setCurrentContext(process.env.KUBERO_CONTEXT || 'default');
+        await this.customObjectsApi.replaceNamespacedCustomObject(
+            "application.kubero.dev",
+            "v1alpha1",
+            process.env.KUBERO_NAMESPACE || 'kubero',
+            "kuberopipelines",
+            pl.name,
+            pipeline
+        ).catch(error => {
+            debug.log(error);
+        });
+    }
+
     public async deletePipeline(pipelineName: string) {
         debug.log("delete pipeline: " + pipelineName);
         this.kc.setCurrentContext(process.env.KUBERO_CONTEXT || 'default');
diff --git a/src/routes/pipelines.ts b/src/routes/pipelines.ts
@@ -67,6 +67,25 @@ Router.post('/pipelines',authMiddleware, async function (req: Request, res: Resp
     res.send("new");
 });
 
+
+Router.put('/pipelines/:pipeline',authMiddleware, async function (req: Request, res: Response) {
+    // #swagger.tags = ['UI']
+    // #swagger.summary = 'Edit a pipeline'
+    // #swagger.parameters['body'] = { in: 'body', description: 'Pipeline object', required: true, type: 'object' }
+    let pipeline: IPipeline = {
+        name: req.body.pipelineName,
+        domain: req.body.domain,
+        phases: req.body.phases,
+        buildpack: req.body.buildpack,
+        reviewapps: req.body.reviewapps,
+        git: req.body.git,
+        dockerimage: req.body.dockerimage,
+        deploymentstrategy: req.body.deploymentstrategy,
+    };
+    req.app.locals.kubero.updatePipeline(pipeline, req.body.resourceVersion);
+    res.send("new");
+});
+
 Router.get('/cli/pipelines', bearerMiddleware, async function (req: Request, res: Response) {
     // #swagger.tags = ['Pipeline']
     // #swagger.summary = 'Get a list of available pipelines'
diff --git a/src/types.ts b/src/types.ts
@@ -145,6 +145,7 @@ export interface IPipeline {
     };
     dockerimage: string;
     deploymentstrategy: 'git' | 'docker',
+    resourceVersion?: string; // required to update resource, not part of spec
 }
 
 export interface IPipelineList {

Original file line number	Diff line number	Diff line change
`@@ -145,6 +145,7 @@ export interface IPipeline {`
`145`	`145`	`};`
`146`	`146`	`dockerimage: string;`
`147`	`147`	`deploymentstrategy: 'git' \| 'docker',`
	`148`	`+ resourceVersion?: string; // required to update resource, not part of spec`
`148`	`149`	`}`
`149`	`150`
`150`	`151`	`export interface IPipelineList {`