From 1a0b51e4b489f17f4860379a34916cf0e4524b14 Mon Sep 17 00:00:00 2001
From: zeus <rootapostolos@swarmlab.io>
Date: Wed, 13 Jan 2021 12:33:54 +0200
Subject: [PATCH] http changes

---
 Dockerfile                  |   2 +-
 src-local/llo/new.js        |  19 +-
 src/components/mynetwork/:w | 579 ------------------------------------
 src/config/index.js         |   4 +-
 src/main.js                 |  30 +-
 5 files changed, 26 insertions(+), 608 deletions(-)
 delete mode 100644 src/components/mynetwork/:w

diff --git a/Dockerfile b/Dockerfile
index 5b2a1bc..984f319 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -65,6 +65,6 @@ RUN set -uex; \
 WORKDIR /home/node/swarmlab-app
 VOLUME  /home/node/swarmlab-app
 
-EXPOSE 443 8080 3000
+EXPOSE 443 8080 3000 3080
 
 CMD ["pm2-runtime", "ecosystem.config.js"]
diff --git a/src-local/llo/new.js b/src-local/llo/new.js
index cc09abd..c7e940f 100644
--- a/src-local/llo/new.js
+++ b/src-local/llo/new.js
@@ -3,13 +3,16 @@
 var fs = require('fs');
 
 var express = require('express');
-var https = require('https');
+//var https = require('https');
+var http = require('http');
 var app = express();
 const cors = require('cors')
  const helmet = require('helmet');
 
 var allowedOrigins = [ 
       'https://localhost:55543', 
+      'http://localhost:3080',
+      'http://localhost:3088',
       'http://localhost:8080'
       ];
 
@@ -31,14 +34,26 @@ origin: function(origin, callback){    // allow requests with no origin
 app.use(helmet());
 app.use(express.json());
 
+var serverPort = 3080;
+/*
+ // ssl enabled
 var options = {
     key:    fs.readFileSync('./llo/swarmlab.key'),
     cert:   fs.readFileSync('./llo/swarmlab.crt')
 };
-var serverPort = 3000;
 
 var server = https.createServer(options, app);
 var io = require('socket.io')(server);
+*/
+
+var server = http.createServer(app);
+const io = require("socket.io")(server, {
+   cors: {
+         origin: "http://localhost:8080",
+         methods: ["GET", "POST"]
+   }
+});
+
 
 const { spawn, exec } = require('child_process')
 
diff --git a/src/components/mynetwork/:w b/src/components/mynetwork/:w
deleted file mode 100644
index 63c22d8..0000000
--- a/src/components/mynetwork/:w
+++ /dev/null
@@ -1,579 +0,0 @@
-<template>
-  <card class="card-user" style="max-height:100%">
-      <div class="author">
-        <img class="avatar border-white" src="@/assets/img/docker.png" alt="...">
-      </div>
-
-      <b-container fluid class="bv-example-row">
-
-
-  <v-wait for="myRunInstancetutor">
-    <template slot="waiting">
-      <div>
-        <img src="@/assets/loading.gif" />
-        Enter Lab_room...
-      </div>
-    </template>
-  </v-wait>
-
-
-		<div class="input-group input-group-sm sm-3">
-					
-			<input type="text" 
-				class="form-control" 
-				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
-				placeholder="Search"
-				v-model="searchFor"
-				@keyup.enter="setFilter"
-				>
-					
-			<div class="input-group-append">
-				<button 
-					class="btn btn-outline-primary" 
-					round
-					type="button"
-					@click="setFilter">
-					Go</button>
-			</div>
-					
-			<div class="input-group-append">
-				<button class="btn btn-outline-secondary" 
-					round
-					type="button"
-					@click="resetFilter">
-					Reset</button>
-			</div>
-    </div>
-
-    <div class="row"
-      v-if="viewhybridoptions"
-    >
-      <b-col  class="text-center" cols="12" sm="12"  md="12">
-                <span>
-                <b>Lab Service Options</b>
-                </span>
-      </b-col>
-    </div>
-
-		<div class="input-group-append"
-      v-if="viewhybridoptions"
-    >
-				<button class="btn btn-outline-secondary" 
-					round
-					type="button"
-        >
-				Size</button>
-			<input type="text" 
-				class="form-control" 
-				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
-				placeholder="Number of Instances"
-				v-model="hybridoptions.size"
-				>
-				<button class="btn btn-outline-secondary" 
-					round
-					type="button"
-        >
-				Port</button>
-			<input type="text" 
-				class="form-control" 
-				aria-label="Small" aria-describedby="inputGroup-sizing-sm"
-				placeholder="Expose Port"
-				v-model="hybridoptions.port"
-				>
-				<button class="btn btn-outline-success" 
-					round
-					type="button"
-				  @click="setHybridoptions"
-        >
-				Up</button>
-    </div>
-
-		<div class="white h-100 flex-fixed-width-item"
-			<vuetable 
-				ref="vuetable"
-				:key="vuetablekey"
-				:api-url='apiurl'
-				:api-mode="true"
-				:http-options="httpOptions"
-				:fields="fields"
-				:item-actions="itemActions"
-				:sort-order="sortOrder"
-				:show-sort-icons="true"
-				:multi-sort="multiSort"
-				:per-page="perpage"
-				pagination-path="links.pagination"
-				:pagination-component="paginationComponent"
-				:append-params="moreParams"
-				wrapper-class="vuetable-wrapper"
-				loading-class="loading"
-				detail-row-id="id"
-				@vuetable:pagination-data="onPaginationData"
-				@vuetable:load-success="loadsuccess"
-				:css="css.table"
-				 >
-
-        <div slot="actionsenabled" slot-scope="props">
-          <div class="d-flex justify-content-center">
-            <button
-              v-if="testactionrowindex[props.rowData.swarmlabname] == props.rowIndex"
-              class="ti-thumb-up btn btn-info btn-sm"
-              title="Stop Lan_Instance"
-              round
-              @click="onAction('down-item', props.rowData, props.rowIndex)"
-              >
-            </button>
-            <button
-              v-if="testactionrowindex[props.rowData.swarmlabname] != props.rowIndex && testactionrowindex[props.rowIndex] == props.rowIndex"
-              class="ti-thumb-down btn btn-secondary btn-sm"
-              title="Stop Lan_Instance"
-              round
-              @click="onAction('run-item', props.rowData, props.rowIndex)"
-              >
-            </button>
-          </div>
-        </div>
-        <div slot="actionslocal" slot-scope="props">
-          <div class="d-flex justify-content-center">
-            <button
-              v-if="testactionrowindex[props.rowIndex] == props.rowIndex"
-              class="ti-trash btn btn-info btn-sm"
-              title="Remove Lab_Instance"
-              round
-              >
-            </button>
-          </div>
-        </div>
-        <div slot="actions" slot-scope="props">
-          <div class="d-flex justify-content-center">
-            <button
-              v-if="checkactionrowindex(props.rowData,props.rowIndex)"
-              class="ti-cloud-down btn btn-outline-secondary btn-sm"
-              title="Download Lab_Instance"
-              round
-              @click="onAction('run-item', props.rowData, props.rowIndex)">
-            </button>
-          <button
-            class="ti-info btn btn-outline-secondary btn-sm"
-              title="Lab_Instance Info"
-            round
-            @click="onAction('view-item', props.rowData, props.rowIndex)">
-          </button>
-				 </div>
-				</div>
-			</vuetable>
-			<div class="vuetable-pagination ui basic segment grid">
-				<vuetable-pagination-info 
-					ref="paginationInfo"      
-					:css="css.paginationInfo"
-      		>
-				</vuetable-pagination-info>
-				<vuetable-pagination 
-					:css="css.pagination"
-					ref="pagination"
-        	@vuetable-pagination:change-page="onChangePage"
-      		>
-				</vuetable-pagination>
-			</div>
-    </div>
-   </b-container>
-  </card>
-</template>
-<script>
-import store from '@/store/index'
-import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
-import Vue from 'vue'
-import {Vuetable, VuetablePaginationDropdown} from 'vuetable-2'
-import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
-import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
-import CssConfig from 'vuetable-2/src/components/VuetableCssConfig.js'
-import card from '@/components/Card.vue'
-import {ApiConfig} from "@/config/index";
-export default {
-  components: {
-      card,
-	    Vuetable,
-			VuetablePagination,
-			VuetablePaginationInfo,
-			VuetablePaginationDropdown
-	},
-  props: {
-  },
-  data() {
-   return{
-   testactionrowindex:[],  // downloaded          used in installed
-   teststatusindex:[],     // status stop run     used in status
-	  hybridoptions: {
-      'swarmlabname':'',            
-      'size':'',            
-      'port':''            
-    },
-    viewhybridoptions: false,
-    swarmlab:{},
-	  playbookInfo: {},
-    token: '',
-	  playbook: {
-			'title':'',
-			'name':'',
-			'description':''
-		},
-			container:{
-				name:'',
-				view:0
-			},
-			pipeline:{},
- 		selected: '',
-    options: [
-      { text: 'Packages', value: 'packages' },
-      { text: 'Images', value: 'images' },
-      { text: 'Scripts', value: 'scripts' }
-    ],
-		showModal: false,
-		visibility: [],
-	 	active:false,
-		vuetablekey:0,
-		fielddata:{},
-    fields: [
-      {
-        name: 'swarmlabname',
-        title: '<span class="orange"></span>Name',
-        sortField: 'swarmlabname',
-        visible:true,
-        dataClass: 'left aligned col-3',
-        width: '68%'
-      },
-      {
-        name: '_id',
-        title: '<span class="orange"></span>mongo',
-        visible:false
-      },
-      {
-        name: 'description',
-        sortField: 'gitrepoCloneUrl',
-        titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
-        visible:false,
-        width: '15%'
-      },
-      {
-        name: 'gitrepoFullName',
-        sortField: 'gitrepoFullName',
-        titleClass: 'center aligned',
-        dataClass: 'left aligned w-25',
-        visible:false,
-        width: '15%'
-      },
-      {
-          name: '__slot:actionsenabled',   // <----
-          title: 'Status',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
-      {
-          name: '__slot:actionslocal',   // <----
-          title: 'Installed',
-          titleClass: 'center',
-          dataClass: 'center aligned',
-          width: '5%'
-        },
-      {
-          name: '__slot:actions',   // <----
-          title: 'Download',
-          titleClass: 'col text-center',
-          dataClass: 'center aligned',
-          width: '10%'
-        },
-    ],
-		apiurl:ApiConfig.swarmlab_url_80+"/swarmlabhybridservices",
-		css: CssConfig,
-    perpage: 5,
-    searchFor: '',
-		sortOrder: [{
-				field: 'pipelinename',
-				direction: 'asc'
-		}],
-    multiSort: true,
-    paginationComponent: 'vuetable-pagination',
-		itemActions: [
-				{ name: 'view-item', label: '', icon: 'glyphicon glyphicon-zoom-in', class: 'btn btn-info', extra: {'title': 'View', 'data-toggle':"tooltip", 'data-placement': "left"} },
-				{ name: 'edit-item', label: '', icon: 'glyphicon glyphicon-pencil', class: 'btn btn-warning', extra: {title: 'Edit', 'data-toggle':"tooltip", 'data-placement': "top"} },
-				{ name: 'delete-item', label: '', icon: 'glyphicon glyphicon-remove', class: 'btn btn-danger', extra: {title: 'Delete', 'data-toggle':"tooltip", 'data-placement': "right" } }
-		],
-		moreParams: { 
-				'filter':  '',
-				'type':  'scripts'
-			},
-	 
-		}
-  },
-	mounted() {
-		this.$root.$on('hybrid_refresh_availableservices', () => {
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-		})
-    //refresh from socket mytable 
-		this.$root.$on('hybrid_refresh_table', (v) => {
-			  this.$nextTick(function () {
-            Vue.nextTick( () => this.$refs.vuetable.refresh())
-			  })
-		})
-	},
-	created() {
-    var url_string = window.location.href
-    var url = new URL(url_string);
-    this.token = url.searchParams.get("token");
-    console.log("token "+ this.token);
-
-	},
-    beforeDestroy () {
-		this.$root.$off('hybrid_refresh_availableservices')
-		this.$root.$off('hybrid_refresh_table')
- },
-  computed: {
-		httpOptions() {
-			var token = this.token
-			    var p="headers: {Authorization: token}}"; //table props -> :http-options="httpOptions"
-			    return {headers: {Authorization: 'Bearer ' + token}} //table props -> :http-options="httpOptions"
-	  },
-
-	},
-
-  methods: {
-   onError (type,description) {
-                    var winfo=description
-                    var info='<h5>Bootstrap '+type+'</h5>'
-                    this.$swal({
-                      type: type,
-                      html: info+winfo,
-                      showCloseButton: true,
-                      showLoaderOnConfirm: false,
-                      allowOutsideClick: false,
-                      cancelButtonText: 'No, cancel!',
-                      showCancelButton: false,
-                      showLoaderOnConfirm: false,
-                      reverseButtons: true,
-                      focusCancel: true,
-                      confirmButtonText: 'Ok!'
-                      })
-    },
-		async checkactionrowindex(data,index){
-        if(this.testactionrowindex[index] == index){
-        
-                var obj = {}
-                obj.token = this.token
-                obj.instance = data.swarmlabname
-                  var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj)
-                  console.log('res8 all '+JSON.stringify(res1))
-                  if(res1.data.data == 'yes'){
-                    Vue.set(this.testactionrowindex, data.swarmlabname, index)
-                    console.log('res8 YES  '+JSON.stringify(res1.data))
-                  }else{
-                    console.log('res8 NO '+JSON.stringify(res1.data))
-                    Vue.delete(this.testactionrowindex, data.swarmlabname)
-                  }
-                  
-                console.log('is set '+index)
-        }else{
-               console.log('not set '+index)
-
-                var obj = {}
-                obj.token = this.token
-                obj.instance = data.swarmlabname
-                var res = await store.dispatch('pipelineLLO/getservicesinfo', obj)
-                if(res.data.data == 'yes'){
-                  console.log('resi YES '+JSON.stringify(res))
-                  Vue.set(this.testactionrowindex, index, index)
-                  var res1 = await store.dispatch('pipelineLLO/getservicesstatus', obj)
-                  console.log('res8 all '+JSON.stringify(res1))
-                  if(res1.data.data == 'yes'){
-                    Vue.set(this.testactionrowindex, data.swarmlabname, index)
-                    console.log('res8 YES  '+JSON.stringify(res1.data))
-                  }else{
-                    console.log('res8 NO '+JSON.stringify(res1.data))
-                    Vue.delete(this.testactionrowindex, data.swarmlabname)
-                  }
-                  //console.log('resiiiiiiii yes '+JSON.stringify(this.testactionrowindex[index]))
-                }else{
-                  //Vue.delete(this.testactionrowindex, index)
-                  console.log('resi NO '+JSON.stringify(res))
-                }
-        }
-		},
-		setFilter () {
-				this.moreParams = {
-						'filter':  this.searchFor,
-						'type':    this.selected
-				}
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-		},
-		resetFilter () {
-				this.moreParams = {}
-				this.searchFor = ''
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-		},
-   onPaginationData (paginationData) {
-      this.$refs.pagination.setPaginationData(paginationData)
-			this.$refs.paginationInfo.setPaginationData(paginationData) 
-    },
-    onChangePage (page) {
-      this.$refs.vuetable.changePage(page)
-    },
-    editRow(rowData) {
-      alert("You clicked edit on"+ JSON.stringify(rowData));
-		},
-    async onAction (action, data, index) {
-			if(action == 'view-item' ){
-          this.swarmlab=data
-          var container=this.swarmlab
-          var res = await store.dispatch('pipelineLLO/getswarmlabinfo', container.swarmlabname)
-
-          var swarmlab1=JSON.stringify(res.data.swarmlab, null ,2)
-          var swarmlab1info=JSON.stringify(res.data.swarmlabinfo, null ,2)
-          var swarmlab1info=res.data.swarmlabinfo
-          var description='<div style="height: 250px; overflow-y: scroll;"><p><pre><code class="codeblock">'+swarmlab1+'</code></pre></p></div>'
-          if(res.data.error25=="ok"){
-                var winfo=''
-                var info='<h5>Swarmlab Service <a href="'+swarmlab1info+'" target="_blank" >Info</a></h5>(Open page in new window)'
-                this.$swal({
-                  type: 'info',
-                  html: info+winfo,
-                  showCloseButton: true,
-                  showLoaderOnConfirm: false,
-                  allowOutsideClick: false,
-                  showLoaderOnConfirm: false,
-                  reverseButtons: true,
-                  focusCancel: true
-                })
-            }
-
-
-			}else if(action == 'delete-item' ){
-				this.$swal({
-					type: 'info',
-					html: info+winfo,
-					showCloseButton: true,
-					showLoaderOnConfirm: false,
-					allowOutsideClick: false,
-					 cancelButtonText: 'No, cancel!',
-					showCancelButton: true,
-					showLoaderOnConfirm: false,
-					reverseButtons: true,
-					focusCancel: true,
-					confirmButtonText: 'Yes, Delete it!'
-					})
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-			}else if(action == 'run-item' ){
-         this.viewhybridoptions = true
-         this.hybridoptions.swarmlabname = data.swarmlabname
-      /*
-        console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
-        // run on  mytable.vue
-      	this.$root.$emit('hybrid_start_instance', data.swarmlabname)
-        Vue.set(this.testactionrowindex, data.swarmlabname, index)
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-        */
-			}else if(action == 'down-item' ){
-        console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
-        // run on  mytable.vue
-      	this.$root.$emit('hybrid_stop_instance', data.swarmlabname)
-        Vue.delete(this.testactionrowindex, index)
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-			}
-    },
-		async setHybridoptions(){
-        console.log(JSON.stringify(this.hybridoptions))
-        
-        //console.log('RUN 1 '+ JSON.stringify(data.swarmlabname))
-        // run on  mytable.vue
-        let value = {}
-        value.swarmlabname = this.hybridoptions.swarmlabname
-        value.size = this.hybridoptions.size
-        value.port = this.hybridoptions.port
-      	this.$root.$emit('hybrid_start_instance', value)
-        Vue.set(this.testactionrowindex, value.swarmlabname, index)
-        Vue.nextTick( () => this.$refs.vuetable.refresh())
-
-		},
-    refreshVuetable() {
-			this.$nextTick(()=>{
-					this.vuetablekey += 1
-				})
-      },
-		playbookinfoShow(value) {
-				return this.visibility[value]=true
-		},
-		playbookinfo(value) {
-				return this.playbookInfo=value
-		},
-		rowClicked(row, event) {
-			return {
-				html: true,
-				title: () => { return 'Hello <b>Popover:</b> ' + (++this.counter) },
-				content: () => { return 'The date is:<br><em>' + new Date() + '</em>' }
-			}
-		},
-		loadsuccess(response) {
-				var data = response.data.data
-				this.fielddata=data
-				var n = data.length
-				n=n-1
-			},
-
-
-  },
-
-
-  actions: {
-
-
-	}
-
-};
-</script>
-<style>
-.flex-fixed-width-item {
-    flex: 0 0 100px;
-		}
-.modalinfo {
-  z-index: 10000000 !important;
-	position:fixed;
-}
-/* a container with flex-direction column */
-
-.vue-notifyjs.notifications{
-  .alert{
-   z-index: 100;
-  }
-  .list-move {
-    transition: transform 0.3s, opacity 0.4s;
-  }
-  .list-item {
-    display: inline-block;
-    margin-right: 10px;
-
-  }
-  .list-enter-active {
-    transition: transform 0.2s ease-in, opacity 0.4s ease-in;
-  }
-  .list-leave-active {
-    transition: transform 1s ease-out, opacity 0.4s ease-out;
-  }
-
-  .list-enter {
-    opacity: 0;
-    transform: scale(1.1);
-
-  }
-  .list-leave-to {
-    opacity: 0;
-    transform: scale(1.2, 0.7);
-  }
-}
-
-pre {
-  //background-color: rgb(255, 247, 229);
-  background-color: #eff0f1;
-	  border: 1px solid blue;
-		  //white-space: pre-line;
-			}
-
-</style>
diff --git a/src/config/index.js b/src/config/index.js
index 3b8d230..87fcf91 100644
--- a/src/config/index.js
+++ b/src/config/index.js
@@ -1,7 +1,7 @@
 //var global_config = {
 export const ApiConfig = {
 		'swarmlab_url_80'			: 'https://api.swarmlab.io', 			
-		'url_80'							: 'https://localhost:3000', 			// webclient  		
-		'url_443'							: 'https://localhost:3000' 			// webclient
+		'url_80'							: 'http://localhost:3080', 			// webclient  		
+		'url_443'							: 'https://localhost:3080' 			// webclient
 											/* 	config for swarmlab ide */
 };
diff --git a/src/main.js b/src/main.js
index d18aaf3..bcdb0fd 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import App from './App.vue'
 import store from '@/store/index'
+import {ApiConfig} from "@/config/index";
 import BootstrapVue from 'bootstrap-vue'
 import 'bootstrap/dist/css/bootstrap.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
@@ -18,39 +19,20 @@ import VueSocketIOExt from 'vue-socket.io-extended';
 //import io  from 'socket.io-client';
 import { io } from 'socket.io-client';
 
-/*
-const socket = io('http://localhost:3000', {
-  //autoConnect: false,
-  autoConnect: true,
-  reconnection: true,
-  reconnectionDelay: 500,
-  maxReconnectionAttempts: Infinity,
-  pingInterval: 25000, 
-  pingTimeout: 60000,
-  //transports: ["websocket"],
-  transports: [ 'websocket', 'polling' ],
-  //transports: ["polling"],
-  secure: true
-  //rejectUnauthorized: false
-});
-*/
 
 //const socket = io('https://factory.swarmlab.io:55527', {
-const socket = io('https://localhost:3000', {
-//const socket = io('https://83.212.78.17:3088', {
-//const socket = io('http://factory.swarmlab.io:55528', {
-  //autoConnect: false
+//const socket = io('https://localhost:3080', {
+var socketurl = ApiConfig.url_80;
+const socket = io(socketurl, {
   autoConnect: false,
   reconnection: true,
   reconnectionDelay: 500,
   maxReconnectionAttempts: Infinity,
   pingInterval: 25000,
   pingTimeout: 60000,
-  //transports: ["websocket"],
   transports: [ 'websocket', 'polling' ],
-  //transports: ["polling"],
-  secure: true
-  //rejectUnauthorized: false
+  secure: true,
+  rejectUnauthorized: false
 });