-
Notifications
You must be signed in to change notification settings - Fork 245
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Worked on first version of detailed view. Worked on first version of …
…overview
- Loading branch information
1 parent
40e2156
commit b0c0634
Showing
11 changed files
with
281 additions
and
21 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,32 +1,141 @@ | ||
| <template> | ||
| <div class="content has-text-centered"> | ||
| <p> | ||
| <img width="200" src="~assets/logo.png" :alt="description"> | ||
| </p> | ||
| <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"> | ||
| <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> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h1 class="is-title is-bold">{{ name.replace('-', ' ') }}</h1> | ||
| <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> | ||
| </div> | ||
| </div> | ||
|
|
||
| <p> | ||
| <strong>{{ description }}</strong>, | ||
| <a :href="homepage">Live Demo</a> | ||
| </p> | ||
| <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> | ||
|
|
||
| <p>Supports Vue 2.0 and Bulma 0.3!</p> | ||
| <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> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| export default { | ||
| data () { | ||
| return this.$store.state.pkg | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" scoped> | ||
| .is-title { | ||
| text-transform: capitalize; | ||
| <style lang="scss"> | ||
| @mixin status-display { | ||
| position: fixed; | ||
| min-width: 50px; | ||
| height: 100%; | ||
| margin-left: -23px; | ||
| margin-top: -20px; | ||
| margin-bottom: -20px; | ||
| border-top-left-radius: 3px; | ||
| border-bottom-left-radius: 3px; | ||
| margin-right: 10px; | ||
| } | ||
| .status-display-success { | ||
| @include status-display(); | ||
| background-color: rgb(49, 196, 49); | ||
| } | ||
| .status-display-folder { | ||
| @include status-display(); | ||
| background-color: #4da2fc; | ||
| } | ||
| .status-display-fail { | ||
| @include status-display(); | ||
| background-color: #ca280b; | ||
| } | ||
| .outer-box { | ||
| padding-left: 40px; | ||
| min-height: 170px; | ||
| width: 100%; | ||
| } | ||
| .outer-box-icon { | ||
| width: 50px; | ||
| float: left; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,105 @@ | ||
| <template> | ||
| <div class="tile is-ancestor"> | ||
| <div class="tile is-vertical"> | ||
| <div class="tile"> | ||
| <div class="tile is-vertical is-parent is-12"> | ||
| <article class="tile is-child notification content-article"> | ||
| <div id="pipeline-detail"></div> | ||
| </article> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script> | ||
| 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 | ||
| var container = document.getElementById('pipeline-detail') | ||
| var data = { | ||
| nodes: this.nodes, | ||
| edges: this.edges | ||
| } | ||
| // Define vis options | ||
| var options = { | ||
| physics: { stabilization: true }, | ||
| layout: { | ||
| hierarchical: { | ||
| enabled: true, | ||
| levelSeparation: 200, | ||
| direction: 'LR', | ||
| sortMethod: 'directed' | ||
| } | ||
| }, | ||
| nodes: { | ||
| borderWidth: 4, | ||
| size: 40, | ||
| color: { | ||
| border: '#222222' | ||
| }, | ||
| font: { color: '#eeeeee' } | ||
| }, | ||
| edges: { | ||
| smooth: { | ||
| type: 'cubicBezier', | ||
| forceDirection: 'vertical', | ||
| roundness: 0.4 | ||
| }, | ||
| color: { | ||
| color: 'whitesmoke', | ||
| highlight: '#4da2fc' | ||
| }, | ||
| arrows: {to: true} | ||
| } | ||
| } | ||
| /* eslint-disable no-unused-vars */ | ||
| var network = new Vis.Network(container, data, options) | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss"> | ||
| #pipeline-detail { | ||
| width: 100%; | ||
| height: 400px; | ||
| } | ||
| </style> |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters