From 84d3870d99a057e6e4472d721ec57aff538ae30e Mon Sep 17 00:00:00 2001
From: lefteris <cs141082@uniwa.gr>
Date: Sun, 19 Sep 2021 17:46:59 +0300
Subject: [PATCH] final-version

---
 Details            |  17 ++
 WriteToMongo       |   1 +
 ddocker.sh         |   5 +
 docker-compose.yml | 113 ++++++++
 dummyservice       |   1 +
 fluentd.yml        |  22 ++
 mongo.yml          |  32 +++
 playground-client  |   1 +
 readmongo          |   1 +
 runw.sh            |   2 +
 terminate_all.sh   |   5 +
 test.vue           | 658 +++++++++++++++++++++++++++++++++++++++++++++
 12 files changed, 858 insertions(+)
 create mode 100644 Details
 create mode 160000 WriteToMongo
 create mode 100755 ddocker.sh
 create mode 100644 docker-compose.yml
 create mode 160000 dummyservice
 create mode 100644 fluentd.yml
 create mode 100644 mongo.yml
 create mode 160000 playground-client
 create mode 160000 readmongo
 create mode 100755 runw.sh
 create mode 100755 terminate_all.sh
 create mode 100644 test.vue

diff --git a/Details b/Details
new file mode 100644
index 0000000..bba7d3f
--- /dev/null
+++ b/Details
@@ -0,0 +1,17 @@
+Uparxei custom css gia to vuetable poy prepei na lifthei upopsin se periptwsh pou treksei
+se allo termatiko
+
+// kill docker if container bugs
+sudo systemctl restart docker.socket docker.service
+docker rm -f <container id>
+
+//kill a process by id
+lsof -i:8080
+
+kill $(lsof -t -i:8080)
+
+kill -9 $(lsof -t -i:8080)
+
+
+fuser 3000/tcp
+fuser -k 8080/tcp
\ No newline at end of file
diff --git a/WriteToMongo b/WriteToMongo
new file mode 160000
index 0000000..5a48370
--- /dev/null
+++ b/WriteToMongo
@@ -0,0 +1 @@
+Subproject commit 5a483700b9463acaa38dc50230515c53aa509521
diff --git a/ddocker.sh b/ddocker.sh
new file mode 100755
index 0000000..8a2bb67
--- /dev/null
+++ b/ddocker.sh
@@ -0,0 +1,5 @@
+sudo rm -rf /var/lib/docker /etc/docker
+sudo rm /etc/apparmor.d/docker
+sudo groupdel docker
+sudo rm -rf /var/run/docker.sock
+sudo rm -rf /usr/local/bin/docker-compose
\ No newline at end of file
diff --git a/docker-compose.yml b/docker-compose.yml
new file mode 100644
index 0000000..24c3c39
--- /dev/null
+++ b/docker-compose.yml
@@ -0,0 +1,113 @@
+version: "3.3"
+
+services:
+  redisserver:
+    #image: hub.swarmlab.io:5480/playground-redisserver:latest
+    container_name: redisserver
+    depends_on:
+      - writetomongo
+    logging:
+      driver: "fluentd"
+      options:
+        fluentd-async-connect: "true"
+        tag: mongo.redis
+    image: redis:6.0.9-alpine
+    ports:
+      - "6379:6379"
+    networks:
+      playground-net:
+  writetomongo:
+    image: writemongo:latest
+    container_name: fluentd
+    user: root
+    build: ./WriteToMongo/fluent
+    volumes:
+      - ./WriteToMongo/fluent:/fluentd/etc
+    ports:
+      - "24224:24224"
+      - "24224:24224/udp"
+    networks:
+      playground-net:
+  readmongo:
+    container_name: readmongo_service
+    restart: always
+    depends_on:
+      - writetomongo
+    logging:
+      driver: "fluentd"
+      options:
+        fluentd-async-connect: "true"
+        tag: mongo.access
+    build: ./readmongo
+    image: readmongo:latest
+    ports:
+      - "3000:3000"
+    volumes:
+      - ./readmongo:/usr/src/app
+    links:
+      - mongo
+    networks:
+      playground-net:
+  # readmongo:
+  #   container_name: readmongo_service
+  #   restart: always
+  #   depends_on:
+  #     - writetomongo
+  #   logging:
+  #     driver: "fluentd"
+  #     options:
+  #       fluentd-async-connect: "true"
+  #       tag: mongo.access
+  #   build: ./readmongo
+  #   image: readmongo:latest
+  #   ports:
+  #     - "3000:3000"
+  #   volumes:
+  #     - ./readmongo:/usr/src/app
+  #   links:
+  #     - mongo
+  #   networks:
+  #     playground-net:
+  dummy:
+    container_name: dummy_service
+    restart: always
+    depends_on:
+      - writetomongo
+    logging:
+      driver: "fluentd"
+      options:
+        fluentd-async-connect: "true"
+        tag: mongo.dummy
+    build: ./dummyservice
+    image: dummyservice:latest
+    ports:
+      - "3001:3001"
+    volumes:
+      - ./dummyservice:/usr/src/app
+    links:
+      - mongo
+    networks:
+      playground-net:
+  # ---- fluentd service ----
+  mongo:
+    container_name: mongo
+    logging:
+      driver: "fluentd"
+      options:
+        fluentd-async-connect: "true"
+        tag: mongo.mongo
+    image: mongo
+    expose:
+      - 27017
+    ports:
+      - "27017:27017"
+    networks:
+      playground-net:
+
+volumes:
+  fluent:
+  readmongo:
+  dummy:
+
+networks:
+  playground-net:
diff --git a/dummyservice b/dummyservice
new file mode 160000
index 0000000..b67f60b
--- /dev/null
+++ b/dummyservice
@@ -0,0 +1 @@
+Subproject commit b67f60bbed66e8b4198a549a6600ae11e861bbde
diff --git a/fluentd.yml b/fluentd.yml
new file mode 100644
index 0000000..9a1bc08
--- /dev/null
+++ b/fluentd.yml
@@ -0,0 +1,22 @@
+version: "3.8"
+
+services:
+  writetomongo:
+    image: writemongo:latest
+    container_name: fluentd
+    user: root
+    build: ./WriteToMongo/fluent
+    volumes:
+      - ./WriteToMongo/fluent:/fluentd/etc
+    ports:
+      - "24224:24224"
+      - "24224:24224/udp"
+    networks:
+      playground-net:
+
+volumes:
+  fluent:
+  # src:
+
+networks:
+  playground-net:
diff --git a/mongo.yml b/mongo.yml
new file mode 100644
index 0000000..cade6a8
--- /dev/null
+++ b/mongo.yml
@@ -0,0 +1,32 @@
+version: "3.8"
+
+services:
+  #fluentd service
+  writetomongo:
+    image: writemongo:latest
+    container_name: fluentd
+    user: root
+    build: ./WriteToMongo/fluent
+    volumes:
+      - ./WriteToMongo/fluent:/fluentd/etc
+    ports:
+      - "24224:24224"
+      - "24224:24224/udp"
+    networks:
+      playground-net:
+  mongo:
+    container_name: mongo
+    image: mongo
+    expose:
+      - 27017
+    ports:
+      - "27017:27017"
+    networks:
+      playground-net:
+
+volumes:
+  fluent:
+  # src:
+
+networks:
+  playground-net:
diff --git a/playground-client b/playground-client
new file mode 160000
index 0000000..5be6c55
--- /dev/null
+++ b/playground-client
@@ -0,0 +1 @@
+Subproject commit 5be6c5580d704c57798676d2b463ee1eba22e0a8
diff --git a/readmongo b/readmongo
new file mode 160000
index 0000000..8a9a6bd
--- /dev/null
+++ b/readmongo
@@ -0,0 +1 @@
+Subproject commit 8a9a6bd8da5cf8fc2850dfa7684bc98e5f043ddf
diff --git a/runw.sh b/runw.sh
new file mode 100755
index 0000000..e8ec585
--- /dev/null
+++ b/runw.sh
@@ -0,0 +1,2 @@
+cd playground-client
+npm run serve
\ No newline at end of file
diff --git a/terminate_all.sh b/terminate_all.sh
new file mode 100755
index 0000000..33f69b2
--- /dev/null
+++ b/terminate_all.sh
@@ -0,0 +1,5 @@
+sudo fuser -k 3000/tcp
+sudo fuser -k 6379/tcp
+sudo fuser -k 27017/tcp
+sudo fuser -k 24224/tcp
+sudo fuser -k 24224/udp
\ No newline at end of file
diff --git a/test.vue b/test.vue
new file mode 100644
index 0000000..af14e5c
--- /dev/null
+++ b/test.vue
@@ -0,0 +1,658 @@
+<template>
+  <card class="card-user" style="max-height:100%">
+      <div class="author">
+        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
+      </div>
+
+      <b-container fluid class="bv-example-row">
+
+
+  <v-wait for="myRunInstancetutor">
+    <template slot="waiting">
+      <div>
+        <img src="@/assets/loading.gif" />
+        Enter Lab_room...
+      </div>
+    </template>
+  </v-wait>
+          <div class="row text-center">
+            <div class="col-12">
+              <b>Swarmlab <span class="text-info">LabRoom</span> Deploy - Local </b>
+            </div>
+          </div>
+
+<br>
+
+
+		<div class="input-group input-group-sm sm-3">
+					
+			<input type="text" 
+				class="form-control" 
+				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+				placeholder="Search"
+				v-model="searchFor"
+				@keyup.enter="setFilter"
+				>
+					
+			<div class="input-group-append">
+				<button 
+					class="btn btn-outline-primary" 
+					round
+					type="button"
+					@click="setFilter">
+					Go</button>
+			</div>
+					
+			<div class="input-group-append">
+				<button class="btn btn-outline-secondary" 
+					round
+					type="button"
+					@click="resetFilter">
+					Reset</button>
+			</div>
+    </div>
+
+    <div class="row"
+      v-if="viewhybridoptions"
+    >
+      <b-col  class="text-center" cols="12" sm="12"  md="12">
+                <span>
+                <b>Lab Service Options</b>
+                </span>
+      </b-col>
+    </div>
+
+		<div class="input-group-append"
+      v-if="viewhybridoptions"
+    >
+				<button class="btn btn-outline-secondary" 
+					round
+					type="button"
+        >
+				Instances </button>
+			<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" 
+					round
+					type="button"
+        >
+				Port</button>
+			<input type="text" 
+				class="form-control" 
+				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
+				placeholder="Expose Port"
+				v-model="hybridoptions.port"
+				>
+				<button class="btn btn-outline-success" 
+					round
+					type="button"
+				  @click="setHybridoptions"
+        >
+				Up</button>
+    </div>
+
+		<div class="white h-100 flex-fixed-width-item"
+			<vuetable 
+				ref="vuetable"
+				:key="vuetablekey"
+				:api-url='apiurl'
+				:api-mode="true"
+				:http-options="httpOptions"
+				:fields="fields"
+				:item-actions="itemActions"
+				:sort-order="sortOrder"
+				:show-sort-icons="true"
+				:multi-sort="multiSort"
+				:per-page="perpage"
+				pagination-path="links.pagination"
+				:pagination-component="paginationComponent"
+				:append-params="moreParams"
+				wrapper-class="vuetable-wrapper"
+				loading-class="loading"
+				detail-row-id="id"
+				@vuetable:pagination-data="onPaginationData"
+				@vuetable:load-success="loadsuccess"
+        @vuetable:load-error="onLoadError"
+				:css="css.table"
+				 >
+
+        <div slot="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"
+              title="Stop Lab_Instance"
+              round
+              @click="onAction('down-item', props.rowData, props.rowIndex)"
+              >
+            </button>
+            <button
+              v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
+              class="ti-thumb-down btn btn-secondary 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">
+            <button
+              v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
+              class="ti-trash btn btn-info btn-sm"
+              title="Remove Lab_Instance"
+              @click="onAction('rm-install', props.rowData, props.rowIndex)"
+              round
+              >
+            </button>
+          </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"
+              title="Download Lab_Instance"
+              round
+              @click="onAction('run-install', props.rowData, props.rowIndex)">
+            </button>
+          <button
+            class="ti-info btn btn-outline-secondary btn-sm"
+              title="Lab_Instance Info"
+            round
+            @click="onAction('view-item', props.rowData, props.rowIndex)">
+          </button>
+				 </div>
+				</div>
+			</vuetable>
+			<div class="vuetable-pagination ui basic segment grid">
+				<vuetable-pagination-info 
+					ref="paginationInfo"      
+					:css="css.paginationInfo"
+      		>
+				</vuetable-pagination-info>
+				<vuetable-pagination 
+					:css="css.pagination"
+					ref="pagination"
+        	@vuetable-pagination:change-page="onChangePage"
+      		>
+				</vuetable-pagination>
+			</div>
+    </div>
+   </b-container>
+  </card>
+</template>
+<script>
+import store from '@/store/index'
+import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
+import Vue from 'vue'
+import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
+import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
+import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
+import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
+import card from '@/components/Card.vue'
+import {ApiConfig} from "@/config/index";
+
+export default {
+  components: {
+      card,
+	    Vuetable,
+			VuetablePagination,
+			VuetablePaginationInfo,
+			VuetablePaginationDropdown
+	},
+  props: {
+  },
+  data() {
+   return{
+   testactionrowindex:[],  // downloaded          used in installed
+   teststatusindex:[],     // status stop run     used in status
+	  hybridoptions: {
+      'index':'',            
+      'swarmlabname':'',            
+      'size':'',            
+      'port':''            
+    },
+    viewhybridoptions: false,
+    swarmlab:{},
+	  playbookInfo: {},
+    token: '',
+	  playbook: {
+			'title':'',
+			'name':'',
+			'description':''
+		},
+			container:{
+				name:'',
+				view:0
+			},
+			pipeline:{},
+ 		selected: 'hybrid',
+    options: [
+      { text: 'Packages', value: 'packages' },
+      { text: 'Images', value: 'images' },
+      { text: 'Scripts', value: 'scripts' }
+    ],
+		showModal: false,
+		visibility: [],
+	 	active:false,
+		vuetablekey:0,
+		fielddata:{},
+    fields: [
+      {
+        name: 'swarmlabname',
+        title: '<span class="orange"></span>Name',
+        sortField: 'swarmlabname',
+        visible:true,
+        dataClass: 'left aligned col-3',
+        width: '68%'
+      },
+      {
+        name: '_id',
+        title: '<span class="orange"></span>mongo',
+        visible:false
+      },
+      {
+        name: 'description',
+        sortField: 'gitrepoCloneUrl',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25',
+        visible:false,
+        width: '15%'
+      },
+      {
+        name: 'gitrepoFullName',
+        sortField: 'gitrepoFullName',
+        titleClass: 'center aligned',
+        dataClass: 'left aligned w-25',
+        visible:false,
+        width: '15%'
+      },
+      {
+          name: '__slot:actionsenabled',   // <----
+          title: 'Status',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '5%'
+        },
+      {
+          name: '__slot:actionslocal',   // <----
+          title: 'Installed',
+          titleClass: 'center',
+          dataClass: 'center aligned',
+          width: '5%'
+        },
+      {
+          name: '__slot:actions',   // <----
+          title: 'Download',
+          titleClass: 'col text-center',
+          dataClass: 'center aligned',
+          width: '10%'
+        },
+    ],
+		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
+		css: CssConfig,
+    perpage: 5,
+    searchFor: '',
+		sortOrder: [{
+				field: 'pipelinename',
+				direction: 'asc'
+		}],
+    multiSort: true,
+    paginationComponent: 'vuetable-pagination',
+		itemActions: [
+				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
+				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
+				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
+		],
+		moreParams: { 
+				'filter':  '',
+				'type':  'scripts'
+			},
+	 
+		}
+  },
+	mounted() {
+		this.$root.$on('hybrid_refresh_availableservices', () => {
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		})
+    //refresh from socket mytable 
+		this.$root.$on('hybrid_refresh_table', (v) => {
+			  this.$nextTick(function () {
+            Vue.nextTick( () => this.$refs.vuetable.refresh())
+            this.viewhybridoptions = false
+			  })
+		})
+	},
+	created() {
+    var url_string = window.location.href
+    var url = new URL(url_string);
+    this.token = url.searchParams.get("token");
+    //console.log("token "+ this.token);
+
+	},
+    beforeDestroy () {
+		this.$root.$off('hybrid_refresh_availableservices')
+		this.$root.$off('hybrid_refresh_table')
+ },
+  computed: {
+		httpOptions() {
+			var token = this.token
+			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
+			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
+	  },
+
+	},
+
+  methods: {
+   onError (type,description) {
+                    var winfo=description
+                    var info='<h5>Bootstrap '+type+'</h5>'
+                    this.$swal({
+                      type: type,
+                      html: info+winfo,
+                      showCloseButton: true,
+                      showLoaderOnConfirm: false,
+                      allowOutsideClick: false,
+                      cancelButtonText: 'No, cancel!',
+                      showCancelButton: false,
+                      showLoaderOnConfirm: false,
+                      reverseButtons: true,
+                      focusCancel: true,
+                      confirmButtonText: 'Ok!'
+                      })
+    },
+		async checkactionrowindex(data,index){
+        if(this.testactionrowindex[index] == index){
+        
+                var obj = {}
+                obj.token = this.token
+                obj.instance = data.swarmlabname
+                  var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj)
+                  //console.log('res8 all '+JSON.stringify(res1))
+                  if(res1.data.data == 'yes'){
+                    Vue.set(this.testactionrowindex, data.swarmlabname, index)
+                    //console.log('res8 YES  '+JSON.stringify(res1.data))
+                  }else{
+                    //console.log('res8 NO '+JSON.stringify(res1.data))
+                    Vue.delete(this.testactionrowindex, data.swarmlabname)
+                  }
+                  
+                //console.log('is set '+index)
+        }else{
+               //console.log('not set '+index)
+
+                var obj = {}
+                obj.token = this.token
+                obj.instance = data.swarmlabname
+                var res = await store.dispatch('pipelineLLO/getservicesinfo', obj)
+                if(res.data.data == 'yes'){
+                  //console.log('resi YES '+JSON.stringify(res))
+                  Vue.set(this.testactionrowindex, index, index)
+                  var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj)
+                  //console.log('res8 all '+JSON.stringify(res1))
+                  if(res1.data.data == 'yes'){
+                    Vue.set(this.testactionrowindex, data.swarmlabname, index)
+                    //console.log('res8 YES  '+JSON.stringify(res1.data))
+                  }else{
+                    //console.log('res8 NO '+JSON.stringify(res1.data))
+                    Vue.delete(this.testactionrowindex, data.swarmlabname)
+                  }
+                  //console.log('resiiiiiiii yes '+JSON.stringify(this.testactionrowindex[index]))
+                }else{
+                  //Vue.delete(this.testactionrowindex, index)
+                  console.log('resi NO '+JSON.stringify(res))
+                }
+        }
+		},
+		setFilter () {
+				this.moreParams = {
+						'filter':  this.searchFor,
+						'type':    this.selected
+				}
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		},
+		resetFilter () {
+				this.moreParams = {}
+				this.searchFor = ''
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+		},
+   onPaginationData (paginationData) {
+      this.$refs.pagination.setPaginationData(paginationData)
+			this.$refs.paginationInfo.setPaginationData(paginationData) 
+    },
+    onChangePage (page) {
+      this.$refs.vuetable.changePage(page)
+    },
+    editRow(rowData) {
+      alert("You clicked edit on"+ JSON.stringify(rowData));
+		},
+    async onAction (action, data, index) {
+			if(action == 'view-item' ){
+          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 winfo=''
+                var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
+                this.$swal({
+                  type: 'info',
+                  html: info+winfo,
+                  showCloseButton: true,
+                  showLoaderOnConfirm: false,
+                  allowOutsideClick: false,
+                  showLoaderOnConfirm: false,
+                  reverseButtons: true,
+                  focusCancel: true
+                })
+            }
+
+
+			}else if(action == 'delete-item' ){
+				this.$swal({
+					type: 'info',
+					html: info+winfo,
+					showCloseButton: true,
+					showLoaderOnConfirm: false,
+					allowOutsideClick: false,
+					 cancelButtonText: 'No, cancel!',
+					showCancelButton: true,
+					showLoaderOnConfirm: false,
+					reverseButtons: true,
+					focusCancel: true,
+					confirmButtonText: 'Yes, Delete it!'
+					})
+        //Vue.nextTick( () => this.$refs.vuetable.refresh())
+        this.refreshVuetable()
+			}else if(action == 'rm-install' ){
+         this.hybridoptions.swarmlabname = data.swarmlabname
+         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 = data.swarmlabname
+                //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+'/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!'
+                      })
+                    console.log('inf res11111111111 '+ JSON.stringify(res.data.path))
+                  }
+                }
+
+
+        //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.$wait.start('myRunInstancetutor');
+         this.hybridoptions.swarmlabname = data.swarmlabname
+         this.hybridoptions.index = index
+        let value = {}
+        value.swarmlabname = this.hybridoptions.swarmlabname
+        value.index = this.hybridoptions.index
+        value.size = this.hybridoptions.size
+        value.port = this.hybridoptions.port
+          var res = await store.dispatch('pipelineLLO/getswarmlabinfo', value.swarmlabname)
+          var swarmlab1info=res.data.swarmlabinfo
+        value.git = swarmlab1info
+        //console.log('inf git 1 '+ JSON.stringify(swarmlab1info))
+        //console.log('inf '+ JSON.stringify(value))
+      	this.$root.$emit('hybrid_install_instance', value)
+         this.$wait.end('myRunInstancetutor');
+        //Vue.nextTick( () => this.$refs.vuetable.refresh())
+        this.refreshVuetable()
+
+			}else if(action == 'run-item' ){
+         this.viewhybridoptions = true
+         this.hybridoptions.swarmlabname = data.swarmlabname
+         this.hybridoptions.index = index
+      /*
+        console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
+        // run on  mytable.vue
+      	this.$root.$emit('hybrid_start_instance', data.swarmlabname)
+        Vue.set(this.testactionrowindex, data.swarmlabname, index)
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+        */
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+			}else if(action == 'down-item' ){
+         this.hybridoptions.swarmlabname = data.swarmlabname
+         this.hybridoptions.index = index
+       var info = "Stop and remove containers, networks, images, and volumes"
+       this.$swal({
+          type: 'info',
+          html: info,
+          showCloseButton: true,
+          showLoaderOnConfirm: false,
+          allowOutsideClick: false,
+          cancelButtonText: 'No, cancel!',
+          showCancelButton: true,
+          showLoaderOnConfirm: false,
+          reverseButtons: true,
+          focusCancel: false,
+          confirmButtonText: 'Yes!'
+          }).then((result)=> {
+            this.rmAndClose(result);
+          })
+
+        //console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
+        Vue.nextTick( () => this.$refs.vuetable.refresh())
+			}
+    },
+		async rmAndClose(result){
+        //console.log('value 1 '+ JSON.stringify(result))
+        //console.log('value 1 '+ JSON.stringify(this.hybridoptions))
+    		if (result.isConfirmed) {
+					//console.log('yes')       
+          // run on  mytable.vue
+          var value = this.hybridoptions.swarmlabname
+      	  this.$root.$emit('hybrid_stop_instance', value)
+          Vue.delete(this.testactionrowindex, this.hybridoptions.index)
+          Vue.nextTick( () => this.$refs.vuetable.refresh())
+        }else  {
+					console.log('no')       
+        }
+        this.refreshVuetable()
+	  },
+		async setHybridoptions(){
+        //console.log(JSON.stringify(this.hybridoptions))
+        
+        //console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
+        // run on  mytable.vue
+        let value = {}
+        value.swarmlabname = this.hybridoptions.swarmlabname
+        value.index = this.hybridoptions.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.nextTick( () => this.$refs.vuetable.refresh())
+
+		},
+    refreshVuetable() {
+			this.$nextTick(()=>{
+					this.vuetablekey += 1
+				})
+      },
+		playbookinfoShow(value) {
+				return this.visibility[value]=true
+		},
+		playbookinfo(value) {
+				return this.playbookInfo=value
+		},
+		rowClicked(row, event) {
+			return {
+				html: true,
+				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
+				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
+			}
+		},
+		loadsuccess(response) {
+				var data = response.data.data
+				this.fielddata=data
+				var n = data.length
+				n=n-1
+			},
+      onLoadError(payload) {
+          /*
+          //error2 "invalid_token" join-service.vue:684
+          //error2 "The access token provided has expired" join-service.vue:685
+          //error2 "Unauthorized" join-service.vue:686
+          //error2 401
+        console.log('error2 '+JSON.stringify(payload.response.data.error))
+        console.log('error2 '+JSON.stringify(payload.response.data.error_description))
+        console.log('error2 '+JSON.stringify(payload.response.statusText))
+        console.log('error2 '+JSON.stringify(payload.response.status))
+        */
+        if(payload.response.status == '401'){
+          window.location.href = 'https://api-login.swarmlab.io:8089';
+          Vue.nextTick( () => window.location.href = 'https://api-login.swarmlab.io:8089')
+        }
+      }
+
+
+  },
+
+
+  actions: {
+
+
+	}
+
+};
+</script>
+<style>
+
+</style>
\ No newline at end of file