You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

671 lines
20 KiB

3 years ago
<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="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="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"
>
<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,
vuetablekey: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) {
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.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>