<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>
  <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><span class="text-muted">Swarmlab </span><span class="text-info">MicroServices</span> - <span class="text-muted">Deploy@Home</span> </b>
            </div>
          </div>

<br>


		<div class="input-group input-group-sm sm-3">
					
				<button 
					class="btn btn-outline-success btn-sm" 
					round
					type="button"
					@click="refreshVuetableall">
					Refresh Table</button>

			<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"  >
                <span class="text-muted">
                <b>Lab Service Options</b>
                </span>
      </b-col>
    </div>

		<div class="input-group-append input-group input-group-sm sm-3"
      v-if="viewhybridoptions && up_name"
    >
				<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"
        >
				Stop</button>




			<input type="text" 
				class="form-control text-info" 
				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
				placeholder="Number of Instances"
        disabled
				v-model="up_name"
				>
        <!--
				<button class="btn btn-outline-secondary btn-sm" 
					round
					type="button"
        >
				Port</button>
			<input type="text" 
				class="form-control" 
				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
				placeholder="Expose Port"
        disabled
				v-model="hybridoptions.port"
				>
        <div  class="text-info">{{ up_name }}</div>
        -->

				<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 btn-sm" 
           v-if="viewhybridoptions && up_name && actionrowindex"
					round
					type="button"
				  @click="backupview"
        >
				BackupView</button>

				<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 btn-sm" 
          v-if="viewhybridoptions && customedit && custommenouopen === true && up_name && actionrowindex"
					round
          disabled
					type="button"
				  @click="setcustom"
        >
				Custom:</button>

				<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 btn-sm" 
           v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
					round
					type="button"
				  @click="setcustomsave"
        >
				Save</button>
            <button
          		v-if="startservice"
              class=" btn btn-outline-danger  btn-sm"
              title="Remove Lab_Instance"
              @click="onActionstopcheck()"
              round
              >
              Remove
            </button>
            <button
							v-else
              class=" btn btn-outline-danger  btn-sm"
              title="Remove Lab_Instance"
              round
							disabled
              >
              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"
      v-if="viewhybridoptions && custommenou"
    >

    <div class="row"
      <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">
          {{ customostext }}
          </span >
          </label>
          <textarea class="form-control" id="custompackages" rows="8"
				      v-model="custom.os"
          >
          {{ custom.os }}
          </textarea>
        </div>
      </b-col>
      <b-col  class="text-center" cols="7" sm="7"  md="7">
        <div class="form-group">
          <label for="customshell" class="text-dark">Custom sh script <br>
          <span class="text-success">
          {{ customshtext }}
          </span >
          </label>
          <textarea class="form-control" id="customshell" rows="8"
				      v-model="custom.sh"
          >
          {{ custom.sh }}
          </textarea>
        </div>
      </b-col>
    </div>

   </div>

		<div class="input-group-append"
      v-if="viewhybridoptions && heavy"
    >
    <p class="text-danger">{{ heavytext }}</p>
    </div>

		<div class="white h-100 flex-fixed-width-item"
			<vuetable  id="idvuetablekeyg"
				ref="vuetable"
				:key="vuetablekeyg"
				: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:row-clicked="rowClicked" 
				@vuetable:pagination-data="onPaginationData"
				@vuetable:load-success="loadsuccess"
        @vuetable:load-error="onLoadError"
				:css="css.table"
				 >

        <div slot="actionsenabled" slot-scope="props"
				      :key="vuetablekeygslotnew"
        >
          <div class="d-flex justify-content-center">
            <button 
              class=" btn  btn-sm text-muted"
              round
              v-if="testtest[props.rowData.swarmlabname] == props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
            ><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="vuetablekeygslot">
          <div class="d-flex justify-content-center">
            <button
              v-if="testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
              class="ti-check btn btn-sm text-success"
              round
              >
            </button>
          </div>
        </div>
        <div slot="actions" slot-scope="props">
          <div class="d-flex justify-content-center">
            <button
              class="ti-cloud-down btn  btn-sm text-muted"
              title="Download Lab_Instance"
              round
              @click="onAction('run-install', props.rowData, props.rowData._id)">
            </button>
          <button
            class="ti-info btn  btn-sm"
              title="Lab_Instance Info"
              name="Lab_Instance_microservice_Info text-muted"
            round
            @click="onAction('view-item', props.rowData, props.rowData._id)">
          </button>
				 </div>
				</div>
			</vuetable>
			<div class="vuetable-pagination ui basic segment grid">
				<vuetable-pagination-info 
					ref="paginationInfo"      
					:css="css.paginationInfo"
      		>
				</vuetable-pagination-info>
				<vuetable-pagination 
					:css="css.pagination"
					ref="pagination"
        	@vuetable-pagination:change-page="onChangePage"
      		>
				</vuetable-pagination>
			</div>
    </div>
   </b-container>
  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
import {ApiConfigWEB} from "@/config/index-web";

export default {
  components: {
      card,
	    Vuetable,
			VuetablePagination,
			VuetablePaginationInfo,
			VuetablePaginationDropdown
	},
  props: {
  },
  data() {
   return{
   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
   testtestdir:[],             // install download or not service
	  hybridoptions: {
      'index':'',            
      'swarmlabname':'',            
      'size':'',            
      'port':''            
    },
    viewhybridoptions: false,
    heavy: false,
    heavytext: '',
    customedit: false,
    custommenouopen: false,
    custommenou: false,
    custom: {
			'os':'',
			'sh':''
    },
    customostext: '',
    customshtext: '',
    up_name:'',
    swarmlab:{},
	  playbookInfo: {},
    token: '',
	  playbook: {
			'title':'',
			'name':'',
			'description':''
		},
			container:{
				name:'',
				view:0
			},
			pipeline:{},
 		selected: 'hybrid',
    options: [
      { text: 'Packages', value: 'packages' },
      { text: 'Images', value: 'images' },
      { text: 'Scripts', value: 'scripts' }
    ],
		showModal: false,
		visibility: [],
	 	active:false,
		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>Microservice',
        sortField: 'swarmlabname',
        visible:true,
        dataClass: 'left aligned col-3',
        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',
        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:actions',   // <----
          title: 'Download',
          titleClass: 'col text-center',
          dataClass: 'center aligned',
          width: '10%'
        },
    ],
		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridmicroservices",
		css: CssConfig,
    perpage: 8,
    searchFor: '',
		sortOrder: [{
				field: 'pipelinename',
				direction: 'asc'
		}],
    multiSort: true,
    paginationComponent: 'vuetable-pagination',
    currentpage:'1',
    currentpagepaginationData: {},
    dataselect:'',
    indexselect:'',
		itemActions: [
				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
		],
		moreParams: { 
				'filter':  '',
				'type':  'scripts'
			},
	 
		}
  },
	mounted() {
		this.$root.$on('hybrid_refresh_availableservices', () => {
        //Vue.nextTick( () => this.$refs.vuetable.refresh())
        Vue.nextTick( () => this.refreshVuetable())
		})
    //refresh from socket mytable 
		this.$root.$on('hybrid_refresh_table', (v) => {
			  this.$nextTick(function () {
            //Vue.nextTick( () => this.$refs.vuetable.refresh())
            this.refreshVuetable()
            this.viewhybridoptions = false
			  })
		})
	},
	async created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
		await this.checkactionrowindexall()
    //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: {
   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,
                      cancelButtonText: 'No, cancel!',
                      showCancelButton: false,
                      showLoaderOnConfirm: false,
                      reverseButtons: true,
                      focusCancel: true,
                      confirmButtonText: 'Ok!'
                      })
    },
		async checkactionrowindexall(){
          var obj = {}
          obj.token = this.token
          obj.instance = 'info'
          var res1 = await store.dispatch('pipelineLLO/getservicesstatusall', obj)
          if(res1.data.data){
            //console.log('resall '+JSON.stringify(res1))
            //console.log('resall--- '+JSON.stringify(res1.data.data))
            var al =   res1.data.data.length;
            for (var arrayIndex in this.testtest) {
                Vue.delete(this.testtest, this.testtest[arrayIndex])
            }
          //console.log(this.testtest)
            for (let index = 0; index < al; ++index) {
                var el  = res1.data.data[index];
                //console.log(el.Names)
                var el1 = el.Names.split('_');
                Vue.set(this.testtest, el1[0], el1[0])
            }
          }
          var res2 = await store.dispatch('pipelineLLO/getservicesinfoall', obj)
          if(res2.data.data){
            //console.log(res2.data.data)
            for (var arrayIndex in this.testtestdir) {
                Vue.delete(this.testtestdir, this.testtestdir[arrayIndex])
            }
          //console.log(this.testtestdir)
            var all =   res2.data.data.length;
            for (let index = 0; index < all; ++index) {
                var el1a  = res2.data.data[index];
                //console.log(el1a)
                Vue.set(this.testtestdir, el1a, el1a)
            }
          }
          //console.log(this.testtestdir)
    },
		async checkactionrowindex(data,index){
        this.resetcustom()
        if(data._id == index) {
          this.dataselect=data
          this.indexselect=index
                  //console.log('res8--- all---- '+JSON.stringify(data._id))
                  //console.log('res8--- all---- '+JSON.stringify(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'){
                  //EDO
                    //Vue.set(this.testactionrowindex, data.swarmlabname, index)
                    Vue.set(this.testactionrowindex, index, data.swarmlabname)
                    //console.log('running---- '+data.swarmlabname)
                    //console.log(this.testactionrowindex)
                  }else{
                    //console.log('res8 NO '+JSON.stringify(res1.data))
                    //Vue.delete(this.testactionrowindex, data.swarmlabname)
                    Vue.delete(this.testactionrowindex, index)
                    //console.log('NOTrunning---- '+data.swarmlabname)
                    //console.log(this.testactionrowindex)
                  }
        }else{
                var obj = {}
                obj.token = this.token
                obj.instance = data.swarmlabname
                var res = await store.dispatch('pipelineLLO/getservicesinfo', obj)
                  //console.log('resi YES '+JSON.stringify(res))
                if(res.data.data == 'yes'){
                  //EDO
                  Vue.set(this.testactionrowindex, index, data.swarmlabname)
                  var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj)
                  //console.log('res8 all '+JSON.stringify(res1))
                  if(res1.data.data == 'yes'){
                  //EDO
                    Vue.set(this.testactionrowindex, index, data.swarmlabname)
                    //console.log('running1111111111---- '+data.swarmlabname)
                    //console.log(this.testactionrowindex)
                    //console.log('res8 YES  '+JSON.stringify(res1.data))
                  }else{
                    //console.log('res8 NO '+JSON.stringify(res1.data))
                    Vue.delete(this.testactionrowindex, index)
                    //console.log('notrunning1111111111---- '+data.swarmlabname)
                    //console.log(this.testactionrowindex)
                  }
                  //console.log('resiiiiiiii yes '+JSON.stringify(this.testactionrowindex[index]))
                }else{
                  Vue.delete(this.testactionrowindex, index)
                  //console.log('resi NO2 '+JSON.stringify(res))
                }
        }
          //console.log(this.testactionrowindex)
		},
		setFilter () {
				this.moreParams = {
						'filter':  this.searchFor,
						'type':    this.selected
				}
        Vue.nextTick( () => this.$refs.vuetable.refresh())
        //Vue.nextTick( () => this.refreshVuetable())
        //this.refreshVuetable()
		},
		resetFilter () {
				this.moreParams = {}
				this.searchFor = ''
				this.moreParams = {
						'filter':  '',
						'type':    'scripts'
				}
        //Vue.nextTick( () => this.$refs.vuetable.refresh())
        Vue.nextTick( () => this.refreshVuetableall())
        //this.refreshVuetable()
		},
   onPaginationData (paginationData) {
      this.$refs.pagination.setPaginationData(paginationData)
			this.$refs.paginationInfo.setPaginationData(paginationData) 
      this.currentpagepaginationData = paginationData
    },
    onChangePage (page) {
        this.resetcustom()
      this.currentpage = 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.swarmlabinfonow = true
          this.swarmlab=data
          var container=this.swarmlab
          //var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname)

          //var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
          //var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
          //var swarmlab1info=res.data.swarmlabinfo
          //var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
          //if(res.data.error25=="ok"){
                //var winfo=''
          var 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,
                  icon: 'info',
                  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())
        Vue.nextTick( () => this.refreshVuetable())
        //this.refreshVuetable()
			}else if(action == 'rm-install' ){
        this.resetcustom()
         this.hybridoptions.swarmlabname = data.swarmlabname
         this.$wait.start('myRunInstancetutor');
         //console.log(this.hybridoptions.swarmlabname)
         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!'
                      })
                  }
                }
        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
        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/getswarmlabmicroserviceinfo', value.swarmlabname)
          var swarmlab1info=res.data.swarmlabinfo
        value.git = swarmlab1info
        //console.log('inf git 0 '+ JSON.stringify(value.swarmlabname))
        //console.log('inf git 1 '+ JSON.stringify(res))
        //console.log('inf '+ JSON.stringify(value))
              var log = await store.dispatch("pipelineLLO/checkowner",{
                token:this.token,
                instance:this.hybridoptions.swarmlabname
                })
      	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.resetcustom()
        //this.customedit = false
        //this.custommenouopen = false
        //this.custommenou = false
        //this.custom.os = ''
        //this.custom.sh = ''

         this.heavy = false
         this.heavytext = ''
					
				//newVERSION 
        // this.up_name = data.swarmlabname
         this.up_name = this.hybridoptions.swarmlabname

        //console.log('RUN------------ '+ JSON.stringify(data))

      			var filtermicrosfot = `microservice-volatilitywindows`
            var grepmicrosoft = new RegExp(filtermicrosfot);

      			var filterju = `microservice-jupyter`
            var grepju = new RegExp(filterju);
						// newVERSION
						//if(grepju.test(data.swarmlabname)){
/*
						if(grepju.test(this.hybridoptions.swarmlabname)){
              this.viewhybridoptions = false
              let value = {}
							// 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)
						// 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'
						 // newVERSION
             // this.hybridoptions.swarmlabname = data.swarmlabname
              this.hybridoptions.swarmlabname = this.hybridoptions.swarmlabname
              this.hybridoptions.index = index
						}else{
              this.viewhybridoptions = true
						 // 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];

                //--------------
						    if(obWEB.name == this.hybridoptions.swarmlabname){
                  if(obWEB.hasOwnProperty('large')){
                    if(obWEB.large != 'no'){
                    //  console.log(obWEB.large)
                      this.heavy = true
                      this.heavytext =  obWEB.large
                    }
                  }
                }
                // -------------------------
						    if(obWEB.name == this.hybridoptions.swarmlabname){
                  if(obWEB.hasOwnProperty('custom')){
                    if(obWEB.custom != 'no'){
                      //console.log(obWEB.custom)
                      this.customedit = true
                      this.custom.os =  obWEB.customos
                      this.custom.sh =  obWEB.customsh
                      this.customostext =  obWEB.customostext
                      this.customshtext =  obWEB.customshtext
                    }
                  }
                }
                // -------------------------

              }
      /*
        console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
        // run on  mytable.vue
      	this.$root.$emit('hybrid_start_instance', data.swarmlabname)
        Vue.nextTick( () => this.$refs.vuetable.refresh())
        */
				}
        //Vue.nextTick( () => this.$refs.vuetable.reload())
        //EDO
        this.refreshVuetable()
			}else if(action == 'down-item' ){
         this.up_name = ''
       //  this.hybridoptions.swarmlabname = data.swarmlabname
         this.hybridoptions.index = index
       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,
          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())
        //this.refreshVuetable()
			}
    },
		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
      	  //await this.$root.$emit('hybrid_stop_instance', value)
              var log = await store.dispatch("pipelineLLO/stopservice",{
                token:this.token,
                instance:this.hybridoptions.swarmlabname
                })
          //Vue.delete(this.testactionrowindex, this.hybridoptions.index)
          //console.log('down service '+ JSON.stringify(this.hybridoptions.index))
          //Vue.nextTick( () => this.$refs.vuetable.refresh())
          //console.log(log)
          this.refreshVuetable()
        }else  {
					console.log('no')       
        }
	  },
		async setcustomcancel(){
        this.custommenouopen = false
        this.custommenou = false
	  },
		async setcustomsave(){
        let value = {}
        value.swarmlabname = this.hybridoptions.swarmlabname
        var log = await store.dispatch("pipelineLLO/savecustom",{
          token:this.token,
          instance:this.hybridoptions.swarmlabname,
          package:this.custom.os,
          sh:this.custom.sh
          })
        this.custommenouopen = false
        this.custommenou = false
        //console.log('chown ok '+ JSON.stringify(log.data))
	  },
		async setcustom(){
        let value = {}
        value.swarmlabname = this.hybridoptions.swarmlabname
        this.custommenouopen = true
        this.custommenou = true
        var log = await store.dispatch("pipelineLLO/getcustom",{
          token:this.token,
          instance:this.hybridoptions.swarmlabname
          })
          if(log.data.error === false){
           if(log.data.error_msg == 'nodir'){
              //console.log('chown reload')
                  var info=`<h5><b> Please redownload Microservice and try launching the module again </b><br> 
                  </h5>
    `
                this.$swal({
                  type: 'Info',
                  icon:'info',
                  html: info,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  cancelButtonText: 'No, cancel!',
                  showCancelButton: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true,
                  confirmButtonText: 'Ok!'
                })
            }

           if(log.data.error_msg == 'ok'){
               if(log.data.extrapackagestext != ''){
                  //this.custom.os = log.data.extrapackagestext
                  Vue.set(this.custom, 'os', log.data.extrapackagestext)
                }
               if(log.data.extrashtext != ''){
                  //this.custom.sh = log.data.extrashtext
                  Vue.set(this.custom, 'sh', log.data.extrashtext)
                }
                //console.log('chown extrapackages1 '+ JSON.stringify(this.custom.os))
                //console.log('chown sh1 '+ JSON.stringify(this.custom.sh))
            }

          }else{
                  var info=`<h5><b> Please remove and download Microservice and try launching the module again </b><br> 
                  </h5>
    `
                this.$swal({
                  type: 'Info',
                  icon:'info',
                  html: info,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  cancelButtonText: 'No, cancel!',
                  showCancelButton: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true,
                  confirmButtonText: 'Ok!'
                })
          }
         //console.log('chownlog '+ JSON.stringify(log))
         //console.log('chown extrapackages '+ JSON.stringify(this.custom.os))
         //console.log('chown sh '+ JSON.stringify(this.custom.sh))
	  },
		async backup(){
      var log = await store.dispatch("pipelineLLO/runbackupinstance",{
        token:this.token,
        instance: this.hybridoptions.swarmlabname
        })
	  },
		async backupview(){
                  var info=`<h5><b>Backups</b><br> 
                  <br>
    `
  info +='<p class="text-secondary">'
info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
 info +='<b> <a class="text-info" href="http://127.0.0.1:3383/" target="_blank">View Backups</a></b>'
 info +='<br>'
                this.$swal({
                  type: 'Info',
                  title: 'Info!',
                  icon:'info',
                  html: info,
                  showCloseButton: true,
                  showLoaderOnConfirm: false,
                  allowOutsideClick: false,
                  cancelButtonText: 'No, cancel!',
                  showCancelButton: false,
                  showLoaderOnConfirm: false,
                  reverseButtons: true,
                  focusCancel: true,
                  confirmButtonText: 'Ok!'
                })
	  },
		async setHybridoptions(){
        this.resetcustom()
        //console.log(JSON.stringify(this.hybridoptions))
        
        // 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
              var log = await store.dispatch("pipelineLLO/chown",{
                token:this.token,
                instance:this.hybridoptions.swarmlabname
                })
              //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())
        await this.refreshVuetable()

        //console.log('RUN 1 '+ JSON.stringify(this.hybridoptions))

		},
    async refreshVuetableall() {
			this.$nextTick(()=>{
					this.vuetablekeyg += 1
				})
		},
    async resetcustom() {
        this.customedit = false
        this.custommenouopen = false
        this.custommenou = false
        this.custom.os = ''
        this.custom.sh = ''
		},
    async refreshVuetable() {
		    await this.checkactionrowindexall()
			this.$nextTick(()=>{
					this.vuetablekeygslot += 1
					this.vuetablekeygslotnew += 1
				})
      },
		playbookinfoShow(value) {
				return this.visibility[value]=true
		},
		playbookinfo(value) {
				return this.playbookInfo=value
		},


		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(this.testtest)
      //console.log(this.testtestdir)
      // -----------------------------
      // 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
				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>

#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;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

.vue-notifyjs.notifications{
  .alert{
   z-index: 100;
  }
  .list-move {
    transition: transform 0.3s, opacity 0.4s;
  }
  .list-item {
    display: inline-block;
    margin-right: 10px;

  }
  .list-enter-active {
    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
  }
  .list-leave-active {
    transition: transform 1s ease-out, opacity 0.4s ease-out;
  }

  .list-enter {
    opacity: 0;
    transform: scale(1.1);

  }
  .list-leave-to {
    opacity: 0;
    transform: scale(1.2, 0.7);
  }
}

pre {
  //background-color: rgb(255, 247, 229);
  background-color: #eff0f1;
	  border: 1px solid blue;
		  //white-space: pre-line;
			}

</style>
