Browse Source

add inf

master
zeus 2 years ago
parent
commit
d95fbf1635
  1. 2
      src/App.vue
  2. 2
      src/components/mynetwork/availablemicroservices.vue
  3. 71
      src/components/mynetwork/availablemicroservicescustom.vue
  4. 416
      src/components/mynetwork/customservices.vue
  5. 1
      src/store/modules/create_pipelineLLO.js

2
src/App.vue

@ -714,6 +714,8 @@ export default {
},
created() {
},
methods: {
setWarning(){

2
src/components/mynetwork/availablemicroservices.vue

@ -432,7 +432,7 @@ export default {
//console.log('---- '+ value)
if (value) {
var tmp = value.split('-')
var v = `<span class="text-muted">${tmp[1]} </span> <span class="text-muted"></span>`
var v = `<span class="text-muted" title="Click to Run!">${tmp[1]} </span> <span class="text-muted"></span>`
return v
}else{
var v = '<span> </span>'

71
src/components/mynetwork/availablemicroservicescustom.vue

@ -34,6 +34,58 @@
Refresh Table</button>
</div>
<button
class="btn btn-sm"
type="radio"
name="options"
>
<span class="text-light">&nbsp;</span>
</button>
<!-- Public -->
<button
v-if="form_visibility == 'Public'"
class="btn btn-info btn-sm"
type="radio"
name="options"
disabled
v-model="form_visibility"
>
<span class="text-light">Public</span>
</button>
<button
v-if="form_visibility == 'Public'"
class="btn btn-outline-secondary btn-sm"
type="radio"
name="options"
v-model="form_visibility"
@click="onSwitch('Private')"
>
<span class="text-muted">Shared</span>
</button>
<!-- Private -->
<button
v-if="form_visibility == 'Private'"
class="btn btn-outline-secondary btn-sm"
type="radio"
name="options"
v-model="form_visibility"
@click="onSwitch('Public')"
>
<span class="text-muted">Public</span>
</button>
<button
v-if="form_visibility == 'Private'"
class="btn btn-info btn-sm"
type="radio"
name="options"
disabled
v-model="form_visibility"
>
<span class="text-light">Shared</span>
</button>
<input type="text"
class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@ -42,6 +94,12 @@
@keyup.enter="setFilter"
>
<div class="input-group-append">
<button
class="btn btn-outline-primary"
@ -353,6 +411,7 @@ export default {
data() {
return{
startservice: true,
form_visibility:'Public',
actionrowindex: false,
actionrowindexmore: true,
swarmlabinfonow:false,
@ -577,6 +636,18 @@ export default {
},
methods: {
async onSwitch(value) {
console.log(value)
this.form_visibility = value
this.selected = this.form_visibility
this.moreParams = {
'filter': this.searchFor,
'type': this.selected
}
this.$nextTick(()=>{
this.vuetablekeygusersservices += 1
})
},
onActionmore () {
this.actionrowindex = true
this.actionrowindexmore = false

416
src/components/mynetwork/customservices.vue

@ -40,10 +40,11 @@
>
<div class="input-group-prepend">
<button
class="ti-info btn btn-outline-secondary btn-sm"
class=" btn btn-outline-info btn-sm"
title="Info"
round
@click="onAction('form_baseservice')">
Build reference
</button>
</div>
</div>
@ -219,6 +220,22 @@
>
<span class="text-light">Private</span>
</button>
<input
type="text"
class="form-control"
v-model="form_visibility_users"
placeholder="Grant users with an account access to your Service"
name="myGitrepo"
aria-describedby="validationTooltipUsernamePrepend"
>
<div class="input-group-prepend">
<button
class="ti-info btn btn-outline-secondary btn-sm"
title="Info"
round
@click="onAction('form_visibility_users')">
</button>
</div>
</div>
</div>
@ -228,14 +245,13 @@
<div class="row"
<b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group">
<label for="customreadme" class="text-dark"> <b> <span class="text-dark">README </span></b> <br>
<button
class="ti-info btn btn-outline-secondary btn-sm"
class=" btn btn-outline-secondary btn-sm"
title="Info"
round
@click="onAction('form_readme')">
README
</button>
</label>
<textarea class="form-control" name="customreadme" rows="8"
v-model="form_readme"
>
@ -249,17 +265,16 @@
<div class="row"
<b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group">
<label for="custompackages" class="text-dark"><b> <span class="text-dark">Add Extrapackages</span></b> (e.g. apt, apk etc) <br>
<button
class="ti-info btn btn-outline-secondary btn-sm"
class=" btn btn-outline-secondary btn-sm"
title="Info"
round
@click="onAction('form_os')">
Add Extrapackages
</button>
<span class="text-success">
{{ customostext }}
</span >
</label>
<textarea class="form-control" name="custompackages" rows="8"
placeholder="e.g. apt-get update && apt-get -y install or apk update && apk add --no-cache "
v-model="form_os"
@ -273,17 +288,16 @@
<div class="row"
<b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group">
<label for="customshell" class="text-dark"><b><span class="text-dark">Custom sh script </span></b> <br>
<button
class="ti-info btn btn-outline-secondary btn-sm"
class=" btn btn-outline-secondary btn-sm"
title="Info"
round
@click="onAction('form_sh')">
Custom sh script
</button>
<span class="text-success">
{{ customshtext }}
</span >
</label>
<textarea class="form-control" name="customshell" rows="8"
placeholder="#!/bin/bash "
v-model="form_sh"
@ -298,10 +312,11 @@
<div class="col-sm-12 sm-12">
<div class="text-center">
<button
class="ti-info btn btn-outline-secondary btn-sm align-center"
class="btn btn-outline-secondary btn-sm align-center"
title="Info"
round
@click="onAction('port')">
Port - URI - Name
</button>
</div>
</div>
@ -443,21 +458,20 @@
</div>
<br>
<div class="row"
<b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group">
<label for="rclocal" class="text-dark"><b><span class="text-dark">rc.local</span></b> <br>
<button
class="ti-info btn btn-outline-secondary btn-sm"
class=" btn btn-outline-secondary btn-sm"
title="Info"
round
@click="onAction('form_rclocal')">
rc.local
</button>
<span class="text-success">
{{ customshtext }}
</span >
</label>
<textarea class="form-control" name="rclocal" rows="8"
v-model="form_rclocal"
>
@ -560,6 +574,7 @@ export default {
'form_name3':'',
'form_gitrepo':'',
'form_visibility':'Public',
'form_visibility_users':'',
customservice: {
'myservicename':'',
'os':'',
@ -686,6 +701,7 @@ export default {
this.customservice.myservicename = service.log.data.data.service
this.customservice.baseservice = service.log.data.data.baseservice
this.customservice.visibility = service.log.data.data.visibility
this.customservice.visibility_users = service.log.data.data.visibility_users
this.customservice.sh = service.log.data.data.sh
this.customservice.os = service.log.data.data.packages
this.customservice.readme = service.log.data.data.readme
@ -743,59 +759,377 @@ export default {
var info='<h5></h5>'
if(value == "form_myservicename"){
info='<h5 class="text-info">Service Name</h5>'
infotxt += `The <b>myServicename</b> field may contain alphabetic characters and numbers Service Version.
infotxt += `The base image you wish to use.
<br>
<br>
Here you should select the one closest to your final product to minimize the changes you will have to make.
`
}else if(value == "form_version"){
info='<h5 class="text-info">Service Version</h5>'
infotxt += `The <b>Version</b> field may contain alphabetic characters and numbers Service Version.
infotxt += `
The field may contain alphanumeric characters to describe the service Name
`
}else if(value == "form_baseservice"){
info='<h5 class="text-info">Docker base image</h5>'
infotxt += `<br>
A base image is the image that is used to create all of your container images. <br>`
info='<h5 class="text-info">Swarmlab Build reference</h5>'
infotxt += `<div class="container-fluid">
<div class="overflow-auto" style="height: 500px;">
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Base Service Name</h5>
<small class="text-muted">required field</small>
</div>
<p class="mb-1 text-left text-muted">
<em>
The base image you wish to use. Here you should select the one closest to your final product to minimize the changes you will have to make.
</em>
</p>
<small class="text-muted">
Field may contain alphanumeric characters
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Service Name</h5>
<small class="text-muted">required field</small>
</div>
<p class="mb-1 text-left text-muted">
The field may contain alphanumeric characters to describe the service Name
<br>
e.g. pythonscipy
</p>
<small class="text-muted">
Field may contain alphabetic characters and numbers
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Service Version</h5>
<small class="text-muted">required field</small>
</div>
<p class="mb-1 text-left text-muted">
The field may contain alphanumeric characters to describe the service version
</p>
<small class="text-muted">
Field may contain alphabetic characters and numbers
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Git Repo </h5>
<small class="text-muted">required field</small>
</div>
<p class="mb-1 text-left text-muted">
This is the git repository associated with your project. Here you can upload all the necessary files for your service.
<br>
<b>for example </b>
<br>
- if you are performing a task for a tutor you might want to include filed needed to run it
<br>
- or if the projects is shared between multiple students you will have to include the files for everyone to use
<br>
This way we have a centralized store for our projectss files
</p>
<small class="text-muted">
Field may contain a valid URL
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">README</h5>
<small class="text-muted">Optional</small>
</div>
<p class="mb-1 text-left text-muted">
Build Description: a simple description of the services provided
</p>
<small class="text-muted">
Text
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Add Extrapackages</h5>
<small class="text-muted">Optional </small>
</div>
<p class="mb-1 text-left text-muted">
<em>
sh script to install packages
<br>
<span class="align-center"><b>Examples</b></span>
<br>
apt update && apt install -y vim
<br>
OR
<br>
apk update && apk add --no-cache vim
<br>
the file needs to contain the commands in ONE LINE!
</em>
</p>
<small class="text-muted">
apt-get, apk etc
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Custom sh script </h5>
<small class="text-muted">Optional</small>
</div>
<p class="mb-1 text-left text-muted">
a script intended to be run after the installation is done to automate system update, extra software installation and configuration.
<br>
It is executed after "add packages" step has finished
<br>
Here you can make changes or install other software for example programs that cannot be found using the package manager
</p>
<small class="text-muted">
sh script
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">Port - URI - Name </h5>
<small class="text-muted">Optional</small>
</div>
<p class="mb-1 text-left text-muted">
Here you can declare the services you wish to start and publish.
<br>
<br>
<b>Published ports</b>:
By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br>
To make a port available to services outside of Docker, or to Docker containers which are not connected to the containers network, use the "Port" field.
</p>
<p class="mb-1 text-left text-muted">
<b>URI</b>: http/https
</p>
<p class="mb-1 text-left text-muted">
<b>Name</b>:
this is the name used by the end user : Try to be clear using few words!
</p>
<small class="text-muted">
UDP Port: add <b>/udp</b> suffix to the port number
</small>
</a>
</div>
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action flex-column align-items-start">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1 text-muted ">rc.local</h5>
<small class="text-muted">Optional</small>
</div>
<p class="mb-1 text-left text-muted">
Here you may start additional services. Please keep in mind that they WILL NOT be started automatically! You HAVE to start them here!
<br>
<br>
It is executed after all build processes are finished.
</p>
<small class="text-muted">
sh script
</small>
</a>
</div>
</div>
</div>
`
}else if(value == "form_gitrepo"){
info='<h5 class="text-info">Git-repo</h5>'
infotxt += `<b>The git repository associated with your project.</b><br> <br>
A string that contains a valid URL
infotxt += `
<div class="text-left">
This is the git repository associated with your project.
<br>
Here you can upload all the necessary files for your service.
<br>
<br>
<b>for example </b>
<ul>
<li>
if you are performing a task for a tutor you might want to include filed needed to run it
</li>
<li>
or if the projects is shared between multiple students you will have to include the files for everyone to use
</li>
</ul>
<br>
<br>
This way we have a centralized store for our projectss files
</div>
`
}else if(value == "form_rclocal"){
info='<h5 class="text-info">rc.local</h5>'
infotxt += `<b>Define startup scripts or additional services to start.</b><br><br> It is executed after all build processes are finished.`
infotxt += `
<p class="mb-1 text-left text-muted">
Here you may start additional services.
<br>
<br>
Please keep in mind that they WILL NOT be started automatically! You HAVE to start them here!
<br>
<br>
It is executed after all build processes are finished.
</p>
<small class="text-muted">
sh script
</small>
`
}else if(value == "form_sh"){
info='<h5 class="text-info">Custom sh script </h5>'
infotxt += `<b>A sh script intended to be run after a fresh installation in order to automate system update, extra software installation and a couple configuration files setup. </b> <br><br> It is executed after "Add Extrapackages" are finished.`
}else if(value == "form_os"){
info='<h5 class="text-info">Add Extrapackages </h5>'
infotxt += `<b>sh script to install packages on Base system.</b> <br>
<br>
infotxt += `
<p class="mb-1 text-left text-muted">
A script intended to be run after the installation is done to automate system update, extra software installation and configuration.
<br>
<br>
It is executed after "add packages" step has finished
<br>
<br>
Here you can make changes or install other software for example programs that cannot be found using the package manager
</p>
<small class="text-muted">
sh script
</small>
`
}else if(value == "form_visibility_users"){
info=`<h5 class="text-info"> Grant users access to your Service </h5>
please add the email addresses of the users you would like to invite separated with comas
<br>
<br><b>Examples</b>
<br>
user1@email.com,user2@foo.com
<br>
apt update && apt install -y vim
<br>
<a href="https://help.ubuntu.com/community/AptGet/Howto?action=show&redirect=AptGetHowto" target="_blank">Info</a>
<span class="text-warning"> NOTE </span>
<br>
<p>
swarmlab.io uses GitHub as an Identity Provider
<br>
<br>
To avoid further naming issues swarmlab uses the <b>email used with the oauth provider</b> as the identification key.
<br>
<br>
<i> This ensures that multiple accounts with different providers and the same name won't be messed up within swarmlab</i>
</p>
`
}else if(value == "form_os"){
info='<h5 class="text-info">Add Extrapackages </h5>'
infotxt += `
<p class="mb-1 text-left text-muted">
<em>
sh script to install packages
<br>
<br>
<span class="align-center"><b>Examples</b></span>
<br>
apt update &amp;&amp; apt install -y vim
<br>
OR
<br>
apk update &amp;&amp; apk add --no-cache vim
<br>
apk update && apk add --no-cache vim
<br>
The file needs to contain the commands in ONE LINE!
</em>
</p>
<small class="text-muted">
apt-get, apk etc
</small>
<br>
<a href="https://wiki.alpinelinux.org/wiki/Package_management" target="_blank">Info</a>
`
}else if(value == "form_readme"){
info='<h5 class="text-info">README</h5>'
infotxt += `
Build Description: a simple description of the services provided
`
}else if(value == "port"){
info='<h5 class="text-info">Port - URI - Name </h5>'
infotxt += `<b>Published ports</b>
<br>
<br>
infotxt += `
<p class="mb-1 text-left text-muted">
Here you can declare the services you wish to start and publish.
By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br><br>
To make a port available to services outside of Docker, or to Docker containers which are not connected to the containers network, use the "Port" field.
<br>
<br>
<b>Published ports</b>:
By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br>
To make a port available to services outside of Docker, or to Docker containers which are not connected to the containers network, use the "Port" field.
</p>
<br>
<p class="mb-1 text-left text-muted">
<b>URI</b>: http/https
</p>
<br>
<p class="mb-1 text-left text-muted">
<b>Name</b>:
this is the name used by the end user. <b> Try to be clear using few words!</b>
</p>
<br>
<small class="text-muted">
UDP Port: add <b>/udp</b> suffix to the port number
</small>
`
}
@ -828,6 +1162,7 @@ export default {
readme: this.form_readme,
baseservice: this.form_baseservice,
visibility: this.form_visibility,
visibility_users: this.form_visibility_users,
sh: this.form_sh,
packages: this.form_os,
gitrepo: this.form_gitrepo,
@ -915,6 +1250,7 @@ export default {
this.form_myservicename = data.myservicename
this.form_baseservice = data.baseservice
this.form_visibility = data.visibility
this.form_visibility_users= data.visibility_users
this.form_sh = data.sh
this.form_os = data.os
this.form_readme = data.readme

1
src/store/modules/create_pipelineLLO.js

@ -255,6 +255,7 @@ export default {
readme: value.readme,
baseservice: value.baseservice,
visibility: value.visibility,
visibility_users: value.visibility_users,
sh: value.sh,
packages: value.packages,
gitrepo: value.gitrepo,

Loading…
Cancel
Save