Browse Source

add builders 1

master
zeus 4 years ago
parent
commit
4cfc530fc3
  1. 1
      .gitignore
  2. 2
      dist/css/app.10423c10.css
  3. 2
      dist/index.html
  4. 2
      dist/js/app.9bdd4243.js
  5. 1
      dist/js/app.9bdd4243.js.map
  6. 2
      dist/js/app.de882020.js
  7. 1
      dist/js/app.de882020.js.map
  8. 1
      install.sh
  9. 16
      src-local/builders-update.sh
  10. 1
      src-local/builders/bento-swarmlab
  11. 405
      src-local/llo/new.js
  12. 1790
      src-local/package-lock.json
  13. 4
      src-local/package.json
  14. 6
      src-local/start-server.sh
  15. 54
      src/App.vue
  16. 62
      src/components/mybuild.vue
  17. 16
      src/components/mynetwork/AdhocView.vue
  18. 501
      src/components/mynetwork/builderservices.vue
  19. 589
      src/components/mynetwork/mybuilder.vue
  20. 61
      src/components/mynetwork/mytable.vue

1
.gitignore

@ -1,6 +1,7 @@
.DS_Store .DS_Store
node_modules node_modules
src-local/instance/ src-local/instance/
src-local/builders/
src-local/hybrid/connect/ src-local/hybrid/connect/
src-local/hybrid/keys.json src-local/hybrid/keys.json
src-local/logs src-local/logs

2
dist/css/app.53b4e610.css → dist/css/app.10423c10.css

File diff suppressed because one or more lines are too long

2
dist/index.html

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.53b4e610.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.9bdd4243.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.53b4e610.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.9bdd4243.js"></script></body></html> <!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.10423c10.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.de882020.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.10423c10.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.de882020.js"></script></body></html>

2
dist/js/app.9bdd4243.js

File diff suppressed because one or more lines are too long

1
dist/js/app.9bdd4243.js.map

File diff suppressed because one or more lines are too long

2
dist/js/app.de882020.js

File diff suppressed because one or more lines are too long

1
dist/js/app.de882020.js.map

File diff suppressed because one or more lines are too long

1
install.sh

@ -219,6 +219,7 @@ if [ $toolsok == 'ok' ];then
cp -f $wdir/files/get-swarmlab-ca $wdir/src-local/hybrid/connect/get-swarmlab-ca 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
mkdir -p $wdir/src-local/instance mkdir -p $wdir/src-local/instance
mkdir -p $wdir/src-local/builders
cat << FOE > $wdir/src-local/ecosystem.config.js cat << FOE > $wdir/src-local/ecosystem.config.js
module.exports = { module.exports = {

16
src-local/builders-update.sh

@ -0,0 +1,16 @@
#!/bin/sh
REPOSRC=$1
LOCALREPO=$2
# We do it this way so that we can abstract if from just git later on
LOCALREPO_VC_DIR=$LOCALREPO/.git
cd builders
if [ ! -d $LOCALREPO_VC_DIR ]
then
git clone $REPOSRC $LOCALREPO
else
cd $LOCALREPO
git pull $REPOSRC
fi

1
src-local/builders/bento-swarmlab

@ -0,0 +1 @@
Subproject commit 00608a32bd57f24ef78500458e700c1fb5bafc0c

405
src-local/llo/new.js

@ -9,6 +9,9 @@ var app = express();
const cors = require('cors') const cors = require('cors')
const helmet = require('helmet'); const helmet = require('helmet');
const { Client } = require('ssh2');
const sshconnect = new Client();
var allowedOrigins = [ var allowedOrigins = [
'https://localhost:55543', 'https://localhost:55543',
'http://localhost:3080', 'http://localhost:3080',
@ -29,7 +32,30 @@ origin: function(origin, callback){ // allow requests with no origin
} }
})); }));
// GLOBAL
global.SSHPID = []; // running pid ssh
function killProcess(pid) {
console.log("KILL "+pid);
// kill proccess gia ssh pid
//check pid se poion aniki
var conn = global.SSHPID[pid]
console.log(conn);
conn.end();
}
function killBuildProcess(pid) {
try {
process.kill(-pid);
return true;
} catch(e) {
return false;
}
}
function checkpid(arr, val) {
return arr.some(arrVal => val === arrVal);
}
//app.use(cors) //app.use(cors)
//app.use(helmet()); //app.use(helmet());
@ -87,15 +113,17 @@ const { spawn, exec, execSync } = require('child_process')
//const logout = fs.openSync('./logs/out.log', 'a'); //const logout = fs.openSync('./logs/out.log', 'a');
//const logerr = fs.openSync('./logs/out.log', 'a'); //const logerr = fs.openSync('./logs/out.log', 'a');
//const watcher = chokidar.watch('./logs/out.log', { persistent: true }); const logerribuild = fs.openSync('./logs/build-out.log', 'a');
//const Tail = require('nodejs-tail');
//const tail = new Tail('./logs/out.log'); //const watcher = chokidar.watch('./logs/build-out.log', { persistent: true });
//tail.watch(); const Tail = require('nodejs-tail');
// tail.on('line', (line) => { const tail = new Tail('./logs/build-out.log');
// var n = {} tail.watch();
// n.data = line tail.on('line', (line) => {
// io.emit('message_out', n); var n = {}
// }) n.data = line
io.emit('message_log', n);
})
/* /*
watcher watcher
.on('add', path => { .on('add', path => {
@ -611,6 +639,106 @@ app.get('/dockerservices', (req, res, next) => {
}); });
app.get('/buildservices', (req, res, next) => {
var mypath = process.cwd()
var RES = new Object();
const page = req.query["page"]
const per_page = req.query["per_page"]
var sort = req.query["sort"]
var filter = req.query["filter"]
var type = req.query["type"]
var sort = req.query["sort"]
var sorttmp1 = sort.split('|');
var sortname = sorttmp1[0];
var sortorder = sorttmp1[1];
//var showexec = `jq . -s ${mypath}/builders/bento-swarmlab/builds.json`
var showexec = `jq -s '.[] .Images' ${mypath}/builders/bento-swarmlab/builds.json`
//var showexec = `jq -s '.[]' ${mypath}/builders/bento-swarmlab/builds.json`
exec(showexec, (err, stdout, stderr) => {
if (err) {
console.error(`exec error: ${err}`);
return;
}
var nn = []
var string = stdout.toString()
var datajson = JSON.parse(string);
var results = []
if(filter !== 'NULL'){
var grep = new RegExp(filter);
var datalenth = datajson.length
for (var i=0 ; i < datalenth ; i++)
{
if(grep.test(datajson[i]['name'])){
results.push(datajson[i]);
}
}
datajson=results
}
var total = datajson.length;
var perpage = per_page
var lastpage = total/perpage;
if(lastpage <= 1) {
lastpage=1
}else{
lastpage++
}
lastpage = Math.trunc(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 = `
{
"pagination": {
"total": ${total},
"per_page": ${perpage},
"current_page": ${page},
"last_page": ${lastpage},
"next_page_url": "?page=${next}",
"prev_page_url": "?page=${prev}",
"from": ${from},
"to": ${to},
"frommongo": ${from},
"tomongo": ${to}
}
}
`
myplaybooks.links = JSON.parse(links);
from--
myplaybooks.data = datajson.slice(from,to);
var RES = new Object();
RES.code = req.query["action"]
RES.token = req.query["token"]
RES.error = false
RES.error_msg = "ok"
RES.data = myplaybooks;
res.json(RES.data)
});
});
app.get('/getservicesinfo', (req, res, next) => { app.get('/getservicesinfo', (req, res, next) => {
var RES = new Object(); var RES = new Object();
@ -1769,6 +1897,265 @@ SSH_PORT=
}); });
}); });
// ------------------------------------
// ----------------- build buildimage build_image command
// ------------------------------------
socket.on('build_image', (option) => {
console.log("run_buildimage")
console.log(JSON.stringify(option))
var mypath = process.cwd()
var buildoutdir = `${mypath}/logs/build-out.log`
var builderrdir = `${mypath}/logs/build-out.log`
var image_name = option.name
var image_dir = option.dir
var image_config = option.config
var image_file_vbox = image_config.slice(0, -5);
var virtualbox = `${mypath}/builders/bento-swarmlab/builds/${image_name}.virtualbox.box`
var virtualboxhome = `${process.env.HOME}/VirtualBox VMs/${image_file_vbox}/${image_file_vbox}.vbox`
var virtualboxhome1 = `'${process.env.HOME}/VirtualBox VMs/${image_file_vbox}/${image_file_vbox}.vbox'`
//"homefile":"/home/zeus/VirtualBox VMs/ubuntu-/ubuntu-.vbox"
mypath = `${mypath}/builders/bento-swarmlab/${image_dir}`
const buildout = fs.openSync(buildoutdir, 'a');
const builderr = fs.openSync(builderrdir, 'a');
var buildimage = `echo "EXEC PID: $$"; packer build -force -only=virtualbox-iso ${image_config}`
const run_buildimage = spawn(buildimage, {
detached: true,
//stdio: 'pipe',
shell: true,
stdio: [ 'ignore', buildout, builderr ],
cwd: mypath
});
var n = {}
n.pid = run_buildimage.pid
//set pid on client for later use e.g. kill
io.emit('build_set_buildpid', n);
n.data = 'start ...'
io.emit('message_out', n);
run_buildimage.on('exit', (data) => {
console.log('exit '+data);
//set pid on server for later use e.g. kill
//var n = {}
//n.pid = line.substr(10).trim()
//set pid on client for later use e.g. kill
//io.emit('build_set_sshpid', n);
var n = {}
n.data = 'exit!'
io.emit('message_close', n);
});
run_buildimage.on('close', (data) => {
console.log('close '+data);
//set pid on server for later use e.g. kill
//var n = {}
//n.pid = line.substr(10).trim()
//set pid on client for later use e.g. kill
//io.emit('build_set_sshpid', n);
var n = {}
n.data = 'close!'
io.emit('message_close', n);
n.name = image_name
n.dir = image_dir
if (fs.existsSync(virtualbox)) {
n.build = 'ok'
n.file = virtualbox
}else{
n.build = 'no'
n.file = 'false'
}
io.emit('message_close_build', n);
// if file exists
if (fs.existsSync(virtualboxhome)) {
n.homefile = virtualboxhome1
n.homefile_exist = 'yes'
io.emit('message_close_build', n);
}else{
n.homefile = 'false'
n.homefile_exist = 'no'
io.emit('message_close_build', n);
}
});
console.log(run_buildimage.pid);
run_buildimage.unref();
/*
var n1 = {}
n1.data = 'exit!'
n1.build = 'ok'
n1.name = image_name
n1.dir = image_dir
n1.homefile = virtualboxhome
n1.file = 'filetest'
io.emit('message_close_build', n1);
*/
//var spawn = require('child_process').spawn;
//var child = spawn('my-command', {detached: true});
//process.kill(-child.pid);
/*
run_buildimage.stdout.on('data', function (data) {
var n = {}
n.data = data.toString()
io.emit('message_out', n);
});
run_buildimage.stderr.on('data', function (data) {
var n = {}
n.data = data.toString()
io.emit('message_err', n);
//io.end();
});
run_buildimage.on('close', function (code) {
var n = {}
n.data = code
io.emit('message_close', n);
});
*/
});
// ------------------------------------
// ----------------- ssh connect and run command
// ------------------------------------
socket.on('build_vmlist', (option) => {
console.log("list")
var mypath = process.cwd()
sshconnect.on('connect', function() {
console.log('Connection :: connect');
});
sshconnect.on('ready', function() {
console.log('Connection :: ready');
sshconnect.exec('echo "EXEC PID: $$";/mytools/test-ping.sh', (err, stream) => {
if (err) throw err;
stream.on('close', (code, signal) => {
console.log('Stream :: close :: code: ' + code + ', signal: ' + signal);
var n = {}
n.data = 'close'
io.emit('message_close', n);
sshconnect.end();
}).on('data', (data) => {
var line = '' + data; // unbeautiful ;)
console.log(line);
if(line.substr(0, 10) === 'EXEC PID: ') {
console.log('PID1: ' + line.substr(10));
var sshpid1 = line.substr(10).trim();
//set pid on server for later use e.g. kill
global.SSHPID[sshpid1] = sshconnect
var n = {}
n.pid = line.substr(10).trim()
//set pid on client for later use e.g. kill
io.emit('build_set_sshpid', n);
}
console.log('STDOUT: ' + data);
var n = {}
n.data = data.toString('utf8')
io.emit('message_out', n);
}).stderr.on('data', (data) => {
console.log('STDERR: ' + data);
var n = {}
n.data = 'close'
io.emit('message_out', n);
io.emit('message_err', n);
io.emit('message_close', n);
});
});
});
sshconnect.on('error', function(err) {
console.log('Connection :: error :: ' + err);
var n = {}
n.data = 'close'
io.emit('message_out', n);
io.emit('message_err', n);
io.emit('message_close', n);
});
sshconnect.on('end', function() {
console.log('Connection :: end');
var n = {}
n.data = 'close'
io.emit('message_out', n);
io.emit('message_close', n);
});
sshconnect.on('close', function(had_error) {
console.log('Connection :: close');
var n = {}
n.data = 'close'
io.emit('message_out', n);
io.emit('message_close', n);
});
sshconnect.on('keyboard-interactive', function(name, instructions, instructionsLang, prompts, finish) {
console.log('Connection :: keyboard-interactive');
finish(['my_password_on_remote_machine']);
});
sshconnect.connect({
host: '195.130.109.82',
port: 22,
username: 'zeus',
tryKeyboard: true,
privateKey: fs.readFileSync('./hybrid/connect/zeus-esxikey', 'utf8')
});
});
// ------------------------------------
// ----------------- ssh connect and kill ssh command
// ------------------------------------
/*
// for ssh withoud detach
socket.on('build_kill', (option) => {
var KILL = option.kill.trim()
killProcess(KILL);
var n = {}
n.data = 'KILL '+KILL
io.emit('message_out', n);
io.emit('message_close', n);
});
*/
// for build with detach
socket.on('build_kill', (option) => {
var KILL = option.kill
if(option.kill){
if(KILL == process.pid || KILL == 0){
}else{
killBuildProcess(KILL)
}
//process.kill(-KILL);
var n = {}
n.data = 'KILL '+KILL
io.emit('message_out', n);
io.emit('message_close', n);
}else{
var n = {}
n.data = 'KILL false '
io.emit('message_out', n);
io.emit('message_close', n);
}
});
// ------------------------------------
// ----------------- ssh connect and run command
// ------------------------------------
socket.on('kill', () => { socket.on('kill', () => {
//console.log(ppid) //console.log(ppid)
//process.kill(ppid, 'SIGHUP'); //process.kill(ppid, 'SIGHUP');

1790
src-local/package-lock.json

File diff suppressed because it is too large

4
src-local/package.json

@ -15,13 +15,15 @@
"express": "^4.17.1", "express": "^4.17.1",
"helmet": "^4.1.1", "helmet": "^4.1.1",
"https": "^1.0.0", "https": "^1.0.0",
"node-ssh": "^11.1.1",
"nodejs-tail": "^1.1.1", "nodejs-tail": "^1.1.1",
"pm2": "^4.5.1", "pm2": "^4.5.1",
"read-last-lines": "^1.7.2", "read-last-lines": "^1.7.2",
"socket.io": "^3.0.4",
"simple-git": "^2.31.0", "simple-git": "^2.31.0",
"socket.io": "^3.0.4",
"socket.io-client": "^3.0.4", "socket.io-client": "^3.0.4",
"socketio-auth": "^0.1.1", "socketio-auth": "^0.1.1",
"ssh2": "^0.8.9",
"url-exist-sync": "^1.0.2", "url-exist-sync": "^1.0.2",
"utf-8-validate": "^5.0.3" "utf-8-validate": "^5.0.3"
} }

6
src-local/start-server.sh

@ -45,3 +45,9 @@ if [ ! -d 'LabLearningObject-hybrid-tmp' ]; then
mkdir LabLearningObject-hybrid-tmp mkdir LabLearningObject-hybrid-tmp
fi fi
if [ ! -d 'builders' ]; then
mkdir builders
fi
/bin/bash ./builders-update.sh https://git.swarmlab.io:3000/swarmlab/bento-swarmlab.git bento-swarmlab

54
src/App.vue

@ -246,7 +246,7 @@
<!-- Menou container --> <!-- 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-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')" > Instances</b-list-group-item>
<b-collapse id="hybrid-container" class="m-subm" accordion="m-sidebar" role="tabpanel"> <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-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>
@ -262,6 +262,20 @@
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item> <b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item>
</b-collapse> </b-collapse>
<!-- Menou builders -->
<b-list-group-item v-b-toggle.hybrid-builders variant="light" name="Private" class="ti-layers-alt list-group-item list-group-item-action" v-on:click="setActive('builders','')" style="cursor: pointer;" :class="{ active: isActive('builders') }" @click="hybrid('builders')" > Builders</b-list-group-item>
<b-collapse id="hybrid-builders" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="build_vmware" class=" ti-folder m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('builders','hybrid_builders')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_builders') }" @click="hybrid('builders')"> VM</b-list-group-item>
<b-list-group-item variant="light" name="build_docker" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('builders','hybrid_docker')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_docker') }" @click="hybrid('build_docker')"> Docker</b-list-group-item>
</b-collapse>
<!-- Menou llo --> <!-- Menou llo -->
<b-list-group-item v-b-toggle.hybrid-llo variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" > LearningObjects</b-list-group-item> <b-list-group-item v-b-toggle.hybrid-llo variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" > LearningObjects</b-list-group-item>
@ -314,7 +328,7 @@
<!-- Menou container --> <!-- Menou container -->
<b-list-group-item v-b-toggle.hybrid-container1 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-list-group-item v-b-toggle.hybrid-container1 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="Instances"> </b-list-group-item>
<b-collapse id="hybrid-container1" class="m-subm" accordion="m-sidebar" role="tabpanel"> <b-collapse id="hybrid-container1" 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-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>
@ -330,6 +344,24 @@
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item> <b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item>
</b-collapse> </b-collapse>
<!-- Menou builders -->
<b-list-group-item v-b-toggle.hybrid-builders variant="light" name="Private" class="ti-layers-alt list-group-item list-group-item-action" v-on:click="setActive('builders','')" style="cursor: pointer;" :class="{ active: isActive('builders') }" @click="hybrid('builders')" title="Builders" > </b-list-group-item>
<b-collapse id="hybrid-builders" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="build_vmware" class=" ti-folder m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('builders','hybrid_builders')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_builders') }" @click="hybrid('builders')" title="Build VM"> </b-list-group-item>
<b-list-group-item variant="light" name="build_docker" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('builders','hybrid_docker')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_docker') }" @click="hybrid('build_docker')" title="Build Docker"> </b-list-group-item>
</b-collapse>
<!-- Menou llo --> <!-- Menou llo -->
<b-list-group-item v-b-toggle.hybrid-llo1 variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" title="LearningObjects" > </b-list-group-item> <b-list-group-item v-b-toggle.hybrid-llo1 variant="light" name="Llo" class="ti-book list-group-item list-group-item-action" v-on:click="setActive('llo','')" style="cursor: pointer;" :class="{ active: isActive('llo') }" @click="hybrid('llo')" title="LearningObjects" > </b-list-group-item>
@ -452,6 +484,19 @@
<!-- ------ hybrid manage microservices --------------- --> <!-- ------ hybrid manage microservices --------------- -->
<!-- ----------------------------------- --> <!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid manage builders --------------- -->
<!-- ----------------------------------- -->
<manage-builders
:key="componentKeybuilders"
v-show="hybridmenou == 'builders'"
style="background-color: #f8f9fa"
>
</manage-builders>
<!-- ----------------------------------- -->
<!-- ------ hybrid manage builders --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- --> <!-- ----------------------------------- -->
<!-- ------ hybrid private deploy --------------- --> <!-- ------ hybrid private deploy --------------- -->
<!-- ----------------------------------- --> <!-- ----------------------------------- -->
@ -542,6 +587,7 @@ import ServicesTable from "./components/myservices.vue";
import ManageServices from "./components/manageservices.vue"; import ManageServices from "./components/manageservices.vue";
import ManageStorage from "./components/mystorage.vue"; import ManageStorage from "./components/mystorage.vue";
import ManageMicroservices from "./components/mymicroservices.vue"; import ManageMicroservices from "./components/mymicroservices.vue";
import ManageBuilders from "./components/mybuild.vue";
import ManageDeploy from "./components/managedeploy.vue"; import ManageDeploy from "./components/managedeploy.vue";
import ManageLlo from "./components/managello.vue"; import ManageLlo from "./components/managello.vue";
import ViewDashboard from "./components/dashboard.vue"; import ViewDashboard from "./components/dashboard.vue";
@ -556,6 +602,7 @@ export default {
ManageServices, ManageServices,
ManageStorage, ManageStorage,
ManageMicroservices, ManageMicroservices,
ManageBuilders,
ManageDeploy, ManageDeploy,
ManageLlo ManageLlo
}, },
@ -566,6 +613,7 @@ export default {
componentKeyreload1:1, componentKeyreload1:1,
componentKeyreload2:1, componentKeyreload2:1,
componentKeyreload3:1, componentKeyreload3:1,
componentKeybuilders:1,
setStatusAgent:'', setStatusAgent:'',
issocket:false, //socket server issocket:false, //socket server
isconnect:false, // dockerswarm wg isconnect:false, // dockerswarm wg
@ -634,6 +682,8 @@ export default {
this.componentKeyreload += 1 this.componentKeyreload += 1
this.componentKeyreload1 += 1 this.componentKeyreload1 += 1
this.componentKeyreload2 += 1 this.componentKeyreload2 += 1
this.componentKeyreload3 += 1
this.componentKeybuilders += 1
} }
}, },
async serverstatus(action){ async serverstatus(action){

62
src/components/mybuild.vue

@ -0,0 +1,62 @@
<template>
<card class="card-user" style="max-height:100%">
<div class="row" >
<div class="col-7 order-first " >
<br>
<view-network>
</view-network>
<builder-services>
</builder-services>
</div>
<div class="col-5 order-last" >
<br>
<adhoc-view>
</adhoc-view>
</div>
</div>
</card>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
import ViewNetwork from "./mynetwork/mybuilder.vue";
import AdhocView from "./mynetwork/AdhocView.vue";
import BuilderServices from "./mynetwork/builderservices.vue";
import card from '@/components/Card.vue'
//import AvailableServices from "./mynetwork/availableservices.vue";
export default {
components: {
ViewNetwork,
AdhocView,
card,
BuilderServices
// AvailableServices
},
data () {
return {
loading: false,
consoleView: 'off',
productIndex: 1
}
},
mounted() {
},
beforeDestroy () {
},
created () {
}
};
</script>
<style>
</style>

16
src/components/mynetwork/AdhocView.vue

@ -381,9 +381,19 @@ export default {
// from runLLO // from runLLO
this.$root.$on('hybrid_log_in', (log) => { this.$root.$on('hybrid_log_in', (log) => {
//this.code += JSON.stringify(log) //this.code += JSON.stringify(log)
this.code += log.data //this.code += log.data
this.code += "\n" //this.code += "\n"
console.log(" form socket log "+JSON.stringify(this.code)) //console.log(" form socket log "+JSON.stringify(this.code))
var doc = this.$refs.myCm.codemirror.getDoc();
var cursor = doc.getCursor(); // gets the line number in the cursor position
//console.log(" form socket log "+JSON.stringify(cursor))
var line = doc.getLine(cursor.line); // get the line contents
var pos = { // create a new object to avoid mutation of the original selection
line: cursor.line,
ch: line.length - 1 // set the character position to the end of the line
}
doc.replaceRange(log.data, pos); // adds a new line
doc.replaceRange("\n", pos); // adds a new line
this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0); this.$refs.myCm.codemirror.setCursor(this.$refs.myCm.codemirror.lineCount(), 0);
//var extenderror = /hello/; //var extenderror = /hello/;
var extenderror = new RegExp('max depth exceeded'); var extenderror = new RegExp('max depth exceeded');

501
src/components/mynetwork/builderservices.vue

@ -0,0 +1,501 @@
<template>
<card class="card-user" style="max-height:100%">
<v-wait for="myRunInstancetutor">
<template slot="waiting">
<div>
<img src="@/assets/loading.gif" />
Enter Lab_room...
</div>
</template>
</v-wait>
<b-container fluid class="bv-example-row">
<div class="input-group input-group-sm sm-3">
<div class="input-group-append">
<button
class="btn btn-outline-info"
round
type="button"
@click="setRefresh">
Refresh table</button>
</div>
<input type="text"
class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
placeholder="Search by Name"
v-model="searchFor"
@keyup.enter="setFilter"
>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
round
type="button"
@click="setFilter">
Go</button>
</div>
<div class="input-group-append">
<button class="btn btn-outline-secondary"
round
type="button"
@click="resetFilter">
Reset</button>
</div>
</div>
<div class="white h-100 flex-fixed-width-item"
<vuetable
ref="vuetable"
:key="vuetablekey"
:api-url='apiurl'
:api-mode="true"
:http-options="httpOptions"
:fields="fields"
:item-actions="itemActions"
:sort-order="sortOrder"
:show-sort-icons="true"
:multi-sort="multiSort"
:per-page="perpage"
pagination-path="links.pagination"
:pagination-component="paginationComponent"
:append-params="moreParams"
wrapper-class="vuetable-wrapper"
loading-class="loading"
detail-row-id="id"
@vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError"
:css="css.table"
>
<div slot="actions" slot-scope="props">
<button
v-if="actionrowindex == props.rowIndex"
class="ti-more-alt btn btn-secondary btn-sm"
round
@click="onAction('run-more', props.rowData, props.rowIndex)">
</button>
<button
v-else
class="ti-more btn btn-outline-secondary btn-sm"
round
@click="onAction('run-more', props.rowData, props.rowIndex)">
</button>
</div>
<div slot="actionslocal" slot-scope="props">
<div class="d-flex justify-content-center">
<button
v-if="build_file[props.rowData.name] == props.rowData.name"
class="ti-trash btn btn-info btn-sm"
title="Remove Lab_Instance"
@click="onAction('view-item', props.rowData, props.rowIndex)"
round
>
</button>
</div>
</div>
</vuetable>
<div class="vuetable-pagination ui basic segment grid">
<vuetable-pagination-info
ref="paginationInfo"
:css="css.paginationInfo"
>
</vuetable-pagination-info>
<vuetable-pagination
:css="css.pagination"
ref="pagination"
@vuetable-pagination:change-page="onChangePage"
>
</vuetable-pagination>
</div>
</div>
</b-container>
</card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
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,
VuetablePaginationDropdown
},
props: {
},
data() {
return{
actionrowindex:'',
playbookInfo: {},
token: '',
build_file :{},
playbook: {
'title':'',
'name':'',
'description':''
},
container:{
name:'',
view:0
},
pipeline:{},
selected: 'hybrid',
options: [
{ text: 'Packages', value: 'packages' },
{ text: 'Images', value: 'images' },
{ text: 'Scripts', value: 'scripts' }
],
showModal: false,
visibility: [],
active:false,
vuetablekey:0,
fielddata:{},
fields: [
{
name: 'name',
title: '<span class="orange"></span>Name',
sortField: 'name',
visible:true,
dataClass: 'text-left text-wrap text-break break-word',
width: '65%'
},
{
name: 'Image',
title: '<span class="orange"></span>Image',
//sortField: 'Image',
visible:false,
dataClass: 'left aligned w-25',
width: '15%',
formatter (value) {
const result = /^ondemand_playground/.test(value);
if (result) {
var v = '<p class="text-warning">Playground</p>'
return v
}else{
var v = '<p class="text-info">Lab</p>'
return v
}
}
},
{
name: '_id',
title: '<span class="orange"></span>mongo',
visible:false
},
{
name: 'Status',
title: '<span class="orange"></span>Status',
sortField: 'Status',
titleClass: 'center aligned',
visible:true,
width: '10%'
},
{
name: 'ID',
sortField: 'ID',
titleClass: 'center aligned',
dataClass: 'left aligned w-25',
visible:false,
width: '15%'
},
{
name: '__slot:actionslocal', // <----
title: 'Box',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{
name: '__slot:actions', // <----
title: 'Actions',
titleClass: 'center aligned',
dataClass: 'center aligned',
width: '5%'
},
],
apiurl:ApiConfig.url_80+"/buildservices",
//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
css: CssConfig,
perpage: 5,
searchFor: '',
sortOrder: [{
field: 'name',
direction: 'asc'
}],
multiSort: true,
paginationComponent: 'vuetable-pagination',
itemActions: [
{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
],
moreParams: {
'filter': '',
'type': 'scripts',
'tutor': 'yes'
},
}
},
mounted() {
this.$root.$on('SERVER_build_close_build', (v) => {
console.log('build from server '+JSON.stringify(v))
if(v.build == "ok" && v.file !== 'false'){
Vue.set(this.build_file, v.name, v.name)
// this.$set(this.user, 'last_name', 'Doe')
console.log('build ok '+JSON.stringify(this.build_file))
}else{
Vue.delete(this.build_file, v.name)
console.log('build no '+JSON.stringify(this.build_file))
}
if( v.homefile_exist == 'yes'){
console.log('build no '+JSON.stringify(v.homefile))
var info = `
<b-container fluid>
<div class="row text-center">
<div class="col-12">
<h5> <b>File exists</b> </h5>
<h5> Error: You cannot Create a VM that already exists.</h5>
<h5> Please rename or remove the file and Retry </h5>
<p class="mb-1 list-group-item list-group-item-success">
${v.homefile}
</p>
</div> <!-- col -->
</div> <!-- row -->
</b-container fluid>
`
this.$swal({
type: 'info',
html: info,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'ok! '
})
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
})
},
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('SERVER_build_close_build')
},
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: {
onError (type,description) {
var winfo=description
var info='<h5>Bootstrap '+type+'</h5>'
this.$swal({
type: type,
html: info+winfo,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
})
},
setRefresh () {
this.moreParams = {
'filter': '',
'type': this.selected
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
setFilter () {
this.moreParams = {
'filter': this.searchFor,
'type': this.selected
}
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
resetFilter () {
this.moreParams = {}
this.searchFor = ''
Vue.nextTick( () => this.$refs.vuetable.refresh())
},
onPaginationData (paginationData) {
this.$refs.pagination.setPaginationData(paginationData)
this.$refs.paginationInfo.setPaginationData(paginationData)
},
onChangePage (page) {
this.$refs.vuetable.changePage(page)
},
editRow(rowData) {
alert("You clicked edit on"+ JSON.stringify(rowData));
},
async onAction (action, data, index) {
this.actionrowindex = index
var obj = {}
obj.name = data.name
obj.dir = data.dir
obj.config = data.config
this.$root.$emit('BUILD_hybrid_show_info',data)
console.log('index '+this.actionrowindex)
console.log('data '+JSON.stringify(obj))
if(action == 'view-item' ){
console.log('data' + JSON.stringify(data))
console.log('index '+JSON.stringify(index))
console.log('build info '+JSON.stringify(this.build_file))
}else if(action == 'delete-item' ){
this.$swal({
type: 'info',
html: info+winfo,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Yes, Delete it!'
})
}else if(action == 'run-item' ){
}
},
refreshVuetable() {
this.$nextTick(()=>{
this.vuetablekey += 1
})
},
playbookinfoShow(value) {
return this.visibility[value]=true
},
playbookinfo(value) {
return this.playbookInfo=value
},
rowClicked(row, event) {
return {
html: true,
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
}
},
loadsuccess(response) {
var data = response.data.data
this.fielddata=data
var n = data.length
n=n-1
},
onLoadError(payload) {
/*
//error2 "invalid_token" join-service.vue:684
//error2 "The access token provided has expired" join-service.vue:685
//error2 "Unauthorized" join-service.vue:686
//error2 401
console.log('error2 '+JSON.stringify(payload.response.data.error))
console.log('error2 '+JSON.stringify(payload.response.data.error_description))
console.log('error2 '+JSON.stringify(payload.response.statusText))
console.log('error2 '+JSON.stringify(payload.response.status))
*/
if(payload.response.status == '401'){
window.location.href = 'https://api-login.swarmlab.io:8089';
Vue.nextTick( () => window.location.href = 'https://api-login.swarmlab.io:8089')
}
}
},
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>

589
src/components/mynetwork/mybuilder.vue

@ -0,0 +1,589 @@
<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 builds</b>
</div>
</div>
<br>
<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"
disabled
>
</button>
</div>
<div class="input-group-prepend">
<!--
<button
class="btn btn-outline-success"
round
type="button"
@click="onAction('start')"
>
Start</button>
-->
</div>
<div class="input-group-prepend">
<button
v-if="hybridshowdata.name"
class="btn btn-outline-success"
round
type="button"
@click="onAction('container-build')"
>
Build</button>
<button
v-if="hybridshowdata.name"
class="btn btn-outline-secondary ti-info"
round
type="button"
@click="onAction('container-build-info')"
>
</button>
<button
v-else
class="btn btn-outline-secondary"
round
type="button"
disabled
>
Connect</button>
<button
class="btn btn-outline-danger"
round
type="button"
@click="onAction('container-stop')"
>
Stop</button>
</div>
<div class="input-group-append">
</div>
</div>
</b-container>
<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.name }}
</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-container>
<!-- 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 { 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,
selectedNetworks:[],
localNetworkoptions:[],
localNetworkdefault:'',
STATUS:{},
CONFIG:{
'status':'',
'workerkey':'',
'swarmlab_public_wgkey':'',
'server_ip':'',
'allowed_ips':'',
'wg_port':'',
'wg_ip':'',
'swarm_ip':'',
'privatekey':'',
'publickey':'',
'workerkey':'',
'privatekey':'',
'publickey':'',
'server_ip':''
},
sshpid:0,
buildpid:0,
CONFIGallowed_ips:'',
swarmlabname:'swarmlab-sec',
swarmlabname_port:'',
swarmlabname_size:3,
swarmlabname_git:'',
// run on
hybridshowdata:{},
issocket:'close',
setFilter: {},
searchFor: {},
resetFilter: {}
}
},
beforeMount () {
this.socketopen();
this.socketauthenticate()
//console.log('send')
},
mounted() {
// this.$root.$on('SERVER_build_set_sshpid', (data) => {
// this.sshpid = data.pid
// })
this.$root.$on('SERVER_build_set_buildpid', (data) => {
this.buildpid = data.pid
})
this.$root.$on('BUILD_hybrid_show_info', (data) => {
this.$nextTick(function () {
this.hybridshowdata = data
this.addNetworkMenou = false
this.selectedNetworks = []
this.localNetworkoptions = []
this.localNetworkdefault = ''
//console.log(JSON.stringify(this.hybridshowdata))
})
})
},
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('BUILD_hybrid_show_info')
this.$root.$off('SERVER_build_set_buildpid')
//this.$root.$off('SERVER_build_set_sshpid')
},
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 onAction(action){
if(action == 'container-logs'){
//this.$socket.client.open();
//this.$socket.client.emit('build-vmlist', 'test');
//this.$root.$emit('SERVER_build_vmlist')
console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))
}else if(action == 'container-build-info'){
var info = `
<b-container fluid>
<div class="row text-center">
<div class="col-12">
<h4><b>Tips and caveats</b></h4>
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Install software</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-info">
<b>Vagrant, Packer</b> and <b>VirtualBox</b> must be installed
</p>
<p class="mb-1 list-group-item list-group-item-info">
You can find installation instructions <a href="https://git.swarmlab.io:3000/swarmlab/swarmlab-build-install" target="new">here</a>
</p>
</div> <!-- list -->
</div> <!-- col -->
</div> <!-- row -->
</b-container fluid>
`
this.$swal({
type: 'info',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'ok! '
})
}else if(action == 'container-build'){
var info = `
<b-container fluid>
<div class="row text-center">
<div class="col-12">
<h4><b>Tips and caveats</b></h4>
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Disk space</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-info">
You need to run Builder on a machine with a <b>lot of free disk space</b> (sometimes 50 GB or more). <br> The installation media, VM(s) and box(es) take considerable amounts of space, at least temporarily.
</p>
</div> <!-- list -->
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Time</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-info">
Building a box <b>can easily take several hours</b>, most notably because installing OS updates is time-consuming.
</p>
</div> <!-- list -->
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Incompatibilities</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-info">
Beware of version incompatibilities of hypervisors.
<small class="text-left list-group-item list-group-item-info">
For example a box built with VirtualBox 6.0 refusing to run on VirtualBox 5.<br>
</small>
If in doubt, deliberately use older hypervisor versions on the build machine.
</p>
</div> <!-- list -->
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Output</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-success">
The output of a successful build is a .box file.
</p>
</div> <!-- list -->
<div class="list-group">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1"><b>Install software</b></h5>
</div>
<p class="mb-1 list-group-item list-group-item-success">
With ansible you can install additional software into the box,
</p>
</div> <!-- list -->
</div> <!-- col -->
</div> <!-- row -->
</b-container fluid>
`
this.$swal({
type: 'info',
html: info,
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Create the box! '
}).then((result)=> {
this.buildAndClose(result);
})
}else if(action == 'container-stop'){
var obj = {}
obj.pid = this.buildpid
console.log('PID '+ this.buildpid)
this.$root.$emit('SERVER_build_kill',obj)
}else if(action == 'stop'){
this.$socket.client.emit('stop', this.swarmlabname);
}
},
async buildAndClose(result){
var obj = {}
obj.name = this.hybridshowdata.name
obj.dir = this.hybridshowdata.dir
obj.config = this.hybridshowdata.config
console.log('value result '+ JSON.stringify(result))
console.log('value obj '+ JSON.stringify(obj))
if (result.isConfirmed) {
console.log('yes')
this.$root.$emit('SERVER_build_image',obj)
// run on mytable.vue
//refresh table
//this.$root.$emit('hybrid_stop_instance', value)
var info = `
<b-container fluid>
<div class="row text-center">
<div class="col-12">
<p class="mb-1 list-group-item list-group-item-success">
You can track the pending box creation from the embeded console or the graphical interface that will open.
</p>
<p class="mb-1 list-group-item list-group-item-info">
There will also be a spinny wheel above the console indicating work in proccess.
</p>
<p class="mb-1 list-group-item list-group-item-success">
Please note that closing the window(graphical) WILL NOT terminate the process.
</p>
<p class="mb-1 list-group-item list-group-item-info">
If you wish to forcefully stop you should use the STOP button.
</p>
<p class="mb-1 list-group-item list-group-item-success">
Note that the stop operation itself may take a little time.
</p>
<p class="mb-1 list-group-item list-group-item-light">
When the proccess is done you should see something like this:
<br>
==> Builds finished. The artifacts of successful builds are:
<br>
--> virtualbox-iso: 'virtualbox' provider box: ../../builds/ubuntu-18.04.virtualbox.box
<br>
Build 'virtualbox-iso' finished after 1 hour 30 minutes 28 seconds
</p>
</div> <!-- col -->
</div> <!-- row -->
</b-container fluid>
`
this.$swal({
type: 'info',
html: info,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'ok! '
})
}else {
console.log('no')
}
},
},
actions: {
}
};
</script>
<style lang="scss">
.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>

61
src/components/mynetwork/mytable.vue

@ -328,6 +328,27 @@ export default {
this.$socket.client.open(); this.$socket.client.open();
this.$socket.client.emit('start_storage', obj); this.$socket.client.emit('start_storage', 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 // from available services socket run here
this.$root.$on('hybrid_install_instance', (data) => { this.$root.$on('hybrid_install_instance', (data) => {
this.swarmlabname = data.swarmlabname this.swarmlabname = data.swarmlabname
@ -384,6 +405,9 @@ export default {
this.$root.$off('hybrid_connect_server') this.$root.$off('hybrid_connect_server')
this.$root.$off('hybrid_install_instance') this.$root.$off('hybrid_install_instance')
this.$root.$off('hybrid_install_instance_storage') 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: { computed: {
httpOptions() { httpOptions() {
@ -396,8 +420,8 @@ export default {
methods: { methods: {
async updateNetwork(container,action){ async updateNetwork(container,action){
console.log(JSON.stringify(container)); // console.log(JSON.stringify(container));
console.log(JSON.stringify('selected :' + this.selectedNetworks)); // console.log(JSON.stringify('selected :' + this.selectedNetworks));
var log = await store.dispatch("pipelineLLO/updatenetworks",{ var log = await store.dispatch("pipelineLLO/updatenetworks",{
networks:this.selectedNetworks, networks:this.selectedNetworks,
defaultnetwork:this.localNetworkdefault, defaultnetwork:this.localNetworkdefault,
@ -410,7 +434,7 @@ export default {
this.selectedNetworks = [] this.selectedNetworks = []
this.localNetworkoptions = [] this.localNetworkoptions = []
this.localNetworkdefault = '' this.localNetworkdefault = ''
console.log(JSON.stringify(log.data.data)); // console.log(JSON.stringify(log.data.data));
}, },
async addNetwork(container,action){ async addNetwork(container,action){
if(action == 'on'){ if(action == 'on'){
@ -437,11 +461,11 @@ export default {
this.localNetworkoptions.push(NET) this.localNetworkoptions.push(NET)
} }
console.log(JSON.stringify(this.localNetworks)); // console.log(JSON.stringify(this.localNetworks));
}else if(action == 'off'){ }else if(action == 'off'){
this.addNetworkMenou = false this.addNetworkMenou = false
} }
console.log(container); // console.log(container);
}, },
async onAction(action){ async onAction(action){
if(action == 'start'){ if(action == 'start'){
@ -463,7 +487,7 @@ export default {
var log = await store.dispatch("pipelineLLO/getlogs",{ var log = await store.dispatch("pipelineLLO/getlogs",{
container:this.hybridshowdata.ID container:this.hybridshowdata.ID
}) })
console.log('logs---------- ' + JSON.stringify(this.hybridshowdata)) // console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))
}else if(action == 'container-connect'){ }else if(action == 'container-connect'){
var log = await store.dispatch("pipelineLLO/getmountinfo",{ var log = await store.dispatch("pipelineLLO/getmountinfo",{
instance:this.hybridshowdata.Names instance:this.hybridshowdata.Names
@ -478,7 +502,7 @@ export default {
var container_user_swarmlab = 'docker' var container_user_swarmlab = 'docker'
} }
console.log('log---------- ' + JSON.stringify(this.hybridshowdata)) // console.log('log---------- ' + JSON.stringify(this.hybridshowdata))
//var Localpath = JSON.parse(log.data.test) //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> var info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<br>
<br> <br>
@ -804,6 +828,14 @@ info +='This permits the docker user on the local machine to connect to X window
store.dispatch("pipelineLLO/addconfig",this.CONFIG) store.dispatch("pipelineLLO/addconfig",this.CONFIG)
this.$root.$emit('hybrid_connect_server_view', 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) { async message_out(val) {
//console.log(" socket out "+JSON.stringify(val)) //console.log(" socket out "+JSON.stringify(val))
this.$root.$emit('hybrid_log_in',val) this.$root.$emit('hybrid_log_in',val)
@ -829,7 +861,7 @@ info +='This permits the docker user on the local machine to connect to X window
this.$root.$emit('hybrid_log_in',val) this.$root.$emit('hybrid_log_in',val)
}, },
async message_out_storage(val) { async message_out_storage(val) {
console.log(" socket out storage "+JSON.stringify(val)) // console.log(" socket out storage "+JSON.stringify(val))
this.$root.$emit('hybrid_log_in',val) this.$root.$emit('hybrid_log_in',val)
//this.hybridshowdata = {} //this.hybridshowdata = {}
}, },
@ -838,6 +870,19 @@ info +='This permits the docker user on the local machine to connect to X window
this.$root.$emit('hybrid_log_in',val) this.$root.$emit('hybrid_log_in',val)
this.$root.$emit('hybrid_refresh_table_storage') this.$root.$emit('hybrid_refresh_table_storage')
}, },
async message_close_build(val) {
// refresh table hybrid storage
this.$root.$emit('SERVER_build_close_build',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) { async message_hybrid_status(val) {
var obj = {} var obj = {}
obj.status = val obj.status = val

Loading…
Cancel
Save