add builders 1

4 years ago · 4cfc530fc3
20 changed files with 2768 additions and 733 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 .DS_Store
 node_modules
 src-local/instance/
+src-local/builders/
 src-local/hybrid/connect/
 src-local/hybrid/keys.json
 src-local/logs
--- a/dist/css/app.10423c10.css
+++ b/dist/css/app.10423c10.css
--- a/dist/index.html
+++ b/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>
--- a/dist/js/app.9bdd4243.js
+++ b/dist/js/app.9bdd4243.js
--- a/dist/js/app.9bdd4243.js.map
+++ b/dist/js/app.9bdd4243.js.map
--- a/dist/js/app.de882020.js
+++ b/dist/js/app.de882020.js
--- a/dist/js/app.de882020.js.map
+++ b/dist/js/app.de882020.js.map
--- a/install.sh
+++ b/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-base-ca		$wdir/src-local/hybrid/connect/get-base-ca
 	mkdir -p $wdir/src-local/instance
+	mkdir -p $wdir/src-local/builders

 cat << FOE > $wdir/src-local/ecosystem.config.js
 module.exports = {
--- a/src-local/builders-update.sh
+++ b/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
--- a/src-local/builders/bento-swarmlab
+++ b/src-local/builders/bento-swarmlab
@ -0,0 +1 @@
+Subproject commit 00608a32bd57f24ef78500458e700c1fb5bafc0c
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@ -9,6 +9,9 @@ var app = express();
 const cors = require('cors')
 const helmet = require('helmet');

+const { Client } = require('ssh2');
+const sshconnect = new Client();
+
 var allowedOrigins = [ 
      'https://localhost:55543', 
      '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(helmet());

@ -87,15 +113,17 @@ const { spawn, exec, execSync } = require('child_process')
 //const logout = fs.openSync('./logs/out.log', 'a');
 //const logerr = fs.openSync('./logs/out.log', 'a');

-//const watcher = chokidar.watch('./logs/out.log', { persistent: true });
-//const Tail = require('nodejs-tail');
-//const tail = new Tail('./logs/out.log');
-//tail.watch();
-//      tail.on('line', (line) => {
-//        var n = {}
-//        n.data = line
-//        io.emit('message_out', n);
-//      })
+const logerribuild = fs.openSync('./logs/build-out.log', 'a');
+
+//const watcher = chokidar.watch('./logs/build-out.log', { persistent: true });
+const Tail = require('nodejs-tail');
+const tail = new Tail('./logs/build-out.log');
+tail.watch();
+      tail.on('line', (line) => {
+        var n = {}
+        n.data = line
+        io.emit('message_log', n);
+      })
 /*
 watcher
  .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) => {

 				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', () => {
        //console.log(ppid)
        //process.kill(ppid, 'SIGHUP');
--- a/src-local/package-lock.json
+++ b/src-local/package-lock.json
--- a/src-local/package.json
+++ b/src-local/package.json
@ -15,13 +15,15 @@
    "express": "^4.17.1",
    "helmet": "^4.1.1",
    "https": "^1.0.0",
+    "node-ssh": "^11.1.1",
    "nodejs-tail": "^1.1.1",
    "pm2": "^4.5.1",
    "read-last-lines": "^1.7.2",
-    "socket.io": "^3.0.4",
    "simple-git": "^2.31.0",
+    "socket.io": "^3.0.4",
    "socket.io-client": "^3.0.4",
    "socketio-auth": "^0.1.1",
+    "ssh2": "^0.8.9",
    "url-exist-sync": "^1.0.2",
    "utf-8-validate": "^5.0.3"
  }
--- a/src-local/start-server.sh
+++ b/src-local/start-server.sh
@ -45,3 +45,9 @@ if [ ! -d 'LabLearningObject-hybrid-tmp' ]; then
 	mkdir LabLearningObject-hybrid-tmp
 fi

+if [ ! -d 'builders' ]; then
+	mkdir builders
+fi
+
+/bin/bash ./builders-update.sh https://git.swarmlab.io:3000/swarmlab/bento-swarmlab.git bento-swarmlab
+
--- a/src/App.vue
+++ b/src/App.vue
@ -246,7 +246,7 @@


    <!-- 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-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-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 -->
 			 <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 -->
-			 <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-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-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 -->
 			 <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 builders       --------------- -->
+					<!-- ----------------------------------- -->
+             <manage-builders
+               :key="componentKeybuilders"
+                  v-show="hybridmenou == 'builders'"
+                style="background-color: #f8f9fa"
+              >
+             </manage-builders>
+					<!-- ----------------------------------- -->
+					<!-- ------  hybrid manage builders      --------------- -->
+					<!-- ----------------------------------- -->
+
 					<!-- ----------------------------------- -->
 					<!-- ------  hybrid private deploy       --------------- -->
 					<!-- ----------------------------------- -->
@ -542,6 +587,7 @@ import ServicesTable from "./components/myservices.vue";
 import ManageServices from "./components/manageservices.vue";
 import ManageStorage from "./components/mystorage.vue";
 import ManageMicroservices from "./components/mymicroservices.vue";
+import ManageBuilders from "./components/mybuild.vue";
 import ManageDeploy from "./components/managedeploy.vue";
 import ManageLlo from "./components/managello.vue";
 import ViewDashboard from "./components/dashboard.vue";
@ -556,6 +602,7 @@ export default {
    ManageServices,
    ManageStorage,
    ManageMicroservices,
+    ManageBuilders,
    ManageDeploy,
    ManageLlo
  },
@ -566,6 +613,7 @@ export default {
      componentKeyreload1:1,
      componentKeyreload2:1,
      componentKeyreload3:1,
+      componentKeybuilders:1,
 			setStatusAgent:'',
      issocket:false, //socket server
 			isconnect:false,  // dockerswarm wg
@ -634,6 +682,8 @@ export default {
            this.componentKeyreload += 1
            this.componentKeyreload1 += 1
            this.componentKeyreload2 += 1
+            this.componentKeyreload3 += 1
+            this.componentKeybuilders += 1
        }
      },
 			async serverstatus(action){
--- a/src/components/mybuild.vue
+++ b/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>
+
--- a/src/components/mynetwork/AdhocView.vue
+++ b/src/components/mynetwork/AdhocView.vue
@ -381,9 +381,19 @@ export default {
    // from runLLO
 		this.$root.$on('hybrid_log_in', (log) => {
               //this.code += JSON.stringify(log)
-               this.code += log.data
-               this.code += "\n"
-               console.log(" form socket log "+JSON.stringify(this.code))
+               //this.code += log.data
+               //this.code += "\n"
+               //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);
        //var extenderror = /hello/;
        var extenderror = new RegExp('max depth exceeded'); 
--- a/src/components/mynetwork/builderservices.vue
+++ b/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>
--- a/src/components/mynetwork/mybuilder.vue
+++ b/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>
--- a/src/components/mynetwork/mytable.vue
+++ b/src/components/mynetwork/mytable.vue
@ -328,6 +328,27 @@ export default {
              this.$socket.client.open();
              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
 		this.$root.$on('hybrid_install_instance', (data) => {
      this.swarmlabname = data.swarmlabname
@ -384,6 +405,9 @@ export default {
 		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() {
@ -396,8 +420,8 @@ export default {

  methods: {
 			async updateNetwork(container,action){
-          console.log(JSON.stringify(container));
-          console.log(JSON.stringify('selected :' + this.selectedNetworks));
+         // 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,
@ -410,7 +434,7 @@ export default {
 					 this.selectedNetworks = []
 					 this.localNetworkoptions = []
 					 this.localNetworkdefault = ''
-          console.log(JSON.stringify(log.data.data));
+         // console.log(JSON.stringify(log.data.data));
 			},
 			async addNetwork(container,action){
        if(action == 'on'){
@ -437,11 +461,11 @@ export default {

                    this.localNetworkoptions.push(NET)
 							}
-          console.log(JSON.stringify(this.localNetworks));
+         // console.log(JSON.stringify(this.localNetworks));
 				}else if(action == 'off'){
        	this.addNetworkMenou = false
 				}
-        console.log(container);
+       // console.log(container);
      },
 			async onAction(action){
        if(action == 'start'){
@ -463,7 +487,7 @@ export default {
 							var log = await store.dispatch("pipelineLLO/getlogs",{
 								container:this.hybridshowdata.ID
 							})
-               console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
+              // console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
          }else if(action == 'container-connect'){
              var log = await store.dispatch("pipelineLLO/getmountinfo",{
                instance:this.hybridshowdata.Names
@ -478,7 +502,7 @@ export default {
                    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 info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<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)
 		     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))
        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)
          },
        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.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_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) {
                var obj = {}
                obj.status = val
			`@ -0,0 +1 @@`
			`Subproject commit 00608a32bd57f24ef78500458e700c1fb5bafc0c`