swarmlab-hybrid/src/components/manageservices/deploy-bootstrap.vue

<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(){
      
			var o = Object.entries(this.deploy)
			var pvalid = new Promise((resolve, reject) => {
				o.forEach((value, index, array) => {
						this.isValid(array[index][0])
						if (index === array.length -1) resolve();
				});
			});

		pvalid.then(() => {
      (async () => {
          var isAllValid = true
					for (const [key, value] of Object.entries(this.isDeployValid)) {
						console.log(`${key}: ${value}`);
						if(value != 1){
              isAllValid = false
						}
					}
					if(isAllValid){ 
							var log = await store.dispatch("pipelineLLO/adddeploy",{
								token:this.token,
								deploy:this.deploy
							})
							this.$root.$emit('hybrid_refresh_bootstrap_view')
					}else{
							var info = "Missing required fields"
							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 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>