zeus
3 years ago
12 changed files with 1695 additions and 85 deletions
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 45 KiB |
@ -0,0 +1,55 @@ |
|||
<template> |
|||
<card class="card-user" style="max-height:100%"> |
|||
|
|||
<div class="row" > |
|||
<div class="col-6 order-first " > |
|||
<br> |
|||
<mydeploy-manage-bootstrap> |
|||
|
|||
</mydeploy-manage-bootstrap> |
|||
</div> |
|||
|
|||
<div class="col-6 order-last" > |
|||
<br> |
|||
|
|||
<mydeploy-manage-view> |
|||
|
|||
</mydeploy-manage-view> |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
|
|||
</card> |
|||
</template> |
|||
<script> |
|||
import {mapState, mapGetters, mapActions} from 'vuex' |
|||
import card from '@/components/Card.vue' |
|||
import MydeployManageBootstrap from "./manageservices/deploy-bootstrap.vue"; |
|||
import MydeployManageView from "./manageservices/view-service.vue"; |
|||
export default { |
|||
components: { |
|||
card, |
|||
MydeployManageBootstrap, |
|||
MydeployManageView |
|||
}, |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
consoleView: 'off', |
|||
productIndex: 1 |
|||
} |
|||
}, |
|||
mounted() { |
|||
}, |
|||
beforeDestroy () { |
|||
}, |
|||
|
|||
|
|||
created () { |
|||
} |
|||
}; |
|||
</script> |
|||
<style> |
|||
</style> |
|||
|
|||
@ -0,0 +1,710 @@ |
|||
<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"> |
|||
<b-row> |
|||
<b-col cols="8"> |
|||
<ValidationProvider |
|||
ref="hybrid_image" |
|||
name="Image" |
|||
rules="required|alpha_num_image" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.image == 1, 'is-invalid': isDeployValid.image == 2}" |
|||
name="Image" |
|||
aria-label="Small" |
|||
aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Image" |
|||
v-model="deploy.image" |
|||
v-on:keyup="isValid('image')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('image')" |
|||
> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
|
|||
<b-col cols="4"> |
|||
<ValidationProvider |
|||
ref="hybrid_stackname" |
|||
name="StackName" |
|||
rules="required|alpha_num_name" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
name="StackName" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.stackname == 1, 'is-invalid': isDeployValid.stackname == 2}" |
|||
aria-label="Small" |
|||
aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="StackName" |
|||
v-model="deploy.stackname" |
|||
v-on:keyup="isValid('stackname')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('stackname')"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
|
|||
</b-row> |
|||
<b-row> |
|||
<b-col cols="8"> |
|||
<ValidationProvider |
|||
ref="hybrid_name" |
|||
name="Name" |
|||
rules="required|alpha_num_name" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type=HybridError |
|||
name="Name" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.name == 1, 'is-invalid': isDeployValid.name == 2}" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Name" |
|||
v-model="deploy.name" |
|||
v-on:keyup="isValid('name')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('name')"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
<b-col cols="4"> |
|||
<ValidationProvider |
|||
ref="hybrid_network" |
|||
name="Network" |
|||
rules="required|alpha_num_name" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
name="Network" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.network == 1, 'is-invalid': isDeployValid.network == 2}" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Network Name" |
|||
v-model="deploy.network" |
|||
v-on:keyup="isValid('network')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('network')"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
</b-row> |
|||
|
|||
<b-row> |
|||
<b-col cols="4"> |
|||
<ValidationProvider |
|||
ref="hybrid_cpu" |
|||
name="Cpu" |
|||
rules="required|alpha_num_cpu" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
name="Cpu" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.cpu == 1, 'is-invalid': isDeployValid.cpu == 2}" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Limit CPU e.g. 0.50" |
|||
v-model="deploy.cpu" |
|||
v-on:keyup="isValid('cpu')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('cpu')" |
|||
> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
<b-col cols="4"> |
|||
<ValidationProvider |
|||
ref="hybrid_memory" |
|||
name="Memory" |
|||
rules="required|alpha_num_memory" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
name="Memory" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.memory == 1, 'is-invalid': isDeployValid.memory == 2}" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Limit Memory e.g. 500" |
|||
v-model="deploy.memory" |
|||
v-on:keyup="isValid('memory')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('memory')"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
<b-col cols="4"> |
|||
<ValidationProvider |
|||
ref="hybrid_networkport" |
|||
name="Networkport" |
|||
rules="mybetween:1,65535" |
|||
v-slot="{ errors, ariaMsg, ariaInput, valid, invalid }" |
|||
> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<input type="text" |
|||
name="Networkport" |
|||
class="form-control" |
|||
v-bind:class="{'is-valid': isDeployValid.networkport == 1, 'is-invalid': isDeployValid.networkport == 2}" |
|||
aria-label="Small" aria-describedby="inputGroup-sizing-sm" |
|||
placeholder="Net Port (inside the container)" |
|||
v-model="deploy.networkport" |
|||
v-on:keyup="isValid('networkport')" |
|||
> |
|||
<div class="input-group-append"> |
|||
<button |
|||
class="ti-info btn btn-outline-secondary" |
|||
round |
|||
type="button" |
|||
@click="showInfo('networkport')"> |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<span class="hybrid-field-error">{{ errors[0] }}</span> |
|||
</ValidationProvider> |
|||
</b-col> |
|||
</b-row> |
|||
|
|||
|
|||
<!-- --------------------------------------------------------- --> |
|||
<!-- -------- lab startdate ----------------------------------- --> |
|||
<!-- --------------------------------------------------------- --> |
|||
<b-row> |
|||
<b-col cols="6"> |
|||
<div class="input-group input-group-sm mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<button class="btn btn-outline-secondary" |
|||
type="button" |
|||
>Start date </button> |
|||
</div> |
|||
<date-picker |
|||
type="date" |
|||
autocomplete="off" |
|||
v-model="deploy.startdate" |
|||
format="YYYY-MM-DD" |
|||
lang="en" |
|||
> |
|||
</date-picker> |
|||
</div> |
|||
</b-col> |
|||
<!-- --------------------------------------------------------- --> |
|||
<!-- -------- lab starttime ----------------------------------- --> |
|||
<!-- --------------------------------------------------------- --> |
|||
<b-col cols="6"> |
|||
<div class="input-group input-group-sm mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<button class="btn btn-outline-secondary" |
|||
type="button" |
|||
>Start time</button> |
|||
</div> |
|||
<date-picker |
|||
type="time" |
|||
:format="'HH:mm'" |
|||
v-model="deploy.starttime" |
|||
show-hour |
|||
show-minute |
|||
:time-picker-options="timePickerOptions" |
|||
lang="en" |
|||
> |
|||
</date-picker> |
|||
</div> |
|||
</b-col> |
|||
</b-row> |
|||
|
|||
<!-- --------------------------------------------------------- --> |
|||
<!-- -------- lab enddate ----------------------------------- --> |
|||
<!-- --------------------------------------------------------- --> |
|||
<b-row> |
|||
<b-col cols="6"> |
|||
<div class="input-group input-group-sm mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<button class="btn btn-outline-secondary" |
|||
type="button" |
|||
>End date </button> |
|||
</div> |
|||
<date-picker |
|||
type="date" |
|||
autocomplete="off" |
|||
v-model="deploy.enddate" |
|||
format="YYYY-MM-DD" |
|||
lang="en" |
|||
> |
|||
</date-picker> |
|||
</div> |
|||
</b-col> |
|||
<!-- --------------------------------------------------------- --> |
|||
<!-- -------- lab endtime ----------------------------------- --> |
|||
<!-- --------------------------------------------------------- --> |
|||
<b-col cols="6"> |
|||
<div class="input-group input-group-sm mb-3"> |
|||
<div class="input-group-prepend"> |
|||
<button class="btn btn-outline-secondary" |
|||
type="button" |
|||
>End time</button> |
|||
</div> |
|||
<date-picker |
|||
type="time" |
|||
:format="'HH:mm'" |
|||
v-model="deploy.endtime" |
|||
show-hour |
|||
show-minute |
|||
:time-picker-options="timePickerOptions" |
|||
lang="en" |
|||
> |
|||
</date-picker> |
|||
</div> |
|||
</b-col> |
|||
</b-row> |
|||
|
|||
|
|||
|
|||
<b-row> |
|||
<b-col cols="6"> |
|||
<div class="input-group input-group-sm sm-3"> |
|||
<div class="input-group-prepend"> |
|||
<button |
|||
class="ti-cloud-up btn btn-outline-success" |
|||
round |
|||
type="button" |
|||
title="Deploy" |
|||
@click="add_deploy()" |
|||
> Deploy |
|||
</button> |
|||
</div> |
|||
</div> |
|||
</b-col> |
|||
|
|||
<b-col cols="2"> |
|||
</b-col> |
|||
|
|||
<b-col cols="4"> |
|||
<div class="custom-control custom-switch"> |
|||
<input type="checkbox" class="custom-control-input" id="customStack" |
|||
v-model="deploy.usersjoin" |
|||
value="true" |
|||
unchecked-value="false" |
|||
> |
|||
<label class="custom-control-label" for="customStack">Users can join the lab instance</label> |
|||
</div> |
|||
</b-col> |
|||
</b-row> |
|||
</b-container> |
|||
</card> |
|||
</template> |
|||
<script> |
|||
import store from '@/store/index' |
|||
import {mapState, mapGetters, mapActions,dispatch} from 'vuex' |
|||
import Vue from 'vue' |
|||
import DatePicker from 'vue2-datepicker' |
|||
import card from '@/components/Card.vue' |
|||
import {ApiConfig} from "@/config/index"; |
|||
import { ValidationObserver, ValidationProvider, extend } from 'vee-validate'; |
|||
import { required, alpha_num, between} from 'vee-validate/dist/rules'; |
|||
import 'vue2-datepicker/index.css'; |
|||
|
|||
// No message specified. |
|||
extend('alpha_num', alpha_num); |
|||
|
|||
extend('mybetween', between); |
|||
extend('mybetween', { |
|||
message: 'The {_field_} field must be a number: 1-65535' |
|||
}); |
|||
|
|||
//extend('alpha_num_image', alpha_num); |
|||
extend('alpha_num_image', value => { |
|||
var regex = new RegExp(/^[A-Za-z0-9\:\.\-\_\/]+$/, 'i'); |
|||
if(regex.test(value)){ |
|||
return true; |
|||
} |
|||
return 'The {_field_} field may contain alphabetic characters, numbers, colons, hyphens, slashes, dots and underscores' |
|||
}); |
|||
|
|||
extend('alpha_num_name', value => { |
|||
var regex = new RegExp(/^[A-Za-z0-9]+$/, 'i'); |
|||
if(regex.test(value)){ |
|||
return true; |
|||
} |
|||
return 'The {_field_} field may contain alphabetic characters and numbers' |
|||
}); |
|||
|
|||
extend('alpha_num_cpu', value => { |
|||
//var regex = new RegExp(/^(?:\d{1})?(?:\.\d{1})?$/); |
|||
var regex = new RegExp(/^(?!0\d)\d+(?:\.\d{1})?$/); |
|||
if(regex.test(value)){ |
|||
return true; |
|||
} |
|||
return 'The {_field_} field may contain numbers and dots e.g 0.5' |
|||
}); |
|||
|
|||
|
|||
extend('alpha_num_memory', value => { |
|||
var regex = new RegExp(/^[0-9]+$/, 'i'); |
|||
if(regex.test(value)){ |
|||
return true; |
|||
} |
|||
return 'The {_field_} field may contain numbers e.g 500' |
|||
}); |
|||
|
|||
// Override the default message. |
|||
extend('required', { |
|||
...required, |
|||
message: 'This field is required' |
|||
}); |
|||
export default { |
|||
components: { |
|||
DatePicker, |
|||
ValidationProvider, |
|||
card |
|||
}, |
|||
props: { |
|||
}, |
|||
data() { |
|||
return{ |
|||
isHybridError: false, |
|||
isHybridSuccess: false, |
|||
token: '', |
|||
timePickerOptions:{ |
|||
start: '00:00', |
|||
step: '00:30', |
|||
end: '23:30' |
|||
}, |
|||
deploy:{ |
|||
"usersjoin":true |
|||
}, |
|||
isDeployValid:{ |
|||
"image":3, |
|||
"name":3, |
|||
"stackname":3, |
|||
"network":3, |
|||
"networkport":3, |
|||
"cpu":3, |
|||
"memory":3 |
|||
}, |
|||
isDeployError:{ |
|||
} |
|||
} |
|||
}, |
|||
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: { |
|||
}, |
|||
|
|||
methods: { |
|||
/* |
|||
async isValidate (event) { |
|||
this.$nextTick(() => { |
|||
//await this.isValid(event) |
|||
console.log("keywords value: " + this.deploy.image); |
|||
}); |
|||
}, |
|||
*/ |
|||
async add_deploy(){ |
|||
|
|||
for (var key in this.deploy) { |
|||
if (this.deploy.hasOwnProperty(key)) { |
|||
this.isValid(this.deploy.hasOwnProperty(key)) |
|||
} |
|||
} |
|||
|
|||
/* |
|||
var log = await store.dispatch("pipelineLLO/adddeploy",{ |
|||
token:this.token, |
|||
deploy:this.deploy |
|||
}) |
|||
this.$root.$emit('hybrid_refresh_bootstrap_view') |
|||
*/ |
|||
}, |
|||
async showInfo(action){ |
|||
if(action == 'image' ){ |
|||
var info=`<h5>To start, we need to have a <b>docker image </b> <br> |
|||
<br> We have built some. You can find it here: Menu "Images"</h5> |
|||
<h6>More Info here: <a href="https://en.wikipedia.org/wiki/Docker_(software)" target="new">Wikipedia</a> , <a href="https://www.docker.com/resources/what-container" target="new">Docker</a> </h6> |
|||
<br> |
|||
<br> |
|||
The field may contain alphabetic characters, numbers, colons, hyphens, slashes, dots and underscores |
|||
` |
|||
}else if(action == 'stackname'){ |
|||
var info=`<h5>To start, we need to have a <b>Stack Name </b> <br> |
|||
<br> This will bring up all the services, volumes, networks and everything else <br> in an isolated environment. |
|||
</h6> |
|||
<br> |
|||
<br> |
|||
The field may contain alphabetic characters and numbers |
|||
` |
|||
}else if(action == 'network'){ |
|||
var info=`<h5>To start, we need to have a <b>Network </b> <br> |
|||
<br> This will bring up all the services, volumes, networks and everything else <br> in an isolated network environment. |
|||
<br> |
|||
<br> |
|||
Services running inside any of this networks containers have access (not limited by any firewall) to all other services. |
|||
<br> |
|||
</h5> |
|||
<br> |
|||
<br> |
|||
The field may contain alphabetic characters and numbers |
|||
|
|||
` |
|||
}else if(action == 'networkport'){ |
|||
var info=`<h5><b>Network Port </b></h5> |
|||
<br> |
|||
<h5> |
|||
By default, when you create a container, <b>it does not publish any of its ports to the outside world. </b> |
|||
<br> |
|||
To make a port available to Services which are not connected to the Stack network, we use this port. |
|||
</h5> |
|||
<br> |
|||
<h5> |
|||
<u> |
|||
To make a service available we have to know the port number used by these service inside the container. |
|||
</u> |
|||
<br> |
|||
<b>Please insert that here.</b> |
|||
</h5> |
|||
<br> |
|||
<br> |
|||
(The port for outside connections is automatically generated and you dont have to worry about it!) |
|||
<br> |
|||
<br> |
|||
The field may contain numbers |
|||
` |
|||
}else if(action == 'cpu'){ |
|||
var info=`<h5>To start, we need to have a <b>CPU </b> Limit <br> |
|||
<br> Limit the specific CPUs or cores a container can use |
|||
</h6> |
|||
<br> |
|||
<br> |
|||
The field may contain numbers and dots e.g 0.5 |
|||
` |
|||
}else if(action == 'memory'){ |
|||
var info=`<h5>To start, we need to have a <b>Memory </b> Limit |
|||
<br> <br> Limit the specific Memoty a container can use <br> |
|||
e.g 200 |
|||
<br> |
|||
(MB) |
|||
</h6> |
|||
<br> |
|||
<br> |
|||
<h6> |
|||
<i> |
|||
It is important <b>not</b> to allow a running container to consume too much of the host machine’s memory. |
|||
</i> |
|||
</h6> |
|||
<br> |
|||
<br> |
|||
The field may contain numbers |
|||
` |
|||
}else if(action == 'name'){ |
|||
var info=`<h5>To start, we need to have a <b>Name </b><br> |
|||
This name is only for your own use. The system completely disregards it! |
|||
</h5> |
|||
<br> |
|||
<br> |
|||
The field may contain alphabetic characters and numbers |
|||
` |
|||
} |
|||
this.$swal({ |
|||
type: 'Info', |
|||
title: 'Info!', |
|||
icon:'info', |
|||
html: info, |
|||
showCloseButton: true, |
|||
showLoaderOnConfirm: false, |
|||
allowOutsideClick: false, |
|||
cancelButtonText: 'No, cancel!', |
|||
showCancelButton: false, |
|||
showLoaderOnConfirm: false, |
|||
reverseButtons: true, |
|||
focusCancel: true, |
|||
confirmButtonText: 'Ok!' |
|||
}) |
|||
}, |
|||
async isValid(f){ |
|||
|
|||
// ------------ |
|||
// validate |
|||
// ------------ |
|||
if(f == 'image'){ |
|||
console.log(this.deploy.image) |
|||
var field = await this.$refs.hybrid_image.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.image = 1 |
|||
}else{ |
|||
this.isDeployValid.image = 2 |
|||
} |
|||
//console.log(JSON.stringify(f_image)) |
|||
//console.log(this.isDeployValid.image) |
|||
}else if(f == 'stackname'){ |
|||
var field = await this.$refs.hybrid_stackname.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.stackname = 1 |
|||
}else{ |
|||
this.isDeployValid.stackname = 2 |
|||
} |
|||
}else if(f == 'network'){ |
|||
var field = await this.$refs.hybrid_network.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.network = 1 |
|||
}else{ |
|||
this.isDeployValid.network = 2 |
|||
} |
|||
}else if(f == 'networkport'){ |
|||
var field = await this.$refs.hybrid_networkport.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.networkport = 1 |
|||
}else{ |
|||
this.isDeployValid.networkport = 2 |
|||
} |
|||
}else if(f == 'cpu'){ |
|||
var field = await this.$refs.hybrid_cpu.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.cpu = 1 |
|||
}else{ |
|||
this.isDeployValid.cpu = 2 |
|||
} |
|||
}else if(f == 'memory'){ |
|||
var field = await this.$refs.hybrid_memory.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.memory = 1 |
|||
}else{ |
|||
this.isDeployValid.memory = 2 |
|||
} |
|||
}else if(f == 'name'){ |
|||
var field = await this.$refs.hybrid_name.validate(); |
|||
if(field.valid == true){ |
|||
this.isDeployValid.name = 1 |
|||
}else{ |
|||
this.isDeployValid.name = 2 |
|||
} |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
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; |
|||
} |
|||
.hybrid-field-error { |
|||
color: red; |
|||
} |
|||
|
|||
.hybrid-error { |
|||
color: red; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,600 @@ |
|||
<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" > |
|||
<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" |
|||
> |
|||
Remove Stack |
|||
</button> |
|||
</div> |
|||
</div> |
|||
<div class="col-3 text-info" > |
|||
<div class="input-group-prepend"> |
|||
<button |
|||
class="btn btn-outline-warning" |
|||
round |
|||
type="button" |
|||
@click="onActionHybrid('stack-restart')" |
|||
v-if="hybridshowdata.bootstrapstackname" |
|||
> |
|||
Restart 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-warning" |
|||
round |
|||
type="button" |
|||
@click="onActionHybrid('service-restart')" |
|||
v-if="hybridshowdata.bootstrapnameid && hybridshowdata.status" |
|||
> |
|||
Restart Service |
|||
</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="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="actions" slot-scope="props"> |
|||
<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> |
|||
</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{ |
|||
actionrowindex:'', |
|||
playbookInfo: {}, |
|||
hybridshowdata:{}, |
|||
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: '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: '15%' |
|||
|
|||
}, |
|||
{ |
|||
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>Join', |
|||
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: 'ID', |
|||
sortField: 'ID', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'left aligned w-25', |
|||
visible:false, |
|||
width: '15%' |
|||
}, |
|||
{ |
|||
name: '__slot:actions', // <---- |
|||
title: 'Actions', |
|||
titleClass: 'center aligned', |
|||
dataClass: 'center aligned', |
|||
width: '5%' |
|||
} |
|||
], |
|||
apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridbootstrapservices", |
|||
//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', |
|||
'tutor': 'yes' |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
mounted() { |
|||
this.$root.$on('hybrid_refresh_bootstrap_view', () => { |
|||
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()) |
|||
this.viewhybridoptions = false |
|||
}) |
|||
}) |
|||
*/ |
|||
}, |
|||
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') |
|||
//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: { |
|||
async onActionHybrid(action) { |
|||
|
|||
if(action == 'stack-stop' ){ |
|||
var info='<h5>This will remove the stack with the name<b> '+ this.hybridshowdata.bootstrapstackname +'</b> <br><br> Services, networks, and secrets associated with the stack will be removed. </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)=> { |
|||
//console.log(JSON.stringify(result)) |
|||
this.onActionHybrid_stackrm(result); |
|||
}) |
|||
|
|||
}else if(action == 'service-stop' ){ |
|||
var log = await store.dispatch("pipelineLLO/hybrid_servicerm",{ |
|||
token:this.token, |
|||
bootstrapstackid:this.hybridshowdata.bootstrapstackid, |
|||
bootstrapnameid:this.hybridshowdata.bootstrapnameid |
|||
}) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
} |
|||
|
|||
}, |
|||
async onActionHybrid_stackrm(action) { |
|||
if(action.isConfirmed){ |
|||
var log = await store.dispatch("pipelineLLO/stackrm",{ |
|||
token:this.token, |
|||
bootstrapstackid:this.hybridshowdata.bootstrapstackid |
|||
}) |
|||
Vue.nextTick( () => this.$refs.vuetable.refresh()) |
|||
} |
|||
}, |
|||
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.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> |
|||
Loading…
Reference in new issue