You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

172 lines
4.3 KiB

<template>
<div id="app" class="container-fluid">
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start">
<b-navbar-brand class="logo simple-text ti-swarmlab text-secondary">
Swarmlab.io
</b-navbar-brand>
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2">
<ul class="navbar-nav mx-auto text-md-center text-left">
<li class="nav-item">
<a class="nav-link" href="#"
@click="hybrid('services')"
>
Manage_Your_Lab_Instances</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
|
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
@click="hybrid('bootstrap')"
>Containers</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
-
</a>
</li>
<li class="nav-item my-auto">
<a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
-
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
|
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
<b-nav-item > | </b-nav-item>
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item>
<b-nav-item > </b-nav-item>
</ul>
</div>
</nav>
<!-- ***************** container items ****************** -->
<b-row
v-show="hybridmenou == 'bootstrap'"
>
<b-col cols="12" >
<network-table
style="background-color: #f8f9fa"
>
</network-table>
</b-col>
</b-row>
<b-row
v-show="hybridmenou == 'services'"
>
<b-col cols="12">
<services-table
style="background-color: #f8f9fa"
>
</services-table>
</b-col>
</b-row>
</div>
</template>
<script>
import "@/assets/css/themify-icons.css";
//import NetworkTable from "./components/mynetwork/mytable.vue";
import NetworkTable from "./components/mynetwork.vue";
import ServicesTable from "./components/myservices.vue";
export default {
name: 'app',
components: {
NetworkTable,
ServicesTable
},
data() {
return {
hybridmenou:'bootstrap',
show: true,
token: '',
SwarmabAsciiLabTemplate:''
}
},
mounted() {
},
created() {
},
methods: {
hybrid(action) {
this.hybridmenou = action
console.log(action)
if(action == 'bootstrap'){
this.$root.$emit('hybrid_refresh_dockerservices')
}else if(action == 'services'){
this.$root.$emit('hybrid_refresh_availableservices')
}
}
}
}
</script>
<style>
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
body {
background: #EEF1F4 !important;
}
.nav-background {
background: #353535;
}
.ti-swarmlab:before {
position: relative;
top:-5px;
right:-8px;
font-size: 1.5em;
font-weight: 300;
content: "\e606";
color: #222;
color: #74B3C8;
border-color: #c60000;
}
.ti-themify-logo:before {
content: "\e6d1";
}
.menoutext {
font-family: 'Lato', sans-serif !important;
}
.mycontainer {
padding-right: 20px !important;
padding-left: 5px !important;
margin-right:auto;
margin-left:auto
}
</style>