WIP create pipeline...still

Author: michelvocks

frontend/build/webpack.dev.conf.js

@@ -32,7 +32,7 @@ module.exports = merge(baseWebpackConfig, {
     }),
     // https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      title: 'Gaia - Build powerful pipelines with pure Go',
+      title: 'Gaia - Build powerful automation pipelines with any language you prefer.',
       filename: 'index.html',
       template: 'index.html',
       inject: true,

frontend/build/webpack.prod.conf.js

@@ -51,7 +51,7 @@ const webpackConfig = merge(baseWebpackConfig, {
     // you can customize output by editing /index.html
     // see https://github.com/ampedandwired/html-webpack-plugin
     new HtmlWebpackPlugin({
-      title: 'Gaia - Build powerful pipelines with pure Go',
+      title: 'Gaia - Build powerful automation pipelines with any language you prefer.',
       filename: process.env.NODE_ENV === 'testing'
         ? 'index.html'
         : config.build.index,

frontend/client/views/pipelines/create.vue

@@ -47,7 +47,7 @@
               </p>
               <span style="color: red" v-if="pipelineErrorMsg">Pipeline Name incorrect: {{ pipelineErrorMsg }}</span>
               <hr class="dotted-line">
-              <a class="button is-primary" v-on:click="createPipeline" v-bind:class="{ 'is-loading': createPipelineStatus, 'is-disabled': !gitSuccess || !pipelineNameSuccess }">
+              <a class="button is-primary" v-on:click="createPipeline" v-bind:class="{ 'is-disabled': !gitSuccess || !pipelineNameSuccess }">
                 <span class="icon">
                   <i class="fa fa-plus"></i>
                 </span>
@@ -85,7 +85,7 @@
 
       <div class="tile is-parent is-8">
         <article class="tile is-child notification content-article box">
-          <p class="subtitle">Created pipelines</p>
+          <p class="subtitle">Pipelines history</p>
           <div class="content">
             <div class="table-responsive">
               <table class="table">
@@ -97,27 +97,24 @@
                     <th class="th">Creation date</th>
                   </tr>
                 </thead>
-                <tfoot>
-                  <tr>
-                    <th class="th">Name</th>
-                    <th class="th">Status</th>
-                    <th class="th">Type</th>
-                    <th class="th">Creation date</th>
-                  </tr>
-                </tfoot>
                 <tbody>
-                  <tr class="blink">
+                  <tr class="blink" v-for="pipeline in createdPipelines" :key="pipeline">
                     <td>
-                      Pipeline Name
+                      {{ pipeline.pipelinename }}
                     </td>
                     <td class="th">
-                      <progress-bar :type="'info'" :size="'small'" :value="80" :max="100" :show-label="false"></progress-bar>
+                      <div v-if="pipeline.status < 100">
+                        <progress-bar :type="'info'" :size="'small'" :value="pipeline.status" :max="100" :show-label="false"></progress-bar>
+                      </div>
+                      <div v-if="pipeline.status === 100">
+                        <span style="color: green;">Completed</span>
+                      </div>
                     </td>
                     <td>
-                      Pipeline Type
+                      {{ pipeline.pipelinetype }}
                     </td>
                     <td>
-                      Pipeline Date
+                      {{ pipeline.creationdate }}
                     </td>
                   </tr>
                 </tbody>
@@ -201,11 +198,11 @@ export default {
       gitSuccess: false,
       gitCredentialsModal: false,
       gitBranches: [],
-      createPipelineStatus: 0,
       giturl: '',
       pipelinename: '',
       pipelineNameSuccess: false,
       pipelineErrorMsg: '',
+      createdPipelines: [],
       pipeline: {
         pipelinename: '',
         pipelinetype: 'golang',
@@ -240,6 +237,9 @@ export default {
       duration: 500,
       arrow: true
     })
+
+    // created pipelines history
+    this.fetchData()
   },
 
   watch: {
@@ -248,10 +248,22 @@ export default {
     },
     pipelinename: function () {
       this.checkPipelineNameAvailable()
-    }
+    },
+    '$route': 'fetchData'
   },
 
   methods: {
+    fetchData () {
+      this.$http
+        .get('/api/v1/pipelines/created')
+        .then(response => {
+          this.createdPipelines = response.data
+        })
+        .catch(error => {
+          console.log(error.response.data)
+        })
+    },
+
     checkGitRepo () {
       if (this.giturl === '') {
         return
@@ -300,7 +312,7 @@ export default {
 
       // Request for availability
       this.$http
-        .post('/api/v1/pipelines/nameavailable', this.pipeline)
+        .post('/api/v1/pipelines/name', this.pipeline)
         .then(response => {
           // pipeline name valid and available
           this.pipelineErrorMsg = ''
@@ -313,26 +325,20 @@ export default {
     },
 
     createPipeline () {
-      // let's start with 10% for the progress bar
-      this.createPipelineStatus = 10
-
       // copy giturl into our struct and pipeline name
       this.pipeline.gitrepo.giturl = this.giturl
       this.pipeline.pipelinename = this.pipelinename
 
-      // Checkout git repo
+      // Start the create pipeline process in the backend
       this.$http
         .post('/api/v1/pipelines/create', this.pipeline)
         .then(response => {
-          console.log('Pipeline successful created!')
-          this.createPipelineStatus = 30
+          // Run fetchData to see the pipeline in our history table
+          this.fetchData()
         })
         .catch(error => {
           console.log(error.response.data)
         })
-
-      // finish
-      this.createPipelineStatus = 100
     },
 
     close () {

frontend/package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "gaia",
   "version": "0.1.1",
-  "description": "Build powerful automation pipelines in a language you may think is the best.",
+  "description": "Build powerful automation pipelines with any language you prefer.",
   "repository": "gaia-pipeline/gaia",
   "homepage": "https://github.com/gaia-pipeline/gaia",
   "license": "Apache-2.0",
@@ -15,7 +15,11 @@
     "pipeline",
     "golang",
     "build",
-    "deployment"
+    "deployment",
+    "java",
+    "nodejs",
+    "cplusplus",
+    "python"
   ],
   "engines": {
     "node": ">=4",
@@ -41,12 +45,10 @@
     "plotly.js": "^1.33.1",
     "tippy.js": "^2.0.9",
     "vue": "^2.5.13",
-    "vue-bulma-brace": "^0.1.0",
     "vue-bulma-breadcrumb": "^1.0.1",
     "vue-bulma-card": "^1.0.2",
     "vue-bulma-collapse": "1.0.3",
     "vue-bulma-datepicker": "^1.3.0",
-    "vue-bulma-emoji": "^0.0.2",
     "vue-bulma-expanding": "^0.0.1",
     "vue-bulma-jump": "^0.0.2",
     "vue-bulma-message": "^1.1.1",
@@ -56,7 +58,6 @@
     "vue-bulma-slider": "^1.0.2",
     "vue-bulma-switch": "^1.0.4",
     "vue-cleave": "1.1.1",
-    "vue-lory": "0.0.4",
     "vue-nprogress": "0.1.5",
     "vue-peity": "0.5.0",
     "vue-router": "^3.0.1",

frontend/package.json

@@ -29,6 +29,8 @@ type Pipeline struct {
 	Name         string     `json:"pipelinename"`
 	Repo         GitRepo    `json:"gitrepo"`
 	Type         PluginType `json:"pipelinetype"`
+	Status       int        `json:"status"`
+	ErrMsg       string     `json:"errmsg"`
 	CreationDate time.Time  `json:"creationdate"`
 }
 

gaia.go

@@ -44,8 +44,8 @@ func InitHandlers(c *gaia.Config, i *iris.Application, s *store.Store) error {
 	i.Post(p+"users/login", UserLogin)
 	i.Post(p+"pipelines/gitlsremote", PipelineGitLSRemote)
 	i.Post(p+"pipelines/create", PipelineBuildFromSource)
-	i.Post(p+"pipelines/nameavailable", PipelineNameAvailable)
-	i.Get(p+"pipelines/creategetall", CreatePipelineGetAll)
+	i.Post(p+"pipelines/name", PipelineNameAvailable)
+	i.Get(p+"pipelines/created", CreatePipelineGetAll)
 
 	return nil
 }

handlers/handler.go

@@ -15,7 +15,14 @@ var (
 )
 
 const (
+	// Split char to separate path from pipeline and name
 	pipelinePathSplitChar = "/"
+
+	// Percent of pipeline creation progress after git clone
+	pipelineCloneStatus = 25
+
+	// Completed percent progress
+	pipelineCompleteStatus = 100
 )
 
 // PipelineGitLSRemote checks for available git remote branches.
@@ -41,7 +48,7 @@ func PipelineGitLSRemote(ctx iris.Context) {
 }
 
 // PipelineBuildFromSource clones a given git repo and
-// compiles the included source file to a plugin.
+// compiles the included source file to a pipeline.
 func PipelineBuildFromSource(ctx iris.Context) {
 	p := &gaia.Pipeline{}
 	if err := ctx.ReadJSON(p); err != nil {
@@ -62,22 +69,47 @@ func PipelineBuildFromSource(ctx iris.Context) {
 		return
 	}
 
+	// Cloning the repo and compiling the pipeline will be done async
+	go createPipelineExecute(p)
+}
+
+// createPipelineExecute clones the given git repo and compiles
+// the pipeline. After every step, the status will be store.
+// This method is designed to be called async.
+func createPipelineExecute(p *gaia.Pipeline) {
 	// Clone git repo
-	err = pipeline.GitCloneRepo(&p.Repo)
+	err := pipeline.GitCloneRepo(&p.Repo)
 	if err != nil {
-		ctx.StatusCode(iris.StatusInternalServerError)
-		ctx.WriteString(err.Error())
+		// Add error message and store
+		p.ErrMsg = err.Error()
+		storeService.CreatePipelinePut(p)
 		cfg.Logger.Debug("cannot clone repo", "error", err.Error())
 		return
 	}
 
+	// Update status of our pipeline build
+	p.Status = pipelineCloneStatus
+	err = storeService.CreatePipelinePut(p)
+	if err != nil {
+		cfg.Logger.Error("cannot put create pipeline into store", "error", err.Error())
+		return
+	}
+
 	// Start compiling process for given plugin type
 	switch p.Type {
 	case gaia.GOLANG:
 		// Start compile process for golang TODO
 	}
 
 	// copy compiled binary to plugins folder
+
+	// Set create pipeline status to complete
+	p.Status = pipelineCompleteStatus
+	err = storeService.CreatePipelinePut(p)
+	if err != nil {
+		cfg.Logger.Error("cannot put create pipeline into store", "error", err.Error())
+		return
+	}
 }
 
 // CreatePipelineGetAll returns a json array of