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. 410
      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

410
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,58 +759,376 @@ 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>
infotxt += `
<br>
<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>
<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>
<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">
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.
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>
<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