Skip to content

Commit b0c0634

Browse files
michelvocksmichelvocks
committed
Worked on first version of detailed view. Worked on first version of overview
1 parent 40e2156 commit b0c0634

File tree

11 files changed

+281
-21
lines changed

11 files changed

+281
-21
lines changed

Diff for: ‎frontend/client/assets/fail.png

9.5 KB
Loading

Diff for: ‎frontend/client/assets/success.png

7.26 KB
Loading

Diff for: ‎frontend/client/assets/time.png

16.2 KB
Loading

Diff for: ‎frontend/client/components/layout/AppMain.vue

+1-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ export default {
3838
3939
.app-main {
4040
padding-top: 0px;
41-
margin-left: 220px;
41+
margin-left: 210px;
4242
4343
@include mobile() {
4444
margin-left: 0;

Diff for: ‎frontend/client/router/index.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,9 @@ function generateRoutesFromMenu (menu = [], routes = []) {
2121
for (let i = 0, l = menu.length; i < l; i++) {
2222
let item = menu[i]
2323
if (item.path && item.subroute) {
24-
routes.push(item.subroute[0])
24+
for (let x = 0, y = item.subroute.length; x < y; x++) {
25+
routes.push(item.subroute[x])
26+
}
2527
} else if (item.path) {
2628
routes.push(item)
2729
}

Diff for: ‎frontend/client/store/modules/menu/pipelines.js

+8
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,14 @@ export default {
1717
meta: {
1818
label: 'Create'
1919
}
20+
},
21+
{
22+
name: 'Pipeline Detail',
23+
path: '/pipelines/detail',
24+
component: lazyLoading('pipelines/detail'),
25+
meta: {
26+
label: 'Detail'
27+
}
2028
}
2129
]
2230
}

Diff for: ‎frontend/client/views/overview/index.vue

+126-17
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,141 @@
11
<template>
2-
<div class="content has-text-centered">
3-
<p>
4-
<img width="200" src="~assets/logo.png" :alt="description">
5-
</p>
2+
<div class="tile is-ancestor">
3+
<div class="tile is-vertical">
4+
<div class="tile">
5+
<div class="tile is-parent is-3">
6+
<div class="tile notification content-article">
7+
<div class="status-display-success"></div>
8+
<div class="outer-box">
9+
<div class="outer-box-icon">
10+
<i class="fa fa-2x fa-battery-full"></i>
11+
</div>
12+
<div>
13+
<a href="/" class="subtitle">Testpipeline</a>
14+
</div>
15+
<div style="padding-top: 10px;">
16+
this is some text ...
17+
</div>
18+
</div>
19+
</div>
20+
</div>
621

7-
<h1 class="is-title is-bold">{{ name.replace('-', ' ') }}</h1>
22+
<div class="tile is-parent is-3">
23+
<div class="tile notification content-article">
24+
<div class="status-display-success"></div>
25+
<div class="outer-box">
26+
<div class="outer-box-icon">
27+
<i class="fa fa-2x fa-battery-full"></i>
28+
</div>
29+
<div>
30+
<a href="/" class="subtitle">Testpipeline</a>
31+
</div>
32+
<div style="padding-top: 10px;">
33+
this is some text ...
34+
</div>
35+
</div>
36+
</div>
37+
</div>
838

9-
<p>
10-
<strong>{{ description }}</strong>,
11-
<a :href="homepage">Live Demo</a>
12-
</p>
39+
<div class="tile is-parent is-3">
40+
<div class="tile notification content-article">
41+
<div class="status-display-folder"></div>
42+
<div class="outer-box">
43+
<div class="outer-box-icon">
44+
<i class="fa fa-2x fa-folder"></i>
45+
</div>
46+
<div>
47+
<a href="/" class="subtitle">Testfolder</a>
48+
</div>
49+
<div style="padding-top: 10px;">
50+
this is some text ...
51+
</div>
52+
</div>
53+
</div>
54+
</div>
1355

14-
<p>Supports Vue 2.0 and Bulma 0.3!</p>
56+
<div class="tile is-parent is-3">
57+
<div class="tile notification content-article">
58+
<div class="status-display-folder"></div>
59+
<div class="outer-box">
60+
<div class="outer-box-icon">
61+
<i class="fa fa-2x fa-folder"></i>
62+
</div>
63+
<div>
64+
<a href="/" class="subtitle">Testfolder</a>
65+
</div>
66+
<div style="padding-top: 10px;">
67+
this is some text ...
68+
</div>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
<div class="tile">
74+
<div class="tile is-parent is-3">
75+
<div class="tile notification content-article">
76+
<div class="status-display-fail"></div>
77+
<div class="outer-box">
78+
<div class="outer-box-icon">
79+
<i class="fa fa-2x fa-battery-full"></i>
80+
</div>
81+
<div>
82+
<a href="/" class="subtitle">Testpipeline</a>
83+
</div>
84+
<div style="padding-top: 10px;">
85+
this is some text ...
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
</div>
91+
</div>
1592
</div>
1693
</template>
1794

1895
<script>
1996
export default {
2097
21-
data () {
22-
return this.$store.state.pkg
23-
}
24-
2598
}
2699
</script>
27100

28-
<style lang="scss" scoped>
29-
.is-title {
30-
text-transform: capitalize;
101+
<style lang="scss">
102+
103+
@mixin status-display {
104+
position: fixed;
105+
min-width: 50px;
106+
height: 100%;
107+
margin-left: -23px;
108+
margin-top: -20px;
109+
margin-bottom: -20px;
110+
border-top-left-radius: 3px;
111+
border-bottom-left-radius: 3px;
112+
margin-right: 10px;
113+
}
114+
115+
.status-display-success {
116+
@include status-display();
117+
background-color: rgb(49, 196, 49);
31118
}
119+
120+
.status-display-folder {
121+
@include status-display();
122+
background-color: #4da2fc;
123+
}
124+
125+
.status-display-fail {
126+
@include status-display();
127+
background-color: #ca280b;
128+
}
129+
130+
.outer-box {
131+
padding-left: 40px;
132+
min-height: 170px;
133+
width: 100%;
134+
}
135+
136+
.outer-box-icon {
137+
width: 50px;
138+
float: left;
139+
}
140+
32141
</style>

Diff for: ‎frontend/client/views/pipelines/create.vue

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="tile is-ancestor">
33
<div class="tile is-vertical">
44
<div class="tile">
5-
<div class="tile is-vertical is-parent is-5">
5+
<div class="tile is-vertical is-parent is-6">
66
<article class="tile is-child notification content-article">
77
<div class="content">
88
<label class="label">Copy the link of your
@@ -83,7 +83,7 @@
8383
</div>
8484
</div>
8585

86-
<div class="tile is-parent is-9">
86+
<div class="tile is-parent is-10">
8787
<article class="tile is-child notification content-article box">
8888
<vue-good-table
8989
title="Pipeline history"

Diff for: ‎frontend/client/views/pipelines/detail.vue

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<template>
2+
<div class="tile is-ancestor">
3+
<div class="tile is-vertical">
4+
<div class="tile">
5+
<div class="tile is-vertical is-parent is-12">
6+
<article class="tile is-child notification content-article">
7+
<div id="pipeline-detail"></div>
8+
</article>
9+
</div>
10+
</div>
11+
</div>
12+
</div>
13+
</template>
14+
15+
<script>
16+
import Vis from 'vis'
17+
18+
export default {
19+
20+
data () {
21+
return {
22+
nodes: new Vis.DataSet([
23+
{id: 1, shape: 'circularImage', image: require('assets/success.png'), label: 'Create User'},
24+
{id: 2, shape: 'circularImage', image: require('assets/success.png'), label: 'Insert Dump'},
25+
{id: 3, shape: 'circularImage', image: require('assets/fail.png'), label: 'Create Namespace'},
26+
{id: 4, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Deployment'},
27+
{id: 5, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Service'},
28+
{id: 6, shape: 'circularImage', image: require('assets/time.png'), label: 'Create Ingress'},
29+
{id: 7, shape: 'circularImage', image: require('assets/time.png'), label: 'Clean up'}
30+
]),
31+
edges: new Vis.DataSet([
32+
{from: 1, to: 2},
33+
{from: 2, to: 3},
34+
{from: 3, to: 4},
35+
{from: 3, to: 5},
36+
{from: 3, to: 6},
37+
{from: 4, to: 7},
38+
{from: 5, to: 7},
39+
{from: 6, to: 7}
40+
])
41+
}
42+
},
43+
44+
mounted () {
45+
this.fetchData()
46+
},
47+
48+
methods: {
49+
fetchData () {
50+
// Find container and set data
51+
var container = document.getElementById('pipeline-detail')
52+
var data = {
53+
nodes: this.nodes,
54+
edges: this.edges
55+
}
56+
57+
// Define vis options
58+
var options = {
59+
physics: { stabilization: true },
60+
layout: {
61+
hierarchical: {
62+
enabled: true,
63+
levelSeparation: 200,
64+
direction: 'LR',
65+
sortMethod: 'directed'
66+
}
67+
},
68+
nodes: {
69+
borderWidth: 4,
70+
size: 40,
71+
color: {
72+
border: '#222222'
73+
},
74+
font: { color: '#eeeeee' }
75+
},
76+
edges: {
77+
smooth: {
78+
type: 'cubicBezier',
79+
forceDirection: 'vertical',
80+
roundness: 0.4
81+
},
82+
color: {
83+
color: 'whitesmoke',
84+
highlight: '#4da2fc'
85+
},
86+
arrows: {to: true}
87+
}
88+
}
89+
90+
/* eslint-disable no-unused-vars */
91+
var network = new Vis.Network(container, data, options)
92+
}
93+
}
94+
95+
}
96+
</script>
97+
98+
<style lang="scss">
99+
100+
#pipeline-detail {
101+
width: 100%;
102+
height: 400px;
103+
}
104+
105+
</style>

Diff for: ‎frontend/package-lock.json

+35
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

Diff for: ‎frontend/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"mdi": "^1.8.36",
4444
"moment": "^2.20.1",
4545
"plotly.js": "^1.33.1",
46+
"vis": "^4.21.0",
4647
"vue": "^2.5.13",
4748
"vue-bulma-breadcrumb": "^1.0.1",
4849
"vue-bulma-collapse": "1.0.3",

0 commit comments

Comments
 (0)