From 473ecf304b43b763f571648f0c1127da022c9c89 Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Sat, 30 Jan 2021 19:25:57 +0200
Subject: [PATCH] hybrid join

---
 src-local/llo/new.js                          |  40 +
 src/App.vue                                   |   4 +-
 src/components/manageservices.vue             |  14 +-
 .../manageservices/deploy-bootstrap.vue       |   3 +-
 .../manageservices/join-service.vue           | 717 ++++++++++++++++++
 .../manageservices/view-service.vue           |   2 +-
 src/components/myconnect-server.vue           |  11 +-
 src/components/mynetwork/mytable.vue          |  27 +-
 src/store/modules/create_pipelineLLO.js       | 125 ++-
 viwsession/session1                           | 179 +++--
 10 files changed, 1026 insertions(+), 96 deletions(-)
 create mode 100644 src/components/manageservices/join-service.vue

diff --git a/src-local/llo/new.js b/src-local/llo/new.js
index 8999452..9e77a83 100644
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@@ -249,6 +249,46 @@ app.get('/getmountinfo', (req, res, next) => {
 
 });
 
+app.get('/getserviceshybridstatus', (req, res, next) => {
+
+				var RES = new Object();
+				RES.bootstrapnameid    = req.query["bootstrapnameid"]
+				RES.bootstrapstackname    = req.query["bootstrapstackname"]
+        var showexec = `docker ps --format '{"Names":"{{ .Names }}", "Status":"{{.Status}}"}' | jq . -s `
+        exec(showexec, (err, stdout, stderr) => {
+           if (err) {
+              console.error(`exec error: ${err}`);
+              return;
+            }
+           if (stdout) {
+              var string = stdout.toString()
+              var datajson = JSON.parse(string);
+              var search = RES.bootstrapstackname+'_master'+RES.bootstrapnameid
+              var extenderror = new RegExp(search); 
+              var found = 'no';
+              for(var i = 0; i < datajson.length; i++) {
+                 var servicename = datajson[i].Names
+                 console.log(JSON.stringify(search+' '+servicename))
+                  if(extenderror.test(servicename)){
+                     found = 'yes';
+                  }
+              }
+                      RES.error = false
+                      RES.error_msg = "ok"
+                      RES.test = datajson;
+                      RES.data = found;
+                      res.json(RES)
+
+            }else{
+                    var found = 'no'
+                      RES.error = false
+                      RES.error_msg = "ok"
+                      RES.data = found;
+                      res.json(RES)
+            }
+         });
+
+});
 app.get('/getservicesstatus', (req, res, next) => {
 
 				var RES = new Object();
diff --git a/src/App.vue b/src/App.vue
index ba24be2..ef9cda3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -130,7 +130,7 @@
 			 <b-list-group-item v-b-toggle.hybrid-hybrid variant="light"  name="Local" class="ti-loop list-group-item list-group-item-action" v-on:click="setActive('hybrid','')" style="cursor: pointer;" :class="{ active: isActive('hybrid') }"  @click="hybrid('manage_service')"  > Hybrid</b-list-group-item>
 
 					<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
-							<b-list-group-item variant="light"  name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')"> Zone</b-list-group-item>
+							<b-list-group-item variant="light"  name="Hybrid" class="ti-target m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_instances')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_instances') }" @click="hybrid('manage_service')"> Join</b-list-group-item>
 							<b-list-group-item variant="light"  name="Deploy" class="ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('hybrid','hybrid_deploy')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_deploy') }" @click="hybrid('manage_deploy')"> Deploy</b-list-group-item>
 					</b-collapse>
 
@@ -243,7 +243,7 @@
 					<!-- ------  hybrid manage services       --------------- -->
 					<!-- ----------------------------------- -->
              <manage-services
-                  v-show="hybridmenou == 'manage_service'"
+                  v-if="hybridmenou == 'manage_service'"
                 style="background-color: #f8f9fa"
               >
              </manage-services>
diff --git a/src/components/manageservices.vue b/src/components/manageservices.vue
index 3687863..fd259f6 100644
--- a/src/components/manageservices.vue
+++ b/src/components/manageservices.vue
@@ -2,21 +2,21 @@
   <card class="card-user" style="max-height:100%">
 
     <div class="row" >
-      <div class="col-7 order-first " >
+      <div class="col-12 order-first " >
       <br>
         <myconnect-manage-server>
 
         </myconnect-manage-server>
       </div>
 
-      <div class="col-5 order-last" >
-      <br>
       <!--
+      <div class="col-1 order-last" >
+      <br>
         <adhoc-view>
 
         </adhoc-view>
-        -->
       </div>
+        -->
     </div>
 
 
@@ -25,13 +25,13 @@
 <script>
 import {mapState, mapGetters, mapActions} from 'vuex'
 //import ViewNetwork from "./mynetwork/mytable.vue";
-import AdhocView from "./mynetwork/AdhocView.vue";
+//import AdhocView from "./mynetwork/AdhocView.vue";
 import card from '@/components/Card.vue'
 //import DockerServices from "./mynetwork/dockerservices.vue";
-import MyconnectManageServer from "./manageservices/manage-service.vue";
+import MyconnectManageServer from "./manageservices/join-service.vue";
 export default {
    components: {
-     AdhocView,
+     //AdhocView,
      card,
      MyconnectManageServer
    },
diff --git a/src/components/manageservices/deploy-bootstrap.vue b/src/components/manageservices/deploy-bootstrap.vue
index a4f944c..10654f2 100644
--- a/src/components/manageservices/deploy-bootstrap.vue
+++ b/src/components/manageservices/deploy-bootstrap.vue
@@ -433,7 +433,7 @@ export default {
   		"name":3,
   		"stackname":3,
   		"network":3,
-  		"networkport":3,
+  		//"networkport":3,
   		"cpu":3,
   		"memory":3
 	    },
@@ -647,6 +647,7 @@ This name is only for your own use. The system completely disregards it!
 				}
      }else if(f == 'networkport'){
 			  var field = await this.$refs.hybrid_networkport.validate();
+        console.log('port '+JSON.stringify(field))
         if(field.valid == true){
         	this.isDeployValid.networkport = 1
 				}else{
diff --git a/src/components/manageservices/join-service.vue b/src/components/manageservices/join-service.vue
new file mode 100644
index 0000000..68032b7
--- /dev/null
+++ b/src/components/manageservices/join-service.vue
@@ -0,0 +1,717 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/hybrid-1.png" alt="...">
+      </div>
+
+
+  <v-wait for="myRunInstancetutor">
+    <template slot="waiting">
+      <div>
+        <img src="@/assets/loading.gif" />
+        Enter Lab_room...
+      </div>
+    </template>
+  </v-wait>
+
+      <b-container fluid>
+
+        <div class="row" >
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-success"
+                        round
+                        type="button"
+                        @click="onActionHybrid('stack-start')"
+                        v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status"
+                >
+                  Start Stack
+                </button>
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-danger"
+                        round
+                        type="button"
+                        @click="onActionHybrid('stack-stop')"
+                        v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status"
+                >
+                 Leave Stack
+                </button>
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+              <!--
+                <button
+                        class="btn btn-outline-danger"
+                        round
+                        type="button"
+                        @click="onActionHybrid('service-stop')"
+                        v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status"
+                >
+                  Remove Service
+                </button>
+                -->
+              </div>
+          </div>
+          <div class="col-3 text-info" >
+              <div class="input-group-prepend">
+                <button
+                        class="btn btn-outline-info"
+                        round
+                        type="button"
+                        @click="onActionHybrid('service-info')"
+                        v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status"
+                >
+                  Service Info
+                </button>
+              </div>
+          </div>
+        </div> <!-- row -->
+
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" 
+          >
+          Instances
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.Replicas }}
+          </div>
+          <div class="col-2 text-info" >
+          Image          
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapimage }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Names
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.bootstrapname }}
+          </div>
+          <div class="col-2 text-info" >
+          EndAt
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapdateend }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Networks
+          </div>
+          <div class="col-3 text-secondary" >
+          {{ hybridshowdata.bootstrapnetwork }}
+          </div>
+          <div class="col-2 text-info" >
+          BeginAt
+          </div>
+          <div class="col-4 text-secondary" >
+          {{ hybridshowdata.bootstrapdatebegin }}
+          </div>
+        </div> <!-- row -->
+        <div class="row" 
+             v-if="hybridshowdata.bootstrapstackname"
+        >
+          <div class="col-2 text-info" >
+          Status
+          </div>
+          <div class="col-3 text-secondary" 
+            v-if="hybridshowdata.status"
+          >
+          <span class="ti-check text-success"> </span>
+          </div>
+          <div class="col-3 text-secondary" 
+            v-else
+          >
+          <span> </span>
+          </div>
+          <div class="col-2 text-info" >
+          Ports
+          </div>
+          <div class="col-4 text-secondary" 
+            v-if="hybridshowdata.ports!=0"
+          >
+          {{ hybridshowdata.ports }}
+          </div>
+          <div class="col-4 text-secondary" 
+            v-else
+          >
+          
+          </div>
+        </div> <!-- row -->
+      </b-container>
+   <b-container fluid class="bv-example-row">
+
+		<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 By StackName"
+				v-model="searchFor"
+				@keyup.enter="setFilter"
+				>
+					
+			<div class="input-group-append">
+				<button 
+					class="btn btn-outline-primary" 
+					round
+					type="button"
+					@click="setFilter">
+					Go</button>
+			</div>
+					
+			<div class="input-group-append">
+				<button class="btn btn-outline-secondary" 
+					round
+					type="button"
+					@click="resetFilter">
+					Reset</button>
+			</div>
+    </div>
+		<div class="white h-100 flex-fixed-width-item"
+			<vuetable 
+				ref="vuetable"
+				:key="vuetablekey"
+				:api-url='apiurl'
+				:api-mode="true"
+				:http-options="httpOptions"
+				:fields="fields"
+				:item-actions="itemActions"
+				:sort-order="sortOrder"
+				:show-sort-icons="true"
+				:multi-sort="multiSort"
+				:per-page="perpage"
+				pagination-path="links.pagination"
+				:pagination-component="paginationComponent"
+				:append-params="moreParams"
+				wrapper-class="vuetable-wrapper"
+				loading-class="loading"
+				detail-row-id="id"
+				@vuetable:pagination-data="onPaginationData"
+				@vuetable:load-success="loadsuccess"
+				:css="css.table"
+				 >
+        <div slot="actionslocal" slot-scope="props">
+          <div class="d-flex justify-content-center">
+            <button
+              v-if="testactionrowindex[props.rowData.bootstrapnameid]"
+              class="ti-thumb-up btn btn-info btn-sm"
+              title="Remove Stack"
+              disabled
+              round
+              >
+            </button>
+            <button
+              v-else
+              class="ti-thumb-down btn btn-secondary btn-sm"
+              title="Remove Stack"
+              disabled
+              round
+              >
+            </button>
+          </div>
+        </div>
+        <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"
+              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>
+			</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{
+    testactionrowindex:[],  // joined        
+    actionrowindex:'',
+	  playbookInfo: {},
+    hybridshowdata:{},
+    token: '',
+	  CONFIG: {},
+    isstatus:'',
+	  playbook: {
+			'title':'',
+			'name':'',
+			'description':''
+		},
+			container:{
+				name:'',
+				view:0
+			},
+			pipeline:{},
+ 		selected: '',
+    options: [
+      { text: 'Packages', value: 'packages' },
+      { text: 'Images', value: 'images' },
+      { text: 'Scripts', value: 'scripts' }
+    ],
+		showModal: false,
+		visibility: [],
+	 	active:false,
+		vuetablekey:0,
+		fielddata:{},
+		fields: [ 
+          {
+        name: 'bootstrapname',
+        title: '<span class="orange"></span>Name',
+        sortField: 'bootstrapname',
+        visible:true,
+        dataClass: 'text-left text-wrap text-break break-word',
+        width: '15%'
+      },
+      {
+        name: 'bootstrapstackname',
+        title: '<span class="orange"></span>StackName',
+        sortField: 'bootstrapstackname',
+        visible:true,
+        dataClass: 'left aligned w-25',
+        width: '10%'
+
+      },
+      {
+        name: 'bootstrapstackid',
+        title: '<span class="orange"></span>StackID',
+        sortField: 'bootstrapstackid',
+        visible:true,
+        dataClass: 'left aligned w-25',
+        width: '15%',
+        callback: value => {
+          //console.log(this)
+          //console.log(this.fielddata)
+              for(var i = 0; i < this.fielddata.length; i++) {
+                 //call function here
+                 var servicename = this.fielddata[i].bootstrapstackid
+                 //console.log(JSON.stringify(servicename))
+                 if(servicename == value){
+                    var obj = {}
+                    obj.bootstrapnameid = this.fielddata[i].bootstrapnameid
+                    obj.bootstrapstackname = this.fielddata[i].bootstrapstackname
+		                this.checkactionrowindex(obj)
+                    //console.log(JSON.stringify('status '+JSON.stringify(this.fielddata[i])))
+
+                 }
+              }
+              return value
+        }
+
+      },
+      {
+        name: '_id',
+        title: '<span class="orange"></span>mongo',
+        visible:false
+      },
+      {
+        name: 'bootstrapdatebegin5',
+        title: '<span class="orange"></span>Begin',
+        sortField: 'bootstrapdatebegin5',
+        titleClass: 'center aligned',
+        visible:true,
+        width: '10%'
+      },
+      {
+        name: 'bootstrapusersjoin',
+        title: '<span class="orange"></span>Public',
+        sortField: 'bootstrapusersjoin',
+        titleClass: 'center aligned',
+        visible:true,
+        width: '5%',
+        callback: function(value) {
+          if (value == true) {
+              var v = '<span class="ti-check text-success"> </span>'
+              return v
+          }else{
+              var v = '<span> </span>'
+              return v
+          }
+        }
+      },
+      {
+        name: 'status',
+        title: '<span class="orange"></span>Status',
+        sortField: 'status',
+        titleClass: 'center aligned',
+        visible:true,
+        width: '5%',
+        callback: function(value) {
+          if (value == true) {
+              var v = '<span class="ti-check text-success"> </span>'
+              return v
+          }else{
+              var v = '<span> </span>'
+              return v
+          }
+        }
+      },
+      {
+        name: 'ID',
+        sortField: 'ID',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25',
+        visible:false,
+        width: '15%'
+      },
+  
+      {
+          name: '__slot:actionslocal',   // <----
+          title: ' Join',
+          titleClass: 'center aligned',
+          dataClass: 'center aligned',
+          width: '5%',
+          callback: 'getstatus'
+        },
+   
+      {
+          name: '__slot:actions',   // <----
+          title: 'Actions',
+          titleClass: 'center aligned',
+          dataClass: 'center aligned',
+          width: '5%'
+        }
+		],
+		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridbootstrapservicesall",
+		//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
+		css: CssConfig,
+    perpage: 5,
+    searchFor: '',
+		sortOrder: [{
+				field: 'pipelinename',
+				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('hybrid_refresh_bootstrap_view', () => {
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		})
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+    console.log("token "+ this.token);
+
+	},
+    beforeDestroy () {
+		this.$root.$off('hybrid_refresh_bootstrap_view')
+ },
+  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 checkactionrowindex(data){
+                var obj = {}
+                obj.token = this.token
+                obj.bootstrapnameid = data.bootstrapnameid
+                obj.bootstrapstackname = data.bootstrapstackname
+                  var res1 = await store.dispatch('pipelineLLO/getserviceshybridstatus', obj)
+                  var index = data.bootstrapnameid
+                  if(res1.data.data == 'yes'){
+                    Vue.set(this.testactionrowindex, data.bootstrapnameid, index)
+                    console.log('res8 YES  '+JSON.stringify(res1.data))
+                  }else{
+                    console.log('res8 NO '+JSON.stringify(res1.data))
+                    Vue.delete(this.testactionrowindex, data.bootstrapnameid)
+                  }
+                  //console.log('res8 all '+JSON.stringify(this.testactionrowindex))
+        },
+
+
+   async onActionHybrid(action) {
+            //var logconfig = await store.getters['pipelineLLO/getconfig'];
+            this.CONFIG = await store.getters['pipelineLLO/getstatusswarmlab'];
+             if(this.CONFIG.hybrid == 'Online'){
+              this.isstatus = true
+             }else{
+              this.isstatus = false
+             }
+        console.log('stack-start1 ' + JSON.stringify(this.CONFIG))
+        //console.log('stack-start3 ' + JSON.stringify(logconfig1))
+			if(action == 'stack-stop' ){
+          var info='<h5>This will leave the stack with the name<b> '+ this.hybridshowdata.bootstrapstackname +'</b> </h5>'
+          this.$swal({
+            type: 'Info',
+            title: 'Info!',
+            icon:'warning',
+            html: info,
+            showCloseButton: true,
+            showLoaderOnConfirm: false,
+            allowOutsideClick: false,
+            cancelButtonText: 'No, cancel!',
+            showCancelButton: true,
+            showLoaderOnConfirm: false,
+            reverseButtons: true,
+            focusCancel: true,
+            confirmButtonText: 'Ok!'
+          }).then((result)=> {
+            this.onActionHybrid_stackrm(result);
+          })
+
+      }else if(action == 'stack-start' ){
+        console.log('stack-start')
+        if(this.isstatus == '1'){
+          console.log(this.isstatus)
+            var log = await store.dispatch("pipelineLLO/hybrid_join",{
+              token:this.token,
+              node:this.CONFIG.swarmlabid,
+              bootstrapstackid:this.hybridshowdata.bootstrapstackid,
+              bootstrapnameid:this.hybridshowdata.bootstrapnameid
+            })
+            Vue.nextTick( () => this.$refs.vuetable.refresh())
+        }else{
+        }
+      }else if(action == 'service-info' ){
+            console.log(JSON.stringify(action))
+      /*
+				var log = await store.dispatch("pipelineLLO/hybrid_servicerm",{
+					token:this.token,
+					bootstrapstackid:this.hybridshowdata.bootstrapstackid,
+					bootstrapnameid:this.hybridshowdata.bootstrapnameid
+				})
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+        */
+      }
+
+   },
+   async onActionHybrid_stackrm(action) {
+            console.log(JSON.stringify(action))
+        if(action.isConfirmed){
+            if(this.isstatus == '1'){
+                var log = await store.dispatch("pipelineLLO/hybrid_leave",{
+                  token:this.token,
+                  node:this.CONFIG.swarmlabid,
+                  bootstrapstackid:this.hybridshowdata.bootstrapstackid,
+                  bootstrapnameid:this.hybridshowdata.bootstrapnameid
+                })
+                Vue.nextTick( () => this.$refs.vuetable.refresh())
+             }else{
+             }
+         }
+   },
+   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!'
+                      })
+    },
+
+
+		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.$root.$emit('hybrid_show_info',data)
+      console.log('index '+this.actionrowindex)
+			if(action == 'view-item' ){
+			}else if(action == 'run-more' ){
+        this.hybridshowdata = data
+        console.log('hybrid '+JSON.stringify(data))
+			}else if(action == 'delete-item' ){
+				this.$swal({
+					type: 'info',
+					html: info+winfo,
+					showCloseButton: true,
+					showLoaderOnConfirm: false,
+					allowOutsideClick: false,
+					 cancelButtonText: 'No, cancel!',
+					showCancelButton: true,
+					showLoaderOnConfirm: false,
+					reverseButtons: true,
+					focusCancel: true,
+					confirmButtonText: 'Yes, Delete it!'
+					})
+			}else if(action == 'run-item' ){
+			}
+    },
+    refreshVuetable() {
+			this.$nextTick(()=>{
+					this.vuetablekey += 1
+				})
+      },
+		playbookinfoShow(value) {
+				return this.visibility[value]=true
+		},
+		playbookinfo(value) {
+				return this.playbookInfo=value
+		},
+		rowClicked(row, event) {
+			return {
+				html: true,
+				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
+				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
+			}
+		},
+		loadsuccess(response) {
+				var data = response.data.data
+				this.fielddata=data
+				var n = data.length
+				n=n-1
+			},
+
+
+  },
+
+
+  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>
diff --git a/src/components/manageservices/view-service.vue b/src/components/manageservices/view-service.vue
index 4a15457..b236496 100644
--- a/src/components/manageservices/view-service.vue
+++ b/src/components/manageservices/view-service.vue
@@ -316,7 +316,7 @@ export default {
       },
       {
         name: 'bootstrapusersjoin',
-        title: '<span class="orange"></span>Join',
+        title: '<span class="orange"></span>Public',
         sortField: 'bootstrapusersjoin',
         titleClass: 'center aligned',
         visible:true,
diff --git a/src/components/myconnect-server.vue b/src/components/myconnect-server.vue
index 8c216ab..75d5d5c 100644
--- a/src/components/myconnect-server.vue
+++ b/src/components/myconnect-server.vue
@@ -11,9 +11,14 @@
 
       <div class="col-5 order-last" >
       <br>
+      <!--
         <adhoc-view>
 
         </adhoc-view>
+      -->
+        <zones-view>
+
+        </zones-view>
       </div>
     </div>
 
@@ -23,13 +28,15 @@
 <script>
 import {mapState, mapGetters, mapActions} from 'vuex'
 //import ViewNetwork from "./mynetwork/mytable.vue";
-import AdhocView from "./mynetwork/AdhocView.vue";
+//import AdhocView from "./mynetwork/AdhocView.vue";
+import ZonesView from "./manageservices/manage-service.vue";
 import card from '@/components/Card.vue'
 //import DockerServices from "./mynetwork/dockerservices.vue";
 import MyconnectServer from "./mynetwork/myconnect-server.vue";
 export default {
    components: {
-     AdhocView,
+ //    AdhocView,
+     ZonesView,
      card,
      MyconnectServer
    },
diff --git a/src/components/mynetwork/mytable.vue b/src/components/mynetwork/mytable.vue
index 08503c3..7de9067 100644
--- a/src/components/mynetwork/mytable.vue
+++ b/src/components/mynetwork/mytable.vue
@@ -147,6 +147,7 @@ export default {
   },
   data() {
    return{
+     STATUS:{},
      CONFIG:{
          'status':'',
          'workerkey':'',
@@ -268,6 +269,16 @@ export default {
               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(log))	
           //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> 
@@ -276,7 +287,12 @@ export default {
           <br>
           <br>
 `
-info += 'docker exec -it -udocker '+this.hybridshowdata.Names+' /bin/bash '
+if(container_user){
+  info += 'docker exec -it -u'+container_user_swarmlab+' '+this.hybridshowdata.Names+' ' + container_bash
+}else{
+  info += 'docker exec -it  '+this.hybridshowdata.Names+' ' + container_bash
+}
+
 info +='<br>'
 info +='<br>'
 info +=' Directory Maps'
@@ -577,7 +593,8 @@ info +='</h5><br>'
              this.CONFIG.publickey              = ''
          }
          // send to  myconnect-server.vue
-         console.log('server-config ' + JSON.stringify(value))
+         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_out(val) {
@@ -601,11 +618,15 @@ info +='</h5><br>'
         this.$root.$emit('SERVER_hybrid_table_stop')
       },
     async message_hybrid_status(val) {
-        console.log(" message_hybrid_status "+JSON.stringify(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)
       }
   },
 
diff --git a/src/store/modules/create_pipelineLLO.js b/src/store/modules/create_pipelineLLO.js
index 19e823b..f99ed66 100644
--- a/src/store/modules/create_pipelineLLO.js
+++ b/src/store/modules/create_pipelineLLO.js
@@ -8,7 +8,9 @@ export default {
   state: {
     token: '',
 		socketStatus:'close',
-    status: {}
+    status: {},
+    statusswarmlab: {},
+    config: {}
   },
   getters: {
 		getsocketStatus (state, container) {
@@ -20,8 +22,14 @@ export default {
 		getlog (state, container) {
 			return state.log
 		},
+		getconfig (state, container) {
+			return state.config
+		},
 		getstatus (state, container) {
 			return state.status
+		},
+		getstatusswarmlab (state, container) {
+			return state.statusswarmlab
 		}
   },
   mutations: {
@@ -37,9 +45,23 @@ export default {
 		add_log (state, data) {
         //console.log("js1 set "+JSON.stringify(data))
 				state.log.push(data);
+		},
+		add_config (state, data) {
+        //console.log("js1 set "+JSON.stringify(data))
+				state.config = data
+		},
+		add_statusswarmlab (state, data) {
+        //console.log("js1 set "+JSON.stringify(data))
+				state.statusswarmlab = data
 		}
   },
   actions: {
+		addstatusswarmlab({commit}, value) {
+			   commit('add_statusswarmlab', value)
+		},
+		addconfig({commit}, value) {
+			   commit('add_config', value)
+		},
 		addlog({commit}, value) {
 				//console.log("container "+value)
          var tt = {}
@@ -224,6 +246,35 @@ export default {
           return R;
         }
       }
+    },
+     async getserviceshybridstatus({commit,rootGetters}, value) {
+        console.log('value '+JSON.stringify(value))
+      try {
+          var token = value.token
+          var params = {
+              bootstrapnameid: value.bootstrapnameid,
+              bootstrapstackname: value.bootstrapstackname
+            }
+          var options = {
+            params: params,
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var sock_server_l =  ApiConfig.url_80+'/getserviceshybridstatus'
+        var p = await axios.get(sock_server_l,options);
+        //var p = await axios.get('https://localhost:3000/getservicesstatus',options);
+        return p
+      } 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 getservicesstatus({commit,rootGetters}, value) {
         console.log('value '+JSON.stringify(value))
@@ -335,6 +386,76 @@ export default {
         }
       }
     },
+    async hybrid_join({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              node: value.node,
+              bootstrapstackid: value.bootstrapstackid,
+              bootstrapnameid: value.bootstrapnameid,
+              action: 'join'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/swarmlabhybridjoinstack',params,options);
+        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))
+			  return p
+      } 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 hybrid_leave({commit,rootGetters}, value) {
+      try {
+          var token = value.token
+          var params = {
+              node: value.node,
+              bootstrapstackid: value.bootstrapstackid,
+              bootstrapnameid: value.bootstrapnameid,
+              action: 'leave'
+            }
+          var options = {
+            headers: { 'content-type': 'application/x-www-form-urlencoded',Authorization: `Bearer ${token}` },
+          };
+        var p = await axios.post('https://api.swarmlab.io/swarmlabhybridjoinstack',params,options);
+        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))
+			  return p
+      } 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 swarmlabhybridconfig({commit,rootGetters}, value) {
       try {
           var token = value.token
@@ -352,7 +473,7 @@ export default {
         }
         //console.log(value.token)
         //console.log(value.swarmlabname)
-        console.log(JSON.stringify(p))
+        //console.log(JSON.stringify(p))
 			  return p
       } catch (e) {
         if(e.message == "Request failed with status code 401" || /401/i.test(e.message)){
diff --git a/viwsession/session1 b/viwsession/session1
index 022fc38..4b88b27 100644
--- a/viwsession/session1
+++ b/viwsession/session1
@@ -20,9 +20,10 @@ badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/App.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/myconnect-server.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork/myconnect-server.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices.vue
-badd +58 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/deploy-bootstrap.vue
+badd +449 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/deploy-bootstrap.vue
 badd +30 /data/appl/ok/swarmlab-hybrid-agent/src/components/managedeploy.vue
 badd +1 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/view-service.vue
+badd +0 /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/join-service.vue
 argglobal
 silent! argdel *
 $argadd mynetwork.vue
@@ -45,14 +46,14 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe '1resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe '2resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
-exe '3resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
-exe '4resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 4resize ' . ((&columns * 102 + 102) / 205)
+exe '1resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe '2resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 101 + 102) / 204)
+exe '3resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 204)
+exe '4resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 4resize ' . ((&columns * 102 + 102) / 204)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -63,7 +64,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 393 - ((12 * winheight(0) + 11) / 23)
+let s:l = 393 - ((11 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -82,7 +83,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 51 - ((4 * winheight(0) + 11) / 23)
+let s:l = 51 - ((4 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -101,7 +102,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 21 - ((0 * winheight(0) + 11) / 23)
+let s:l = 21 - ((0 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -120,7 +121,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 35 - ((0 * winheight(0) + 11) / 23)
+let s:l = 35 - ((0 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -128,14 +129,14 @@ normal! zt
 normal! 010|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
-exe '1resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe '2resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
-exe '3resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
-exe '4resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 4resize ' . ((&columns * 102 + 102) / 205)
+exe '1resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe '2resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 101 + 102) / 204)
+exe '3resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 204)
+exe '4resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 4resize ' . ((&columns * 102 + 102) / 204)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src-local/llo/new.js
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -150,11 +151,11 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe '2resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
-exe '3resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe '2resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
+exe '3resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 204)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -165,12 +166,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 115 - ((1 * winheight(0) + 23) / 47)
+let s:l = 805 - ((22 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-115
-normal! 03|
+805
+normal! 0
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
 argglobal
@@ -184,7 +185,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 148 - ((0 * winheight(0) + 11) / 23)
+let s:l = 148 - ((21 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -203,7 +204,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 312 - ((0 * winheight(0) + 11) / 23)
+let s:l = 312 - ((0 * winheight(0) + 11) / 22)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -211,11 +212,11 @@ normal! zt
 normal! 013|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components
 wincmd w
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe '2resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
-exe '3resize ' . ((&lines * 23 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe '2resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
+exe '3resize ' . ((&lines * 22 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 102 + 102) / 204)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/store/modules/create_pipelineLLO.js
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -226,8 +227,8 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -238,7 +239,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 344 - ((20 * winheight(0) + 23) / 47)
+let s:l = 344 - ((18 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -257,16 +258,16 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 406 - ((0 * winheight(0) + 23) / 47)
+let s:l = 133 - ((13 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-406
-normal! 019|
+133
+normal! 0308|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/myconnect-server.vue
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -277,8 +278,8 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -289,12 +290,12 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 26 - ((25 * winheight(0) + 23) / 47)
+let s:l = 32 - ((30 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-26
-normal! 0
+32
+normal! 058|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
 argglobal
@@ -308,16 +309,16 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 145 - ((6 * winheight(0) + 23) / 47)
+let s:l = 161 - ((44 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-145
-normal! 0
+161
+normal! 019|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices.vue
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -328,8 +329,8 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 argglobal
 enew
 file /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/manage-service.vue
@@ -353,16 +354,16 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 18 - ((11 * winheight(0) + 23) / 47)
+let s:l = 28 - ((27 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-18
-normal! 011|
+28
+normal! 02|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-exe 'vert 1resize ' . ((&columns * 102 + 102) / 205)
-exe 'vert 2resize ' . ((&columns * 102 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 101 + 102) / 204)
+exe 'vert 2resize ' . ((&columns * 102 + 102) / 204)
 tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/deploy-bootstrap.vue
 set splitbelow splitright
 wincmd _ | wincmd |
@@ -377,11 +378,11 @@ set nosplitbelow
 set nosplitright
 wincmd t
 set winminheight=1 winheight=1 winminwidth=1 winwidth=1
-exe 'vert 1resize ' . ((&columns * 75 + 102) / 205)
-exe '2resize ' . ((&lines * 18 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 129 + 102) / 205)
-exe '3resize ' . ((&lines * 28 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 129 + 102) / 205)
+exe 'vert 1resize ' . ((&columns * 75 + 102) / 204)
+exe '2resize ' . ((&lines * 17 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 128 + 102) / 204)
+exe '3resize ' . ((&lines * 27 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 128 + 102) / 204)
 argglobal
 setlocal fdm=manual
 setlocal fde=0
@@ -392,7 +393,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 262 - ((44 * winheight(0) + 23) / 47)
+let s:l = 262 - ((14 * winheight(0) + 22) / 45)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -411,7 +412,7 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 12 - ((11 * winheight(0) + 9) / 18)
+let s:l = 12 - ((6 * winheight(0) + 8) / 17)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
@@ -430,21 +431,43 @@ setlocal fml=1
 setlocal fdn=20
 setlocal fen
 silent! normal! zE
-let s:l = 292 - ((1 * winheight(0) + 14) / 28)
+let s:l = 300 - ((9 * winheight(0) + 13) / 27)
 if s:l < 1 | let s:l = 1 | endif
 exe s:l
 normal! zt
-292
-normal! 07|
+300
+normal! 09|
 lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
 wincmd w
-3wincmd w
-exe 'vert 1resize ' . ((&columns * 75 + 102) / 205)
-exe '2resize ' . ((&lines * 18 + 25) / 50)
-exe 'vert 2resize ' . ((&columns * 129 + 102) / 205)
-exe '3resize ' . ((&lines * 28 + 25) / 50)
-exe 'vert 3resize ' . ((&columns * 129 + 102) / 205)
-tabnext 6
+exe 'vert 1resize ' . ((&columns * 75 + 102) / 204)
+exe '2resize ' . ((&lines * 17 + 24) / 48)
+exe 'vert 2resize ' . ((&columns * 128 + 102) / 204)
+exe '3resize ' . ((&lines * 27 + 24) / 48)
+exe 'vert 3resize ' . ((&columns * 128 + 102) / 204)
+tabedit /data/appl/ok/swarmlab-hybrid-agent/src/components/manageservices/join-service.vue
+set splitbelow splitright
+set nosplitbelow
+set nosplitright
+wincmd t
+set winminheight=1 winheight=1 winminwidth=1 winwidth=1
+argglobal
+setlocal fdm=manual
+setlocal fde=0
+setlocal fmr={{{,}}}
+setlocal fdi=#
+setlocal fdl=0
+setlocal fml=1
+setlocal fdn=20
+setlocal fen
+silent! normal! zE
+let s:l = 22 - ((21 * winheight(0) + 23) / 46)
+if s:l < 1 | let s:l = 1 | endif
+exe s:l
+normal! zt
+22
+normal! 037|
+lcd /data/appl/ok/swarmlab-hybrid-agent/src/components/mynetwork
+tabnext 7
 set stal=1
 if exists('s:wipebuf')
   silent exe 'bwipe ' . s:wipebuf