zeus
3 years ago
13 changed files with 1060 additions and 11 deletions
File diff suppressed because one or more lines are too long
@ -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.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> |
|||
<!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.5311f292.css" rel="preload" as="style"><link href="/css/chunk-vendors.e469b508.css" rel="preload" as="style"><link href="/js/app.52520ba2.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.5311f292.css" rel="stylesheet"></head><body><div id="app"></div><script src="/js/chunk-vendors.d8d18fe6.js"></script><script src="/js/app.52520ba2.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
@ -0,0 +1,662 @@ |
|||
<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="myRunInstancetutorpoc"> |
|||
<template slot="waiting"> |
|||
<div> |
|||
<img src="@/assets/loading.gif" /> |
|||
Enter Lab_room storage... |
|||
</div> |
|||
</template> |
|||
</v-wait> |
|||
<div class="row text-center"> |
|||
<div class="col-12"> |
|||
<b>Swarmlab <span class="text-info">Proof_of_concept</span> Deploy - Local </b> |
|||
</div> |
|||
</div> |
|||
|
|||
<br> |
|||
|
|||
|
|||
<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>POC Service Options</b> |
|||
</span> |
|||
</b-col> |
|||
</div> |
|||
|
|||
<div class="input-group-append" |
|||
v-if="viewhybridoptions" |
|||
> |
|||
<button class="btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
> |
|||
Admin </button> |
|||
<input type="text" |
|||
class="form-control" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="New Password" |
|||
v-model="hybridoptions.password" |
|||
> |
|||
<button class="btn btn-outline-success" |
|||
round |
|||
type="button" |
|||
@click="checkHybridoptions" |
|||
> |
|||
Up</button> |
|||
</div> |
|||
|
|||
<div class="white h-100 flex-fixed-width-item" |
|||
<vuetable |
|||
ref="vuetable" |
|||
:key="vuetablekeypoc" |
|||
: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="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 Lab_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="Start Lab_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 && testactionrowindex[props.rowData.swarmlabname] != props.rowIndex" |
|||
class="ti-trash btn btn-info btn-sm" |
|||
title="Remove Lab_Instance" |
|||
@click="onAction('delete-item', props.rowData, props.rowIndex)" |
|||
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-install', 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: { |
|||
'index':'', |
|||
'swarmlabname':'', |
|||
'password':'', |
|||
'port':'' |
|||
}, |
|||
viewhybridoptions: false, |
|||
swarmlab:{}, |
|||
playbookInfo: {}, |
|||
token: '', |
|||
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, |
|||
vuetablekeypoc: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+"/swarmlabhybridpoc", |
|||
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_poc', () => { |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}) |
|||
//refresh from socket mytable |
|||
this.$root.$on('hybrid_refresh_table_poc', (v) => { |
|||
this.$nextTick(function () { |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
this.viewhybridoptions = false |
|||
this.$wait.end('myRunInstancetutorpoc'); |
|||
}) |
|||
}) |
|||
}, |
|||
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_poc') |
|||
this.$root.$off('hybrid_refresh_table_poc') |
|||
}, |
|||
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/getpocstatus', obj) |
|||
if(res1.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, data.swarmlabname, index) |
|||
}else{ |
|||
Vue.delete(this.testactionrowindex, data.swarmlabname) |
|||
} |
|||
}else{ |
|||
var obj = {} |
|||
obj.token = this.token |
|||
obj.instance = data.swarmlabname |
|||
var res = await store.dispatch('pipelineLLO/getservicesinfo', obj) |
|||
if(res.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, index, index) |
|||
var res1 = await store.dispatch('pipelineLLO/getpocstatus', obj) |
|||
if(res1.data.data == 'yes'){ |
|||
Vue.set(this.testactionrowindex, data.swarmlabname, index) |
|||
}else{ |
|||
Vue.delete(this.testactionrowindex, data.swarmlabname) |
|||
} |
|||
}else{ |
|||
console.log('resi NO1 '+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/getswarmlabstorageinfo', 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.hybridoptions.swarmlabname = data.swarmlabname |
|||
var info='<h5>This will remove the storage with the name<b> '+ data.swarmlabname +'</b> </h5><br>' |
|||
|
|||
var storage = this.hybridoptions.swarmlabname |
|||
var winfo='' |
|||
|
|||
this.$swal({ |
|||
type: 'info', |
|||
html: info+winfo, |
|||
icon:'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.rmStorageAndClose(result); |
|||
}) |
|||
//Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
this.refreshVuetable() |
|||
}else if(action == 'run-install' ){ |
|||
this.$wait.start('myRunInstancetutorpoc'); |
|||
this.hybridoptions.swarmlabname = data.swarmlabname |
|||
this.hybridoptions.index = index |
|||
let value = {} |
|||
value.swarmlabname = this.hybridoptions.swarmlabname |
|||
value.index = this.hybridoptions.index |
|||
value.size = this.hybridoptions.size |
|||
value.port = this.hybridoptions.port |
|||
var res = await store.dispatch('pipelineLLO/getswarmlabpocinfo', value.swarmlabname) |
|||
var swarmlab1info=res.data.swarmlabinfo |
|||
value.git = swarmlab1info |
|||
this.$root.$emit('hybrid_install_instance_storage', value) |
|||
this.$wait.end('myRunInstancetutorpoc'); |
|||
this.refreshVuetable() |
|||
|
|||
}else if(action == 'run-item' ){ |
|||
this.viewhybridoptions = true |
|||
this.hybridoptions.swarmlabname = data.swarmlabname |
|||
this.hybridoptions.index = index |
|||
/* |
|||
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()) |
|||
*/ |
|||
//Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}else if(action == 'down-item' ){ |
|||
this.hybridoptions.swarmlabname = data.swarmlabname |
|||
this.hybridoptions.index = index |
|||
var info = "Stop and remove storage: containers, networks, images, and volumes" |
|||
this.$swal({ |
|||
type: 'info', |
|||
html: info, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: true, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: false, |
|||
confirmButtonText: 'Yes!' |
|||
}).then((result)=> { |
|||
this.rmAndClose(result); |
|||
}) |
|||
|
|||
//console.log('RUN 1 '+ JSON.stringify(data.swarmlabname)) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
} |
|||
}, |
|||
async rmStorageAndClose(action){ |
|||
if(action.isConfirmed){ |
|||
//this.hybridoptions.swarmlabname = data.swarmlabname |
|||
this.$wait.start('myRunInstancetutorpoc'); |
|||
var res = await store.dispatch('pipelineLLO/rmswarmlablocalpoc', this.hybridoptions.swarmlabname) |
|||
this.$wait.end('myRunInstancetutorpoc'); |
|||
//Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
Vue.delete(this.testactionrowindex, this.hybridoptions.swarmlabname) |
|||
this.refreshVuetable() |
|||
this.$root.$emit('hybrid_refresh_info_deploy_local') |
|||
//console.log('inf res '+ JSON.stringify(res)) |
|||
} |
|||
|
|||
}, |
|||
|
|||
async rmAndClose(result){ |
|||
if (result.isConfirmed) { |
|||
this.$wait.start('myRunInstancetutorpoc'); |
|||
var value = this.hybridoptions.swarmlabname |
|||
this.$root.$emit('hybrid_stop_instance_poc', value) |
|||
Vue.delete(this.testactionrowindex, this.hybridoptions.index) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
}else { |
|||
console.log('no') |
|||
} |
|||
this.refreshVuetable() |
|||
}, |
|||
async checkHybridoptions(){ |
|||
var storage = this.hybridoptions.swarmlabname |
|||
var myaction = {} |
|||
myaction.isConfirmed = 'true' |
|||
this.setHybridoptions(myaction) |
|||
}, |
|||
async setHybridoptions(action){ |
|||
this.$wait.start('myRunInstancetutorpoc'); |
|||
|
|||
//console.log('RUN 1 '+ JSON.stringify(data.swarmlabname)) |
|||
// run on mytable.vue |
|||
let value = {} |
|||
value.swarmlabname = this.hybridoptions.swarmlabname |
|||
value.index = this.hybridoptions.index |
|||
value.password = this.hybridoptions.password |
|||
value.port = this.hybridoptions.port |
|||
this.$root.$emit('hybrid_start_instance_poc', value) |
|||
Vue.set(this.testactionrowindex, value.swarmlabname, value.index) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
|
|||
}, |
|||
refreshVuetable() { |
|||
this.$nextTick(()=>{ |
|||
this.vuetablekeypoc += 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 |
|||
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> |
|||
@ -0,0 +1,70 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
|
|||
<div class="row" > |
|||
<div class="col-7 order-first " > |
|||
<br> |
|||
<!-- |
|||
<view-network> |
|||
|
|||
</view-network> |
|||
--> |
|||
<available-poc |
|||
:key="componentKeyreloadpoc" |
|||
> |
|||
|
|||
</available-poc> |
|||
</div> |
|||
|
|||
<div class="col-5 order-last" > |
|||
<br> |
|||
<adhoc-view> |
|||
|
|||
</adhoc-view> |
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</card> |
|||
</template> |
|||
<script> |
|||
import {mapState, mapGetters, mapActions} from 'vuex' |
|||
//import ViewNetwork from "./mynetwork/mytable.vue"; |
|||
import AdhocView from "./mynetwork/AdhocView.vue"; |
|||
import card from '@/components/Card.vue' |
|||
//import DockerServices from "./mynetwork/dockerservices.vue"; |
|||
//import AvailableServices from "./mynetwork/availableservices.vue"; |
|||
import AvailablePoc from "./mynetwork/availablepoc.vue"; |
|||
export default { |
|||
components: { |
|||
// ViewNetwork, |
|||
AdhocView, |
|||
card, |
|||
// DockerServices, |
|||
AvailablePoc |
|||
}, |
|||
data () { |
|||
return { |
|||
componentKeyreloadpoc:1, |
|||
loading: false, |
|||
consoleView: 'off', |
|||
productIndex: 1 |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$root.$on('hybrid_refresh_info_deploy_local', () => { |
|||
this.componentKeyreloadpoc += 1 |
|||
}) |
|||
}, |
|||
beforeDestroy () { |
|||
this.$root.$off('hybrid_refresh_info_deploy_local') |
|||
}, |
|||
|
|||
|
|||
created () { |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
Loading…
Reference in new issue