From d95fbf1635c88f619f4c56e642c9ac6a96f46b2f Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Fri, 28 Jan 2022 00:09:48 +0200
Subject: [PATCH] add inf

---
 src/App.vue                                   |   2 +
 .../mynetwork/availablemicroservices.vue      |   2 +-
 .../availablemicroservicescustom.vue          |  71 +++
 src/components/mynetwork/customservices.vue   | 416 ++++++++++++++++--
 src/store/modules/create_pipelineLLO.js       |   1 +
 5 files changed, 451 insertions(+), 41 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index f962f1e..5731837 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -714,6 +714,8 @@ export default {
  },
 	created() {
 
+
+
   },
   methods: {
 			setWarning(){
diff --git a/src/components/mynetwork/availablemicroservices.vue b/src/components/mynetwork/availablemicroservices.vue
index 6fbed4a..a06c14a 100644
--- a/src/components/mynetwork/availablemicroservices.vue
+++ b/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>'
diff --git a/src/components/mynetwork/availablemicroservicescustom.vue b/src/components/mynetwork/availablemicroservicescustom.vue
index 8a9bad1..40c657e 100644
--- a/src/components/mynetwork/availablemicroservicescustom.vue
+++ b/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
diff --git a/src/components/mynetwork/customservices.vue b/src/components/mynetwork/customservices.vue
index b5e9c4b..7fb0259 100644
--- a/src/components/mynetwork/customservices.vue
+++ b/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 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
diff --git a/src/store/modules/create_pipelineLLO.js b/src/store/modules/create_pipelineLLO.js
index 8cc740a..1947ac7 100644
--- a/src/store/modules/create_pipelineLLO.js
+++ b/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,