swarmlab-hybrid/src/components/mynetwork.vue

<template>
  <card class="card-user" style="max-height:100%">

    <div class="row" >
      <div class="col-7 order-first " >
      <br> 
        <view-network>

        </view-network>
        <docker-services>

        </docker-services>
      </div>

      <div class="col-5 order-last" >
      <br>

        <adhoc-view
         v-if="viewconsole"
        >

        </adhoc-view>

        <docker-images
           v-show="viewimages"
        >

        </docker-images>

        <docker-networks
           v-show="viewnetworks"
        >

        </docker-networks>


      </div>
    </div>


  </card>
</template>
<script>
import {mapState, mapGetters, mapActions} from 'vuex'
import ViewNetwork from "./mynetwork/mytable.vue";
import AdhocView from "./mynetwork/AdhocView.vue";
import DockerServices from "./mynetwork/dockerservices.vue";
import DockerImages from "./mynetwork/images.vue";
import DockerNetworks from "./mynetwork/networks.vue";
import card from '@/components/Card.vue'
//import AvailableServices from "./mynetwork/availableservices.vue";
export default {
   components: {
     ViewNetwork,
     AdhocView,
     card,
     DockerServices,
     DockerImages,
     DockerNetworks
 //    AvailableServices
   },
   data () {
      return {
        viewconsole:false,
        viewimages:true,
        viewnetworks:false,
        loading: false,
        consoleView: 'off',
        productIndex: 1
      }
    },
  mounted() {
    this.$root.$on('hybrid_show_instance_images', (v) => {
      if( v == 'networks'){
        this.viewnetworks = true;
        this.viewimages = false;
        this.viewconsole = false;
      }else if( v == 'images'){ 
        this.viewnetworks = false;
        this.viewimages = true;
        this.viewconsole = false;
      }else if( v == 'console'){ 
        this.viewnetworks = false;
        this.viewimages = false;
        this.viewconsole = true;
			}
    })

  },
  beforeDestroy () {
		this.$root.$off('hybrid_show_instance_images')
 },


    created () {
    }
};
</script>
<style>
</style>