@ -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 } }
< / s p a n >
< / 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 } }
< / s p a n >
< / 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 } }
< / s p a n >
< / 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 container ’ s 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 container ’ s 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 container ’ s 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