zeus
4 years ago
5 changed files with 26 additions and 608 deletions
@ -1,579 +0,0 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
<div class="author"> |
|||
<img class="avatar border-white" src="@/assets/img/docker.png" alt="..."> |
|||
</div> |
|||
|
|||
<b-container fluid class="bv-example-row"> |
|||
|
|||
|
|||
<v-wait for="myRunInstancetutor"> |
|||
<template slot="waiting"> |
|||
<div> |
|||
<img src="@/assets/loading.gif" /> |
|||
Enter Lab_room... |
|||
</div> |
|||
</template> |
|||
</v-wait> |
|||
|
|||
|
|||
<div class="input-group input-group-sm sm-3"> |
|||
|
|||
<input type="text" |
|||
class="form-control" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Search" |
|||
v-model="searchFor" |
|||
@keyup.enter="setFilter" |
|||
> |
|||
|
|||
<div class="input-group-append"> |
|||
<button |
|||
class="btn btn-outline-primary" |
|||
round |
|||
type="button" |
|||
@click="setFilter"> |
|||
Go</button> |
|||
</div> |
|||
|
|||
<div class="input-group-append"> |
|||
<button class="btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="resetFilter"> |
|||
Reset</button> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row" |
|||
v-if="viewhybridoptions" |
|||
> |
|||
<b-col class="text-center" cols="12" sm="12" md="12"> |
|||
<span> |
|||
<b>Lab Service Options</b> |
|||
</span> |
|||
</b-col> |
|||
</div> |
|||
|
|||
<div class="input-group-append" |
|||
v-if="viewhybridoptions" |
|||
> |
|||
<button class="btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
> |
|||
Size</button> |
|||
<input type="text" |
|||
class="form-control" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Number of Instances" |
|||
v-model="hybridoptions.size" |
|||
> |
|||
<button class="btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
> |
|||
Port</button> |
|||
<input type="text" |
|||
class="form-control" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Expose Port" |
|||
v-model="hybridoptions.port" |
|||
> |
|||
<button class="btn btn-outline-success" |
|||
round |
|||
type="button" |
|||
@click="setHybridoptions" |
|||
> |
|||
Up</button> |
|||
</div> |
|||
|
|||
<div class="white h-100 flex-fixed-width-item" |
|||
<vuetable |
|||
ref="vuetable" |
|||
:key="vuetablekey" |
|||
:api-url='apiurl' |
|||
:api-mode="true" |
|||
:http-options="httpOptions" |
|||
:fields="fields" |
|||
:item-actions="itemActions" |
|||
:sort-order="sortOrder" |
|||
:show-sort-icons="true" |
|||
:multi-sort="multiSort" |
|||
:per-page="perpage" |
|||
pagination-path="links.pagination" |
|||
:pagination-component="paginationComponent" |
|||
:append-params="moreParams" |
|||
wrapper-class="vuetable-wrapper" |
|||
loading-class="loading" |
|||
detail-row-id="id" |
|||
@vuetable:pagination-data="onPaginationData" |
|||
@vuetable:load-success="loadsuccess" |
|||
:css="css.table" |
|||
> |
|||
|
|||
<div slot="actionsenabled" slot-scope="props"> |
|||
<div class="d-flex justify-content-center"> |
|||
<button |
|||
v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex" |
|||
class="ti-thumb-up btn btn-info btn-sm" |
|||
title="Stop Lan_Instance" |
|||
round |
|||
@click="onAction('down-item', props.rowData, props.rowIndex)" |
|||
> |
|||
</button> |
|||
<button |
|||
v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex" |
|||
class="ti-thumb-down btn btn-secondary btn-sm" |
|||
title="Stop Lan_Instance" |
|||
round |
|||
@click="onAction('run-item', props.rowData, props.rowIndex)" |
|||
> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div slot="actionslocal" slot-scope="props"> |
|||
<div class="d-flex justify-content-center"> |
|||
<button |
|||
v-if="testactionrowindex[props.rowIndex] == props.rowIndex" |
|||
class="ti-trash btn btn-info btn-sm" |
|||
title="Remove Lab_Instance" |
|||
round |
|||
> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div slot="actions" slot-scope="props"> |
|||
<div class="d-flex justify-content-center"> |
|||
<button |
|||
v-if="checkactionrowindex(props.rowData,props.rowIndex)" |
|||
class="ti-cloud-down btn btn-outline-secondary btn-sm" |
|||
title="Download Lab_Instance" |
|||
round |
|||
@click="onAction('run-item', props.rowData, props.rowIndex)"> |
|||
</button> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary btn-sm" |
|||
title="Lab_Instance Info" |
|||
round |
|||
@click="onAction('view-item', props.rowData, props.rowIndex)"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</vuetable> |
|||
<div class="vuetable-pagination ui basic segment grid"> |
|||
<vuetable-pagination-info |
|||
ref="paginationInfo" |
|||
:css="css.paginationInfo" |
|||
> |
|||
</vuetable-pagination-info> |
|||
<vuetable-pagination |
|||
:css="css.pagination" |
|||
ref="pagination" |
|||
@vuetable-pagination:change-page="onChangePage" |
|||
> |
|||
</vuetable-pagination> |
|||
</div> |
|||
</div> |
|||
</b-container> |
|||
</card> |
|||
</template> |
|||
<script> |
|||
import store from '@/store/index' |
|||
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
|||
import Vue from 'vue' |
|||
import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2' |
|||
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo' |
|||
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination' |
|||
import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js' |
|||
import card from '@/components/Card.vue' |
|||
import {ApiConfig} from "@/config/index"; |
|||
export default { |
|||
components: { |
|||
card, |
|||
Vuetable, |
|||
VuetablePagination, |
|||
VuetablePaginationInfo, |
|||
VuetablePaginationDropdown |
|||
}, |
|||
props: { |
|||
}, |
|||
data() { |
|||
return{ |
|||
testactionrowindex:[], // downloaded used in installed |
|||
teststatusindex:[], // status stop run used in status |
|||
hybridoptions: { |
|||
'swarmlabname':'', |
|||
'size':'', |
|||
'port':'' |
|||
}, |
|||
viewhybridoptions: false, |
|||
swarmlab:{}, |
|||
playbookInfo: {}, |
|||
token: '', |
|||
playbook: { |
|||
'title':'', |
|||
'name':'', |
|||
'description':'' |
|||
}, |
|||
container:{ |
|||
name:'', |
|||
view:0 |
|||
}, |
|||
pipeline:{}, |
|||
selected: '', |
|||
options: [ |
|||
{ text: 'Packages', value: 'packages' }, |
|||
{ text: 'Images', value: 'images' }, |
|||
{ text: 'Scripts', value: 'scripts' } |
|||
], |
|||
showModal: false, |
|||
visibility: [], |
|||
active:false, |
|||
vuetablekey:0, |
|||
fielddata:{}, |
|||
fields: [ |
|||
{ |
|||
name: 'swarmlabname', |
|||
title: '<span class="orange"></span>Name', |
|||
sortField: 'swarmlabname', |
|||
visible:true, |
|||
dataClass: 'left aligned col-3', |
|||
width: '68%' |
|||
}, |
|||
{ |
|||
name: '_id', |
|||
title: '<span class="orange"></span>mongo', |
|||
visible:false |
|||
}, |
|||
{ |
|||
name: 'description', |
|||
sortField: 'gitrepoCloneUrl', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'left aligned w-25', |
|||
visible:false, |
|||
width: '15%' |
|||
}, |
|||
{ |
|||
name: 'gitrepoFullName', |
|||
sortField: 'gitrepoFullName', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'left aligned w-25', |
|||
visible:false, |
|||
width: '15%' |
|||
}, |
|||
{ |
|||
name: '__slot:actionsenabled', // <---- |
|||
title: 'Status', |
|||
titleClass: 'center', |
|||
dataClass: 'center aligned', |
|||
width: '5%' |
|||
}, |
|||
{ |
|||
name: '__slot:actionslocal', // <---- |
|||
title: 'Installed', |
|||
titleClass: 'center', |
|||
dataClass: 'center aligned', |
|||
width: '5%' |
|||
}, |
|||
{ |
|||
name: '__slot:actions', // <---- |
|||
title: 'Download', |
|||
titleClass: 'col text-center', |
|||
dataClass: 'center aligned', |
|||
width: '10%' |
|||
}, |
|||
], |
|||
apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices", |
|||
css: CssConfig, |
|||
perpage: 5, |
|||
searchFor: '', |
|||
sortOrder: [{ |
|||
field: 'pipelinename', |
|||
direction: 'asc' |
|||
}], |
|||
multiSort: true, |
|||
paginationComponent: 'vuetable-pagination', |
|||
itemActions: [ |
|||
{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} }, |
|||
{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} }, |
|||
{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } } |
|||
], |
|||
moreParams: { |
|||
'filter': '', |
|||
'type': 'scripts' |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$root.$on('hybrid_refresh_availableservices', () => { |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}) |
|||
//refresh from socket mytable |
|||
this.$root.$on('hybrid_refresh_table', (v) => { |
|||
this.$nextTick(function () { |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}) |
|||
}) |
|||
}, |
|||
created() { |
|||
var url_string = window.location.href |
|||
var url = new URL(url_string); |
|||
this.token = url.searchParams.get("token"); |
|||
console.log("token "+ this.token); |
|||
|
|||
}, |
|||
beforeDestroy () { |
|||
this.$root.$off('hybrid_refresh_availableservices') |
|||
this.$root.$off('hybrid_refresh_table') |
|||
}, |
|||
computed: { |
|||
httpOptions() { |
|||
var token = this.token |
|||
var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions" |
|||
return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions" |
|||
}, |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
onError (type,description) { |
|||
var winfo=description |
|||
var info='<h5>Bootstrap '+type+'</h5>' |
|||
this.$swal({ |
|||
type: type, |
|||
html: info+winfo, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: false, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true, |
|||
confirmButtonText: 'Ok!' |
|||
}) |
|||
}, |
|||
async checkactionrowindex(data,index){ |
|||
if(this.testactionrowindex[index] == index){ |
|||
|
|||
var obj = {} |
|||
obj.token = this.token |
|||
obj.instance = data.swarmlabname |
|||
var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj) |
|||
console.log('res8 all '+JSON.stringify(res1)) |
|||
if(res1.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, data.swarmlabname, index) |
|||
console.log('res8 YES '+JSON.stringify(res1.data)) |
|||
}else{ |
|||
console.log('res8 NO '+JSON.stringify(res1.data)) |
|||
Vue.delete(this.testactionrowindex, data.swarmlabname) |
|||
} |
|||
|
|||
console.log('is set '+index) |
|||
}else{ |
|||
console.log('not set '+index) |
|||
|
|||
var obj = {} |
|||
obj.token = this.token |
|||
obj.instance = data.swarmlabname |
|||
var res = await store.dispatch('pipelineLLO/getservicesinfo', obj) |
|||
if(res.data.data == 'yes'){ |
|||
console.log('resi YES '+JSON.stringify(res)) |
|||
Vue.set(this.testactionrowindex, index, index) |
|||
var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj) |
|||
console.log('res8 all '+JSON.stringify(res1)) |
|||
if(res1.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, data.swarmlabname, index) |
|||
console.log('res8 YES '+JSON.stringify(res1.data)) |
|||
}else{ |
|||
console.log('res8 NO '+JSON.stringify(res1.data)) |
|||
Vue.delete(this.testactionrowindex, data.swarmlabname) |
|||
} |
|||
//console.log('resiiiiiiii yes '+JSON.stringify(this.testactionrowindex[index])) |
|||
}else{ |
|||
//Vue.delete(this.testactionrowindex, index) |
|||
console.log('resi NO '+JSON.stringify(res)) |
|||
} |
|||
} |
|||
}, |
|||
setFilter () { |
|||
this.moreParams = { |
|||
'filter': this.searchFor, |
|||
'type': this.selected |
|||
} |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}, |
|||
resetFilter () { |
|||
this.moreParams = {} |
|||
this.searchFor = '' |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}, |
|||
onPaginationData (paginationData) { |
|||
this.$refs.pagination.setPaginationData(paginationData) |
|||
this.$refs.paginationInfo.setPaginationData(paginationData) |
|||
}, |
|||
onChangePage (page) { |
|||
this.$refs.vuetable.changePage(page) |
|||
}, |
|||
editRow(rowData) { |
|||
alert("You clicked edit on"+ JSON.stringify(rowData)); |
|||
}, |
|||
async onAction (action, data, index) { |
|||
if(action == 'view-item' ){ |
|||
this.swarmlab=data |
|||
var container=this.swarmlab |
|||
var res = await store.dispatch('pipelineLLO/getswarmlabinfo', container.swarmlabname) |
|||
|
|||
var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2) |
|||
var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2) |
|||
var swarmlab1info=res.data.swarmlabinfo |
|||
var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>' |
|||
if(res.data.error25=="ok"){ |
|||
var winfo='' |
|||
var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)' |
|||
this.$swal({ |
|||
type: 'info', |
|||
html: info+winfo, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true |
|||
}) |
|||
} |
|||
|
|||
|
|||
}else if(action == 'delete-item' ){ |
|||
this.$swal({ |
|||
type: 'info', |
|||
html: info+winfo, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: true, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true, |
|||
confirmButtonText: 'Yes, Delete it!' |
|||
}) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}else if(action == 'run-item' ){ |
|||
this.viewhybridoptions = true |
|||
this.hybridoptions.swarmlabname = data.swarmlabname |
|||
/* |
|||
console.log('RUN 1 '+ JSON.stringify(data.swarmlabname)) |
|||
// run on mytable.vue |
|||
this.$root.$emit('hybrid_start_instance', data.swarmlabname) |
|||
Vue.set(this.testactionrowindex, data.swarmlabname, index) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
*/ |
|||
}else if(action == 'down-item' ){ |
|||
console.log('RUN 1 '+ JSON.stringify(data.swarmlabname)) |
|||
// run on mytable.vue |
|||
this.$root.$emit('hybrid_stop_instance', data.swarmlabname) |
|||
Vue.delete(this.testactionrowindex, index) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
} |
|||
}, |
|||
async setHybridoptions(){ |
|||
console.log(JSON.stringify(this.hybridoptions)) |
|||
|
|||
//console.log('RUN 1 '+ JSON.stringify(data.swarmlabname)) |
|||
// run on mytable.vue |
|||
let value = {} |
|||
value.swarmlabname = this.hybridoptions.swarmlabname |
|||
value.size = this.hybridoptions.size |
|||
value.port = this.hybridoptions.port |
|||
this.$root.$emit('hybrid_start_instance', value) |
|||
Vue.set(this.testactionrowindex, value.swarmlabname, index) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
|
|||
}, |
|||
refreshVuetable() { |
|||
this.$nextTick(()=>{ |
|||
this.vuetablekey += 1 |
|||
}) |
|||
}, |
|||
playbookinfoShow(value) { |
|||
return this.visibility[value]=true |
|||
}, |
|||
playbookinfo(value) { |
|||
return this.playbookInfo=value |
|||
}, |
|||
rowClicked(row, event) { |
|||
return { |
|||
html: true, |
|||
title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) }, |
|||
content: () => { return 'The date is:<br><em>' + new Date() + '</em>' } |
|||
} |
|||
}, |
|||
loadsuccess(response) { |
|||
var data = response.data.data |
|||
this.fielddata=data |
|||
var n = data.length |
|||
n=n-1 |
|||
}, |
|||
|
|||
|
|||
}, |
|||
|
|||
|
|||
actions: { |
|||
|
|||
|
|||
} |
|||
|
|||
}; |
|||
</script> |
|||
<style> |
|||
.flex-fixed-width-item { |
|||
flex: 0 0 100px; |
|||
} |
|||
.modalinfo { |
|||
z-index: 10000000 !important; |
|||
position:fixed; |
|||
} |
|||
/* a container with flex-direction column */ |
|||
|
|||
.vue-notifyjs.notifications{ |
|||
.alert{ |
|||
z-index: 100; |
|||
} |
|||
.list-move { |
|||
transition: transform 0.3s, opacity 0.4s; |
|||
} |
|||
.list-item { |
|||
display: inline-block; |
|||
margin-right: 10px; |
|||
|
|||
} |
|||
.list-enter-active { |
|||
transition: transform 0.2s ease-in, opacity 0.4s ease-in; |
|||
} |
|||
.list-leave-active { |
|||
transition: transform 1s ease-out, opacity 0.4s ease-out; |
|||
} |
|||
|
|||
.list-enter { |
|||
opacity: 0; |
|||
transform: scale(1.1); |
|||
|
|||
} |
|||
.list-leave-to { |
|||
opacity: 0; |
|||
transform: scale(1.2, 0.7); |
|||
} |
|||
} |
|||
|
|||
pre { |
|||
//background-color: rgb(255, 247, 229); |
|||
background-color: #eff0f1; |
|||
border: 1px solid blue; |
|||
//white-space: pre-line; |
|||
} |
|||
|
|||
</style> |
|||
@ -1,7 +1,7 @@ |
|||
//var global_config = {
|
|||
export const ApiConfig = { |
|||
'swarmlab_url_80' : 'https://api.swarmlab.io', |
|||
'url_80' : 'https://localhost:3000', // webclient
|
|||
'url_443' : 'https://localhost:3000' // webclient
|
|||
'url_80' : 'http://localhost:3080', // webclient
|
|||
'url_443' : 'https://localhost:3080' // webclient
|
|||
/* config for swarmlab ide */ |
|||
}; |
|||
|
|||
Loading…
Reference in new issue