Skip to content

Commit

Permalink
Implemented first version of pipeline detail view
Browse files Browse the repository at this point in the history
  • Loading branch information
@michelvocks
michelvocks committed Mar 6, 2018
1 parent b660daf commit ac480e2
Show file tree
Hide file tree
Showing 9 changed files with 188 additions and 156 deletions.
6 changes: 6 additions & 0 deletions frontend/client/router/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import Vue from 'vue'
import Router from 'vue-router'
import menuModule from '../store/modules/menu'
import lazyLoading from '../store/modules/menu/lazyLoading'
Vue.use(Router)

export default new Router({
Expand All @@ -12,6 +13,11 @@ export default new Router({
{
path: '*',
redirect: '/overview'
},
{
name: 'Pipeline Detail',
path: '/pipelines/detail',
component: lazyLoading('pipelines/detail')
}
]
})
Expand Down
8 changes: 0 additions & 8 deletions frontend/client/store/modules/menu/pipelines.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,6 @@ export default {
meta: {
label: 'Create'
}
},
{
name: 'Pipeline Detail',
path: '/pipelines/detail',
component: lazyLoading('pipelines/detail'),
meta: {
label: 'Detail'
}
}
]
}
143 changes: 53 additions & 90 deletions frontend/client/views/overview/index.vue
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,67 @@
<template>
<div class="tile is-ancestor">
<div class="tile is-vertical">
<div class="tile">
<div class="tile is-parent is-3">
<div class="tile notification content-article">
<div class="status-display-success"></div>
<div class="outer-box">
<div class="outer-box-icon-image">
<img src="~assets/golang.png" class="outer-box-image">
</div>
<div class="name-link">
<a href="/" class="subtitle">Testpipeline</a>
</div>
<div>
<hr style="color: lightgrey;">
this is some text ...
</div>
<div class="columns is-multiline">
<template v-for="(pipeline, index) in pipelines">
<div class="column is-one-third" :key="index">
<div class="notification content-article">
<div class="status-display-success"></div>
<div class="outer-box">
<div class="outer-box-icon-image">
<img :src="getImagePath(pipeline.type)" class="outer-box-image">
</div>
</div>
</div>

<div class="tile is-parent is-3">
<div class="tile notification content-article">
<div class="status-display-success"></div>
<div class="outer-box">
<div class="outer-box-icon">
<i class="fa fa-2x fa-battery-full"></i>
</div>
<div>
<a href="/" class="subtitle">Testpipeline</a>
</div>
<div style="padding-top: 10px;">
this is some text ...
</div>
<div>
<router-link :to="{ path: '/pipelines/detail', query: { pipelineid: pipeline.id }}" class="subtitle">{{ pipeline.name }}</router-link>
</div>
</div>
</div>

<div class="tile is-parent is-3">
<div class="tile notification content-article">
<div class="status-display-folder"></div>
<div class="outer-box">
<div class="outer-box-icon">
<i class="fa fa-2x fa-folder"></i>
</div>
<div>
<a href="/" class="subtitle">Testfolder</a>
</div>
<div style="padding-top: 10px;">
this is some text ...
</div>
</div>
</div>
</div>

<div class="tile is-parent is-3">
<div class="tile notification content-article">
<div class="status-display-folder"></div>
<div class="outer-box">
<div class="outer-box-icon">
<i class="fa fa-2x fa-folder"></i>
</div>
<div>
<a href="/" class="subtitle">Testfolder</a>
</div>
<div style="padding-top: 10px;">
this is some text ...
</div>
</div>
</div>
</div>
</div>
<div class="tile">
<div class="tile is-parent is-3">
<div class="tile notification content-article">
<div class="status-display-fail"></div>
<div class="outer-box">
<div class="outer-box-icon">
<i class="fa fa-2x fa-battery-full"></i>
</div>
<div>
<a href="/" class="subtitle">Testpipeline</a>
</div>
<div style="padding-top: 10px;">
this is some text ...
</div>
<div>
<hr style="color: lightgrey;">
this is some text ...
</div>
</div>
</div>
</div>
</div>
</template>
</div>
</template>

<script>
export default {
data () {
return {
pipelines: []
}
},
mounted () {
// Fetch data from backend
this.fetchData()
// periodically update dashboard
setInterval(function () {
this.fetchData()
}.bind(this), 3000)
},
watch: {
'$route': 'fetchData'
},
methods: {
fetchData () {
this.$http
.get('/api/v1/pipelines', { showProgressBar: false })
.then(response => {
if (response.data) {
this.pipelines = response.data
}
})
.catch(error => {
console.log(error.response.data)
})
},
getImagePath (type) {
return require('assets/' + type + '.png')
}
}
}
</script>

Expand Down Expand Up @@ -149,6 +115,7 @@ export default {
border-color: whitesmoke;
border-style: solid;
margin-right: 10px;
margin-top: -5px;
}
.outer-box-image {
Expand All @@ -160,8 +127,4 @@ export default {
transform: translate(-50%, -50%);
}
.name-link {
margin-top: 5px;
}
</style>
86 changes: 59 additions & 27 deletions frontend/client/views/pipelines/detail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,41 +17,73 @@ import Vis from 'vis'
export default {
data () {
return {
nodes: new Vis.DataSet([
{id: 1, shape: 'circularImage', image: require('assets/success.png'), label: 'Create User'},
{id: 2, shape: 'circularImage', image: require('assets/success.png'), label: 'Insert Dump'},
{id: 3, shape: 'circularImage', image: require('assets/fail.png'), label: 'Create Namespace'},
{id: 4, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Deployment'},
{id: 5, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Service'},
{id: 6, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Ingress'},
{id: 7, shape: 'circularImage', image: require('assets/time.png'), label: 'Clean up'}
]),
edges: new Vis.DataSet([
{from: 1, to: 2},
{from: 2, to: 3},
{from: 3, to: 4},
{from: 3, to: 5},
{from: 3, to: 6},
{from: 4, to: 7},
{from: 5, to: 7},
{from: 6, to: 7}
])
}
},
mounted () {
this.fetchData()
},
methods: {
fetchData () {
// Find container and set data
// look up url parameters
var pipelineID = this.$route.query.pipelineid
if (!pipelineID) {
return
}
// Get all information from this specific pipeline
this.$http
.get('/api/v1/pipelines/detail/' + pipelineID)
.then(response => {
this.drawPipelineDetail(response.data)
})
},
drawPipelineDetail (pipeline) {
// Find container
var container = document.getElementById('pipeline-detail')
// prepare data object for vis
var data = {
nodes: this.nodes,
edges: this.edges
nodes: [],
edges: []
}
console.log(pipeline)
// Iterate all jobs of the pipeline
for (let i = 0, l = pipeline.jobs.length; i < l; i++) {
// Create nodes object
var node = {
id: i,
shape: 'circularImage',
image: require('assets/success.png'),
label: pipeline.jobs[i].title
}
// Add node to nodes list
data.nodes.push(node)
// Iterate all jobs again to find the next highest job priority
var highestPrio = 1000000000 // high as possible. First match should overwrite it.
for (let x = 0, y = pipeline.jobs.length; x < y; x++) {
if (pipeline.jobs[x].priority > pipeline.jobs[i].priority && pipeline.jobs[x].priority < highestPrio) {
highestPrio = pipeline.jobs[x].priority
}
}
// Iterate again all jobs to set all edges
if (highestPrio) {
for (let x = 0, y = pipeline.jobs.length; x < y; x++) {
if (pipeline.jobs[x].priority === highestPrio) {
// create edge
var edge = {
from: i,
to: x
}
// add edge to edges list
data.edges.push(edge)
}
}
}
}
// Define vis options
Expand Down
57 changes: 29 additions & 28 deletions gaia.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,58 +20,59 @@ const (

// User is the user object
type User struct {
Username string `json:"username"`
Username string `json:"username,omitempty"`
Password string `json:"password,omitempty"`
DisplayName string `json:"display_name"`
Tokenstring string `json:"tokenstring"`
JwtExpiry int64 `json:"jwtexpiry"`
DisplayName string `json:"display_name,omitempty"`
Tokenstring string `json:"tokenstring,omitempty"`
JwtExpiry int64 `json:"jwtexpiry,omitempty"`
}

// Pipeline represents a single pipeline
type Pipeline struct {
Name string `json:"name"`
Repo GitRepo `json:"repo"`
Type PipelineType `json:"type"`
ExecPath string `json:"execpath"`
Md5Checksum []byte `json:"md5checksum"`
Jobs []Job `json:"jobs"`
Created time.Time `json:"created"`
ID string `json:"id,omitempty"`
Name string `json:"name,omitempty"`
Repo GitRepo `json:"repo,omitempty"`
Type PipelineType `json:"type,omitempty"`
ExecPath string `json:"execpath,omitempty"`
Md5Checksum []byte `json:"md5checksum,omitempty"`
Jobs []Job `json:"jobs,omitempty"`
Created time.Time `json:"created,omitempty"`
}

// GitRepo represents a single git repository
type GitRepo struct {
URL string `json:"url"`
Username string `json:"user"`
Password string `json:"password"`
PrivateKey PrivateKey `json:"privatekey"`
SelectedBranch string `json:"selectedbranch"`
Branches []string `json:"branches"`
URL string `json:"url,omitempty"`
Username string `json:"user,omitempty"`
Password string `json:"password,omitempty"`
PrivateKey PrivateKey `json:"privatekey,omitempty"`
SelectedBranch string `json:"selectedbranch,omitempty"`
Branches []string `json:"branches,omitempty"`
LocalDest string
}

// Job represents a single job of a pipeline
type Job struct {
UniqueID string `json:"id"`
Title string `json:"title"`
Description string `json:"desc"`
UniqueID string `json:"id,omitempty"`
Title string `json:"title,omitempty"`
Description string `json:"desc,omitempty"`
Priority int32 `json:"priority"`
}

// CreatePipeline represents a pipeline which is not yet
// compiled.
type CreatePipeline struct {
ID string `json:"id"`
Pipeline Pipeline `json:"pipeline"`
Status int `json:"status"`
Output string `json:"errmsg"`
Created time.Time `json:"created"`
ID string `json:"id,omitempty"`
Pipeline Pipeline `json:"pipeline,omitempty"`
Status int `json:"status,omitempty"`
Output string `json:"errmsg,omitempty"`
Created time.Time `json:"created,omitempty"`
}

// PrivateKey represents a pem encoded private key
type PrivateKey struct {
Key string `json:"key"`
Username string `json:"username"`
Password string `json:"password"`
Key string `json:"key,omitempty"`
Username string `json:"username,omitempty"`
Password string `json:"password,omitempty"`
}

// Cfg represents the global config instance
Expand Down
Loading

0 comments on commit ac480e2

Please sign in to comment.