< 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 > View and Manage your running Containers < / b >
< / div >
< / div >
< br >
< div class = "row" >
< div class = "col-5" >
< div class = "input-group input-group-sm sm-3" >
< div class = "input-group-prepend" >
< button
v - if = "$socket.disconnected"
class = "ti-unlink btn btn-outline-danger"
round
type = "button"
title = "You are disconnected from Swarmlab-hybrid"
disabled
>
< / button >
< button
v - else
class = "ti-link btn btn-outline-success"
round
type = "button"
title = "You are connected swarmlab-hybrid"
@ click = "onAction('shareinfo')"
>
< / button >
< / div >
< div class = "input-group-prepend" >
< button
v - if = "webinterface"
class = "btn btn-outline-success"
round
type = "button"
@ click = "onAction('startweb')"
>
Web < / button >
< button
v - if = "webinterfacegeneric"
class = "btn btn-outline-info"
round
type = "button"
@ click = "onAction('startwebgeneric')"
>
openGui < / button >
< / div >
< div class = "input-group-prepend" >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-success"
round
type = "button"
@ click = "onAction('container-connect')"
>
Connect < / button >
< button
v - else
class = "btn btn-outline-secondary"
round
type = "button"
disabled
>
Connect < / button >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-danger"
round
type = "button"
@ click = "onAction('container-stop')"
>
Stop < / button >
< button
v - else
class = "btn btn-outline-secondary"
round
type = "button"
disabled
>
stop < / button >
< / div >
< div class = "input-group-append" >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-warning"
round
type = "button"
@ click = "onAction('container-logs')"
>
Logs < / button >
< button
v - else
class = "btn btn-outline-secondary"
round
type = "button"
disabled
>
Logs < / button >
< / div >
< / div >
< / div > <!-- col -- >
< div class = "col-1" >
< div class = "input-group input-group-sm sm-3" >
< div class = "input-group-prepend float-center" >
< button
v - if = "webinterfacegenericedit"
class = "btn btn-outline-success"
round
type = "button"
@ click = "onAction('basedireditor')"
>
Editor < / button >
< / div >
< / div >
< / div > <!-- col -- >
< div class = "col-1" >
< / div > <!-- col -- >
< div class = "col-5" >
< div class = "input-group input-group-sm sm-3" >
< div class = "input-group-prepend float-right" >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-info"
round
type = "button"
@ click = "onAction('basedir')"
>
Persistent Data < / button >
< / div >
< div class = "input-group-prepend float-right" >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-warning"
round
type = "button"
@ click = "onAction('basebackup')"
>
Backup < / button >
< / div >
< div class = "input-group-prepend float-right" >
< button
v - if = "hybridshowdata.Names"
class = "btn btn-outline-success"
round
type = "button"
@ click = "onAction('basebackupview')"
>
BrowseBackups < / button >
< / div >
< / div >
< / div > <!-- col -- >
< / div > <!-- row -- >
< / b - c o n t a i n e r >
< b -container fluid >
< div class = "row" >
< div class = "col-2 text-info" >
ID
< / div >
< div class = "col-3 text-secondary" >
{ { hybridshowdata . ID } }
< / div >
< div class = "col-2 text-info" >
Image
< / div >
< div class = "col-4 text-secondary" >
{ { hybridshowdata . Image } }
< / div >
< / div > <!-- row -- >
< div class = "row" >
< div class = "col-2 text-info" >
Names
< / div >
< div class = "col-3 text-secondary" >
{ { hybridshowdata . Names } }
< / div >
< div class = "col-2 text-info" >
RunningFor
< / div >
< div class = "col-4 text-secondary" >
{ { hybridshowdata . RunningFor } }
< / div >
< / div > <!-- row -- >
< div class = "row" >
< div class = "col-2 text-info" >
Status
< / div >
< div class = "col-3 text-secondary" >
{ { hybridshowdata . Status } }
< / div >
< div class = "col-2 text-info" >
CreatedAt
< / div >
< div class = "col-4 text-secondary" >
{ { hybridshowdata . CreatedAt } }
< / div >
< / div > <!-- row -- >
< div class = "row" >
< div class = "col-2 text-info" >
< button
v - if = "hybridshowdata.Networks&&addNetworkMenou==false"
class = "btn btn-outline-info btn-sm"
round
type = "button"
@ click = "addNetwork(hybridshowdata,'on')"
>
Networks < / button >
< button
v - if = "hybridshowdata.Networks&&addNetworkMenou==true"
class = "btn btn-outline-warning btn-sm"
round
type = "button"
@ click = "addNetwork(hybridshowdata,'off')"
>
Networks < / button >
< / div >
< div class = "col-3 text-secondary" >
{ { hybridshowdata . Networks } }
< / div >
< div class = "col-2 text-info" >
Ports
< / div >
< div class = "col-4 text-secondary" >
{ { hybridshowdata . Ports } }
< / div >
< / div > <!-- row -- >
<!--
' { "ID" : "{{ .ID }}" , "Image" : "{{ .Image }}" , "Names" : "{{ .Names }}" , "Ports" : "{{.Ports}}" ,
"Networks" : "{{.Networks}}" , "Status" : "{{.Status}}" , "RunningFor" : "{{.RunningFor}}" , "CreatedAt" : "{{.CreatedAt}}" } '
-- >
< / b - c o n t a i n e r >
<!-- Networks -- >
< div class = "card border-success bg-light mb-3" style = "max-width: 100%;"
v - if = "addNetworkMenou==true"
>
< div class = "card-header" > < / div >
< div class = "card-body text-info" >
< div class = "row" >
< div class = "col-6 text-info" >
< h5 class = "card-title" > Select network < / h5 >
< / div >
< div class = "col-6 text-info" >
Connect a running container to multiple networks
< / div >
< / div >
< div class = "row" >
< div class = "col-6 text-info" >
< b -form -select v-model ="selectedNetworks" :options="localNetworkoptions" multiple :select-size="4" > < / b -form -select >
< div class = "mt-3" > Selected : < strong > { { selectedNetworks } } < / strong > < / div >
< / div >
< div class = "col-6 text-info" >
< img class = "border-white img-thumbnail" src = "@/assets/img/dockernetwork.png" alt = "..." >
< / div >
< / div >
< div class = "row" >
< div class = "col-6 text-info" >
< button
class = "btn btn-outline-warning btn-sm"
round
type = "button"
@ click = "updateNetwork(hybridshowdata,'update')"
>
Update < / button >
< / div >
< / div >
< / div >
< / div >
< / 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" ;
import { ApiConfigGUI } from "@/config/index-gui" ;
import { ApiConfigWEB } from "@/config/index-web" ;
import { ApiConfigEDIT } from "@/config/index-editor" ;
import { extend } from 'vee-validate' ;
import { required , alpha_num } from 'vee-validate/dist/rules' ;
// No message specified.
extend ( 'alpha_num' , alpha_num ) ;
// Override the default message.
extend ( 'required' , {
... required ,
message : 'This field is required'
} ) ;
export default {
components : {
card
} ,
props : {
} ,
data ( ) {
return {
addNetworkMenou : false ,
localNetworks : [ ] ,
selectedNetworks : [ ] ,
localNetworkoptions : [ ] ,
localNetworkdefault : '' ,
webinterface : false ,
webinterfacegeneric : false ,
webinterfacegenericedit : false ,
webinterface_port : '' ,
STATUS : { } ,
CONFIG : {
'status' : '' ,
'workerkey' : '' ,
'swarmlab_public_wgkey' : '' ,
'server_ip' : '' ,
'allowed_ips' : '' ,
'wg_port' : '' ,
'wg_ip' : '' ,
'swarm_ip' : '' ,
'privatekey' : '' ,
'publickey' : '' ,
'workerkey' : '' ,
'privatekey' : '' ,
'publickey' : '' ,
'server_ip' : ''
} ,
CONFIGallowed_ips : '' ,
swarmlabname : 'swarmlab-sec' ,
swarmlabname_port : '' ,
swarmlabname_size : 3 ,
swarmlabname_git : '' ,
// run on
hybridshowdata : { } ,
hybridshowdatashare : { } ,
issocket : 'close' ,
setFilter : { } ,
searchFor : { } ,
resetFilter : { }
}
} ,
beforeMount ( ) {
this . socketopen ( ) ;
this . socketauthenticate ( )
//console.log('send')
} ,
mounted ( ) {
this . $root . $on ( 'hybrid_show_info' , ( data ) => {
this . webinterface = false
this . webinterfacegeneric = false
this . webinterfacegenericedit = false
this . $nextTick ( function ( ) {
this . hybridshowdata = data
var filterju = ` microservice-jupyter `
var grepju = new RegExp ( filterju ) ;
if ( grepju . test ( data . Networks ) && grepju . test ( data . Names ) ) {
this . webinterface = true
this . webinterface_port = data . Ports
console . log ( JSON . stringify ( this . webinterface_port ) )
} else {
this . webinterface = false
this . webinterface_port = ''
}
var urlgeniGUIEDITOR = this . hybridshowdata . Names . split ( '_' ) ;
// EDITOR
for ( var i = 0 ; i < ApiConfigEDIT . length ; i ++ ) {
var obGUIEDIT = ApiConfigEDIT [ i ] ;
if ( obGUIEDIT . name == urlgeniGUIEDITOR [ 0 ] ) {
this . webinterfacegenericedit = true
}
}
var urlgeniGUI = this . hybridshowdata . Names . split ( '_' ) ;
// GUI firefox
for ( var i = 0 ; i < ApiConfigGUI . length ; i ++ ) {
var obGUI = ApiConfigGUI [ i ] ;
if ( obGUI . name == urlgeniGUI [ 0 ] ) {
this . webinterfacegeneric = true
//console.log(obGUI.name);
}
}
/ *
var filterjugeneric = ` microservice-firefox `
var grepju1 = new RegExp ( filterjugeneric ) ;
if ( grepju1 . test ( data . Networks ) && grepju1 . test ( data . Names ) ) {
this . webinterfacegeneric = true
} else {
this . webinterfacegeneric = false
}
* /
this . addNetworkMenou = false
this . localNetworks = [ ]
this . selectedNetworks = [ ]
this . localNetworkoptions = [ ]
this . localNetworkdefault = ''
console . log ( JSON . stringify ( this . hybridshowdata ) )
} )
} )
// from available services socket run here
this . $root . $on ( 'hybrid_start_instance' , ( data ) => {
this . swarmlabname = data . swarmlabname
if ( data . size ) {
this . swarmlabname_size = data . size
}
if ( data . port ) {
this . swarmlabname_port = data . port
}
//console.log('RUN exec '+JSON.stringify(this.swarmlabname))
this . onAction ( 'start' )
} )
this . $root . $on ( 'hybrid_start_instance_storage' , ( data ) => {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . swarmlabname = data . swarmlabname
obj . password = data . password
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'start_storage' , obj ) ;
} )
this . $root . $on ( 'hybrid_start_instance_poc' , ( data ) => {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . swarmlabname = data . swarmlabname
obj . password = data . password
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'start_poc' , obj ) ;
} )
// build
this . $root . $on ( 'SERVER_build_image' , ( obj ) => {
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'build_image' , obj ) ;
} )
this . $root . $on ( 'SERVER_build_vmlist' , ( data ) => {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . kill = 2
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'build_vmlist' , obj ) ;
} )
this . $root . $on ( 'SERVER_build_kill' , ( data ) => {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . kill = data . pid
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'build_kill' , obj ) ;
} )
// from available services socket run here
this . $root . $on ( 'hybrid_install_instance' , ( data ) => {
this . swarmlabname = data . swarmlabname
this . swarmlabname_git = data . git
//this.swarmlabname_port = data.port
this . onAction ( 'install' )
} )
// from available storage socket run here
this . $root . $on ( 'hybrid_install_instance_storage' , ( data ) => {
//this.swarmlabname = data.swarmlabname
//this.swarmlabname_git = data.git
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . swarmlabname = data . swarmlabname
obj . git = data . git
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'installstorage' , obj ) ;
} )
// from available services socket run here
this . $root . $on ( 'hybrid_connect_server' , ( data ) => {
//this.onAction('create-wirequard')
this . $socket . client . emit ( 'get-serverconfig' ) ;
} )
// from available services socket run here
this . $root . $on ( 'hybrid_stop_instance' , ( data ) => {
this . swarmlabname = data
//console.log('RUN exec '+JSON.stringify(this.swarmlabname))
this . onAction ( 'stop' )
} )
// from available storage socket run here
this . $root . $on ( 'hybrid_stop_instance_storage' , ( data ) => {
//this.swarmlabname = data
//console.log('RUN exec '+JSON.stringify(this.swarmlabname))
//this.onAction('stop')
this . $socket . client . emit ( 'stop_storage' , data ) ;
} )
// from available poc socket run here
this . $root . $on ( 'hybrid_stop_instance_poc' , ( data ) => {
//this.swarmlabname = data
//console.log('RUN exec '+JSON.stringify(this.swarmlabname))
//this.onAction('stop')
this . $socket . client . emit ( 'stop_poc' , data ) ;
} )
} ,
created ( ) {
var url_string = window . location . href
var url = new URL ( url_string ) ;
this . token = url . searchParams . get ( "token" ) ;
//console.log("token "+ this.token);
var log = store . dispatch ( "pipelineLLO/settoken" , {
token : this . token
} )
this . socketopen ( ) ;
} ,
beforeDestroy ( ) {
this . $root . $off ( 'hybrid_show_info' )
this . $root . $off ( 'hybrid_start_instance' )
this . $root . $off ( 'hybrid_stop_instance' )
this . $root . $off ( 'hybrid_connect_server' )
this . $root . $off ( 'hybrid_install_instance' )
this . $root . $off ( 'hybrid_install_instance_storage' )
this . $root . $off ( 'SERVER_build_vmlist' )
this . $root . $off ( 'SERVER_build_kill' )
this . $root . $off ( 'SERVER_build_image' )
} ,
computed : {
httpOptions ( ) {
var token = this . token
var p = "headers: {Authorization: token}}" ; //table props -> :http-options="httpOptions"
return { headers : { Authorization : 'Bearer ' + token } } //table props -> :http-options="httpOptions"
} ,
} ,
methods : {
async updateNetwork ( container , action ) {
// console.log(JSON.stringify(container));
// console.log(JSON.stringify('selected :' + this.selectedNetworks));
var log = await store . dispatch ( "pipelineLLO/updatenetworks" , {
networks : this . selectedNetworks ,
defaultnetwork : this . localNetworkdefault ,
container : container . ID
} )
this . $root . $emit ( 'hybrid_refresh_networktable' )
this . hybridshowdata = { }
this . addNetworkMenou = false
this . localNetworks = [ ]
this . selectedNetworks = [ ]
this . localNetworkoptions = [ ]
this . localNetworkdefault = ''
// console.log(JSON.stringify(log.data.data));
} ,
async addNetwork ( container , action ) {
if ( action == 'on' ) {
this . addNetworkMenou = true
var log = await store . dispatch ( "pipelineLLO/getnetworks" , {
instance : container . ID
} )
this . localNetworks = log . data . data
var searchnet = ''
this . localNetworkoptions = [ ]
for ( var i = 0 ; i < this . localNetworks . length ; i ++ ) {
this . localNetworkdefault = this . localNetworks [ i ] . NetworkMode [ 0 ]
var NET = { }
NET . text = this . localNetworks [ i ] . Name
NET . value = this . localNetworks [ i ] . Name
searchnet = new RegExp ( this . localNetworks [ i ] . NetworkMode [ 0 ] ) ;
//console.log(this.localNetworks[i].NetworkMode[0] +' - ' + this.localNetworks[i].Name );
if ( searchnet . test ( this . localNetworks [ i ] . Name ) ) {
NET . disabled = true
} else {
NET . disabled = false
}
this . localNetworkoptions . push ( NET )
}
// console.log(JSON.stringify(this.localNetworks));
} else if ( action == 'off' ) {
this . addNetworkMenou = false
}
// console.log(container);
} ,
async backupAndClose ( result ) {
if ( result . isConfirmed ) {
var log = await store . dispatch ( "pipelineLLO/runbackup" , {
instance : this . hybridshowdata . Names
} )
} else {
console . log ( 'no' )
}
} ,
async onAction ( action ) {
if ( action == 'start' ) {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . swarmlabname = this . swarmlabname
obj . swarmlabname_size = this . swarmlabname_size
obj . swarmlabname_port = this . swarmlabname_port
//this.$socket.client.emit('action', obj);
//this.$socket.client.emit('actionstart', obj);
this . $socket . client . open ( ) ;
//this.$socket.client.emit('start', this.swarmlabname);
this . $socket . client . emit ( 'start' , obj ) ;
//console.log('start ' + JSON.stringify(log))
//console.log('startobj ' + JSON.stringify(obj))
////console.log(this.$socket.client.connect())
} else if ( action == 'basedireditor' ) {
var log = await store . dispatch ( "pipelineLLO/runeditor" , {
instance : this . hybridshowdata . Names
} )
console . log ( 'start editor ' + JSON . stringify ( this . hybridshowdata . Names ) )
} else if ( action == 'basebackupview' ) {
var info = ` <h5><b>Backups</b><br>
< br >
`
info += '<p class="text-secondary">'
info += ' <b>Click on hyperlink opens Directory in new tab</b></p>'
info += '<b> <a class="text-info" href="http://127.0.0.1:3383/" target="_blank">View Backups</a></b>'
info += '<br>'
this . $swal ( {
type : 'Info' ,
title : 'Info!' ,
icon : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
confirmButtonText : 'Ok!'
} )
} else if ( action == 'basebackup' ) {
var info = "Create a full backup of persistent data: <br><br> <p><b>" + this . hybridshowdata . Names
info += "</b></p><br>"
this . $swal ( {
type : 'info' ,
html : info ,
icon : 'info' ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : true ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : false ,
confirmButtonText : 'Yes!'
} ) . then ( ( result ) => {
this . backupAndClose ( result ) ;
} )
} else if ( action == 'basedir' ) {
var log = await store . dispatch ( "pipelineLLO/getmountinfo" , {
instance : this . hybridshowdata . Names
} )
var info = ` <h5><b>Base Directory - Persistent data</b><br>
< br >
`
var myNetworkiservices = this . hybridshowdata . Networks . split ( '_' )
info += '<p class="text-primary">'
info += ' <b>Click on hyperlink opens Directory in new tab</b></p>'
info += ' <table>'
info += '<tr><td><b>Local</b></td><td><i>Container</i></td></tr>'
var datajson = log . data . test [ 0 ]
var extendsearch = new RegExp ( myNetworkiservices [ 0 ] ) ;
var extendsearch1 = new RegExp ( 'sec_bootstrap' ) ;
for ( var i = 0 ; i < datajson . length ; i ++ ) {
if ( datajson [ i ] . Type == 'bind' ) {
if ( extendsearch . test ( datajson [ i ] . Source ) && ! extendsearch1 . test ( datajson [ i ] . Source ) ) {
var basedir1 = datajson [ i ] . Source . indexOf ( myNetworkiservices [ 0 ] ) ;
info += '<tr style="outline: thin solid"><td><b> <a class="text-info" href="http://127.0.0.1:3382/' + datajson [ i ] . Source . slice ( basedir1 ) + '" target="_blank">' + datajson [ i ] . Source + '</a></b></td><td><i>' + datajson [ i ] . Destination + ' </i></td></tr>'
}
}
}
info += ' </table>'
this . $swal ( {
type : 'Info' ,
title : 'Info!' ,
icon : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
confirmButtonText : 'Ok!'
} )
} else if ( action == 'shareinfo' ) {
var openuerlju = 'no'
var search = 'microservice-jupyter'
var extenderror = new RegExp ( search ) ;
if ( extenderror . test ( this . hybridshowdata . Names ) ) {
var log = await store . dispatch ( "pipelineLLO/getjupyterinfo" , {
instance : this . hybridshowdata . Names
} )
if ( log . data . test ) {
//get token
var splitted = log . data . test . split ( '?token=' ) ;
var jutoken = splitted [ 1 ] ;
//cut from home dir
var splitted1 = jutoken . split ( ' ' ) ;
var jutokenok = splitted1 [ 0 ] ;
var juurl = this . webinterface_port . split ( '->' ) ;
// trim it
var juurlok = juurl [ 0 ] . trim ( ) ;
//build url
openuerlju = ` http:// ${ juurlok } /?token= ${ jutokenok } `
}
}
var log = await store . dispatch ( "pipelineLLO/getshareinfo" , {
instance : this . hybridshowdata . Names
} )
//console.log('logsserver1---------- ' + JSON.stringify(log.data.network))
this . hybridshowdatashare = log . data . network
var IP = this . hybridshowdatashare . IPv4Address . split ( '/' ) ;
var search1 = '->'
var search3 = ','
var extenderror1 = new RegExp ( search1 ) ;
var extenderror3 = new RegExp ( search3 ) ;
var info = ''
// url port einai polla
if ( extenderror1 . test ( this . hybridshowdata . Ports ) ) {
try {
if ( extenderror3 . test ( this . hybridshowdata . Ports ) ) {
var PORTSport = this . hybridshowdata . Ports . split ( ',' ) ;
for ( var iaa = 0 ; iaa < PORTSport . length ; iaa ++ ) {
var PORTStmp = PORTSport [ iaa ] . split ( '->' ) ;
var PORTS = PORTSport [ iaa ] . split ( '/' ) ;
if ( openuerlju == 'no' ) {
info += ` <h5>URL: ${ IP [ 0 ] } : ${ PORTS [ 0 ] } </h5> `
} else {
info += ` <h5>URL: ${ IP [ 0 ] } : ${ PORTS [ 0 ] } /?token= ${ jutokenok } </h5> `
}
}
} else {
var PORTStmp = this . hybridshowdata . Ports . split ( '->' ) ;
var PORTS = PORTStmp [ 1 ] . split ( '/' ) ;
var info = ''
if ( openuerlju == 'no' ) {
info = ` <h5>URL: ${ IP [ 0 ] } : ${ PORTS [ 0 ] } </h5> `
} else {
info = ` <h5>URL: ${ IP [ 0 ] } : ${ PORTS [ 0 ] } /?token= ${ jutokenok } </h5> `
}
}
} catch ( e ) {
}
}
this . $swal ( {
title : '<strong>Share info</strong>' ,
type : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false
} )
} else if ( action == 'container-logs' ) {
var log = await store . dispatch ( "pipelineLLO/getlogs" , {
container : this . hybridshowdata . ID
} )
} else if ( action == 'startwebgeneric' ) {
var urlgen = this . hybridshowdata . Names . split ( '_' ) ;
//console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))
//console.log('logs---------- ' + JSON.stringify(urlgen[0]))
var log = await store . dispatch ( "pipelineLLO/rungui" , {
instance : urlgen [ 0 ]
} )
} else if ( action == 'startweb' ) {
var log = await store . dispatch ( "pipelineLLO/getjupyterinfo" , {
instance : this . hybridshowdata . Names
} )
if ( log . data . test ) {
//get token
var splitted = log . data . test . split ( '?token=' ) ;
var jutoken = splitted [ 1 ] ;
//cut from home dir
var splitted1 = jutoken . split ( ' ' ) ;
var jutokenok = splitted1 [ 0 ] ;
var juurl = this . webinterface_port . split ( '->' ) ;
// trim it
var juurlok = juurl [ 0 ] . trim ( ) ;
//build url
var openuerlju = ` http:// ${ juurlok } /?token= ${ jutokenok } `
var info = ` <h5>You can connect to the same contained process multiple times simultaneously, from different sessions.<br>
< br >
< b > Click
< a class = "text-info" href = "${openuerlju}" target = "_blank" > here to open < / a > < / span >
< / b >
< br >
< br >
`
this . $swal ( {
type : 'Info' ,
title : 'Info!' ,
icon : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
confirmButtonText : 'Ok!'
} )
}
} else if ( action == 'container-connect' ) {
var log = await store . dispatch ( "pipelineLLO/getmountinfo" , {
instance : this . hybridshowdata . Names
} )
var pocmypathtmp = log . data . mypath
var container_bash = '/bin/sh'
var container_user = false
var swarmlabinstance = new RegExp ( "^(hybrid-|HYBRID-)" ) ;
if ( swarmlabinstance . test ( this . hybridshowdata . Names ) ) {
container_user = true
container_bash = '/bin/bash'
var container_user_swarmlab = 'docker'
}
// -----
var swarmlabinstance1c = new RegExp ( "(/poc-|/POC-)" ) ;
var pocurl = 'no'
var myNetwork = this . hybridshowdata . Networks . split ( '_' )
var pocmypath = pocmypathtmp + myNetwork [ 0 ]
if ( swarmlabinstance1c . test ( this . hybridshowdata . Image ) ) {
var swarmlabinstance1cd = new RegExp ( "(->)" ) ;
if ( swarmlabinstance1cd . test ( this . hybridshowdata . Ports ) ) {
var splitcd = this . hybridshowdata . Ports . split ( ':' )
var splitcd1 = splitcd [ 1 ] . split ( '-' )
var swarmlabinstance1ce = new RegExp ( "^(web)" ) ;
if ( swarmlabinstance1ce . test ( this . hybridshowdata . Names ) ) {
pocurl = 'http://localhost:' + splitcd1 [ 0 ] + '/?token=' + this . token
}
}
}
// -----
var swarmlabinstance1ca = new RegExp ( "(microservice-codeserver)" ) ;
var pocurlcodeserver = 'no'
if ( swarmlabinstance1ca . test ( this . hybridshowdata . Names ) ) {
var swarmlabinstance1cda = new RegExp ( "(->)" ) ;
if ( swarmlabinstance1cda . test ( this . hybridshowdata . Ports ) ) {
var splitcda = this . hybridshowdata . Ports . split ( ':' )
var splitcd1a = splitcda [ 1 ] . split ( '-' )
pocurlcodeserver = 'http://localhost:' + splitcd1a [ 0 ] + '/?token=' + this . token
}
}
//console.log('stringify--------- ' + JSON.stringify(pocurlcodeserver));
// -----
var swarmlabinstance = new RegExp ( "^(hybrid-|HYBRID-)" ) ;
if ( swarmlabinstance . test ( this . hybridshowdata . Names ) ) {
container_user = true
container_bash = '/bin/bash'
var container_user_swarmlab = 'docker'
}
//var Localpath = JSON.parse(log.data.test)
var info = ` <h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<br>
< br >
< b > Open a terminal and Run * : < / b >
< br >
< br >
`
if ( container_user ) {
info += '<p class="text-success">'
info += 'docker exec -it -u' + container_user_swarmlab + ' ' + this . hybridshowdata . Names + ' ' + container_bash
info += '</p>'
} else {
info += '<p class="text-success">'
info += 'docker exec -it ' + this . hybridshowdata . Names + ' ' + container_bash
info += '</p>'
}
if ( pocurl != 'no' ) {
info += '<p class="text-info">'
info += '<a href="' + pocurl + '" target="_blank">Click here to open the Web_App</a>'
info += '</p>'
}
if ( pocurlcodeserver != 'no' ) {
info += '<p class="text-info">'
info += '<a href="' + pocurlcodeserver + '" target="_blank">Click here to open the Web_App</a>'
info += '</p>'
}
var urlgenWEB = this . hybridshowdata . Names . split ( '_' ) ;
console . log ( 'urlgenWEB ' + urlgenWEB )
var pocurletherpadserver = 'no'
for ( var i = 0 ; i < ApiConfigWEB . length ; i ++ ) {
var obWEB = ApiConfigWEB [ i ] ;
if ( obWEB . name == urlgenWEB [ 0 ] ) {
var swarmlabinstance1cda1 = new RegExp ( "(->)" ) ;
if ( swarmlabinstance1cda1 . test ( this . hybridshowdata . Ports ) ) {
var splitcda1 = this . hybridshowdata . Ports . split ( ':' )
var splitcd1a1 = splitcda1 [ 1 ] . split ( '-' )
pocurletherpadserver = obWEB . url + '://localhost:' + splitcd1a1 [ 0 ] + '/?token=' + this . token
}
}
}
// -----
/ *
var swarmlabinstance1ca1 = new RegExp ( "(microservice-etherpad)" ) ;
var pocurletherpadserver = 'no'
if ( swarmlabinstance1ca1 . test ( this . hybridshowdata . Names ) ) {
var swarmlabinstance1cda1 = new RegExp ( "(->)" ) ;
if ( swarmlabinstance1cda1 . test ( this . hybridshowdata . Ports ) ) {
var splitcda1 = this . hybridshowdata . Ports . split ( ':' )
var splitcd1a1 = splitcda1 [ 1 ] . split ( '-' )
pocurletherpadserver = 'http://localhost:' + splitcd1a1 [ 0 ] + '/?token=' + this . token
}
}
* /
if ( pocurletherpadserver != 'no' ) {
info += '<p class="text-info">'
info += '<a href="' + pocurletherpadserver + '" target="_blank">Click here to open the Web_App</a>'
info += '</p>'
}
// -----
var pocmypathinfo = ''
if ( pocmypath != '' ) {
pocmypathinfo += '<b>Project BaseDir:</b> ' + pocmypath
}
info += '<p class="text-secondary">'
info += ' <b>Directory Maps</b>'
info += '<br>'
info += ' <table>'
info += '<tr><td><b>Local</b></td><td><i>Container</i></td></tr>'
var datajson = log . data . test [ 0 ]
for ( var i = 0 ; i < datajson . length ; i ++ ) {
//console.log('test1 '+JSON.stringify(datajson[i]))
if ( datajson [ i ] . Type == 'bind' ) {
info += '<tr style="outline: thin solid"><td><b>' + datajson [ i ] . Source + ' </b></td><td><i>' + datajson [ i ] . Destination + ' </i></td></tr>'
}
}
info += ' </table>'
info += '</p>'
info += pocmypathinfo
info += '</h5><br>'
info += '<br>'
info += '<b>*</b> App with GUI: xhost +local:docker <br>'
info += '<br>'
info += 'This permits the docker user on the local machine to connect to X windows display.<br>'
//console.log('test1 '+JSON.stringify(this.hybridshowdata))
this . $swal ( {
type : 'Info' ,
title : 'Info!' ,
icon : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
confirmButtonText : 'Ok!'
} )
} else if ( action == 'install' ) {
var obj = { }
obj . action = 'up'
obj . token = this . token
obj . swarmlabname = this . swarmlabname
obj . git = this . swarmlabname_git
this . $socket . client . open ( ) ;
this . $socket . client . emit ( 'install' , obj ) ;
} else if ( action == 'container-stop' ) {
// refresh adhocview.vue on console await
this . $root . $emit ( 'SERVER_hybrid_table_start' )
this . $socket . client . emit ( 'container-stop' , this . swarmlabname , this . hybridshowdata . ID ) ;
} else if ( action == 'create-wirequard' ) {
//this.CONFIGprivatekey = value.privatekey
//this.CONFIGpublickey = value.publickey
//this.CONFIGserver_ip = value.server_ip // 83.212.77.133:51820
//this.CONFIGallowed_ips = value.allowed_ips // 10.13.13.0/16, 0.0.0.0/0, ::/0
this . $socket . client . emit ( 'create-wirequard' , this . token ) ;
} else if ( action == 'stop' ) {
this . $socket . client . emit ( 'stop' , this . swarmlabname ) ;
}
} ,
async socketopen ( ) {
this . $socket . client . open ( ) ;
this . $socket . client . connect ( ) ;
} ,
async socketauthenticate ( ) {
this . $socket . client . emit ( 'authenticate' , this . token ) ;
} ,
async socketreconnect ( ) {
var log = await this . socketopen ( )
this . socketauthenticate ( )
} ,
async socketclose ( ) {
this . $socket . client . close ( ) ;
}
} ,
/ * *
*
* == Socket events
*
* [ source , javascript ]
* -- --
* this . $socket . client . emit ( 'authenticate' , 'logintoken' ) ;
* -- --
*
* /
sockets : {
connect ( ) {
//this.$socket.client.emit('authenticate', this.token);
//console.log('socket connected '+ 'socketdatasend' )
this . issocket = 'open' ;
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'open'
} )
} ,
/ * *
*
* === onError
*
* /
error ( error ) {
//console.log("socket error "+JSON.stringify(error))
this . issocket = 'close'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'close'
} )
} ,
/ * *
*
* === connect_error
*
* /
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 ( )
} ,
/ * *
*
* === connect_error
*
* /
disconnect ( reason ) {
//console.log("socket disconnect "+JSON.stringify(reason))
this . issocket = 'close'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'close'
} )
this . socketreconnect ( )
} ,
/ * *
*
* === Socket connect_timeout
*
* /
connect_timeout ( reason ) {
//console.log("socket timeout "+JSON.stringify(reason))
this . issocket = 'close'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'close'
} )
this . socketreconnect ( )
} ,
/ * *
*
* === Socket reconnect
*
* /
reconnect ( attemptNumber ) {
//console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber))
this . socketreconnect ( )
} ,
/ * *
*
* === connect_attempt
*
* /
reconnect_attempt ( attemptNumber ) {
//console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber))
this . socketreconnect ( )
} ,
/ * *
*
* === Socket reconnecting
*
* /
reconnecting ( attemptNumber ) {
//console.log("socket reconnecting "+JSON.stringify(attemptNumber))
this . socketreconnect ( )
} ,
/ * *
*
* === reconnect_error
*
* /
reconnect_error ( error ) {
//console.log("socket reconnect_error "+JSON.stringify(error))
this . issocket = 'close'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'close'
} )
this . socketreconnect ( )
} ,
/ * *
*
* === unauthorized
*
* /
unauthorized ( val ) {
//console.log("socket unauthorized "+JSON.stringify(val))
this . issocket = 'close'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'close'
} )
} ,
/ * *
*
* === connected
*
* /
socket_id_emit ( val ) {
//console.log("socket id from server "+JSON.stringify(val))
this . issocket = 'open'
var log = store . dispatch ( "pipelineLLO/setsocketStatus" , {
status : 'open'
} )
} ,
/ * *
*
* === Socket onMessage
*
* /
/ *
async adhocEmit ( val ) {
//console.log("socket from server "+JSON.stringify(val))
this . issocket = 'open'
//this.$wait.start('myRunInstance1');
// render begin
this . tryLLO = 'on'
if ( this . firstbootstrap === 0 ) {
await this . bootsrapllo ( ) ;
this . firstbootstrap = 1
}
var output = log . data . out
var mydinfunction = `
< div class = "row" >
< b -col class = "" cols = "12" sm = "12" md = "12" >
$ { output }
< / b - c o l >
< / div > `
try {
let divascii = document . createElement ( 'div' ) ;
divascii . setAttribute ( "class" , "container-fluid w-100 p-3 llotry" )
divascii . innerHTML = mydinfunction
this . addtask ( divascii ) ;
} catch ( ex ) {
//console.log(" logi error1 "+JSON.stringify(ex))
return
}
//this.$wait.end('myRunInstance1');
} ,
* /
async logdata ( val ) {
//console.log(" socket from logdata "+JSON.stringify(val))
// -------------------------------------
// Save store
// -------------------------------------
var log = store . dispatch ( "pipelineLLO/addlog" , {
log : val
} )
var ltmp = store . getters [ 'pipelineLLO/getlog' ] ;
this . log_path = [ ... new Set ( ltmp . map ( item => item . tailed_path ) ) ] ;
var loglenght = ''
for ( let item of this . log_path ) {
//console.log('l1find '+ JSON.stringify(item))
loglenght = ltmp . filter ( item1 => item1 . tailed_path === item ) . length ;
Vue . set ( this . log_path_lenght , item , loglenght ) ;
if ( loglenght > this . loglenghttotal ) {
// -------------------------------------
// Save store
// -------------------------------------
var ltotal1 = store . dispatch ( "pipelineLLO/taillog" , {
path : item
} )
}
}
} ,
async message ( val ) {
//console.log(" socket message "+JSON.stringify(val))
} ,
async message_config ( value ) {
value . data = JSON . parse ( value . data ) ;
if ( value . file == 'ok' ) {
//console.log('server-value-file-ok ' + JSON.stringify(value.data.status))
this . CONFIG . status = value . data . status
this . CONFIG . workerkey = value . data . workerkey
this . CONFIG . swarmlab_public_wgkey = value . data . swarmlab_public_wgkey
this . CONFIG . server_ip = value . data . server_ip
this . CONFIG . allowed_ips = value . data . allowed_ips
this . CONFIG . wg_port = value . data . wg_port
this . CONFIG . wg_ip = value . data . wg_ip
this . CONFIG . swarm_ip = value . data . swarm_ip
this . CONFIG . privatekey = value . data . privatekey
this . CONFIG . publickey = value . data . publickey
} else if ( value . file == 'nodata' ) {
this . CONFIG . status = ''
this . CONFIG . workerkey = ''
this . CONFIG . swarmlab_public_wgkey = ''
this . CONFIG . server_ip = ''
this . CONFIG . allowed_ips = ''
this . CONFIG . wg_port = ''
this . CONFIG . wg_ip = ''
this . CONFIG . swarm_ip = ''
this . CONFIG . privatekey = ''
this . CONFIG . publickey = ''
}
// send to myconnect-server.vue
//console.log('server-config ' + JSON.stringify(this.CONFIG))
store . dispatch ( "pipelineLLO/addconfig" , this . CONFIG )
this . $root . $emit ( 'hybrid_connect_server_view' , this . CONFIG )
} ,
async message_log ( val ) {
//console.log(" socket out "+JSON.stringify(val))
this . $root . $emit ( 'hybrid_log_in' , val )
// refresh adhocview.vue on console await
//this.$root.$emit('SERVER_hybrid_table_start')
// clear container info here sockert end
//this.hybridshowdata = {}
} ,
async message_out ( val ) {
console . log ( " socket out " + JSON . stringify ( val ) )
//search for error in mongoserver must run sudo chown
this . $root . $emit ( 'hybrid_log_in' , val )
// refresh adhocview.vue on console await
this . $root . $emit ( 'SERVER_hybrid_table_start' )
// clear container info here sockert end
this . hybridshowdata = { }
} ,
async message_err ( val ) {
console . log ( " socket err " + JSON . stringify ( val ) )
var extenderror = new RegExp ( 'error checking context' ) ;
if ( extenderror . test ( val . data ) ) {
var cwdpath = val . cwdpath
var cwdservice = val . service
//console.log(" path "+JSON.stringify(cwdpath))
//console.log(" path-------- "+JSON.stringify(val))
var errorrun = "<b>error checking context:</b> 'no permission to read from '... ./src-local/instance/microservice-mongoserver/microservice-mongoserver/data/WiredTiger'"
var info = ` <h5><b>You might see an error message:</b></h5><br>
< samp > $ { errorrun } < / samp >
< br >
< br >
< b > In this case open Open a terminal and Run : < / b >
< br >
< br > `
info += '<p class="text-success">'
info += 'sudo chown -R $USER.$USER ' + cwdpath + '/instance/' + cwdservice + '/' + cwdservice + '/data'
info += '</p>'
info += '<br> <br> <b>and try again</b> <br>'
this . $swal ( {
type : 'info' ,
html : info ,
icon : 'info' ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
} )
}
this . $root . $emit ( 'hybrid_log_in' , val )
} ,
async message_close ( val ) {
console . log ( " socket close " + JSON . stringify ( val ) )
// Error in event handler for "hybrid_log_in": "TypeError: child is undefined"
// data: 0 gia na doume ean ine afto
// to lathos exafanistike
if ( val . data != 0 ) {
this . $root . $emit ( 'hybrid_log_in' , val )
}
// refresh table availableservices
this . $root . $emit ( 'hybrid_refresh_table' )
// refresh adhocview.vue on console await console
this . $root . $emit ( 'SERVER_hybrid_table_stop' )
} ,
async message_err_storage ( val ) {
//console.log(" socket err "+JSON.stringify(val))
this . $root . $emit ( 'hybrid_log_in' , val )
} ,
async message_out_storage ( val ) {
// console.log(" socket out storage "+JSON.stringify(val))
this . $root . $emit ( 'hybrid_log_in' , val )
//this.hybridshowdata = {}
} ,
async message_close_storage ( val ) {
// refresh table hybrid storage
this . $root . $emit ( 'hybrid_log_in' , val )
this . $root . $emit ( 'hybrid_refresh_table_storage' )
} ,
// poc
async message_err_poc ( val ) {
//console.log(" socket err "+JSON.stringify(val))
this . $root . $emit ( 'hybrid_log_in' , val )
} ,
async message_out_poc ( val ) {
// console.log(" socket out storage "+JSON.stringify(val))
this . $root . $emit ( 'hybrid_log_in' , val )
//this.hybridshowdata = {}
} ,
async message_close_poc ( val ) {
// refresh table hybrid storage
this . $root . $emit ( 'hybrid_log_in' , val )
this . $root . $emit ( 'hybrid_refresh_table_poc' )
} ,
async message_close_build ( val ) {
// refresh table hybrid storage
this . $root . $emit ( 'SERVER_build_closebuild' , val )
//this.$root.$emit('hybrid_refresh_table_storage')
} ,
async build_set_sshpid ( val ) {
// console.log(" socket pid "+JSON.stringify(val))
this . $root . $emit ( 'SERVER_build_set_sshpid' , val )
} ,
async build_set_buildpid ( val ) {
// console.log(" socket pid "+JSON.stringify(val))
this . $root . $emit ( 'SERVER_build_set_buildpid' , val )
} ,
async message_hybrid_status ( val ) {
var obj = { }
obj . status = val
var res1 = store . dispatch ( 'pipelineLLO/setstatus' , obj )
this . $root . $emit ( 'hybrid_server_status' , val )
//message_hybrid_status {"data":{"swarmlab":"active","hybrid":"Online","swarmlabid":"z3abo50tks76alp7ubjos4ngz"}}
this . STATUS . swarmlabid = val . data . swarmlabid
this . STATUS . hybrid = val . data . hybrid
this . STATUS . swarmlab = val . data . swarmlab
store . dispatch ( "pipelineLLO/addstatusswarmlab" , this . STATUS )
}
} ,
actions : {
}
} ;
< / script >
< style lang = "scss" >
. 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 >