Browse Source

new MENOU version 1

master
zeus 3 years ago
parent
commit
4741d04950
  1. 6
      .gitignore
  2. 7
      src-local/llo/new.js
  3. 22
      src/App.vue
  4. 28
      src/components/manageservices/view-dashboard.vue
  5. 100
      src/components/mymicroservices.vue
  6. 79
      src/components/mymicroservicescustom.vue
  7. 61
      src/components/mynetwork.vue
  8. 38
      src/components/mynetwork/AdhocView.vue
  9. 443
      src/components/mynetwork/availablemicroservices.vue
  10. 332
      src/components/mynetwork/availablemicroservicescustom.vue
  11. 37
      src/components/mynetwork/availablepoc.vue
  12. 253
      src/components/mynetwork/availableservices.vue
  13. 36
      src/components/mynetwork/availablestorage.vue
  14. 11
      src/components/mynetwork/buildermyservices.vue
  15. 18
      src/components/mynetwork/builderservices.vue
  16. 3
      src/components/mynetwork/customservices.vue
  17. 89
      src/components/mynetwork/dockerservices.vue
  18. 194
      src/components/mynetwork/images.vue
  19. 137
      src/components/mynetwork/mytable.vue
  20. 120
      src/components/mynetwork/networks.vue

6
.gitignore

@ -18,8 +18,10 @@ viwsession/
testfilemanager/ testfilemanager/
README-update README-update
src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm src-local/community/rootapostolos@swarmlab.io_mytest1_microservice-ipterm/
src-local/community/rootapostolos@swarmlab.io_ansibletest_microservice-alpine313 src-local/community/rootapostolos@swarmlab.io_ansibletest_microservice-alpine313/
src-local/community/cse242017102@uniwa.gr_test_microservice-nodejs/
src-local/builders/bento-swarmlab/
swarmlabdoc.js swarmlabdoc.js
swarmlabdoc.asciidoc_config swarmlabdoc.asciidoc_config

7
src-local/llo/new.js

@ -3964,6 +3964,7 @@ SWARMLAB_STORAGE_PASSWORD=${service_password}
var services_path = './instance/'+service+'/'+service var services_path = './instance/'+service+'/'+service
var services_pathexec = process.cwd() var services_pathexec = process.cwd()
var stopeditexec = `/bin/bash ./stop-sidecar-edit-service.sh ${service}` var stopeditexec = `/bin/bash ./stop-sidecar-edit-service.sh ${service}`
try {
const stopedit = spawn(stopeditexec, { const stopedit = spawn(stopeditexec, {
stdio: 'pipe', stdio: 'pipe',
shell: true, shell: true,
@ -3999,6 +4000,12 @@ SWARMLAB_STORAGE_PASSWORD=${service_password}
}); });
}); });
} catch (error) {
console.log('Error:', error);
var n = {}
n.data = error
io.emit('message_close', n);
}
}); });
socket.on('stop_storage', (service) => { socket.on('stop_storage', (service) => {

22
src/App.vue

@ -268,9 +268,11 @@
<b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel"> <b-collapse id="hybrid-private" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')"> LabRoom</b-list-group-item> <b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')"> LabRoom</b-list-group-item>
<b-list-group-item variant="light" name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')"> Storage</b-list-group-item> <b-list-group-item variant="light" name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')"> Storage</b-list-group-item>
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item>
<b-list-group-item variant="light" name="Proof_of_concept" class=" ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')"> Proof_of_concept</b-list-group-item> <b-list-group-item variant="light" name="Proof_of_concept" class=" ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')"> Proof_of_concept</b-list-group-item>
<b-list-group-item variant="light" name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')"> Users images</b-list-group-item> <!--
<b-list-group-item variant="light" name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')"> User Micorservices</b-list-group-item>
-->
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')"> MicroServices</b-list-group-item>
</b-collapse> </b-collapse>
@ -358,9 +360,11 @@
<b-collapse id="hybrid-private1" class="m-subm" accordion="m-sidebar" role="tabpanel"> <b-collapse id="hybrid-private1" class="m-subm" accordion="m-sidebar" role="tabpanel">
<b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')" title="LabRoom"> </b-list-group-item> <b-list-group-item variant="light" name="Container" class="ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_private')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_private') }" @click="hybrid('services')" title="LabRoom"> </b-list-group-item>
<b-list-group-item variant="light" name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')" title="Storage"> </b-list-group-item> <b-list-group-item variant="light" name="Storage" class="ti-server m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_storage')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_storage') }" @click="hybrid('storage')" title="Storage"> </b-list-group-item>
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item>
<b-list-group-item variant="light" name="Proof_of_concept" class="ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')" title="Proof_of_concept"> </b-list-group-item> <b-list-group-item variant="light" name="Proof_of_concept" class="ti-light-bulb m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_proofofconcept')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_proofofconcept') }" @click="hybrid('proofofconcept')" title="Proof_of_concept"> </b-list-group-item>
<b-list-group-item variant="light" name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')" title="Users Microservices"> </b-list-group-item> <!--
<b-list-group-item variant="light" name="communityMicroservice" class="ti-user m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_mymicroservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_mymicroservice') }" @click="hybrid('mymicroservice')" title="User Microservices"> </b-list-group-item>
-->
<b-list-group-item variant="light" name="Microservice" class="ti-cloud m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('private','hybrid_microservice')" style="cursor: pointer;" :class="{ active: isActiveSub('hybrid_microservice') }" @click="hybrid('microservice')" title="Microservices"> </b-list-group-item>
</b-collapse> </b-collapse>
@ -783,25 +787,35 @@ export default {
this.hybridmenou = action this.hybridmenou = action
//console.log(action) //console.log(action)
if(action == 'bootstrap'){ if(action == 'bootstrap'){
this.$root.$emit('hybrid_console_not_view',true)
this.$root.$emit('hybrid_refresh_dockerservices') this.$root.$emit('hybrid_refresh_dockerservices')
}else if(action == 'dashboard'){ }else if(action == 'dashboard'){
this.$root.$emit('hybrid_console_not_view',true)
console.log('dashboard '+action) console.log('dashboard '+action)
}else if(action == 'dashboardall'){ }else if(action == 'dashboardall'){
this.$root.$emit('hybrid_console_not_view',true)
console.log('dashboardall '+action) console.log('dashboardall '+action)
}else if(action == 'connect-server'){ }else if(action == 'connect-server'){
this.$root.$emit('hybrid_console_not_view',true)
this.$root.$emit('hybrid_connect_server') this.$root.$emit('hybrid_connect_server')
}else if(action == 'llo'){ }else if(action == 'llo'){
this.$root.$emit('hybrid_console_not_view',true)
console.log('llo '+action) console.log('llo '+action)
//this.$root.$emit('hybrid_manage_llo') //this.$root.$emit('hybrid_manage_llo')
}else if(action == 'services'){ }else if(action == 'services'){
this.$root.$emit('hybrid_console_not_view',true)
this.$root.$emit('hybrid_refresh_availableservices') this.$root.$emit('hybrid_refresh_availableservices')
}else if(action == 'manage_service'){ }else if(action == 'manage_service'){
this.$root.$emit('hybrid_console_not_view',true)
//this.$root.$emit('hybrid_manage_service') //this.$root.$emit('hybrid_manage_service')
}else if(action == 'storage'){ }else if(action == 'storage'){
this.$root.$emit('hybrid_console_not_view',true)
//this.$root.$emit('hybrid_manage_service') //this.$root.$emit('hybrid_manage_service')
}else if(action == 'microservice'){ }else if(action == 'microservice'){
this.$root.$emit('hybrid_console_not_view',false)
//this.$root.$emit('hybrid_manage_service') //this.$root.$emit('hybrid_manage_service')
}else if(action == 'proofofconcept'){ }else if(action == 'proofofconcept'){
this.$root.$emit('hybrid_console_not_view',true)
//this.$root.$emit('hybrid_manage_service') //this.$root.$emit('hybrid_manage_service')
}else if(action == 'manage_deploy'){ }else if(action == 'manage_deploy'){
} }

28
src/components/manageservices/view-dashboard.vue

@ -1,9 +1,11 @@
<template> <template>
<div class="container-fluid content-row h-50"> <b-container fluid class="bv-example-row">
<div class="row "> <div class="row h-50">
<div class="col-sm-12 col-lg-6 text-center"> <!-- stats_stats_imagescontainers -->
<div class="col-sm-6 text-center">
<v-wait for="stats_stats_imagescontainers"> <v-wait for="stats_stats_imagescontainers">
<template slot="waiting"> <template slot="waiting">
<div> <div>
@ -17,7 +19,9 @@
</div> </div>
</div> </div>
<div class="col-sm-12 col-lg-6 text-center"> <!-- stats_stats_container -->
<div class="col-sm-6 text-center">
<v-wait for="wait_stats_stats_container"> <v-wait for="wait_stats_stats_container">
<template slot="waiting"> <template slot="waiting">
<div> <div>
@ -27,13 +31,16 @@
</template> </template>
</v-wait> </v-wait>
<div class="card h-50 shadow p-3 mb-5 bg-white rounded"> <div class="card h-50 shadow p-3 mb-5 bg-white rounded">
<v-chart class="chart" :key="stats_stats_container" :option="optiondocker" /> <v-chart class="chart" :key="stats_stats_container" style="min-width: 100%;" :option="optiondocker" />
</div> </div>
</div> </div>
</div>
</div> </div> <!-- row -->
</b-container>
</template> </template>
<script> <script>
@ -79,6 +86,7 @@ export default {
// width/height get this for refresh charts // width/height get this for refresh charts
stats_stats_imagescontainers:0, stats_stats_imagescontainers:0,
stats_stats_container:0, stats_stats_container:0,
stats_stats_volume:0,
width: document.documentElement.clientWidth, width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight, height: document.documentElement.clientHeight,
@ -171,7 +179,7 @@ optiondocker: {
*/ */
optionsystem: { optionsystem: {
title: { title: {
text: 'Image/Containers' text: 'Images/Containers'
}, },
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
@ -236,6 +244,7 @@ optionsystem: {
(async () => { (async () => {
this.$wait.start('stats_stats_imagescontainers'); this.$wait.start('stats_stats_imagescontainers');
this.$wait.start('wait_stats_stats_container'); this.$wait.start('wait_stats_stats_container');
this.$wait.start('wait_stats_stats_volume');
var log = await store.dispatch("pipelineLLO/get_stats_imagescontainers",{ var log = await store.dispatch("pipelineLLO/get_stats_imagescontainers",{
token:this.token, token:this.token,
action:'images_containers' action:'images_containers'
@ -302,6 +311,8 @@ optionsystem: {
} }
this.$wait.end('wait_stats_stats_container'); this.$wait.end('wait_stats_stats_container');
this.$wait.end('wait_stats_stats_volume');
})(); })();
}, },
@ -326,6 +337,7 @@ optionsystem: {
async refresh() { async refresh() {
this.stats_stats_imagescontainers += 1 this.stats_stats_imagescontainers += 1
this.stats_stats_container += 1 this.stats_stats_container += 1
this.stats_stats_volume += 1
} }
}, },
actions: { actions: {

100
src/components/mymicroservices.vue

@ -2,28 +2,76 @@
<card class="card-user" style="max-height:100%"> <card class="card-user" style="max-height:100%">
<div class="row" > <div class="row" >
<div class="col-7 order-first " > <div :class="`col-1 order-first`" >
<br> <button
<!-- class="btn btn-outline-info btn-sm"
<view-network> round
type="button"
@click="setnewview(12,0)">
+</button>
<button
v-show="!consoleview"
class="btn btn-warning btn-sm"
round
type="button"
@click="setnewview(7,5)">
-</button>
</div>
<div :class="`col-10`" >
</div>
<div :class="`col-1 order-last float-sm-right`" >
<button
class="btn btn-outline-info btn-sm float-right"
round
type="button"
@click="setnewview(0,12)">
+</button>
<button
v-show="!consolemicro"
class="btn btn-warning btn-sm float-right"
round
type="button"
@click="setnewview(7,5)">
-</button>
</div>
</div>
<div class="divider py-1 "><hr></div>
</view-network> <div class="row" >
--> <div :class="`col-${viewmicroservices} order-first`" >
<br>
<available-microservices <available-microservices
v-show="consolemicro"
:key="componentKeyreloadservice5" :key="componentKeyreloadservice5"
> >
</available-microservices> </available-microservices>
</div> </div>
<div class="col-5 order-last" > <div :class="`col-${viewconsole} order-last`" >
<br> <br>
<adhoc-view> <!--
<adhoc-view
v-show="consoleview"
>
</adhoc-view> </adhoc-view>
-->
<available-mymicroservices>
</available-mymicroservices>
</div> </div>
</div> </div>
<div class="divider py-1 "><hr></div>
<div class="row" >
<div :class="`col-12 order-first`" >
<br>
<adhoc-view
v-show="showconsole"
>
</adhoc-view>
</div>
</div>
</card> </card>
</template> </template>
@ -34,9 +82,10 @@ import AdhocView from "./mynetwork/AdhocView.vue";
import card from '@/components/Card.vue' import card from '@/components/Card.vue'
//import DockerServices from "./mynetwork/dockerservices.vue"; //import DockerServices from "./mynetwork/dockerservices.vue";
import AvailableMicroservices from "./mynetwork/availablemicroservices.vue"; import AvailableMicroservices from "./mynetwork/availablemicroservices.vue";
import AvailableMymicroservices from "./mynetwork/availablemicroservicescustom.vue";
export default { export default {
components: { components: {
// ViewNetwork, AvailableMymicroservices,
AdhocView, AdhocView,
card, card,
// DockerServices, // DockerServices,
@ -44,6 +93,11 @@ export default {
}, },
data () { data () {
return { return {
viewmicroservices: 7,
viewconsole: 5,
consoleview: true,
consolemicro: true,
showconsole: true,
componentKeyreloadservice5:1, componentKeyreloadservice5:1,
loading: false, loading: false,
consoleView: 'off', consoleView: 'off',
@ -54,13 +108,41 @@ export default {
this.$root.$on('hybrid_refresh_info_deploy_local', () => { this.$root.$on('hybrid_refresh_info_deploy_local', () => {
this.componentKeyreloadservice5 += 1 this.componentKeyreloadservice5 += 1
}) })
// problem reload asto etsi mechri na vreis giati
// this.$root.$on('hybrid_start_instance_show_console', (v) => {
// this.setnewview(7, 5)
// })
}, },
beforeDestroy () { beforeDestroy () {
this.$root.$off('hybrid_refresh_info_deploy_local') this.$root.$off('hybrid_refresh_info_deploy_local')
// this.$root.$off('hybrid_start_instance_show_console')
}, },
methods: {
setnewview(m, c) {
if(m == 12){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = false
this.consolemicro = true
}
if(c == 12){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = true
this.consolemicro = false
}
if(m == 7 || c == 5){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = true
this.consolemicro = true
}
}
},
created () { created () {
this.setnewview(7, 5)
} }
}; };
</script> </script>

79
src/components/mymicroservicescustom.vue

@ -2,23 +2,57 @@
<card class="card-user" style="max-height:100%"> <card class="card-user" style="max-height:100%">
<div class="row" > <div class="row" >
<div class="col-7 order-first " > <div :class="`col-1 order-first`" >
<br> <button
<!-- class="btn btn-outline-info btn-sm"
<view-network> round
type="button"
@click="setnewview(12,0)">
+</button>
<button
v-show="!consoleview"
class="btn btn-warning btn-sm"
round
type="button"
@click="setnewview(7,5)">
-</button>
</div>
<div :class="`col-10`" >
</div>
<div :class="`col-1 order-last float-sm-right`" >
<button
class="btn btn-outline-info btn-sm float-right"
round
type="button"
@click="setnewview(0,12)">
+</button>
<button
v-show="!consolemicro"
class="btn btn-warning btn-sm float-right"
round
type="button"
@click="setnewview(7,5)">
-</button>
</div>
</div>
<div class="divider py-1 "><hr></div>
</view-network> <div class="row" >
--> <div :class="`col-${viewmicroservices} order-first`" >
<br>
<available-mymicroservices <available-mymicroservices
v-show="consolemicro"
:key="componentKeyreloadservice5" :key="componentKeyreloadservice5"
> >
</available-mymicroservices> </available-mymicroservices>
</div> </div>
<div class="col-5 order-last" > <div :class="`col-${viewconsole} order-last`" >
<br> <br>
<adhoc-view> <adhoc-view
v-show="consoleview"
>
</adhoc-view> </adhoc-view>
</div> </div>
@ -44,6 +78,10 @@ export default {
}, },
data () { data () {
return { return {
viewmicroservices: 7,
viewconsole: 5,
consoleview: true,
consolemicro: true,
componentKeyreloadservice5:1, componentKeyreloadservice5:1,
loading: false, loading: false,
consoleView: 'off', consoleView: 'off',
@ -58,10 +96,33 @@ export default {
beforeDestroy () { beforeDestroy () {
this.$root.$off('hybrid_refresh_info_deploy_local') this.$root.$off('hybrid_refresh_info_deploy_local')
}, },
methods: {
setnewview(m, c) {
if(m == 12){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = false
this.consolemicro = true
}
if(c == 12){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = true
this.consolemicro = false
}
if(m == 7 || c == 5){
this.viewmicroservices = m
this.viewconsole = c
this.consoleview = true
this.consolemicro = true
}
}
},
created () { created () {
this.setnewview(7, 5)
} }
}; };
</script> </script>
<style> <style>

61
src/components/mynetwork.vue

@ -10,39 +10,30 @@
<docker-services> <docker-services>
</docker-services> </docker-services>
<br>
<br>
<hr>
<div class="row text-center">
<div class="col-12">
<b>View and Manage your local system <span class="text-info">(Docker Images, Containers and Volumes)</span></b>
</div>
</div> </div>
<hr>
<div class="col-5 order-last" >
<br> <br>
<docker-images>
<adhoc-view
v-if="viewconsole"
>
</adhoc-view>
<docker-images
v-show="viewimages"
>
</docker-images> </docker-images>
<br>
<br> <docker-networks
<br> v-show="viewnetworks"
<hr> >
<div class="row text-center">
<div class="col-12">
<b>View and Manage your local <span class="text-info"> Docker networks</span></b>
</div>
</div>
<hr>
<docker-networks>
</docker-networks> </docker-networks>
</div>
<div class="col-5 order-last" >
<br>
<adhoc-view>
</adhoc-view>
</div> </div>
</div> </div>
@ -70,14 +61,34 @@ export default {
}, },
data () { data () {
return { return {
viewconsole:false,
viewimages:true,
viewnetworks:false,
loading: false, loading: false,
consoleView: 'off', consoleView: 'off',
productIndex: 1 productIndex: 1
} }
}, },
mounted() { 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 () { beforeDestroy () {
this.$root.$off('hybrid_show_instance_images')
}, },

38
src/components/mynetwork/AdhocView.vue

@ -1,6 +1,8 @@
<template> <template>
<card class="card-user" style="max-height:100%"> <card class="card-user" style="max-height:100%">
<div class="author"> <div class="author"
v-if="vieconsoleicon"
>
<img class="avatar border-white" src="@/assets/img/code-128.png" alt="..."> <img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
</div> </div>
<b-container fluid class="bv-example-row"> <b-container fluid class="bv-example-row">
@ -15,6 +17,17 @@
</v-wait> </v-wait>
<b-container fluid class="bv-example-row">
<div class="col-12 text-center">
<b> <span class="text-muted">Your</span> <span class="text-info"> System Console</span></b>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
</div>
</b-container>
<button type="button" <button type="button"
round round
class="btn btn-outline-danger btn-sm" class="btn btn-outline-danger btn-sm"
@ -113,6 +126,7 @@ export default {
}, },
data () { data () {
return { return {
vieconsoleicon: true,
socketonline:false, socketonline:false,
extenderror:false, extenderror:false,
tryConsole:false, tryConsole:false,
@ -233,6 +247,16 @@ export default {
this.tryConsole = false this.tryConsole = false
this.code = '' this.code = ''
}, },
// setfontplus () {
// this.consolefontsize++
// this.$refs.myCm.codemirror.refresh()
// this.$refs[$ref].codemirror.refresh()
// console.log(this.consolefontsize)
// },
// setfontminus () {
// this.consolefontsize--
// console.log(this.consolefontsize)
// },
async getdata () { async getdata () {
var field = this.getinfo var field = this.getinfo
@ -414,6 +438,15 @@ export default {
this.$wait.end('myRunInstance1'); this.$wait.end('myRunInstance1');
}) })
}) })
// from microservices not view icon
this.$root.$on('hybrid_console_not_view', (v) => {
console.log(v)
if(v){
this.vieconsoleicon = true
}else if (!v){
this.vieconsoleicon = false
}
})
}, },
beforeDestroy () { beforeDestroy () {
@ -421,6 +454,7 @@ export default {
this.$root.$off('hybrid_log_in') this.$root.$off('hybrid_log_in')
this.$root.$off('SERVER_hybrid_table_start') this.$root.$off('SERVER_hybrid_table_start')
this.$root.$off('SERVER_hybrid_table_stop') this.$root.$off('SERVER_hybrid_table_stop')
this.$root.$off('hybrid_console_not_view')
}, },
created () { created () {
@ -431,8 +465,10 @@ export default {
</script> </script>
<style> <style>
.CodeMirror { .CodeMirror {
font-family: monospace; font-family: monospace;
font-size: 11px;
height: 550px; height: 550px;
} }

443
src/components/mynetwork/availablemicroservices.vue

@ -14,10 +14,18 @@
Enter Lab_room... Enter Lab_room...
</div> </div>
</template> </template>
</v-wait>
<v-wait for="myRunInstancetutorremove">
<template slot="waiting">
<div>
<img src="@/assets/loading.gif" />
Remove ...
</div>
</template>
</v-wait> </v-wait>
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>Swarmlab <span class="text-info">MicroServices</span> Deploy - Local </b> <b><span class="text-muted">Swarmlab </span><span class="text-info">MicroServices</span> - <span class="text-muted">Deploy@Home</span> </b>
</div> </div>
</div> </div>
@ -55,21 +63,34 @@
<div class="row" <div class="row"
v-if="viewhybridoptions" v-if="viewhybridoptions"
> >
<b-col class="text-center" cols="12" sm="12" md="12"> <b-col class="text-center" cols="12" sm="12" >
<span> <span class="text-muted">
<b>Lab Service Options</b> <b>Lab Service Options</b>
</span> </span>
</b-col> </b-col>
</div> </div>
<div class="input-group-append" <div class="input-group-append input-group input-group-sm sm-3"
v-if="viewhybridoptions" v-if="viewhybridoptions && up_name"
> >
<button class="btn btn-outline-secondary" <button class="btn btn-success btn-sm"
v-if="startservice"
round
type="button"
@click="setHybridoptions"
>
Start</button>
<button class="btn btn-warning btn-sm"
v-else
round round
type="button" type="button"
@click="stopservice"
> >
Instances </button> Stop</button>
<input type="text" <input type="text"
class="form-control text-info" class="form-control text-info"
aria-label="Small" aria-describedby="inputGroup-sizing-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@ -78,7 +99,7 @@
v-model="up_name" v-model="up_name"
> >
<!-- <!--
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary btn-sm"
round round
type="button" type="button"
> >
@ -93,30 +114,30 @@
<div class="text-info">{{ up_name }}</div> <div class="text-info">{{ up_name }}</div>
--> -->
<button class="btn btn-outline-info" <button class="btn btn-outline-info btn-sm"
v-if="viewhybridoptions" v-if="viewhybridoptions && up_name && actionrowindex "
round round
type="button" type="button"
@click="backup" @click="backup"
> >
Backup</button> Backup</button>
<button class="btn btn-outline-dark" <button class="btn btn-outline-dark btn-sm"
v-if="viewhybridoptions" v-if="viewhybridoptions && up_name && actionrowindex"
round round
type="button" type="button"
@click="backupview" @click="backupview"
> >
BackupView</button> BackupView</button>
<button class="btn btn-outline-primary" <button class="btn btn-outline-primary btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen != true" v-if="viewhybridoptions && customedit && custommenouopen != true && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustom" @click="setcustom"
> >
Custom</button> Custom</button>
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen === true" v-if="viewhybridoptions && customedit && custommenouopen === true && up_name && actionrowindex"
round round
disabled disabled
type="button" type="button"
@ -124,27 +145,46 @@
> >
Custom:</button> Custom:</button>
<button class="btn btn-outline-warning" <button class="btn btn-outline-warning btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen" v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustomcancel" @click="setcustomcancel"
> >
Cancel</button> Cancel</button>
<button class="btn btn-outline-info" <button class="btn btn-outline-info btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen" v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustomsave" @click="setcustomsave"
> >
Save</button> Save</button>
<button
class=" btn btn-outline-danger btn-sm"
title="Remove Lab_Instance"
@click="onActionstopcheck()"
round
>
Remove
</button>
<button
v-if="actionrowindexmore"
class="ti-more btn btn-info btn-sm"
title="More Actions..."
@click="onActionmore()"
round
>
<button class="btn btn-outline-success" </button>
<button
v-else
class="ti-more btn btn-secondary btn-sm"
title="More Actions..."
@click="onActionmoreclose()"
round round
type="button"
@click="setHybridoptions"
> >
Up</button>
</button>
</div> </div>
<div class="input-group-append" <div class="input-group-append"
@ -152,7 +192,7 @@
> >
<div class="row" <div class="row"
<b-col class="text-center" cols="5" sm="5" md="5"> <b-col class="text-center" cols="5" sm="5" >
<div class="form-group"> <div class="form-group">
<label for="custompackages" class="text-dark">Add Extrapackages <br> <label for="custompackages" class="text-dark">Add Extrapackages <br>
<span class="text-success"> <span class="text-success">
@ -191,7 +231,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeyg"
ref="vuetable" ref="vuetable"
:key="vuetablekeyg" :key="vuetablekeyg"
:api-url='apiurl' :api-url='apiurl'
@ -209,52 +249,36 @@
wrapper-class="vuetable-wrapper" wrapper-class="vuetable-wrapper"
loading-class="loading" loading-class="loading"
detail-row-id="id" detail-row-id="id"
@vuetable:row-clicked="rowClicked"
@vuetable:pagination-data="onPaginationData" @vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess" @vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError" @vuetable:load-error="onLoadError"
:css="css.table" :css="css.table"
> >
<!-- <div slot="actionsenabled" slot-scope="props"
EDO :key="vuetablekeygslotnew"
props.rowData._id gia to pagination problem >
pass props.rowData._id as index
allagi tou vuetablerefresh
<button
class="ti-cloud-down btn btn-outline-secondary btn-sm"
title="Download Lab_Instance"
round
@click="checkactionrowindex(props.rowData,props.rowData._id)">
update</button>
-->
<div slot="actionsenabled" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname" class=" btn btn-sm text-muted"
class="ti-thumb-down btn btn-secondary btn-sm"
title="Start Lab_Instance"
round round
@click="onAction('run-item', props.rowData, props.rowData._id)"
>
</button>
<button
v-if="testtest[props.rowData.swarmlabname] == props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname" v-if="testtest[props.rowData.swarmlabname] == props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
class="ti-thumb-up btn btn-info btn-sm" ><span class="text-success">Running...</span></button>
title="Stop Lab_Instance" <button
v-else
class=" btn btn-sm text-muted"
round round
@click="onAction('down-item', props.rowData, props.rowData._id)" ><span class="text-success">&nbsp;</span></button>
>
</button>
</div> </div>
</div> </div>
<div slot="actionslocal" slot-scope="props" actionslocal <div slot="actionslocal" slot-scope="props" actionslocal
:key="vuetablekeygslot"> :key="vuetablekeygslot">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname" v-if="testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
class="ti-trash btn btn-info btn-sm" class="ti-check btn btn-sm text-success"
title="Remove Lab_Instance"
@click="onAction('rm-install', props.rowData, props.rowData._id)"
round round
> >
</button> </button>
@ -263,14 +287,15 @@ allagi tou vuetablerefresh
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
class="ti-cloud-down btn btn-outline-secondary btn-sm" class="ti-cloud-down btn btn-sm"
title="Download Lab_Instance" title="Download Lab_Instance"
round round
@click="onAction('run-install', props.rowData, props.rowData._id)"> @click="onAction('run-install', props.rowData, props.rowData._id)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="Lab_Instance Info" title="Lab_Instance Info"
name="Lab_Instance_microservice_Info"
round round
@click="onAction('view-item', props.rowData, props.rowData._id)"> @click="onAction('view-item', props.rowData, props.rowData._id)">
</button> </button>
@ -318,6 +343,10 @@ export default {
}, },
data() { data() {
return{ return{
startservice: true,
actionrowindex: false,
actionrowindexmore: true,
swarmlabinfonow:false,
testactionrowindex:[], // downloaded used in installed testactionrowindex:[], // downloaded used in installed
teststatusindex:[], // status stop run used in status teststatusindex:[], // status stop run used in status
testtest:[], // up or down services testtest:[], // up or down services
@ -365,15 +394,34 @@ export default {
active:false, active:false,
vuetablekeyg:0, vuetablekeyg:0,
vuetablekeygslot:0, vuetablekeygslot:0,
vuetablekeygslotnew:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{
name: '__slot:actionslocal', // <----
title: '',
titleClass: 'center',
dataClass: 'center aligned',
width: '3%'
},
{ {
name: 'swarmlabname', name: 'swarmlabname',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Microservice',
sortField: 'swarmlabname', sortField: 'swarmlabname',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3',
width: '68%' width: '68%',
callback: function(value) {
console.log('---- '+ value)
if (value) {
var tmp = value.split('-')
var v = `<span class="text-muted">${tmp[1]} </span> <span class="text-muted"></span>`
return v
}else{
var v = '<span> </span>'
return v
}
}
}, },
{ {
name: '_id', name: '_id',
@ -403,13 +451,6 @@ export default {
dataClass: 'center aligned', dataClass: 'center aligned',
width: '5%' width: '5%'
}, },
{
name: '__slot:actionslocal', // <----
title: 'Installed',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Download', title: 'Download',
@ -479,12 +520,21 @@ export default {
}, },
methods: { methods: {
onActionmore () {
this.actionrowindex = true
this.actionrowindexmore = false
},
onActionmoreclose () {
this.actionrowindex = false
this.actionrowindexmore = true
},
onError (type,description) { onError (type,description) {
var winfo=description var winfo=description
var info='<h5>Bootstrap '+type+'</h5>' var info='<h5>Bootstrap '+type+'</h5>'
this.$swal({ this.$swal({
type: type, type: type,
html: info+winfo, html: info+winfo,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -625,20 +675,23 @@ export default {
}, },
async onAction (action, data, index) { async onAction (action, data, index) {
if(action == 'view-item' ){ if(action == 'view-item' ){
this.swarmlabinfonow = true
this.swarmlab=data this.swarmlab=data
var container=this.swarmlab var container=this.swarmlab
var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname) //var res = await store.dispatch('pipelineLLO/getswarmlabmicroserviceinfo', container.swarmlabname)
var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2) //var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2) //var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
var swarmlab1info=res.data.swarmlabinfo //var swarmlab1info=res.data.swarmlabinfo
var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>' //var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
if(res.data.error25=="ok"){ //if(res.data.error25=="ok"){
var winfo='' //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)' var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
this.$swal({ this.$swal({
type: 'info', type: 'info',
html: info+winfo, html: info,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -646,7 +699,7 @@ export default {
reverseButtons: true, reverseButtons: true,
focusCancel: true focusCancel: true
}) })
} //}
}else if(action == 'delete-item' ){ }else if(action == 'delete-item' ){
@ -704,6 +757,7 @@ export default {
this.refreshVuetable() this.refreshVuetable()
this.$root.$emit('hybrid_refresh_info_deploy_local') this.$root.$emit('hybrid_refresh_info_deploy_local')
}else if(action == 'run-install' ){ }else if(action == 'run-install' ){
this.swarmlabinfonow = true
this.$wait.start('myRunInstancetutor'); this.$wait.start('myRunInstancetutor');
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
@ -738,7 +792,9 @@ export default {
this.heavy = false this.heavy = false
this.heavytext = '' this.heavytext = ''
this.up_name = data.swarmlabname //newVERSION
// this.up_name = data.swarmlabname
this.up_name = this.hybridoptions.swarmlabname
//console.log('RUN------------ '+ JSON.stringify(data)) //console.log('RUN------------ '+ JSON.stringify(data))
@ -747,25 +803,35 @@ export default {
var filterju = `microservice-jupyter` var filterju = `microservice-jupyter`
var grepju = new RegExp(filterju); var grepju = new RegExp(filterju);
if(grepju.test(data.swarmlabname)){ // newVERSION
//if(grepju.test(data.swarmlabname)){
if(grepju.test(this.hybridoptions.swarmlabname)){
this.viewhybridoptions = false this.viewhybridoptions = false
let value = {} let value = {}
value.swarmlabname = data.swarmlabname // newVERSION
//value.swarmlabname = data.swarmlabname
value.swarmlabname = this.hybridoptions.swarmlabname
value.index = index value.index = index
value.size = this.hybridoptions.size value.size = this.hybridoptions.size
value.port = this.hybridoptions.port value.port = this.hybridoptions.port
this.$root.$emit('hybrid_start_instance', value) this.$root.$emit('hybrid_start_instance', value)
//Vue.set(this.testactionrowindex, value.swarmlabname, value.index) //Vue.set(this.testactionrowindex, value.swarmlabname, value.index)
//Vue.set(this.testactionrowindex, value.index, value.swarmlabname) //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
}else if(grepmicrosoft.test(data.swarmlabname)){ // newVERSION
//}else if(grepmicrosoft.test(data.swarmlabname)){
}else if(grepmicrosoft.test(this.hybridoptions.swarmlabname)){
this.viewhybridoptions = true this.viewhybridoptions = true
this.heavy = true this.heavy = true
this.heavytext = 'Note that this image is somewhat heavy (~2GB) since they embed some of the kernel debug symbols for Microsoft Windows. It can take some time to build the Instance' this.heavytext = 'Note that this image is somewhat heavy (~2GB) since they embed some of the kernel debug symbols for Microsoft Windows. It can take some time to build the Instance'
this.hybridoptions.swarmlabname = data.swarmlabname // newVERSION
// this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.swarmlabname = this.hybridoptions.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
}else{ }else{
this.viewhybridoptions = true this.viewhybridoptions = true
this.hybridoptions.swarmlabname = data.swarmlabname // newVERSION
// this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.swarmlabname = this.hybridoptions.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
for(var i = 0; i < ApiConfigWEB.length; i++) { for(var i = 0; i < ApiConfigWEB.length; i++) {
var obWEB = ApiConfigWEB[i]; var obWEB = ApiConfigWEB[i];
@ -808,12 +874,14 @@ export default {
this.refreshVuetable() this.refreshVuetable()
}else if(action == 'down-item' ){ }else if(action == 'down-item' ){
this.up_name = '' this.up_name = ''
this.hybridoptions.swarmlabname = data.swarmlabname // this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
var info = "Stop and remove containers, networks, images, and volumes" var info = `<h5> Microservice: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
info += "<br>Stop and remove containers, networks, images, and volumes"
this.$swal({ this.$swal({
type: 'info', type: 'info',
html: info, html: info,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -984,11 +1052,13 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
//console.log('chown '+ JSON.stringify(this.hybridoptions.swarmlabname)) //console.log('chown '+ JSON.stringify(this.hybridoptions.swarmlabname))
//console.log('chownlog '+ JSON.stringify(log)) //console.log('chownlog '+ JSON.stringify(log))
this.$root.$emit('hybrid_start_instance', value) 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.swarmlabname, value.index)
//Vue.set(this.testactionrowindex, value.index, value.swarmlabname) //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable() await this.refreshVuetable()
//console.log('RUN 1 '+ JSON.stringify(this.hybridoptions)) //console.log('RUN 1 '+ JSON.stringify(this.hybridoptions))
@ -1006,24 +1076,11 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
this.custom.sh = '' this.custom.sh = ''
}, },
async refreshVuetable() { async refreshVuetable() {
//this.vuetablekeyg += 1
// EDO
// echo ta data pou exei epilexei o user
// kai etsi alazo se afta tin katastassi
// afero ta $nextTick
// kai allazo apo refresh edo se afto to action
// refresh only status
// ********* refresh slot einai i lissi ***
//this.dataselect=data
//this.indexselect=index
//console.log('error2a '+JSON.stringify(this.dataselect))
//console.log('error2b '+JSON.stringify(this.indexselect))
// this version with this.checkactionrowindex dont work
// render hangs
//await this.checkactionrowindex(this.dataselect, this.indexselect)
await this.checkactionrowindexall() await this.checkactionrowindexall()
this.$nextTick(()=>{
this.vuetablekeygslot += 1 this.vuetablekeygslot += 1
//}) this.vuetablekeygslotnew += 1
})
}, },
playbookinfoShow(value) { playbookinfoShow(value) {
return this.visibility[value]=true return this.visibility[value]=true
@ -1031,12 +1088,184 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
playbookinfo(value) { playbookinfo(value) {
return this.playbookInfo=value return this.playbookInfo=value
}, },
rowClicked(row, event) {
async onActionstopcheck() {
var info = `<h5> Microservice: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
info += "<br>Remove containers, networks, images, and volumes"
this.$swal({
type: 'info',
html: info,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
}).then((result)=> {
this.onActionstop(result);
})
},
async onActionstop(result) {
if (result.isConfirmed) {
this.$wait.start('myRunInstancetutorremove');
console.log('yes delete')
//v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
//title="Remove Lab_Instance"
//@click="onAction('rm-install', props.rowData, props.rowData._id)"
console.log(this.hybridoptions)
this.resetcustom()
this.$wait.start('myRunInstancetutor');
var res = await store.dispatch('pipelineLLO/rmswarmlablocal', this.hybridoptions.swarmlabname)
this.$wait.end('myRunInstancetutor');
var obj = {}
obj.token = this.token
obj.instance = this.hybridoptions.swarmlabname
var res2 = await store.dispatch('pipelineLLO/getservicesinfo', obj)
if(res2.data.data == 'yes'){
if(res2.data.data == 'yes'){
var winfo='<h6 class="text-warning"> swarmlab encountered a problem while deleting your labroom files. <br> This propably means that you have created some files while operating the labroom. <br> To remove those files please run the following command as root. </h6> <h5><i>Copy-and-run-command </i></h5><br> '
winfo += '<span class="text-success">sudo rm -rf '+res.data.path+'/instance/'+data.swarmlabname+' </span><br><br>'
winfo += '<span class="text-secondary"> You can back up content using: </span><br>'
winfo += '<span class="text-warning">sudo tar -zcvf /home/\$USER/swarmlabbackup_'+data.swarmlabname+'.tar.gz '+res.data.path+'/instance/'+data.swarmlabname+' </span>'
var info='<h5>Labroom remove</h5>'
this.$swal({
type: 'info',
html: info+winfo,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
})
}
}
this.refreshVuetable()
this.$root.$emit('hybrid_refresh_info_deploy_local')
this.$wait.end('myRunInstancetutorremove');
}else{
console.log('no')
}
},
async rowClicked(row, event) {
//this.$root.$emit('hybrid_show_info',row)
//this.rowvactionrowindex = row.Names
//this.onAction (action, data, index)
/*
// remove
<button
v-if="testtest[props.rowData.swarmlabname] != props.rowData.swarmlabname && testtestdir[props.rowData.swarmlabname] == props.rowData.swarmlabname"
class="ti-check btn btn-sm"
title="Remove Lab_Instance"
@click="onAction('rm-install', props.rowData, props.rowData._id)"
round
>
</button>
*/
console.log(row)
console.log(event)
// -----------------------------
// check status run start it
// -----------------------------
if(this.testtest[row.swarmlabname] != row.swarmlabname && this.testtestdir[row.swarmlabname] == row.swarmlabname){
if(!this.swarmlabinfonow){
this.hybridoptions = row
console.log('start '+row.swarmlabname)
this.startservice = true
this.onAction ('run-item', row, row._id)
}
}else if(this.testtest[row.swarmlabname] == row.swarmlabname && this.testtestdir[row.swarmlabname] == row.swarmlabname){
if(!this.swarmlabinfonow){
this.hybridoptions = row
// -----------------------------
// check status run is running stop it
// -----------------------------
console.log('stop ' + row.swarmlabname)
this.hybridoptions = row
this.startservice = false
this.onAction ('run-item', row, row._id)
// await this.onAction ('down-item', row, row._id)
}
}else if(this.testtest[row.swarmlabname] != row.swarmlabname && this.testtestdir[row.swarmlabname] != row.swarmlabname){
// -----------------------------
// check installed download it
// -----------------------------
if(!this.swarmlabinfonow){
var info = `<h5> Microservice ${row.swarmlabname} is Not Installed </h5> <br>
<b>Use </b>
<br>
<br>
<div class="row" >
<div class="col-1" >
<button
class="ti-cloud-down btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-4" >
To Install
</div>
<div class="col-1" >
<button
class="ti-info btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-6" >
For More Information
</div>
</div>
`
this.$swal({
type: 'info',
html: info,
icon:'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
})
//console.log('not installed ' + row.swarmlabname)
//console.log(this.testtestdir)
}
}
/*
return { return {
html: true, html: true,
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) }, title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' } 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) { loadsuccess(response) {
var data = response.data.data var data = response.data.data
@ -1073,6 +1302,18 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
}; };
</script> </script>
<style> <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-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

332
src/components/mynetwork/availablemicroservicescustom.vue

@ -17,7 +17,7 @@
</v-wait> </v-wait>
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>Swarmlab <span class="text-info">Users MicroServices</span> Deploy - Local </b> <b><span class="text-muted">Swarmlab </span><span class="text-info">User MicroServices</span> - <span class="text-muted"> Deploy@Home </span></b>
</div> </div>
</div> </div>
@ -70,14 +70,23 @@
</b-col> </b-col>
</div> </div>
<div class="input-group-append" <div class="input-group-append input-group-sm sm-3"
v-if="viewhybridoptions" v-if="viewhybridoptions"
> >
<button class="btn btn-outline-secondary" <button class="btn btn-success btn-sm"
v-if="startservice"
round
type="button"
@click="setHybridoptions"
>
Start</button>
<button class="btn btn-warning btn-sm"
v-else
round round
type="button" type="button"
@click="stopservice"
> >
Instances </button> Stop</button>
<input type="text" <input type="text"
class="form-control text-info" class="form-control text-info"
aria-label="Small" aria-describedby="inputGroup-sizing-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@ -86,7 +95,7 @@
v-model="up_name" v-model="up_name"
> >
<!-- <!--
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary btn-sm"
round round
type="button" type="button"
> >
@ -101,30 +110,30 @@
<div class="text-info">{{ up_name }}</div> <div class="text-info">{{ up_name }}</div>
--> -->
<button class="btn btn-outline-info" <button class="btn btn-outline-info btn-sm"
v-if="viewhybridoptions" v-if="viewhybridoptions && up_name && actionrowindex"
round round
type="button" type="button"
@click="backup" @click="backup"
> >
Backup</button> Backup</button>
<button class="btn btn-outline-dark" <button class="btn btn-outline-dark btn-sm"
v-if="viewhybridoptions" v-if="viewhybridoptions && up_name && actionrowindex"
round round
type="button" type="button"
@click="backupview" @click="backupview"
> >
BackupView</button> BackupView</button>
<button class="btn btn-outline-primary" <button class="btn btn-outline-primary btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen != true" v-if="viewhybridoptions && customedit && custommenouopen != true && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustom" @click="setcustom"
> >
Custom</button> Custom</button>
<button class="btn btn-outline-secondary" <button class="btn btn-outline-secondary btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen === true" v-if="viewhybridoptions && customedit && custommenouopen === true && up_name && actionrowindex"
round round
disabled disabled
type="button" type="button"
@ -132,27 +141,47 @@
> >
Custom:</button> Custom:</button>
<button class="btn btn-outline-warning" <button class="btn btn-outline-warning btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen" v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustomcancel" @click="setcustomcancel"
> >
Cancel</button> Cancel</button>
<button class="btn btn-outline-info" <button class="btn btn-outline-info btn-sm"
v-if="viewhybridoptions && customedit && custommenouopen" v-if="viewhybridoptions && customedit && custommenouopen && up_name && actionrowindex"
round round
type="button" type="button"
@click="setcustomsave" @click="setcustomsave"
> >
Save</button> Save</button>
<button class="btn btn-outline-success" <button
class=" btn btn-outline-danger btn-sm"
title="Remove Lab_Instance"
@click="onActionstopcheck()"
round
>
Remove
</button>
<button
v-if="actionrowindexmore"
class="ti-more btn btn-info btn-sm"
title="More Actions..."
@click="onActionmore()"
round
>
</button>
<button
v-else
class="ti-more btn btn-secondary btn-sm"
title="More Actions..."
@click="onActionmoreclose()"
round round
type="button"
@click="setHybridoptions"
> >
Up</button>
</button>
</div> </div>
<div class="input-group-append" <div class="input-group-append"
@ -199,7 +228,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeygusersservices"
ref="vuetable" ref="vuetable"
:key="vuetablekeygusersservices" :key="vuetablekeygusersservices"
:api-url='apiurl' :api-url='apiurl'
@ -217,40 +246,39 @@
wrapper-class="vuetable-wrapper" wrapper-class="vuetable-wrapper"
loading-class="loading" loading-class="loading"
detail-row-id="id" detail-row-id="id"
@vuetable:row-clicked="rowClicked"
@vuetable:pagination-data="onPaginationData" @vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess" @vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError" @vuetable:load-error="onLoadError"
:css="css.table" :css="css.table"
> >
<div slot="actionsenabled" slot-scope="props"> <div slot="actionsenabled" slot-scope="props"
:key="vuetablekeygslotcustomnew"
>
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testtest[props.rowData.service] != props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service && testtestdiruser[props.rowData.service] == props.rowData.user" class=" btn btn-sm text-muted"
class="ti-thumb-down btn btn-secondary btn-sm"
title="Start Lab_Instance"
round round
@click="onAction('run-item', props.rowData, props.rowData._id)" v-if="testtest[props.rowData.service] == props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service && testtestdiruser[props.rowData.service] == props.rowData.user"
> >
<span class="text-success">Running...</span>
</button> </button>
<button <button
v-if="testtest[props.rowData.service] == props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service && testtestdiruser[props.rowData.service] == props.rowData.user" v-else
class="ti-thumb-up btn btn-info btn-sm" class=" btn btn-sm text-muted"
title="Stop Lab_Instance"
round round
@click="onAction('down-item', props.rowData, props.rowData._id)" ><span class="text-success">&nbsp;</span></button>
>
</button>
</div> </div>
</div> </div>
<div slot="actionslocal" slot-scope="props" actionslocal <div slot="actionslocal" slot-scope="props" actionslocal
:key="vuetablekeygslotcustom"> :key="vuetablekeygslotcustom">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testtest[props.rowData.service] != props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service" v-if="testtest[props.rowData.service] != props.rowData.service && testtestdir[props.rowData.service] == props.rowData.service"
class="ti-trash btn btn-info btn-sm" class="ti-check btn btn-sm text-success"
title="Remove Lab_Instance" title="Remove Lab_Instance"
@click="onAction('rm-install', props.rowData, props.rowData._id)"
round round
> >
</button> </button>
@ -259,13 +287,13 @@
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
class="ti-cloud-down btn btn-outline-secondary btn-sm" class="ti-cloud-down btn btn-sm"
title="Download Lab_Instance" title="Download Lab_Instance"
round round
@click="onAction('run-install', props.rowData, props.rowData._id)"> @click="onAction('run-install', props.rowData, props.rowData._id)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="Lab_Instance Info" title="Lab_Instance Info"
round round
@click="onAction('view-item', props.rowData, props.rowData._id)"> @click="onAction('view-item', props.rowData, props.rowData._id)">
@ -314,6 +342,10 @@ export default {
}, },
data() { data() {
return{ return{
startservice: true,
actionrowindex: false,
actionrowindexmore: true,
swarmlabinfonow:false,
testactionrowindex:[], // downloaded used in installed testactionrowindex:[], // downloaded used in installed
teststatusindex:[], // status stop run used in status teststatusindex:[], // status stop run used in status
testtest:[], // up or down services testtest:[], // up or down services
@ -362,14 +394,22 @@ export default {
active:false, active:false,
vuetablekeygusersservices:0, vuetablekeygusersservices:0,
vuetablekeygslotcustom:0, vuetablekeygslotcustom:0,
vuetablekeygslotcustomnew:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{
name: '__slot:actionslocal', // <----
title: '',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: 'service', name: 'service',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Microservice',
sortField: 'service', sortField: 'service',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3 text-muted',
width: '30%' width: '30%'
}, },
{ {
@ -377,20 +417,12 @@ export default {
title: '<span class="orange"></span>mongo', title: '<span class="orange"></span>mongo',
visible:false visible:false
}, },
{
name: 'readme',
title: '<span class="orange"></span>Info',
titleClass: 'center aligned',
dataClass: 'left aligned w-25',
visible:true,
width: '35%'
},
{ {
name: 'user', name: 'user',
title: '<span class="orange"></span>User', title: '<span class="orange"></span>User',
sortField: 'user', sortField: 'user',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-25', dataClass: 'left aligned w-25 text-muted',
visible:true, visible:true,
width: '10%', width: '10%',
callback: function(value) { callback: function(value) {
@ -408,13 +440,21 @@ export default {
} }
} }
}, },
{
name: 'readme',
title: '<span class="orange"></span>Info',
titleClass: 'center aligned',
dataClass: 'left aligned w-25 text-muted',
visible:true,
width: '35%'
},
{ {
name: 'gitrepo', name: 'gitrepo',
title: '<span class="orange"></span>User repo', title: '<span class="orange"></span>User repo',
sortField: 'gitrepo', sortField: 'gitrepo',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-25', dataClass: 'left aligned w-25 text-muted',
visible:true, visible:false,
width: '30%' width: '30%'
}, },
{ {
@ -424,13 +464,6 @@ export default {
dataClass: 'center aligned', dataClass: 'center aligned',
width: '5%' width: '5%'
}, },
{
name: '__slot:actionslocal', // <----
title: 'Installed',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Download', title: 'Download',
@ -506,6 +539,77 @@ export default {
}, },
methods: { methods: {
onActionmore () {
this.actionrowindex = true
this.actionrowindexmore = false
},
onActionmoreclose () {
this.actionrowindex = false
this.actionrowindexmore = true
},
async onActionstopcheck() {
var tmpuserservices = this.hybridoptions.user.split('@')
var info = `<h5> Microservice: <b> ${this.hybridoptions.service}-${tmpuserservices[0]} </b> </h5>`
info += "<br>Remove containers, networks, images, and volumes"
this.$swal({
type: 'info',
html: info,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
}).then((result)=> {
this.onActionstop(result);
})
},
async onActionstop(result) {
if (result.isConfirmed) {
this.resetcustom()
this.$wait.start('myRunInstancetutor');
var res = await store.dispatch('pipelineLLO/rmswarmlablocaluser', this.hybridoptions)
this.$wait.end('myRunInstancetutor');
var obj = {}
obj.token = this.token
obj.instance = this.hybridoptions
//check if exists
var res2 = await store.dispatch('pipelineLLO/getservicesinfo', obj)
if(res2.data.data == 'yes'){
if(res2.data.data == 'yes'){
var winfo='<h6 class="text-warning"> swarmlab encountered a problem while deleting your labroom files. <br> This propably means that you have created some files while operating the labroom. <br> To remove those files please run the following command as root. </h6> <h5><i>Copy-and-run-command </i></h5><br> '
winfo += '<span class="text-success">sudo rm -rf '+res.data.path+'/community/'+data.swarmlabname+' </span><br><br>'
winfo += '<span class="text-secondary"> You can back up content using: </span><br>'
winfo += '<span class="text-warning">sudo tar -zcvf /home/\$USER/swarmlabbackup_'+data.swarmlabname+'.tar.gz '+res.data.path+'/community/'+data.swarmlabname+' </span>'
var info='<h5>Labroom remove</h5>'
this.$swal({
type: 'info',
html: info+winfo,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: true,
confirmButtonText: 'Ok!'
})
}
}
this.refreshVuetable()
this.$root.$emit('hybrid_refresh_info_deploy_local')
}
},
onError (type,description) { onError (type,description) {
var winfo=description var winfo=description
var info='<h5>Bootstrap '+type+'</h5>' var info='<h5>Bootstrap '+type+'</h5>'
@ -643,6 +747,7 @@ export default {
}, },
async onAction (action, data, index) { async onAction (action, data, index) {
if(action == 'view-item' ){ if(action == 'view-item' ){
this.swarmlabinfonow = true
this.swarmlab=data this.swarmlab=data
var container=this.swarmlab.readme var container=this.swarmlab.readme
//console.log('inf '+ JSON.stringify(data)) //console.log('inf '+ JSON.stringify(data))
@ -719,6 +824,7 @@ export default {
this.refreshVuetable() this.refreshVuetable()
this.$root.$emit('hybrid_refresh_info_deploy_local') this.$root.$emit('hybrid_refresh_info_deploy_local')
}else if(action == 'run-install' ){ }else if(action == 'run-install' ){
this.swarmlabinfonow = true
this.$wait.start('myRunInstancetutor'); this.$wait.start('myRunInstancetutor');
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.baseservice = data.baseservice this.hybridoptions.baseservice = data.baseservice
@ -771,6 +877,11 @@ export default {
this.refreshVuetable() this.refreshVuetable()
}else if(action == 'run-item' ){ }else if(action == 'run-item' ){
console.log('log1')
console.log(this.hybridoptions)
this.swarmlabinfonow = true
this.resetcustom() this.resetcustom()
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.baseservice = data.baseservice this.hybridoptions.baseservice = data.baseservice
@ -793,12 +904,15 @@ export default {
this.hybridoptions.url3 = data.url3 this.hybridoptions.url3 = data.url3
this.hybridoptions.name3 = data.name3 this.hybridoptions.name3 = data.name3
console.log('log')
console.log(data)
//this.custom.sh = '' //this.custom.sh = ''
this.heavy = false this.heavy = false
this.heavytext = '' this.heavytext = ''
this.up_name = data.swarmlabname var tmpuserservices = this.hybridoptions.user.split('@')
this.up_name = `${this.hybridoptions.service}-${tmpuserservices[0]}`
//console.log('RUN------------ '+ JSON.stringify(data)) //console.log('RUN------------ '+ JSON.stringify(data))
@ -873,10 +987,13 @@ export default {
this.up_name = '' this.up_name = ''
this.hybridoptions = data this.hybridoptions = data
this.hybridoptions.index = index this.hybridoptions.index = index
var info = "Stop and remove containers, networks, images, and volumes" var tmpuserservices = this.hybridoptions.user.split('@')
var info = `<h5> Microservice: <b> ${this.hybridoptions.service}-${tmpuserservices[0]} </b> </h5>`
info += "<br>Stop and remove containers, networks, images, and volumes"
this.$swal({ this.$swal({
type: 'info', type: 'info',
html: info, html: info,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -1055,7 +1172,7 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
//Vue.set(this.testactionrowindex, value.index, value.swarmlabname) //Vue.set(this.testactionrowindex, value.index, value.swarmlabname)
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable() await this.refreshVuetable()
//console.log('RUN 1 '+ JSON.stringify(this.hybridoptions)) //console.log('RUN 1 '+ JSON.stringify(this.hybridoptions))
@ -1087,7 +1204,10 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
//console.log('error2b '+JSON.stringify(this.indexselect)) //console.log('error2b '+JSON.stringify(this.indexselect))
// render hangs // render hangs
await this.checkactionrowindexall() await this.checkactionrowindexall()
this.$nextTick(()=>{
this.vuetablekeygslotcustom += 1 this.vuetablekeygslotcustom += 1
this.vuetablekeygslotcustomnew += 1
})
//des //des
//this.vuetablekeygusersservices += 1 //this.vuetablekeygusersservices += 1
//}) //})
@ -1098,12 +1218,81 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
playbookinfo(value) { playbookinfo(value) {
return this.playbookInfo=value return this.playbookInfo=value
}, },
rowClicked(row, event) { async rowClicked(row, event) {
return { console.log(row)
html: true, if(this.testtest[row.service] != row.service && this.testtestdir[row.service] == row.service && this.testtestdiruser[row.service] == row.user){
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) }, if(!this.swarmlabinfonow){
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' } this.hybridoptions = row
this.startservice = true
console.log('start '+row.service)
await this.onAction ('run-item', row, row._id)
this.swarmlabinfonow = false
} }
}else if(this.testtest[row.service] == row.service && this.testtestdir[row.service] == row.service && this.testtestdiruser[row.service] == row.user){
this.hybridoptions = row
this.startservice = false
await this.onAction ('run-item', row, row._id)
//this.onAction ('run-item', row, row._id)
}else if(this.testtest[row.service] != row.service && this.testtestdir[row.service] != row.service){
console.log('info')
// -----------------------------
// check installed download it
// -----------------------------
if(!this.swarmlabinfonow){
var tmpuserservices = row.user.split('@')
// `${this.hybridoptions.service}-${tmpuserservices[0]}`
var info = `<h5> Microservice <b> ${row.service}-${tmpuserservices[0]} </b> is Not Installed </h5> <br>
<b>Use </b>
<br>
<br>
<div class="row" >
<div class="col-1" >
<button
class="ti-cloud-down btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-4" >
To Install
</div>
<div class="col-1" >
<button
class="ti-info btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-6" >
For More Information
</div>
</div>
`
this.$swal({
type: 'info',
html: info,
icon:'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
})
//console.log('not installed ' + row.swarmlabname)
//console.log(this.testtestdir)
}
}
this.swarmlabinfonow = false
},
async stopservice() {
this.startservice = false
await this.onAction ('down-item', this.hybridoptions, this.hybridoptions._id)
}, },
loadsuccess(response) { loadsuccess(response) {
var data = response.data.data var data = response.data.data
@ -1140,6 +1329,19 @@ info +=' <b>Click on hyperlink opens Directory in new tab</b></p>'
}; };
</script> </script>
<style> <style>
#idvuetablekeygusersservices tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
#idvuetablekeygusersservices tr td {
color: #2185d0;
cursor: pointer;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

37
src/components/mynetwork/availablepoc.vue

@ -17,7 +17,7 @@
</v-wait> </v-wait>
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>Swarmlab <span class="text-info">Proof_of_concept</span> Deploy - Local </b> <b><span class="text-muted">Swarmlab</span> <span class="text-info">Proof_of_concept</span> <span class="text-muted"> - Deploy@Home</span> </b>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeypoc"
ref="vuetable" ref="vuetable"
:key="vuetablekeypoc" :key="vuetablekeypoc"
:api-url='apiurl' :api-url='apiurl'
@ -113,7 +113,7 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
class="ti-thumb-up btn btn-info btn-sm" class="ti-thumb-up btn btn-sm"
title="Stop Lab_Instance" title="Stop Lab_Instance"
round round
@click="onAction('down-item', props.rowData, props.rowIndex)" @click="onAction('down-item', props.rowData, props.rowIndex)"
@ -121,7 +121,7 @@
</button> </button>
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
class="ti-thumb-down btn btn-secondary btn-sm" class="ti-thumb-down btn btn-sm"
title="Start Lab_Instance" title="Start Lab_Instance"
round round
@click="onAction('run-item', props.rowData, props.rowIndex)" @click="onAction('run-item', props.rowData, props.rowIndex)"
@ -133,7 +133,7 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex" v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
class="ti-trash btn btn-info btn-sm" class="ti-trash btn btn-sm text-warning"
title="Remove Lab_Instance" title="Remove Lab_Instance"
@click="onAction('delete-item', props.rowData, props.rowIndex)" @click="onAction('delete-item', props.rowData, props.rowIndex)"
round round
@ -145,13 +145,13 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="checkactionrowindex(props.rowData,props.rowIndex)" v-if="checkactionrowindex(props.rowData,props.rowIndex)"
class="ti-cloud-down btn btn-outline-secondary btn-sm" class="ti-cloud-down btn btn-sm"
title="Download Lab_Instance" title="Download Lab_Instance"
round round
@click="onAction('run-install', props.rowData, props.rowIndex)"> @click="onAction('run-install', props.rowData, props.rowIndex)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="Lab_Instance Info" title="Lab_Instance Info"
round round
@click="onAction('view-item', props.rowData, props.rowIndex)"> @click="onAction('view-item', props.rowData, props.rowIndex)">
@ -233,12 +233,19 @@ export default {
vuetablekeypoc:0, vuetablekeypoc:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{
name: '__slot:actionslocal', // <----
title: '',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: 'swarmlabname', name: 'swarmlabname',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>PoC',
sortField: 'swarmlabname', sortField: 'swarmlabname',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3 text-muted',
width: '68%' width: '68%'
}, },
{ {
@ -269,13 +276,6 @@ export default {
dataClass: 'center aligned', dataClass: 'center aligned',
width: '5%' width: '5%'
}, },
{
name: '__slot:actionslocal', // <----
title: 'Installed',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Download', title: 'Download',
@ -620,6 +620,11 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeypoc tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

253
src/components/mynetwork/availableservices.vue

@ -17,7 +17,7 @@
</v-wait> </v-wait>
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>Swarmlab <span class="text-info">LabRoom</span> Deploy - Local </b> <b><span class="text-muted">Swarmlab</span> <span class="text-info">LabRoom</span> - <span class="text-muted"> Deploy@Home</span> </b>
</div> </div>
</div> </div>
@ -62,21 +62,37 @@
</b-col> </b-col>
</div> </div>
<div class="input-group-append" <div class="input-group-append input-group-sm sm-3"
v-if="viewhybridoptions" v-if="viewhybridoptions"
> >
<button class="btn btn-outline-secondary" <button class="btn btn-success btn-sm"
v-if="startservice"
round round
type="button" 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"
disabled
v-model="up_name"
> >
Instances </button>
<input type="text" <input type="text"
class="form-control" class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm"
placeholder="Number of Instances" placeholder="Number of Instances"
v-model="hybridoptions.size" v-model="hybridoptions.size"
> >
<button class="btn btn-outline-secondary" <!--
<button class="btn btn-outline-secondary btn-sm"
round round
type="button" type="button"
> >
@ -87,16 +103,19 @@
placeholder="Expose Port" placeholder="Expose Port"
v-model="hybridoptions.port" v-model="hybridoptions.port"
> >
<button class="btn btn-outline-success" -->
<button
class=" btn btn-outline-danger btn-sm"
title="Remove Lab_Instance"
@click="onAction('rm-install', hybridoptions, hybridoptions._id)"
round round
type="button"
@click="setHybridoptions"
> >
Up</button> Remove
</button>
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeya"
ref="vuetable" ref="vuetable"
:key="vuetablekeya" :key="vuetablekeya"
:api-url='apiurl' :api-url='apiurl'
@ -114,6 +133,7 @@
wrapper-class="vuetable-wrapper" wrapper-class="vuetable-wrapper"
loading-class="loading" loading-class="loading"
detail-row-id="id" detail-row-id="id"
@vuetable:row-clicked="rowClicked"
@vuetable:pagination-data="onPaginationData" @vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess" @vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError" @vuetable:load-error="onLoadError"
@ -122,50 +142,71 @@
<div slot="actionsenabled" slot-scope="props"> <div slot="actionsenabled" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<!--
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
class="ti-thumb-up btn btn-info btn-sm" class="ti-arrow-up btn text-success btn-sm "
title="Stop Lab_Instance" title="Stop Lab_Instance"
round round
@click="onAction('down-item', props.rowData, props.rowIndex)" @click="onAction('down-item', props.rowData, props.rowIndex)"
> >
</button> </button>
-->
<button
class=" btn btn-sm text-muted"
round
v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowData._id"
>
<span class="text-success">Running...</span>
</button>
<button
v-else
class=" btn btn-sm text-muted"
round
><span class="text-success">&nbsp;</span></button>
<!--
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
class="ti-thumb-down btn btn-secondary btn-sm" class="ti-arrow-down btn btn-sm"
title="Start Lab_Instance" title="Start Lab_Instance"
round round
@click="onAction('run-item', props.rowData, props.rowIndex)" @click="onAction('run-item', props.rowData, props.rowIndex)"
> >
</button> </button>
-->
</div> </div>
</div> </div>
<div slot="actionslocal" slot-scope="props"> <div slot="actionslocal" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<!--
v-if="testactionrowindex[props.rowData._id] == props.rowData._id && testactionrowindex[props.rowData.swarmlabname] != props.rowData._id"
-->
<button <button
v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex" v-if="testactionrowindex[props.rowData._id] == props.rowData._id "
class="ti-trash btn btn-info btn-sm" class="ti-check btn btn-sm text-success"
title="Remove Lab_Instance" title="Remove Lab_Instance"
@click="onAction('rm-install', props.rowData, props.rowIndex)"
round round
> >
</button> </button>
<!--
@click="onAction('rm-install', props.rowData, props.rowIndex)"
-->
</div> </div>
</div> </div>
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="checkactionrowindex(props.rowData,props.rowIndex)" v-if="checkactionrowindex(props.rowData,props.rowData._id)"
class="ti-cloud-down btn btn-outline-secondary btn-sm" class="ti-cloud-down btn btn-sm"
title="Download Lab_Instance" title="Download Lab_Instance"
round round
@click="onAction('run-install', props.rowData, props.rowIndex)"> @click="onAction('run-install', props.rowData, props.rowData._id)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="Lab_Instance Info" title="Lab_Instance Info"
round round
@click="onAction('view-item', props.rowData, props.rowIndex)"> @click="onAction('view-item', props.row, props.row._id)">
</button> </button>
</div> </div>
</div> </div>
@ -210,6 +251,10 @@ export default {
}, },
data() { data() {
return{ return{
startservice: true,
swarmlabinfonow:false,
up_name:'',
removelabroom: false,
testactionrowindex:[], // downloaded used in installed testactionrowindex:[], // downloaded used in installed
teststatusindex:[], // status stop run used in status teststatusindex:[], // status stop run used in status
hybridoptions: { hybridoptions: {
@ -244,13 +289,26 @@ export default {
vuetablekeya:0, vuetablekeya:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{
name: '__slot:actionslocal', // <----
title: '',
titleClass: 'center',
dataClass: 'center alignedi text-success',
width: '5%'
},
{ {
name: 'swarmlabname', name: 'swarmlabname',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Labroom',
sortField: 'swarmlabname', sortField: 'swarmlabname',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3 text-muted',
width: '68%' width: '68%',
callback: function(value) {
var tmp = value.split('-')
var v = tmp[1]
return v
}
}, },
{ {
name: '_id', name: '_id',
@ -280,13 +338,6 @@ export default {
dataClass: 'center aligned', dataClass: 'center aligned',
width: '5%' width: '5%'
}, },
{
name: '__slot:actionslocal', // <----
title: 'Installed',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Download', title: 'Download',
@ -438,15 +489,17 @@ export default {
}, },
async onAction (action, data, index) { async onAction (action, data, index) {
if(action == 'view-item' ){ if(action == 'view-item' ){
this.swarmlabinfonow = true
this.swarmlab=data this.swarmlab=data
var container=this.swarmlab var container=this.swarmlab
/*
var res = await store.dispatch('pipelineLLO/getswarmlabinfo', container.swarmlabname) var res = await store.dispatch('pipelineLLO/getswarmlabinfo', container.swarmlabname)
var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2) var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, 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>' var swarmlab1info=`https://git.swarmlab.io:3000/swarmlab/${container.swarmlabname}`
if(res.data.error25=="ok"){ var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1info+'</code></pre></p></div>'
var winfo='' var winfo=''
var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)' var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
this.$swal({ this.$swal({
@ -459,13 +512,13 @@ export default {
reverseButtons: true, reverseButtons: true,
focusCancel: true focusCancel: true
}) })
}
}else if(action == 'delete-item' ){ }else if(action == 'delete-item' ){
this.$swal({ this.$swal({
type: 'info', type: 'info',
html: info+winfo, html: info+winfo,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -479,6 +532,31 @@ export default {
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable() this.refreshVuetable()
}else if(action == 'rm-install' ){ }else if(action == 'rm-install' ){
var info = `<h5> Labroom: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
info += "<br>Remove containers, networks, images, and volumes"
this.$swal({
type: 'info',
html: info,
icon: 'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: true,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
}).then((result)=> {
if (result.isConfirmed) {
(async () => {
console.log('remove')
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.$wait.start('myRunInstancetutor'); this.$wait.start('myRunInstancetutor');
var res = await store.dispatch('pipelineLLO/rmswarmlablocal', this.hybridoptions.swarmlabname) var res = await store.dispatch('pipelineLLO/rmswarmlablocal', this.hybridoptions.swarmlabname)
@ -520,7 +598,11 @@ export default {
Vue.delete(this.testactionrowindex, data.swarmlabname) Vue.delete(this.testactionrowindex, data.swarmlabname)
this.refreshVuetable() this.refreshVuetable()
this.$root.$emit('hybrid_refresh_info_deploy_local') this.$root.$emit('hybrid_refresh_info_deploy_local')
})();
}
})
}else if(action == 'run-install' ){ }else if(action == 'run-install' ){
this.swarmlabinfonow = true
this.$wait.start('myRunInstancetutor'); this.$wait.start('myRunInstancetutor');
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
@ -551,14 +633,16 @@ export default {
Vue.nextTick( () => this.$refs.vuetable.refresh()) Vue.nextTick( () => this.$refs.vuetable.refresh())
*/ */
//Vue.nextTick( () => this.$refs.vuetable.refresh()) //Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable() // this.refreshVuetable()
}else if(action == 'down-item' ){ }else if(action == 'down-item' ){
this.hybridoptions.swarmlabname = data.swarmlabname this.hybridoptions.swarmlabname = data.swarmlabname
this.hybridoptions.index = index this.hybridoptions.index = index
var info = "Stop and remove containers, networks, images, and volumes" var info = `<h5> Labroom: <b> ${this.hybridoptions.swarmlabname} </b> </h5>`
info += "<br>Stop and remove containers, networks, images, and volumes"
this.$swal({ this.$swal({
type: 'info', type: 'info',
html: info, html: info,
icon: 'info',
showCloseButton: true, showCloseButton: true,
showLoaderOnConfirm: false, showLoaderOnConfirm: false,
allowOutsideClick: false, allowOutsideClick: false,
@ -586,10 +670,10 @@ export default {
this.$root.$emit('hybrid_stop_instance', value) this.$root.$emit('hybrid_stop_instance', value)
Vue.delete(this.testactionrowindex, this.hybridoptions.index) Vue.delete(this.testactionrowindex, this.hybridoptions.index)
Vue.nextTick( () => this.$refs.vuetable.refresh()) Vue.nextTick( () => this.$refs.vuetable.refresh())
this.refreshVuetable()
}else { }else {
console.log('no') console.log('no')
} }
this.refreshVuetable()
}, },
async setHybridoptions(){ async setHybridoptions(){
//console.log(JSON.stringify(this.hybridoptions)) //console.log(JSON.stringify(this.hybridoptions))
@ -617,12 +701,85 @@ export default {
playbookinfo(value) { playbookinfo(value) {
return this.playbookInfo=value return this.playbookInfo=value
}, },
rowClicked(row, event) { async rowClicked(row, event) {
return { console.log(row)
html: true, console.log(this.testactionrowindex)
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) }, if(this.testactionrowindex[row._id] == row._id && this.testactionrowindex[row.swarmlabname] != row._id){
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' } if(!this.swarmlabinfonow){
this.up_name = row.swarmlabname
this.hybridoptions = row
this.startservice = true
console.log('start '+row.swarmlabname)
await this.onAction ('run-item', row, row._id)
this.swarmlabinfonow = false
}
} else if(this.testactionrowindex[row._id] == row._id && this.testactionrowindex[row.swarmlabname] == row._id){
this.up_name = row.swarmlabname
console.log('stop '+row.swarmlabname)
this.viewhybridoptions = false
this.startservice = false
this.hybridoptions = row
await this.onAction ('run-item', row, row._id)
//await this.onAction ('down-item', row, row._id)
} else if(this.testactionrowindex[row._id] != row._id && this.testactionrowindex[row.swarmlabname] != row._id){
console.log('info')
// -----------------------------
// check installed download it
// -----------------------------
if(!this.swarmlabinfonow){
var info = `<h5> Labroom <b> ${row.swarmlabname} </b> is Not Installed </h5> <br>
<b>Use </b>
<br>
<br>
<div class="row" >
<div class="col-1" >
<button
class="ti-cloud-down btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-4" >
To Install
</div>
<div class="col-1" >
<button
class="ti-info btn btn-outline-secondary btn-sm"
round
>
</button>
</div>
<div class="col-6" >
For More Information
</div>
</div>
`
this.$swal({
type: 'info',
html: info,
icon:'info',
showCloseButton: true,
showLoaderOnConfirm: false,
allowOutsideClick: false,
cancelButtonText: 'No, cancel!',
showCancelButton: false,
showLoaderOnConfirm: false,
reverseButtons: true,
focusCancel: false,
confirmButtonText: 'Yes!'
})
//console.log('not installed ' + row.swarmlabname)
//console.log(this.testtestdir)
} }
}
this.swarmlabinfonow = false
},
async stopservice() {
this.startservice = false
await this.onAction ('down-item', this.hybridoptions, this.hybridoptions._id)
}, },
loadsuccess(response) { loadsuccess(response) {
var data = response.data.data var data = response.data.data
@ -659,6 +816,18 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeya tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
#idvuetablekeya tr td {
color: #2185d0;
cursor: pointer;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

36
src/components/mynetwork/availablestorage.vue

@ -17,7 +17,7 @@
</v-wait> </v-wait>
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>Swarmlab <span class="text-info">Storage</span> Deploy - Local </b> <b><span class="text-muted">Swarmlab </span> <span class="text-info">Storage</span> - <span class="text-muted">Deploy@Home </span></b>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeystorage"
ref="vuetable" ref="vuetable"
:key="vuetablekeystorage" :key="vuetablekeystorage"
:api-url='apiurl' :api-url='apiurl'
@ -113,7 +113,7 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
class="ti-thumb-up btn btn-info btn-sm" class="ti-thumb-up btn btn-sm"
title="Stop Lab_Instance" title="Stop Lab_Instance"
round round
@click="onAction('down-item', props.rowData, props.rowIndex)" @click="onAction('down-item', props.rowData, props.rowIndex)"
@ -121,7 +121,7 @@
</button> </button>
<button <button
v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex" v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
class="ti-thumb-down btn btn-secondary btn-sm" class="ti-thumb-down btn btn-sm"
title="Start Lab_Instance" title="Start Lab_Instance"
round round
@click="onAction('run-item', props.rowData, props.rowIndex)" @click="onAction('run-item', props.rowData, props.rowIndex)"
@ -133,7 +133,7 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex" v-if="testactionrowindex[props.rowIndex] == props.rowIndex && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex"
class="ti-trash btn btn-info btn-sm" class="ti-trash btn btn-sm text-warning"
title="Remove Lab_Instance" title="Remove Lab_Instance"
@click="onAction('delete-item', props.rowData, props.rowIndex)" @click="onAction('delete-item', props.rowData, props.rowIndex)"
round round
@ -145,13 +145,13 @@
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
v-if="checkactionrowindex(props.rowData,props.rowIndex)" v-if="checkactionrowindex(props.rowData,props.rowIndex)"
class="ti-cloud-down btn btn-outline-secondary btn-sm" class="ti-cloud-down btn btn-sm"
title="Download Lab_Instance" title="Download Lab_Instance"
round round
@click="onAction('run-install', props.rowData, props.rowIndex)"> @click="onAction('run-install', props.rowData, props.rowIndex)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="Lab_Instance Info" title="Lab_Instance Info"
round round
@click="onAction('view-item', props.rowData, props.rowIndex)"> @click="onAction('view-item', props.rowData, props.rowIndex)">
@ -233,12 +233,19 @@ export default {
vuetablekeystorage:0, vuetablekeystorage:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{
name: '__slot:actionslocal', // <----
title: '',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: 'swarmlabname', name: 'swarmlabname',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Name',
sortField: 'swarmlabname', sortField: 'swarmlabname',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3 text-muted',
width: '68%' width: '68%'
}, },
{ {
@ -269,13 +276,6 @@ export default {
dataClass: 'center aligned', dataClass: 'center aligned',
width: '5%' width: '5%'
}, },
{
name: '__slot:actionslocal', // <----
title: 'Installed',
titleClass: 'center',
dataClass: 'center aligned',
width: '5%'
},
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Download', title: 'Download',
@ -677,6 +677,12 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeystorage tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

11
src/components/mynetwork/buildermyservices.vue

@ -61,7 +61,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeygmybuildservice123"
ref="vuetable" ref="vuetable"
:key="vuetablekeygmybuildservice123" :key="vuetablekeygmybuildservice123"
:api-url='apiurl' :api-url='apiurl'
@ -88,13 +88,13 @@
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
class="ti-pencil btn btn-outline-secondary btn-sm" class="ti-pencil btn btn-sm"
title="Upload MicroService" title="Upload MicroService"
round round
@click="onAction('upload-item', props.rowData, props.rowData._id)"> @click="onAction('upload-item', props.rowData, props.rowData._id)">
</button> </button>
<button <button
class="ti-trash btn btn-outline-warning btn-sm" class="ti-trash btn btn-sm text-warning"
title="MicroService Info" title="MicroService Info"
round round
@click="onAction('rm-item', props.rowData, props.rowData._id)"> @click="onAction('rm-item', props.rowData, props.rowData._id)">
@ -423,6 +423,11 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeygmybuildservice123 tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

18
src/components/mynetwork/builderservices.vue

@ -64,7 +64,7 @@
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeygmybuildservice1"
ref="vuetable" ref="vuetable"
:key="vuetablekeygmybuildservice1" :key="vuetablekeygmybuildservice1"
:api-url='apiurl' :api-url='apiurl'
@ -91,13 +91,13 @@
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<div class="d-flex justify-content-center"> <div class="d-flex justify-content-center">
<button <button
class="ti-cloud-up btn btn-outline-secondary btn-sm" class="ti-cloud-up btn btn-sm"
title="Upload MicroService" title="Upload MicroService"
round round
@click="onAction('upload-item', props.rowData, props.rowData._id)"> @click="onAction('upload-item', props.rowData, props.rowData._id)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
title="MicroService Info" title="MicroService Info"
round round
@click="onAction('view-item', props.rowData, props.rowData._id)"> @click="onAction('view-item', props.rowData, props.rowData._id)">
@ -197,10 +197,10 @@ export default {
fields: [ fields: [
{ {
name: 'swarmlabname', name: 'swarmlabname',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Base Image',
sortField: 'swarmlabname', sortField: 'swarmlabname',
visible:true, visible:true,
dataClass: 'left aligned col-3', dataClass: 'left aligned col-3 text-muted',
width: '68%' width: '68%'
}, },
{ {
@ -392,6 +392,14 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeygmybuildservice1 tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

3
src/components/mynetwork/customservices.vue

@ -692,7 +692,8 @@ export default {
A base image is the image that is used to create all of your container images. <br>` A base image is the image that is used to create all of your container images. <br>`
}else if(value == "form_gitrepo"){ }else if(value == "form_gitrepo"){
info='<h5 class="text-info">Git-repo</h5>' info='<h5 class="text-info">Git-repo</h5>'
infotxt += `<b>A string that contains a valid URL</b> URL, is infotxt += `<b>The git repository associated with your project.</b><br> <br>
A string that contains a valid URL
` `
}else if(value == "form_rclocal"){ }else if(value == "form_rclocal"){
info='<h5 class="text-info">rc.local</h5>' info='<h5 class="text-info">rc.local</h5>'

89
src/components/mynetwork/dockerservices.vue

@ -49,7 +49,7 @@
</div> </div>
</div> </div>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeyb"
ref="vuetable" ref="vuetable"
:key="vuetablekeyb" :key="vuetablekeyb"
:api-url='apiurl' :api-url='apiurl'
@ -67,13 +67,20 @@
wrapper-class="vuetable-wrapper" wrapper-class="vuetable-wrapper"
loading-class="loading" loading-class="loading"
detail-row-id="id" detail-row-id="id"
@vuetable:row-class="onRowClass"
@vuetable:row-clicked="rowClicked"
@vuetable:pagination-data="onPaginationData" @vuetable:pagination-data="onPaginationData"
@vuetable:load-success="loadsuccess" @vuetable:load-success="loadsuccess"
@vuetable:load-error="onLoadError" @vuetable:load-error="onLoadError"
:css="css.table" :css="css.table"
> >
<!--
@vuetable:cell-clicked="rowClicked"
@vuetable:row-dblclicked="rowClicked"
-->
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<!--
<button <button
v-if="actionrowindex == props.rowIndex" v-if="actionrowindex == props.rowIndex"
class="ti-more-alt btn btn-secondary btn-sm" class="ti-more-alt btn btn-secondary btn-sm"
@ -86,8 +93,10 @@
round round
@click="onAction('run-more', props.rowData, props.rowIndex)"> @click="onAction('run-more', props.rowData, props.rowIndex)">
</button> </button>
-->
<button <button
class="ti-info btn btn-outline-info btn-sm" v-if="rowvactionrowindex == props.rowData.Names"
class="ti-info btn btn-info btn-sm"
round round
@click="onAction('view-item', props.rowData, props.rowIndex)"> @click="onAction('view-item', props.rowData, props.rowIndex)">
</button> </button>
@ -132,7 +141,9 @@ export default {
}, },
data() { data() {
return{ return{
isActive: false,
actionrowindex:'', actionrowindex:'',
rowvactionrowindex:'',
playbookInfo: {}, playbookInfo: {},
token: '', token: '',
playbook: { playbook: {
@ -153,35 +164,35 @@ export default {
], ],
showModal: false, showModal: false,
visibility: [], visibility: [],
active:false,
vuetablekeyb:0, vuetablekeyb:0,
fielddata:{}, fielddata:{},
fields: [ fields: [
{ {
name: 'Names', name: 'Names',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Instance',
sortField: 'Names', sortField: 'Names',
visible:true, visible:true,
dataClass: 'text-left text-wrap text-break break-word', dataClass: 'text-left text-wrap text-break break-word text-info',
width: '50%' width: '50%',
callback: function(value) {
var v = `<button type="button" class="btn btn-link text-muted"
>${value}</button>`
console.log(this)
return v
}
}, },
{ {
name: 'Image', name: 'Image',
title: '<span class="orange"></span>Image', title: '<span class="orange"></span>Image',
//sortField: 'Image', //sortField: 'Image',
visible:true, visible:true,
dataClass: 'left aligned w-25', dataClass: 'left aligned text-muted w-25',
width: '15%', width: '25%',
formatter (value) { callback: function(value) {
const result = /^ondemand_playground/.test(value); var v = `<button type="button" class="btn btn-link text-muted">${value}</button>`
if (result) {
var v = '<p class="text-warning">Playground</p>'
return v
}else{
var v = '<p class="text-info">Lab</p>'
return v return v
} }
}
}, },
{ {
@ -194,8 +205,13 @@ export default {
title: '<span class="orange"></span>Status', title: '<span class="orange"></span>Status',
sortField: 'Status', sortField: 'Status',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned text-muted',
visible:true, visible:true,
width: '10%' width: '35%',
callback: function(value) {
var v = `<button type="button" class="btn btn-link text-muted">${value}</button>`
return v
}
}, },
{ {
name: 'ID', name: 'ID',
@ -203,20 +219,20 @@ export default {
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-25', dataClass: 'left aligned w-25',
visible:false, visible:false,
width: '15%' width: '20%'
}, },
{ {
name: '__slot:actions', // <---- name: '__slot:actions', // <----
title: 'Actions', title: 'Info',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'center aligned', dataClass: 'center aligned',
width: '10%' width: '5%'
} }
], ],
apiurl:ApiConfig.url_80+"/dockerservices", apiurl:ApiConfig.url_80+"/dockerservices",
//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices", //apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
css: CssConfig, css: CssConfig,
perpage: 5, perpage: 10,
searchFor: '', searchFor: '',
sortOrder: [{ sortOrder: [{
field: 'Names', field: 'Names',
@ -331,7 +347,7 @@ export default {
async onAction (action, data, index) { async onAction (action, data, index) {
this.actionrowindex = index this.actionrowindex = index
this.$root.$emit('hybrid_show_info',data) this.$root.$emit('hybrid_show_info',data)
console.log('index '+JSON.stringify(data)) //console.log('index '+JSON.stringify(data))
//console.log('index '+this.actionrowindex) //console.log('index '+this.actionrowindex)
if(action == 'view-item' ){ if(action == 'view-item' ){
var log = await store.dispatch("pipelineLLO/hybrid_inspectcontainer",{ var log = await store.dispatch("pipelineLLO/hybrid_inspectcontainer",{
@ -386,11 +402,25 @@ export default {
return this.playbookInfo=value return this.playbookInfo=value
}, },
rowClicked(row, event) { rowClicked(row, event) {
console.log('click')
console.log(row)
console.log(event)
//this.actionrowindex = index
this.$root.$emit('hybrid_show_info',row)
this.rowvactionrowindex = row.Names
/*
return { return {
html: true, html: true,
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) }, title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' } content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
} }
*/
},
onRowClass (dataItem, index) {
console.log('-------')
console.log(dataItem)
console.log(index)
return (dataItem.isOverdue) ? 'color-red' : 'color-white'
}, },
loadsuccess(response) { loadsuccess(response) {
var data = response.data.data var data = response.data.data
@ -427,6 +457,21 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeyb tr:hover {
color: #2185d0;
cursor: pointer;
}
#idvuetablekeyb tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

194
src/components/mynetwork/images.vue

@ -1,6 +1,9 @@
<template> <template>
<card class="card-user" style="max-height:100%"> <card class="card-user" style="max-height:100%">
<div class="author">
<img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
</div>
<v-wait for="myRunInstancedockerimages"> <v-wait for="myRunInstancedockerimages">
<template slot="waiting"> <template slot="waiting">
@ -11,46 +14,95 @@
</template> </template>
</v-wait> </v-wait>
<!--
--------------------------------------------------------------------------
--------------------------------------------------------------------------
---------------- MENOU BEGIN ------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
-->
<b-container fluid class="bv-example-row">
<div class="col-12 text-center">
<b> <span class="text-muted">View and Manage your</span> <span class="text-info">Local System</span></b>
</div>
</b-container>
<b-container fluid class="bv-example-row"> <b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<div class="row">
<div class="col-12">
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
<div class="input-group-append"> <div class="input-group-prepend">
<button <button
class="btn btn-outline-success" class="ti-settings btn btn-outline-success"
round round
type="button" type="button"
@click="setRefresh"> > </button>&nbsp;
Refresh images</button>
</div> </div>
<div class="input-group-prepend">
<input type="text"
class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
placeholder="Search by Name"
v-model="searchFor"
@keyup.enter="setFilter"
>
<div class="input-group-append">
<button <button
class="btn btn-outline-primary" class="btn btn-outline-primary"
round round
type="button" type="button"
@click="setFilter"> @click="setview"
Go</button> > Networks </button>
</div> <button
class="btn btn-outline-secondary"
<div class="input-group-append">
<button class="btn btn-outline-secondary"
round round
type="button" type="button"
@click="resetFilter"> > Images </button>
Reset</button> </div>
</div> </div>
<div class="input-group-append"> </div> <!-- col -->
<div class="mx-auto" style="width: 85px;"> </div> <!-- row -->
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<!--
--------------------------------------------------------------------------
--------------------------------------------------------------------------
---------------- MENOU END ------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
-->
<b-container fluid class="bv-example-row">
<div class="col-12 text-center">
<b> <span class="text-info">Images, Containers and Volumes</span></b>
</div> </div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<div class="input-group input-group-sm sm-3">
<div class="input-group-append">
<button <button
class="btn btn-secondary" class="btn btn-secondary"
round round
@ -79,9 +131,67 @@
</div> </div>
</div> </div>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<div class="input-group input-group-sm sm-3">
<div class="input-group-append">
<button
class="btn btn-outline-success"
round
type="button"
@click="setRefresh">
Refresh images</button>
</div>
<input type="text"
class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
placeholder="Search by Name"
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>
</b-container>
<b-container fluid class="bv-example-row">
<div class="input-group input-group-sm sm-3">
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable id="idvuetablekeybimages"
ref="vuetable" ref="vuetable"
:key="vuetablekeybimages" :key="vuetablekeybimages"
:api-url='apiurl' :api-url='apiurl'
@ -107,12 +217,12 @@
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<button <button
class="ti-trash btn btn-outline-secondary btn-sm" class="ti-trash btn btn-sm"
round round
@click="onAction('rm-item', props.rowData, props.rowIndex)"> @click="onAction('rm-item', props.rowData, props.rowIndex)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
round round
@click="onAction('info-item', props.rowData, props.rowIndex)"> @click="onAction('info-item', props.rowData, props.rowIndex)">
</button> </button>
@ -133,6 +243,8 @@
</div> </div>
</div> </div>
</b-container> </b-container>
</card> </card>
</template> </template>
<script> <script>
@ -188,16 +300,16 @@ export default {
name: 'ID', name: 'ID',
title: '<span class="orange"></span>Image id', title: '<span class="orange"></span>Image id',
//sortField: 'ID', //sortField: 'ID',
visible:true, visible:false,
dataClass: 'text-left text-wrap text-break break-word', dataClass: 'text-left text-wrap text-break break-word',
width: '15%' width: '15%'
}, },
{ {
name: 'Repository', name: 'Repository',
title: '<span class="orange"></span>Repository', title: '<span class="orange"></span>Images',
sortField: 'Repository', sortField: 'Image',
visible:true, visible:true,
dataClass: 'left aligned w-25', dataClass: 'left aligned w-25 text-muted',
width: '30%' width: '30%'
}, },
@ -205,7 +317,7 @@ export default {
name: 'Tag', name: 'Tag',
//sortField: 'Tag', //sortField: 'Tag',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-25', dataClass: 'left aligned w-15 text-muted',
visible:true, visible:true,
width: '5%' width: '5%'
}, },
@ -213,7 +325,7 @@ export default {
name: 'CreatedSince', name: 'CreatedSince',
sortField: 'CreatedSince', sortField: 'CreatedSince',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-20', dataClass: 'left aligned w-20 text-muted',
visible:true, visible:true,
width: '10%' width: '10%'
}, },
@ -226,6 +338,7 @@ export default {
name: 'Size', name: 'Size',
title: '<span class="orange"></span>Size', title: '<span class="orange"></span>Size',
sortField: 'Size', sortField: 'Size',
dataClass: 'left aligned text-muted',
titleClass: 'center aligned', titleClass: 'center aligned',
visible:true, visible:true,
width: '5%' width: '5%'
@ -235,7 +348,7 @@ export default {
title: 'Actions', title: 'Actions',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'center aligned', dataClass: 'center aligned',
width: '10%' width: '8%'
} }
], ],
apiurl:ApiConfig.url_80+"/dockerimages", apiurl:ApiConfig.url_80+"/dockerimages",
@ -350,6 +463,9 @@ export default {
onChangePage (page) { onChangePage (page) {
this.$refs.vuetable.changePage(page) this.$refs.vuetable.changePage(page)
}, },
setview () {
this.$root.$emit('hybrid_show_instance_images','networks')
},
editRow(rowData) { editRow(rowData) {
alert("You clicked edit on"+ JSON.stringify(rowData)); alert("You clicked edit on"+ JSON.stringify(rowData));
}, },
@ -584,6 +700,16 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeybimages tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

137
src/components/mynetwork/mytable.vue

@ -16,7 +16,7 @@
<b-container fluid class="bv-example-row"> <b-container fluid class="bv-example-row">
<div class="row text-center"> <div class="row text-center">
<div class="col-12"> <div class="col-12">
<b>View and Manage your <span class="text-info">Running Instances</span></b> <b><span class="text-muted">View and Manage your</span> <span class="text-info">Running Instances</span></b>
</div> </div>
</div> </div>
@ -79,6 +79,14 @@
disabled disabled
> >
Connect</button> Connect</button>
<button
v-if="webinterfacegenericedit && hybridshowdata.Names"
class="btn btn-outline-info"
round
type="button"
@click="onAction('basedireditor')"
>
Editor</button>
<button <button
v-if="hybridshowdata.Names" v-if="hybridshowdata.Names"
class="btn btn-outline-danger" class="btn btn-outline-danger"
@ -97,30 +105,13 @@
stop</button> stop</button>
</div> </div>
<div class="input-group-append">
<button
v-if="hybridshowdata.Names"
class="btn btn-outline-warning"
round
type="button"
@click="onAction('container-logs')"
>
Logs</button>
<button
v-else
class="btn btn-outline-secondary"
round
type="button"
disabled
>
Logs</button>
</div>
</div> </div>
</div> <!-- col --> </div> <!-- col -->
<div class="col-1"> <div class="col-1">
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
<div class="input-group-prepend float-center"> <div class="input-group-prepend float-center">
<!--
<button <button
v-if="webinterfacegenericedit && hybridshowdata.Names" v-if="webinterfacegenericedit && hybridshowdata.Names"
class="btn btn-outline-success" class="btn btn-outline-success"
@ -129,6 +120,7 @@
@click="onAction('basedireditor')" @click="onAction('basedireditor')"
> >
Editor</button> Editor</button>
-->
</div> </div>
</div> </div>
</div> <!-- col --> </div> <!-- col -->
@ -138,7 +130,21 @@
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
<div class="input-group-prepend float-right"> <div class="input-group-prepend float-right">
<button <button
v-if="hybridshowdata.Names" v-if="actionrowindex && hybridshowdata.Names"
class="ti-more-alt btn btn-secondary btn-sm"
title="More Options..."
round
@click="runmore('off')">
</button>
<button
v-if="actionrowindexselect && hybridshowdata.Names"
class="ti-more btn btn-outline-info btn-sm"
round
title="More Options..."
@click="runmore('on')">
</button>
<button
v-if="actionrowindex && hybridshowdata.Names"
class="btn btn-outline-info" class="btn btn-outline-info"
round round
type="button" type="button"
@ -148,7 +154,7 @@
</div> </div>
<div class="input-group-prepend float-right"> <div class="input-group-prepend float-right">
<button <button
v-if="hybridshowdata.Names" v-if="actionrowindex && hybridshowdata.Names"
class="btn btn-outline-warning" class="btn btn-outline-warning"
round round
type="button" type="button"
@ -158,7 +164,7 @@
</div> </div>
<div class="input-group-prepend float-right"> <div class="input-group-prepend float-right">
<button <button
v-if="hybridshowdata.Names" v-if="actionrowindex && hybridshowdata.Names"
class="btn btn-outline-success" class="btn btn-outline-success"
round round
type="button" type="button"
@ -166,6 +172,24 @@
> >
BrowseBackups</button> BrowseBackups</button>
</div> </div>
<div class="input-group-append">
<button
v-if="!actionrowindexconsole && actionrowindex && hybridshowdata.Names"
class="btn btn-outline-warning"
round
type="button"
@click="onAction('container-logs')"
>
Logs</button>
<button
v-if="actionrowindexconsole && actionrowindex && hybridshowdata.Names"
class="btn btn-warning"
round
type="button"
@click="onAction('container-logsclose')"
>
Logs</button>
</div>
</div> </div>
</div> <!-- col --> </div> <!-- col -->
@ -173,19 +197,24 @@
</b-container> </b-container>
<b-container fluid> <b-container fluid>
<div class="row" > <div class="row" >
<div class="col-2 text-info" > <div class="col-2 text-info" >
ID ID
</div> </div>
<div class="col-3 text-secondary" > <div class="col-3 text-muted" >
{{ hybridshowdata.ID }} {{ hybridshowdata.ID }}
</div> </div>
<div class="col-2 text-info" > <div class="col-2 text-info" >
Image Image
</div> </div>
<div class="col-4 text-secondary" > <div class="col-4 text-muted" >
{{ hybridshowdata.Image }} {{ hybridshowdata.Image }}
</div> </div>
</div> <!-- row --> </div> <!-- row -->
@ -193,13 +222,13 @@
<div class="col-2 text-info" > <div class="col-2 text-info" >
Names Names
</div> </div>
<div class="col-3 text-secondary" > <div class="col-3 text-muted" >
{{ hybridshowdata.Names }} {{ hybridshowdata.Names }}
</div> </div>
<div class="col-2 text-info" > <div class="col-2 text-info" >
RunningFor RunningFor
</div> </div>
<div class="col-4 text-secondary" > <div class="col-4 text-muted" >
{{ hybridshowdata.RunningFor }} {{ hybridshowdata.RunningFor }}
</div> </div>
</div> <!-- row --> </div> <!-- row -->
@ -208,23 +237,25 @@
<div class="col-2 text-info" > <div class="col-2 text-info" >
Status Status
</div> </div>
<div class="col-3 text-secondary" > <div class="col-3 text-muted" >
{{ hybridshowdata.Status }} {{ hybridshowdata.Status }}
</div> </div>
<div class="col-2 text-info" > <div class="col-2 text-info" >
CreatedAt CreatedAt
</div> </div>
<div class="col-4 text-secondary" > <div class="col-4 text-muted" >
{{ hybridshowdata.CreatedAt }} {{ hybridshowdata.CreatedAt }}
</div> </div>
</div> <!-- row --> </div> <!-- row -->
<div class="row" > <div class="row" >
<!-- menou networks -->
<div class="col-2 text-info" > <div class="col-2 text-info"
v-if="actionrowindex"
>
<button <button
v-if="hybridshowdata.Networks&&addNetworkMenou==false" v-if="hybridshowdata.Networks&&addNetworkMenou==false"
class="btn btn-outline-info btn-sm" class="btn btn-primary btn-sm"
round round
type="button" type="button"
@click="addNetwork(hybridshowdata,'on')" @click="addNetwork(hybridshowdata,'on')"
@ -239,14 +270,21 @@
> >
Networks</button> Networks</button>
</div> </div>
<div class="col-3 text-secondary" > <div class="col-2 text-info"
v-else
>
Networks
</div>
<!-- menou networks -->
<div class="col-3 text-muted" >
{{ hybridshowdata.Networks }} {{ hybridshowdata.Networks }}
</div> </div>
<div class="col-2 text-info" > <div class="col-2 text-info" >
Ports Ports
</div> </div>
<div class="col-4 text-secondary" > <div class="col-4 text-muted" >
{{ hybridshowdata.Ports }} {{ hybridshowdata.Ports }}
</div> </div>
</div> <!-- row --> </div> <!-- row -->
@ -285,7 +323,7 @@
<div class="row"> <div class="row">
<div class="col-6 text-info"> <div class="col-6 text-info">
<button <button
class="btn btn-outline-warning btn-sm" class="btn btn-warning btn-sm"
round round
type="button" type="button"
@click="updateNetwork(hybridshowdata,'update')" @click="updateNetwork(hybridshowdata,'update')"
@ -331,6 +369,9 @@ export default {
}, },
data() { data() {
return{ return{
actionrowindexconsole: false,
actionrowindex: false,
actionrowindexselect: true,
addNetworkMenou:false, addNetworkMenou:false,
localNetworks:[], localNetworks:[],
selectedNetworks:[], selectedNetworks:[],
@ -388,6 +429,16 @@ export default {
}, },
mounted() { mounted() {
this.$root.$on('hybrid_show_info', (data) => { this.$root.$on('hybrid_show_info', (data) => {
// -------------- new menou
this.actionrowindex = false
this.actionrowindexselect = true
this.addNetworkMenou = false
this.actionrowindexconsole = false
this.$root.$emit('hybrid_show_instance_images','images')
// -------------- new menou
this.webinterface = false this.webinterface = false
this.webinterfacegeneric = false this.webinterfacegeneric = false
this.webinterfacegenericedit = false this.webinterfacegenericedit = false
@ -862,9 +913,14 @@ info += '</p>'
allowOutsideClick: false allowOutsideClick: false
}) })
}else if(action == 'container-logs'){ }else if(action == 'container-logs'){
this.actionrowindexconsole = true
this.$root.$emit('hybrid_show_instance_images','console')
var log = await store.dispatch("pipelineLLO/getlogs",{ var log = await store.dispatch("pipelineLLO/getlogs",{
container:this.hybridshowdata.ID container:this.hybridshowdata.ID
}) })
}else if(action == 'container-logsclose'){
this.actionrowindexconsole = false
this.$root.$emit('hybrid_show_instance_images','images')
}else if(action == 'startwebgeneric'){ }else if(action == 'startwebgeneric'){
var urlgen = this.hybridshowdata.Names.split('_'); var urlgen = this.hybridshowdata.Names.split('_');
//console.log('logs---------- ' + JSON.stringify(this.hybridshowdata)) //console.log('logs---------- ' + JSON.stringify(this.hybridshowdata))
@ -1464,6 +1520,19 @@ info +='This permits the docker user on the local machine to connect to X window
//console.log('socket instance container-stop passed from services '+ this.swarmlabname ) //console.log('socket instance container-stop passed from services '+ this.swarmlabname )
} }
}, },
async runmore (action ) {
console.log(action)
if(action == 'on'){
this.actionrowindex = true
this.actionrowindexselect = false
}else if(action == 'off'){
this.actionrowindex = false
this.actionrowindexselect = true
this.addNetworkMenou = false
this.actionrowindexconsole = false
this.$root.$emit('hybrid_show_instance_images','images')
}
},
async socketopen () { async socketopen () {
this.$socket.client.open(); this.$socket.client.open();
this.$socket.client.connect(); this.$socket.client.connect();

120
src/components/mynetwork/networks.vue

@ -2,6 +2,10 @@
<card class="card-user" style="max-height:100%"> <card class="card-user" style="max-height:100%">
<div class="author">
<img class="avatar border-white" src="@/assets/img/code-128.png" alt="...">
</div>
<v-wait for="myRunInstancedockerimages1a"> <v-wait for="myRunInstancedockerimages1a">
<template slot="waiting"> <template slot="waiting">
<div> <div>
@ -11,6 +15,83 @@
</template> </template>
</v-wait> </v-wait>
<!--
--------------------------------------------------------------------------
--------------------------------------------------------------------------
---------------- MENOU BEGIN ------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
-->
<b-container fluid class="bv-example-row">
<div class="col-12 text-center">
<b> <span class="text-muted">View and Manage your</span> <span class="text-info">Local System</span></b>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<div class="row">
<div class="col-12">
<div class="input-group input-group-sm sm-3">
<div class="input-group-prepend">
<button
class="ti-settings btn btn-outline-success"
round
type="button"
> </button>&nbsp;
</div>
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary"
round
type="button"
> Networks </button>
<button
class="btn btn-outline-primary"
round
type="button"
@click="setview"
> Images </button>
</div>
</div>
</div> <!-- col -->
</div> <!-- row -->
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<!--
--------------------------------------------------------------------------
--------------------------------------------------------------------------
---------------- MENOU END ------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
--------------------------------------------------------------------------
-->
<b-container fluid class="bv-example-row">
<div class="col-12 text-center">
<b> <span class="text-info">Docker Networks</span></b>
</div>
</b-container>
<b-container fluid class="bv-example-row">
<div class="col-12">
<br>
</div>
</b-container>
<b-container fluid class="bv-example-row"> <b-container fluid class="bv-example-row">
<div class="input-group input-group-sm sm-3"> <div class="input-group input-group-sm sm-3">
@ -50,10 +131,11 @@
</div> </div>
</b-container>
<div class="white h-100 flex-fixed-width-item" <div class="white h-100 flex-fixed-width-item"
<vuetable <vuetable
ref="vuetable" ref="vuetable" id="idvuetablekeybnetworks1"
:key="vuetablekeybnetworks1" :key="vuetablekeybnetworks1"
:api-url='apiurl' :api-url='apiurl'
:api-mode="true" :api-mode="true"
@ -78,12 +160,12 @@
<div slot="actions" slot-scope="props"> <div slot="actions" slot-scope="props">
<button <button
class="ti-trash btn btn-outline-secondary btn-sm" class="ti-trash btn btn-sm"
round round
@click="onAction('rm-item', props.rowData, props.rowIndex)"> @click="onAction('rm-item', props.rowData, props.rowIndex)">
</button> </button>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class="ti-info btn btn-sm"
round round
@click="onAction('info-item', props.rowData, props.rowIndex)"> @click="onAction('info-item', props.rowData, props.rowIndex)">
</button> </button>
@ -104,6 +186,8 @@
</div> </div>
</div> </div>
</b-container> </b-container>
</card> </card>
</template> </template>
<script> <script>
@ -159,24 +243,24 @@ export default {
name: 'ID', name: 'ID',
title: '<span class="orange"></span>Network id', title: '<span class="orange"></span>Network id',
//sortField: 'ID', //sortField: 'ID',
visible:true, visible:false,
dataClass: 'text-left text-wrap text-break break-word', dataClass: 'text-left text-wrap text-break break-word',
width: '15%' width: '15%'
}, },
{ {
name: 'Name', name: 'Name',
title: '<span class="orange"></span>Name', title: '<span class="orange"></span>Network',
sortField: 'Name', sortField: 'Name',
visible:true, visible:true,
dataClass: 'left aligned w-25', dataClass: 'left aligned w-50 text-muted',
width: '30%' width: '50%'
}, },
{ {
name: 'Driver', name: 'Driver',
//sortField: 'Tag', //sortField: 'Tag',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-20', dataClass: 'left aligned w-20 text-muted',
visible:true, visible:true,
width: '5%' width: '5%'
}, },
@ -184,9 +268,14 @@ export default {
name: 'CreatedAt', name: 'CreatedAt',
sortField: 'CreatedAt', sortField: 'CreatedAt',
titleClass: 'center aligned', titleClass: 'center aligned',
dataClass: 'left aligned w-25', dataClass: 'left aligned w-15 text-muted',
visible:true, visible:true,
width: '10%' width: '15%',
callback: function(value) {
var tmp = value.split(' ')
var v = tmp[0]
return v
}
}, },
{ {
name: '_id', name: '_id',
@ -198,7 +287,7 @@ export default {
title: '<span class="orange"></span>Scope', title: '<span class="orange"></span>Scope',
sortField: 'Scope', sortField: 'Scope',
titleClass: 'center aligned', titleClass: 'center aligned',
visible:true, visible:false,
width: '5%' width: '5%'
}, },
{ {
@ -321,6 +410,9 @@ export default {
onChangePage (page) { onChangePage (page) {
this.$refs.vuetable.changePage(page) this.$refs.vuetable.changePage(page)
}, },
setview () {
this.$root.$emit('hybrid_show_instance_images','images')
},
editRow(rowData) { editRow(rowData) {
alert("You clicked edit on"+ JSON.stringify(rowData)); alert("You clicked edit on"+ JSON.stringify(rowData));
}, },
@ -554,6 +646,12 @@ export default {
}; };
</script> </script>
<style> <style>
#idvuetablekeybnetworks1 tr td {
border-left: 0px solid;
border-right: 0px solid;
padding: 0px;
}
.flex-fixed-width-item { .flex-fixed-width-item {
flex: 0 0 100px; flex: 0 0 100px;
} }

Loading…
Cancel
Save