zeus
4 years ago
14 changed files with 843 additions and 680 deletions
|
After Width: | Height: | Size: 4.2 KiB |
|
Before Width: | Height: | Size: 4.8 KiB |
@ -1 +1 @@ |
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.10423c10.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.4c082a6b.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.10423c10.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.4c082a6b.js"></script></body></html> |
|||
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Vue App</title><link href="/css/app.10423c10.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.6e97b28f.js" rel="preload" as="script"><link href="/js/chunk-vendors.d8d18fe6.js" rel="preload" as="script"><link href="/css/chunk-vendors.e469b508.css" rel="stylesheet"><link href="/css/app.10423c10.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.6e97b28f.js"></script></body></html> |
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 4.8 KiB After Width: | Height: | Size: 4.2 KiB |
@ -0,0 +1,761 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
<div class="author"> |
|||
<img class="avatar border-white" src="@/assets/img/hybrid-1.png" alt="..."> |
|||
</div> |
|||
|
|||
|
|||
<v-wait for="myRunInstancetutor"> |
|||
<template slot="waiting"> |
|||
<div> |
|||
<img src="@/assets/loading.gif" /> |
|||
Enter Lab_room... |
|||
</div> |
|||
</template> |
|||
</v-wait> |
|||
|
|||
<b-container fluid> |
|||
|
|||
<div class="row text-center"> |
|||
<div class="col-12"> |
|||
<b>Swarmlab hybrid Join</b> |
|||
</div> |
|||
</div> |
|||
|
|||
<br> |
|||
<div class="row" > |
|||
<div class="col-3 text-info" > |
|||
<div class="input-group-prepend"> |
|||
<button |
|||
class="btn btn-outline-success" |
|||
round |
|||
type="button" |
|||
@click="onActionHybrid('stack-start')" |
|||
v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status" |
|||
> |
|||
Start Stack |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="col-3 text-info" > |
|||
<div class="input-group-prepend"> |
|||
<button |
|||
class="btn btn-outline-danger" |
|||
round |
|||
type="button" |
|||
@click="onActionHybrid('stack-stop')" |
|||
v-if="hybridshowdata.bootstrapstackname && hybridshowdata.status" |
|||
> |
|||
Leave Stack |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="col-3 text-info" > |
|||
<div class="input-group-prepend"> |
|||
<!-- |
|||
<button |
|||
class="btn btn-outline-danger" |
|||
round |
|||
type="button" |
|||
@click="onActionHybrid('service-stop')" |
|||
v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status" |
|||
> |
|||
Remove Service |
|||
</button> |
|||
--> |
|||
</div> |
|||
</div> |
|||
<div class="col-3 text-info" > |
|||
<div class="input-group-prepend"> |
|||
<button |
|||
class="btn btn-outline-info" |
|||
round |
|||
type="button" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
@click="onActionHybrid('service-info')" |
|||
> |
|||
Service Info |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</div> <!-- row --> |
|||
|
|||
<div class="row" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
> |
|||
<div class="col-2 text-info" |
|||
> |
|||
Instances |
|||
</div> |
|||
<div class="col-3 text-secondary" > |
|||
{{ hybridshowdata.Replicas }} |
|||
</div> |
|||
<div class="col-2 text-info" > |
|||
Image |
|||
</div> |
|||
<div class="col-4 text-secondary" > |
|||
{{ hybridshowdata.bootstrapimage }} |
|||
</div> |
|||
</div> <!-- row --> |
|||
<div class="row" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
> |
|||
<div class="col-2 text-info" > |
|||
Names |
|||
</div> |
|||
<div class="col-3 text-secondary" > |
|||
{{ hybridshowdata.bootstrapname }} |
|||
</div> |
|||
<div class="col-2 text-info" > |
|||
EndAt |
|||
</div> |
|||
<div class="col-4 text-secondary" > |
|||
{{ hybridshowdata.bootstrapdateend }} |
|||
</div> |
|||
</div> <!-- row --> |
|||
<div class="row" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
> |
|||
<div class="col-2 text-info" > |
|||
Networks |
|||
</div> |
|||
<div class="col-3 text-secondary" > |
|||
{{ hybridshowdata.bootstrapnetwork }} |
|||
</div> |
|||
<div class="col-2 text-info" > |
|||
BeginAt |
|||
</div> |
|||
<div class="col-4 text-secondary" > |
|||
{{ hybridshowdata.bootstrapdatebegin }} |
|||
</div> |
|||
</div> <!-- row --> |
|||
<div class="row" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
> |
|||
<div class="col-2 text-info" > |
|||
Status |
|||
</div> |
|||
<div class="col-3 text-secondary" |
|||
v-if="hybridshowdata.status" |
|||
> |
|||
<span class="ti-check text-success"> </span> |
|||
</div> |
|||
<div class="col-3 text-secondary" |
|||
v-else |
|||
> |
|||
<span> </span> |
|||
</div> |
|||
<div class="col-2 text-info" > |
|||
Ports |
|||
</div> |
|||
<div class="col-4 text-secondary" |
|||
v-if="hybridshowdata.ports!=0" |
|||
> |
|||
{{ hybridshowdata.ports }} |
|||
</div> |
|||
<div class="col-4 text-secondary" |
|||
v-else |
|||
> |
|||
|
|||
</div> |
|||
</div> <!-- row --> |
|||
</b-container> |
|||
<b-container fluid class="bv-example-row"> |
|||
|
|||
<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 By StackName" |
|||
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="white h-100 flex-fixed-width-item" |
|||
<vuetable |
|||
ref="vuetable" |
|||
:key="vuetablekey1" |
|||
: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" |
|||
@vuetable:load-error="onLoadError" |
|||
:css="css.table" |
|||
> |
|||
<div slot="actionslocal" slot-scope="props"> |
|||
<div class="d-flex justify-content-center"> |
|||
<button |
|||
v-if="testactionrowindex[props.rowData.bootstrapnameid]" |
|||
class="ti-thumb-up btn btn-info btn-sm" |
|||
title="Remove Stack" |
|||
disabled |
|||
round |
|||
> |
|||
</button> |
|||
<button |
|||
v-else |
|||
class="ti-thumb-down btn btn-secondary btn-sm" |
|||
title="Remove Stack" |
|||
disabled |
|||
round |
|||
> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div slot="actions" slot-scope="props"> |
|||
<div class="d-flex justify-content-center"> |
|||
<button |
|||
v-if="actionrowindex == props.rowIndex" |
|||
class="ti-more-alt btn btn-secondary btn-sm" |
|||
round |
|||
@click="onAction('run-more', props.rowData, props.rowIndex)"> |
|||
</button> |
|||
<button |
|||
v-else |
|||
class="ti-more btn btn-outline-secondary btn-sm" |
|||
round |
|||
@click="onAction('run-more', 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:[], // joined |
|||
actionrowindex:'', |
|||
playbookInfo: {}, |
|||
hybridshowdata:{}, |
|||
token: '', |
|||
CONFIG: {}, |
|||
isstatus:'', |
|||
playbook: { |
|||
'title':'', |
|||
'name':'', |
|||
'description':'' |
|||
}, |
|||
container:{ |
|||
name:'', |
|||
view:0 |
|||
}, |
|||
pipeline:{}, |
|||
selected: 'hybrid', |
|||
options: [ |
|||
{ text: 'Packages', value: 'packages' }, |
|||
{ text: 'Images', value: 'images' }, |
|||
{ text: 'Scripts', value: 'scripts' } |
|||
], |
|||
showModal: false, |
|||
visibility: [], |
|||
active:false, |
|||
vuetablekey1:0, |
|||
fielddata:{}, |
|||
fields: [ |
|||
{ |
|||
name: 'bootstrapname', |
|||
title: '<span class="orange"></span>Name', |
|||
sortField: 'bootstrapname', |
|||
visible:true, |
|||
dataClass: 'text-left text-wrap text-break break-word', |
|||
width: '15%' |
|||
}, |
|||
{ |
|||
name: 'bootstrapstackname', |
|||
title: '<span class="orange"></span>StackName', |
|||
sortField: 'bootstrapstackname', |
|||
visible:true, |
|||
dataClass: 'left aligned w-25', |
|||
width: '10%' |
|||
|
|||
}, |
|||
{ |
|||
name: 'bootstrapstackid', |
|||
title: '<span class="orange"></span>StackID', |
|||
sortField: 'bootstrapstackid', |
|||
visible:true, |
|||
dataClass: 'left aligned w-25', |
|||
width: '15%', |
|||
callback: value => { |
|||
//console.log(this) |
|||
//console.log(this.fielddata) |
|||
for(var i = 0; i < this.fielddata.length; i++) { |
|||
//call function here |
|||
var servicename = this.fielddata[i].bootstrapstackid |
|||
//console.log(JSON.stringify(servicename)) |
|||
if(servicename == value){ |
|||
var obj = {} |
|||
obj.bootstrapnameid = this.fielddata[i].bootstrapnameid |
|||
obj.bootstrapstackname = this.fielddata[i].bootstrapstackname |
|||
this.checkactionrowindex(obj) |
|||
//console.log(JSON.stringify('status '+JSON.stringify(this.fielddata[i]))) |
|||
|
|||
} |
|||
} |
|||
return value |
|||
} |
|||
|
|||
}, |
|||
{ |
|||
name: '_id', |
|||
title: '<span class="orange"></span>mongo', |
|||
visible:false |
|||
}, |
|||
{ |
|||
name: 'bootstrapdatebegin5', |
|||
title: '<span class="orange"></span>Begin', |
|||
sortField: 'bootstrapdatebegin5', |
|||
titleClass: 'center aligned', |
|||
visible:true, |
|||
width: '10%' |
|||
}, |
|||
{ |
|||
name: 'bootstrapusersjoin', |
|||
title: '<span class="orange"></span>Public', |
|||
sortField: 'bootstrapusersjoin', |
|||
titleClass: 'center aligned', |
|||
visible:true, |
|||
width: '5%', |
|||
callback: function(value) { |
|||
if (value == true) { |
|||
var v = '<span class="ti-check text-success"> </span>' |
|||
return v |
|||
}else{ |
|||
var v = '<span> </span>' |
|||
return v |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
name: 'status', |
|||
title: '<span class="orange"></span>Status', |
|||
sortField: 'status', |
|||
titleClass: 'center aligned', |
|||
visible:true, |
|||
width: '5%', |
|||
callback: function(value) { |
|||
if (value == true) { |
|||
var v = '<span class="ti-check text-success"> </span>' |
|||
return v |
|||
}else{ |
|||
var v = '<span> </span>' |
|||
return v |
|||
} |
|||
} |
|||
}, |
|||
{ |
|||
name: 'ID', |
|||
sortField: 'ID', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'left aligned w-25', |
|||
visible:false, |
|||
width: '15%' |
|||
}, |
|||
|
|||
{ |
|||
name: '__slot:actionslocal', // <---- |
|||
title: ' Join', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'center aligned', |
|||
width: '5%', |
|||
callback: 'getstatus' |
|||
}, |
|||
|
|||
{ |
|||
name: '__slot:actions', // <---- |
|||
title: 'Actions', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'center aligned', |
|||
width: '5%' |
|||
} |
|||
], |
|||
apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridbootstrapservicesall", |
|||
//apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices", |
|||
css: CssConfig, |
|||
perpage: 10, |
|||
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', |
|||
'tutor': 'yes' |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$root.$on('hybrid_refresh_bootstrap_view', () => { |
|||
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_bootstrap_view') |
|||
}, |
|||
computed: { |
|||
httpOptions() { |
|||
var token = this.token |
|||
var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions" |
|||
return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions" |
|||
}, |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
async checkactionrowindex(data){ |
|||
var obj = {} |
|||
obj.token = this.token |
|||
obj.bootstrapnameid = data.bootstrapnameid |
|||
obj.bootstrapstackname = data.bootstrapstackname |
|||
var res1 = await store.dispatch('pipelineLLO/getserviceshybridstatus', obj) |
|||
var index = data.bootstrapnameid |
|||
if(res1.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, data.bootstrapnameid, index) |
|||
//console.log('res8 YES '+JSON.stringify(res1.data)) |
|||
}else{ |
|||
//console.log('res8 NO '+JSON.stringify(res1.data)) |
|||
Vue.delete(this.testactionrowindex, data.bootstrapnameid) |
|||
} |
|||
//console.log('res8 all '+JSON.stringify(this.testactionrowindex)) |
|||
}, |
|||
|
|||
|
|||
async onActionHybrid(action) { |
|||
//var logconfig = await store.getters['pipelineLLO/getconfig']; |
|||
this.CONFIG = await store.getters['pipelineLLO/getstatusswarmlab']; |
|||
if(this.CONFIG.hybrid == 'Online'){ |
|||
this.isstatus = true |
|||
}else{ |
|||
this.isstatus = false |
|||
} |
|||
//console.log('stack-start1 ' + JSON.stringify(this.CONFIG)) |
|||
//console.log('stack-start3 ' + JSON.stringify(logconfig1)) |
|||
if(action == 'stack-stop' ){ |
|||
var info='<h5>This will leave the stack with the name<b> '+ this.hybridshowdata.bootstrapstackname +'</b> </h5>' |
|||
this.$swal({ |
|||
type: 'Info', |
|||
title: 'Info!', |
|||
icon:'warning', |
|||
html: info, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: true, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true, |
|||
confirmButtonText: 'Ok!' |
|||
}).then((result)=> { |
|||
this.onActionHybrid_stackrm(result); |
|||
}) |
|||
|
|||
}else if(action == 'stack-start' ){ |
|||
//console.log('stack-start') |
|||
if(this.isstatus == '1'){ |
|||
//console.log(this.isstatus) |
|||
var log = await store.dispatch("pipelineLLO/hybrid_join",{ |
|||
token:this.token, |
|||
node:this.CONFIG.swarmlabid, |
|||
bootstrapstackid:this.hybridshowdata.bootstrapstackid, |
|||
bootstrapnameid:this.hybridshowdata.bootstrapnameid |
|||
}) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}else{ |
|||
} |
|||
}else if(action == 'service-info' ){ |
|||
//console.log(JSON.stringify(action)) |
|||
//console.log('CONFIG '+JSON.stringify(this.hybridshowdata)) |
|||
var url = this.hybridshowdata.bootstrapurl |
|||
var info=`<h5>You will be redirected to the README page of the repository (OUTSIDE Swarmlab-Hybrid)<br> |
|||
<a href="${url}" target="new">click here to continue</a> |
|||
</h5> |
|||
<br> |
|||
` |
|||
this.$swal({ |
|||
type: 'Info', |
|||
title: 'README', |
|||
icon:'info', |
|||
html: info, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: false, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true, |
|||
confirmButtonText: 'Ok!' |
|||
}) |
|||
} |
|||
|
|||
}, |
|||
async onActionHybrid_stackrm(action) { |
|||
//console.log(JSON.stringify(action)) |
|||
if(action.isConfirmed){ |
|||
if(this.isstatus == '1'){ |
|||
var log = await store.dispatch("pipelineLLO/hybrid_leave",{ |
|||
token:this.token, |
|||
node:this.CONFIG.swarmlabid, |
|||
bootstrapstackid:this.hybridshowdata.bootstrapstackid, |
|||
bootstrapnameid:this.hybridshowdata.bootstrapnameid |
|||
}) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}else{ |
|||
} |
|||
} |
|||
}, |
|||
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!' |
|||
}) |
|||
}, |
|||
|
|||
|
|||
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) { |
|||
this.actionrowindex = index |
|||
//this.$root.$emit('hybrid_show_info',data) |
|||
//console.log('index '+this.actionrowindex) |
|||
if(action == 'view-item' ){ |
|||
}else if(action == 'run-more' ){ |
|||
this.hybridshowdata = data |
|||
//console.log('hybrid '+JSON.stringify(data)) |
|||
}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!' |
|||
}) |
|||
}else if(action == 'run-item' ){ |
|||
} |
|||
}, |
|||
refreshVuetable() { |
|||
this.$nextTick(()=>{ |
|||
this.vuetablekey1 += 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 |
|||
//console.log('data1 '+JSON.stringify(response)) |
|||
}, |
|||
onLoadError(payload) { |
|||
/* |
|||
//error2 "invalid_token" join-service.vue:684 |
|||
//error2 "The access token provided has expired" join-service.vue:685 |
|||
//error2 "Unauthorized" join-service.vue:686 |
|||
//error2 401 |
|||
console.log('error2 '+JSON.stringify(payload.response.data.error)) |
|||
console.log('error2 '+JSON.stringify(payload.response.data.error_description)) |
|||
console.log('error2 '+JSON.stringify(payload.response.statusText)) |
|||
console.log('error2 '+JSON.stringify(payload.response.status)) |
|||
*/ |
|||
if(payload.response.status == '401'){ |
|||
window.location.href = 'https://api-login.swarmlab.io:8089'; |
|||
Vue.nextTick( () => window.location.href = 'https://api-login.swarmlab.io:8089') |
|||
} |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
|
|||
actions: { |
|||
|
|||
|
|||
} |
|||
|
|||
}; |
|||
</script> |
|||
<style> |
|||
.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> |
|||
Loading…
Reference in new issue