From 4741d04950d78f1099d8ed5f8594d51c8e2a64da Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Tue, 18 Jan 2022 04:36:35 +0200
Subject: [PATCH] new MENOU version 1

---
 .gitignore                                    |   6 +-
 src-local/llo/new.js                          |   7 +
 src/App.vue                                   |  22 +-
 .../manageservices/view-dashboard.vue         |  28 +-
 src/components/mymicroservices.vue            | 100 +++-
 src/components/mymicroservicescustom.vue      |  79 ++-
 src/components/mynetwork.vue                  |  65 +--
 src/components/mynetwork/AdhocView.vue        |  38 +-
 .../mynetwork/availablemicroservices.vue      | 453 ++++++++++++++----
 .../availablemicroservicescustom.vue          | 340 ++++++++++---
 src/components/mynetwork/availablepoc.vue     |  37 +-
 .../mynetwork/availableservices.vue           | 267 +++++++++--
 src/components/mynetwork/availablestorage.vue |  36 +-
 .../mynetwork/buildermyservices.vue           |  11 +-
 src/components/mynetwork/builderservices.vue  |  18 +-
 src/components/mynetwork/customservices.vue   |   3 +-
 src/components/mynetwork/dockerservices.vue   |  91 +++-
 src/components/mynetwork/images.vue           | 212 ++++++--
 src/components/mynetwork/mytable.vue          | 137 ++++--
 src/components/mynetwork/networks.vue         | 120 ++++-
 20 files changed, 1635 insertions(+), 435 deletions(-)

diff --git a/.gitignore b/.gitignore
index c1c819d..83549bb 100644
--- a/.gitignore
+++ b/.gitignore
@@ -18,8 +18,10 @@ viwsession/
 testfilemanager/
 README-update
 
-src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm
-src-local/community/rootapostolos@swarmlab.io_ansibletest_microservice-alpine313
+src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm/
+src-local/community/rootapostolos@swarmlab.io_ansibletest_microservice-alpine313/
+src-local/community/cse242017102@uniwa.gr_test_microservice-nodejs/
+src-local/builders/bento-swarmlab/
 
 swarmlabdoc.js
 swarmlabdoc.asciidoc_config
diff --git a/src-local/llo/new.js b/src-local/llo/new.js
index c780b0b..767736a 100644
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@@ -3964,6 +3964,7 @@ SWARMLAB_STORAGE_PASSWORD=${service_password}
          var services_path = './instance/'+service+'/'+service
          var services_pathexec = process.cwd()
          var stopeditexec = `/bin/bash ./stop-sidecar-edit-service.sh ${service}`
+       try {
           const stopedit = spawn(stopeditexec, {
             stdio: 'pipe',
             shell: true,
@@ -3999,6 +4000,12 @@ SWARMLAB_STORAGE_PASSWORD=${service_password}
             });
 
           });
+			} catch (error) {
+						console.log('Error:', error);
+              var n = {}
+              n.data = error
+              io.emit('message_close', n);
+			}
     });
 
     socket.on('stop_storage', (service) => {
diff --git a/src/App.vue b/src/App.vue
index 94c0e79..d06fd32 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -268,9 +268,11 @@
 					<b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
 							<b-list-group-item variant="light"  name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')"> LabRoom</b-list-group-item>
 							<b-list-group-item variant="light"  name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')"> Storage</b-list-group-item>
-							<b-list-group-item variant="light"  name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item>
 							<b-list-group-item variant="light"  name="Proof_of_concept" class=" ti-light-bulb  m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')"> Proof_of_concept</b-list-group-item>
-							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')">  Users images</b-list-group-item>
+              <!--
+							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')">  User Micorservices</b-list-group-item>
+              -->
+							<b-list-group-item variant="light"  name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item>
 					</b-collapse>
 
 
@@ -358,9 +360,11 @@
 					<b-collapse id="hybrid-private1" class="m-subm" accordion="m-sidebar" role="tabpanel">
 							<b-list-group-item variant="light"  name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')" title="LabRoom"> </b-list-group-item>
 							<b-list-group-item variant="light"  name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')" title="Storage"> </b-list-group-item>
-							<b-list-group-item variant="light"  name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item>
 							<b-list-group-item variant="light"  name="Proof_of_concept" class="ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')" title="Proof_of_concept"> </b-list-group-item>
-							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')" title="Users Microservices"> </b-list-group-item>
+              <!--
+							<b-list-group-item variant="light"  name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')" title="User Microservices"> </b-list-group-item>
+              -->
+							<b-list-group-item variant="light"  name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')"  style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item>
 					</b-collapse>
 
 
@@ -783,25 +787,35 @@ export default {
         this.hybridmenou = action
           //console.log(action)
           if(action == 'bootstrap'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        this.$root.$emit('hybrid_refresh_dockerservices')
           }else if(action == 'dashboard'){
+            this.$root.$emit('hybrid_console_not_view',true)
             console.log('dashboard '+action)
           }else if(action == 'dashboardall'){
+            this.$root.$emit('hybrid_console_not_view',true)
             console.log('dashboardall '+action)
           }else if(action == 'connect-server'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        this.$root.$emit('hybrid_connect_server')
           }else if(action == 'llo'){
+            this.$root.$emit('hybrid_console_not_view',true)
             console.log('llo '+action)
 		        //this.$root.$emit('hybrid_manage_llo')
           }else if(action == 'services'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        this.$root.$emit('hybrid_refresh_availableservices')
           }else if(action == 'manage_service'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        //this.$root.$emit('hybrid_manage_service')
           }else if(action == 'storage'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        //this.$root.$emit('hybrid_manage_service')
           }else if(action == 'microservice'){
+            this.$root.$emit('hybrid_console_not_view',false)
 		        //this.$root.$emit('hybrid_manage_service')
           }else if(action == 'proofofconcept'){
+            this.$root.$emit('hybrid_console_not_view',true)
 		        //this.$root.$emit('hybrid_manage_service')
           }else if(action == 'manage_deploy'){
           }
diff --git a/src/components/manageservices/view-dashboard.vue b/src/components/manageservices/view-dashboard.vue
index b5334d7..92abb6e 100644
--- a/src/components/manageservices/view-dashboard.vue
+++ b/src/components/manageservices/view-dashboard.vue
@@ -1,9 +1,11 @@
 <template>
-<div class="container-fluid content-row h-50">
+<b-container fluid class="bv-example-row">
 
-    <div class="row ">
+    <div class="row h-50">
 
-        <div class="col-sm-12 col-lg-6 text-center">
+<!-- stats_stats_imagescontainers --> 
+
+        <div class="col-sm-6 text-center">
 						<v-wait for="stats_stats_imagescontainers">
 							<template slot="waiting">
 								<div>
@@ -17,7 +19,9 @@
             </div>
         </div>
 
-        <div class="col-sm-12 col-lg-6 text-center">
+<!-- stats_stats_container --> 
+
+        <div class="col-sm-6 text-center">
 						<v-wait for="wait_stats_stats_container">
 							<template slot="waiting">
 								<div>
@@ -27,13 +31,16 @@
 							</template>
 						</v-wait>
             <div class="card h-50 shadow p-3 mb-5 bg-white rounded">
-             <v-chart class="chart" :key="stats_stats_container" :option="optiondocker" />
+             <v-chart class="chart" :key="stats_stats_container" style="min-width: 100%;"  :option="optiondocker" />
             </div>
         </div>
 
-    </div>
 
-  </div>
+    </div> <!-- row -->
+
+
+
+  </b-container>
 </template>
 
 <script>
@@ -79,6 +86,7 @@ export default {
 			// width/height get this for refresh charts
 			stats_stats_imagescontainers:0,
 			stats_stats_container:0,
+			stats_stats_volume:0,
       width: document.documentElement.clientWidth,
       height: document.documentElement.clientHeight,
 
@@ -171,7 +179,7 @@ optiondocker: {
 */
 optionsystem: {
   title: {
-    text: 'Image/Containers'
+    text: 'Images/Containers'
   },
   tooltip: {
     trigger: 'axis',
@@ -236,6 +244,7 @@ optionsystem: {
 		 (async () => {
         this.$wait.start('stats_stats_imagescontainers');
         this.$wait.start('wait_stats_stats_container');
+        this.$wait.start('wait_stats_stats_volume');
 				var log = await store.dispatch("pipelineLLO/get_stats_imagescontainers",{
 					token:this.token,
 					action:'images_containers'
@@ -301,6 +310,8 @@ optionsystem: {
 							//this.stats_stats_container += 1
 						}
         this.$wait.end('wait_stats_stats_container');
+
+        this.$wait.end('wait_stats_stats_volume');
         
 		 })();
 
@@ -326,6 +337,7 @@ optionsystem: {
  		async refresh() {
 			this.stats_stats_imagescontainers += 1
 			this.stats_stats_container += 1
+			this.stats_stats_volume += 1
     }
   },
   actions: {
diff --git a/src/components/mymicroservices.vue b/src/components/mymicroservices.vue
index 97e5f7b..678a4e7 100644
--- a/src/components/mymicroservices.vue
+++ b/src/components/mymicroservices.vue
@@ -1,29 +1,77 @@
 <template>
   <card class="card-user" style="max-height:100%">
 
+   <div class="row" >
+      <div :class="`col-1 order-first`" >
+				<button 
+					class="btn btn-outline-info btn-sm" 
+					round
+					type="button"
+					@click="setnewview(12,0)">
+					+</button>
+				<button 
+          v-show="!consoleview"
+					class="btn btn-warning btn-sm" 
+					round
+					type="button"
+					@click="setnewview(7,5)">
+					-</button>
+      </div>
+      <div :class="`col-10`" >
+      </div>
+      <div :class="`col-1 order-last float-sm-right`" >
+				<button 
+					class="btn btn-outline-info btn-sm float-right" 
+					round
+					type="button"
+					@click="setnewview(0,12)">
+					+</button>
+				<button 
+          v-show="!consolemicro"
+					class="btn btn-warning btn-sm float-right" 
+					round
+					type="button"
+					@click="setnewview(7,5)">
+					-</button>
+      </div>
+   </div>
+<div class="divider py-1 "><hr></div>
+
     <div class="row" >
-      <div class="col-7 order-first " >
+      <div :class="`col-${viewmicroservices} order-first`" >
       <br>
-      <!--
-        <view-network>
-
-        </view-network>
-        -->
         <available-microservices
+        v-show="consolemicro"
         :key="componentKeyreloadservice5" 
         >
 
         </available-microservices>
       </div>
 
-      <div class="col-5 order-last" >
+      <div :class="`col-${viewconsole} order-last`" >
       <br>
-        <adhoc-view>
+      <!--
+        <adhoc-view
+        v-show="consoleview"
+        >
 
         </adhoc-view>
+      -->
+        <available-mymicroservices>
+        </available-mymicroservices>
       </div>
     </div>
 
+<div class="divider py-1 "><hr></div>
+    <div class="row" >
+      <div :class="`col-12 order-first`" >
+      <br>
+        <adhoc-view
+        v-show="showconsole"
+        >
+        </adhoc-view>
+      </div>
+    </div>
 
   </card>
 </template>
@@ -34,9 +82,10 @@ import AdhocView from "./mynetwork/AdhocView.vue";
 import card from '@/components/Card.vue'
 //import DockerServices from "./mynetwork/dockerservices.vue";
 import AvailableMicroservices from "./mynetwork/availablemicroservices.vue";
+import AvailableMymicroservices from "./mynetwork/availablemicroservicescustom.vue";
 export default {
    components: {
- //    ViewNetwork,
+ AvailableMymicroservices,
      AdhocView,
      card,
   //   DockerServices,
@@ -44,6 +93,11 @@ export default {
    },
    data () {
       return {
+        viewmicroservices: 7,
+        viewconsole: 5,
+        consoleview: true,
+        consolemicro: true,
+        showconsole: true,
         componentKeyreloadservice5:1,
         loading: false,
         consoleView: 'off',
@@ -54,13 +108,41 @@ export default {
 		this.$root.$on('hybrid_refresh_info_deploy_local', () => {
       this.componentKeyreloadservice5 += 1
 		})
+// problem reload asto etsi mechri na vreis giati
+//		this.$root.$on('hybrid_start_instance_show_console', (v) => {
+//        this.setnewview(7, 5) 
+//		})
   },
   beforeDestroy () {
 		this.$root.$off('hybrid_refresh_info_deploy_local')
+//		this.$root.$off('hybrid_start_instance_show_console')
  },
 
+  methods: {
+    setnewview(m, c) {
+      if(m == 12){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = false
+        this.consolemicro = true
+      }
+      if(c == 12){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = true
+        this.consolemicro = false
+      }
+      if(m == 7 || c == 5){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = true
+        this.consolemicro = true
+      }
+    }
+ },
 
     created () {
+      this.setnewview(7, 5)
     }
 };
 </script>
diff --git a/src/components/mymicroservicescustom.vue b/src/components/mymicroservicescustom.vue
index f48f40e..202e717 100644
--- a/src/components/mymicroservicescustom.vue
+++ b/src/components/mymicroservicescustom.vue
@@ -1,24 +1,58 @@
 <template>
   <card class="card-user" style="max-height:100%">
 
+   <div class="row" >
+      <div :class="`col-1 order-first`" >
+				<button 
+					class="btn btn-outline-info btn-sm" 
+					round
+					type="button"
+					@click="setnewview(12,0)">
+					+</button>
+				<button 
+          v-show="!consoleview"
+					class="btn btn-warning btn-sm" 
+					round
+					type="button"
+					@click="setnewview(7,5)">
+					-</button>
+      </div>
+      <div :class="`col-10`" >
+      </div>
+      <div :class="`col-1 order-last float-sm-right`" >
+				<button 
+					class="btn btn-outline-info btn-sm float-right" 
+					round
+					type="button"
+					@click="setnewview(0,12)">
+					+</button>
+				<button 
+          v-show="!consolemicro"
+					class="btn btn-warning btn-sm float-right" 
+					round
+					type="button"
+					@click="setnewview(7,5)">
+					-</button>
+      </div>
+   </div>
+<div class="divider py-1 "><hr></div>
+
     <div class="row" >
-      <div class="col-7 order-first " >
+      <div :class="`col-${viewmicroservices} order-first`" >
       <br>
-      <!--
-        <view-network>
-
-        </view-network>
-        -->
         <available-mymicroservices
+        v-show="consolemicro"
         :key="componentKeyreloadservice5" 
         >
 
         </available-mymicroservices>
       </div>
 
-      <div class="col-5 order-last" >
+      <div :class="`col-${viewconsole} order-last`" >
       <br>
-        <adhoc-view>
+        <adhoc-view
+          v-show="consoleview"
+        >
 
         </adhoc-view>
       </div>
@@ -44,6 +78,10 @@ export default {
    },
    data () {
       return {
+        viewmicroservices: 7,
+        viewconsole: 5,
+        consoleview: true,
+        consolemicro: true,
         componentKeyreloadservice5:1,
         loading: false,
         consoleView: 'off',
@@ -58,10 +96,33 @@ export default {
   beforeDestroy () {
 		this.$root.$off('hybrid_refresh_info_deploy_local')
  },
-
+  methods: {
+    setnewview(m, c) {
+      if(m == 12){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = false
+        this.consolemicro = true
+      }
+      if(c == 12){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = true
+        this.consolemicro = false
+      }
+      if(m == 7 || c == 5){
+        this.viewmicroservices = m
+        this.viewconsole = c
+        this.consoleview = true
+        this.consolemicro = true
+      }
+    }
+ },
 
     created () {
+      this.setnewview(7, 5)
     }
+
 };
 </script>
 <style>
diff --git a/src/components/mynetwork.vue b/src/components/mynetwork.vue
index ef91730..10e84b4 100644
--- a/src/components/mynetwork.vue
+++ b/src/components/mynetwork.vue
@@ -10,39 +10,30 @@
         <docker-services>
 
         </docker-services>
-      <br> 
-      <br> 
-      <hr>
-          <div class="row text-center">
-            <div class="col-12">
-                <b>View and Manage your local system <span class="text-info">(Docker Images, Containers and Volumes)</span></b>
-            </div>
-          </div>
-      <hr>
-      <br> 
-        <docker-images>
-
-        </docker-images>
-      <br> 
-      <br> 
-      <br> 
-      <hr>
-          <div class="row text-center">
-            <div class="col-12">
-                <b>View and Manage your local <span class="text-info"> Docker networks</span></b>
-            </div>
-          </div>
-      <hr>
-        <docker-networks>
-
-        </docker-networks>
       </div>
 
       <div class="col-5 order-last" >
       <br>
-        <adhoc-view>
+
+        <adhoc-view
+         v-if="viewconsole"
+        >
 
         </adhoc-view>
+
+        <docker-images
+           v-show="viewimages"
+        >
+
+        </docker-images>
+
+        <docker-networks
+           v-show="viewnetworks"
+        >
+
+        </docker-networks>
+
+
       </div>
     </div>
 
@@ -70,14 +61,34 @@ export default {
    },
    data () {
       return {
+        viewconsole:false,
+        viewimages:true,
+        viewnetworks:false,
         loading: false,
         consoleView: 'off',
         productIndex: 1
       }
     },
   mounted() {
+    this.$root.$on('hybrid_show_instance_images', (v) => {
+      if( v == 'networks'){
+        this.viewnetworks = true;
+        this.viewimages = false;
+        this.viewconsole = false;
+      }else if( v == 'images'){ 
+        this.viewnetworks = false;
+        this.viewimages = true;
+        this.viewconsole = false;
+      }else if( v == 'console'){ 
+        this.viewnetworks = false;
+        this.viewimages = false;
+        this.viewconsole = true;
+			}
+    })
+
   },
   beforeDestroy () {
+		this.$root.$off('hybrid_show_instance_images')
  },
 
 
diff --git a/src/components/mynetwork/AdhocView.vue b/src/components/mynetwork/AdhocView.vue
index 3f63bdd..5ce4e6c 100644
--- a/src/components/mynetwork/AdhocView.vue
+++ b/src/components/mynetwork/AdhocView.vue
@@ -1,6 +1,8 @@
 <template>
   <card class="card-user" style="max-height:100%">
-      <div class="author">
+      <div class="author"
+        v-if="vieconsoleicon"
+      >
         <img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
       </div>
       <b-container fluid class="bv-example-row">
@@ -15,6 +17,17 @@
 						</v-wait>
 
 
+ <b-container fluid class="bv-example-row">
+      <div class="col-12 text-center">
+       <b> <span class="text-muted">Your</span> <span class="text-info"> System Console</span></b>
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+      </div>
+ </b-container>
+
 						<button type="button"
 							round
 							class="btn btn-outline-danger btn-sm"
@@ -113,6 +126,7 @@ export default {
    },
    data () {
     return {
+      vieconsoleicon: true,
       socketonline:false,
       extenderror:false,
       tryConsole:false,
@@ -233,6 +247,16 @@ export default {
       this.tryConsole = false
       this.code = ''
  },
+// setfontplus () {
+//   this.consolefontsize++
+//   this.$refs.myCm.codemirror.refresh()
+  //  this.$refs[$ref].codemirror.refresh()
+//   console.log(this.consolefontsize)
+// },
+// setfontminus () {
+//   this.consolefontsize--
+//   console.log(this.consolefontsize)
+// },
  async getdata () {
 
               var field = this.getinfo
@@ -414,6 +438,15 @@ export default {
         this.$wait.end('myRunInstance1');
 			})
 		})
+    // from microservices not view icon
+		this.$root.$on('hybrid_console_not_view', (v) => {
+      console.log(v)
+      if(v){
+        this.vieconsoleicon =  true
+      }else if (!v){
+        this.vieconsoleicon = false
+      }
+		})
 
 	},
   beforeDestroy () {
@@ -421,6 +454,7 @@ export default {
 		this.$root.$off('hybrid_log_in')
 		this.$root.$off('SERVER_hybrid_table_start')
 		this.$root.$off('SERVER_hybrid_table_stop')
+		this.$root.$off('hybrid_console_not_view')
  },
 
 		created () {
@@ -431,8 +465,10 @@ export default {
 </script>
 
 <style>
+
 .CodeMirror {
     font-family: monospace;
+    font-size: 11px;
     height: 550px;
 }
 
diff --git a/src/components/mynetwork/availablemicroservices.vue b/src/components/mynetwork/availablemicroservices.vue
index fbfa9f5..718c5a5 100644
--- a/src/components/mynetwork/availablemicroservices.vue
+++ b/src/components/mynetwork/availablemicroservices.vue
@@ -14,10 +14,18 @@
         Enter Lab_room...
       </div>
     </template>
+  </v-wait>
+  <v-wait for="myRunInstancetutorremove">
+    <template slot="waiting">
+      <div>
+        <img src="@/assets/loading.gif" />
+        Remove ...
+      </div>
+    </template>
   </v-wait>
           <div class="row text-center">
             <div class="col-12">
-              <b>Swarmlab <span class="text-info">MicroServices</span> Deploy - Local </b>
+              <b><span class="text-muted">Swarmlab </span><span class="text-info">MicroServices</span> - <span class="text-muted">Deploy@Home</span> </b>
             </div>
           </div>
 
@@ -55,21 +63,34 @@
     <div class="row"
       v-if="viewhybridoptions"
     >
-      <b-col  class="text-center" cols="12" sm="12"  md="12">
-                <span>
+      <b-col  class="text-center" cols="12" sm="12"  >
+                <span class="text-muted">
                 <b>Lab Service Options</b>
                 </span>
       </b-col>
     </div>
 
-		<div class="input-group-append"
-      v-if="viewhybridoptions"
+		<div class="input-group-append input-group input-group-sm sm-3"
+      v-if="viewhybridoptions && up_name"
     >
-				<button class="btn btn-outline-secondary" 
+				<button class="btn btn-success btn-sm" 
+          v-if="startservice"
 					round
 					type="button"
+				  @click="setHybridoptions"
         >
-				Instances </button>
+				Start</button>
+				<button class="btn btn-warning btn-sm" 
+          v-else
+					round
+					type="button"
+				  @click="stopservice"
+        >
+				Stop</button>
+
+
+
+
 			<input type="text" 
 				class="form-control text-info" 
 				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@@ -78,7 +99,7 @@
 				v-model="up_name"
 				>
         <!--
-				<button class="btn btn-outline-secondary" 
+				<button class="btn btn-outline-secondary btn-sm" 
 					round
 					type="button"
         >
@@ -93,30 +114,30 @@
         <div  class="text-info">{{ up_name }}</div>
         -->
 
-				<button class="btn btn-outline-info" 
-           v-if="viewhybridoptions"
+				<button class="btn btn-outline-info btn-sm" 
+           v-if="viewhybridoptions && up_name && actionrowindex "
 					round
 					type="button"
 				  @click="backup"
         >
 				Backup</button>
-				<button class="btn btn-outline-dark" 
-           v-if="viewhybridoptions"
+				<button class="btn btn-outline-dark btn-sm" 
+           v-if="viewhybridoptions && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="backupview"
         >
 				BackupView</button>
 
-				<button class="btn btn-outline-primary" 
-           v-if="viewhybridoptions && customedit && custommenouopen != true"
+				<button class="btn btn-outline-primary btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen != true && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustom"
         >
 				Custom</button>
-				<button class="btn btn-outline-secondary" 
-          v-if="viewhybridoptions && customedit && custommenouopen === true"
+				<button class="btn btn-outline-secondary btn-sm" 
+          v-if="viewhybridoptions && customedit && custommenouopen === true && up_name && actionrowindex"
 					round
           disabled
 					type="button"
@@ -124,27 +145,46 @@
         >
 				Custom:</button>
 
-				<button class="btn btn-outline-warning" 
-           v-if="viewhybridoptions && customedit && custommenouopen"
+				<button class="btn btn-outline-warning btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustomcancel"
         >
 				Cancel</button>
-				<button class="btn btn-outline-info" 
-           v-if="viewhybridoptions && customedit && custommenouopen"
+				<button class="btn btn-outline-info btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustomsave"
         >
 				Save</button>
-
-				<button class="btn btn-outline-success" 
-					round
-					type="button"
-				  @click="setHybridoptions"
-        >
-				Up</button>
+            <button
+              class=" btn btn-outline-danger  btn-sm"
+              title="Remove Lab_Instance"
+              @click="onActionstopcheck()"
+              round
+              >
+              Remove
+            </button>
+            <button
+           		v-if="actionrowindexmore"
+              class="ti-more btn btn-info  btn-sm"
+              title="More Actions..."
+              @click="onActionmore()"
+              round
+              >
+              
+            </button>
+            <button
+							v-else
+              class="ti-more btn btn-secondary  btn-sm"
+              title="More Actions..."
+              @click="onActionmoreclose()"
+              round
+              >
+              
+            </button>
     </div>
 
 		<div class="input-group-append"
@@ -152,7 +192,7 @@
     >
 
     <div class="row"
-      <b-col  class="text-center" cols="5" sm="5"  md="5">
+      <b-col  class="text-center" cols="5" sm="5"  >
         <div class="form-group">
           <label for="custompackages" class="text-dark">Add Extrapackages  <br>
           <span class="text-success">
@@ -191,7 +231,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable  id="idvuetablekeyg"
 				ref="vuetable"
 				:key="vuetablekeyg"
 				:api-url='apiurl'
@@ -209,52 +249,36 @@
 				wrapper-class="vuetable-wrapper"
 				loading-class="loading"
 				detail-row-id="id"
+        @vuetable:row-clicked="rowClicked" 
 				@vuetable:pagination-data="onPaginationData"
 				@vuetable:load-success="loadsuccess"
         @vuetable:load-error="onLoadError"
 				:css="css.table"
 				 >
 
-<!--
-EDO
-props.rowData._id gia to pagination problem
-pass props.rowData._id as index
-allagi tou vuetablerefresh
-            <button
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
-              title="Download Lab_Instance"
-              round
-              @click="checkactionrowindex(props.rowData,props.rowData._id)">
-            update</button>
--->
-        <div slot="actionsenabled" slot-scope="props">
+        <div slot="actionsenabled" slot-scope="props"
+				      :key="vuetablekeygslotnew"
+        >
           <div class="d-flex justify-content-center">
-            <button
-              v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
-              class="ti-thumb-down btn btn-secondary btn-sm"
-              title="Start Lab_Instance"
+            <button 
+              class=" btn  btn-sm text-muted"
               round
-              @click="onAction('run-item', props.rowData, props.rowData._id)"
-              >
-            </button>
-            <button
               v-if="testtest[props.rowData.swarmlabname] == props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
-              class="ti-thumb-up btn btn-info btn-sm"
-              title="Stop Lab_Instance"
+            ><span class="text-success">Running...</span></button>
+            <button 
+              v-else
+              class=" btn  btn-sm text-muted"
               round
-              @click="onAction('down-item', props.rowData, props.rowData._id)"
-              >
-            </button>
+            ><span class="text-success">&nbsp;</span></button>
           </div>
         </div>
+
         <div slot="actionslocal" slot-scope="props" actionslocal
 				:key="vuetablekeygslot">
           <div class="d-flex justify-content-center">
             <button
-              v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
-              class="ti-trash btn btn-info btn-sm"
-              title="Remove Lab_Instance"
-              @click="onAction('rm-install', props.rowData, props.rowData._id)"
+              v-if="testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
+              class="ti-check btn btn-sm text-success"
               round
               >
             </button>
@@ -263,14 +287,15 @@ allagi tou vuetablerefresh
         <div slot="actions" slot-scope="props">
           <div class="d-flex justify-content-center">
             <button
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
+              class="ti-cloud-down btn  btn-sm"
               title="Download Lab_Instance"
               round
               @click="onAction('run-install', props.rowData, props.rowData._id)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="Lab_Instance Info"
+              name="Lab_Instance_microservice_Info"
             round
             @click="onAction('view-item', props.rowData, props.rowData._id)">
           </button>
@@ -318,6 +343,10 @@ export default {
   },
   data() {
    return{
+   startservice: true,
+   actionrowindex: false,
+   actionrowindexmore: true,
+   swarmlabinfonow:false,
    testactionrowindex:[],  // downloaded          used in installed
    teststatusindex:[],     // status stop run     used in status
    testtest:[],             // up or down services
@@ -365,15 +394,34 @@ export default {
 	 	active:false,
 		vuetablekeyg:0,
 		vuetablekeygslot:0,
+		vuetablekeygslotnew:0,
 		fielddata:{},
     fields: [
+      {
+          name: '__slot:actionslocal',   // <----
+          title: '',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '3%'
+        },
       {
         name: 'swarmlabname',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Microservice',
         sortField: 'swarmlabname',
         visible:true,
         dataClass: 'left aligned col-3',
-        width: '68%'
+        width: '68%',
+        callback: function(value) {
+              console.log('---- '+ value)
+          if (value) {
+              var tmp = value.split('-')
+              var v = `<span class="text-muted">${tmp[1]} </span> <span class="text-muted"></span>`
+              return v
+          }else{
+              var v = '<span>  </span>'
+              return v
+          }
+        }
       },
       {
         name: '_id',
@@ -403,13 +451,6 @@ export default {
           dataClass: 'center aligned',
           width: '5%'
         },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
       {
           name: '__slot:actions',   // <----
           title: 'Download',
@@ -479,12 +520,21 @@ export default {
 	},
 
   methods: {
+   onActionmore () {
+			this.actionrowindex = true
+			this.actionrowindexmore = false
+	 },
+   onActionmoreclose () {
+			this.actionrowindex = false
+			this.actionrowindexmore = true
+	 },
    onError (type,description) {
                     var winfo=description
                     var info='<h5>Bootstrap '+type+'</h5>'
                     this.$swal({
                       type: type,
                       html: info+winfo,
+                      icon: 'info',
                       showCloseButton: true,
                       showLoaderOnConfirm: false,
                       allowOutsideClick: false,
@@ -625,20 +675,23 @@ export default {
 		},
     async onAction (action, data, index) {
 			if(action == 'view-item' ){
+          this.swarmlabinfonow = true
           this.swarmlab=data
           var container=this.swarmlab
-          var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname)
+          //var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname)
 
-          var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
-          var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
-          var swarmlab1info=res.data.swarmlabinfo
-          var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
-          if(res.data.error25=="ok"){
-                var winfo=''
+          //var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
+          //var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
+          //var swarmlab1info=res.data.swarmlabinfo
+          //var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
+          //if(res.data.error25=="ok"){
+                //var winfo=''
+          var swarmlab1info=`https://git.swarmlab.io:3000/swarmlab/${container.swarmlabname}`
                 var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
                 this.$swal({
                   type: 'info',
-                  html: info+winfo,
+                  html: info,
+                  icon: 'info',
                   showCloseButton: true,
                   showLoaderOnConfirm: false,
                   allowOutsideClick: false,
@@ -646,7 +699,7 @@ export default {
                   reverseButtons: true,
                   focusCancel: true
                 })
-            }
+            //}
 
 
 			}else if(action == 'delete-item' ){
@@ -704,6 +757,7 @@ export default {
         this.refreshVuetable()
         this.$root.$emit('hybrid_refresh_info_deploy_local')
 			}else if(action == 'run-install' ){
+         this.swarmlabinfonow = true
          this.$wait.start('myRunInstancetutor');
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.index = index
@@ -737,8 +791,10 @@ export default {
 
          this.heavy = false
          this.heavytext = ''
-
-         this.up_name = data.swarmlabname
+					
+				//newVERSION 
+        // this.up_name = data.swarmlabname
+         this.up_name = this.hybridoptions.swarmlabname
 
         //console.log('RUN------------ '+ JSON.stringify(data))
 
@@ -747,25 +803,35 @@ export default {
 
       			var filterju = `microservice-jupyter`
             var grepju = new RegExp(filterju);
-						if(grepju.test(data.swarmlabname)){
+						// newVERSION
+						//if(grepju.test(data.swarmlabname)){
+						if(grepju.test(this.hybridoptions.swarmlabname)){
               this.viewhybridoptions = false
               let value = {}
-              value.swarmlabname = data.swarmlabname
+							// newVERSION
+              //value.swarmlabname = data.swarmlabname
+              value.swarmlabname = this.hybridoptions.swarmlabname
               value.index = index
               value.size = this.hybridoptions.size
               value.port = this.hybridoptions.port
               this.$root.$emit('hybrid_start_instance', value)
               //Vue.set(this.testactionrowindex, value.swarmlabname, value.index)
               //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
-						}else if(grepmicrosoft.test(data.swarmlabname)){
+						// newVERSION
+						//}else if(grepmicrosoft.test(data.swarmlabname)){
+						}else if(grepmicrosoft.test(this.hybridoptions.swarmlabname)){
               this.viewhybridoptions = true
               this.heavy = true
               this.heavytext = 'Note that this image is somewhat heavy (~2GB) since they embed some of the kernel debug symbols for Microsoft Windows.  It can take some time to build the Instance'
-              this.hybridoptions.swarmlabname = data.swarmlabname
+						 // newVERSION
+             // this.hybridoptions.swarmlabname = data.swarmlabname
+              this.hybridoptions.swarmlabname = this.hybridoptions.swarmlabname
               this.hybridoptions.index = index
 						}else{
               this.viewhybridoptions = true
-              this.hybridoptions.swarmlabname = data.swarmlabname
+						 // newVERSION
+             // this.hybridoptions.swarmlabname = data.swarmlabname
+              this.hybridoptions.swarmlabname = this.hybridoptions.swarmlabname
               this.hybridoptions.index = index
               for(var i = 0; i < ApiConfigWEB.length; i++) {
                 var obWEB = ApiConfigWEB[i];
@@ -808,12 +874,14 @@ export default {
         this.refreshVuetable()
 			}else if(action == 'down-item' ){
          this.up_name = ''
-         this.hybridoptions.swarmlabname = data.swarmlabname
+       //  this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.index = index
-       var info = "Stop and remove containers, networks, images, and volumes"
+       var info = `<h5> Microservice: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
+       info += "<br>Stop and remove containers, networks, images, and volumes"
        this.$swal({
           type: 'info',
           html: info,
+                      icon: 'info',
           showCloseButton: true,
           showLoaderOnConfirm: false,
           allowOutsideClick: false,
@@ -984,11 +1052,13 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
               //console.log('chown '+ JSON.stringify(this.hybridoptions.swarmlabname))
               //console.log('chownlog '+ JSON.stringify(log))
       	this.$root.$emit('hybrid_start_instance', value)
+// problem reload asto etsi mechri na vreis giati
+      //	this.$root.$emit('hybrid_start_instance_show_console', 'open')
         //Vue.set(this.testactionrowindex, value.swarmlabname, value.index)
         //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
-        this.refreshVuetable()
+        await this.refreshVuetable()
 
         //console.log('RUN 1 '+ JSON.stringify(this.hybridoptions))
 
@@ -1006,24 +1076,11 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
         this.custom.sh = ''
 		},
     async refreshVuetable() {
-				//this.vuetablekeyg += 1
-        // EDO
-        // echo ta data pou exei epilexei o user
-        // kai etsi alazo se afta tin katastassi
-        // afero ta $nextTick
-        // kai allazo apo refresh edo se afto to action
-        // refresh only status
-          // ********* refresh slot einai i lissi  ***
-        //this.dataselect=data
-        //this.indexselect=index
-        //console.log('error2a '+JSON.stringify(this.dataselect))
-        //console.log('error2b '+JSON.stringify(this.indexselect))
-        // this version with this.checkactionrowindex dont work
-        // render hangs
-		    //await this.checkactionrowindex(this.dataselect, this.indexselect)
 		    await this.checkactionrowindexall()
+			this.$nextTick(()=>{
 					this.vuetablekeygslot += 1
-				//})
+					this.vuetablekeygslotnew += 1
+				})
       },
 		playbookinfoShow(value) {
 				return this.visibility[value]=true
@@ -1031,12 +1088,184 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
 		playbookinfo(value) {
 				return this.playbookInfo=value
 		},
-		rowClicked(row, event) {
+
+
+		async onActionstopcheck() {
+
+       var info = `<h5> Microservice: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
+       info += "<br>Remove containers, networks, images, and volumes"
+       this.$swal({
+          type: 'info',
+          html: info,
+          icon: 'info',
+          showCloseButton: true,
+          showLoaderOnConfirm: false,
+          allowOutsideClick: false,
+          cancelButtonText: 'No, cancel!',
+          showCancelButton: true,
+          showLoaderOnConfirm: false,
+          reverseButtons: true,
+          focusCancel: false,
+          confirmButtonText: 'Yes!'
+          }).then((result)=> {
+            this.onActionstop(result);
+          })
+
+
+    },
+
+		async onActionstop(result) {
+        if (result.isConfirmed) {
+         this.$wait.start('myRunInstancetutorremove');
+          console.log('yes delete')
+          //v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
+          //title="Remove Lab_Instance"
+          //@click="onAction('rm-install', props.rowData, props.rowData._id)"
+          console.log(this.hybridoptions)
+          this.resetcustom()
+          this.$wait.start('myRunInstancetutor');
+          var res = await store.dispatch('pipelineLLO/rmswarmlablocal', this.hybridoptions.swarmlabname)
+          this.$wait.end('myRunInstancetutor');
+          var obj = {}
+          obj.token = this.token
+          obj.instance = this.hybridoptions.swarmlabname
+          var res2 = await store.dispatch('pipelineLLO/getservicesinfo', obj)
+          if(res2.data.data == 'yes'){
+             if(res2.data.data == 'yes'){
+                var winfo='<h6 class="text-warning"> swarmlab encountered a problem while deleting your labroom files. <br> This propably means that you have created some files while operating the labroom. <br> To remove those files please run the following command as root.  </h6> <h5><i>Copy-and-run-command </i></h5><br> ' 
+                winfo += '<span class="text-success">sudo rm -rf '+res.data.path+'/instance/'+data.swarmlabname+'  </span><br><br>'
+                winfo += '<span class="text-secondary"> You can back up content using: </span><br>'
+                winfo += '<span class="text-warning">sudo tar -zcvf /home/\$USER/swarmlabbackup_'+data.swarmlabname+'.tar.gz '+res.data.path+'/instance/'+data.swarmlabname+'  </span>'
+                var info='<h5>Labroom remove</h5>'
+                this.$swal({
+                  type: 'info',
+                  html: info+winfo,
+                  icon: 'info',
+                  showCloseButton: true,
+                  showLoaderOnConfirm: false,
+                  allowOutsideClick: false,
+                  cancelButtonText: 'No, cancel!',
+                  showCancelButton: false,
+                  showLoaderOnConfirm: false,
+                  reverseButtons: true,
+                  focusCancel: true,
+                  confirmButtonText: 'Ok!'
+                  })
+                  }
+                }
+            this.refreshVuetable()
+            this.$root.$emit('hybrid_refresh_info_deploy_local')
+            this.$wait.end('myRunInstancetutorremove');
+        }else{
+            console.log('no')
+        }
+		},
+		async rowClicked(row, event) {
+      //this.$root.$emit('hybrid_show_info',row)
+      //this.rowvactionrowindex = row.Names
+      //this.onAction (action, data, index)
+      /*
+          // remove
+            <button
+              v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
+              class="ti-check btn btn-sm"
+              title="Remove Lab_Instance"
+              @click="onAction('rm-install', props.rowData, props.rowData._id)"
+              round
+              >
+            </button>
+            */
+      console.log(row)
+      console.log(event)
+      // -----------------------------
+      // check status run start it
+      // -----------------------------
+      if(this.testtest[row.swarmlabname] != row.swarmlabname && this.testtestdir[row.swarmlabname] == row.swarmlabname){
+       		if(!this.swarmlabinfonow){
+							this.hybridoptions = row
+        			console.log('start '+row.swarmlabname)
+              this.startservice = true
+        			this.onAction ('run-item', row, row._id)
+					}
+      }else if(this.testtest[row.swarmlabname] == row.swarmlabname && this.testtestdir[row.swarmlabname] == row.swarmlabname){
+       		if(!this.swarmlabinfonow){
+							this.hybridoptions = row
+
+      // -----------------------------
+      // check status run is running stop it
+      // -----------------------------
+        			console.log('stop ' + row.swarmlabname)
+							this.hybridoptions = row
+              this.startservice = false
+        			this.onAction ('run-item', row, row._id)
+      		 //   await 	  this.onAction ('down-item', row, row._id)
+					}
+      }else if(this.testtest[row.swarmlabname] != row.swarmlabname && this.testtestdir[row.swarmlabname] != row.swarmlabname){
+
+      // -----------------------------
+      // check installed download it
+      // -----------------------------
+       if(!this.swarmlabinfonow){
+
+                 var info = `<h5> Microservice ${row.swarmlabname} is  Not Installed  </h5> <br> 
+                 <b>Use </b>
+                 <br>
+                 <br>
+             <div class="row" >
+                <div class="col-1" >
+                      <button
+                        class="ti-cloud-down btn btn-outline-secondary btn-sm"
+                        round
+                      >
+                      </button>
+                </div>
+                <div class="col-4" >
+                        To Install
+                </div>
+                <div class="col-1" >
+                      <button
+                        class="ti-info btn btn-outline-secondary btn-sm"
+                        round
+                       >
+                    </button>
+                </div>
+                <div class="col-6" >
+                 For More Information  
+                </div>
+             </div>
+                    `
+
+                 this.$swal({
+                    type: 'info',
+                    html: info,
+                    icon:'info',
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: false,
+                    confirmButtonText: 'Yes!'
+                    })
+                  //console.log('not installed ' + row.swarmlabname)
+                  //console.log(this.testtestdir)
+          }
+     }
+
+      /*
 			return {
 				html: true,
 				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
 				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
 			}
+      */
+          this.swarmlabinfonow = false
+		},
+		async stopservice() {
+              this.startservice = false
+      		    await  this.onAction ('down-item', this.hybridoptions, this.hybridoptions._id)
 		},
 		loadsuccess(response) {
 				var data = response.data.data
@@ -1073,6 +1302,18 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
 };
 </script>
 <style>
+
+#idvuetablekeyg tr:hover {
+  color: #2185d0;
+  cursor: pointer;
+}
+
+#idvuetablekeyg tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/availablemicroservicescustom.vue b/src/components/mynetwork/availablemicroservicescustom.vue
index f5d144c..d324e85 100644
--- a/src/components/mynetwork/availablemicroservicescustom.vue
+++ b/src/components/mynetwork/availablemicroservicescustom.vue
@@ -17,7 +17,7 @@
   </v-wait>
           <div class="row text-center">
             <div class="col-12">
-              <b>Swarmlab <span class="text-info">Users MicroServices</span> Deploy - Local </b>
+              <b><span class="text-muted">Swarmlab </span><span class="text-info">User MicroServices</span> - <span class="text-muted"> Deploy@Home </span></b>
             </div>
           </div>
 
@@ -70,14 +70,23 @@
       </b-col>
     </div>
 
-		<div class="input-group-append"
+		<div class="input-group-append input-group-sm sm-3"
       v-if="viewhybridoptions"
     >
-				<button class="btn btn-outline-secondary" 
+				<button class="btn btn-success btn-sm" 
+          v-if="startservice"
+					round
+					type="button"
+				  @click="setHybridoptions"
+        >
+				Start</button>
+				<button class="btn btn-warning btn-sm" 
+          v-else
 					round
 					type="button"
+				  @click="stopservice"
         >
-				Instances </button>
+				Stop</button>
 			<input type="text" 
 				class="form-control text-info" 
 				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@@ -86,7 +95,7 @@
 				v-model="up_name"
 				>
         <!--
-				<button class="btn btn-outline-secondary" 
+				<button class="btn btn-outline-secondary btn-sm" 
 					round
 					type="button"
         >
@@ -101,30 +110,30 @@
         <div  class="text-info">{{ up_name }}</div>
         -->
 
-				<button class="btn btn-outline-info" 
-           v-if="viewhybridoptions"
+				<button class="btn btn-outline-info btn-sm" 
+           v-if="viewhybridoptions && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="backup"
         >
 				Backup</button>
-				<button class="btn btn-outline-dark" 
-           v-if="viewhybridoptions"
+				<button class="btn btn-outline-dark btn-sm" 
+           v-if="viewhybridoptions && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="backupview"
         >
 				BackupView</button>
 
-				<button class="btn btn-outline-primary" 
-           v-if="viewhybridoptions && customedit && custommenouopen != true"
+				<button class="btn btn-outline-primary btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen != true && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustom"
         >
 				Custom</button>
-				<button class="btn btn-outline-secondary" 
-          v-if="viewhybridoptions && customedit && custommenouopen === true"
+				<button class="btn btn-outline-secondary btn-sm" 
+          v-if="viewhybridoptions && customedit && custommenouopen === true && up_name && actionrowindex"
 					round
           disabled
 					type="button"
@@ -132,27 +141,47 @@
         >
 				Custom:</button>
 
-				<button class="btn btn-outline-warning" 
-           v-if="viewhybridoptions && customedit && custommenouopen"
+				<button class="btn btn-outline-warning btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustomcancel"
         >
 				Cancel</button>
-				<button class="btn btn-outline-info" 
-           v-if="viewhybridoptions && customedit && custommenouopen"
+				<button class="btn btn-outline-info btn-sm" 
+           v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
 					round
 					type="button"
 				  @click="setcustomsave"
         >
 				Save</button>
 
-				<button class="btn btn-outline-success" 
-					round
-					type="button"
-				  @click="setHybridoptions"
-        >
-				Up</button>
+            <button
+              class=" btn btn-outline-danger  btn-sm"
+              title="Remove Lab_Instance"
+              @click="onActionstopcheck()"
+              round
+              >
+              Remove
+            </button>
+            <button
+           		v-if="actionrowindexmore"
+              class="ti-more btn btn-info  btn-sm"
+              title="More Actions..."
+              @click="onActionmore()"
+              round
+              >
+              
+            </button>
+            <button
+							v-else
+              class="ti-more btn btn-secondary  btn-sm"
+              title="More Actions..."
+              @click="onActionmoreclose()"
+              round
+              >
+              
+            </button>
     </div>
 
 		<div class="input-group-append"
@@ -199,7 +228,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeygusersservices"
 				ref="vuetable"
 				:key="vuetablekeygusersservices"
 				:api-url='apiurl'
@@ -217,40 +246,39 @@
 				wrapper-class="vuetable-wrapper"
 				loading-class="loading"
 				detail-row-id="id"
+        @vuetable:row-clicked="rowClicked" 
 				@vuetable:pagination-data="onPaginationData"
 				@vuetable:load-success="loadsuccess"
         @vuetable:load-error="onLoadError"
 				:css="css.table"
 				 >
 
-        <div slot="actionsenabled" slot-scope="props">
+        <div slot="actionsenabled" slot-scope="props"
+				  :key="vuetablekeygslotcustomnew"
+        >
           <div class="d-flex justify-content-center">
             <button 
-              v-if="testtest[props.rowData.service] != props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service && testtestdiruser[props.rowData.service] == props.rowData.user"
-              class="ti-thumb-down btn btn-secondary btn-sm"
-              title="Start Lab_Instance"
+              class=" btn  btn-sm text-muted"
               round
-              @click="onAction('run-item', props.rowData, props.rowData._id)"
-              >
-            </button>
-            <button
               v-if="testtest[props.rowData.service] == props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service && testtestdiruser[props.rowData.service] == props.rowData.user"
-              class="ti-thumb-up btn btn-info btn-sm"
-              title="Stop Lab_Instance"
-              round
-              @click="onAction('down-item', props.rowData, props.rowData._id)"
               >
+             <span class="text-success">Running...</span>
             </button>
+            <button 
+              v-else
+              class=" btn  btn-sm text-muted"
+              round
+            ><span class="text-success">&nbsp;</span></button>
           </div>
         </div>
+
         <div slot="actionslocal" slot-scope="props" actionslocal
 				:key="vuetablekeygslotcustom">
           <div class="d-flex justify-content-center">
             <button
               v-if="testtest[props.rowData.service] != props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service"
-              class="ti-trash btn btn-info btn-sm"
+              class="ti-check btn btn-sm text-success"
               title="Remove Lab_Instance"
-              @click="onAction('rm-install', props.rowData, props.rowData._id)"
               round
               >
             </button>
@@ -259,13 +287,13 @@
         <div slot="actions" slot-scope="props">
           <div class="d-flex justify-content-center">
             <button
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
+              class="ti-cloud-down btn  btn-sm"
               title="Download Lab_Instance"
               round
               @click="onAction('run-install', props.rowData, props.rowData._id)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="Lab_Instance Info"
             round
             @click="onAction('view-item', props.rowData, props.rowData._id)">
@@ -314,6 +342,10 @@ export default {
   },
   data() {
    return{
+   startservice: true,
+   actionrowindex: false,
+   actionrowindexmore: true,
+   swarmlabinfonow:false,
    testactionrowindex:[],  // downloaded          used in installed
    teststatusindex:[],     // status stop run     used in status
    testtest:[],             // up or down services
@@ -362,14 +394,22 @@ export default {
 	 	active:false,
 		vuetablekeygusersservices:0,
 		vuetablekeygslotcustom:0,
+		vuetablekeygslotcustomnew:0,
 		fielddata:{},
     fields: [
+      {
+          name: '__slot:actionslocal',   // <----
+          title: '',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '5%'
+        },
       {
         name: 'service',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Microservice',
         sortField: 'service',
         visible:true,
-        dataClass: 'left aligned col-3',
+        dataClass: 'left aligned col-3 text-muted',
         width: '30%'
       },
       {
@@ -377,20 +417,12 @@ export default {
         title: '<span class="orange"></span>mongo',
         visible:false
       },
-      {
-        name: 'readme',
-        title: '<span class="orange"></span>Info',
-        titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
-        visible:true,
-        width: '35%'
-      },
       {
         name: 'user',
         title: '<span class="orange"></span>User',
         sortField: 'user',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
+        dataClass: 'left aligned w-25 text-muted',
         visible:true,
         width: '10%',
         callback: function(value) {
@@ -408,13 +440,21 @@ export default {
           }
         }
       },
+      {
+        name: 'readme',
+        title: '<span class="orange"></span>Info',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25 text-muted',
+        visible:true,
+        width: '35%'
+      },
       {
         name: 'gitrepo',
         title: '<span class="orange"></span>User repo',
         sortField: 'gitrepo',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
-        visible:true,
+        dataClass: 'left aligned w-25 text-muted',
+        visible:false,
         width: '30%'
       },
       {
@@ -424,13 +464,6 @@ export default {
           dataClass: 'center aligned',
           width: '5%'
         },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
       {
           name: '__slot:actions',   // <----
           title: 'Download',
@@ -506,6 +539,77 @@ export default {
 	},
 
   methods: {
+   onActionmore () {
+			this.actionrowindex = true
+			this.actionrowindexmore = false
+	 },
+   onActionmoreclose () {
+			this.actionrowindex = false
+			this.actionrowindexmore = true
+	 },
+		async onActionstopcheck() {
+
+         var tmpuserservices = this.hybridoptions.user.split('@')
+       var info = `<h5> Microservice: <b> ${this.hybridoptions.service}-${tmpuserservices[0]} </b> </h5>`
+       info += "<br>Remove containers, networks, images, and volumes"
+       this.$swal({
+          type: 'info',
+          html: info,
+          icon: 'info',
+          showCloseButton: true,
+          showLoaderOnConfirm: false,
+          allowOutsideClick: false,
+          cancelButtonText: 'No, cancel!',
+          showCancelButton: true,
+          showLoaderOnConfirm: false,
+          reverseButtons: true,
+          focusCancel: false,
+          confirmButtonText: 'Yes!'
+          }).then((result)=> {
+            this.onActionstop(result);
+          })
+
+
+    },
+		async onActionstop(result) {
+        if (result.isConfirmed) {
+        this.resetcustom()
+         this.$wait.start('myRunInstancetutor');
+         var res = await store.dispatch('pipelineLLO/rmswarmlablocaluser', this.hybridoptions)
+         this.$wait.end('myRunInstancetutor');
+                var obj = {}
+                obj.token = this.token
+                obj.instance = this.hybridoptions
+                //check if exists
+                var res2 = await store.dispatch('pipelineLLO/getservicesinfo', obj)
+                if(res2.data.data == 'yes'){
+                  if(res2.data.data == 'yes'){
+                    var winfo='<h6 class="text-warning"> swarmlab encountered a problem while deleting your labroom files. <br> This propably means that you have created some files while operating the labroom. <br> To remove those files please run the following command as root.  </h6> <h5><i>Copy-and-run-command </i></h5><br> ' 
+                    winfo += '<span class="text-success">sudo rm -rf '+res.data.path+'/community/'+data.swarmlabname+'  </span><br><br>'
+                    winfo += '<span class="text-secondary"> You can back up content using: </span><br>'
+                    winfo += '<span class="text-warning">sudo tar -zcvf /home/\$USER/swarmlabbackup_'+data.swarmlabname+'.tar.gz '+res.data.path+'/community/'+data.swarmlabname+'  </span>'
+                    var info='<h5>Labroom remove</h5>'
+                    this.$swal({
+                      type: 'info',
+                      html: info+winfo,
+                      icon: 'info',
+                      showCloseButton: true,
+                      showLoaderOnConfirm: false,
+                      allowOutsideClick: false,
+                      cancelButtonText: 'No, cancel!',
+                      showCancelButton: false,
+                      showLoaderOnConfirm: false,
+                      reverseButtons: true,
+                      focusCancel: true,
+                      confirmButtonText: 'Ok!'
+                      })
+                  }
+                }
+        this.refreshVuetable()
+        this.$root.$emit('hybrid_refresh_info_deploy_local')
+        }
+    },
+
    onError (type,description) {
                     var winfo=description
                     var info='<h5>Bootstrap '+type+'</h5>'
@@ -643,6 +747,7 @@ export default {
 		},
     async onAction (action, data, index) {
 			if(action == 'view-item' ){
+          this.swarmlabinfonow = true
           this.swarmlab=data
           var container=this.swarmlab.readme
         //console.log('inf '+ JSON.stringify(data))
@@ -719,6 +824,7 @@ export default {
         this.refreshVuetable()
         this.$root.$emit('hybrid_refresh_info_deploy_local')
 			}else if(action == 'run-install' ){
+         this.swarmlabinfonow = true
          this.$wait.start('myRunInstancetutor');
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.baseservice  = data.baseservice
@@ -771,6 +877,11 @@ export default {
         this.refreshVuetable()
 
 			}else if(action == 'run-item' ){
+
+         console.log('log1')
+         console.log(this.hybridoptions)
+
+        this.swarmlabinfonow = true
         this.resetcustom()
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.baseservice  = data.baseservice
@@ -793,12 +904,15 @@ export default {
          this.hybridoptions.url3         = data.url3
          this.hybridoptions.name3        = data.name3
 
+         console.log('log')
+         console.log(data)
         //this.custom.sh = ''
 
          this.heavy = false
          this.heavytext = ''
 
-         this.up_name = data.swarmlabname
+         var tmpuserservices = this.hybridoptions.user.split('@')
+         this.up_name = `${this.hybridoptions.service}-${tmpuserservices[0]}` 
 
         //console.log('RUN------------ '+ JSON.stringify(data))
 
@@ -873,10 +987,13 @@ export default {
          this.up_name = ''
          this.hybridoptions = data
          this.hybridoptions.index = index
-       var info = "Stop and remove containers, networks, images, and volumes"
+         var tmpuserservices = this.hybridoptions.user.split('@')
+       var info = `<h5> Microservice: <b> ${this.hybridoptions.service}-${tmpuserservices[0]} </b> </h5>`
+       info += "<br>Stop and remove containers, networks, images, and volumes"
        this.$swal({
           type: 'info',
           html: info,
+          icon: 'info',
           showCloseButton: true,
           showLoaderOnConfirm: false,
           allowOutsideClick: false,
@@ -1055,7 +1172,7 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
         //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
-        this.refreshVuetable()
+       await  this.refreshVuetable()
 
         //console.log('RUN 1 '+ JSON.stringify(this.hybridoptions))
 
@@ -1087,7 +1204,10 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
         //console.log('error2b '+JSON.stringify(this.indexselect))
         // render hangs
 		    await this.checkactionrowindexall()
+			this.$nextTick(()=>{
 					this.vuetablekeygslotcustom += 1
+					this.vuetablekeygslotcustomnew += 1
+				})
           //des 
 					//this.vuetablekeygusersservices += 1
 				//})
@@ -1098,12 +1218,81 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
 		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>' }
-			}
+		async rowClicked(row, event) {
+      console.log(row)
+      if(this.testtest[row.service] != row.service && this.testtestdir[row.service] == row.service && this.testtestdiruser[row.service] == row.user){
+        if(!this.swarmlabinfonow){
+            this.hybridoptions = row
+              this.startservice = true
+            console.log('start '+row.service)
+            await this.onAction ('run-item', row, row._id)
+            this.swarmlabinfonow = false
+        }
+      }else if(this.testtest[row.service] == row.service && this.testtestdir[row.service] == row.service && this.testtestdiruser[row.service] == row.user){
+            this.hybridoptions = row
+              this.startservice = false
+            await this.onAction ('run-item', row, row._id)
+        			//this.onAction ('run-item', row, row._id)
+      }else if(this.testtest[row.service] != row.service && this.testtestdir[row.service] != row.service){
+      console.log('info')
+      // -----------------------------
+      // check installed download it
+      // -----------------------------
+       if(!this.swarmlabinfonow){
+         var tmpuserservices = row.user.split('@')
+         // `${this.hybridoptions.service}-${tmpuserservices[0]}` 
+
+                 var info = `<h5> Microservice <b> ${row.service}-${tmpuserservices[0]} </b> is  Not Installed  </h5> <br> 
+                 <b>Use </b>
+                 <br>
+                 <br>
+             <div class="row" >
+                <div class="col-1" >
+                      <button
+                        class="ti-cloud-down btn btn-outline-secondary btn-sm"
+                        round
+                      >
+                      </button>
+                </div>
+                <div class="col-4" >
+                        To Install
+                </div>
+                <div class="col-1" >
+                      <button
+                        class="ti-info btn btn-outline-secondary btn-sm"
+                        round
+                       >
+                    </button>
+                </div>
+                <div class="col-6" >
+                 For More Information  
+                </div>
+             </div>
+                    `
+
+                 this.$swal({
+                    type: 'info',
+                    html: info,
+                    icon:'info',
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: false,
+                    confirmButtonText: 'Yes!'
+                    })
+                  //console.log('not installed ' + row.swarmlabname)
+                  //console.log(this.testtestdir)
+         }
+      }
+         this.swarmlabinfonow = false
+		},
+		async stopservice() {
+              this.startservice = false
+      		    await  this.onAction ('down-item', this.hybridoptions, this.hybridoptions._id)
 		},
 		loadsuccess(response) {
 				var data = response.data.data
@@ -1140,6 +1329,19 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
 };
 </script>
 <style>
+
+
+#idvuetablekeygusersservices tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
+
+#idvuetablekeygusersservices tr td {
+  color: #2185d0;
+  cursor: pointer;
+}
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/availablepoc.vue b/src/components/mynetwork/availablepoc.vue
index 9aecaf2..cccbc26 100644
--- a/src/components/mynetwork/availablepoc.vue
+++ b/src/components/mynetwork/availablepoc.vue
@@ -17,7 +17,7 @@
   </v-wait>
           <div class="row text-center">
             <div class="col-12">
-              <b>Swarmlab <span class="text-info">Proof_of_concept</span> Deploy - Local </b>
+              <b><span class="text-muted">Swarmlab</span> <span class="text-info">Proof_of_concept</span> <span class="text-muted"> - Deploy@Home</span> </b>
             </div>
           </div>
 
@@ -85,7 +85,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeypoc"
 				ref="vuetable"
 				:key="vuetablekeypoc"
 				:api-url='apiurl'
@@ -113,7 +113,7 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
-              class="ti-thumb-up btn btn-info btn-sm"
+              class="ti-thumb-up btn  btn-sm"
               title="Stop Lab_Instance"
               round
               @click="onAction('down-item', props.rowData, props.rowIndex)"
@@ -121,7 +121,7 @@
             </button>
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
-              class="ti-thumb-down btn btn-secondary btn-sm"
+              class="ti-thumb-down btn  btn-sm"
               title="Start Lab_Instance"
               round
               @click="onAction('run-item', props.rowData, props.rowIndex)"
@@ -133,7 +133,7 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
-              class="ti-trash btn btn-info btn-sm"
+              class="ti-trash btn  btn-sm text-warning"
               title="Remove Lab_Instance"
               @click="onAction('delete-item', props.rowData, props.rowIndex)"
               round
@@ -145,13 +145,13 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="checkactionrowindex(props.rowData,props.rowIndex)"
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
+              class="ti-cloud-down btn  btn-sm"
               title="Download Lab_Instance"
               round
               @click="onAction('run-install', props.rowData, props.rowIndex)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="Lab_Instance Info"
             round
             @click="onAction('view-item', props.rowData, props.rowIndex)">
@@ -233,12 +233,19 @@ export default {
 		vuetablekeypoc:0,
 		fielddata:{},
     fields: [
+      {
+          name: '__slot:actionslocal',   // <----
+          title: '',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '5%'
+        },
       {
         name: 'swarmlabname',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>PoC',
         sortField: 'swarmlabname',
         visible:true,
-        dataClass: 'left aligned col-3',
+        dataClass: 'left aligned col-3 text-muted',
         width: '68%'
       },
       {
@@ -269,13 +276,6 @@ export default {
           dataClass: 'center aligned',
           width: '5%'
         },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
       {
           name: '__slot:actions',   // <----
           title: 'Download',
@@ -620,6 +620,11 @@ export default {
 };
 </script>
 <style>
+#idvuetablekeypoc tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+		padding: 0px;
+}
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/availableservices.vue b/src/components/mynetwork/availableservices.vue
index 977cd93..12881d8 100644
--- a/src/components/mynetwork/availableservices.vue
+++ b/src/components/mynetwork/availableservices.vue
@@ -17,7 +17,7 @@
   </v-wait>
           <div class="row text-center">
             <div class="col-12">
-              <b>Swarmlab <span class="text-info">LabRoom</span> Deploy - Local </b>
+              <b><span class="text-muted">Swarmlab</span> <span class="text-info">LabRoom</span> - <span class="text-muted"> Deploy@Home</span> </b>
             </div>
           </div>
 
@@ -62,21 +62,37 @@
       </b-col>
     </div>
 
-		<div class="input-group-append"
+		<div class="input-group-append input-group-sm sm-3"
       v-if="viewhybridoptions"
     >
-				<button class="btn btn-outline-secondary" 
+				<button class="btn btn-success btn-sm" 
+          v-if="startservice"
+					round
+					type="button"
+				  @click="setHybridoptions"
+        >
+				Start</button>
+				<button class="btn btn-warning btn-sm" 
+          v-else
 					round
 					type="button"
+				  @click="stopservice"
         >
-				Instances </button>
+				Stop</button>
+			<input type="text" 
+				class="form-control text-info" 
+				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+        disabled
+				v-model="up_name"
+				>
 			<input type="text" 
 				class="form-control" 
 				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
 				placeholder="Number of Instances"
 				v-model="hybridoptions.size"
 				>
-				<button class="btn btn-outline-secondary" 
+<!--
+				<button class="btn btn-outline-secondary btn-sm" 
 					round
 					type="button"
         >
@@ -87,16 +103,19 @@
 				placeholder="Expose Port"
 				v-model="hybridoptions.port"
 				>
-				<button class="btn btn-outline-success" 
-					round
-					type="button"
-				  @click="setHybridoptions"
-        >
-				Up</button>
+-->
+            <button
+              class=" btn btn-outline-danger  btn-sm"
+              title="Remove Lab_Instance"
+              @click="onAction('rm-install', hybridoptions, hybridoptions._id)"
+              round
+              >
+              Remove
+            </button>
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeya"
 				ref="vuetable"
 				:key="vuetablekeya"
 				:api-url='apiurl'
@@ -114,6 +133,7 @@
 				wrapper-class="vuetable-wrapper"
 				loading-class="loading"
 				detail-row-id="id"
+        @vuetable:row-clicked="rowClicked" 
 				@vuetable:pagination-data="onPaginationData"
 				@vuetable:load-success="loadsuccess"
         @vuetable:load-error="onLoadError"
@@ -122,50 +142,71 @@
 
         <div slot="actionsenabled" slot-scope="props">
           <div class="d-flex justify-content-center">
+          <!--
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
-              class="ti-thumb-up btn btn-info btn-sm"
+              class="ti-arrow-up btn text-success btn-sm "
               title="Stop Lab_Instance"
               round
               @click="onAction('down-item', props.rowData, props.rowIndex)"
               >
             </button>
+        -->
+            <button  
+              class=" btn  btn-sm text-muted"
+              round
+              v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowData._id"
+              >
+             <span class="text-success">Running...</span>
+            </button>
+            <button 
+              v-else
+              class=" btn  btn-sm text-muted"
+              round
+            ><span class="text-success">&nbsp;</span></button>
+<!--
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
-              class="ti-thumb-down btn btn-secondary btn-sm"
+              class="ti-arrow-down btn  btn-sm"
               title="Start Lab_Instance"
               round
               @click="onAction('run-item', props.rowData, props.rowIndex)"
               >
             </button>
+   -->
           </div>
         </div>
         <div slot="actionslocal" slot-scope="props">
           <div class="d-flex justify-content-center">
+          <!--
+              v-if="testactionrowindex[props.rowData._id] == props.rowData._id && testactionrowindex[props.rowData.swarmlabname] != props.rowData._id"
+              -->
             <button
-              v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
-              class="ti-trash btn btn-info btn-sm"
+              v-if="testactionrowindex[props.rowData._id] == props.rowData._id "
+              class="ti-check btn  btn-sm text-success"
               title="Remove Lab_Instance"
-              @click="onAction('rm-install', props.rowData, props.rowIndex)"
               round
               >
             </button>
+            <!--
+              @click="onAction('rm-install', props.rowData, props.rowIndex)"
+              -->
           </div>
         </div>
         <div slot="actions" slot-scope="props">
           <div class="d-flex justify-content-center">
             <button
-              v-if="checkactionrowindex(props.rowData,props.rowIndex)"
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
+              v-if="checkactionrowindex(props.rowData,props.rowData._id)"
+              class="ti-cloud-down btn  btn-sm"
               title="Download Lab_Instance"
               round
-              @click="onAction('run-install', props.rowData, props.rowIndex)">
+              @click="onAction('run-install', props.rowData, props.rowData._id)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="Lab_Instance Info"
             round
-            @click="onAction('view-item', props.rowData, props.rowIndex)">
+            @click="onAction('view-item', props.row, props.row._id)">
           </button>
 				 </div>
 				</div>
@@ -210,6 +251,10 @@ export default {
   },
   data() {
    return{
+   startservice: true,
+   swarmlabinfonow:false,
+   up_name:'',
+   removelabroom: false,
    testactionrowindex:[],  // downloaded          used in installed
    teststatusindex:[],     // status stop run     used in status
 	  hybridoptions: {
@@ -244,13 +289,26 @@ export default {
 		vuetablekeya:0,
 		fielddata:{},
     fields: [
+      {
+          name: '__slot:actionslocal',   // <----
+          title: '',
+          titleClass: 'center',
+          dataClass: 'center alignedi text-success',
+          width: '5%'
+        },
       {
         name: 'swarmlabname',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Labroom',
         sortField: 'swarmlabname',
         visible:true,
-        dataClass: 'left aligned col-3',
-        width: '68%'
+        dataClass: 'left aligned col-3 text-muted',
+        width: '68%',
+       callback: function(value) {
+          var tmp = value.split('-')
+          var v = tmp[1]
+          return v
+        }
+
       },
       {
         name: '_id',
@@ -280,13 +338,6 @@ export default {
           dataClass: 'center aligned',
           width: '5%'
         },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
       {
           name: '__slot:actions',   // <----
           title: 'Download',
@@ -438,15 +489,17 @@ export default {
 		},
     async onAction (action, data, index) {
 			if(action == 'view-item' ){
+         this.swarmlabinfonow = true
           this.swarmlab=data
           var container=this.swarmlab
+          /*
           var res = await store.dispatch('pipelineLLO/getswarmlabinfo', container.swarmlabname)
 
           var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
           var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
-          var swarmlab1info=res.data.swarmlabinfo
-          var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
-          if(res.data.error25=="ok"){
+          */
+          var swarmlab1info=`https://git.swarmlab.io:3000/swarmlab/${container.swarmlabname}`
+          var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1info+'</code></pre></p></div>'
                 var winfo=''
                 var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
                 this.$swal({
@@ -459,13 +512,13 @@ export default {
                   reverseButtons: true,
                   focusCancel: true
                 })
-            }
 
 
 			}else if(action == 'delete-item' ){
 				this.$swal({
 					type: 'info',
 					html: info+winfo,
+					icon: 'info',
 					showCloseButton: true,
 					showLoaderOnConfirm: false,
 					allowOutsideClick: false,
@@ -479,6 +532,31 @@ export default {
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
         this.refreshVuetable()
 			}else if(action == 'rm-install' ){
+
+       var info = `<h5> Labroom: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
+        info += "<br>Remove containers, networks, images, and volumes"
+
+       this.$swal({
+          type: 'info',
+          html: info,
+          icon: 'info',
+          showCloseButton: true,
+          showLoaderOnConfirm: false,
+          allowOutsideClick: false,
+          cancelButtonText: 'No, cancel!',
+          showCancelButton: true,
+          showLoaderOnConfirm: false,
+          reverseButtons: true,
+          focusCancel: false,
+          confirmButtonText: 'Yes!'
+          }).then((result)=> {
+							if (result.isConfirmed) {
+	(async () => {	
+
+						console.log('remove')
+
+
+
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.$wait.start('myRunInstancetutor');
          var res = await store.dispatch('pipelineLLO/rmswarmlablocal', this.hybridoptions.swarmlabname)
@@ -516,11 +594,15 @@ export default {
                 }
 
 
-        //Vue.nextTick( () => this.$refs.vuetable.refresh())
-        Vue.delete(this.testactionrowindex, data.swarmlabname)
-        this.refreshVuetable()
-        this.$root.$emit('hybrid_refresh_info_deploy_local')
+					//Vue.nextTick( () => this.$refs.vuetable.refresh())
+					Vue.delete(this.testactionrowindex, data.swarmlabname)
+					this.refreshVuetable()
+					this.$root.$emit('hybrid_refresh_info_deploy_local')
+})();
+							}
+          })
 			}else if(action == 'run-install' ){
+         this.swarmlabinfonow = true
          this.$wait.start('myRunInstancetutor');
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.index = index
@@ -551,14 +633,16 @@ export default {
         Vue.nextTick( () => this.$refs.vuetable.refresh())
         */
         //Vue.nextTick( () => this.$refs.vuetable.refresh())
-        this.refreshVuetable()
+       // this.refreshVuetable()
 			}else if(action == 'down-item' ){
          this.hybridoptions.swarmlabname = data.swarmlabname
          this.hybridoptions.index = index
-       var info = "Stop and remove containers, networks, images, and volumes"
+       var info = `<h5> Labroom: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
+        info += "<br>Stop and remove containers, networks, images, and volumes"
        this.$swal({
           type: 'info',
           html: info,
+          icon: 'info',
           showCloseButton: true,
           showLoaderOnConfirm: false,
           allowOutsideClick: false,
@@ -586,10 +670,10 @@ export default {
       	  this.$root.$emit('hybrid_stop_instance', value)
           Vue.delete(this.testactionrowindex, this.hybridoptions.index)
           Vue.nextTick( () => this.$refs.vuetable.refresh())
+          this.refreshVuetable()
         }else  {
 					console.log('no')       
         }
-        this.refreshVuetable()
 	  },
 		async setHybridoptions(){
         //console.log(JSON.stringify(this.hybridoptions))
@@ -617,12 +701,85 @@ export default {
 		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>' }
-			}
+		async rowClicked(row, event) {
+      console.log(row)
+      console.log(this.testactionrowindex)
+      if(this.testactionrowindex[row._id] == row._id && this.testactionrowindex[row.swarmlabname] != row._id){
+        if(!this.swarmlabinfonow){
+            this.up_name = row.swarmlabname
+            this.hybridoptions = row
+              this.startservice = true
+            console.log('start '+row.swarmlabname)
+            await this.onAction ('run-item', row, row._id)
+            this.swarmlabinfonow = false
+        }
+     } else if(this.testactionrowindex[row._id] == row._id && this.testactionrowindex[row.swarmlabname] == row._id){
+
+            this.up_name = row.swarmlabname
+            console.log('stop '+row.swarmlabname)
+            this.viewhybridoptions = false
+            this.startservice = false
+            this.hybridoptions = row
+            await this.onAction ('run-item', row, row._id)
+            //await this.onAction ('down-item', row, row._id)
+     } else if(this.testactionrowindex[row._id] != row._id && this.testactionrowindex[row.swarmlabname] != row._id){
+      console.log('info')
+      // -----------------------------
+      // check installed download it
+      // -----------------------------
+       if(!this.swarmlabinfonow){
+
+                 var info = `<h5> Labroom <b> ${row.swarmlabname} </b> is  Not Installed  </h5> <br> 
+                 <b>Use </b>
+                 <br>
+                 <br>
+             <div class="row" >
+                <div class="col-1" >
+                      <button
+                        class="ti-cloud-down btn btn-outline-secondary btn-sm"
+                        round
+                      >
+                      </button>
+                </div>
+                <div class="col-4" >
+                        To Install
+                </div>
+                <div class="col-1" >
+                      <button
+                        class="ti-info btn btn-outline-secondary btn-sm"
+                        round
+                       >
+                    </button>
+                </div>
+                <div class="col-6" >
+                 For More Information  
+                </div>
+             </div>
+                    `
+
+                 this.$swal({
+                    type: 'info',
+                    html: info,
+                    icon:'info',
+                    showCloseButton: true,
+                    showLoaderOnConfirm: false,
+                    allowOutsideClick: false,
+                    cancelButtonText: 'No, cancel!',
+                    showCancelButton: false,
+                    showLoaderOnConfirm: false,
+                    reverseButtons: true,
+                    focusCancel: false,
+                    confirmButtonText: 'Yes!'
+                    })
+                  //console.log('not installed ' + row.swarmlabname)
+                  //console.log(this.testtestdir)
+         }
+      }
+         this.swarmlabinfonow = false
+		},
+		async stopservice() {
+              this.startservice = false
+      		    await  this.onAction ('down-item', this.hybridoptions, this.hybridoptions._id)
 		},
 		loadsuccess(response) {
 				var data = response.data.data
@@ -659,6 +816,18 @@ export default {
 };
 </script>
 <style>
+
+#idvuetablekeya tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
+
+#idvuetablekeya tr td {
+  color: #2185d0;
+  cursor: pointer;
+}
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/availablestorage.vue b/src/components/mynetwork/availablestorage.vue
index 3260905..5aa4811 100644
--- a/src/components/mynetwork/availablestorage.vue
+++ b/src/components/mynetwork/availablestorage.vue
@@ -17,7 +17,7 @@
   </v-wait>
           <div class="row text-center">
             <div class="col-12">
-              <b>Swarmlab <span class="text-info">Storage</span> Deploy - Local </b>
+              <b><span class="text-muted">Swarmlab </span> <span class="text-info">Storage</span> -  <span class="text-muted">Deploy@Home </span></b>
             </div>
           </div>
 
@@ -85,7 +85,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeystorage"
 				ref="vuetable"
 				:key="vuetablekeystorage"
 				:api-url='apiurl'
@@ -113,7 +113,7 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
-              class="ti-thumb-up btn btn-info btn-sm"
+              class="ti-thumb-up btn  btn-sm"
               title="Stop Lab_Instance"
               round
               @click="onAction('down-item', props.rowData, props.rowIndex)"
@@ -121,7 +121,7 @@
             </button>
             <button
               v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
-              class="ti-thumb-down btn btn-secondary btn-sm"
+              class="ti-thumb-down btn btn-sm"
               title="Start Lab_Instance"
               round
               @click="onAction('run-item', props.rowData, props.rowIndex)"
@@ -133,7 +133,7 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
-              class="ti-trash btn btn-info btn-sm"
+              class="ti-trash btn  btn-sm text-warning"
               title="Remove Lab_Instance"
               @click="onAction('delete-item', props.rowData, props.rowIndex)"
               round
@@ -145,13 +145,13 @@
           <div class="d-flex justify-content-center">
             <button
               v-if="checkactionrowindex(props.rowData,props.rowIndex)"
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
+              class="ti-cloud-down btn  btn-sm"
               title="Download Lab_Instance"
               round
               @click="onAction('run-install', props.rowData, props.rowIndex)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="Lab_Instance Info"
             round
             @click="onAction('view-item', props.rowData, props.rowIndex)">
@@ -233,12 +233,19 @@ export default {
 		vuetablekeystorage:0,
 		fielddata:{},
     fields: [
+      {
+          name: '__slot:actionslocal',   // <----
+          title: '',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '5%'
+        },
       {
         name: 'swarmlabname',
         title: '<span class="orange"></span>Name',
         sortField: 'swarmlabname',
         visible:true,
-        dataClass: 'left aligned col-3',
+        dataClass: 'left aligned col-3 text-muted',
         width: '68%'
       },
       {
@@ -269,13 +276,6 @@ export default {
           dataClass: 'center aligned',
           width: '5%'
         },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
       {
           name: '__slot:actions',   // <----
           title: 'Download',
@@ -677,6 +677,12 @@ export default {
 };
 </script>
 <style>
+
+#idvuetablekeystorage tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/buildermyservices.vue b/src/components/mynetwork/buildermyservices.vue
index afa46dd..14916b5 100644
--- a/src/components/mynetwork/buildermyservices.vue
+++ b/src/components/mynetwork/buildermyservices.vue
@@ -61,7 +61,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeygmybuildservice123"
 				ref="vuetable"
 				:key="vuetablekeygmybuildservice123"
 				:api-url='apiurl'
@@ -88,13 +88,13 @@
         <div slot="actions" slot-scope="props">
           <div class="d-flex justify-content-center">
             <button
-              class="ti-pencil btn btn-outline-secondary btn-sm"
+              class="ti-pencil btn  btn-sm"
               title="Upload MicroService"
               round
               @click="onAction('upload-item', props.rowData, props.rowData._id)">
             </button>
           <button
-            class="ti-trash btn btn-outline-warning btn-sm"
+            class="ti-trash btn  btn-sm text-warning"
               title="MicroService Info"
             round
             @click="onAction('rm-item', props.rowData, props.rowData._id)">
@@ -423,6 +423,11 @@ export default {
 };
 </script>
 <style>
+#idvuetablekeygmybuildservice123 tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/builderservices.vue b/src/components/mynetwork/builderservices.vue
index f38dc55..f15c089 100644
--- a/src/components/mynetwork/builderservices.vue
+++ b/src/components/mynetwork/builderservices.vue
@@ -64,7 +64,7 @@
     </div>
 
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeygmybuildservice1"
 				ref="vuetable"
 				:key="vuetablekeygmybuildservice1"
 				:api-url='apiurl'
@@ -91,13 +91,13 @@
         <div slot="actions" slot-scope="props">
           <div class="d-flex justify-content-center">
             <button
-              class="ti-cloud-up btn btn-outline-secondary btn-sm"
+              class="ti-cloud-up btn  btn-sm"
               title="Upload MicroService"
               round
               @click="onAction('upload-item', props.rowData, props.rowData._id)">
             </button>
           <button
-            class="ti-info btn btn-outline-secondary btn-sm"
+            class="ti-info btn  btn-sm"
               title="MicroService Info"
             round
             @click="onAction('view-item', props.rowData, props.rowData._id)">
@@ -197,10 +197,10 @@ export default {
     fields: [
       {
         name: 'swarmlabname',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Base Image',
         sortField: 'swarmlabname',
         visible:true,
-        dataClass: 'left aligned col-3',
+        dataClass: 'left aligned col-3 text-muted',
         width: '68%'
       },
       {
@@ -392,6 +392,14 @@ export default {
 };
 </script>
 <style>
+
+#idvuetablekeygmybuildservice1 tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
+
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/customservices.vue b/src/components/mynetwork/customservices.vue
index a47931a..07c2a32 100644
--- a/src/components/mynetwork/customservices.vue
+++ b/src/components/mynetwork/customservices.vue
@@ -692,7 +692,8 @@ export default {
         A base image is the image that is used to create all of your container images. <br>`
       }else if(value == "form_gitrepo"){
         info='<h5 class="text-info">Git-repo</h5>'
-        infotxt += `<b>A string that contains a valid URL</b> URL, is
+        infotxt += `<b>The git repository associated with your project.</b><br> <br> 
+        A string that contains a valid URL
         `
       }else if(value == "form_rclocal"){
         info='<h5 class="text-info">rc.local</h5>'
diff --git a/src/components/mynetwork/dockerservices.vue b/src/components/mynetwork/dockerservices.vue
index 0452f78..fc3bd15 100644
--- a/src/components/mynetwork/dockerservices.vue
+++ b/src/components/mynetwork/dockerservices.vue
@@ -49,7 +49,7 @@
 			</div>
     </div>
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable id="idvuetablekeyb"
 				ref="vuetable"
 				:key="vuetablekeyb"
 				:api-url='apiurl'
@@ -67,13 +67,20 @@
 				wrapper-class="vuetable-wrapper"
 				loading-class="loading"
 				detail-row-id="id"
+        @vuetable:row-class="onRowClass" 
+        @vuetable:row-clicked="rowClicked" 
 				@vuetable:pagination-data="onPaginationData"
 				@vuetable:load-success="loadsuccess"
         @vuetable:load-error="onLoadError"
 				:css="css.table"
 				 >
+         <!-- 
+        @vuetable:cell-clicked="rowClicked" 
+        @vuetable:row-dblclicked="rowClicked" 
+         -->
 
         <div slot="actions" slot-scope="props">
+        <!--
             <button
               v-if="actionrowindex == props.rowIndex"
               class="ti-more-alt btn btn-secondary btn-sm"
@@ -86,8 +93,10 @@
               round
               @click="onAction('run-more', props.rowData, props.rowIndex)">
             </button>
+         -->
             <button
-              class="ti-info btn btn-outline-info btn-sm"
+              v-if="rowvactionrowindex == props.rowData.Names"
+              class="ti-info btn btn-info btn-sm"
               round
               @click="onAction('view-item', props.rowData, props.rowIndex)">
             </button>
@@ -132,7 +141,9 @@ export default {
   },
   data() {
    return{
+    isActive: false,
     actionrowindex:'',
+   rowvactionrowindex:'',
 	  playbookInfo: {},
     token: '',
 	  playbook: {
@@ -153,34 +164,34 @@ export default {
     ],
 		showModal: false,
 		visibility: [],
-	 	active:false,
 		vuetablekeyb:0,
 		fielddata:{},
 		fields: [ 
           {
         name: 'Names',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Instance',
         sortField: 'Names',
         visible:true,
-        dataClass: 'text-left text-wrap text-break break-word',
-        width: '50%'
+        dataClass: 'text-left text-wrap text-break break-word text-info',
+        width: '50%',
+        callback: function(value) {
+
+          var v = `<button type="button" class="btn btn-link text-muted"
+                   >${value}</button>`
+          console.log(this)
+          return v
+        }
       },
       {
         name: 'Image',
         title: '<span class="orange"></span>Image',
         //sortField: 'Image',
         visible:true,
-        dataClass: 'left aligned w-25',
-        width: '15%',
-        formatter (value) {
-          const result = /^ondemand_playground/.test(value);
-          if (result) {
-              var v = '<p class="text-warning">Playground</p>'
-              return v
-          }else{
-              var v = '<p class="text-info">Lab</p>'
-              return v
-          }
+        dataClass: 'left aligned  text-muted w-25',
+        width: '25%',
+        callback: function(value) {
+          var v = `<button type="button" class="btn btn-link text-muted">${value}</button>`
+          return v
         }
 
       },
@@ -194,8 +205,13 @@ export default {
         title: '<span class="orange"></span>Status',
         sortField: 'Status',
         titleClass: 'center aligned',
+        dataClass: 'left aligned  text-muted',
         visible:true,
-        width: '10%'
+        width: '35%',
+        callback: function(value) {
+          var v = `<button type="button" class="btn btn-link text-muted">${value}</button>`
+          return v
+        }
       },
       {
         name: 'ID',
@@ -203,20 +219,20 @@ export default {
         titleClass: 'center aligned',
         dataClass: 'left aligned w-25',
         visible:false,
-        width: '15%'
+        width: '20%'
       },
       {
           name: '__slot:actions',   // <----
-          title: 'Actions',
+          title: 'Info',
           titleClass: 'center aligned',
           dataClass: 'center aligned',
-          width: '10%'
+          width: '5%'
         }
 		],
 		apiurl:ApiConfig.url_80+"/dockerservices",
 		//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
 		css: CssConfig,
-    perpage: 5,
+    perpage: 10,
     searchFor: '',
 		sortOrder: [{
 				field: 'Names',
@@ -331,7 +347,7 @@ export default {
     async onAction (action, data, index) {
       this.actionrowindex = index
       this.$root.$emit('hybrid_show_info',data)
-      console.log('index '+JSON.stringify(data))
+      //console.log('index '+JSON.stringify(data))
       //console.log('index '+this.actionrowindex)
 			if(action == 'view-item' ){
               var log = await store.dispatch("pipelineLLO/hybrid_inspectcontainer",{
@@ -386,12 +402,26 @@ export default {
 				return this.playbookInfo=value
 		},
 		rowClicked(row, event) {
+          console.log('click')
+          console.log(row)
+          console.log(event)
+      //this.actionrowindex = index
+      this.$root.$emit('hybrid_show_info',row)
+      this.rowvactionrowindex = row.Names
+          /*
 			return {
 				html: true,
 				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
 				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
 			}
+      */
 		},
+    onRowClass (dataItem, index) {
+          console.log('-------')
+          console.log(dataItem)
+          console.log(index)
+          return (dataItem.isOverdue) ? 'color-red' : 'color-white'
+    },
 		loadsuccess(response) {
 				var data = response.data.data
 				this.fielddata=data
@@ -427,6 +457,21 @@ export default {
 };
 </script>
 <style>
+
+
+#idvuetablekeyb tr:hover {
+  color: #2185d0;
+  cursor: pointer;
+}
+
+#idvuetablekeyb tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+    padding: 0px;
+}
+
+
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/images.vue b/src/components/mynetwork/images.vue
index 7c903b8..6d23a44 100644
--- a/src/components/mynetwork/images.vue
+++ b/src/components/mynetwork/images.vue
@@ -1,6 +1,9 @@
 <template>
   <card class="card-user" style="max-height:100%">
 
+<div class="author">
+ <img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
+</div>
 
   <v-wait for="myRunInstancedockerimages">
     <template slot="waiting">
@@ -11,9 +14,138 @@
     </template>
   </v-wait>
 
-   <b-container fluid class="bv-example-row">
+<!--
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+----------------     MENOU BEGIN               ------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+-->
+ 
+ <b-container fluid class="bv-example-row">
+      <div class="col-12 text-center">
+       <b> <span class="text-muted">View and Manage your</span> <span class="text-info">Local System</span></b>
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+
+ <div class="row">
+  <div class="col-12">
+
+          <div class="input-group input-group-sm sm-3">
+              <div class="input-group-prepend">
+                      <button
+                              class="ti-settings btn btn-outline-success"
+                              round
+                              type="button"
+                      > </button>&nbsp;
+              </div>
+              <div class="input-group-prepend">
+                      <button
+                              class="btn btn-outline-primary"
+                              round
+                              type="button"
+															@click="setview"
+                      > Networks </button>
+                      <button
+                              class="btn btn-outline-secondary"
+                              round
+                              type="button"
+                      > Images </button>
+              </div>
+          </div>
+
+  </div> <!-- col -->
+ </div>  <!-- row -->
+
+
+
+
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+
+<!--
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+----------------     MENOU END               ------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+-->
+
+<b-container fluid class="bv-example-row">
+      <div class="col-12 text-center">
+       <b> <span class="text-info">Images, Containers  and Volumes</span></b>
+      </div>
+ </b-container>
+
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+  <div class="col-12">
+	 <div class="input-group input-group-sm sm-3">
+
+    <div class="input-group-append">
+      <button 
+        class="btn btn-secondary" 
+        round
+        type="button"
+        disabled
+        >
+        Clear All: </button>
+      <button 
+        class="btn btn-outline-danger" 
+        round
+        type="button"
+        @click="rmall_i('images')">
+        Images</button>
+      <button 
+        class="btn btn-outline-danger" 
+        round
+        type="button"
+        @click="rmall_i('containers')">
+        Containers</button>
+      <button 
+        class="btn btn-outline-danger" 
+        round
+        type="button"
+        @click="rmall_i('volumes')">
+        Volumes</button>
+    </div>
+
+   </div>
+  </div>
+ </b-container>
 
-		<div class="input-group input-group-sm sm-3">
+
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+  <div class="col-12">
+
+	 <div class="input-group input-group-sm sm-3">
     <div class="input-group-append">
       <button 
         class="btn btn-outline-success" 
@@ -47,41 +179,19 @@
 					@click="resetFilter">
 					Reset</button>
 			</div>
-
-    <div class="input-group-append">
-			<div class="mx-auto" style="width: 85px;">
-			</div>
-      <button 
-        class="btn btn-secondary" 
-        round
-        type="button"
-        disabled
-        >
-        Clear All: </button>
-      <button 
-        class="btn btn-outline-danger" 
-        round
-        type="button"
-        @click="rmall_i('images')">
-        Images</button>
-      <button 
-        class="btn btn-outline-danger" 
-        round
-        type="button"
-        @click="rmall_i('containers')">
-        Containers</button>
-      <button 
-        class="btn btn-outline-danger" 
-        round
-        type="button"
-        @click="rmall_i('volumes')">
-        Volumes</button>
-    </div>
-					
     </div>
 
+   </div>
+ </b-container>
+
+
+
+ <b-container fluid class="bv-example-row">
+	<div class="input-group input-group-sm sm-3">
+
+
 		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
+			<vuetable  id="idvuetablekeybimages"
 				ref="vuetable"
 				:key="vuetablekeybimages"
 				:api-url='apiurl'
@@ -107,12 +217,12 @@
 
         <div slot="actions" slot-scope="props">
             <button
-              class="ti-trash btn btn-outline-secondary btn-sm"
+              class="ti-trash btn  btn-sm"
               round
               @click="onAction('rm-item', props.rowData, props.rowIndex)">
             </button>
             <button
-              class="ti-info btn btn-outline-secondary btn-sm"
+              class="ti-info btn  btn-sm"
               round
               @click="onAction('info-item', props.rowData, props.rowIndex)">
             </button>
@@ -133,6 +243,8 @@
 			</div>
     </div>
    </b-container>
+
+
   </card>
 </template>
 <script>
@@ -188,16 +300,16 @@ export default {
         name: 'ID',
         title: '<span class="orange"></span>Image id',
         //sortField: 'ID',
-        visible:true,
+        visible:false,
         dataClass: 'text-left text-wrap text-break break-word',
         width: '15%'
       },
       {
         name: 'Repository',
-        title: '<span class="orange"></span>Repository',
-        sortField: 'Repository',
+        title: '<span class="orange"></span>Images',
+        sortField: 'Image',
         visible:true,
-        dataClass: 'left aligned w-25',
+        dataClass: 'left aligned w-25 text-muted',
         width: '30%'
 
       },
@@ -205,7 +317,7 @@ export default {
         name: 'Tag',
         //sortField: 'Tag',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
+        dataClass: 'left aligned w-15 text-muted',
         visible:true,
         width: '5%'
       },
@@ -213,7 +325,7 @@ export default {
         name: 'CreatedSince',
         sortField: 'CreatedSince',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-20',
+        dataClass: 'left aligned w-20 text-muted',
         visible:true,
         width: '10%'
       },
@@ -226,6 +338,7 @@ export default {
         name: 'Size',
         title: '<span class="orange"></span>Size',
         sortField: 'Size',
+        dataClass: 'left aligned text-muted',
         titleClass: 'center aligned',
         visible:true,
         width: '5%'
@@ -235,7 +348,7 @@ export default {
           title: 'Actions',
           titleClass: 'center aligned',
           dataClass: 'center aligned',
-          width: '10%'
+          width: '8%'
         }
 		],
 		apiurl:ApiConfig.url_80+"/dockerimages",
@@ -350,6 +463,9 @@ export default {
     onChangePage (page) {
       this.$refs.vuetable.changePage(page)
     },
+		setview () {
+      this.$root.$emit('hybrid_show_instance_images','networks')
+		},
     editRow(rowData) {
       alert("You clicked edit on"+ JSON.stringify(rowData));
 		},
@@ -584,6 +700,16 @@ export default {
 };
 </script>
 <style>
+
+
+#idvuetablekeybimages tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+		padding: 0px;
+}
+
+
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}
diff --git a/src/components/mynetwork/mytable.vue b/src/components/mynetwork/mytable.vue
index 204eecd..57486e1 100755
--- a/src/components/mynetwork/mytable.vue
+++ b/src/components/mynetwork/mytable.vue
@@ -16,7 +16,7 @@
       <b-container fluid class="bv-example-row">
           <div class="row text-center">
             <div class="col-12">
-              <b>View and Manage your <span class="text-info">Running Instances</span></b>
+              <b><span class="text-muted">View and Manage your</span> <span class="text-info">Running Instances</span></b>
             </div>
           </div>
 
@@ -79,6 +79,14 @@
       												disabled
                       >
                               Connect</button>
+                      <button
+                              v-if="webinterfacegenericedit && hybridshowdata.Names"
+                              class="btn btn-outline-info"
+                              round
+                              type="button"
+                              @click="onAction('basedireditor')"
+                      >
+                              Editor</button>
                       <button
                               v-if="hybridshowdata.Names"
                               class="btn btn-outline-danger"
@@ -97,30 +105,13 @@
                               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>
 
  </div> <!-- col -->
  <div class="col-1">
           <div class="input-group input-group-sm sm-3">
               <div class="input-group-prepend float-center">
+<!--
                       <button
                               v-if="webinterfacegenericedit && hybridshowdata.Names"
                               class="btn btn-outline-success"
@@ -129,6 +120,7 @@
                               @click="onAction('basedireditor')"
                       >
                               Editor</button>
+-->
               </div>
            </div>
  </div> <!-- col -->
@@ -137,8 +129,22 @@
  <div class="col-5">
           <div class="input-group input-group-sm sm-3">
               <div class="input-group-prepend float-right">
+            <button
+              v-if="actionrowindex && hybridshowdata.Names"
+              class="ti-more-alt btn btn-secondary btn-sm"
+              title="More Options..."
+              round
+              @click="runmore('off')">
+            </button>
+            <button
+              v-if="actionrowindexselect && hybridshowdata.Names"
+              class="ti-more btn btn-outline-info btn-sm"
+              round
+              title="More Options..."
+              @click="runmore('on')">
+            </button>
                       <button
-                              v-if="hybridshowdata.Names"
+                              v-if="actionrowindex && hybridshowdata.Names"
                               class="btn btn-outline-info"
                               round
                               type="button"
@@ -148,7 +154,7 @@
               </div>
               <div class="input-group-prepend float-right">
                       <button
-                              v-if="hybridshowdata.Names"
+                              v-if="actionrowindex && hybridshowdata.Names"
                               class="btn btn-outline-warning"
                               round
                               type="button"
@@ -158,7 +164,7 @@
               </div>
               <div class="input-group-prepend float-right">
                       <button
-                              v-if="hybridshowdata.Names"
+                              v-if="actionrowindex && hybridshowdata.Names"
                               class="btn btn-outline-success"
                               round
                               type="button"
@@ -166,6 +172,24 @@
                       >
                               BrowseBackups</button>
               </div>
+              <div class="input-group-append">
+                      <button
+                              v-if="!actionrowindexconsole && actionrowindex && hybridshowdata.Names"
+                              class="btn btn-outline-warning"
+                              round
+                              type="button"
+                              @click="onAction('container-logs')"
+                      >
+                              Logs</button>
+                      <button
+                              v-if="actionrowindexconsole && actionrowindex && hybridshowdata.Names"
+                              class="btn btn-warning"
+                              round
+                              type="button"
+                              @click="onAction('container-logsclose')"
+                      >
+                              Logs</button>
+              </div>
           </div>
   </div> <!-- col -->
 
@@ -173,19 +197,24 @@
 
 
 
+
+
+
+
+
       </b-container>
       <b-container fluid>
         <div class="row" >
           <div class="col-2 text-info" >
           ID
           </div>
-          <div class="col-3 text-secondary" >
+          <div class="col-3 text-muted" >
           {{ hybridshowdata.ID }}
           </div>
           <div class="col-2 text-info" >
           Image          
           </div>
-          <div class="col-4 text-secondary" >
+          <div class="col-4 text-muted" >
           {{ hybridshowdata.Image }}
           </div>
         </div> <!-- row -->
@@ -193,13 +222,13 @@
           <div class="col-2 text-info" >
           Names
           </div>
-          <div class="col-3 text-secondary" >
+          <div class="col-3 text-muted" >
           {{ hybridshowdata.Names }}
           </div>
           <div class="col-2 text-info" >
           RunningFor
           </div>
-          <div class="col-4 text-secondary" >
+          <div class="col-4 text-muted" >
           {{ hybridshowdata.RunningFor }}
           </div>
         </div> <!-- row -->
@@ -208,23 +237,25 @@
           <div class="col-2 text-info" >
           Status
           </div>
-          <div class="col-3 text-secondary" >
+          <div class="col-3 text-muted" >
           {{ hybridshowdata.Status }}
           </div>
 
           <div class="col-2 text-info" >
           CreatedAt
           </div>
-          <div class="col-4 text-secondary" >
+          <div class="col-4 text-muted" >
           {{ hybridshowdata.CreatedAt }}
           </div>
         </div> <!-- row -->
         <div class="row" >
-
-          <div class="col-2 text-info" >
+<!-- menou networks -->
+          <div class="col-2 text-info" 
+            v-if="actionrowindex"
+          >
                       <button
                               v-if="hybridshowdata.Networks&&addNetworkMenou==false"
-                              class="btn btn-outline-info  btn-sm"
+                              class="btn btn-primary  btn-sm"
                               round
                               type="button"
                               @click="addNetwork(hybridshowdata,'on')"
@@ -239,14 +270,21 @@
                       >
                               Networks</button>
           </div>
-          <div class="col-3 text-secondary" >
+          <div class="col-2 text-info" 
+            v-else
+          >
+           Networks
+          </div>
+<!-- menou networks -->
+
+          <div class="col-3 text-muted" >
           {{ hybridshowdata.Networks }}
           </div>
 
           <div class="col-2 text-info" >
           Ports
           </div>
-          <div class="col-4 text-secondary" >
+          <div class="col-4 text-muted" >
           {{ hybridshowdata.Ports }}
           </div>
         </div> <!-- row -->
@@ -285,7 +323,7 @@
         <div class="row">
           <div class="col-6 text-info">
                       <button
-                              class="btn btn-outline-warning  btn-sm"
+                              class="btn btn-warning  btn-sm"
                               round
                               type="button"
                               @click="updateNetwork(hybridshowdata,'update')"
@@ -331,6 +369,9 @@ export default {
   },
   data() {
    return{
+     actionrowindexconsole: false,
+     actionrowindex: false,
+     actionrowindexselect: true,
      addNetworkMenou:false,
      localNetworks:[],
      selectedNetworks:[],
@@ -388,6 +429,16 @@ export default {
   },
 	mounted() {
 		this.$root.$on('hybrid_show_info', (data) => {
+
+// -------------- new menou
+           this.actionrowindex = false
+           this.actionrowindexselect = true
+        	 this.addNetworkMenou = false
+           this.actionrowindexconsole = false
+           this.$root.$emit('hybrid_show_instance_images','images')
+// -------------- new menou
+
+
 			this.webinterface = false
 			this.webinterfacegeneric = false
 			this.webinterfacegenericedit = false
@@ -862,9 +913,14 @@ info += '</p>'
 								allowOutsideClick: false
 							})
           }else if(action == 'container-logs'){
+              this.actionrowindexconsole = true
+              this.$root.$emit('hybrid_show_instance_images','console')
 							var log = await store.dispatch("pipelineLLO/getlogs",{
 								container:this.hybridshowdata.ID
 							})
+          }else if(action == 'container-logsclose'){
+              this.actionrowindexconsole = false
+              this.$root.$emit('hybrid_show_instance_images','images')
           }else if(action == 'startwebgeneric'){
                var urlgen = this.hybridshowdata.Names.split('_');
                //console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
@@ -1464,6 +1520,19 @@ info +='This permits the docker user on the local machine to connect to X window
               //console.log('socket instance container-stop passed from services '+ this.swarmlabname  )
           }
 			},
+   async runmore (action ) {
+          console.log(action)
+          if(action == 'on'){
+           this.actionrowindex = true 
+           this.actionrowindexselect = false
+          }else if(action == 'off'){
+           this.actionrowindex = false
+           this.actionrowindexselect = true
+        	 this.addNetworkMenou = false
+           this.actionrowindexconsole = false
+           this.$root.$emit('hybrid_show_instance_images','images')
+          }
+			},
    async socketopen () {
         this.$socket.client.open();
         this.$socket.client.connect();
diff --git a/src/components/mynetwork/networks.vue b/src/components/mynetwork/networks.vue
index 0cfb9e9..a7d5e9e 100644
--- a/src/components/mynetwork/networks.vue
+++ b/src/components/mynetwork/networks.vue
@@ -2,6 +2,10 @@
   <card class="card-user" style="max-height:100%">
 
 
+<div class="author">
+ <img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
+</div>
+
   <v-wait for="myRunInstancedockerimages1a">
     <template slot="waiting">
       <div>
@@ -11,6 +15,83 @@
     </template>
   </v-wait>
 
+<!--
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+----------------     MENOU BEGIN               ------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+-->
+
+ <b-container fluid class="bv-example-row">
+      <div class="col-12 text-center">
+       <b> <span class="text-muted">View and Manage your</span> <span class="text-info">Local System</span></b>
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+
+ <div class="row">
+  <div class="col-12">
+
+          <div class="input-group input-group-sm sm-3">
+              <div class="input-group-prepend">
+                      <button
+                              class="ti-settings btn btn-outline-success"
+                              round
+                              type="button"
+                      > </button>&nbsp;
+              </div>
+              <div class="input-group-prepend">
+                      <button
+                              class="btn btn-outline-secondary"
+                              round
+                              type="button"
+                      > Networks </button>
+                      <button
+                              class="btn btn-outline-primary"
+                              round
+                              type="button"
+															@click="setview"
+                      > Images </button>
+              </div>
+          </div>
+
+  </div> <!-- col -->
+ </div>  <!-- row -->
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
+
+<!--
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+----------------     MENOU END               ------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+--------------------------------------------------------------------------
+-->
+
+ <b-container fluid class="bv-example-row">
+      <div class="col-12 text-center">
+       <b> <span class="text-info">Docker Networks</span></b>
+      </div>
+ </b-container>
+
+ <b-container fluid class="bv-example-row">
+    <div class="col-12">
+    <br> 
+      </div>
+ </b-container>
    <b-container fluid class="bv-example-row">
 
 		<div class="input-group input-group-sm sm-3">
@@ -50,10 +131,11 @@
 
 					
     </div>
+ </b-container>
 
 		<div class="white h-100 flex-fixed-width-item"
 			<vuetable 
-				ref="vuetable"
+				ref="vuetable" id="idvuetablekeybnetworks1"
 				:key="vuetablekeybnetworks1"
 				:api-url='apiurl'
 				:api-mode="true"
@@ -78,12 +160,12 @@
 
         <div slot="actions" slot-scope="props">
             <button
-              class="ti-trash btn btn-outline-secondary btn-sm"
+              class="ti-trash btn  btn-sm"
               round
               @click="onAction('rm-item', props.rowData, props.rowIndex)">
             </button>
             <button
-              class="ti-info btn btn-outline-secondary btn-sm"
+              class="ti-info btn  btn-sm"
               round
               @click="onAction('info-item', props.rowData, props.rowIndex)">
             </button>
@@ -104,6 +186,8 @@
 			</div>
     </div>
    </b-container>
+
+
   </card>
 </template>
 <script>
@@ -159,24 +243,24 @@ export default {
         name: 'ID',
         title: '<span class="orange"></span>Network id',
         //sortField: 'ID',
-        visible:true,
+        visible:false,
         dataClass: 'text-left text-wrap text-break break-word',
         width: '15%'
       },
       {
         name: 'Name',
-        title: '<span class="orange"></span>Name',
+        title: '<span class="orange"></span>Network',
         sortField: 'Name',
         visible:true,
-        dataClass: 'left aligned w-25',
-        width: '30%'
+        dataClass: 'left aligned w-50 text-muted',
+        width: '50%'
 
       },
       {
         name: 'Driver',
         //sortField: 'Tag',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-20',
+        dataClass: 'left aligned w-20 text-muted',
         visible:true,
         width: '5%'
       },
@@ -184,9 +268,14 @@ export default {
         name: 'CreatedAt',
         sortField: 'CreatedAt',
         titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
+        dataClass: 'left aligned w-15 text-muted',
         visible:true,
-        width: '10%'
+        width: '15%',
+				callback: function(value) {
+					var tmp = value.split(' ')
+					var v = tmp[0]
+					return v
+				}
       },
       {
         name: '_id',
@@ -198,7 +287,7 @@ export default {
         title: '<span class="orange"></span>Scope',
         sortField: 'Scope',
         titleClass: 'center aligned',
-        visible:true,
+        visible:false,
         width: '5%'
       },
       {
@@ -321,6 +410,9 @@ export default {
     onChangePage (page) {
       this.$refs.vuetable.changePage(page)
     },
+		setview () {
+      this.$root.$emit('hybrid_show_instance_images','images')
+		},
     editRow(rowData) {
       alert("You clicked edit on"+ JSON.stringify(rowData));
 		},
@@ -554,6 +646,12 @@ export default {
 };
 </script>
 <style>
+#idvuetablekeybnetworks1 tr td {
+    border-left: 0px solid;
+    border-right: 0px solid;
+		padding: 0px;
+}
+
 .flex-fixed-width-item {
     flex: 0 0 100px;
 		}