From 265bfa5a9bfacc489535ee2ea32fe0156fc2d73f Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Wed, 24 Nov 2021 22:33:51 +0200
Subject: [PATCH] add url

---
 src-local/llo/new.js                  |    2 +-
 src/components/mynetwork/mytable.vue  |   34 +-
 src/components/mynetwork/mytable2.vue | 1115 +++++++++++++++++++++++++
 3 files changed, 1148 insertions(+), 3 deletions(-)
 mode change 100644 => 100755 src/components/mynetwork/mytable.vue
 create mode 100644 src/components/mynetwork/mytable2.vue

diff --git a/src-local/llo/new.js b/src-local/llo/new.js
index 2051542..2030e64 100644
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@@ -482,7 +482,7 @@ app.get('/get_llo', (req, res, next) => {
                             "tomongo": ${to}
                           }
                   }
-                `
+                 `
                             //"next_page_url": "?page="+${next},
                             //"prev_page_url": "?page="+${prev},
               //myplaybooks.links = links
diff --git a/src/components/mynetwork/mytable.vue b/src/components/mynetwork/mytable.vue
old mode 100644
new mode 100755
index 0b8b607..d879c98
--- a/src/components/mynetwork/mytable.vue
+++ b/src/components/mynetwork/mytable.vue
@@ -643,8 +643,32 @@ export default {
                     container_bash = '/bin/bash'
                     var container_user_swarmlab = 'docker'
                   }
+// -----
+              var swarmlabinstance1c = new RegExp("(/poc-|/POC-)"); 
+              var pocurl = 'no'
+                     console.log('log---------- ' + JSON.stringify(this.hybridshowdata))	
+                  if(swarmlabinstance1c.test(this.hybridshowdata.Image)){
+                    var swarmlabinstance1cd = new RegExp("(->)"); 
+                    if(swarmlabinstance1cd.test(this.hybridshowdata.Ports)){
+                      var splitcd = this.hybridshowdata.Ports.split(':')
+                      var splitcd1 =  splitcd[1].split('-')
+                      var swarmlabinstance1ce = new RegExp("^(web)"); 
+                      if(swarmlabinstance1ce.test(this.hybridshowdata.Names)){
+                        pocurl = 'http://localhost:'+splitcd1[0]+'/?token='+this.token
+                      }
+                      //console.log('log1a---------- ' + pocurl)	
+                      //console.log('log1---------- ' + JSON.stringify(this.hybridshowdata))	
+                    }
+                    //container_user = true
+                  }
+// -----
+              var swarmlabinstance = new RegExp("^(hybrid-|HYBRID-)"); 
+                  if(swarmlabinstance.test(this.hybridshowdata.Names)){
+                    container_user = true
+                    container_bash = '/bin/bash'
+                    var container_user_swarmlab = 'docker'
+                  }
 
-              // console.log('log---------- ' + JSON.stringify(this.hybridshowdata))	
           //var Localpath = JSON.parse(log.data.test)
           var info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<br> 
           <br>
@@ -662,6 +686,12 @@ if(container_user){
   info +='</p>'
 }
 
+if(pocurl != 'no'){
+  info +='<p class="text-info">'
+  info += '<a href="'+pocurl+'" target="_blank">Click here to open the Web_App</a>'
+  info +='</p>'
+}
+
   info +='<p class="text-secondary">'
 info +=' <b>Directory Maps</b>'
 info +='<br>'
@@ -1012,7 +1042,7 @@ info +='This permits the docker user on the local machine to connect to X window
           this.$root.$emit('hybrid_log_in',val)
           this.$root.$emit('hybrid_refresh_table_storage')
         },
-        // poc
+        // poc 
         async message_err_poc(val) {
             //console.log(" socket err "+JSON.stringify(val))
             this.$root.$emit('hybrid_log_in',val)
diff --git a/src/components/mynetwork/mytable2.vue b/src/components/mynetwork/mytable2.vue
new file mode 100644
index 0000000..0b8b607
--- /dev/null
+++ b/src/components/mynetwork/mytable2.vue
@@ -0,0 +1,1115 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
+      </div>
+
+      <b-container fluid class="bv-example-row">
+          <div class="row text-center">
+            <div class="col-12">
+              <b>View and Manage your running Containers</b>
+            </div>
+          </div>
+
+<br>
+          <div class="input-group input-group-sm sm-3">
+              <div class="input-group-prepend">
+                      <button
+                              v-if="$socket.disconnected"
+                              class="ti-unlink btn btn-outline-danger"
+                              round
+                              type="button"
+                              title="You are disconnected from Swarmlab-hybrid"
+                              disabled
+                        >
+                              </button>
+                      <button
+                              v-else
+                              class="ti-link btn btn-outline-success"
+                              round
+                              type="button"
+                              title="You are connected swarmlab-hybrid"
+                              @click="onAction('shareinfo')"
+                      >
+                              </button>
+              </div>
+              <div class="input-group-prepend">
+                      <button
+                              v-if="webinterface"
+                              class="btn btn-outline-success"
+                              round
+                              type="button"
+                              @click="onAction('startweb')"
+                      >
+                              Web</button>
+              </div>
+              <div class="input-group-prepend">
+                      <button
+                              v-if="hybridshowdata.Names"
+                              class="btn btn-outline-success"
+                              round
+                              type="button"
+                              @click="onAction('container-connect')"
+                      >
+                              Connect</button>
+                      <button
+                              v-else
+                              class="btn btn-outline-secondary"
+                              round
+                              type="button"
+      												disabled
+                      >
+                              Connect</button>
+                      <button
+                              v-if="hybridshowdata.Names"
+                              class="btn btn-outline-danger"
+                              round
+                              type="button"
+                              @click="onAction('container-stop')"
+                      >
+                              Stop</button>
+                      <button
+                              v-else
+                              class="btn btn-outline-secondary"
+                              round
+                              type="button"
+      												disabled
+                      >
+                              stop</button>
+              </div>
+
+              <div class="input-group-append">
+                      <button
+                              v-if="hybridshowdata.Names"
+                              class="btn btn-outline-warning"
+                              round
+                              type="button"
+                              @click="onAction('container-logs')"
+                      >
+                              Logs</button>
+                      <button
+                              v-else
+                              class="btn btn-outline-secondary"
+                              round
+                              type="button"
+      												disabled
+                      >
+                              Logs</button>
+              </div>
+
+          </div>
+      </b-container>
+      <b-container fluid>
+        <div class="row" >
+          <div class="col-2 text-info" >
+          ID
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.ID }}
+          </div>
+          <div class="col-2 text-info" >
+          Image          
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.Image }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" >
+          <div class="col-2 text-info" >
+          Names
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.Names }}
+          </div>
+          <div class="col-2 text-info" >
+          RunningFor
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.RunningFor }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" >
+
+          <div class="col-2 text-info" >
+          Status
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.Status }}
+          </div>
+
+          <div class="col-2 text-info" >
+          CreatedAt
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.CreatedAt }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" >
+
+          <div class="col-2 text-info" >
+                      <button
+                              v-if="hybridshowdata.Networks&&addNetworkMenou==false"
+                              class="btn btn-outline-info  btn-sm"
+                              round
+                              type="button"
+                              @click="addNetwork(hybridshowdata,'on')"
+                      >
+                              Networks</button>
+                      <button
+                              v-if="hybridshowdata.Networks&&addNetworkMenou==true"
+                              class="btn btn-outline-warning  btn-sm"
+                              round
+                              type="button"
+                              @click="addNetwork(hybridshowdata,'off')"
+                      >
+                              Networks</button>
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.Networks }}
+          </div>
+
+          <div class="col-2 text-info" >
+          Ports
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.Ports }}
+          </div>
+        </div> <!-- row -->
+<!--
+'{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", 
+"Networks":"{{.Networks}}", "Status":"{{.Status}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}'
+-->
+      </b-container>
+
+      <!-- Networks  -->
+
+<div class="card border-success bg-light mb-3" style="max-width: 100%;"
+	v-if="addNetworkMenou==true"
+>
+  <div class="card-header"></div>
+  <div class="card-body text-info">
+        <div class="row">
+          <div class="col-6 text-info">
+    				<h5 class="card-title">Select network</h5>
+          </div>
+          <div class="col-6 text-info">
+						Connect a running container to multiple networks
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-info">
+						<b-form-select v-model="selectedNetworks" :options="localNetworkoptions" multiple :select-size="4"></b-form-select>
+						<div class="mt-3">Selected: <strong>{{ selectedNetworks }}</strong></div>
+          </div>
+          <div class="col-6 text-info">
+        			<img class="border-white img-thumbnail" src="@/assets/img/dockernetwork.png" alt="...">
+          </div>
+        </div>
+
+        <div class="row">
+          <div class="col-6 text-info">
+                      <button
+                              class="btn btn-outline-warning  btn-sm"
+                              round
+                              type="button"
+                              @click="updateNetwork(hybridshowdata,'update')"
+                      >
+                              Update</button>
+          </div>
+        </div>
+
+
+  </div>
+</div>
+
+
+
+  </card>
+</template>
+<script>
+import store from '@/store/index'
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import card from '@/components/Card.vue'
+import {ApiConfig} from "@/config/index";
+import { extend } from 'vee-validate';
+import { required, alpha_num } from 'vee-validate/dist/rules';
+
+// No message specified.
+extend('alpha_num', alpha_num);
+
+// Override the default message.
+extend('required', {
+  ...required,
+  message: 'This field is required'
+});
+
+export default {
+  components: {
+      card
+	},
+  props: {
+  },
+  data() {
+   return{
+     addNetworkMenou:false,
+     localNetworks:[],
+     selectedNetworks:[],
+     localNetworkoptions:[],
+     localNetworkdefault:'',
+		 webinterface: false,
+		 webinterface_port: '',
+     STATUS:{},
+     CONFIG:{
+         'status':'',
+         'workerkey':'',
+         'swarmlab_public_wgkey':'',
+         'server_ip':'',
+         'allowed_ips':'',
+         'wg_port':'',
+         'wg_ip':'',
+         'swarm_ip':'',
+         'privatekey':'',
+         'publickey':'',
+       'workerkey':'',
+       'privatekey':'',
+       'publickey':'',
+       'server_ip':''
+     },
+     CONFIGallowed_ips:'',
+     swarmlabname:'swarmlab-sec',
+     swarmlabname_port:'',
+     swarmlabname_size:3,
+     swarmlabname_git:'',
+        // run on 
+     hybridshowdata:{},
+     hybridshowdatashare:{},
+     issocket:'close',
+     setFilter: {},
+     searchFor: {},
+     resetFilter: {}
+	 
+		}
+  },
+  beforeMount () {
+   this.socketopen();
+   this.socketauthenticate()
+        //console.log('send')
+  },
+	mounted() {
+		this.$root.$on('hybrid_show_info', (data) => {
+			this.$nextTick(function () {
+        this.hybridshowdata = data
+
+      var filterju = `microservice-jupyter`
+      var grepju = new RegExp(filterju);
+
+						if(grepju.test(data.Networks) && grepju.test(data.Names)){
+							this.webinterface = true
+							this.webinterface_port = data.Ports
+              console.log(JSON.stringify(this.webinterface_port))
+						}else{
+							this.webinterface = false
+							this.webinterface_port = ''
+						}
+     this.addNetworkMenou = false
+     this.localNetworks = []
+     this.selectedNetworks = []
+     this.localNetworkoptions = []
+     this.localNetworkdefault = ''
+        console.log(JSON.stringify(this.hybridshowdata))
+			})
+		})
+// from available services socket run here
+		this.$root.$on('hybrid_start_instance', (data) => {
+      this.swarmlabname = data.swarmlabname
+      if(data.size){
+        this.swarmlabname_size = data.size
+      }
+      if(data.port){
+        this.swarmlabname_port = data.port
+      }
+        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
+				this.onAction('start')
+		})
+		this.$root.$on('hybrid_start_instance_storage', (data) => {
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.swarmlabname = data.swarmlabname
+              obj.password = data.password
+              this.$socket.client.open();
+              this.$socket.client.emit('start_storage', obj);
+		})
+		this.$root.$on('hybrid_start_instance_poc', (data) => {
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.swarmlabname = data.swarmlabname
+              obj.password = data.password
+              this.$socket.client.open();
+              this.$socket.client.emit('start_poc', obj);
+		})
+    // build
+		this.$root.$on('SERVER_build_image', (obj) => {
+              this.$socket.client.open();
+              this.$socket.client.emit('build_image', obj);
+		})
+		this.$root.$on('SERVER_build_vmlist', (data) => {
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.kill = 2
+              this.$socket.client.open();
+              this.$socket.client.emit('build_vmlist', obj);
+		})
+		this.$root.$on('SERVER_build_kill', (data) => {
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.kill = data.pid
+              this.$socket.client.open();
+              this.$socket.client.emit('build_kill', obj);
+		})
+// from available services socket run here
+		this.$root.$on('hybrid_install_instance', (data) => {
+      this.swarmlabname = data.swarmlabname
+      this.swarmlabname_git = data.git
+      //this.swarmlabname_port = data.port
+			this.onAction('install')
+		})
+// from available storage socket run here
+		this.$root.$on('hybrid_install_instance_storage', (data) => {
+      //this.swarmlabname = data.swarmlabname
+      //this.swarmlabname_git = data.git
+        var obj = {}
+        obj.action = 'up'
+        obj.token = this.token
+        obj.swarmlabname = data.swarmlabname
+        obj.git = data.git
+        this.$socket.client.open();
+        this.$socket.client.emit('installstorage', obj);
+		})
+// from available services socket run here
+		this.$root.$on('hybrid_connect_server', (data) => {
+			//this.onAction('create-wirequard')
+      this.$socket.client.emit('get-serverconfig');
+		})
+// from available services socket run here
+		this.$root.$on('hybrid_stop_instance', (data) => {
+      this.swarmlabname = data
+        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
+				this.onAction('stop')
+		})
+// from available storage socket run here
+		this.$root.$on('hybrid_stop_instance_storage', (data) => {
+      //this.swarmlabname = data
+        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
+				//this.onAction('stop')
+        this.$socket.client.emit('stop_storage', data);
+		})
+// from available poc socket run here
+		this.$root.$on('hybrid_stop_instance_poc', (data) => {
+      //this.swarmlabname = data
+        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
+				//this.onAction('stop')
+        this.$socket.client.emit('stop_poc', data);
+		})
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+    //console.log("token "+ this.token);
+      var log = store.dispatch("pipelineLLO/settoken",{
+        token:this.token
+      })
+     this.socketopen();
+
+	},
+    beforeDestroy () {
+		this.$root.$off('hybrid_show_info')
+		this.$root.$off('hybrid_start_instance')
+		this.$root.$off('hybrid_stop_instance')
+		this.$root.$off('hybrid_connect_server')
+		this.$root.$off('hybrid_install_instance')
+		this.$root.$off('hybrid_install_instance_storage')
+		this.$root.$off('SERVER_build_vmlist')
+		this.$root.$off('SERVER_build_kill')
+		this.$root.$off('SERVER_build_image')
+ },
+  computed: {
+		httpOptions() {
+			var token = this.token
+			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
+			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
+	  },
+
+	},
+
+  methods: {
+			async updateNetwork(container,action){
+         // console.log(JSON.stringify(container));
+         // console.log(JSON.stringify('selected :' + this.selectedNetworks));
+					var log = await store.dispatch("pipelineLLO/updatenetworks",{
+						networks:this.selectedNetworks,
+						defaultnetwork:this.localNetworkdefault,
+						container:container.ID
+					})
+          this.$root.$emit('hybrid_refresh_networktable')
+					 this.hybridshowdata = {}
+					 this.addNetworkMenou = false
+					 this.localNetworks = []
+					 this.selectedNetworks = []
+					 this.localNetworkoptions = []
+					 this.localNetworkdefault = ''
+         // console.log(JSON.stringify(log.data.data));
+			},
+			async addNetwork(container,action){
+        if(action == 'on'){
+        	this.addNetworkMenou = true
+					var log = await store.dispatch("pipelineLLO/getnetworks",{
+						instance:container.ID
+					})
+          this.localNetworks = log.data.data
+					var searchnet = ''
+          this.localNetworkoptions = []
+							for(var i = 0; i < this.localNetworks.length; i++) {
+                 this.localNetworkdefault = this.localNetworks[i].NetworkMode[0]
+                 var NET = {}
+								    NET.text        = this.localNetworks[i].Name
+                    NET.value       = this.localNetworks[i].Name
+
+					          searchnet = new RegExp(this.localNetworks[i].NetworkMode[0]); 
+        //console.log(this.localNetworks[i].NetworkMode[0] +' - ' + this.localNetworks[i].Name );
+									  if(searchnet.test(this.localNetworks[i].Name)){
+                    	NET.disabled       = true
+										}else{
+                    	NET.disabled       = false
+										}
+
+                    this.localNetworkoptions.push(NET)
+							}
+         // console.log(JSON.stringify(this.localNetworks));
+				}else if(action == 'off'){
+        	this.addNetworkMenou = false
+				}
+       // console.log(container);
+      },
+			async onAction(action){
+        if(action == 'start'){
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.swarmlabname = this.swarmlabname
+              obj.swarmlabname_size = this.swarmlabname_size
+              obj.swarmlabname_port = this.swarmlabname_port
+              //this.$socket.client.emit('action', obj);
+              //this.$socket.client.emit('actionstart', obj);
+              this.$socket.client.open();
+              //this.$socket.client.emit('start', this.swarmlabname);
+              this.$socket.client.emit('start', obj);
+               //console.log('start ' + JSON.stringify(log))	
+               //console.log('startobj ' + JSON.stringify(obj))	
+              ////console.log(this.$socket.client.connect())
+          }else if(action == 'shareinfo'){
+              var openuerlju = 'no'
+              var search = 'microservice-jupyter'
+              var extenderror = new RegExp(search);
+							if(extenderror.test(this.hybridshowdata.Names)){
+									var log = await store.dispatch("pipelineLLO/getjupyterinfo",{
+										instance:this.hybridshowdata.Names
+									})
+									if(log.data.test){
+											//get token
+											var splitted = log.data.test.split('?token='); 
+											var jutoken = splitted[1];
+											//cut from home dir
+											var splitted1 = jutoken.split(' '); 
+											var jutokenok = splitted1[0];
+											var juurl = this.webinterface_port.split('->'); 
+											// trim it
+											var juurlok = juurl[0].trim();
+											//build url
+											openuerlju = `http://${juurlok}/?token=${jutokenok}`
+									 }
+							}
+              var log = await store.dispatch("pipelineLLO/getshareinfo",{
+                instance:this.hybridshowdata.Names
+              })
+              console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
+              console.log('logs1---------- ' + JSON.stringify(this.hybridshowdata.Names))	
+              console.log('logsserver---------- ' + JSON.stringify(log.data.container))	
+              console.log('logsserver1---------- ' + JSON.stringify(log.data.network))	
+              this.hybridshowdatashare =  log.data.network
+              var IP = this.hybridshowdatashare.IPv4Address.split('/');
+              var search1 = '->'
+              var search3 = ','
+              var extenderror1 = new RegExp(search1);
+              var extenderror3 = new RegExp(search3);
+              var info = ''
+            // url port einai polla
+						if(extenderror1.test(this.hybridshowdata.Ports) ){   
+              try {
+                 if(extenderror3.test(this.hybridshowdata.Ports)){
+                    var PORTSport = this.hybridshowdata.Ports.split(',');
+                    for(var iaa = 0; iaa < PORTSport.length; iaa++){
+                      var PORTStmp = PORTSport[iaa].split('->');
+                      var PORTS = PORTSport[iaa].split('/');
+                      if( openuerlju == 'no'){
+                        info += `<h5>URL: ${IP[0]}:${PORTS[0]}</h5>`
+                      }else{
+                        info += `<h5>URL: ${IP[0]}:${PORTS[0]}/?token=${jutokenok}</h5>`
+                      }
+                    }
+                 }else{
+                    var PORTStmp = this.hybridshowdata.Ports.split('->');
+                    var PORTS = PORTStmp[1].split('/');
+                    var info = ''
+                    if( openuerlju == 'no'){
+                      info = `<h5>URL: ${IP[0]}:${PORTS[0]}</h5>`
+                    }else{
+                      info = `<h5>URL: ${IP[0]}:${PORTS[0]}/?token=${jutokenok}</h5>`
+                    }
+                 }
+              } catch (e) {
+              }
+					  }
+							this.$swal({
+								title: '<strong>Share info</strong>',
+								type: 'info',
+								html: info,
+								showCloseButton: true,
+								showLoaderOnConfirm: false,
+								allowOutsideClick: false
+							})
+          }else if(action == 'container-logs'){
+							var log = await store.dispatch("pipelineLLO/getlogs",{
+								container:this.hybridshowdata.ID
+							})
+              // console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
+          }else if(action == 'startweb'){
+              var log = await store.dispatch("pipelineLLO/getjupyterinfo",{
+                instance:this.hybridshowdata.Names
+              })
+              if(log.data.test){
+                  //get token
+                  var splitted = log.data.test.split('?token='); 
+                  var jutoken = splitted[1];
+                  //cut from home dir
+                  var splitted1 = jutoken.split(' '); 
+                  var jutokenok = splitted1[0];
+                  var juurl = this.webinterface_port.split('->'); 
+                  // trim it
+                  var juurlok = juurl[0].trim();
+                  //build url
+                  var openuerlju = `http://${juurlok}/?token=${jutokenok}`
+                  var info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions.<br> 
+                  <br>
+                  <b>Click 
+                  <a class="text-info" href="${openuerlju}" target="_blank">here to open</a></span>
+                  </b>
+                  <br>
+                  <br>
+    `
+                this.$swal({
+                  type: 'Info',
+                  title: 'Info!',
+                  icon:'info',
+                  html: info,
+                  showCloseButton: true,
+                  showLoaderOnConfirm: false,
+                  allowOutsideClick: false,
+                  cancelButtonText: 'No, cancel!',
+                  showCancelButton: false,
+                  showLoaderOnConfirm: false,
+                  reverseButtons: true,
+                  focusCancel: true,
+                  confirmButtonText: 'Ok!'
+                })
+              }
+
+          }else if(action == 'container-connect'){
+              var log = await store.dispatch("pipelineLLO/getmountinfo",{
+                instance:this.hybridshowdata.Names
+              })
+
+              var container_bash = '/bin/sh'
+              var container_user = false
+              var swarmlabinstance = new RegExp("^(hybrid-|HYBRID-)"); 
+                  if(swarmlabinstance.test(this.hybridshowdata.Names)){
+                    container_user = true
+                    container_bash = '/bin/bash'
+                    var container_user_swarmlab = 'docker'
+                  }
+
+              // console.log('log---------- ' + JSON.stringify(this.hybridshowdata))	
+          //var Localpath = JSON.parse(log.data.test)
+          var info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<br> 
+          <br>
+           <b>Open a terminal  and  Run*:</b>
+          <br>
+          <br>
+`
+if(container_user){
+  info +='<p class="text-success">'
+  info += 'docker exec -it -u'+container_user_swarmlab+' '+this.hybridshowdata.Names+' ' + container_bash
+  info +='</p>'
+}else{
+  info +='<p class="text-success">'
+  info += 'docker exec -it  '+this.hybridshowdata.Names+' ' + container_bash
+  info +='</p>'
+}
+
+  info +='<p class="text-secondary">'
+info +=' <b>Directory Maps</b>'
+info +='<br>'
+info +=' <table>'
+info +='<tr><td><b>Local</b></td><td><i>Container</i></td></tr>'
+              var datajson = log.data.test[0]
+              for(var i = 0; i < datajson.length; i++) {
+
+//console.log('test1 '+JSON.stringify(datajson[i]))
+                 if(datajson[i].Type == 'bind'){
+                 info +='<tr style="outline: thin solid"><td><b>'+datajson[i].Source+' </b></td><td><i>' + datajson[i].Destination+' </i></td></tr>'
+                 }
+              }
+info +=' </table>'
+  info +='</p>'
+info +='</h5><br>'
+info +='<br>'
+info +='<b>*</b> App with GUI:  xhost +local:docker <br>'
+info +='<br>'
+info +='This permits the docker user on the local machine to connect to X windows display.<br>'
+//console.log('test1 '+JSON.stringify(this.hybridshowdata))
+
+            this.$swal({
+              type: 'Info',
+              title: 'Info!',
+              icon:'info',
+              html: info,
+              showCloseButton: true,
+              showLoaderOnConfirm: false,
+              allowOutsideClick: false,
+              cancelButtonText: 'No, cancel!',
+              showCancelButton: false,
+              showLoaderOnConfirm: false,
+              reverseButtons: true,
+              focusCancel: true,
+              confirmButtonText: 'Ok!'
+            })
+          }else if(action == 'install'){
+              var obj = {}
+              obj.action = 'up'
+              obj.token = this.token
+              obj.swarmlabname = this.swarmlabname
+              obj.git = this.swarmlabname_git
+              this.$socket.client.open();
+              this.$socket.client.emit('install', obj);
+          }else if(action == 'container-stop'){
+				      // refresh adhocview.vue on console await 
+             this.$root.$emit('SERVER_hybrid_table_start')
+              this.$socket.client.emit('container-stop', this.swarmlabname, this.hybridshowdata.ID);
+          }else if(action == 'create-wirequard'){
+               //this.CONFIGprivatekey   = value.privatekey
+               //this.CONFIGpublickey    = value.publickey
+               //this.CONFIGserver_ip    = value.server_ip // 83.212.77.133:51820
+               //this.CONFIGallowed_ips  = value.allowed_ips // 10.13.13.0/16, 0.0.0.0/0, ::/0
+              this.$socket.client.emit('create-wirequard', this.token);
+          }else if(action == 'stop'){
+              this.$socket.client.emit('stop', this.swarmlabname);
+          }
+			},
+   async socketopen () {
+        this.$socket.client.open();
+        this.$socket.client.connect();
+   },
+   async socketauthenticate () {
+        this.$socket.client.emit('authenticate', this.token);
+   },
+   async socketreconnect () {
+          var log = await this.socketopen() 
+          this.socketauthenticate()
+   },
+   async socketclose () {
+        this.$socket.client.close();
+   }
+
+  },
+ /**
+ *
+ * == Socket events
+ * 
+ * [source,javascript]
+ * ----   
+ *   this.$socket.client.emit('authenticate', 'logintoken');
+ * ----   
+ *
+ */
+     sockets: {
+      connect() {
+        //this.$socket.client.emit('authenticate', this.token);
+        //console.log('socket connected '+ 'socketdatasend' )
+        this.issocket = 'open';
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'open'
+					})
+      },
+ /**
+ *
+ * === onError
+ *
+ */
+      error(error) {
+        //console.log("socket error "+JSON.stringify(error))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+      },
+ /**
+ *
+ * === connect_error
+ * 
+ */
+      connect_error(error) {
+        //console.log("socket connect_error "+JSON.stringify(error))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+          this.socketopen() 
+          this.socketreconnect() 
+      },
+ /**
+ *
+ * === connect_error
+ *
+ */
+      disconnect(reason) {
+        //console.log("socket disconnect "+JSON.stringify(reason))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+          this.socketreconnect() 
+      },
+ /**
+ * 
+ * === Socket connect_timeout
+ * 
+ */
+      connect_timeout(reason) {
+        //console.log("socket timeout "+JSON.stringify(reason))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+          this.socketreconnect() 
+      },
+ /**
+ * 
+ * === Socket reconnect
+ * 
+ */
+      reconnect(attemptNumber) {
+        //console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber))
+          this.socketreconnect() 
+      },
+ /**
+ * 
+ * === connect_attempt
+ * 
+ */
+      reconnect_attempt(attemptNumber) {
+        //console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber))
+          this.socketreconnect() 
+      },
+ /**
+ *
+ * === Socket reconnecting
+ *
+ */
+      reconnecting(attemptNumber) {
+        //console.log("socket reconnecting "+JSON.stringify(attemptNumber))
+          this.socketreconnect() 
+      },
+ /**
+ *
+ * === reconnect_error
+ *
+ */
+      reconnect_error(error) {
+        //console.log("socket reconnect_error "+JSON.stringify(error))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+          this.socketreconnect() 
+      },
+ /**
+ *
+ * === unauthorized
+ *
+ */
+      unauthorized(val) {
+        //console.log("socket unauthorized "+JSON.stringify(val))
+        this.issocket = 'close'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'close'
+					})
+      },
+ /**
+ *
+ * === connected 
+ *
+ */
+      socket_id_emit(val) {
+        //console.log("socket id from server "+JSON.stringify(val))
+        this.issocket = 'open'
+					var log = store.dispatch("pipelineLLO/setsocketStatus",{
+						status:'open'
+					})
+      },
+ /**
+ *
+ * === Socket onMessage
+ *
+ */
+ /*
+      async adhocEmit(val) {
+        //console.log("socket from server "+JSON.stringify(val))
+        this.issocket = 'open'
+            //this.$wait.start('myRunInstance1');
+                // render begin
+                this.tryLLO = 'on'
+                if(this.firstbootstrap === 0 ){
+                    await this.bootsrapllo();
+                    this.firstbootstrap = 1
+                }
+                var output = log.data.out
+                var mydinfunction = `
+                  <div class="row">
+                      <b-col  class="" cols="12" sm="12"  md="12" >
+                            ${output}
+                       </b-col>
+                  </div>`
+
+                  try {
+                     let divascii = document.createElement('div');
+                     divascii.setAttribute("class", "container-fluid w-100 p-3 llotry")
+                     divascii.innerHTML = mydinfunction
+                     this.addtask(divascii);
+                  }catch (ex) {
+                      //console.log(" logi error1 "+JSON.stringify(ex))
+                      return
+                  }
+            //this.$wait.end('myRunInstance1');
+      },
+      */
+    async logdata(val) {
+        //console.log(" socket from logdata "+JSON.stringify(val))
+        // -------------------------------------
+        //  Save store
+        // -------------------------------------
+        var log = store.dispatch("pipelineLLO/addlog",{
+          log:val
+        })
+
+        var ltmp = store.getters['pipelineLLO/getlog'];
+          this.log_path = [...new Set(ltmp.map(item => item.tailed_path))];
+          var loglenght = ''
+          for (let item of this.log_path) {
+             //console.log('l1find '+ JSON.stringify(item))
+             loglenght = ltmp.filter(item1 => item1.tailed_path === item).length;
+             Vue.set(this.log_path_lenght, item, loglenght);
+             if(loglenght > this.loglenghttotal){
+                  // -------------------------------------
+                  //  Save store
+                  // -------------------------------------
+                  var ltotal1 = store.dispatch("pipelineLLO/taillog",{
+                    path:item
+                  })
+             }
+          }
+          
+      },
+    async message(val) {
+        //console.log(" socket message "+JSON.stringify(val))
+      },
+    async message_config(value) {
+         value.data = JSON.parse(value.data); 
+         if(value.file == 'ok'){
+             //console.log('server-value-file-ok ' + JSON.stringify(value.data.status))
+             this.CONFIG.status                 = value.data.status
+             this.CONFIG.workerkey              = value.data.workerkey
+             this.CONFIG.swarmlab_public_wgkey  = value.data.swarmlab_public_wgkey
+             this.CONFIG.server_ip              = value.data.server_ip 
+             this.CONFIG.allowed_ips            = value.data.allowed_ips 
+             this.CONFIG.wg_port                = value.data.wg_port 
+             this.CONFIG.wg_ip                  = value.data.wg_ip
+             this.CONFIG.swarm_ip               = value.data.swarm_ip
+             this.CONFIG.privatekey             = value.data.privatekey
+             this.CONFIG.publickey              = value.data.publickey
+
+         }else if(value.file == 'nodata'){
+             this.CONFIG.status                 = ''
+             this.CONFIG.workerkey              = ''
+             this.CONFIG.swarmlab_public_wgkey  = ''
+             this.CONFIG.server_ip              = ''
+             this.CONFIG.allowed_ips            = ''
+             this.CONFIG.wg_port                = ''
+             this.CONFIG.wg_ip                  = ''
+             this.CONFIG.swarm_ip               = ''
+             this.CONFIG.privatekey             = ''
+             this.CONFIG.publickey              = ''
+         }
+         // send to  myconnect-server.vue
+         //console.log('server-config ' + JSON.stringify(this.CONFIG))
+				 store.dispatch("pipelineLLO/addconfig",this.CONFIG)
+		     this.$root.$emit('hybrid_connect_server_view', this.CONFIG)
+      },
+    async message_log(val) {
+        //console.log(" socket out "+JSON.stringify(val))
+        this.$root.$emit('hybrid_log_in',val)
+				// refresh adhocview.vue on console await 
+        //this.$root.$emit('SERVER_hybrid_table_start')
+        // clear container info here sockert end
+        //this.hybridshowdata = {}
+      },
+    async message_out(val) {
+        console.log(" socket out "+JSON.stringify(val))
+        this.$root.$emit('hybrid_log_in',val)
+				// refresh adhocview.vue on console await 
+        this.$root.$emit('SERVER_hybrid_table_start')
+        // clear container info here sockert end
+        this.hybridshowdata = {}
+      },
+    async message_err(val) {
+        //console.log(" socket err "+JSON.stringify(val))
+        this.$root.$emit('hybrid_log_in',val)
+      },
+    async message_close(val) {
+        console.log(" socket close "+JSON.stringify(val))
+        this.$root.$emit('hybrid_log_in',val)
+        // refresh table availableservices
+        this.$root.$emit('hybrid_refresh_table')
+				// refresh adhocview.vue on console  await console
+        this.$root.$emit('SERVER_hybrid_table_stop')
+      },
+        async message_err_storage(val) {
+            //console.log(" socket err "+JSON.stringify(val))
+            this.$root.$emit('hybrid_log_in',val)
+          },
+        async message_out_storage(val) {
+         // console.log(" socket out storage "+JSON.stringify(val))
+          this.$root.$emit('hybrid_log_in',val)
+          //this.hybridshowdata = {}
+        },
+        async message_close_storage(val) {
+          // refresh table hybrid storage
+          this.$root.$emit('hybrid_log_in',val)
+          this.$root.$emit('hybrid_refresh_table_storage')
+        },
+        // poc
+        async message_err_poc(val) {
+            //console.log(" socket err "+JSON.stringify(val))
+            this.$root.$emit('hybrid_log_in',val)
+          },
+        async message_out_poc(val) {
+         // console.log(" socket out storage "+JSON.stringify(val))
+          this.$root.$emit('hybrid_log_in',val)
+          //this.hybridshowdata = {}
+        },
+        async message_close_poc(val) {
+          // refresh table hybrid storage
+          this.$root.$emit('hybrid_log_in',val)
+          this.$root.$emit('hybrid_refresh_table_poc')
+        },
+        async message_close_build(val) {
+          // refresh table hybrid storage
+          this.$root.$emit('SERVER_build_closebuild',val)
+          //this.$root.$emit('hybrid_refresh_table_storage')
+        },
+    async build_set_sshpid(val) {
+       // console.log(" socket pid "+JSON.stringify(val))
+        this.$root.$emit('SERVER_build_set_sshpid',val)
+      },
+    async build_set_buildpid(val) {
+       // console.log(" socket pid "+JSON.stringify(val))
+        this.$root.$emit('SERVER_build_set_buildpid',val)
+      },
+    async message_hybrid_status(val) {
+                var obj = {}
+                obj.status = val
+                var res1 = store.dispatch('pipelineLLO/setstatus', obj)
+                this.$root.$emit('hybrid_server_status',val)
+          //message_hybrid_status {"data":{"swarmlab":"active","hybrid":"Online","swarmlabid":"z3abo50tks76alp7ubjos4ngz"}}
+                this.STATUS.swarmlabid  = val.data.swarmlabid
+                this.STATUS.hybrid      = val.data.hybrid
+                this.STATUS.swarmlab    = val.data.swarmlab
+				        store.dispatch("pipelineLLO/addstatusswarmlab",this.STATUS)
+      }
+  },
+
+
+  actions: {
+
+	}
+
+};
+</script>
+
+<style lang="scss">
+
+
+
+.flex-fixed-width-item {
+    flex: 0 0 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>