4444 </div >
4545 </div >
4646 </tab-pane >
47- <!-- <tab-pane label="Manage Pipelines" icon="fa fa-wrench"></tab-pane>-->
47+ <tab-pane label =" Manage Pipelines" icon =" fa fa-wrench" >
48+ <div class =" tile is-ancestor" >
49+ <div class =" tile is-vertical" >
50+ <div class =" tile is-parent" >
51+ <a class =" button is-primary" v-on:click =" createPipeline" style =" margin-bottom :-10px ;" >
52+ <span class =" icon" >
53+ <i class =" fa fa-plus" ></i >
54+ </span >
55+ <span >Create Pipeline</span >
56+ </a >
57+ </div >
58+ <div class =" tile is-parent" >
59+ <article class =" tile is-child notification content-article box" >
60+ <vue-good-table
61+ :columns =" pipelineColumns"
62+ :rows =" pipelineRows"
63+ :paginate =" true"
64+ :global-search =" true"
65+ :defaultSortBy =" {field: 'id', type: 'desc'}"
66+ globalSearchPlaceholder =" Search ..."
67+ styleClass =" table table-own-bordered" >
68+ <template slot="table-row" slot-scope="props">
69+ <td >
70+ <span >{{ props.row.name }}</span >
71+ </td >
72+ <td >
73+ <span >{{ props.row.type }}</span >
74+ </td >
75+ <td >
76+ <span >{{ convertTime(props.row.created) }}</span >
77+ </td >
78+ <td >
79+ <a v-on:click =" editPipelineModal(props.row)" ><i class =" fa fa-edit" style =" color :whitesmoke ;" ></i ></a >
80+ <a v-on:click =" deletePipelineModal(props.row)" ><i class =" fa fa-trash" style =" color :whitesmoke ;" ></i ></a >
81+ </td >
82+ </template >
83+ <div slot =" emptystate" class =" empty-table-text" >
84+ No active pipelines.
85+ </div >
86+ </vue-good-table >
87+ </article >
88+ </div >
89+ </div >
90+ </div >
91+ </tab-pane >
4892 </tabs >
4993 </div >
5094
157201 </div >
158202 </div >
159203 </modal >
204+
205+ <!-- edit pipeline modal-->
206+ <modal :visible =" showEditPipelineModal" class =" modal-z-index" @close =" close" >
207+ <div class =" box pipeline-modal" >
208+ <div class =" block pipeline-modal-content" >
209+ <collapse accordion is-fullwidth >
210+ <collapse-item title =" Change Pipeline Name" selected >
211+ <div class =" pipeline-modal-content" >
212+ <p class =" control has-icons-left" style =" padding-bottom :5px ;" >
213+ <input class =" input is-medium input-bar" v-focus v-model =" selectPipeline.name" placeholder =" Pipeline Name" >
214+ <span class =" icon is-small is-left" >
215+ <i class =" fa fa-book" ></i >
216+ </span >
217+ </p >
218+ </div >
219+ </collapse-item >
220+ </collapse >
221+ <div class =" modal-footer" >
222+ <div style =" float :left ;" >
223+ <button class =" button is-primary" v-on:click =" changePipelineName" >Change Name</button >
224+ </div >
225+ <div style =" float :right ;" >
226+ <button class =" button is-danger" v-on:click =" close" >Cancel</button >
227+ </div >
228+ </div >
229+ </div >
230+ </div >
231+ </modal >
232+
233+ <!-- delete pipeline modal-->
234+ <modal :visible =" showDeletePipelineModal" class =" modal-z-index" @close =" close" >
235+ <div class =" box pipeline-modal" >
236+ <article class =" media" >
237+ <div class =" media-content" >
238+ <div class =" content" >
239+ <p >
240+ <span style =" color :whitesmoke ;" >Do you really want to delete the pipeline "{{ selectPipeline.name }}"?</span >
241+ </p >
242+ </div >
243+ <div class =" modal-footer" >
244+ <div style =" float :left ;" >
245+ <button class =" button is-primary" v-on:click =" deletePipeline" style =" width :150px ;" >Yes</button >
246+ </div >
247+ <div style =" float :right ;" >
248+ <button class =" button is-danger" v-on:click =" close" style =" width :130px ;" >No</button >
249+ </div >
250+ </div >
251+ </div >
252+ </article >
253+ </div >
254+ </modal >
160255 </div >
161256</template >
162257
@@ -214,10 +309,31 @@ export default {
214309 }
215310 ],
216311 userRows: [],
312+ pipelineColumns: [
313+ {
314+ label: ' Name' ,
315+ field: ' name'
316+ },
317+ {
318+ label: ' Type' ,
319+ field: ' type'
320+ },
321+ {
322+ label: ' Created' ,
323+ field: ' created'
324+ },
325+ {
326+ label: ' '
327+ }
328+ ],
329+ pipelineRows: [],
217330 selectUser: {},
331+ selectPipeline: {},
218332 showEditUserModal: false ,
219333 showDeleteUserModal: false ,
220- showAddUserModal: false
334+ showAddUserModal: false ,
335+ showEditPipelineModal: false ,
336+ showDeletePipelineModal: false
221337 }
222338 },
223339
@@ -245,6 +361,17 @@ export default {
245361 .catch ((error )=> {
246362this .$onError (error)
247363 })
364+ this .$http
365+ .get (' /api/v1/pipeline' , { showProgressBar: false })
366+ .then (response => {
367+ if (response .data ) {
368+ this .pipelineRows = response .data ;
369+ }else {
370+ this .pipelineRows = [];
371+ }
372+ }).catch ((error )=> {
373+ this .$onError (error)
374+ })
248375 },
249376
250377convertTime (time ) {
@@ -266,11 +393,24 @@ export default {
266393this .showAddUserModal = true
267394 },
268395
396+ editPipelineModal (pipeline ) {
397+ this .selectPipeline = pipeline
398+ this .showEditPipelineModal = true
399+ },
400+
401+ deletePipelineModal (pipeline ) {
402+ this .selectPipeline = pipeline
403+ this .showDeletePipelineModal = true
404+ },
405+
269406close () {
270407this .showEditUserModal = false
271408this .showDeleteUserModal = false
272409this .showAddUserModal = false
273410this .selectUser = {}
411+ this .showEditPipelineModal = false
412+ this .showDeletePipelineModal = false
413+ this .selectPipeline = {}
274414this .$emit (' close' )
275415 },
276416
@@ -372,6 +512,45 @@ export default {
372512 .catch ((error )=> {
373513this .$onError (error)
374514 })
515+ },
516+
517+ createPipeline () {
518+ this .$router .push (' /pipeline/create' )
519+ },
520+
521+ changePipelineName () {
522+ this .$http
523+ .put (' /api/v1/pipeline/' + this .selectPipeline .id ,this .selectPipeline )
524+ .then (response => {
525+ openNotification ({
526+ title: ' Pipeline updated!' ,
527+ message: ' Pipeline has been successfully updated.' ,
528+ type: ' success'
529+ })
530+ this .fetchData ()
531+ this .close ()
532+ })
533+ .catch ((error )=> {
534+ this .$onError (error)
535+ })
536+ this .close ()
537+ },
538+
539+ deletePipeline () {
540+ this .$http
541+ .delete (' /api/v1/pipeline/' + this .selectPipeline .id )
542+ .then (response => {
543+ openNotification ({
544+ title: ' Pipeline deleted!' ,
545+ message: ' Pipeline' + this .selectPipeline .name + ' has been successfully deleted.' ,
546+ type: ' success'
547+ })
548+ this .fetchData ()
549+ this .close ()
550+ })
551+ .catch ((error )=> {
552+ this .$onError (error)
553+ })
375554 }
376555 }
377556}
@@ -393,12 +572,12 @@ export default {
393572border-bottom-color :#4da2fc !important ;
394573}
395574
396- .user-modal {
575+ .user-modal , .pipeline-modal {
397576text-align :center ;
398577background-color :#2a2735 ;
399578}
400579
401- .user-modal-content {
580+ .user-modal-content , .pipeline-modal-content {
402581margin :auto ;
403582padding :10px ;
404583}