< template >
< card class = "card-user" style = "max-height:100%" >
< div class = "author" >
< img class = "avatar border-white" src = "@/assets/img/docker.png" alt = "..." >
< / div >
< b -container fluid class = "bv-example-row" >
< div class = "row text-center" >
< div class = "col-12" >
< b > Swarmlab hybrid - agent config < / b >
< / div >
< / div >
< div class = "row text-center" >
< div class = "col-12" >
< br >
< / div >
< / div >
< div class = "row" >
< div class = "col-3" > < b > Node ID < / b > < / div >
< div class = "col-9" > < i > { { CONFIG . nodeid } } < / i > < / div >
< / div >
< div class = "row" >
< div class = "col-3" > < b > Swarmlab key < / b > < / div >
< div class = "col-9" > < i > { { CONFIG . workerkey } } < / i > < / div >
< / div >
< div class = "row" >
< div class = "col-3" > < b > Swarmlab PublicKey < / b > < / div >
< div class = "col-9" > < i > { { CONFIG . swarmlab_public_wgkey } } < / i > < / div >
< / div >
< div class = "row" >
< div class = "col-3" > < b > Swarmlab ip < / b > < / div >
< div class = "col-3" > < i > { { CONFIG . server_ip } } < / i > < / div >
< div class = "col-2" > < b > Local IP < / b > < / div >
< div class = "col-4" > < i > { { CONFIG . wg_ip } } < / i > < / div >
< / div >
< div class = "row" >
< div class = "col-3" > < b > Private key < / b > < / div >
< div class = "col-3" > < i > { { CONFIG . privatekey } } < / i > < / div >
< div class = "col-2" > < b > Public key < / b > < / div >
< div class = "col-4" > < i > { { CONFIG . publickey } } < / i > < / div >
< / div >
< div class = "row" >
< div class = "col-12" >
< br >
< / div >
< / div >
< div class = "row" >
< div class = "col-4" >
< div class = "input-group input-group-sm sm-3" >
< div class = "input-group-prepend" >
< button
class = "ti-settings btn btn-outline-info"
round
type = "button"
title = "Load config"
@ click = "onAction('load')"
> Load Settings
< / button >
< / div >
< div class = "input-group-prepend" >
< / div >
< / div >
< / div >
< div class = "col-1" >
< div class = "input-group input-group-sm sm-3" >
< / div >
< / div > <!-- coll -- >
< div class = "col-7 text-right" >
< div class = "input-group input-group-sm sm-3 text-right" >
< div class = "input-group-append text-right" >
< button
class = "ti-link btn btn-outline-success"
round
type = "button"
title = "Connect"
@ click = "onAction('connect')"
> Connect
< / button >
< button
class = "ti-unlink btn btn-outline-warning"
round
type = "button"
title = "Connect"
@ click = "onAction('disconnect')"
> Disconnect
< / button >
< button
v - if = "isconnect"
class = "ti-link btn btn-outline-success"
round
type = "button"
title = "Connect"
> Status online
< / button >
< button
v - else
class = "ti-unlink btn btn-outline-warning"
round
type = "button"
title = "Connect"
> Status offline
< / button >
< / div >
< / div >
< / div > <!-- coll -- >
< / div >
< / div >
< div class = "row" >
< div class = "col-12" >
< div class = "input-group input-group-sm sm-3" >
< div class = "input-group-prepend" >
< button
v - if = "ishybridlab"
class = "ti-key btn btn-outline-info"
round
type = "button"
title = "Api keys"
@ click = "onAction('apikeyopen')"
> Enable the Swarmlab hybrid API
< / button >
< button
v - else
class = "ti-layout-media-overlay-alt btn btn-outline-warning"
round
type = "button"
title = "Api keys"
@ click = "onAction('apikeyclose')"
> Enable the Swarmlab hybrid API
< / button >
< button
class = "ti-info btn btn-outline-success"
round
type = "button"
title = "HowTo"
@ click = "onAction('register')"
>
< / button >
< / div >
< / div >
< / div >
< / div >
< / b - c o n t a i n e r >
< / card >
< / template >
< script >
import store from '@/store/index'
import { mapState , mapGetters , mapActions , dispatch } from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import { ApiConfig } from "@/config/index" ;
export default {
components : {
card
} ,
props : {
} ,
data ( ) {
return {
isconnect : false ,
ishybridlab : true ,
isstatus : false ,
CONFIG : {
'status' : '' ,
'privatekey' : '' ,
'publickey' : '' ,
'server_ip' : '' ,
'nodeid' : '' ,
'workerkey' : '' ,
'allowed_ips' : '' ,
'swarmlab_public_wgkey' : '' ,
'wg_ip' : '' ,
'swarm_ip' : '' ,
'wg_port' : ''
} ,
token : ''
}
} ,
mounted ( ) {
// from mytable.vue and socket
this . $root . $on ( 'hybrid_connect_server_view' , ( value ) => {
//console.log('from mytable' + JSON.stringify(value))
this . CONFIG . status = value . status
this . CONFIG . workerkey = value . workerkey
this . CONFIG . swarmlab_public_wgkey = value . swarmlab_public_wgkey
this . CONFIG . server_ip = value . server_ip
this . CONFIG . allowed_ips = value . allowed_ips
this . CONFIG . wg_port = value . wg_port
this . CONFIG . wg_ip = value . wg_ip
this . CONFIG . swarm_ip = value . swarm_ip
this . CONFIG . privatekey = value . privatekey
this . CONFIG . publickey = value . publickey
if ( this . CONFIG . status == 'on' ) {
this . isstatus = true
} else if ( this . CONFIG . status == 'off' ) {
this . isstatus = false
}
} ) ,
this . $root . $on ( 'hybrid_server_status' , ( value ) => {
this . serverstatus ( )
} )
} ,
created ( ) {
var url_string = window . location . href
var url = new URL ( url_string ) ;
this . token = url . searchParams . get ( "token" ) ;
//console.log("token "+ this.token);
} ,
beforeDestroy ( ) {
this . $root . $off ( 'hybrid_connect_server_view' )
this . $root . $off ( 'hybrid_server_status' )
} ,
computed : {
} ,
methods : {
async serverstatus ( action ) {
var log = store . getters [ 'pipelineLLO/getstatus' ]
//console.log('status log ' + JSON.stringify(log))
//{"data":{"swarmlab":"active","hybrid":"Online"}}
if ( log . data . swarmlab == 'active' && log . data . hybrid == 'Online' ) {
this . isstatus = true
this . isconnect = true
this . CONFIG . nodeid = log . data . swarmlabid
} else {
this . isstatus = false
this . isconnect = false
this . CONFIG . nodeid = 'null'
}
} ,
async onAction ( action ) {
if ( action == 'load' ) {
var log = await store . dispatch ( "pipelineLLO/swarmlabhybridconfig" , {
token : this . token
} )
//console.log('settings ' + JSON.stringify(log))
this . CONFIG . status = log . data . data . status
this . CONFIG . workerkey = log . data . data . workerkey
this . CONFIG . swarmlab_public_wgkey = log . data . data . wg_public
this . CONFIG . server_ip = log . data . data . endpoint // 83.212.77.133:51820
this . CONFIG . allowed_ips = log . data . data . allowed_ip // 10.13.13.0/16, 0.0.0.0/0, ::/0
this . CONFIG . wg_port = log . data . data . wg_port // 10.13.13.0/16, 0.0.0.0/0, ::/0
this . CONFIG . wg_ip = log . data . data . wg_ip
this . CONFIG . swarm_ip = log . data . data . swarm_ip
this . CONFIG . privatekey = log . data . data . privatekey
this . CONFIG . publickey = log . data . data . publickey
if ( this . CONFIG . status == 'on' ) {
this . isstatus = true
} else if ( this . CONFIG . status == 'off' ) {
this . isstatus = false
}
//console.log('swarm ' + JSON.stringify(log.data.data.workerkey))
//console.log('start ' + JSON.stringify('load'))
this . onAction ( 'save' )
} else if ( action == 'apikeyopen' ) {
this . ishybridlab = false
this . $root . $emit ( 'hybrid_lab_keyview' , 'open' )
} else if ( action == 'apikeyclose' ) {
this . ishybridlab = true
this . $root . $emit ( 'hybrid_lab_keyview' , 'close' )
} else if ( action == 'connect' ) {
//console.log('start ' + JSON.stringify('connect'))
var log = await store . dispatch ( "pipelineLLO/get_config" , {
token : this . token
} )
//console.log('pwd ' + JSON.stringify(log))
this . isconnect = true
var winfopath = log . data . data
if ( log . data . error_msg = 'ok' ) {
var winfo = '<span class="text-success">sudo /bin/bash '
winfo += winfopath . trim ( )
winfo += '/hybrid/connect/join.sh </span>'
} else {
var winfo = 'no exec file'
}
var info = '<h4>Swarmlab Connect</h4> <h6 class="text-warning"> You are about to connect with others. Be Careful </h6> <h5><i>Copy-and-run-command </i></h5> <br>'
this . $swal ( {
type : 'info' ,
html : info + winfo ,
icon : 'info' ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true
} )
} else if ( action == 'save' ) {
var log = await store . dispatch ( "pipelineLLO/create_config" , {
token : this . token ,
value : this . CONFIG
} )
//console.log('start ' + JSON.stringify(log))
//console.log('start ' + JSON.stringify('createkey'))
} else if ( action == 'disconnect' ) {
//console.log('start ' + JSON.stringify('disconnect'))
var log = await store . dispatch ( "pipelineLLO/get_config" , {
token : this . token
} )
//console.log('pwd ' + JSON.stringify(log))
var winfopath = log . data . data
if ( log . data . error_msg = 'ok' ) {
var winfo = '<span class="text-success">sudo /bin/bash '
winfo += winfopath . trim ( )
winfo += '/hybrid/connect/leave.sh </span>'
} else {
var winfo = 'no exec file'
}
var info = '<h4>Swarmlab Disconnect</h4> <h5><i>Copy-and-run-command </i></h5> <br>'
this . $swal ( {
type : 'info' ,
icon : 'info' ,
html : info + winfo ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true
} )
} else if ( action == 'register' ) {
//console.log('start ' + JSON.stringify('register'))
//var log = await store.dispatch("pipelineLLO/get_config",{
// token:this.token
//})
//console.log('pwd ' + JSON.stringify(log))
// var winfopath = log.data.data
var winfo = ` Before you begin
< br >
Before you start using the Swarmlab Hybrid API , you need a hybrid enabled account and the Swarmlab API enabled .
< br >
To learn more , see Get Started with Hybrid Platform .
`
var info = "<h5>Get API Key's</h5><br>"
this . $swal ( {
type : 'info' ,
html : info + winfo ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true
} )
}
}
} ,
actions : {
}
} ;
< / script >
< style >
. flex - fixed - width - item {
flex : 0 0 100 px ;
}
. modalinfo {
z - index : 10000000 ! important ;
position : fixed ;
}
/* a container with flex-direction column */
. vue - notifyjs . notifications {
. alert {
z - index : 100 ;
}
. list - move {
transition : transform 0.3 s , opacity 0.4 s ;
}
. list - item {
display : inline - block ;
margin - right : 10 px ;
}
. list - enter - active {
transition : transform 0.2 s ease - in , opacity 0.4 s ease - in ;
}
. list - leave - active {
transition : transform 1 s ease - out , opacity 0.4 s ease - out ;
}
. list - enter {
opacity : 0 ;
transform : scale ( 1.1 ) ;
}
. list - leave - to {
opacity : 0 ;
transform : scale ( 1.2 , 0.7 ) ;
}
}
pre {
//background-color: rgb(255, 247, 229);
background - color : # eff0f1 ;
border : 1 px solid blue ;
//white-space: pre-line;
}
< / style >