|
|
|
<template>
|
|
|
|
<card class="card-user" style="max-height:100%">
|
|
|
|
<div class="author">
|
|
|
|
<img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<b-container fluid class="bv-example-row">
|
|
|
|
|
|
|
|
|
|
|
|
<div class="row text-center">
|
|
|
|
<div class="col-12">
|
|
|
|
<b>Swarmlab hybrid zones config</b>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<br>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="input-group input-group-sm sm-3">
|
|
|
|
<div class="input-group-prepend">
|
|
|
|
<button
|
|
|
|
class="btn btn-outline-primary"
|
|
|
|
round
|
|
|
|
type="button"
|
|
|
|
@click="onAction('add')"
|
|
|
|
>
|
|
|
|
Add Network Node</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
<!-- add newNODE -->
|
|
|
|
<card class="card-user" style="max-height:100%"
|
|
|
|
v-if="nodeadmin"
|
|
|
|
>
|
|
|
|
<br>
|
|
|
|
<div class="white h-20 flex-fixed-width-item"
|
|
|
|
|
|
|
|
<!-- add newROW ---------------------------------------------------- -->
|
|
|
|
<div class="row" >
|
|
|
|
<div class="col-3 order-first pr-md-1" >
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="Name"
|
|
|
|
v-model="nodename"
|
|
|
|
>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
|
|
|
|
<div class="col-3 pr-md-1" >
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ValidationProvider name="nodeid" rules="required|alpha_num" ref="provider"
|
|
|
|
v-slot="{ valid, errors, ariaMsg, ariaInput }"
|
|
|
|
v-if="nodeadminupdate"
|
|
|
|
>
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="NodeId"
|
|
|
|
disabled
|
|
|
|
v-model="nodeid"
|
|
|
|
>
|
|
|
|
</ValidationProvider>
|
|
|
|
<ValidationProvider name="nodeid" rules="required|alpha_num" ref="provider"
|
|
|
|
v-slot="{ valid, errors, ariaMsg, ariaInput }"
|
|
|
|
v-else
|
|
|
|
>
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="NodeId"
|
|
|
|
v-model="nodeid"
|
|
|
|
data-vv-as='"Node id"'
|
|
|
|
data-vv-value-path="nodeid"
|
|
|
|
data-vv-name="nodeid"
|
|
|
|
>
|
|
|
|
<span>{{ errors[0] }}</span>
|
|
|
|
</ValidationProvider>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
|
|
|
|
<div class="col-3 pr-md-1" >
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="IP"
|
|
|
|
v-model="nodeip"
|
|
|
|
>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
</div> <!-- row -->
|
|
|
|
|
|
|
|
<!-- add newROW ---------------------------------------------------- -->
|
|
|
|
<div class="row" >
|
|
|
|
<div class="col-3 order-first pr-md-1" >
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="Role"
|
|
|
|
v-model="noderole"
|
|
|
|
>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
|
|
|
|
<div class="col-3 pr-md-1" >
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="Zones"
|
|
|
|
v-model="nodezones"
|
|
|
|
>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
|
|
|
|
<div class="col-3 pr-md-1" >
|
|
|
|
<input type="text"
|
|
|
|
class="form-control"
|
|
|
|
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
|
|
|
|
placeholder="nodedesc"
|
|
|
|
v-model="nodedesc"
|
|
|
|
>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
</div> <!-- row -->
|
|
|
|
|
|
|
|
<!-- add newROW ---------------------------------------------------- -->
|
|
|
|
<div class="row" >
|
|
|
|
<div class="col-2 pr-md-1" >
|
|
|
|
<div class="input-group input-group-sm sm-3">
|
|
|
|
<div class="input-group-append">
|
|
|
|
|
|
|
|
<button
|
|
|
|
class="btn btn-outline-primary"
|
|
|
|
round
|
|
|
|
type="button"
|
|
|
|
v-if="nodeadminupdate"
|
|
|
|
@click="onAction('update')">
|
|
|
|
update</button>
|
|
|
|
<button
|
|
|
|
class="btn btn-outline-primary"
|
|
|
|
round
|
|
|
|
type="button"
|
|
|
|
v-else
|
|
|
|
@click="onAction('addserver')">
|
|
|
|
add</button>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="input-group-append">
|
|
|
|
<button class="btn btn-outline-secondary"
|
|
|
|
round
|
|
|
|
type="button"
|
|
|
|
@click="onAction('cancel')"
|
|
|
|
>
|
|
|
|
Cancel</button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div> <!-- coll -->
|
|
|
|
</div> <!-- row -->
|
|
|
|
</card> <!-- card -->
|
|
|
|
<!-- add newNODE -->
|
|
|
|
|
|
|
|
<div class="white h-100 flex-fixed-width-item"
|
|
|
|
<vuetable
|
|
|
|
ref="vuetable"
|
|
|
|
:key="vuetablekeyc"
|
|
|
|
: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"
|
|
|
|
>
|
|
|
|
<template slot="actions" slot-scope="props">
|
|
|
|
<div class="table-button-container">
|
|
|
|
<button
|
|
|
|
class="ti-pencil btn btn-outline-secondary btn-sm"
|
|
|
|
@click="onAction('edit', props.rowData, props.rowIndex)"
|
|
|
|
>
|
|
|
|
</button>
|
|
|
|
<button
|
|
|
|
round
|
|
|
|
class="ti-trash btn btn-outline-secondary btn-sm"
|
|
|
|
@click="onAction('rm', props.rowData, props.rowIndex)"
|
|
|
|
>
|
|
|
|
</button>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</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 card from '@/components/Card.vue'
|
|
|
|
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 {ApiConfig} from "@/config/index";
|
|
|
|
import { extend } from 'vee-validate';
|
|
|
|
import { required, alpha_num } from 'vee-validate/dist/rules';
|
|
|
|
|
|
|
|
// No message specified.
|
|
|
|
extend('alpha_num', alpha_num);
|
|
|
|
|
|
|
|
// Override the default message.
|
|
|
|
extend('required', {
|
|
|
|
...required,
|
|
|
|
message: 'This field is required'
|
|
|
|
});
|
|
|
|
export default {
|
|
|
|
components: {
|
|
|
|
card,
|
|
|
|
Vuetable,
|
|
|
|
VuetablePagination,
|
|
|
|
VuetablePaginationInfo,
|
|
|
|
VuetablePaginationDropdown
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
return{
|
|
|
|
token: '',
|
|
|
|
valid:false,
|
|
|
|
nodeadmin:false,
|
|
|
|
nodeadminupdate:false,
|
|
|
|
rowdata:{},
|
|
|
|
nodename:'',
|
|
|
|
nodeid:'',
|
|
|
|
nodeip:'',
|
|
|
|
noderole:'',
|
|
|
|
nodezones:'',
|
|
|
|
nodedesc:'',
|
|
|
|
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,
|
|
|
|
vuetablekeyc:0,
|
|
|
|
fielddata:{},
|
|
|
|
fields: [
|
|
|
|
{
|
|
|
|
name: 'name',
|
|
|
|
title: '<span class="orange"></span>Name',
|
|
|
|
sortField: 'name',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
visible:true,
|
|
|
|
dataClass: "center aligned",
|
|
|
|
width: '20%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'nodeid',
|
|
|
|
title: '<span class="text-warning">nodeid</span>',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
sortField: 'nodeid',
|
|
|
|
visible:true,
|
|
|
|
width: '20%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'ip',
|
|
|
|
title: '<span class="orange"></span>IP',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
sortField: 'swarmlabname',
|
|
|
|
visible:true,
|
|
|
|
width: '13%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'role',
|
|
|
|
title: '<span class="orange"></span>Role',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
sortField: 'role',
|
|
|
|
visible:true,
|
|
|
|
width: '15%',
|
|
|
|
formatter (value) {
|
|
|
|
const result = /^ondemand_playground/.test(value);
|
|
|
|
if (result) {
|
|
|
|
var v = '<p class="text-warning">Playground</p>'
|
|
|
|
return v
|
|
|
|
}else{
|
|
|
|
var v = '<p class="text-info">Lab</p>'
|
|
|
|
return v
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'zones',
|
|
|
|
title: '<span class="text-warning">Zones</span>',
|
|
|
|
sortField: 'zones',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
visible:true,
|
|
|
|
width: '20%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: 'status',
|
|
|
|
title: '<span class="orange"></span>Status',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
sortField: 'status',
|
|
|
|
visible:true,
|
|
|
|
width: '5%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '__slot:actions',
|
|
|
|
title: 'Actions',
|
|
|
|
titleClass: 'text-center aligned',
|
|
|
|
dataClass: "text-center aligned",
|
|
|
|
width: '10%'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
name: '_id',
|
|
|
|
title: '<span class="orange"></span>mongo',
|
|
|
|
visible:false
|
|
|
|
}
|
|
|
|
],
|
|
|
|
//apiurl:ApiConfig.url_80+"/swarmlabservices",
|
|
|
|
apiurl:ApiConfig.swarmlab_url_80+"/getswarmlabhybrid",
|
|
|
|
css: CssConfig,
|
|
|
|
perpage: 9,
|
|
|
|
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': 'hybrid'
|
|
|
|
},
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
},
|
|
|
|
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 () {
|
|
|
|
},
|
|
|
|
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!'
|
|
|
|
})
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
var log1 = await store.dispatch("pipelineLLO/swarmlabhybridjoin",{
|
|
|
|
token:this.token,
|
|
|
|
action:'join'
|
|
|
|
})
|
|
|
|
//console.log(JSON.stringify(log1))
|
|
|
|
|
|
|
|
if(action == 'edit' ){
|
|
|
|
this.nodeadmin = true
|
|
|
|
this.nodeadminupdate = true
|
|
|
|
this.nodeid = data.nodeid
|
|
|
|
this.nodeip = data.ip
|
|
|
|
this.nodename = data.name
|
|
|
|
this.noderole = data.role
|
|
|
|
this.nodezones = data.zones
|
|
|
|
this.nodedesc = data.description
|
|
|
|
//console.log(JSON.stringify(data))
|
|
|
|
//console.log(JSON.stringify(index))
|
|
|
|
}else if(action == 'update' ){
|
|
|
|
await this.$refs.provider.validate().then(success => {
|
|
|
|
if (success.valid) {
|
|
|
|
this.valid = true
|
|
|
|
//console.log('valid '+JSON.stringify(success))
|
|
|
|
}else{
|
|
|
|
this.valid = false
|
|
|
|
//console.log('no valid'+JSON.stringify(success))
|
|
|
|
}
|
|
|
|
});
|
|
|
|
if (this.valid) {
|
|
|
|
var log = await store.dispatch("pipelineLLO/swarmlabhybridadd",{
|
|
|
|
token:this.token,
|
|
|
|
action:'add',
|
|
|
|
nodeid: this.nodeid,
|
|
|
|
nodeip: this.nodeip,
|
|
|
|
nodename: this.nodename,
|
|
|
|
noderole: this.noderole,
|
|
|
|
nodezones: this.nodezones,
|
|
|
|
nodedesc: this.nodedesc
|
|
|
|
})
|
|
|
|
//console.log(this.nodename)
|
|
|
|
//console.log(this.nodeid)
|
|
|
|
//console.log(this.nodeip)
|
|
|
|
//console.log(this.noderole)
|
|
|
|
//console.log(this.nodezones)
|
|
|
|
//console.log(this.nodedesc)
|
|
|
|
Vue.nextTick( () => this.$refs.vuetable.refresh())
|
|
|
|
}
|
|
|
|
}else if(action == 'rm' ){
|
|
|
|
this.rowdata = data
|
|
|
|
this.$swal({
|
|
|
|
type: 'info',
|
|
|
|
html: 'info',
|
|
|
|
showCloseButton: true,
|
|
|
|
showLoaderOnConfirm: false,
|
|
|
|
allowOutsideClick: false,
|
|
|
|
cancelButtonText: 'No, cancel!',
|
|
|
|
showCancelButton: true,
|
|
|
|
showLoaderOnConfirm: false,
|
|
|
|
reverseButtons: true,
|
|
|
|
focusCancel: true,
|
|
|
|
confirmButtonText: 'Yes, Delete it!'
|
|
|
|
}).then((result)=> {
|
|
|
|
this.rmAndClose(result);
|
|
|
|
})
|
|
|
|
|
|
|
|
}else if(action == 'add' ){
|
|
|
|
this.nodeadmin = true
|
|
|
|
this.nodeadminupdate = false
|
|
|
|
}else if(action == 'addserver' ){
|
|
|
|
await this.$refs.provider.validate().then(success => {
|
|
|
|
if (success.valid) {
|
|
|
|
this.valid = true
|
|
|
|
//console.log('valid '+JSON.stringify(success))
|
|
|
|
}else{
|
|
|
|
this.valid = false
|
|
|
|
//console.log('no valid'+JSON.stringify(success))
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
if (this.valid) {
|
|
|
|
this.nodeadmin = false
|
|
|
|
this.nodeadminupdate = false
|
|
|
|
var log = await store.dispatch("pipelineLLO/swarmlabhybridadd",{
|
|
|
|
token:this.token,
|
|
|
|
action:'add',
|
|
|
|
nodeid: this.nodeid,
|
|
|
|
nodeip: this.nodeip,
|
|
|
|
nodename: this.nodename,
|
|
|
|
noderole: this.noderole,
|
|
|
|
nodezones: this.nodezones,
|
|
|
|
nodedesc: this.nodedesc
|
|
|
|
})
|
|
|
|
Vue.nextTick( () => this.$refs.vuetable.refresh())
|
|
|
|
//console.log(JSON.stringify(log))
|
|
|
|
}
|
|
|
|
}else if(action == 'cancel' ){
|
|
|
|
this.nodeadmin = false
|
|
|
|
this.nodeadminupdate = false
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async rmAndClose(result) {
|
|
|
|
var log = await store.dispatch("pipelineLLO/getswarmlabhybridinfo",{
|
|
|
|
token:this.token,
|
|
|
|
nodezones: this.rowdata.zones
|
|
|
|
})
|
|
|
|
if(result.value){
|
|
|
|
var log = await store.dispatch("pipelineLLO/swarmlabhybridrm",{
|
|
|
|
token:this.token,
|
|
|
|
action:'rm',
|
|
|
|
nodeid: this.rowdata.nodeid,
|
|
|
|
nodeip: this.rowdata.ip,
|
|
|
|
nodename: this.rowdata.name,
|
|
|
|
noderole: this.rowdata.role,
|
|
|
|
nodezones: this.rowdata.zones,
|
|
|
|
nodedesc: this.rowdata.description
|
|
|
|
})
|
|
|
|
Vue.nextTick( () => this.$refs.vuetable.refresh())
|
|
|
|
//console.log(JSON.stringify(result))
|
|
|
|
//console.log('rowdara '+JSON.stringify(this.rowdata))
|
|
|
|
|
|
|
|
}
|
|
|
|
},
|
|
|
|
async addAndClose(result) {
|
|
|
|
|
|
|
|
},
|
|
|
|
refreshVuetable() {
|
|
|
|
this.$nextTick(()=>{
|
|
|
|
this.vuetablekeyc += 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
|
|
|
|
},
|
|
|
|
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
|
|
|
|
*/
|
|
|
|
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>
|