<template>
  <card class="card-user" style="max-height:100%">
      <div class="author">
        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
      </div>

      <b-container fluid class="bv-example-row">
          <div class="row text-center">
            <div class="col-12">
              <b>View and Manage your running Containers</b>
            </div>
          </div>

<br>
          <div class="input-group input-group-sm sm-3">
              <div class="input-group-prepend">
                      <button
                              v-if="$socket.disconnected"
                              class="ti-unlink btn btn-outline-danger"
                              round
                              type="button"
                              title="You are disconnected from Swarmlab-hybrid"
                              disabled
                        >
                              </button>
                      <button
                              v-else
                              class="ti-link btn btn-outline-success"
                              round
                              type="button"
                              title="You are connected swarmlab-hybrid"
                              disabled
                      >
                              </button>
              </div>
              <div class="input-group-prepend">
<!--
                      <button
                              class="btn btn-outline-success"
                              round
                              type="button"
                              @click="onAction('start')"
                      >
                              Start</button>
-->
              </div>
              <div class="input-group-prepend">
                      <button
                              v-if="hybridshowdata.Names"
                              class="btn btn-outline-success"
                              round
                              type="button"
                              @click="onAction('container-connect')"
                      >
                              Connect</button>
                      <button
                              v-else
                              class="btn btn-outline-secondary"
                              round
                              type="button"
      												disabled
                      >
                              Connect</button>
                      <button
                              v-if="hybridshowdata.Names"
                              class="btn btn-outline-danger"
                              round
                              type="button"
                              @click="onAction('container-stop')"
                      >
                              Stop</button>
                      <button
                              v-else
                              class="btn btn-outline-secondary"
                              round
                              type="button"
      												disabled
                      >
                              stop</button>
              </div>

              <div class="input-group-append">
                      <button
                              v-if="hybridshowdata.Names"
                              class="btn btn-outline-warning"
                              round
                              type="button"
                              @click="onAction('container-logs')"
                      >
                              Logs</button>
                      <button
                              v-else
                              class="btn btn-outline-secondary"
                              round
                              type="button"
      												disabled
                      >
                              Logs</button>
              </div>

          </div>
      </b-container>
      <b-container fluid>
        <div class="row" >
          <div class="col-2 text-info" >
          ID
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.ID }}
          </div>
          <div class="col-2 text-info" >
          Image          
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.Image }}
          </div>
        </div> <!-- row -->
        <div class="row" >
          <div class="col-2 text-info" >
          Names
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.Names }}
          </div>
          <div class="col-2 text-info" >
          RunningFor
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.RunningFor }}
          </div>
        </div> <!-- row -->
        <div class="row" >

          <div class="col-2 text-info" >
          Status
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.Status }}
          </div>

          <div class="col-2 text-info" >
          CreatedAt
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.CreatedAt }}
          </div>
        </div> <!-- row -->
        <div class="row" >

          <div class="col-2 text-info" >
                      <button
                              v-if="hybridshowdata.Networks&&addNetworkMenou==false"
                              class="btn btn-outline-info  btn-sm"
                              round
                              type="button"
                              @click="addNetwork(hybridshowdata,'on')"
                      >
                              Networks</button>
                      <button
                              v-if="hybridshowdata.Networks&&addNetworkMenou==true"
                              class="btn btn-outline-warning  btn-sm"
                              round
                              type="button"
                              @click="addNetwork(hybridshowdata,'off')"
                      >
                              Networks</button>
          </div>
          <div class="col-3 text-secondary" >
          {{ hybridshowdata.Networks }}
          </div>

          <div class="col-2 text-info" >
          Ports
          </div>
          <div class="col-4 text-secondary" >
          {{ hybridshowdata.Ports }}
          </div>
        </div> <!-- row -->
<!--
'{"ID":"{{ .ID }}", "Image": "{{ .Image }}", "Names":"{{ .Names }}", "Ports":"{{.Ports}}", 
"Networks":"{{.Networks}}", "Status":"{{.Status}}","RunningFor":"{{.RunningFor}}","CreatedAt":"{{.CreatedAt}}"}'
-->
      </b-container>

      <!-- Networks  -->

<div class="card border-success bg-light mb-3" style="max-width: 100%;"
	v-if="addNetworkMenou==true"
>
  <div class="card-header"></div>
  <div class="card-body text-info">
        <div class="row">
          <div class="col-6 text-info">
    				<h5 class="card-title">Select network</h5>
          </div>
          <div class="col-6 text-info">
						Connect a running container to multiple networks
          </div>
        </div>

        <div class="row">
          <div class="col-6 text-info">
						<b-form-select v-model="selectedNetworks" :options="localNetworkoptions" multiple :select-size="4"></b-form-select>
						<div class="mt-3">Selected: <strong>{{ selectedNetworks }}</strong></div>
          </div>
          <div class="col-6 text-info">
        			<img class="border-white img-thumbnail" src="@/assets/img/dockernetwork.png" alt="...">
          </div>
        </div>

        <div class="row">
          <div class="col-6 text-info">
                      <button
                              class="btn btn-outline-warning  btn-sm"
                              round
                              type="button"
                              @click="updateNetwork(hybridshowdata,'update')"
                      >
                              Update</button>
          </div>
        </div>


  </div>
</div>



  </card>
</template>
<script>
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
import card from '@/components/Card.vue'
import {ApiConfig} from "@/config/index";
import { extend } from 'vee-validate';
import { required, alpha_num } from 'vee-validate/dist/rules';

// No message specified.
extend('alpha_num', alpha_num);

// Override the default message.
extend('required', {
  ...required,
  message: 'This field is required'
});

export default {
  components: {
      card
	},
  props: {
  },
  data() {
   return{
     addNetworkMenou:false,
     localNetworks:[],
     selectedNetworks:[],
     localNetworkoptions:[],
     localNetworkdefault:'',
     STATUS:{},
     CONFIG:{
         'status':'',
         'workerkey':'',
         'swarmlab_public_wgkey':'',
         'server_ip':'',
         'allowed_ips':'',
         'wg_port':'',
         'wg_ip':'',
         'swarm_ip':'',
         'privatekey':'',
         'publickey':'',
       'workerkey':'',
       'privatekey':'',
       'publickey':'',
       'server_ip':''
     },
     CONFIGallowed_ips:'',
     swarmlabname:'swarmlab-sec',
     swarmlabname_port:'',
     swarmlabname_size:3,
     swarmlabname_git:'',
        // run on 
     hybridshowdata:{},
     issocket:'close',
     setFilter: {},
     searchFor: {},
     resetFilter: {}
	 
		}
  },
  beforeMount () {
   this.socketopen();
   this.socketauthenticate()
        //console.log('send')
  },
	mounted() {
		this.$root.$on('hybrid_show_info', (data) => {
			this.$nextTick(function () {
        this.hybridshowdata = data
     this.addNetworkMenou = false
     this.localNetworks = []
     this.selectedNetworks = []
     this.localNetworkoptions = []
     this.localNetworkdefault = ''
        //console.log(JSON.stringify(this.hybridshowdata))
			})
		})
// from available services socket run here
		this.$root.$on('hybrid_start_instance', (data) => {
      this.swarmlabname = data.swarmlabname
      if(data.size){
        this.swarmlabname_size = data.size
      }
      if(data.port){
        this.swarmlabname_port = data.port
      }
        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
				this.onAction('start')
		})
		this.$root.$on('hybrid_start_instance_storage', (data) => {
              var obj = {}
              obj.action = 'up'
              obj.token = this.token
              obj.swarmlabname = data.swarmlabname
              obj.password = data.password
              this.$socket.client.open();
              this.$socket.client.emit('start_storage', obj);
		})
    // build
		this.$root.$on('SERVER_build_image', (obj) => {
              this.$socket.client.open();
              this.$socket.client.emit('build_image', obj);
		})
		this.$root.$on('SERVER_build_vmlist', (data) => {
              var obj = {}
              obj.action = 'up'
              obj.token = this.token
              obj.kill = 2
              this.$socket.client.open();
              this.$socket.client.emit('build_vmlist', obj);
		})
		this.$root.$on('SERVER_build_kill', (data) => {
              var obj = {}
              obj.action = 'up'
              obj.token = this.token
              obj.kill = data.pid
              this.$socket.client.open();
              this.$socket.client.emit('build_kill', obj);
		})
// from available services socket run here
		this.$root.$on('hybrid_install_instance', (data) => {
      this.swarmlabname = data.swarmlabname
      this.swarmlabname_git = data.git
      //this.swarmlabname_port = data.port
			this.onAction('install')
		})
// from available storage socket run here
		this.$root.$on('hybrid_install_instance_storage', (data) => {
      //this.swarmlabname = data.swarmlabname
      //this.swarmlabname_git = data.git
        var obj = {}
        obj.action = 'up'
        obj.token = this.token
        obj.swarmlabname = data.swarmlabname
        obj.git = data.git
        this.$socket.client.open();
        this.$socket.client.emit('installstorage', obj);
		})
// from available services socket run here
		this.$root.$on('hybrid_connect_server', (data) => {
			//this.onAction('create-wirequard')
      this.$socket.client.emit('get-serverconfig');
		})
// from available services socket run here
		this.$root.$on('hybrid_stop_instance', (data) => {
      this.swarmlabname = data
        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
				this.onAction('stop')
		})
// from available storage socket run here
		this.$root.$on('hybrid_stop_instance_storage', (data) => {
      //this.swarmlabname = data
        //console.log('RUN exec '+JSON.stringify(this.swarmlabname))
				//this.onAction('stop')
        this.$socket.client.emit('stop_storage', data);
		})
	},
	created() {
    var url_string = window.location.href
    var url = new URL(url_string);
    this.token = url.searchParams.get("token");
    //console.log("token "+ this.token);
      var log = store.dispatch("pipelineLLO/settoken",{
        token:this.token
      })
     this.socketopen();

	},
    beforeDestroy () {
		this.$root.$off('hybrid_show_info')
		this.$root.$off('hybrid_start_instance')
		this.$root.$off('hybrid_stop_instance')
		this.$root.$off('hybrid_connect_server')
		this.$root.$off('hybrid_install_instance')
		this.$root.$off('hybrid_install_instance_storage')
		this.$root.$off('SERVER_build_vmlist')
		this.$root.$off('SERVER_build_kill')
		this.$root.$off('SERVER_build_image')
 },
  computed: {
		httpOptions() {
			var token = this.token
			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
	  },

	},

  methods: {
			async updateNetwork(container,action){
         // console.log(JSON.stringify(container));
         // console.log(JSON.stringify('selected :' + this.selectedNetworks));
					var log = await store.dispatch("pipelineLLO/updatenetworks",{
						networks:this.selectedNetworks,
						defaultnetwork:this.localNetworkdefault,
						container:container.ID
					})
          this.$root.$emit('hybrid_refresh_networktable')
					 this.hybridshowdata = {}
					 this.addNetworkMenou = false
					 this.localNetworks = []
					 this.selectedNetworks = []
					 this.localNetworkoptions = []
					 this.localNetworkdefault = ''
         // console.log(JSON.stringify(log.data.data));
			},
			async addNetwork(container,action){
        if(action == 'on'){
        	this.addNetworkMenou = true
					var log = await store.dispatch("pipelineLLO/getnetworks",{
						instance:container.ID
					})
          this.localNetworks = log.data.data
					var searchnet = ''
          this.localNetworkoptions = []
							for(var i = 0; i < this.localNetworks.length; i++) {
                 this.localNetworkdefault = this.localNetworks[i].NetworkMode[0]
                 var NET = {}
								    NET.text        = this.localNetworks[i].Name
                    NET.value       = this.localNetworks[i].Name

					          searchnet = new RegExp(this.localNetworks[i].NetworkMode[0]); 
        //console.log(this.localNetworks[i].NetworkMode[0] +' - ' + this.localNetworks[i].Name );
									  if(searchnet.test(this.localNetworks[i].Name)){
                    	NET.disabled       = true
										}else{
                    	NET.disabled       = false
										}

                    this.localNetworkoptions.push(NET)
							}
         // console.log(JSON.stringify(this.localNetworks));
				}else if(action == 'off'){
        	this.addNetworkMenou = false
				}
       // console.log(container);
      },
			async onAction(action){
        if(action == 'start'){
              var obj = {}
              obj.action = 'up'
              obj.token = this.token
              obj.swarmlabname = this.swarmlabname
              obj.swarmlabname_size = this.swarmlabname_size
              obj.swarmlabname_port = this.swarmlabname_port
              //this.$socket.client.emit('action', obj);
              //this.$socket.client.emit('actionstart', obj);
              this.$socket.client.open();
              //this.$socket.client.emit('start', this.swarmlabname);
              this.$socket.client.emit('start', obj);
               //console.log('start ' + JSON.stringify(log))	
               //console.log('startobj ' + JSON.stringify(obj))	
              ////console.log(this.$socket.client.connect())
          }else if(action == 'container-logs'){
							var log = await store.dispatch("pipelineLLO/getlogs",{
								container:this.hybridshowdata.ID
							})
              // console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))	
          }else if(action == 'container-connect'){
              var log = await store.dispatch("pipelineLLO/getmountinfo",{
                instance:this.hybridshowdata.Names
              })

              var container_bash = '/bin/sh'
              var container_user = false
              var swarmlabinstance = new RegExp("^(hybrid-|HYBRID-)"); 
                  if(swarmlabinstance.test(this.hybridshowdata.Names)){
                    container_user = true
                    container_bash = '/bin/bash'
                    var container_user_swarmlab = 'docker'
                  }

              // console.log('log---------- ' + JSON.stringify(this.hybridshowdata))	
          //var Localpath = JSON.parse(log.data.test)
          var info=`<h5>You can connect to the same contained process multiple times simultaneously, from different sessions on the Docker host.<br> 
          <br>
           <b>Open a terminal  and  Run*:</b>
          <br>
          <br>
`
if(container_user){
  info +='<p class="text-success">'
  info += 'docker exec -it -u'+container_user_swarmlab+' '+this.hybridshowdata.Names+' ' + container_bash
  info +='</p>'
}else{
  info +='<p class="text-success">'
  info += 'docker exec -it  '+this.hybridshowdata.Names+' ' + container_bash
  info +='</p>'
}

  info +='<p class="text-secondary">'
info +=' <b>Directory Maps</b>'
info +='<br>'
info +=' <table>'
info +='<tr><td><b>Local</b></td><td><i>Container</i></td></tr>'
              var datajson = log.data.test[0]
              for(var i = 0; i < datajson.length; i++) {

//console.log('test1 '+JSON.stringify(datajson[i]))
                 if(datajson[i].Type == 'bind'){
                 info +='<tr style="outline: thin solid"><td><b>'+datajson[i].Source+' </b></td><td><i>' + datajson[i].Destination+' </i></td></tr>'
                 }
              }
info +=' </table>'
  info +='</p>'
info +='</h5><br>'
info +='<br>'
info +='<b>*</b> App with GUI:  xhost +local:docker <br>'
info +='<br>'
info +='This permits the docker user on the local machine to connect to X windows display.<br>'
//console.log('test1 '+JSON.stringify(this.hybridshowdata))

            this.$swal({
              type: 'Info',
              title: 'Info!',
              icon:'info',
              html: info,
              showCloseButton: true,
              showLoaderOnConfirm: false,
              allowOutsideClick: false,
              cancelButtonText: 'No, cancel!',
              showCancelButton: false,
              showLoaderOnConfirm: false,
              reverseButtons: true,
              focusCancel: true,
              confirmButtonText: 'Ok!'
            })
          }else if(action == 'install'){
              var obj = {}
              obj.action = 'up'
              obj.token = this.token
              obj.swarmlabname = this.swarmlabname
              obj.git = this.swarmlabname_git
              this.$socket.client.open();
              this.$socket.client.emit('install', obj);
          }else if(action == 'container-stop'){
				      // refresh adhocview.vue on console await 
             this.$root.$emit('SERVER_hybrid_table_start')
              this.$socket.client.emit('container-stop', this.swarmlabname, this.hybridshowdata.ID);
          }else if(action == 'create-wirequard'){
               //this.CONFIGprivatekey   = value.privatekey
               //this.CONFIGpublickey    = value.publickey
               //this.CONFIGserver_ip    = value.server_ip // 83.212.77.133:51820
               //this.CONFIGallowed_ips  = value.allowed_ips // 10.13.13.0/16, 0.0.0.0/0, ::/0
              this.$socket.client.emit('create-wirequard', this.token);
          }else if(action == 'stop'){
              this.$socket.client.emit('stop', this.swarmlabname);
          }
			},
   async socketopen () {
        this.$socket.client.open();
        this.$socket.client.connect();
   },
   async socketauthenticate () {
        this.$socket.client.emit('authenticate', this.token);
   },
   async socketreconnect () {
          var log = await this.socketopen() 
          this.socketauthenticate()
   },
   async socketclose () {
        this.$socket.client.close();
   }

  },
 /**
 *
 * == Socket events
 * 
 * [source,javascript]
 * ----   
 *   this.$socket.client.emit('authenticate', 'logintoken');
 * ----   
 *
 */
     sockets: {
      connect() {
        //this.$socket.client.emit('authenticate', this.token);
        //console.log('socket connected '+ 'socketdatasend' )
        this.issocket = 'open';
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'open'
					})
      },
 /**
 *
 * === onError
 *
 */
      error(error) {
        //console.log("socket error "+JSON.stringify(error))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
      },
 /**
 *
 * === connect_error
 * 
 */
      connect_error(error) {
        //console.log("socket connect_error "+JSON.stringify(error))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
          this.socketopen() 
          this.socketreconnect() 
      },
 /**
 *
 * === connect_error
 *
 */
      disconnect(reason) {
        //console.log("socket disconnect "+JSON.stringify(reason))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
          this.socketreconnect() 
      },
 /**
 * 
 * === Socket connect_timeout
 * 
 */
      connect_timeout(reason) {
        //console.log("socket timeout "+JSON.stringify(reason))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
          this.socketreconnect() 
      },
 /**
 * 
 * === Socket reconnect
 * 
 */
      reconnect(attemptNumber) {
        //console.log("socket reconnect attemptNumber "+JSON.stringify(attemptNumber))
          this.socketreconnect() 
      },
 /**
 * 
 * === connect_attempt
 * 
 */
      reconnect_attempt(attemptNumber) {
        //console.log("socket reconnect_attempt "+JSON.stringify(attemptNumber))
          this.socketreconnect() 
      },
 /**
 *
 * === Socket reconnecting
 *
 */
      reconnecting(attemptNumber) {
        //console.log("socket reconnecting "+JSON.stringify(attemptNumber))
          this.socketreconnect() 
      },
 /**
 *
 * === reconnect_error
 *
 */
      reconnect_error(error) {
        //console.log("socket reconnect_error "+JSON.stringify(error))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
          this.socketreconnect() 
      },
 /**
 *
 * === unauthorized
 *
 */
      unauthorized(val) {
        //console.log("socket unauthorized "+JSON.stringify(val))
        this.issocket = 'close'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'close'
					})
      },
 /**
 *
 * === connected 
 *
 */
      socket_id_emit(val) {
        //console.log("socket id from server "+JSON.stringify(val))
        this.issocket = 'open'
					var log = store.dispatch("pipelineLLO/setsocketStatus",{
						status:'open'
					})
      },
 /**
 *
 * === Socket onMessage
 *
 */
 /*
      async adhocEmit(val) {
        //console.log("socket from server "+JSON.stringify(val))
        this.issocket = 'open'
            //this.$wait.start('myRunInstance1');
                // render begin
                this.tryLLO = 'on'
                if(this.firstbootstrap === 0 ){
                    await this.bootsrapllo();
                    this.firstbootstrap = 1
                }
                var output = log.data.out
                var mydinfunction = `
                  <div class="row">
                      <b-col  class="" cols="12" sm="12"  md="12" >
                            ${output}
                       </b-col>
                  </div>`

                  try {
                     let divascii = document.createElement('div');
                     divascii.setAttribute("class", "container-fluid w-100 p-3 llotry")
                     divascii.innerHTML = mydinfunction
                     this.addtask(divascii);
                  }catch (ex) {
                      //console.log(" logi error1 "+JSON.stringify(ex))
                      return
                  }
            //this.$wait.end('myRunInstance1');
      },
      */
    async logdata(val) {
        //console.log(" socket from logdata "+JSON.stringify(val))
        // -------------------------------------
        //  Save store
        // -------------------------------------
        var log = store.dispatch("pipelineLLO/addlog",{
          log:val
        })

        var ltmp = store.getters['pipelineLLO/getlog'];
          this.log_path = [...new Set(ltmp.map(item => item.tailed_path))];
          var loglenght = ''
          for (let item of this.log_path) {
             //console.log('l1find '+ JSON.stringify(item))
             loglenght = ltmp.filter(item1 => item1.tailed_path === item).length;
             Vue.set(this.log_path_lenght, item, loglenght);
             if(loglenght > this.loglenghttotal){
                  // -------------------------------------
                  //  Save store
                  // -------------------------------------
                  var ltotal1 = store.dispatch("pipelineLLO/taillog",{
                    path:item
                  })
             }
          }
          
      },
    async message(val) {
        //console.log(" socket message "+JSON.stringify(val))
      },
    async message_config(value) {
         value.data = JSON.parse(value.data); 
         if(value.file == 'ok'){
             //console.log('server-value-file-ok ' + JSON.stringify(value.data.status))
             this.CONFIG.status                 = value.data.status
             this.CONFIG.workerkey              = value.data.workerkey
             this.CONFIG.swarmlab_public_wgkey  = value.data.swarmlab_public_wgkey
             this.CONFIG.server_ip              = value.data.server_ip 
             this.CONFIG.allowed_ips            = value.data.allowed_ips 
             this.CONFIG.wg_port                = value.data.wg_port 
             this.CONFIG.wg_ip                  = value.data.wg_ip
             this.CONFIG.swarm_ip               = value.data.swarm_ip
             this.CONFIG.privatekey             = value.data.privatekey
             this.CONFIG.publickey              = value.data.publickey

         }else if(value.file == 'nodata'){
             this.CONFIG.status                 = ''
             this.CONFIG.workerkey              = ''
             this.CONFIG.swarmlab_public_wgkey  = ''
             this.CONFIG.server_ip              = ''
             this.CONFIG.allowed_ips            = ''
             this.CONFIG.wg_port                = ''
             this.CONFIG.wg_ip                  = ''
             this.CONFIG.swarm_ip               = ''
             this.CONFIG.privatekey             = ''
             this.CONFIG.publickey              = ''
         }
         // send to  myconnect-server.vue
         //console.log('server-config ' + JSON.stringify(this.CONFIG))
				 store.dispatch("pipelineLLO/addconfig",this.CONFIG)
		     this.$root.$emit('hybrid_connect_server_view', this.CONFIG)
      },
    async message_log(val) {
        //console.log(" socket out "+JSON.stringify(val))
        this.$root.$emit('hybrid_log_in',val)
				// refresh adhocview.vue on console await 
        //this.$root.$emit('SERVER_hybrid_table_start')
        // clear container info here sockert end
        //this.hybridshowdata = {}
      },
    async message_out(val) {
        //console.log(" socket out "+JSON.stringify(val))
        this.$root.$emit('hybrid_log_in',val)
				// refresh adhocview.vue on console await 
        this.$root.$emit('SERVER_hybrid_table_start')
        // clear container info here sockert end
        this.hybridshowdata = {}
      },
    async message_err(val) {
        //console.log(" socket err "+JSON.stringify(val))
        this.$root.$emit('hybrid_log_in',val)
      },
    async message_close(val) {
        //console.log(" socket close "+JSON.stringify(val))
        this.$root.$emit('hybrid_log_in',val)
        // refresh table availableservices
        this.$root.$emit('hybrid_refresh_table')
				// refresh adhocview.vue on console  await console
        this.$root.$emit('SERVER_hybrid_table_stop')
      },
        async message_err_storage(val) {
            //console.log(" socket err "+JSON.stringify(val))
            this.$root.$emit('hybrid_log_in',val)
          },
        async message_out_storage(val) {
         // console.log(" socket out storage "+JSON.stringify(val))
          this.$root.$emit('hybrid_log_in',val)
          //this.hybridshowdata = {}
        },
        async message_close_storage(val) {
          // refresh table hybrid storage
          this.$root.$emit('hybrid_log_in',val)
          this.$root.$emit('hybrid_refresh_table_storage')
        },
        async message_close_build(val) {
          // refresh table hybrid storage
          this.$root.$emit('SERVER_build_close_build',val)
          //this.$root.$emit('hybrid_refresh_table_storage')
        },
    async build_set_sshpid(val) {
       // console.log(" socket pid "+JSON.stringify(val))
        this.$root.$emit('SERVER_build_set_sshpid',val)
      },
    async build_set_buildpid(val) {
       // console.log(" socket pid "+JSON.stringify(val))
        this.$root.$emit('SERVER_build_set_buildpid',val)
      },
    async message_hybrid_status(val) {
                var obj = {}
                obj.status = val
                var res1 = store.dispatch('pipelineLLO/setstatus', obj)
                this.$root.$emit('hybrid_server_status',val)
          //message_hybrid_status {"data":{"swarmlab":"active","hybrid":"Online","swarmlabid":"z3abo50tks76alp7ubjos4ngz"}}
                this.STATUS.swarmlabid  = val.data.swarmlabid
                this.STATUS.hybrid      = val.data.hybrid
                this.STATUS.swarmlab    = val.data.swarmlab
				        store.dispatch("pipelineLLO/addstatusswarmlab",this.STATUS)
      }
  },


  actions: {

	}

};
</script>

<style lang="scss">



.flex-fixed-width-item {
    flex: 0 0 100px;
		}
.modalinfo {
  z-index: 10000000 !important;
	position:fixed;
}
/* a container with flex-direction column */

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

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

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

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

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


</style>
