zeus
/
swarmlab-hybrid
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

add inf

master
zeus 3 years ago
parent
5f6c20332b
commit
d95fbf1635
5 changed files with 451 additions and 41 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      src/App.vue
  2. 2
      src/components/mynetwork/availablemicroservices.vue
  3. 71
      src/components/mynetwork/availablemicroservicescustom.vue
  4. 402
      src/components/mynetwork/customservices.vue
  5. 1
      src/store/modules/create_pipelineLLO.js

2
src/App.vue
View File

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

2
src/components/mynetwork/availablemicroservices.vue
View File

@ -432,7 +432,7 @@ export default {
//console.log('---- '+ value) //console.log('---- '+ value)
if (value) { if (value) {
var tmp = value.split('-') 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 return v
}else{ }else{
var v = '<span> </span>' var v = '<span> </span>'

71
src/components/mynetwork/availablemicroservicescustom.vue
View File

@ -34,6 +34,58 @@
Refresh Table</button> Refresh Table</button>
</div> </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" <input type="text"
class="form-control" class="form-control"
aria-label="Small" aria-describedby="inputGroup-sizing-sm" aria-label="Small" aria-describedby="inputGroup-sizing-sm"
@ -42,6 +94,12 @@
@keyup.enter="setFilter" @keyup.enter="setFilter"
> >
<div class="input-group-append"> <div class="input-group-append">
<button <button
class="btn btn-outline-primary" class="btn btn-outline-primary"
@ -353,6 +411,7 @@ export default {
data() { data() {
return{ return{
startservice: true, startservice: true,
form_visibility:'Public',
actionrowindex: false, actionrowindex: false,
actionrowindexmore: true, actionrowindexmore: true,
swarmlabinfonow:false, swarmlabinfonow:false,
@ -577,6 +636,18 @@ export default {
}, },
methods: { 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 () { onActionmore () {
this.actionrowindex = true this.actionrowindex = true
this.actionrowindexmore = false this.actionrowindexmore = false

402
src/components/mynetwork/customservices.vue
View File

@ -40,10 +40,11 @@
> >
<div class="input-group-prepend"> <div class="input-group-prepend">
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class=" btn btn-outline-info btn-sm"
title="Info" title="Info"
round round
@click="onAction('form_baseservice')"> @click="onAction('form_baseservice')">
Build reference
</button> </button>
</div> </div>
</div> </div>
@ -219,6 +220,22 @@
> >
<span class="text-light">Private</span> <span class="text-light">Private</span>
</button> </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>
</div> </div>
@ -228,14 +245,13 @@
<div class="row" <div class="row"
<b-col class="text-center" cols="12" sm="12" md="12"> <b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group"> <div class="form-group">
<label for="customreadme" class="text-dark"> <b> <span class="text-dark">README </span></b> <br>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class=" btn btn-outline-secondary btn-sm"
title="Info" title="Info"
round round
@click="onAction('form_readme')"> @click="onAction('form_readme')">
README
</button> </button>
</label>
<textarea class="form-control" name="customreadme" rows="8" <textarea class="form-control" name="customreadme" rows="8"
v-model="form_readme" v-model="form_readme"
> >
@ -249,17 +265,16 @@
<div class="row" <div class="row"
<b-col class="text-center" cols="12" sm="12" md="12"> <b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group"> <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 <button
class="ti-info btn btn-outline-secondary btn-sm" class=" btn btn-outline-secondary btn-sm"
title="Info" title="Info"
round round
@click="onAction('form_os')"> @click="onAction('form_os')">
Add Extrapackages
</button> </button>
<span class="text-success"> <span class="text-success">
{{ customostext }} {{ customostext }}
</span > </span >
</label>
<textarea class="form-control" name="custompackages" rows="8" <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 " placeholder="e.g. apt-get update && apt-get -y install or apk update && apk add --no-cache "
v-model="form_os" v-model="form_os"
@ -273,17 +288,16 @@
<div class="row" <div class="row"
<b-col class="text-center" cols="12" sm="12" md="12"> <b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group"> <div class="form-group">
<label for="customshell" class="text-dark"><b><span class="text-dark">Custom sh script </span></b> <br>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class=" btn btn-outline-secondary btn-sm"
title="Info" title="Info"
round round
@click="onAction('form_sh')"> @click="onAction('form_sh')">
Custom sh script
</button> </button>
<span class="text-success"> <span class="text-success">
{{ customshtext }} {{ customshtext }}
</span > </span >
</label>
<textarea class="form-control" name="customshell" rows="8" <textarea class="form-control" name="customshell" rows="8"
placeholder="#!/bin/bash " placeholder="#!/bin/bash "
v-model="form_sh" v-model="form_sh"
@ -298,10 +312,11 @@
<div class="col-sm-12 sm-12"> <div class="col-sm-12 sm-12">
<div class="text-center"> <div class="text-center">
<button <button
class="ti-info btn btn-outline-secondary btn-sm align-center" class="btn btn-outline-secondary btn-sm align-center"
title="Info" title="Info"
round round
@click="onAction('port')"> @click="onAction('port')">
Port - URI - Name
</button> </button>
</div> </div>
</div> </div>
@ -443,21 +458,20 @@
</div> </div>
<br>
<div class="row" <div class="row"
<b-col class="text-center" cols="12" sm="12" md="12"> <b-col class="text-center" cols="12" sm="12" md="12">
<div class="form-group"> <div class="form-group">
<label for="rclocal" class="text-dark"><b><span class="text-dark">rc.local</span></b> <br>
<button <button
class="ti-info btn btn-outline-secondary btn-sm" class=" btn btn-outline-secondary btn-sm"
title="Info" title="Info"
round round
@click="onAction('form_rclocal')"> @click="onAction('form_rclocal')">
rc.local
</button> </button>
<span class="text-success"> <span class="text-success">
{{ customshtext }} {{ customshtext }}
</span > </span >
</label>
<textarea class="form-control" name="rclocal" rows="8" <textarea class="form-control" name="rclocal" rows="8"
v-model="form_rclocal" v-model="form_rclocal"
> >
@ -560,6 +574,7 @@ export default {
'form_name3':'', 'form_name3':'',
'form_gitrepo':'', 'form_gitrepo':'',
'form_visibility':'Public', 'form_visibility':'Public',
'form_visibility_users':'',
customservice: { customservice: {
'myservicename':'', 'myservicename':'',
'os':'', 'os':'',
@ -686,6 +701,7 @@ export default {
this.customservice.myservicename = service.log.data.data.service this.customservice.myservicename = service.log.data.data.service
this.customservice.baseservice = service.log.data.data.baseservice this.customservice.baseservice = service.log.data.data.baseservice
this.customservice.visibility = service.log.data.data.visibility 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.sh = service.log.data.data.sh
this.customservice.os = service.log.data.data.packages this.customservice.os = service.log.data.data.packages
this.customservice.readme = service.log.data.data.readme this.customservice.readme = service.log.data.data.readme
@ -743,58 +759,376 @@ export default {
var info='<h5></h5>' var info='<h5></h5>'
if(value == "form_myservicename"){ if(value == "form_myservicename"){
info='<h5 class="text-info">Service Name</h5>' 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"){ }else if(value == "form_version"){
info='<h5 class="text-info">Service Version</h5>' 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"){ }else if(value == "form_baseservice"){
info='<h5 class="text-info">Docker base image</h5>' info='<h5 class="text-info">Swarmlab Build reference</h5>'
infotxt += `<br> infotxt += `<div class="container-fluid">
A base image is the image that is used to create all of your container images. <br>` <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"){ }else if(value == "form_gitrepo"){
info='<h5 class="text-info">Git-repo</h5>' info='<h5 class="text-info">Git-repo</h5>'
infotxt += `<b>The git repository associated with your project.</b><br> <br> infotxt += `
A string that contains a valid URL <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"){ }else if(value == "form_rclocal"){
info='<h5 class="text-info">rc.local</h5>' 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"){ }else if(value == "form_sh"){
info='<h5 class="text-info">Custom sh script </h5>' 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.` infotxt += `
}else if(value == "form_os"){
info='<h5 class="text-info">Add Extrapackages </h5>' <p class="mb-1 text-left text-muted">
infotxt += `<b>sh script to install packages on Base system.</b> <br> 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>
<br><b>Examples</b> <br><b>Examples</b>
<br> <br>
user1@email.com,user2@foo.com
<br> <br>
apt update && apt install -y vim
<br> <br>
<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
<a href="https://help.ubuntu.com/community/AptGet/Howto?action=show&redirect=AptGetHowto" target="_blank">Info</a>
<br> <br>
<br> <br>
<span class="align-center"><b>Examples</b></span>
<br>
apt update &amp;&amp; apt install -y vim
<br>
OR OR
<br> <br>
apk update &amp;&amp; apk add --no-cache vim
<br> <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> <br>
<a href="https://wiki.alpinelinux.org/wiki/Package_management" target="_blank">Info</a> <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"){ }else if(value == "port"){
info='<h5 class="text-info">Port - URI - Name </h5>' info='<h5 class="text-info">Port - URI - Name </h5>'
infotxt += `<b>Published ports</b> infotxt += `
<p class="mb-1 text-left text-muted">
Here you can declare the services you wish to start and publish.
<br> <br>
<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. By default, when you create or run a container, it does not publish any of its ports to the outside world.
<br><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. 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, readme: this.form_readme,
baseservice: this.form_baseservice, baseservice: this.form_baseservice,
visibility: this.form_visibility, visibility: this.form_visibility,
visibility_users: this.form_visibility_users,
sh: this.form_sh, sh: this.form_sh,
packages: this.form_os, packages: this.form_os,
gitrepo: this.form_gitrepo, gitrepo: this.form_gitrepo,
@ -915,6 +1250,7 @@ export default {
this.form_myservicename = data.myservicename this.form_myservicename = data.myservicename
this.form_baseservice = data.baseservice this.form_baseservice = data.baseservice
this.form_visibility = data.visibility this.form_visibility = data.visibility
this.form_visibility_users= data.visibility_users
this.form_sh = data.sh this.form_sh = data.sh
this.form_os = data.os this.form_os = data.os
this.form_readme = data.readme this.form_readme = data.readme

1
src/store/modules/create_pipelineLLO.js
View File

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

Write Preview
Loading…
Cancel
Save