add custom

.gitignore

@@ -18,6 +18,8 @@ viwsession/
 testfilemanager/
 README-update
 
+src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm
+
 swarmlabdoc.js
 swarmlabdoc.asciidoc_config
 package-lock.json

run.yml

@@ -119,6 +119,7 @@ services:
     volumes:
      - /lib/modules:/lib/modules
      - ${nodepath}/src-local/instance:/instance
+     - ${nodepath}/src-local/community:/community
 
 networks:
   hybrid-net:

src-local/community/config/rootapostolos-mytest1.js

@@ -0,0 +1,17 @@
+{
+  "servicedata": {
+       "service": "mytest1",
+       "baseservice": "microservice-ipterm",
+       "user": "rootapostolos@swarmlab.io",
+       "port1": "8081",
+       "url1": "http",
+       "name1": "n1",
+       "port2": "8082",
+       "url2": "http",
+       "name2": "n2",
+       "port3": "8083",
+       "url3": "https",
+       "name3": "n3"
+  },
+  "baseservicedata": {"name":"microservice-ipterm","custom":"true","customostext":"Base OS: debian:jessie ","customos":"apt-get update && apt-get install -y --no-install-recommends net-tools","customshtext":"It is executed after all the normal builds","customsh":" #!/bin/sh","app":false,"url":"http","port":"80/tcp","ttyd":true,"ttydport":"3787/tcp","ttydurl":"http"}
+}

src-local/community/custom/create-docker-compose.sh

@@ -0,0 +1,56 @@
+#!/bin/bash
+
+SOURCE="${BASH_SOURCE[0]}"
+while [ -h "$SOURCE" ]; do # resolve $SOURCE until the file is no longer a symlink
+  TARGET="$(readlink "$SOURCE")"
+  if [[ $TARGET == /* ]]; then
+    SOURCE="$TARGET"
+  else
+    DIR="$( dirname "$SOURCE" )"
+    SOURCE="$DIR/$TARGET" # if $SOURCE was a relative symlink, we need to resolve it relative to the path where the symlink file was located
+  fi
+done
+
+SRPATH="$( dirname "$SOURCE" )"
+SFPATH="$( cd -P "$( dirname "$SOURCE" )" && pwd )"
+if [ "$SFPATH" != "$SRPATH" ]; then
+  RDIR=$SRPATH    # relativ path directory
+fi
+
+cwdir=$PWD
+wdir=$SFPATH
+
+#echo $cwdir
+#echo $wdir
+
+cd $wdir
+
+. ./user.env
+
+sed -i '/${U_PORT5}:${S_PORT5}/d' ../docker-compose.yml 
+sed -i '/${U_PORT4}:${S_PORT4}/d' ../docker-compose.yml 
+sed -i '/${U_PORT3}:${S_PORT3}/d' ../docker-compose.yml 
+sed -i '/${U_PORT2}:${S_PORT2}/d' ../docker-compose.yml 
+sed -i '/${U_PORT1}:${S_PORT1}/d' ../docker-compose.yml 
+
+if [ ! -z "$S_PORT5" ]; then
+	sed -i '/\sports:/a \ \ \ \ \ \ -\ "${U_PORT5}:${S_PORT5}"' ../docker-compose.yml
+fi
+
+if [ ! -z "$S_PORT4" ]; then
+	sed -i '/\sports:/a \ \ \ \ \ \ -\ "${U_PORT4}:${S_PORT4}"' ../docker-compose.yml
+fi
+
+if [ ! -z "$S_PORT3" ]; then
+	sed -i '/\sports:/a \ \ \ \ \ \ -\ "${U_PORT3}:${S_PORT3}"' ../docker-compose.yml
+fi
+
+if [ ! -z "$S_PORT2" ]; then
+	sed -i '/\sports:/a \ \ \ \ \ \ -\ "${U_PORT2}:${S_PORT2}"' ../docker-compose.yml
+fi
+
+if [ ! -z "$S_PORT1" ]; then
+	sed -i '/\sports:/a \ \ \ \ \ \ -\ "${U_PORT1}:${S_PORT1}"' ../docker-compose.yml
+fi
+
+cd $cwdir

src-local/community/custom/setup.sh

@@ -0,0 +1,31 @@
+#!/bin/sh
+
+mkdir -p /tmp/logs
+
+echo "==> extra packages"
+
+extrap=/tmp/bin/extrapackages
+if [ -f $extrap ]; then
+sh $extrap 2>&1 | tee /tmp/logs/extrapackages.log
+fi
+
+echo "==> exec custom"
+
+extrashell=/tmp/bin/custom.sh
+if [ -f $extrashell ]; then
+sh $extrashell 2>&1 | tee /tmp/logs/custom1.log
+fi
+
+echo "==> extra add"
+
+extrap1=/tmp/bin/extrapackages1
+if [ -f $extrap1 ]; then
+sh $extrap1 2>&1 | tee /tmp/logs/extrapackages1.log
+fi
+
+echo "==> exec sh 2"
+
+extrashell1=/tmp/bin/custom1.sh
+if [ -f $extrashell1 ]; then
+sh $extrashell1 2>&1 | tee /tmp/logs/custom2.log
+fi

src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm

@@ -0,0 +1 @@
+Subproject commit 73dd22c502c6de2b258627b883ece5806a82053f

src-local/llo/new.js

@@ -1044,6 +1044,23 @@ fs.readdir(servicepath, { withFileTypes: true }, (error, files) => {
               res.json(RES)
 });
 
+});
+app.get('/getservicesinfoallcustom', (req, res, next) => {
+
+				var RES = new Object();
+				RES.instance    = req.query["instance"]
+        var servicepath = './community/'
+fs.readdir(servicepath, { withFileTypes: true }, (error, files) => {
+      const directoriesInDIrectory = files
+          .filter((item) => item.isDirectory())
+          .map((item) => item.name);
+
+      //console.log(directoriesInDIrectory);
+              RES.error = false
+              RES.error_msg = "ok"
+              RES.data = directoriesInDIrectory;
+              res.json(RES)
+});
 
 });
 
@@ -1509,6 +1526,66 @@ app.get('/stopservice', (req, res, next) => {
           });
 });
 
+app.get('/stopservicecustom', (req, res, next) => {
+
+				var RES = new Object();
+				var obj = JSON.parse(req.query["instance"])
+        RES.service = obj.service
+        RES.baseservice = obj.baseservice
+        RES.user = obj.user
+
+
+               //var baseservicedata = JSON.stringify(value.baseservicedata)
+               //var customservice = value.service
+               var baseservicetmp1 = RES.user.split('@')
+               var baseservice = `${baseservicetmp1[0]}-${RES.service}`
+               var myservice = `${RES.user}_${RES.service}_${RES.baseservice}/${baseservice}`
+  console.log(myservice)
+               //var myservicefiles = `./community/${value.user}_${value.service}_${value.baseservice}/${baseservice}`
+               //var myservicecustom = `./community/${value.user}_${value.service}_${value.baseservice}`
+
+         var services_path = './community/'+myservice
+         var services_pathexec = process.cwd()
+         var stopeditexec = `/bin/bash ./stop-sidecar-edit-service.sh ${baseservice}`
+          const stopedit = spawn(stopeditexec, {
+            stdio: 'pipe',
+            shell: true,
+            cwd: services_pathexec
+          });
+          stopedit.on('close', function (code) {
+
+            const stop = spawn('/bin/sh ./stop.sh', {
+              stdio: 'pipe',
+              shell: true,
+              cwd: services_path
+            });
+
+            stop.stdout.on('data', function (data) {
+              var n = {}
+              n.data = data.toString()
+              io.emit('message_out', n);
+            });
+
+            stop.stderr.on('data', function (data) {
+              var n = {}
+              n.data = data.toString()
+              io.emit('message_err', n);
+            });
+
+            stop.on('close', function (code) {
+              var n = {}
+              n.data = code
+              io.emit('message_close', n);
+
+              RES.error = false
+              RES.error_msg = "ok"
+              RES.data = 'ok';
+              res.json(RES)
+            });
+
+          });
+});
+
 app.get('/rmbuildstatus', (req, res, next) => {
 				var RES = new Object();
 				RES.instance    = req.query["instance"]
@@ -1824,6 +1901,60 @@ app.get('/chown', (req, res, next) => {
         }
 });
 
+
+app.get('/chowncustom', (req, res, next) => {
+				var RES = new Object();
+        var mypath1 = process.cwd()
+        var runuser = process.env.USER || ""
+  
+				RES.user            = req.query["user"]
+				RES.swarmlabname    = req.query["baseservice"]
+				RES.service         = req.query["service"]
+        var myservicedir = `${RES.user}_${RES.service}_${RES.swarmlabname}`
+        RES.error = false
+        RES.error_msg = "ok"
+        var showexec = `docker exec swarmlabadmin /bin/bash -c "chown -R ${runuser}:${runuser} /community/${myservicedir}"`
+        //var showexec = `docker exec swarmlabadmin /bin/bash -c "chown -R root:root /instance/${RES.instance}/${RES.instance}"`
+       //console.log(showexec)
+       try {
+             log = spawn(showexec, {
+                shell: true,
+                //cwd: services_path,
+                detached: false,
+                stdio: 'pipe'
+              });
+
+              log.stdout.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_out', n);
+              });
+
+              log.stderr.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_err', n);
+              });
+
+              log.on('close', function (code) {
+                var n = {}
+                n.data = code
+                io.emit('message_close', n);
+                  n.start = `${RES.instance}`
+                  RES.error = false
+                  RES.error_msg = 'ok'
+                  RES.data = n.data
+                  res.json(RES)
+              });
+        } catch (error) {
+              console.log('Error:', error);
+                    RES.error = true
+                    RES.error_msg = error
+                    RES.data = 'no'
+                    res.json(RES)
+        }
+});
+
 app.get('/checkowner', (req, res, next) => {
 				var RES = new Object();
         var mypath1 = process.cwd()
@@ -1879,6 +2010,63 @@ app.get('/checkowner', (req, res, next) => {
         }
 });
 
+
+app.get('/checkownercustom', (req, res, next) => {
+				var RES = new Object();
+        var mypath1 = process.cwd()
+        var runuser = process.env.USER || ""
+				RES.instance    = req.query["instance"]
+        RES.error = false
+        RES.error_msg = "ok"
+        var instancedir = `./community/${RES.instance}/${RES.instance}`
+        if (fs.existsSync(instancedir)) {
+          var showexec = `docker exec swarmlabadmin /bin/bash -c "chown -R ${runuser}:${runuser} /instance/${RES.instance}/${RES.instance}"`
+          try {
+             log = spawn(showexec, {
+                shell: true,
+                //cwd: services_path,
+                detached: false,
+                stdio: 'pipe'
+              });
+
+              log.stdout.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_out', n);
+              });
+
+              log.stderr.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_err', n);
+              });
+
+              log.on('close', function (code) {
+                var n = {}
+                n.data = code
+                io.emit('message_close', n);
+                  n.start = `${RES.instance}`
+                  RES.error = false
+                  RES.error_msg = 'ok'
+                  RES.data = n.data
+                  res.json(RES)
+              });
+            } catch (error) {
+              console.log('Error:', error);
+                    RES.error = true
+                    RES.error_msg = error
+                    RES.data = 'no'
+                    res.json(RES)
+            }
+        }else{
+                    RES.error = false
+                    RES.error_msg = 'nodir'
+                    RES.data = 'no'
+                    res.json(RES)
+        }
+});
+
+
 app.get('/getcustom', (req, res, next) => {
 				var RES = new Object();
         var mypath1 = process.cwd()
@@ -1959,7 +2147,7 @@ app.get('/runbackup', (req, res, next) => {
         RES.error_msg0 = ""
         RES.data = "All_services_are_running";
         var showexec = `./swarmlab_backup_service.sh ${RES.instance}`
-      console.log('exec tar :', showexec);
+      //console.log('exec tar :', showexec);
         var runpath = `${mypath}`
         var runpathfile = `${mypath}/swarmlab_backup_service.sh`
                   
@@ -1968,7 +2156,7 @@ app.get('/runbackup', (req, res, next) => {
 try {
 			const buildout = fs.openSync(buildoutdir, 'a');
 			const builderr = fs.openSync(builderrdir, 'a');
-      console.log('buildout :', buildout);
+      //console.log('buildout :', buildout);
 
 
 				 var buildimage = `echo "EXEC PID: $$"; ${showexec}`
@@ -2025,7 +2213,7 @@ app.get('/runbackupinstance', (req, res, next) => {
         RES.error_msg0 = ""
         RES.data = "All_services_are_running";
         var showexec = `./swarmlab_backup_src_instanche.sh ${RES.instance}`
-      console.log('exec tarinstance :', showexec);
+      //console.log('exec tarinstance :', showexec);
         var runpath = `${mypath}`
                   
 			var buildoutdir = `${runpath}/logs/tar-backup-out.log`
@@ -2033,7 +2221,7 @@ app.get('/runbackupinstance', (req, res, next) => {
 try {
 			const buildout = fs.openSync(buildoutdir, 'a');
 			const builderr = fs.openSync(builderrdir, 'a');
-      console.log('buildout :', buildout);
+      //console.log('buildout :', buildout);
 
 
 				 var buildimage = `echo "EXEC PID: $$"; ${showexec}`
@@ -2109,7 +2297,7 @@ app.get('/getstoragestatus', (req, res, next) => {
                         RES.error = false
                         RES.error_msg = "ok"
                         RES.data = "no instance file found";
-                        console.log(JSON.stringify(err))
+                        //console.log(JSON.stringify(err))
                         res.json(RES)
                   }else{
                       data = data.trim();
@@ -2266,7 +2454,7 @@ app.get('/getshareinfo', (req, res, next) => {
 
 				var RES = new Object();
 				var container    = req.query["instance"]
-              console.log(container)
+              //console.log(container)
 			  var showexec = `docker inspect ${container} --format '{"network":"{{ .HostConfig.NetworkMode }}","container":"{{ .Id }}"}' | jq . -s`
         exec(showexec, (err, stdout, stderr) => {
            if (err) {
@@ -2295,7 +2483,7 @@ app.get('/getshareinfo', (req, res, next) => {
                     }
                   }
                  }
-                      console.log(datajson1)
+                      //console.log(datajson1)
                       RES.error = false
                       RES.error_msg = "ok"
                       RES.container = datajson;
@@ -2619,6 +2807,32 @@ app.get('/get_config', (req, res, next) => {
          */
 });
 
+
+app.get('/getinstallcustom', (req, res, next) => {
+				var RES = new Object();
+				RES.instance    = req.query["instance"]
+        //console.log(RES.instance)
+        
+        var runpath = `./community/config`
+        var runpathfile = `./community/config/${RES.instance}.js`
+        var found = ''
+        if (fs.existsSync(runpathfile)) {
+            found = 'yes'
+            RES.error = false
+            RES.error_msg = "ok"
+            RES.test = found;
+            RES.data = fs.readFileSync(runpathfile, 'utf8')
+            res.json(RES)
+         }else{
+            found = 'no'
+            RES.error = false
+            RES.error_msg = "no"
+            RES.test = found;
+            RES.data = false;
+            res.json(RES)
+          }
+});
+
 app.get('/create_config', (req, res, next) => {
 
 				var RES = new Object();
@@ -2816,10 +3030,47 @@ function create_project(swarmlabname,project){
          });
 }
 
+
+function create_project_custom(swarmlabname,project){
+
+       var services_path = './community/'+swarmlabname+'/'+project
+        fs.mkdir(services_path, { recursive: true }, (err) => {
+
+             var service_up = '/bin/bash ../install/usr/share/swarmlab.io/sec/swarmlab-sec create'
+             create = spawn(service_up, {
+                shell: true,
+                cwd: services_path,
+                //detached: true,
+                detached: false,
+                //stdio: [ 'ignore', logout, logerr ]
+                stdio: 'pipe'
+              });
+
+              create.stdout.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_out', n);
+              });
+
+              create.stderr.on('data', function (data) {
+                var n = {}
+                n.data = data.toString()
+                io.emit('message_err', n);
+              });
+
+              create.on('close', function (code) {
+                var n = {}
+                n.data = code
+                io.emit('message_close', n);
+              });
+
+         });
+}
+
 function docker_image_rm(swarmlabname,project){
        var services_path = swarmlabname
              var service_rm = 'docker rmi $(docker images  --format "{{.Repository}}#{{ .ID }}" | grep "/'+project+'#" | cut -d"#" -f2)'
-             console.log('docker rmi '+service_rm)
+             //console.log('docker rmi '+service_rm)
              remove = spawn(service_rm, {
                 shell: true,
                 cwd: services_path,
@@ -3000,6 +3251,325 @@ TEST=${service}
          }
     });
 
+    socket.on('startcustom', (value) => {
+            //console.log(value)
+         //console.log('value '+JSON.stringify(value))
+         if(value.service){
+           try {
+             const reg = new RegExp('^[0-9]+$');
+             const reg1 = new RegExp('^[0-9/tcpud]+$');
+
+             if (!value.port1){
+                  value.port1=''
+
+             }else{
+                if(reg.test(value.port1)){
+                  value.port1 = value.port1.replace(/\s+/g, '')
+                }else if(reg1.test(value.port1)){
+                  value.port1 = value.port1.replace(/\s+/g, '')
+                }else{
+                  value.port1 = ''
+                }
+             }
+
+             if (!value.port2){
+                value.port2=''
+             }else{
+                if(reg.test(value.port2)){
+                  value.port2 = value.port2.replace(/\s+/g, '')
+                }else if(reg1.test(value.port2)){
+                  value.port2 = value.port2.replace(/\s+/g, '')
+                }else{
+                  value.port2 = ''
+                }
+             }
+
+             if (!value.port3){
+                value.port3=''
+             }else{
+                if(reg.test(value.port3)){
+                  value.port3 = value.port3.replace(/\s+/g, '')
+                }else if(reg1.test(value.port3)){
+                  value.port3 = value.port3.replace(/\s+/g, '')
+                }else{
+                  value.port3 = ''
+                }
+             }
+             
+             if (!value.port4){
+                value.port4=''
+             }else{
+                if(reg.test(value.port4)){
+                  value.port4 = value.port4.replace(/\s+/g, '')
+                }else if(reg1.test(value.port4)){
+                  value.port4 = value.port4.replace(/\s+/g, '')
+                }else{
+                  value.port4 = ''
+                }
+             }
+             
+             if (!value.port5){
+                value.port5=''
+             }else{
+                if(reg.test(value.port5)){
+                  value.port5 = value.port5.replace(/\s+/g, '')
+                }else if(reg1.test(value.port5)){
+                  value.port5 = value.port5.replace(/\s+/g, '')
+                }else{
+                  value.port5 = ''
+                }
+             }
+             
+
+               var baseservicedata = JSON.stringify(value.baseservicedata)
+               var customservice = value.service
+               var baseservicetmp1 = value.user.split('@')
+               var baseservice = `${baseservicetmp1[0]}-${value.service}`
+               var myservice = `${value.user}_${value.service}_${value.baseservice}/${baseservice}`
+               var myservicefiles = `./community/${value.user}_${value.service}_${value.baseservice}/${baseservice}`
+               var myservicecustom = `./community/${value.user}_${value.service}_${value.baseservice}`
+               //var services_path = './community/'+service+'/'+service
+               var services_path = './community/'+myservice
+
+							var ENV_service_file_path_sh_dir = `${myservicecustom}/install/usr/share/swarmlab.io/sec/custom`
+							var ENV_service_file_path_sh = `${myservicecustom}/install/usr/share/swarmlab.io/sec/custom/custom.sh`
+              var ENV_service_file_sh = `${value.sh}`
+
+							var ENV_service_file_path_os = `${myservicecustom}/install/usr/share/swarmlab.io/sec/custom/extrapackages`
+              var ENV_service_file_os = `${value.packages}`
+  // -----------------------------------------------------------
+							var ENV_service_file_path_sh_dir1 = `${myservicefiles}/custom`
+							var ENV_service_file_path_sh1 = `${myservicefiles}/custom/custom.sh`
+							var ENV_service_file_path_os1 = `${myservicefiles}/custom/extrapackages`
+							var ENV_service_file_path_rc1 = `${myservicefiles}/custom/rclocal`
+              var ENV_service_file_rc = `${value.rclocal}`
+
+							var ENV_service_file_path_config1 = `${myservicecustom}/install/usr/share/swarmlab.io/sec/custom/index-setup.js`
+							var ENV_service_file_path_config_community = `./community/config/${baseservice}.js`
+							var ENV_service_file_path_config = `${myservicefiles}/custom/index-setup.js`
+              var ENV_service_file_config = `
+export const ApiConfigWEBuser = [
+  {
+       "service": "${customservice}",
+       "baseservice": "${value.baseservice}",
+       "user": "${value.user}",
+       "port1": "${value.port1}",
+       "url1": "${value.url1}",
+       "name1": "${value.name1}",
+       "port2": "${value.port2}",
+       "url2": "${value.url2}",
+       "name2": "${value.name2}",
+       "port3": "${value.port3}",
+       "url3": "${value.url3}",
+       "name3": "${value.name3}",
+       "baseservicedata": ${baseservicedata}
+  }
+]
+`
+              var ENV_service_file_config_community = `{
+  "servicedata": {
+       "service": "${customservice}",
+       "baseservice": "${value.baseservice}",
+       "user": "${value.user}",
+       "port1": "${value.port1}",
+       "url1": "${value.url1}",
+       "name1": "${value.name1}",
+       "port2": "${value.port2}",
+       "url2": "${value.url2}",
+       "name2": "${value.name2}",
+       "port3": "${value.port3}",
+       "url3": "${value.url3}",
+       "name3": "${value.name3}"
+  },
+  "baseservicedata": ${baseservicedata}
+}`
+              var execadddirport =  `${myservicefiles}/custom/create-docker-compose.sh`
+							var ENV_service_file_path_config_bash = `${myservicefiles}/custom/user.env`
+
+              var ENV_service_file_config_bash = `S_PORT1=${value.port1}
+S_PORT2=${value.port2}
+S_PORT3=${value.port3}
+S_PORT4=${value.port4}
+S_PORT5=${value.port5}
+`
+
+							 var ENV_service_file_path = services_path+'/.env'
+               var service_port = ''
+               if(value.swarmlabname_size){
+                  var service_size = value.swarmlabname_size
+               }else{
+                  var service_size = 3
+               }
+							 const apptest = require('express')();
+							 const servertest = apptest.listen(0, () => {
+									 var newport = servertest.address().port
+									 servertest.close();
+									 if(value.swarmlabname_port){
+												 service_port = value.swarmlabname_port
+									 }else{
+												 service_port = newport
+							  	 }
+
+							 var newport1 = ''
+							 const servertest1 = apptest.listen(0, () => {
+									 servertest1.close();
+               })
+							 newport1 = servertest1.address().port
+
+							 var newport2 = ''
+							 const servertest2 = apptest.listen(0, () => {
+									 servertest2.close();
+               })
+							newport2 = servertest2.address().port
+
+							 var newport3 = ''
+							 const servertest3 = apptest.listen(0, () => {
+									 servertest3.close();
+               })
+							newport3 = servertest3.address().port
+
+							 var newport4 = ''
+							 const servertest4 = apptest.listen(0, () => {
+									 servertest4.close();
+               })
+							 newport4 = servertest4.address().port
+
+							 var newport5 = ''
+							 const servertest5 = apptest.listen(0, () => {
+									 servertest5.close();
+               })
+									 newport5 = servertest5.address().port
+
+							 var newport21 = ''
+							 const servertest21 = apptest.listen(0, () => {
+									 servertest21.close();
+               })
+							 newport21 = servertest21.address().port
+
+
+							 var newport22 = ''
+							 const servertest22 = apptest.listen(0, () => {
+									 servertest22.close();
+               })
+							 newport22 = servertest22.address().port
+
+
+							 var newport23 = ''
+							 const servertest23 = apptest.listen(0, () => {
+									 servertest23.close();
+               })
+							 newport23 = servertest23.address().port
+
+							 var newport24 = ''
+							 const servertest24 = apptest.listen(0, () => {
+									 servertest24.close();
+               })
+							 newport24 = servertest24.address().port
+
+							 var newport25 = ''
+							 const servertest25 = apptest.listen(0, () => {
+									 servertest25.close();
+               })
+							 newport25 = servertest25.address().port
+
+							 var ENV_service_file = `
+REGISTRY_ADDR=localhost
+REGISTRY_PORT=5000
+IMAGE_NAME=${value.baseservice}
+SSH_PORT=${service_port}
+R_PORT1=${newport1}
+R_PORT2=${newport2}
+R_PORT3=${newport3}
+R_PORT4=${newport4}
+R_PORT5=${newport5}
+U_PORT1=${newport21}
+U_PORT2=${newport22}
+U_PORT3=${newport23}
+U_PORT4=${newport24}
+U_PORT5=${newport25}
+S_PORT1=${value.port1}
+S_PORT2=${value.port2}
+S_PORT3=${value.port3}
+S_PORT4=${value.port4}
+S_PORT5=${value.port5}
+TEST=${value.baseservice}
+`
+         //console.log('value1 '+JSON.stringify(ENV_service_file_path))
+         //console.log('value2 '+JSON.stringify(ENV_service_file))
+										fs.writeFileSync(ENV_service_file_path, ENV_service_file ,{encoding:'utf8',flag:'w'});
+
+                 if (fs.existsSync(ENV_service_file_path_sh_dir)) {
+										fs.writeFileSync(ENV_service_file_path_sh, ENV_service_file_sh ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_os, ENV_service_file_os ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_config1, ENV_service_file_config ,{encoding:'utf8',flag:'w'});
+                 }
+
+
+                var execadddir = `./community/custom`
+                var execadd = `cp -rf ${execadddir}  ${services_path}`
+                execSync(execadd);
+								fs.writeFileSync(ENV_service_file_path_config_community, ENV_service_file_config_community ,{encoding:'utf8',flag:'w'});
+                 if (fs.existsSync(ENV_service_file_path_sh_dir1)) {
+										fs.writeFileSync(ENV_service_file_path_sh1, ENV_service_file_sh ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_os1, ENV_service_file_os ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_rc1, ENV_service_file_rc ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_config, ENV_service_file_config ,{encoding:'utf8',flag:'w'});
+										fs.writeFileSync(ENV_service_file_path_config_bash, ENV_service_file_config_bash ,{encoding:'utf8',flag:'w'});
+                var execaddport = `bash ${execadddirport}`
+                execSync(execaddport);
+
+         //console.log('value1  file '+JSON.stringify(ENV_service_file_path_os1))
+         //console.log('value1 config '+JSON.stringify(ENV_service_file_path_config))
+                 }
+         //console.log('value1 '+JSON.stringify(ENV_service_file_sh))
+         //console.log('value2 '+JSON.stringify(ENV_service_file_os))
+										 var service_up = '/bin/bash ../install/usr/share/swarmlab.io/sec/swarmlab-sec up size='+service_size
+
+										 child[0] = spawn(service_up, {
+												shell: true,
+												cwd: services_path,
+												//detached: true,
+												detached: false,
+												//stdio: [ 'ignore', logout, logerr ]
+												stdio: 'pipe'
+											});
+
+											ppid = child[0].pid;
+											//console.log(ppid)
+											child[0].stdout.on('data', function (data) {
+												var n = {}
+												n.data = data.toString()
+												n.cwdpath =  process.cwd()
+												n.service =  value.baseservice
+												n.customservice =  customservice
+												io.emit('message_out', n);
+											});
+
+											child[0].stderr.on('data', function (data) {
+												var n = {}
+												n.data = data.toString()
+												n.cwdpath =  process.cwd()
+												n.service =  value.baseservice
+												n.customservice =  customservice
+												io.emit('message_err', n);
+											});
+
+											child[0].on('close', function (code) {
+												var n = {}
+												n.data = code
+												io.emit('message_close', n);
+											});
+							 });
+            } catch (error) {
+              console.log('Error:', error);
+            }
+         }else{
+                  var n = {}
+                  n.data = 'NoSwarmlabname'
+                  io.emit('message_err', n);
+         }
+    });
+
     socket.on('start_storage', (value) => {
          if(value.swarmlabname){
            try {
@@ -3305,6 +3875,104 @@ SSH_PORT=
     });
 
 
+    socket.on('installcustom', (value) => {
+            //console.log(value)
+         if(value.swarmlabname){
+           try {
+            //console.log('install')
+             //var service = value.swarmlabname
+
+               var baseservicetmp1 = value.user.split('@')
+               var service = `${baseservicetmp1[0]}-${value.service}`
+
+             var myservice = `${value.user}_${value.service}_${value.swarmlabname}`
+             var service_git = value.git
+             var services_path = './community/'+myservice
+             var ENV_service_dir = services_path+'/'+service
+             var ENV_service_file_path = services_path+'/'+service+'/.env'
+             var ENV_service_file_path_div = services_path+'/'+service
+                    var nn = {}
+                        nn.data = 'Wait for service(s) to be available before executing a command'
+                        io.emit('message_out', nn);
+             if (fs.existsSync(services_path)) {
+                  const git = simpleGit(
+                            { 
+                              baseDir: services_path,
+                              maxConcurrentProcesses: 10 
+                            });
+                  try {
+                    git.pull()
+                      .then((status) => {
+                        var n = {}
+                        n.data = 'Updated'
+                        io.emit('message_out', n);
+                        n.data = '...'
+                        io.emit('message_close', n);
+                        create_project_custom(myservice,service)
+                      }).catch((err) => {
+                        var n = {}
+                        n.data = err.toString()
+                        io.emit('message_err', n);
+                        console.log('error ' + JSON.stringify(err))
+                      });
+                  } catch (e) { 
+                    var n = {}
+                    n.data = e.toString()
+                    io.emit('message_err', n);
+                  }
+             }else{
+              fs.mkdir(services_path, { recursive: true }, (err) => {
+                if (err){
+                  console.log('error ' + JSON.stringify(err))
+                }else{
+							 var ENV_service_file = `
+REGISTRY_ADDR=localhost
+REGISTRY_PORT=5000
+IMAGE_NAME=${value.swarmlabname}
+SSH_PORT=
+`
+                  const git = simpleGit(
+                            { 
+                              baseDir: '.',
+                              maxConcurrentProcesses: 10 
+                            });
+                  try {
+                    git.clone(service_git, services_path)
+                      .then((status) => {
+                        var n = {}
+                        n.data = 'Installed'
+                        io.emit('message_out', n);
+                        n.data = '...'
+                        io.emit('message_out', n);
+                        create_project_custom(myservice,service)
+                        if (fs.existsSync(ENV_service_file_path_div)) {
+									        fs.writeFileSync(ENV_service_file_path, ENV_service_file);
+                        }
+                      }).catch((err) => {
+                        var n = {}
+                        n.data = err.toString()
+                        io.emit('message_err', n);
+                        console.log('error ' + JSON.stringify(err))
+                      });
+                  } catch (e) { 
+                    var n = {}
+                    n.data = e.toString()
+                    io.emit('message_err', n);
+                  }
+
+                }
+              });
+            }
+          } catch (error) {
+                console.log('Error:', error);
+          }
+         }else{
+            var n = {}
+            n.data = 'no services'
+            io.emit('message_err', n);
+         }
+    });
+
     socket.on('installstorage', (value) => {
          if(value.swarmlabname){
            try {
@@ -3430,8 +4098,8 @@ SSH_PORT=
   // ----------------- build buildimage build_image command
   // ------------------------------------
   socket.on('build_image', (option) => {
-      console.log("run_buildimage")
-      console.log(JSON.stringify(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`
@@ -3471,7 +4139,7 @@ try {
           io.emit('message_out', n);
 
 					run_buildimage.on('exit', (data) => {
-							console.log('exit '+data);
+							//console.log('exit '+data);
                     //set pid on server for later use e.g. kill
                     //var n = {}
                     //n.pid = line.substr(10).trim()
@@ -3482,7 +4150,7 @@ try {
                   io.emit('message_close', n);
 					});
 					run_buildimage.on('close', (data) => {
-							console.log('close '+data);
+							//console.log('close '+data);
                     //set pid on server for later use e.g. kill
                     //var n = {}
                     //n.pid = line.substr(10).trim()
@@ -3565,26 +4233,26 @@ try {
   // ----------------- ssh connect and run command
   // ------------------------------------
   socket.on('build_vmlist', (option) => {
-      console.log("list")
+      //console.log("list")
       var mypath = process.cwd()
       sshconnect.on('connect', function() {
         console.log('Connection :: connect');
       });
       sshconnect.on('ready', function() {
-        console.log('Connection :: ready');
+        //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);
+								  //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);
+							    //console.log(line);
                   if(line.substr(0, 10) === 'EXEC PID: ') {
-                    console.log('PID1: ' +  line.substr(10));
+                    //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
@@ -3593,7 +4261,7 @@ try {
                     //set pid on client for later use e.g. kill
                     io.emit('build_set_sshpid', n);
                   }
-								  console.log('STDOUT: ' + data);
+								  //console.log('STDOUT: ' + data);
                   var n = {}
                   n.data = data.toString('utf8')
                   io.emit('message_out', n);

src/App.vue

@@ -269,15 +269,16 @@
 							<b-list-group-item variant="light"  name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')"> Storage</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-list-group-item variant="light"  name="Proof_of_concept" class=" ti-light-bulb  m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')"> Proof_of_concept</b-list-group-item>
+							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')">  Users images</b-list-group-item>
 					</b-collapse>
 
 
 
     <!-- Menou builders -->
-			 <b-list-group-item v-b-toggle.hybrid-builders variant="light"  name="Private" class="ti-settings  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-list-group-item v-b-toggle.hybrid-builders variant="light"  name="Private" class="ti-settings  list-group-item list-group-item-action" v-on:click="setActive('builders','')" style="cursor: pointer;" :class="{ active: isActive('builders') }"  @click="hybrid('builders')"  > Build</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_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')"> myServices</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>
               -->
@@ -356,15 +357,16 @@
 							<b-list-group-item variant="light"  name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')" title="Storage"> </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-list-group-item variant="light"  name="Proof_of_concept" class="ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')" title="Proof_of_concept"> </b-list-group-item>
+							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')" 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-settings 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-list-group-item v-b-toggle.hybrid-builders variant="light"  name="Private" class="ti-settings list-group-item list-group-item-action" v-on:click="setActive('builders','')" style="cursor: pointer;" :class="{ active: isActive('builders') }"  @click="hybrid('builders')" title="Build" > </b-list-group-item>
 
 					<b-collapse id="hybrid-builders1" 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_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 Service"> </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>
               -->
@@ -500,6 +502,19 @@
 					<!-- ------  hybrid manage microservices       --------------- -->
 					<!-- ----------------------------------- -->
 
+					<!-- ----------------------------------- -->
+					<!-- ------  hybrid manage mymicroservices       --------------- -->
+					<!-- ----------------------------------- -->
+             <manage-mymicroservices
+               :key="mycomponentKeyreload3"
+                  v-show="hybridmenou == 'mymicroservice'"
+                style="background-color: #f8f9fa"
+              >
+             </manage-mymicroservices>
+					<!-- ----------------------------------- -->
+					<!-- ------  hybrid manage microservices       --------------- -->
+					<!-- ----------------------------------- -->
+
 					<!-- ----------------------------------- -->
 					<!-- ------  hybrid manage proofofconcept       --------------- -->
 					<!-- ----------------------------------- -->
@@ -617,6 +632,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 ManageMymicroservices from "./components/mymicroservicescustom.vue";
 import ManageProofofconcept from "./components/proofofconcept.vue";
 import ManageBuilders from "./components/mybuild.vue";
 import ManageDeploy from "./components/managedeploy.vue";
@@ -634,6 +650,7 @@ export default {
     ManageServices,
     ManageStorage,
     ManageMicroservices,
+    ManageMymicroservices,
     ManageProofofconcept,
     ManageBuilders,
     ManageDeploy,
@@ -646,6 +663,7 @@ export default {
       componentKeyreload1:1,
       componentKeyreload2:1,
       componentKeyreload3:1,
+      mycomponentKeyreload3:1,
       componentKeyreload4:1,
       componentKeybuilders:1,
 			setStatusAgent:'',
@@ -717,6 +735,7 @@ export default {
             this.componentKeyreload1 += 1
             this.componentKeyreload2 += 1
             this.componentKeyreload3 += 1
+            this.mycomponentKeyreload3 += 1
             this.componentKeyreload4 += 1
             this.componentKeybuilders += 1
         }

src/components/mybuild.vue

@@ -3,22 +3,21 @@
 
     <div class="row" >
       <div class="col-7 order-first " >
-      <br>
-        <view-network>
-
-        </view-network>
-
         <builder-services>
 
         </builder-services>
+      <br>
+        <builder-my-services>
+
+        </builder-my-services>
 
       </div>
 
       <div class="col-5 order-last" >
       <br>
-        <adhoc-view>
+        <service-view>
 
-        </adhoc-view>
+        </service-view>
       </div>
     </div>
 
@@ -27,17 +26,20 @@
 </template>
 <script>
 import {mapState, mapGetters, mapActions} from 'vuex'
-import ViewNetwork from "./mynetwork/mybuilder.vue";
-import AdhocView from "./mynetwork/AdhocView.vue";
+//import ViewNetwork from "./mynetwork/mybuilder.vue";
+//import AdhocView from "./mynetwork/AdhocView.vue";
+import ServiceView from "./mynetwork/customservices.vue";
 import BuilderServices from "./mynetwork/builderservices.vue";
+import BuilderMyServices from "./mynetwork/buildermyservices.vue";
 import card from '@/components/Card.vue'
 //import AvailableServices from "./mynetwork/availableservices.vue";
 export default {
    components: {
-     ViewNetwork,
-     AdhocView,
+  //   ViewNetwork,
+     ServiceView,
      card,
-     BuilderServices
+     BuilderServices,
+     BuilderMyServices
  //    AvailableServices
    },
    data () {

src/components/mymicroservicescustom.vue

@@ -0,0 +1,69 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+
+    <div class="row" >
+      <div class="col-7 order-first " >
+      <br>
+      <!--
+        <view-network>
+
+        </view-network>
+        -->
+        <available-mymicroservices
+        :key="componentKeyreloadservice5" 
+        >
+
+        </available-mymicroservices>
+      </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/mytable.vue";
+import AdhocView from "./mynetwork/AdhocView.vue";
+import card from '@/components/Card.vue'
+//import DockerServices from "./mynetwork/dockerservices.vue";
+import AvailableMymicroservices from "./mynetwork/availablemicroservicescustom.vue";
+export default {
+   components: {
+ //    ViewNetwork,
+     AdhocView,
+     card,
+  //   DockerServices,
+     AvailableMymicroservices
+   },
+   data () {
+      return {
+        componentKeyreloadservice5:1,
+        loading: false,
+        consoleView: 'off',
+        productIndex: 1
+      }
+    },
+  mounted() {
+		this.$root.$on('hybrid_refresh_info_deploy_local', () => {
+      this.componentKeyreloadservice5 += 1
+		})
+  },
+  beforeDestroy () {
+		this.$root.$off('hybrid_refresh_info_deploy_local')
+ },
+
+
+    created () {
+    }
+};
+</script>
+<style>
+</style>
+

src/components/mynetwork/buildermyservices.vue

@@ -0,0 +1,472 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+
+<br>
+
+  <v-wait for="myRunInstancetutormybuild">
+    <template slot="waiting">
+      <div>
+        <img src="@/assets/loading.gif" />
+        Enter Lab_room...
+      </div>
+    </template>
+  </v-wait>
+
+          <div class="row text-center">
+            <div class="col-12">
+              <b>Swarmlab <span class="text-info">my Custom  MicroServices</span></b>
+            </div>
+          </div>
+
+<br>
+
+
+
+
+  <div class="input-group input-group-sm sm-3">
+  </div>
+
+		<div class="input-group input-group-sm sm-3">
+					
+			<input type="text" 
+				class="form-control" 
+				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+				placeholder="Search"
+				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="input-group-append"
+      v-if="viewhybridoptions && heavy"
+    >
+    <p class="text-danger">{{ heavytext }}</p>
+    </div>
+
+		<div class="white h-100 flex-fixed-width-item"
+			<vuetable 
+				ref="vuetable"
+				:key="vuetablekeygmybuildservice123"
+				: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">
+          <div class="d-flex justify-content-center">
+            <button
+              class="ti-pencil btn btn-outline-secondary btn-sm"
+              title="Upload MicroService"
+              round
+              @click="onAction('upload-item', props.rowData, props.rowData._id)">
+            </button>
+          <button
+            class="ti-trash btn btn-outline-warning btn-sm"
+              title="MicroService Info"
+            round
+            @click="onAction('rm-item', props.rowData, props.rowData._id)">
+          </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";
+import {ApiConfigWEB} from "@/config/index-web";
+
+export default {
+  components: {
+      card,
+	    Vuetable,
+			VuetablePagination,
+			VuetablePaginationInfo,
+			VuetablePaginationDropdown
+	},
+  props: {
+  },
+  data() {
+   return{
+   testactionrowindex:[],  // downloaded          used in installed
+   teststatusindex:[],     // status stop run     used in status
+   testtest:[],             // up or down services
+   testtestdir:[],             // install download or not service
+	  hybridoptions: {
+      'index':'',            
+      'swarmlabname':'',            
+      'size':'',            
+      'port':''            
+    },
+    viewhybridoptions: false,
+    heavy: false,
+    heavytext: '',
+    customedit: false,
+    custommenouopen: false,
+    custommenou: false,
+    custom: {
+			'os':'',
+			'sh':''
+    },
+    customostext: '',
+    customshtext: '',
+    up_name:'',
+    swarmlab:{},
+	  playbookInfo: {},
+    token: '',
+	  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,
+		vuetablekeygmybuildservice123:0,
+		vuetablekeygslot:0,
+		fielddata:{},
+    fields: [
+      {
+        name: 'service',
+        title: '<span class="orange"></span>Name',
+        sortField: 'service',
+        visible:true,
+        dataClass: 'left aligned col-3',
+        width: '30%'
+      },
+      {
+        name: '_id',
+        title: '<span class="orange"></span>mongo',
+        visible:false
+      },
+      {
+        name: 'readme',
+        title: '<span class="orange"></span>Info',
+        sortField: 'gitrepoCloneUrl',
+        dataClass: 'left aligned w-25',
+        visible:true,
+        width: '20%'
+      },
+      {
+        name: 'baseservice',
+        title: '<span class="orange"></span>Base',
+        sortField: 'baseservice',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25',
+        visible:true,
+        width: '30%'
+      },
+      {
+          name: '__slot:actions',   // <----
+          title: 'Actions',
+          titleClass: 'col text-center',
+          dataClass: 'center aligned',
+          width: '10%'
+        },
+    ],
+		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridmymicroservices",
+		css: CssConfig,
+    perpage: 8,
+    searchFor: '',
+		sortOrder: [{
+				field: 'pipelinename',
+				direction: 'asc'
+		}],
+    multiSort: true,
+    paginationComponent: 'vuetable-pagination',
+    currentpage:'1',
+    currentpagepaginationData: {},
+    dataselect:'',
+    indexselect:'',
+		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'
+			},
+	 
+		}
+  },
+	mounted() {
+		this.$root.$on('hybrid_build_micro_service_menou_refreshtable', ()  => {
+        this.refreshVuetable()
+        console.log('11111111111111111111111111')
+    })
+	},
+	async created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+		//await this.checkactionrowindexall()
+    this.$root.$emit('hybrid_build_micro_service_menou')
+    //console.log("token "+ this.token);
+	},
+    beforeDestroy () {
+			this.$root.$off('hybrid_build_micro_service_menou_refreshtable')
+ },
+  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 refreshVuetable() {
+					this.vuetablekeygmybuildservice123 += 1
+      },
+		setFilter () {
+				this.moreParams = {
+						'filter':  this.searchFor,
+						'type':    this.selected
+				}
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		},
+		resetFilter () {
+				this.moreParams = {}
+				this.searchFor = ''
+				this.moreParams = {
+						'filter':  '',
+						'type':    'scripts'
+				}
+        Vue.nextTick( () => this.refreshVuetableall())
+		},
+   onPaginationData (paginationData) {
+      this.$refs.pagination.setPaginationData(paginationData)
+			this.$refs.paginationInfo.setPaginationData(paginationData) 
+      this.currentpagepaginationData = paginationData
+    },
+    onChangePage (page) {
+      this.currentpage = page
+      this.$refs.vuetable.changePage(page)
+    },
+    editRow(rowData) {
+      alert("You clicked edit on"+ JSON.stringify(rowData));
+		},
+		async rmAndClose(result){
+    		if (result.isConfirmed) {
+          var value = this.hybridoptions.swarmlabname
+              var log = await store.dispatch("pipelineLLO/rmmycustomservice",{
+                token:this.token,
+                service:this.swarmlab.service
+                })
+          this.refreshVuetable()
+              if(log.data.action == 'ok'){
+
+              }else{
+                  var info = "Remove error "
+                  this.$swal({
+                    type: 'Info',
+                    title: 'Info!',
+                    icon:'error',
+                    html: info,
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: true,
+                    confirmButtonText: 'Ok!'
+                  })
+              }
+        }else  {
+					console.log('no')       
+        }
+	  },
+    async onAction (action, data, index) {
+			if(action == 'rm-item' ){
+          this.swarmlab=data
+          var container=this.swarmlab
+
+       var info = "Remove service: <b> " + this.swarmlab.service
+           info += "</b>"
+       this.$swal({
+          type: 'info',
+          html: info,
+          icon:'warning',
+          showCloseButton: true,
+          showLoaderOnConfirm: false,
+          allowOutsideClick: false,
+          cancelButtonText: 'No, cancel!',
+          showCancelButton: true,
+          showLoaderOnConfirm: false,
+          reverseButtons: true,
+          focusCancel: false,
+          confirmButtonText: 'Yes!'
+          }).then((result)=> {
+            this.rmAndClose(result);
+          })
+
+			}else if(action == 'upload-item' ){
+         var data1 =  {
+              data:data 
+         }
+         var log =  {
+              data: data1
+         }
+        this.swarmlab=data
+          var service = {
+              data:    data,
+              log:    log
+            }
+        this.$root.$emit('hybrid_build_micro_myservice', service)
+			}
+    },
+		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) {
+        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>

src/components/mynetwork/builderservices-backup.vue

@@ -0,0 +1,562 @@
+<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="vuetablekeyl"
+				: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"
+              v-if="checkbuildrowindex(props.rowData,props.rowIndex)"
+          >
+            <button
+              v-if="testactionrowindex[props.rowData.name] == props.rowIndex"
+              class="ti-trash btn btn-info btn-sm"
+              title="Remove Box_Instance"
+              round
+              @click="onAction('delete-item', props.rowData, props.rowIndex)"
+              >
+            </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 :{},
+   testactionrowindex:[],  // downloaded          used in installed
+	  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,
+	 	rmbox:{},
+		vuetablekeyl: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_closebuild', (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! '
+                  })
+        }
+        this.refreshVuetable()
+		})
+	},
+	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_closebuild')
+ },
+  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
+      this.rmbox = data
+			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' ){
+               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">
+                        Remove
+                      </p>
+                    </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: 'Remove the box! '
+            }).then((result)=> {
+              this.removeAndClose(result);
+            })
+          console.log('data da1 '+JSON.stringify(data))
+			}else if(action == 'run-item' ){
+			}
+    },
+      async removeAndClose(result){
+          var obj = {}
+          obj.instance = this.rmbox.name
+          obj.dir = this.rmbox.dir
+          obj.config = this.rmbox.config
+          if (result.isConfirmed) {
+            //console.log('value obj11111111111111111111111 '+ JSON.stringify(result))
+            var res1 = await store.dispatch('pipelineLLO/rmbuildstatus', obj)
+            console.log('value objdata111111111111111111 '+ JSON.stringify(res1))
+            if(res1.data.data == 'yes'){
+              Vue.delete(this.testactionrowindex, data.name)
+              Vue.nextTick( () => this.$refs.vuetable.refresh())
+            }
+          }else  {
+            console.log('no')       
+          }
+      },
+		async checkbuildrowindex(data,index){
+        if(this.testactionrowindex[index] == index){
+            var obj = {}
+            obj.token = this.token
+            obj.instance = data.name
+            var res1 = await store.dispatch('pipelineLLO/getbuildstatus', obj)
+            if(res1.data.data == 'yes'){
+              Vue.set(this.testactionrowindex, data.name, index)
+            }else{
+              Vue.delete(this.testactionrowindex, data.name)
+            }
+            console.log('resi NO3 '+JSON.stringify(this.testactionrowindex))
+        }else{
+              var obj = {}
+              obj.token = this.token
+              obj.instance = data.name
+              var res = await store.dispatch('pipelineLLO/getbuildstatus', obj)
+              if(res.data.data == 'yes'){
+                  Vue.set(this.testactionrowindex, index, index)
+                }else{
+                  Vue.delete(this.testactionrowindex, data.name)
+                }
+                console.log('resi NO2 '+JSON.stringify(this.testactionrowindex))
+          }
+		},
+    refreshVuetable() {
+			this.$nextTick(()=>{
+					this.vuetablekeyl += 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>

src/components/mynetwork/builderservices.vue

@@ -1,8 +1,12 @@
 <template>
   <card class="card-user" style="max-height:100%">
 
+<br>
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
+      </div>
 
-  <v-wait for="myRunInstancetutor">
+  <v-wait for="myRunInstancetutormybuild">
     <template slot="waiting">
       <div>
         <img src="@/assets/loading.gif" />
@@ -11,22 +15,26 @@
     </template>
   </v-wait>
 
-   <b-container fluid class="bv-example-row">
+          <div class="row text-center">
+            <div class="col-12">
+              <b>Swarmlab <span class="text-info">Base MicroServices</span></b>
+            </div>
+          </div>
+
+<br>
+
+
+
+
+  <div class="input-group input-group-sm sm-3">
+  </div>
 
 		<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"
+				placeholder="Search"
 				v-model="searchFor"
 				@keyup.enter="setFilter"
 				>
@@ -48,10 +56,17 @@
 					Reset</button>
 			</div>
     </div>
+
+		<div class="input-group-append"
+      v-if="viewhybridoptions && heavy"
+    >
+    <p class="text-danger">{{ heavytext }}</p>
+    </div>
+
 		<div class="white h-100 flex-fixed-width-item"
 			<vuetable 
 				ref="vuetable"
-				:key="vuetablekeyl"
+				:key="vuetablekeygmybuildservice1"
 				:api-url='apiurl'
 				:api-mode="true"
 				:http-options="httpOptions"
@@ -74,36 +89,21 @@
 				 >
 
         <div slot="actions" slot-scope="props">
+          <div class="d-flex justify-content-center">
             <button
-              v-if="actionrowindex == props.rowIndex"
-              class="ti-more-alt btn btn-secondary btn-sm"
+              class="ti-cloud-up btn btn-outline-secondary btn-sm"
+              title="Upload MicroService"
               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)">
+              @click="onAction('upload-item', props.rowData, props.rowData._id)">
             </button>
+          <button
+            class="ti-info btn btn-outline-secondary btn-sm"
+              title="MicroService Info"
+            round
+            @click="onAction('view-item', props.rowData, props.rowData._id)">
+          </button>
+				 </div>
 				</div>
-
-
-        <div slot="actionslocal" slot-scope="props">
-          <div class="d-flex justify-content-center"
-              v-if="checkbuildrowindex(props.rowData,props.rowIndex)"
-          >
-            <button
-              v-if="testactionrowindex[props.rowData.name] == props.rowIndex"
-              class="ti-trash btn btn-info btn-sm"
-              title="Remove Box_Instance"
-              round
-              @click="onAction('delete-item', props.rowData, props.rowIndex)"
-              >
-            </button>
-          </div>
-        </div>
-
 			</vuetable>
 			<div class="vuetable-pagination ui basic segment grid">
 				<vuetable-pagination-info 
@@ -132,6 +132,8 @@ 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";
+import {ApiConfigWEB} from "@/config/index-web";
+
 export default {
   components: {
       card,
@@ -144,11 +146,32 @@ export default {
   },
   data() {
    return{
-    actionrowindex:'',
+   testactionrowindex:[],  // downloaded          used in installed
+   teststatusindex:[],     // status stop run     used in status
+   testtest:[],             // up or down services
+   testtestdir:[],             // install download or not service
+	  hybridoptions: {
+      'index':'',            
+      'swarmlabname':'',            
+      'size':'',            
+      'port':''            
+    },
+    viewhybridoptions: false,
+    heavy: false,
+    heavytext: '',
+    customedit: false,
+    custommenouopen: false,
+    custommenou: false,
+    custom: {
+			'os':'',
+			'sh':''
+    },
+    customostext: '',
+    customshtext: '',
+    up_name:'',
+    swarmlab:{},
 	  playbookInfo: {},
     token: '',
-    build_file :{},
-   testactionrowindex:[],  // downloaded          used in installed
 	  playbook: {
 			'title':'',
 			'name':'',
@@ -168,36 +191,17 @@ export default {
 		showModal: false,
 		visibility: [],
 	 	active:false,
-	 	rmbox:{},
-		vuetablekeyl:0,
+    vuetablekeygmybuildservice1:0,
+		vuetablekeygslot:0,
 		fielddata:{},
-		fields: [ 
-          {
-        name: 'name',
+    fields: [
+      {
+        name: 'swarmlabname',
         title: '<span class="orange"></span>Name',
-        sortField: 'name',
+        sortField: 'swarmlabname',
         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
-          }
-        }
-
+        dataClass: 'left aligned col-3',
+        width: '68%'
       },
       {
         name: '_id',
@@ -205,47 +209,43 @@ export default {
         visible:false
       },
       {
-        name: 'Status',
-        title: '<span class="orange"></span>Status',
-        sortField: 'Status',
+        name: 'description',
+        sortField: 'gitrepoCloneUrl',
         titleClass: 'center aligned',
-        visible:true,
-        width: '10%'
+        dataClass: 'left aligned w-25',
+        visible:false,
+        width: '15%'
       },
       {
-        name: 'ID',
-        sortField: 'ID',
+        name: 'gitrepoFullName',
+        sortField: 'gitrepoFullName',
         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',
+          titleClass: 'col text-center',
           dataClass: 'center aligned',
-          width: '5%'
+          width: '10%'
         },
-		],
-		apiurl:ApiConfig.url_80+"/buildservices",
-		//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
+    ],
+		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridmicroservices",
 		css: CssConfig,
-    perpage: 5,
+    perpage: 8,
     searchFor: '',
 		sortOrder: [{
-				field: 'name',
+				field: 'pipelinename',
 				direction: 'asc'
 		}],
     multiSort: true,
     paginationComponent: 'vuetable-pagination',
+    currentpage:'1',
+    currentpagepaginationData: {},
+    dataselect:'',
+    indexselect:'',
 		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"} },
@@ -253,67 +253,22 @@ export default {
 		],
 		moreParams: { 
 				'filter':  '',
-				'type':  'scripts',
-				'tutor':  'yes'
+				'type':  'scripts'
 			},
 	 
 		}
   },
 	mounted() {
-		this.$root.$on('SERVER_build_closebuild', (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! '
-                  })
-        }
-        this.refreshVuetable()
-		})
 	},
-	created() {
+	async created() {
     var url_string = window.location.href
     var url = new URL(url_string);
     this.token = url.searchParams.get("token");
+		//await this.checkactionrowindexall()
+    this.$root.$emit('hybrid_build_micro_service_menou')
     //console.log("token "+ this.token);
-
 	},
     beforeDestroy () {
-		  this.$root.$off('SERVER_build_closebuild')
  },
   computed: {
 		httpOptions() {
@@ -325,32 +280,9 @@ export default {
 	},
 
   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())
-		},
+    async refreshVuetable() {
+					this.vuetablekeygmybuildservice1 += 1
+      },
 		setFilter () {
 				this.moreParams = {
 						'filter':  this.searchFor,
@@ -361,109 +293,65 @@ export default {
 		resetFilter () {
 				this.moreParams = {}
 				this.searchFor = ''
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
+				this.moreParams = {
+						'filter':  '',
+						'type':    'scripts'
+				}
+        Vue.nextTick( () => this.refreshVuetableall())
 		},
    onPaginationData (paginationData) {
       this.$refs.pagination.setPaginationData(paginationData)
 			this.$refs.paginationInfo.setPaginationData(paginationData) 
+      this.currentpagepaginationData = paginationData
     },
     onChangePage (page) {
+      this.currentpage = page
       this.$refs.vuetable.changePage(page)
     },
     editRow(rowData) {
       alert("You clicked edit on"+ JSON.stringify(rowData));
 		},
     async onAction (action, data, index) {
-      this.actionrowindex = index
-      this.rmbox = data
-			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' ){
-               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">
-                        Remove
-                      </p>
-                    </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: 'Remove the box! '
-            }).then((result)=> {
-              this.removeAndClose(result);
-            })
-          console.log('data da1 '+JSON.stringify(data))
-			}else if(action == 'run-item' ){
-			}
-    },
-      async removeAndClose(result){
-          var obj = {}
-          obj.instance = this.rmbox.name
-          obj.dir = this.rmbox.dir
-          obj.config = this.rmbox.config
-          if (result.isConfirmed) {
-            //console.log('value obj11111111111111111111111 '+ JSON.stringify(result))
-            var res1 = await store.dispatch('pipelineLLO/rmbuildstatus', obj)
-            console.log('value objdata111111111111111111 '+ JSON.stringify(res1))
-            if(res1.data.data == 'yes'){
-              Vue.delete(this.testactionrowindex, data.name)
-              Vue.nextTick( () => this.$refs.vuetable.refresh())
-            }
-          }else  {
-            console.log('no')       
-          }
-      },
-		async checkbuildrowindex(data,index){
-        if(this.testactionrowindex[index] == index){
-            var obj = {}
-            obj.token = this.token
-            obj.instance = data.name
-            var res1 = await store.dispatch('pipelineLLO/getbuildstatus', obj)
-            if(res1.data.data == 'yes'){
-              Vue.set(this.testactionrowindex, data.name, index)
-            }else{
-              Vue.delete(this.testactionrowindex, data.name)
+          this.swarmlab=data
+          var container=this.swarmlab
+          var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname)
+
+          var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
+          var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
+          var swarmlab1info=res.data.swarmlabinfo
+          var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
+          if(res.data.error25=="ok"){
+                var winfo=''
+                var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
+                this.$swal({
+                  type: 'info',
+                  html: info+winfo,
+                  showCloseButton: true,
+                  showLoaderOnConfirm: false,
+                  allowOutsideClick: false,
+                  showLoaderOnConfirm: false,
+                  reverseButtons: true,
+                  focusCancel: true
+                })
             }
-            console.log('resi NO3 '+JSON.stringify(this.testactionrowindex))
-        }else{
-              var obj = {}
-              obj.token = this.token
-              obj.instance = data.name
-              var res = await store.dispatch('pipelineLLO/getbuildstatus', obj)
-              if(res.data.data == 'yes'){
-                  Vue.set(this.testactionrowindex, index, index)
-                }else{
-                  Vue.delete(this.testactionrowindex, data.name)
-                }
-                console.log('resi NO2 '+JSON.stringify(this.testactionrowindex))
-          }
-		},
-    refreshVuetable() {
-			this.$nextTick(()=>{
-					this.vuetablekeyl += 1
+
+			}else if(action == 'upload-item' ){
+				var log = await store.dispatch("pipelineLLO/getmyservices",{
+					token:this.token,
+					service:data.swarmlabname
 				})
+        this.swarmlab=data
+          var service = {
+              data:    data,
+              log:    log
+            }
+        this.$root.$emit('hybrid_build_micro_service', service)
+			}
+    },
+    async refreshVuetable() {
+		    //await this.checkactionrowindexall()
+					this.vuetablekeygslot += 1
       },
 		playbookinfoShow(value) {
 				return this.visibility[value]=true
@@ -485,16 +373,6 @@ export default {
 				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')

src/components/mynetwork/customservices.vue

@@ -0,0 +1,821 @@
+<template>
+  <card class="card-user" style="max-height:100%"
+		v-show="menou"
+	>
+      <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="row"
+   v-if="menouselect"
+ >
+    <div class="col-sm-12 sm-12">
+    	<b-form-select v-model="selected" :options="options" size="sm" class="mt-3"
+			    @change="setservice">
+      ></b-form-select>
+    </div>
+  </div>
+
+ <div class="row">
+    <div class="col-sm-12 sm-12">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend1">Base Service Name</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control text-success" 
+				  v-model="form_baseservice"
+				  disabled
+					aria-describedby="validationTooltipUsernamePrepend1" 
+				>
+      </div>
+    </div>
+  </div>
+
+   <ValidationProvider
+			ref="hybrid_stackname"
+			name="myServicename"
+			rules="required|alpha_num_name"
+			v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+		>
+ <div class="row">
+			<div class="col-sm-12 sm-12">
+       <div class="input-group input-group-sm sm-3">
+        <div class="input-group-prepend">
+          <span class="input-group-text" >Service &nbsp; Name</span>
+        </div>
+				<input 
+					type="text" 
+					class="form-control" 
+					v-bind:class="{'is-valid': isDeployValid.stackname == 1, 'is-invalid': isDeployValid.stackname == 2}"
+          aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+					v-model="form_myservicename"
+					v-on:keyup="isValid('stackname')"
+					v-on:blur="isValid('stackname')"
+					v-on:input="isValid('stackname')"
+					v-on:change="isValid('stackname')"
+					v-on:focus="isValid('stackname')"
+
+          data-vv-as='"nyServicename"'
+          data-vv-value-path="form_myservicename"
+          data-vv-name="form_myservicename"
+
+				>
+			 </div>
+			</div>
+  </div>
+	  <span class="hybrid-field-error">{{ errors[0] }}</span>
+	 </ValidationProvider>
+
+   <ValidationProvider
+			ref="hybrid_stackversion"
+			name="myVersion"
+			rules="required|alpha_num_name"
+			v-slot="{ errors, ariaMsg, ariaInput,   valid, invalid }"
+		>
+				 <div class="row">
+						<div class="col-sm-12 sm-12">
+						 <div class="input-group input-group-sm sm-3">
+        <div class="input-group-prepend">
+          <span class="input-group-text" >Service Version</span>
+        </div>
+							<input 
+								type="text" 
+								class="form-control" 
+									aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+									v-bind:class="{'is-valid': isDeployValid.stackversion == 1, 'is-invalid': isDeployValid.stackversion == 2}"
+								name="myVersion"  
+								v-model="form_version"
+								v-on:keyup="isValid('stackversion')"
+                v-on:blur="isValid('stackversion')"
+                v-on:input="isValid('stackversion')"
+                v-on:change="isValid('stackversion')"
+                v-on:focus="isValid('stackversion')"
+							>
+						</div>
+					 </div>
+					</div>
+	  <span class="hybrid-field-error">{{ errors[0] }}</span>
+	 </ValidationProvider>
+
+ <div class="row">
+    <div class="col-sm-12 sm-12">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend">Git-repo</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_gitrepo"
+					name="validationTooltipUsername" 
+					aria-describedby="validationTooltipUsernamePrepend" 
+				>
+      </div>
+    </div>
+  </div>
+
+
+    <div class="row"
+      <b-col  class="text-center" cols="12" sm="12"  md="12">
+        <div class="form-group">
+          <label for="customreadme" class="text-dark"> <b>README </b>  <br>
+          </label>
+          <textarea class="form-control" name="customreadme" rows="8"
+				      v-model="form_readme"
+          >
+          {{ form_readme }}
+          </textarea>
+        </div>
+      </b-col>
+    </div>
+
+
+    <div class="row"
+      <b-col  class="text-center" cols="12" sm="12"  md="12">
+        <div class="form-group">
+          <label for="custompackages" class="text-dark"><b>Add Extrapackages</b>  <br>
+          <span class="text-success">
+          {{ customostext }}
+          </span >
+          </label>
+          <textarea class="form-control" name="custompackages" rows="8"
+				      v-model="form_os"
+          >
+          {{ form_os }}
+          </textarea>
+        </div>
+      </b-col>
+    </div>
+
+    <div class="row"
+      <b-col  class="text-center" cols="12" sm="12"  md="12">
+        <div class="form-group">
+          <label for="customshell" class="text-dark"><b>Custom sh script</b> <br>
+          <span class="text-success">
+          {{ customshtext }}
+          </span >
+          </label>
+          <textarea class="form-control" name="customshell" rows="8"
+				      v-model="form_sh"
+          >
+          {{ form_sh }}
+          </textarea>
+        </div>
+      </b-col>
+    </div>
+
+ <div class="row">
+    <div class="col-sm-3 sm-3">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend">Port</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_port1"
+					aria-describedby="validationTooltipUsernamePrepend" 
+				>
+      </div>
+    </div>
+
+    <div class="col-sm-4 sm-4">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_url1"
+          placeholder="http/https"
+					aria-describedby="validationTooltipUsernamePrepend" 
+				>
+      </div>
+    </div>
+
+    <div class="col-sm-5 sm-5">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend1a">Name</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_name1"
+					aria-describedby="validationTooltipUsernamePrepend1a" 
+				>
+      </div>
+    </div>
+
+  </div>
+
+ <div class="row">
+    <div class="col-sm-3 sm-3">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend2">Port</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_port2"
+					aria-describedby="validationTooltipUsernamePrepend2" 
+				>
+      </div>
+    </div>
+
+
+    <div class="col-sm-4 sm-4">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_url2"
+          placeholder="http/https"
+					aria-describedby="validationTooltipUsernamePrepend" 
+				>
+      </div>
+    </div>
+
+    <div class="col-sm-5 sm-5">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend2a">Name</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_name2"
+					aria-describedby="validationTooltipUsernamePrepend2a" 
+				>
+      </div>
+    </div>
+
+  </div>
+
+ <div class="row">
+    <div class="col-sm-3 sm-3">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend3">Port</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_port3"
+					aria-describedby="validationTooltipUsernamePrepend2" 
+				>
+      </div>
+    </div>
+
+    <div class="col-sm-4 sm-4">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend">URI</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_url3"
+          placeholder="http/https"
+					aria-describedby="validationTooltipUsernamePrepend" 
+				>
+      </div>
+    </div>
+
+    <div class="col-sm-5 sm-5">
+      <div class="input-group">
+        <div class="input-group-prepend">
+          <span class="input-group-text" name="validationTooltipUsernamePrepend3a">Name</span>
+        </div>
+        <input 	
+					type="text" 
+					class="form-control" 
+				  v-model="form_name3"
+					aria-describedby="validationTooltipUsernamePrepend3a" 
+				>
+      </div>
+    </div>
+
+  </div>
+
+
+    <div class="row"
+      <b-col  class="text-center" cols="12" sm="12"  md="12">
+        <div class="form-group">
+          <label for="rclocal" class="text-dark"><b>rc.local</b> <br>
+          <span class="text-success">
+          {{ customshtext }}
+          </span >
+          </label>
+          <textarea class="form-control" name="rclocal" rows="8"
+				      v-model="form_rclocal"
+          >
+          {{ form_rclocal }}
+          </textarea>
+        </div>
+      </b-col>
+    </div>
+
+ <div class="row">
+    <div class="col-sm-12 sm-12 float-right">
+  			<button 
+          class="btn btn-outline-info  btn-sm float-right"
+					type="submit"
+					@click="save"
+				>Save Microservice</button>
+  			<button 
+          class="btn btn-outline-warning  btn-sm float-right"
+					type="submit"
+					@click="cancel"
+				>Cancel</button>
+    </div>
+  </div>
+
+
+      </b-container>
+  </card>
+</template>
+<script>
+import store from '@/store/index'
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import card from '@/components/Card.vue'
+import {ApiConfig} from "@/config/index";
+import { ValidationObserver, ValidationProvider, extend } from 'vee-validate';
+//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'
+});
+
+
+extend('alpha_num_name', value => {
+ var regex = new RegExp(/^[A-Za-z0-9]+$/, 'i');
+  if(regex.test(value)){
+    return true;
+  }
+  return 'The {_field_} field may contain alphabetic characters and numbers'
+});
+
+
+
+
+export default {
+  components: {
+      ValidationProvider,
+      card
+	},
+  props: {
+  },
+  data() {
+   return{
+    customostext: '',
+    customshtext: '',
+    menou: false,
+     custom: {
+			'os':'',
+			'sh':'',
+     },
+     customserviceall: [],
+			'form_baseservice':'',
+			'form_myservicename':'',
+			'form_os':'',
+			'form_sh':'',
+      'form_readme': '',
+			'form_version':'',
+			'form_rclocal':'',
+      'form_url1':'',
+      'form_url2':'',
+      'form_url3':'',
+			'form_port1':'',
+			'form_name1':'',
+			'form_port2':'',
+			'form_name2':'',
+			'form_port3':'',
+			'form_name3':'',
+			'form_gitrepo':'',
+     customservice: {
+			'myservicename':'',
+			'os':'',
+			'sh':'',
+      'readme': '',
+			'microservice':'',
+			'version':'',
+			'rclocal':'',
+      'url1':'',
+      'url2':'',
+      'url3':'',
+			'port1':'',
+			'name1':'',
+			'port2':'',
+			'name2':'',
+			'port3':'',
+			'name3':'',
+			'gitrepo':''
+     },
+     addNetworkMenou:false,
+     issocket:'close',
+    isDeployValid:{
+      "stackname":3,
+      "stackversion":3
+      },
+    isDeployError:{
+      },
+  			selected: 1,
+        menouselect: false,
+        options: [
+         {"value":99999,"text":"Please select an option"}
+        ]
+		}
+  },
+  beforeMount () {
+  },
+	mounted() {
+		this.$root.$on('hybrid_build_micro_service_menou', ()  => {
+			this.menou = false
+      //console.log('false')
+    })
+		this.$root.$on('hybrid_build_micro_service', (service) => {
+      //console.log(service);
+			this.menou = true
+			this.myservicename = {}
+			this.customserviceall = []
+			this.options = []
+			this.customservice = {}
+      this.menouselect = false
+			this.customservice.microservice = service.data.swarmlabname	
+
+      if( service.log.hasOwnProperty('data')){
+      	if( service.log.data.hasOwnProperty('data')){
+           if(service.log.data.data){
+              //const cc = service.log.data.data.filter(item => item.service === '0').length; 
+              var cc = Object.keys(service.log.data.data).length;
+              if(cc > 0){
+                if(cc > 1){
+                	this.menouselect = true
+								}
+              	cc--
+							}
+                //console.log(cc)
+							this.customservice.myservicename	= service.log.data.data[cc].service
+							this.customservice.baseservice		=	service.log.data.data[cc].baseservice
+							this.customservice.sh							= service.log.data.data[cc].sh
+							this.customservice.os							= service.log.data.data[cc].packages
+							this.customservice.readme					= service.log.data.data[cc].readme
+							this.customservice.gitrepo				= service.log.data.data[cc].gitrepo
+							this.customservice.version				= service.log.data.data[cc].serviceversion
+							this.customservice.rclocal				= service.log.data.data[cc].rclocal
+
+							this.customservice.url1    			  = service.log.data.data[cc].url1
+							this.customservice.url2    			  = service.log.data.data[cc].url2
+							this.customservice.url3    			  = service.log.data.data[cc].url3
+							this.customservice.port1    			= service.log.data.data[cc].port1
+							this.customservice.name1    			= service.log.data.data[cc].name1
+							this.customservice.port2    			= service.log.data.data[cc].port2
+							this.customservice.name2    			= service.log.data.data[cc].name2
+							this.customservice.port3    			= service.log.data.data[cc].port3
+							this.customservice.name3    			= service.log.data.data[cc].name3
+              this.setserviceform(this.customservice) 
+
+							for (let i = 0; i <= cc; i++) {
+								  let option = { 
+									  value: i,
+									  text: service.log.data.data[i].service
+                  }
+                  Vue.set(this.options, i, option)
+                  this.selected = i
+							}
+							this.customserviceall				= service.log.data.data
+                console.log('customall2 '+ JSON.stringify(this.customservice.myservicename))
+                console.log('customall1 '+ JSON.stringify(service.log.data.data[cc]))
+                console.log('customall '+ JSON.stringify(this.customserviceall))
+						}
+      	}
+      }
+         this.selected++
+         var vtmp1 = {"value":this.selected,"text":"Please select an option"}
+         Vue.set(this.options, this.selected, vtmp1)
+                console.log('options '+ JSON.stringify(this.options))
+
+		})
+
+		this.$root.$on('hybrid_build_micro_myservice', (service) => {
+      console.log(service);
+			this.menou = true
+			this.myservicename = {}
+			this.customserviceall = []
+			this.customservice = {}
+      this.menouselect = false
+			this.customservice.microservice = service.data.swarmlabname	
+
+      if( service.log.hasOwnProperty('data')){
+      	if( service.log.data.hasOwnProperty('data')){
+           if(service.log.data.data){
+							this.customservice.myservicename	= service.log.data.data.service
+							this.customservice.baseservice		=	service.log.data.data.baseservice
+							this.customservice.sh							= service.log.data.data.sh
+							this.customservice.os							= service.log.data.data.packages
+							this.customservice.readme					= service.log.data.data.readme
+							this.customservice.gitrepo				= service.log.data.data.gitrepo
+							this.customservice.version				= service.log.data.data.serviceversion
+							this.customservice.rclocal				= service.log.data.data.rclocal
+
+							this.customservice.url1    			  = service.log.data.data.url1
+							this.customservice.url2    			  = service.log.data.data.url2
+							this.customservice.url3    			  = service.log.data.data.url3
+							this.customservice.port1    			= service.log.data.data.port1
+							this.customservice.name1    			= service.log.data.data.name1
+							this.customservice.port2    			= service.log.data.data.port2
+							this.customservice.name2    			= service.log.data.data.name2
+							this.customservice.port3    			= service.log.data.data.port3
+							this.customservice.name3    			= service.log.data.data.name3
+              this.setserviceform(this.customservice) 
+						}
+      	}
+      }
+
+		})
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+      var log = store.dispatch("pipelineLLO/settoken",{
+        token:this.token
+      })
+
+	},
+    beforeDestroy () {
+			this.$root.$off('hybrid_build_micro_service')
+			this.$root.$off('hybrid_build_micro_myservice')
+			this.$root.$off('hybrid_build_micro_service_menou')
+ },
+  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 save() {
+     (async () => {
+          var isAllValid = true
+          for (const [key, value] of Object.entries(this.isDeployValid)) {
+            //console.log(`${key}: ${value}`);
+            if(value != 1){
+              isAllValid = false
+            }
+          }
+ 				if(isAllValid){
+						
+              var log = await store.dispatch("pipelineLLO/addmycustomservice",{
+                token:this.token,
+								service:        this.form_myservicename,
+								readme:         this.form_readme,
+								baseservice:    this.form_baseservice,
+								sh:             this.form_sh,
+								packages:       this.form_os,
+								gitrepo:        this.form_gitrepo,
+								serviceversion: this.form_version,
+								rclocal:        this.form_rclocal,
+								url1:           this.form_url1,
+								url2:           this.form_url2,
+								url3:           this.form_url3,
+								port1:          this.form_port1,
+								name1:          this.form_name1,
+								port2:          this.form_port2,
+								name2:          this.form_name2,
+								port3:          this.form_port3,
+								name3:          this.form_name3
+              })
+            //  this.$root.$emit('hybrid_refresh_bootstrap_view')
+            //  this.$root.$emit('hybrid_refresh_bootstrap_view')
+						
+    	  			console.log(this.customservice);
+    	  			//console.log(log);
+              if(log.data.action == 'ok'){
+                  var info = "Your upload was successful!"
+                  this.$swal({
+                    type: 'Info',
+                    title: 'Info!',
+                    icon:'info',
+                    html: info,
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: true,
+                    confirmButtonText: 'Ok!'
+                  })
+              this.$root.$emit('hybrid_build_micro_service_menou_refreshtable')
+
+              }else{
+                  var info = "Service upload error "
+                  this.$swal({
+                    type: 'Info',
+                    title: 'Info!',
+                    icon:'error',
+                    html: info,
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: true,
+                    confirmButtonText: 'Ok!'
+                  })
+              }
+          }else{
+              var info = "Missing required fields"
+              this.$swal({
+                type: 'Info',
+                title: 'Info!',
+                icon:'info',
+                html: info,
+                showCloseButton: true,
+                showLoaderOnConfirm: false,
+                allowOutsideClick: false,
+                cancelButtonText: 'No, cancel!',
+                showCancelButton: false,
+                showLoaderOnConfirm: false,
+                reverseButtons: true,
+                focusCancel: true,
+                confirmButtonText: 'Ok!'
+              })
+
+         }
+      })();
+
+		},
+    cancel() {
+    	//console.log('cancel');
+			this.menou = false
+		},
+    setserviceform(data) {
+      this.form_myservicename	  = data.myservicename
+      this.form_baseservice			=	data.baseservice
+      this.form_sh							= data.sh
+      this.form_os							= data.os
+      this.form_readme					= data.readme
+      this.form_gitrepo				  = data.gitrepo
+      this.form_version				  = data.version
+      this.form_rclocal				  = data.rclocal
+
+      this.form_url1    			  = data.url1
+      this.form_url2    			  = data.url2
+      this.form_url3    			  = data.url3
+      this.form_port1    			  = data.port1
+      this.form_name1    			  = data.name1
+      this.form_port2    			  = data.port2
+      this.form_name2    			  = data.name2
+      this.form_port3    			  = data.port3
+      this.form_name3    			  = data.name3
+      //console.log(data)
+      //console.log(data.myservicename)
+      //console.log(this.form_myservicename)
+		},
+    setservice() {
+    	//console.log(this.selected);
+    	var cc = this.selected
+      console.log('sel '+ JSON.stringify(this.customserviceall[cc]))
+
+      this.customservice.myservicename	= this.customserviceall[cc].service
+
+      this.customservice.baseservice					=	this.customserviceall[cc].baseservice
+      this.customservice.sh							= this.customserviceall[cc].sh
+      this.customservice.os							= this.customserviceall[cc].packages
+      this.customservice.readme					= this.customserviceall[cc].readme
+      this.customservice.gitrepo				= this.customserviceall[cc].gitrepo
+      this.customservice.version				= this.customserviceall[cc].serviceversion
+      this.customservice.rclocal				= this.customserviceall[cc].rclocal
+
+      this.customservice.url1    			  = this.customserviceall[cc].url1
+      this.customservice.url2    			  = this.customserviceall[cc].url2
+      this.customservice.url3    			  = this.customserviceall[cc].url3
+      this.customservice.port1    			= this.customserviceall[cc].port1
+      this.customservice.name1    			= this.customserviceall[cc].name1
+      this.customservice.port2    			= this.customserviceall[cc].port2
+      this.customservice.name2    			= this.customserviceall[cc].name2
+      this.customservice.port3    			= this.customserviceall[cc].port3
+      this.customservice.name3    			= this.customserviceall[cc].name3
+
+      //this.customservice.readme	= 'xxxxxxxxxxxxxxxxxx'
+      //Vue.set(this.customservice, 'readme', 'xxxxxxxxxxxxxxxxxxxxxxxxx' )
+      //console.log('sel1 '+ JSON.stringify(this.customservice))
+      this.setserviceform(this.customservice) 
+		},
+   async isValid(f){
+
+     if(f == 'stackname'){
+        var field = await this.$refs.hybrid_stackname.validate();
+        if(field.valid == true){
+          this.isDeployValid.stackname = 1
+        }else{
+          this.isDeployValid.stackname = 2
+        }
+     }
+     else if(f == 'stackversion'){
+        var field = await this.$refs.hybrid_stackversion.validate();
+        if(field.valid == true){
+          this.isDeployValid.stackversion = 1
+        }else{
+          this.isDeployValid.stackversion = 2
+        }
+     }
+ }
+
+
+
+
+
+  },
+
+  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>

src/components/mynetwork/mytable.vue

@@ -362,6 +362,11 @@ export default {
        'server_ip':''
      },
      CONFIGallowed_ips:'',
+     swarmlabnamecustomstart:{},
+     swarmlabnamecustomdata:{},
+     swarmlabnamecustom:'',
+     swarmlabnamecustomservice:'',
+     swarmlabnamecustomuser:'',
      swarmlabname:'swarmlab-sec',
      swarmlabname_port:'',
      swarmlabname_size:3,
@@ -408,6 +413,23 @@ export default {
 							this.webinterfacegenericedit = true
 						}
       }
+
+//EDITORcustom
+ (async () => {
+        var strbase = '_masterservice_1'
+        var sRegExInput1 = new RegExp(strbase, 'g');    
+        var getcustomnames = this.hybridshowdata.Names.replace(sRegExInput1 ,'');
+        var logdatacustom =  await store.dispatch("pipelineLLO/getinstallcustom",{
+          token:this.token,
+          instance:getcustomnames
+          })
+              //console.log(logdatacustom.data);
+      if(logdatacustom.data && logdatacustom.data.data){
+              //console.log(logdatacustom.data.data);
+          var urlgeniGUIEDITOR = this.hybridshowdata.Names.split('_');
+					this.webinterfacegenericedit = true
+      }
+})();
        var urlgeniGUI = this.hybridshowdata.Names.split('_');
       // GUI firefox  
       for(var i = 0; i < ApiConfigGUI.length; i++) {
@@ -447,6 +469,21 @@ export default {
         //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
 				this.onAction('start')
 		})
+// from available servicescustom socket run here
+		this.$root.$on('hybrid_start_instance_custom', (data) => {
+      this.swarmlabnamecustomdata = data.baseservicedata
+        //this.hybridoptions.baseservicedata
+      //this.swarmlabname = data.swarmlabname
+      this.swarmlabnamecustomstart = data
+      if(data.size){
+        this.swarmlabname_size = data.size
+      }
+      if(data.port){
+        this.swarmlabname_port = data.port
+      }
+        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
+				this.onAction('startcustom')
+		})
 		this.$root.$on('hybrid_start_instance_storage', (data) => {
               var obj = {}
               obj.action = 'up'
@@ -493,6 +530,16 @@ export default {
       //this.swarmlabname_port = data.port
 			this.onAction('install')
 		})
+// from available myservices socket run here
+		this.$root.$on('hybrid_install_instance_custom', (data) => {
+      this.swarmlabnamecustomdata = data.baseservicedata
+      this.swarmlabnamecustom = data.baseservice
+      this.swarmlabnamecustomservice = data.service
+      this.swarmlabnamecustomuser = data.user
+      this.swarmlabname_git = data.git
+      //this.swarmlabname_port = data.port
+			this.onAction('installcustom')
+		})
 // from available storage socket run here
 		this.$root.$on('hybrid_install_instance_storage', (data) => {
       //this.swarmlabname = data.swarmlabname
@@ -545,9 +592,11 @@ export default {
     beforeDestroy () {
 		this.$root.$off('hybrid_show_info')
 		this.$root.$off('hybrid_start_instance')
+		this.$root.$off('hybrid_start_instance_custom')
 		this.$root.$off('hybrid_stop_instance')
 		this.$root.$off('hybrid_connect_server')
 		this.$root.$off('hybrid_install_instance')
+		this.$root.$off('hybrid_install_instance_custom')
 		this.$root.$off('hybrid_install_instance_storage')
 		this.$root.$off('SERVER_build_vmlist')
 		this.$root.$off('SERVER_build_kill')
@@ -636,6 +685,11 @@ export default {
                //console.log('start ' + JSON.stringify(log))	
                //console.log('startobj ' + JSON.stringify(obj))	
               ////console.log(this.$socket.client.connect())
+          }else if(action == 'startcustom'){
+              this.$socket.client.open();
+              //this.$socket.client.emit('start', this.swarmlabnamecustomstart);
+              this.swarmlabnamecustomstart.baseservicedata = this.swarmlabnamecustomdata
+              this.$socket.client.emit('startcustom', this.swarmlabnamecustomstart);
           }else if(action == 'basedireditor'){
               this.$wait.start('myRunInstanceeditor');
               //console.log('volumes-from-------- ' + JSON.stringify(this.hybridshowdata.Names))	
@@ -953,6 +1007,17 @@ if(pocurlcodeserver != 'no'){
       var pocurletherpadservertapp2text = 'no'
       var pocurletherpadservertapp3 = 'no'
       var pocurletherpadservertapp3text = 'no'
+
+      var pocurletherpadservertapp3port1 = 'no'
+      var pocurletherpadservertapp3textport1 = 'no'
+      var pocurletherpadservertapp3port2 = 'no'
+      var pocurletherpadservertapp3textport2 = 'no'
+      var pocurletherpadservertapp3port3 = 'no'
+      var pocurletherpadservertapp3textport3 = 'no'
+      var pocurletherpadservertapp3port4 = 'no'
+      var pocurletherpadservertapp3textport4 = 'no'
+      var pocurletherpadservertapp3port5 = 'no'
+      var pocurletherpadservertapp3textport5 = 'no'
       for(var i = 0; i < ApiConfigWEB.length; i++) {
           var obWEB = ApiConfigWEB[i];
 						if(obWEB.name == urlgenWEB[0]){
@@ -1032,7 +1097,197 @@ if(pocurlcodeserver != 'no'){
                 }
 						}
       }
-// -----
+
+// -------------------------------------------------------
+// ----- customservice
+// -------------------------------------------------------
+// ---------------------------
+// ------------------------- CUSTOM
+// -------------------------------------------------------
+        var strbase = '_masterservice_1'
+        var sRegExInput1 = new RegExp(strbase, 'g');    
+        var getcustomnames = this.hybridshowdata.Names.replace(sRegExInput1 ,'');
+        var logdatacustom = await store.dispatch("pipelineLLO/getinstallcustom",{
+          token:this.token,
+          instance:getcustomnames
+          })
+          console.log('---------------------')
+          console.log(logdatacustom.data)
+      if(logdatacustom.data && logdatacustom.data.data){
+      // EDITORcustom  
+          
+
+          var logdatacustomres = JSON.parse(logdatacustom.data.data)
+          var swarmlabinstance1cda1 = new RegExp("(->)"); 
+          if(swarmlabinstance1cda1.test(this.hybridshowdata.Ports)){
+            var splitcda1split = this.hybridshowdata.Ports.split(',')
+            for(var i1 = 0; i1 < splitcda1split.length; i1++) {                      
+
+// ---------------------------------
+              if(logdatacustomres.baseservicedata.ttyd){
+               var swarmlabinstance1cda1s1b = new RegExp(logdatacustomres.baseservicedata.ttydport); 
+                if(swarmlabinstance1cda1s1b.test(splitcda1split[i1])){
+                  var splitcda1bc = splitcda1split[i1].split(':')
+                  var splitcd1a1bc =  splitcda1bc[1].split('-')
+                  if(splitcd1a1bc[0]){
+                    pocurletherpadserverttyd = logdatacustomres.baseservicedata.ttydurl+'://localhost:'+splitcd1a1bc[0]+'/?token='+this.token
+                  }
+                }
+              }
+// ---------------------------------
+// ---------------------------------
+              if(logdatacustomres.baseservicedata.app){
+                 var swarmlabinstance1cda1s1 = new RegExp(logdatacustomres.baseservicedata.port); 
+                  if(swarmlabinstance1cda1s1.test(splitcda1split[i1])){
+                    var splitcda1 = splitcda1split[i1].split(':')
+                    var splitcd1a1 =  splitcda1[1].split('-')
+                    if(splitcd1a1[0]){
+                      pocurletherpadserver = logdatacustomres.baseservicedata.url+'://localhost:'+splitcd1a1[0]+'/?token='+this.token
+                    }
+                  }
+               }
+// ---------------------------------
+            // ---------------
+              if(logdatacustomres.baseservicedata.hasOwnProperty('app1')){
+                if(logdatacustomres.baseservicedata.app1){
+                 var swarmlabinstance1cda1s1bapp1 = new RegExp(logdatacustomres.baseservicedata.port1); 
+                  if(swarmlabinstance1cda1s1bapp1.test(splitcda1split[i1])){
+                    var splitcda1bcapp1 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp1 =  splitcda1bcapp1[1].split('-')
+                    if(splitcd1a1bcapp1[0]){
+                      pocurletherpadservertapp1 = logdatacustomres.baseservicedata.url1+'://localhost:'+splitcd1a1bcapp1[0]+'/?token='+this.token
+                      pocurletherpadservertapp1text = logdatacustomres.baseservicedata.link1
+                    }
+                  }
+                }
+              }
+            // ---------------
+
+            // ---------------
+              if(logdatacustomres.baseservicedata.hasOwnProperty('app2')){
+                if(logdatacustomres.baseservicedata.app2){
+                 var swarmlabinstance1cda1s1bapp2 = new RegExp(logdatacustomres.baseservicedata.port2); 
+                  if(swarmlabinstance1cda1s1bapp2.test(splitcda1split[i1])){
+                    var splitcda1bcapp2 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp2 =  splitcda1bcapp2[1].split('-')
+                    if(splitcd1a1bcapp2[0]){
+                      pocurletherpadservertapp2 = logdatacustomres.baseservicedata.url2+'://localhost:'+splitcd1a1bcapp2[0]+'/?token='+this.token
+                      pocurletherpadservertapp2text = logdatacustomres.baseservicedata.link2
+                    }
+                  }
+                }
+              }
+            // ---------------
+
+            // ---------------
+              if(logdatacustomres.baseservicedata.hasOwnProperty('app3')){
+                if(logdatacustomres.baseservicedata.app3){
+                 var swarmlabinstance1cda1s1bapp3 = new RegExp(logdatacustomres.baseservicedata.port3); 
+                  if(swarmlabinstance1cda1s1bapp3.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3 =  splitcda1bcapp3[1].split('-')
+                    if(+splitcd1a1bcapp3[0]){
+                      pocurletherpadservertapp3 = logdatacustomres.baseservicedata.url3+'://localhost:'+splitcd1a1bcapp3[0]+'/?token='+this.token
+                      pocurletherpadservertapp3text = logdatacustomres.baseservicedata.link3
+                    }
+                  }
+                }
+              }
+            // ---------------
+            var text4linkcustom = "Click to open "
+            // --------------- usercustom port1
+              if(logdatacustomres.servicedata.hasOwnProperty('port1')){
+                if(logdatacustomres.servicedata.port1){
+                 var swarmlabinstance1cda1s1bapp3port1 = new RegExp(logdatacustomres.servicedata.port1); 
+                  if(swarmlabinstance1cda1s1bapp3port1.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3port1 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3port1 =  splitcda1bcapp3port1[1].split('-')
+                    if(+splitcd1a1bcapp3port1[0]){
+                      pocurletherpadservertapp3port1 = logdatacustomres.servicedata.url1+'://localhost:'+splitcd1a1bcapp3port1[0]+'/?token='+this.token
+                      pocurletherpadservertapp3textport1 = text4linkcustom
+                      pocurletherpadservertapp3textport1 += logdatacustomres.servicedata.name1
+                    }
+                  }
+                }
+              }
+            // ---------------
+            // --------------- usercustom port2
+              if(logdatacustomres.servicedata.hasOwnProperty('port2')){
+                if(logdatacustomres.servicedata.port2){
+                 var swarmlabinstance1cda1s1bapp3port2 = new RegExp(logdatacustomres.servicedata.port2); 
+                  if(swarmlabinstance1cda1s1bapp3port2.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3port2 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3port2 =  splitcda1bcapp3port2[1].split('-')
+                    if(+splitcd1a1bcapp3port2[0]){
+                      pocurletherpadservertapp3port2 = logdatacustomres.servicedata.url1+'://localhost:'+splitcd1a1bcapp3port2[0]+'/?token='+this.token
+                      pocurletherpadservertapp3textport2 = text4linkcustom
+                      pocurletherpadservertapp3textport2 += logdatacustomres.servicedata.name2
+                    }
+                  }
+                }
+              }
+            // ---------------
+            // --------------- usercustom port3
+              if(logdatacustomres.servicedata.hasOwnProperty('port3')){
+                if(logdatacustomres.servicedata.port3){
+                 var swarmlabinstance1cda1s1bapp3port3 = new RegExp(logdatacustomres.servicedata.port3); 
+                  if(swarmlabinstance1cda1s1bapp3port3.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3port3 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3port3 =  splitcda1bcapp3port3[1].split('-')
+                    if(+splitcd1a1bcapp3port3[0]){
+                      pocurletherpadservertapp3port3 = logdatacustomres.servicedata.url3+'://localhost:'+splitcd1a1bcapp3port3[0]+'/?token='+this.token
+                      pocurletherpadservertapp3textport3 = text4linkcustom
+                      pocurletherpadservertapp3textport3 += logdatacustomres.servicedata.name3
+                    }
+                  }
+                }
+              }
+            // ---------------
+            // --------------- usercustom por4
+              if(logdatacustomres.servicedata.hasOwnProperty('port4')){
+                if(logdatacustomres.servicedata.port4){
+                 var swarmlabinstance1cda1s1bapp3port4 = new RegExp(logdatacustomres.servicedata.port4); 
+                  if(swarmlabinstance1cda1s1bapp3port4.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3port4 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3port4 =  splitcda1bcapp3port4[1].split('-')
+                    if(+splitcd1a1bcapp3port4[0]){
+                      pocurletherpadservertapp3port4 = logdatacustomres.servicedata.url4+'://localhost:'+splitcd1a1bcapp3port4[0]+'/?token='+this.token
+                      pocurletherpadservertapp3textport4 = text4linkcustom
+                      pocurletherpadservertapp3textport4 += logdatacustomres.servicedata.name4
+                    }
+                  }
+                }
+              }
+            // ---------------
+            // --------------- usercustom por5
+              if(logdatacustomres.servicedata.hasOwnProperty('port5')){
+                if(logdatacustomres.servicedata.port5){
+                 var swarmlabinstance1cda1s1bapp3port5 = new RegExp(logdatacustomres.servicedata.port5); 
+                  if(swarmlabinstance1cda1s1bapp3port5.test(splitcda1split[i1])){
+  //console.log('stringify---------  ' + JSON.stringify(splitcda1split[i1]));
+                    var splitcda1bcapp3port5 = splitcda1split[i1].split(':')
+                    var splitcd1a1bcapp3port5 =  splitcda1bcapp3port5[1].split('-')
+                    if(+splitcd1a1bcapp3port5[0]){
+                      pocurletherpadservertapp3port5 = logdatacustomres.servicedata.url5+'://localhost:'+splitcd1a1bcapp3port5[0]+'/?token='+this.token
+                      pocurletherpadservertapp3textport5 = text4linkcustom
+                      pocurletherpadservertapp3textport5 += logdatacustomres.servicedata.name5
+                    }
+                  }
+                }
+              }
+            // ---------------
+
+            }
+          }
+// -------------------------------------------------------
+// --------------------------- CUSTOM 
+// -------------------------------------------------------
+      }  // end CUSTOM
 /*
               var swarmlabinstance1ca1 = new RegExp("(microservice-etherpad)"); 
               var pocurletherpadserver = 'no'
@@ -1086,6 +1341,46 @@ if(pocurletherpadservertapp3 != 'no'){
   info +='</p>'
   info += '<hr>'
 }
+
+if(pocurletherpadservertapp3port1 != 'no'){
+  info += '<hr>'
+  info +='<p class="text-info">'
+  info += '<a class="text-info" href="'+pocurletherpadservertapp3port1+'" target="_blank"> ' + pocurletherpadservertapp3textport1 + '</a>'
+  info +='</p>'
+  info += '<hr>'
+}
+
+if(pocurletherpadservertapp3port2 != 'no'){
+  info += '<hr>'
+  info +='<p class="text-info">'
+  info += '<a class="text-info" href="'+pocurletherpadservertapp3port2+'" target="_blank"> ' + pocurletherpadservertapp3textport2 + '</a>'
+  info +='</p>'
+  info += '<hr>'
+}
+
+if(pocurletherpadservertapp3port3 != 'no'){
+  info += '<hr>'
+  info +='<p class="text-info">'
+  info += '<a class="text-info" href="'+pocurletherpadservertapp3port3+'" target="_blank"> ' + pocurletherpadservertapp3textport3 + '</a>'
+  info +='</p>'
+  info += '<hr>'
+}
+
+if(pocurletherpadservertapp3port4 != 'no'){
+  info += '<hr>'
+  info +='<p class="text-info">'
+  info += '<a class="text-info" href="'+pocurletherpadservertapp3port4+'" target="_blank"> ' + pocurletherpadservertapp3textport4 + '</a>'
+  info +='</p>'
+  info += '<hr>'
+}
+
+if(pocurletherpadservertapp3port5 != 'no'){
+  info += '<hr>'
+  info +='<p class="text-info">'
+  info += '<a class="text-info" href="'+pocurletherpadservertapp3port5+'" target="_blank"> ' + pocurletherpadservertapp3textport5 + '</a>'
+  info +='</p>'
+  info += '<hr>'
+}
 // -----
 
 var pocmypathinfo = ''
@@ -1142,6 +1437,17 @@ info +='This permits the docker user on the local machine to connect to X window
               obj.git = this.swarmlabname_git
               this.$socket.client.open();
               this.$socket.client.emit('install', obj);
+          }else if(action == 'installcustom'){
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.swarmlabname = this.swarmlabnamecustom
+              obj.user = this.swarmlabnamecustomuser
+              obj.service = this.swarmlabnamecustomservice
+              obj.baseservicedata = this.swarmlabnamecustomdata
+              obj.git = this.swarmlabname_git
+              this.$socket.client.open();
+              this.$socket.client.emit('installcustom', obj);
           }else if(action == 'container-stop'){
 				      // refresh adhocview.vue on console await 
              this.$root.$emit('SERVER_hybrid_table_start')

src/config/index-editor.js

@@ -133,5 +133,68 @@ export const ApiConfigEDIT = [
           "url": 'http',
           "version": 0,
           "port": 0
+    },
+    {
+          "name": "microservice-alpine313",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-alpine314",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-alpine315",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-debianbookworm",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-debianbuster",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-debianbullseye",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-awscli",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-perl",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
+    },
+    {
+          "name": "microservice-perlfull",
+          "automated": true,
+          "url": 'http',
+          "version": 0,
+          "port": 0
     }
 ];

src/config/index-web.js

@@ -377,6 +377,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-julia",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -387,6 +392,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-lua",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.12',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -397,6 +407,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-luajit",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.12',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -407,6 +422,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-nodesqlite3",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: ubuntu:20.04 LTS ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -427,6 +447,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-rubyfull",
           "large": 'Note that this image is somewhat heavy (~1GB).  It can take some time to build the Instance. If you think the proccess is frosen you can reload the page in your Browser',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -437,6 +462,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-ruby",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -447,6 +477,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-golangfull",
           "large": 'Note that this image is somewhat heavy (~1GB).  It can take some time to build the Instance. If you think the proccess is frosen you can reload the page in your Browser',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -457,6 +492,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-golang",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "6901/tcp",
@@ -477,6 +517,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-adminer",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": true,
           "url": 'http',
           "port": "8080/tcp",
@@ -487,6 +532,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-gcc",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "8080/tcp",
@@ -497,6 +547,11 @@ export const ApiConfigWEB = [
     {
          "name": "microservice-opencv",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:buster',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "8080/tcp",
@@ -517,6 +572,11 @@ export const ApiConfigWEB = [
     {
           "name": "microservice-phpapache",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "80/tcp",
@@ -535,6 +595,11 @@ export const ApiConfigWEB = [
     {
          "name": "microservice-wordpress",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": true,
           "url": 'http',
           "port": "80/tcp",
@@ -545,6 +610,11 @@ export const ApiConfigWEB = [
     {
          "name": "microservice-oletools",
           "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: python:3.11-rc-alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
           "app": false,
           "url": 'http',
           "port": "80/tcp",
@@ -607,4 +677,139 @@ export const ApiConfigWEB = [
           "ttydport": "3787/tcp",
           "ttydurl": 'http'
     },
+    {
+         "name": "microservice-alpine313",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.13',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-alpine314",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.14',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-alpine315",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.15',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-debianbookworm",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bookworm ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-debianbullseye",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-debianbuster",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:buster ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-awscli",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: alpine3.13',
+          "customos": 'apk add --no-cache net-tools ',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-perl",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
+    {
+         "name": "microservice-perlfull",
+          "large": 'no',
+          "custom": 'true',
+          "customostext": 'Base OS: debian:bullseye ',
+          "customos": 'apt-get update && apt-get install -y --no-install-recommends net-tools',
+          "customshtext": 'It is executed after all the normal builds',
+          "customsh": ' #!/bin/sh',
+          "app": false,
+          "url": 'http',
+          "port": "80/tcp",
+          "ttyd": true,
+          "ttydport": "3787/tcp",
+          "ttydurl": 'http'
+    },
 ];

src/store/modules/create_pipelineLLO.js

@@ -147,6 +147,39 @@ export default {
         }
       }
     },
+     async rmmycustomservice({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              service: value.service
+            }
+				
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/rmmycustomservice',params,options);
+				    return p
+        if(p.error == "invalid_token"){
+            console.log(p)
+        //console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        //console.log(JSON.stringify(p))
+			
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
    async getcompletion({commit,rootGetters}, value) {
       try {
         var token = rootGetters['pipelineLLO/gettoken']
@@ -169,6 +202,76 @@ export default {
         }
       }
     },
+   async getmyservices({commit,rootGetters}, value) {
+      try {
+        var token = rootGetters['pipelineLLO/gettoken']
+        var params = {
+              service:  value.service
+          }
+        var options = {
+          params: params,
+          headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+        };
+
+        const info = await axios.get('https://api.swarmlab.io/getmyservices',options);
+        return info
+
+      } catch (e) {
+        //console.error(e);
+        if(e.error == "invalid_token"){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }
+      }
+    },
+     async addmycustomservice({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              service:  			value.service,
+              readme: 				value.readme,
+							baseservice: 		value.baseservice,
+							sh: 						value.sh,
+							packages:				value.packages,
+							gitrepo: 				value.gitrepo,
+							serviceversion: value.serviceversion,
+							rclocal:				value.rclocal,
+							port1: 					value.port1,
+							name1: 					value.name1,
+							url1: 					value.url1,
+							port2: 					value.port2,
+							name2: 					value.name2,
+							url2: 					value.url2,
+							port3: 					value.port3,
+							name3: 					value.name3,
+							url3: 					value.url3
+            }
+				
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/addmycustomservice',params,options);
+            return p
+        if(p.error == "invalid_token"){
+            console.log(p)
+        //console.log(JSON.stringify(p))
+        }else{
+        }
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+        //console.log(JSON.stringify(p))
+			
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
    async getevents({commit,rootGetters}, value) {
       try {
         var token = rootGetters['pipelineLLO/gettoken']
@@ -493,6 +596,39 @@ export default {
           return R;
         }
       }
+    },
+     async chowncustom({commit,rootGetters}, value) {
+        console.log('value '+JSON.stringify(value))
+      try {
+          var token = value.token
+          var params = {
+              user: value.user,
+              service: value.service,
+              baseservice: value.baseservice
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/chowncustom'
+        var p = await axios.get(sock_server_l,options);
+        //var p = await axios.get('https://localhost:3000/getservicesinfo',options);
+        return p
+        //console.log(JSON.stringify(p))
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
     },
      async checkowner({commit,rootGetters}, value) {
         //console.log('value '+JSON.stringify(value))
@@ -524,6 +660,64 @@ export default {
           return R;
         }
       }
+    },
+     async getinstallcustom({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              instance: value.instance
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/getinstallcustom'
+        var p = await axios.get(sock_server_l,options);
+        return p
+        //console.log(value.swarmlabname)
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
+    },
+     async checkownercustom({commit,rootGetters}, value) {
+        //console.log('value '+JSON.stringify(value))
+      try {
+          var token = value.token
+          var params = {
+              instance: value.instance
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/checkownercustom'
+        var p = await axios.get(sock_server_l,options);
+        //var p = await axios.get('https://localhost:3000/getservicesinfo',options);
+        return p
+        //console.log(JSON.stringify(p))
+        //console.log(value.token)
+        //console.log(value.swarmlabname)
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          //console.log('error '+JSON.stringify(e))
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
     },
      async runbackup({commit,rootGetters}, value) {
         //console.log('value '+JSON.stringify(value))
@@ -1056,6 +1250,31 @@ export default {
           return R;
         }
       }
+    },
+     async stopservicecustom({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              instance: value.instance
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/stopservicecustom'
+        var p = await axios.get(sock_server_l,options);
+        return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
     },
      async getservicesinfoall({commit,rootGetters}, value) {
       try {
@@ -1081,6 +1300,31 @@ export default {
           return R;
         }
       }
+    },
+     async getservicesinfoallcustom({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              instance: value.instance
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/getservicesinfoallcustom'
+        var p = await axios.get(sock_server_l,options);
+        return p
+      } catch (e) {
+        if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+        }else{
+          var R = {
+            ERROR_str: e,
+            ERROR: 'yes'
+          }
+          return R;
+        }
+      }
     },
      async rmbuildstatus({commit,rootGetters}, value) {
         //console.log('valuei22222222222222222222222222222222 '+JSON.stringify(value))