Browse Source

new theme

master
zeus 3 years ago
parent
commit
e1d325dc69
  1. 6
      install.sh
  2. 51
      install/install-CentOS.sh
  3. 44
      install/install-ubuntu.sh
  4. 53
      src-local/llo/new.js
  5. 508
      src/App.vue
  6. 416
      src/App.vue.backup
  7. 20
      src/components/mynetwork/dockerservices.vue
  8. 28
      src/components/mynetwork/mytable.vue
  9. 11
      src/store/modules/create_pipelineLLO.js

6
install.sh

@ -209,10 +209,10 @@ fi
if [ $toolsok == 'ok' ];then
cp -f $wdir/files/VuetableCssConfig.js $wdir/node_modules/vuetable-2/src/components/VuetableCssConfig.js
cp -f $wdir/files/serve.js $wdir/node_modules/@vue/cli-service/lib/commands/serve.js
cp -f $wdir/files/status.sh $wdir/src-local/hybrid/connect/status.sh
cp -f $wdir/files/serve.js $wdir/node_modules/@vue/cli-service/lib/commands/serve.js
cp -f $wdir/files/status.sh $wdir/src-local/hybrid/connect/status.sh
cp -f $wdir/files/get-swarmlab-ca $wdir/src-local/hybrid/connect/get-swarmlab-ca
cp -f $wdir/files/get-base-ca $wdir/src-local/hybrid/connect/get-base-ca
cp -f $wdir/files/get-base-ca $wdir/src-local/hybrid/connect/get-base-ca
cat << FOE > $wdir/src-local/ecosystem.config.js
module.exports = {

51
install/install-CentOS.sh

@ -0,0 +1,51 @@
#!/bin/bash
# ------------------------
# Not Tested
# ------------------------
# ------------------------
# install wireguard jq
# ------------------------
sudo yum install -y yum-utils
sudo yum install elrepo-release epel-release
sudo yum install kmod-wireguard wireguard-tools
# ------------------------
# install node version 15
# ------------------------
curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -
yum install -y nodejs
# ------------------------
# install docker
# ------------------------
sudo yum-config-manager \
--add-repo \
https://download.docker.com/linux/centos/docker-ce.repo
sudo yum install docker-ce docker-ce-cli containerd.io
sudo systemctl start docker
sudo usermod -aG docker [USERNAME]
# ------------------------
# install docker-compose
# ------------------------
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
# ------------------------
# install pm2
# ------------------------
sudo npm install -g pm2
echo ""
echo "run ./install.sh"

44
install/install-ubuntu.sh

@ -0,0 +1,44 @@
#!/bin/bash
# ------------------------
# install wireguard jq
# ------------------------
sudo apt update
sudo apt install wireguard jq
# ------------------------
# install node version 15
# ------------------------
curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash -
sudo apt-get install -y nodejs
# ------------------------
# install docker
# ------------------------
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable"
sudo apt update
sudo apt install -y docker-ce
sudo usermod -aG docker [USERNAME]
# ------------------------
# install docker-compose
# ------------------------
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose
# ------------------------
# install pm2
# ------------------------
sudo npm install -g pm2
echo ""
echo "run ./install.sh"

53
src-local/llo/new.js

@ -103,11 +103,14 @@ watcher
// ***************************************************
app.get('/dockerservices', (req, res, next) => {
var RES = new Object();
const page = req.query["page"]
const per_page = req.query["per_page"]
RES.sort = req.query["sort"]
RES.filter = req.query["filter"]
RES.type = req.query["type"]
//var showexec = `docker ps --format `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Command": "{{ .Command }}", "CreatedAt": "{{ .CreatedAt }}", "Networks": "{{ .Networks }}"}' | jq . -s `
//var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}"}' | jq . -s `
//docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Command": "{{ .Command }}", "CreatedAt": "{{ .CreatedAt}}", "Networks":"{{ .Networks}}", "Ports": "{{ .Ports}}", "RunningFor": "{{ .RunningFor}}", "Status": "{{ .Status}}" }'
//var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", "Networks":"{{.Networks}}", "Status":"{{.Status}}","Command":"{{,Command}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}' | jq . -s `
var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", "Networks":"{{.Networks}}", "Status":"{{.Status}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}' | jq . -s `
exec(showexec, (err, stdout, stderr) => {
if (err) {
@ -122,12 +125,29 @@ var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}",
console.log('Number of files ' + stdout);
console.log('Number string ' + string);
console.log('stringify ' + JSON.stringify(datajson));
var total = datajson.length
var perpage = 5
var page = 1
var lastpage = total/5
var from = 1
var to = 5
var total = datajson.length;
var perpage = per_page
//var page = 1
var lastpage = Math.trunc(total/5);
if(lastpage <= 1) {
lastpage=1
}else{
lastpage++
}
var next=(page+1);
if(next >= lastpage){
next=lastpage;
}
var prev=(page-1);
if(prev == 0){
prev=1;
}
var from=((page-1)*perpage)+1;
var to=(perpage*page)
var myplaybooks = new Object();
var links = `
{
@ -136,15 +156,18 @@ var showexec = `docker ps --format '{"ID":"{{ .ID }}", "Image": "{{ .Image }}",
"per_page": ${perpage},
"current_page": ${page},
"last_page": ${lastpage},
"next_page_url": "?page=$next",
"prev_page_url": "?page=$prev",
"next_page_url": "?page=${next}",
"prev_page_url": "?page=${prev}",
"from": ${from},
"to": ${to},
"frommongo": "frommongo",
"tomongo": "tomongo"
"frommongo": ${from},
"tomongo": ${to}
}
}
`
//"next_page_url": "?page="+${next},
//"prev_page_url": "?page="+${prev},
//console.log(JSON.stringify(links))
//myplaybooks.links = links
myplaybooks.links = JSON.parse(links);
myplaybooks.data = datajson;
@ -402,7 +425,7 @@ hybrid=$(hybrid_ifup)
if [ $hybrid == 'NotOnline' ]; then
echo "Swarmlab hybrid $hybrid"
else
ip link set wg0 down
ip link set wg0 down
ip link del wg0
sleep 3
hybrid1=$(hybrid_ifup)

508
src/App.vue

@ -6,23 +6,13 @@
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_Local_LabInstances</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>
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
<li class="nav-item">
<a class="nav-link" href="#">
-
@ -36,28 +26,63 @@
-
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
@click="hybrid('connect-server')"
>Config_hybrid_server</a>
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Swarmlab_Cloud </b-nav-item>
</ul>
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap">
<!-- --------------- socket connection -->
<b-nav-item
@click="onAction('check')"
>Connection Status:</b-nav-item>
<b-nav-item >Agent</b-nav-item>
<!--
v-if="$socket.disconnected"
-->
<li class="nav-item"
v-if="issocket === 'close'"
>
<a
class="ti-link nav-link text-danger"
href="#"
title="You are disconnected from hybrid_agent"
>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
|
</a>
<li class="nav-item"
v-else
>
<a
class="ti-link nav-link text-success"
href="#"
title="You are connected hybrid_agent"
@click="onAction('connect')"
>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
@click="hybrid('manage_service')"
>
Manage_Your_hybrid_LabInstances</a>
<!-- --------------- socket connection -->
<!-- --------------- wg connection -->
<b-nav-item >Server</b-nav-item>
<li class="nav-item"
v-if="isconnect!==true"
>
<a
class="ti-link nav-link text-danger"
href="#"
title="You are disconnected from hybrid_server"
>
</a>
</li>
<li class="nav-item"
v-else
>
<a
class="ti-link nav-link text-success"
href="#"
title="You are connected hybrid_server"
>
</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>
<!-- --------------- wg connection -->
<b-nav-item > </b-nav-item>
</ul>
</div>
@ -65,62 +90,210 @@
<!-- ***************** container items ****************** -->
<b-row
v-show="hybridmenou == 'bootstrap'"
>
<b-row >
<b-col cols="12" >
<div class="d-flex" id="wrapper">
<!-- Sidebar max -------------------------------- -->
<div class=" bg-light border-right" id="sidebar-wrapper"
style="width: 15rem;"
v-if="sidemenou == 'max'"
>
<div class="list-group list-group-flush"
>
<!-- Menou Dashboard -->
<b-list-group-item v-b-toggle.hybrid-dashboard variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }"> Dashboard</b-list-group-item>
<b-collapse id="hybrid-dashboard" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Dashoard</b-list-group-item>
<!--
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
-->
</b-collapse>
<!-- Menou Settings -->
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Local" class="ti-user list-group-item list-group-item-action" v-on:click="setActive('profile','')" style="cursor: pointer;" :class="{ active: isActive('profile') }" @click="hybrid('connect-server')" > Profile</b-list-group-item>
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
<!--
<b-list-group-item variant="light" name="profile" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('profile','profile_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_profile') } " > Local</b-list-group-item>
-->
<b-list-group-item variant="light" name="Settings" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('settings','profile_settings')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_settings') }" @click="hybrid('connect-server')"> Settings</b-list-group-item>
</b-collapse>
<!-- Menou hybrid -->
<b-list-group-item v-b-toggle.hybrid-hybrid variant="light" name="Local" class="ti-loop list-group-item list-group-item-action" v-on:click="setActive('hybrid','')" style="cursor: pointer;" :class="{ active: isActive('hybrid') }" @click="hybrid('manage_service')" > Hybrid</b-list-group-item>
<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')"> Zone</b-list-group-item>
</b-collapse>
<!-- Menou container -->
<b-list-group-item v-b-toggle.hybrid-container variant="light" name="Local" class="ti-package list-group-item list-group-item-action" v-on:click="setActive('container','')" style="cursor: pointer;" :class="{ active: isActive('container') }" @click="hybrid('bootstrap')" > Container</b-list-group-item>
<b-collapse id="hybrid-container" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('container','hybrid_container')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_container') }" @click="hybrid('bootstrap')"> Container</b-list-group-item>
</b-collapse>
<!-- Menou private -->
<b-list-group-item v-b-toggle.hybrid-private variant="light" name="Private" class="ti-home list-group-item list-group-item-action" v-on:click="setActive('private','')" style="cursor: pointer;" :class="{ active: isActive('private') }" @click="hybrid('services')" > Private</b-list-group-item>
<b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')"> Bootstrap</b-list-group-item>
</b-collapse>
<!-- Menou close -->
<b-list-group-item variant="light" name="menou-min" class="ti-angle-double-left list-group-item list-group-item-action" v-on:click="onActionMenu('min')" style="cursor: pointer;" :class="{ active: isActive('menou-min') }"></b-list-group-item>
</div>
</div>
<!-- /Sidebar max ------------------------------------ -->
<!-- Sidebar min -------------------------------- -->
<div class=" bg-light border-right" id="sidebar-wrapper"
v-if="sidemenou == 'min'"
>
<div class="list-group list-group-flush"
>
<!-- Menou Dashboard -->
<b-list-group-item v-b-toggle.hybrid-dashboard variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }" title="Dashboard"></b-list-group-item>
<b-collapse id="hybrid-dashboard" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="dashboard" class="ti-view-grid m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }" title="Dashboard"></b-list-group-item>
<!--
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
-->
</b-collapse>
<!-- Menou Settings -->
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Local" class="ti-user list-group-item list-group-item-action" v-on:click="setActive('profile','')" style="cursor: pointer;" :class="{ active: isActive('profile') }" @click="hybrid('connect-server')" title="Profile" > </b-list-group-item>
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Settings" class="ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('settings','profile_settings')" style="cursor: pointer;" :class="{ active: isActiveSub('profile_settings') }" @click="hybrid('connect-server')" title="Profile"> </b-list-group-item>
</b-collapse>
<!-- Menou hybrid -->
<b-list-group-item v-b-toggle.hybrid-hybrid variant="light" name="Local" class="ti-loop list-group-item list-group-item-action" v-on:click="setActive('hybrid','')" style="cursor: pointer;" :class="{ active: isActive('hybrid') }" @click="hybrid('manage_service')" title="Hybrid" > </b-list-group-item>
<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')" title="Zones"> </b-list-group-item>
</b-collapse>
<!-- Menou container -->
<b-list-group-item v-b-toggle.hybrid-container variant="light" name="Local" class="ti-package list-group-item list-group-item-action" v-on:click="setActive('container','')" style="cursor: pointer;" :class="{ active: isActive('container') }" @click="hybrid('bootstrap')" title="Container"> </b-list-group-item>
<b-collapse id="hybrid-container" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('container','hybrid_container')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_container') }" @click="hybrid('bootstrap')" title="Show all containers"> </b-list-group-item>
</b-collapse>
<!-- Menou private -->
<b-list-group-item v-b-toggle.hybrid-private variant="light" name="Private" class="ti-home list-group-item list-group-item-action" v-on:click="setActive('private','')" style="cursor: pointer;" :class="{ active: isActive('private') }" @click="hybrid('services')" title="Private"> </b-list-group-item>
<b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')" title="Bootstrap"> </b-list-group-item>
</b-collapse>
<!-- Menou close -->
<b-list-group-item variant="light" name="menou-max" class="ti-angle-double-right list-group-item list-group-item-action" v-on:click="onActionMenu('max')" style="cursor: pointer;" ></b-list-group-item>
</div>
</div>
<!-- /Sidebar max ------------------------------------ -->
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<!-- content----------------------------------- -->
<div class="w-100 p-3" style="background-color: #eee;">
<!-- ----------------------------------- -->
<!-- ------ hybrid settings --------------- -->
<!-- ----------------------------------- -->
<connect-server
style="background-color: #f8f9fa"
v-show="hybridmenou == 'connect-server'"
>
</connect-server>
<!-- ----------------------------------- -->
<!-- ------ hybrid settings --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid manage services --------------- -->
<!-- ----------------------------------- -->
<manage-services
v-show="hybridmenou == 'manage_service'"
style="background-color: #f8f9fa"
>
</manage-services>
<!-- ----------------------------------- -->
<!-- ------ hybrid manage services --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid container --------------- -->
<!-- ----------------------------------- -->
<network-table
v-show="hybridmenou == 'bootstrap'"
style="background-color: #f8f9fa"
>
</network-table>
<!-- ----------------------------------- -->
<!-- ------ hybrid container --------------- -->
<!-- ----------------------------------- -->
</b-col>
</b-row>
<b-row
v-show="hybridmenou == 'services'"
>
<b-col cols="12">
<!-- ----------------------------------- -->
<!-- ------ hybrid private bootstrap --------------- -->
<!-- ----------------------------------- -->
<services-table
v-show="hybridmenou == 'services'"
style="background-color: #f8f9fa"
>
</services-table>
</services-table>
<!-- ----------------------------------- -->
<!-- ------ hybrid private bootstrap --------------- -->
<!-- ----------------------------------- -->
</div>
</b-col>
</b-row>
<!-- Page Content -->
<b-row
v-show="hybridmenou == 'connect-server'"
>
<b-col cols="12">
<connect-server
style="background-color: #f8f9fa"
>
</connect-server>
<!-- /#page-content-wrapper -->
</b-col>
</b-row>
</div>
<!-- /#wrapper -->
<b-row
v-show="hybridmenou == 'manage_service'"
>
<b-col cols="12">
<manage-services
style="background-color: #f8f9fa"
>
</manage-services>
</b-col>
</b-row>
</div>
</template>
<script>
import "@/assets/css/themify-icons.css";
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import ConnectServer from "./components/myconnect-server.vue";
import NetworkTable from "./components/mynetwork.vue";
import ServicesTable from "./components/myservices.vue";
@ -136,6 +309,12 @@ export default {
},
data() {
return {
setStatusAgent:'',
issocket:false, //socket server
isconnect:false, // dockerswarm wg
activeItem: '', // menou
activeItemSub: '', //submenou
sidemenou:'max',
hybridmenou:'bootstrap',
show: true,
token: '',
@ -143,13 +322,70 @@ export default {
}
},
mounted() {
this.$root.$on('hybrid_server_status', (value) => {
this.serverstatus()
})
},
beforeDestroy () {
this.$root.$off('hybrid_server_status')
},
created() {
},
methods: {
async onAction(action){
if(action == 'check'){
if(this.$socket.disconnected){
var socketStatus = 'close'
}else if(this.$socket.connected){
var socketStatus = 'open'
}
if(this.isconnect){
var serverStatus = 'open'
}else{
var serverStatus = 'close'
}
var info="Status<br>"
info+="Agent is " + socketStatus+"<br>"
info+="Server is " + serverStatus
this.$swal({
type: 'info',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
//showCancelButton: true,
showLoaderOnConfirm: false,
//reverseButtons: true,
focusCancel: true
//confirmButtonText: 'Yes, Connect!'
})
}
},
async serverstatus(action){
var log = store.getters['pipelineLLO/getstatus']
//console.log('status log ' + JSON.stringify(log))
if(log.data.swarmlab == 'active' && log.data.hybrid == 'Online'){
this.isconnect=true
}else{
this.isconnect=false
}
},
onActionMenu(action){
if(action == 'max'){
this.sidemenou = 'max'
}else if(action == 'min'){
this.sidemenou = 'min'
}
//console.log(action)
},
hybrid(action) {
this.hybridmenou = action
console.log(action)
//console.log(action)
if(action == 'bootstrap'){
this.$root.$emit('hybrid_refresh_dockerservices')
}else if(action == 'connect-server'){
@ -159,13 +395,43 @@ export default {
}else if(action == 'manage_service'){
//this.$root.$emit('hybrid_manage_service')
}
},
isActive: function (menuItem) {
//console.log('active ' + menuItem);
return this.activeItem === menuItem
},
isActiveSub: function (menuItem) {
//console.log('activesub ' + menuItem);
return this.activeItemSub === menuItem
},
setActive: function (menuItem,menuItemSub) {
//console.log('set ' + menuItem);
this.activeItem = menuItem // no need for Vue.set()
this.activeItemSub = menuItemSub // no need for Vue.set()
}
},
computed: {
socketStatus() {
return store.getters['pipelineLLO/getsocketStatus']
}
},
watch: {
socketStatus(status) {
console.log('watchok '+status)
this.issocket = status
}
}
}
</script>
<style>
.active {
background-color: #e7e7e7 !important;
color: #0c5460 !important;
}
@import url('https://fonts.googleapis.com/css?family=Lato:400,700');
@ -204,4 +470,112 @@ export default {
margin-left:auto
}
.m-subm {
width: 100%;
border-left: 4px solid #4b4ba3;;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-right: none;
}
.m-subm-card {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
margin-bottom: 0px;
margin-top: 0px;
}
.m-subm-listgroup {
width: 100%;
//border-left: 4px solid #4b4ba3;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
padding-left: 2.25rem;
}
.m-subm-listgroup:hover {
background-color: #e7e7e7;
font-weight: 580;
}
.m-subm-listgroup:focus {
background-color: #e7e7e7;
color:#393982;
font-weight: 580;
}
/*!
* Start Bootstrap - Simple Sidebar (https://startbootstrap.com/template/simple-sidebar)
* Copyright 2013-2020 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
*/
#sidebar-wrapper .list-group {
margin:0;
line-height:30px;
font-size:12px;
font-weight:600;
}
/*
#sidebar-wrapper .list-group {
width: 15rem;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
#page-content-wrapper {
min-width: 100vh;
}
*/
</style>

416
src/App.vue.backup

@ -0,0 +1,416 @@
<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_Local_LabInstances</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="#"
@click="hybrid('connect-server')"
>Config_hybrid_server</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
|
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"
@click="hybrid('manage_service')"
>
Manage_Your_hybrid_LabInstances</a>
</li>
</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>
<b-row
v-show="hybridmenou == 'connect-server'"
>
<b-col cols="12">
<connect-server
style="background-color: #f8f9fa"
>
</connect-server>
</b-col>
</b-row>
<b-row
v-show="hybridmenou == 'manage_service'"
>
<b-col cols="12">
<manage-services
style="background-color: #f8f9fa"
>
</manage-services>
</b-col>
</b-row>
<div class="d-flex" id="wrapper">
<!-- Sidebar max -->
<div class=" bg-light border-right" id="sidebar-wrapper"
v-if="sidemenou == 'max'"
>
<div class=" logo simple-text ti-swarmlab text-secondary sidebar-heading"
@click="onActionMenu('min')"
>
Swarmlab.io
</div>
<div class="list-group list-group-flush"
>
<!-- Menou Dashboard -->
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }"> Dashboard</b-list-group-item>
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="dashboard" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Profile</b-list-group-item>
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item>
</b-collapse>
<!-- Menou StandAlone -->
<b-list-group-item v-b-toggle.hybrid-local variant="light" name="Local" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('local','')" style="cursor: pointer;" :class="{ active: isActive('local') }"> Local</b-list-group-item>
<b-collapse id="hybrid-local" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="local" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_local')" style="cursor: pointer;" :class="{ active: isActiveSub('local_local') }"> Local</b-list-group-item>
<b-list-group-item variant="light" name="Menou" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_menou')" style="cursor: pointer;" :class="{ active: isActiveSub('local_menou') }"> Menou</b-list-group-item>
</b-collapse>
</div>
</div>
<!-- Sidebar min -->
<div class="bg-light border-right" id="sidebar-wrapper"
v-if="sidemenou == 'min'"
>
<div class=" ti-layout-slider sidebar-heading"
@click="onActionMenu('max')"
>
</div>
<div class="list-group list-group-flush"
>
<a href="#" class="ti-help list-group-item list-group-item-action bg-light"></a>
<a href="#" class="ti-link list-group-item list-group-item-action bg-light"></a>
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
<a href="#" class="list-group-item list-group-item-action bg-light"></a>
</div>
</div>
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<div id="page-content-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom">
<button class="btn btn-primary" >
Max Menu
</button>
<button class="btn btn-primary" >
Min Menu
</button>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto mt-2 mt-lg-0">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<div class="container-fluid">
<h1 class="mt-4">Simple Sidebar</h1>
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p>
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p>
</div>
</div>
<!-- /#page-content-wrapper -->
</div>
<!-- /#wrapper -->
</div>
</template>
<script>
import "@/assets/css/themify-icons.css";
import ConnectServer from "./components/myconnect-server.vue";
import NetworkTable from "./components/mynetwork.vue";
import ServicesTable from "./components/myservices.vue";
import ManageServices from "./components/manageservices.vue";
export default {
name: 'app',
components: {
NetworkTable,
ServicesTable,
ConnectServer,
ManageServices
},
data() {
return {
activeItem: '', // menou
activeItemSub: '', //submenou
sidemenou:'max',
hybridmenou:'bootstrap',
show: true,
token: '',
SwarmabAsciiLabTemplate:''
}
},
mounted() {
},
created() {
},
methods: {
onActionMenu(action){
if(action == 'max'){
this.sidemenou = 'max'
}else if(action == 'min'){
this.sidemenou = 'min'
}
console.log(action)
},
hybrid(action) {
this.hybridmenou = action
console.log(action)
if(action == 'bootstrap'){
this.$root.$emit('hybrid_refresh_dockerservices')
}else if(action == 'connect-server'){
this.$root.$emit('hybrid_connect_server')
}else if(action == 'services'){
this.$root.$emit('hybrid_refresh_availableservices')
}else if(action == 'manage_service'){
//this.$root.$emit('hybrid_manage_service')
}
},
isActive: function (menuItem) {
console.log('active ' + menuItem);
return this.activeItem === menuItem
},
isActiveSub: function (menuItem) {
console.log('activesub ' + menuItem);
return this.activeItemSub === menuItem
},
setActive: function (menuItem,menuItemSub) {
console.log('set ' + menuItem);
this.activeItem = menuItem // no need for Vue.set()
this.activeItemSub = menuItemSub // no need for Vue.set()
}
}
}
</script>
<style>
.active {
background-color: #e7e7e7 !important;
color: #0c5460 !important;
}
@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
}
.m-subm {
width: 100%;
border-left: 4px solid #4b4ba3;;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-right: none;
}
.m-subm-card {
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
padding-bottom: 0px;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
margin-bottom: 0px;
margin-top: 0px;
}
.m-subm-listgroup {
width: 100%;
//border-left: 4px solid #4b4ba3;
background-color: #f0f0f0;
border-top: none;
border-bottom: none;
border-right: none;
border-left: none;
padding-left: 2.25rem;
}
.m-subm-listgroup:hover {
background-color: #e7e7e7;
font-weight: 580;
}
.m-subm-listgroup:focus {
background-color: #e7e7e7;
color:#393982;
font-weight: 580;
}
</style>

20
src/components/mynetwork/dockerservices.vue

@ -1,5 +1,5 @@
<template>
<div class="card" style="max-height:100%">
<card class="card-user" style="max-height:100%">
<v-wait for="myRunInstancetutor">
@ -11,6 +11,7 @@
</template>
</v-wait>
<b-container fluid class="bv-example-row">
<div class="input-group input-group-sm sm-3">
@ -92,7 +93,8 @@
</vuetable-pagination>
</div>
</div>
</div>
</b-container>
</card>
</template>
<script>
import store from '@/store/index'
@ -102,9 +104,11 @@ import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
export default {
components: {
card,
Vuetable,
VuetablePagination,
VuetablePaginationInfo,
@ -144,16 +148,16 @@ export default {
title: '<span class="orange"></span>Name',
sortField: 'Names',
visible:true,
dataClass: 'left aligned col-3',
width: '20%'
dataClass: 'text-left text-wrap text-break break-word',
width: '50%'
},
{
name: 'Image',
title: '<span class="orange"></span>Image',
sortField: 'Image',
visible:true,
dataClass: 'left aligned col-3',
width: '10%',
dataClass: 'left aligned w-25',
width: '15%',
formatter (value) {
const result = /^ondemand_playground/.test(value);
if (result) {
@ -176,7 +180,6 @@ export default {
title: '<span class="orange"></span>Status',
sortField: 'Status',
titleClass: 'center aligned',
dataClass: 'left aligned w-25',
visible:true,
width: '10%'
},
@ -193,10 +196,11 @@ export default {
title: 'Actions',
titleClass: 'center aligned',
dataClass: 'center aligned',
width: '3%'
width: '5%'
}
],
apiurl:ApiConfig.url_80+"/dockerservices",
//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
css: CssConfig,
perpage: 5,
searchFor: '',

28
src/components/mynetwork/mytable.vue

@ -307,7 +307,10 @@ export default {
connect() {
//this.$socket.client.emit('authenticate', this.token);
console.log('socket connected '+ 'socketdatasend' )
this.issocket = 'open'
this.issocket = 'open';
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'open'
})
},
/**
*
@ -317,6 +320,9 @@ export default {
error(error) {
console.log("socket error "+JSON.stringify(error))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
},
/**
*
@ -326,6 +332,9 @@ export default {
connect_error(error) {
console.log("socket connect_error "+JSON.stringify(error))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
this.socketopen()
this.socketreconnect()
},
@ -337,6 +346,9 @@ export default {
disconnect(reason) {
console.log("socket disconnect "+JSON.stringify(reason))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
this.socketreconnect()
},
/**
@ -347,6 +359,9 @@ export default {
connect_timeout(reason) {
console.log("socket timeout "+JSON.stringify(reason))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
this.socketreconnect()
},
/**
@ -384,6 +399,9 @@ export default {
reconnect_error(error) {
console.log("socket reconnect_error "+JSON.stringify(error))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
this.socketreconnect()
},
/**
@ -394,6 +412,9 @@ export default {
unauthorized(val) {
console.log("socket unauthorized "+JSON.stringify(val))
this.issocket = 'close'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'close'
})
},
/**
*
@ -403,6 +424,9 @@ export default {
socket_id_emit(val) {
console.log("socket id from server "+JSON.stringify(val))
this.issocket = 'open'
var log = store.dispatch("pipelineLLO/setsocketStatus",{
status:'open'
})
},
/**
*
@ -526,7 +550,7 @@ export default {
console.log(" message_hybrid_status "+JSON.stringify(val))
var obj = {}
obj.status = val
var res1 = await store.dispatch('pipelineLLO/setstatus', obj)
var res1 = store.dispatch('pipelineLLO/setstatus', obj)
this.$root.$emit('hybrid_server_status',val)
}
},

11
src/store/modules/create_pipelineLLO.js

@ -7,9 +7,13 @@ export default {
namespaced: true,
state: {
token: '',
socketStatus:'close',
status: {}
},
getters: {
getsocketStatus (state, container) {
return state.socketStatus
},
gettoken (state, container) {
return state.token
},
@ -21,6 +25,9 @@ export default {
}
},
mutations: {
set_socketStatus (state, data) {
state.socketStatus=data;
},
set_token (state, data) {
state.token=data;
},
@ -41,6 +48,10 @@ export default {
tt.date = value.log.date
commit('add_log', tt)
},
setsocketStatus({commit}, value) {
//console.log("container "+value)
commit('set_socketStatus', value.status)
},
settoken({commit}, value) {
//console.log("container "+value)
commit('set_token', value.token)

Loading…
Cancel
Save