You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
430 lines
15 KiB
430 lines
15 KiB
<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">
|
|
<button
|
|
class="ti-widget btn btn-outline-info"
|
|
round
|
|
type="button"
|
|
title="Save config"
|
|
@click="onAction('save')"
|
|
> Save Settings
|
|
</button>
|
|
</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-container>
|
|
</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> <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 100px;
|
|
}
|
|
.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.3s, opacity 0.4s;
|
|
}
|
|
.list-item {
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
|
|
}
|
|
.list-enter-active {
|
|
transition: transform 0.2s ease-in, opacity 0.4s ease-in;
|
|
}
|
|
.list-leave-active {
|
|
transition: transform 1s ease-out, opacity 0.4s 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: 1px solid blue;
|
|
//white-space: pre-line;
|
|
}
|
|
|
|
</style>
|
|
|