zeus
4 years ago
9 changed files with 1042 additions and 95 deletions
@ -0,0 +1,51 @@ |
|||||
|
#!/bin/bash |
||||
|
|
||||
|
# ------------------------ |
||||
|
# Not Tested |
||||
|
# ------------------------ |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install wireguard jq |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo yum install -y yum-utils |
||||
|
sudo yum install elrepo-release epel-release |
||||
|
sudo yum install kmod-wireguard wireguard-tools |
||||
|
|
||||
|
|
||||
|
# ------------------------ |
||||
|
# install node version 15 |
||||
|
# ------------------------ |
||||
|
|
||||
|
curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash - |
||||
|
yum install -y nodejs |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install docker |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo yum-config-manager \ |
||||
|
--add-repo \ |
||||
|
https://download.docker.com/linux/centos/docker-ce.repo |
||||
|
|
||||
|
sudo yum install docker-ce docker-ce-cli containerd.io |
||||
|
sudo systemctl start docker |
||||
|
|
||||
|
sudo usermod -aG docker [USERNAME] |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install docker-compose |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose |
||||
|
sudo chmod +x /usr/local/bin/docker-compose |
||||
|
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install pm2 |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo npm install -g pm2 |
||||
|
|
||||
|
echo "" |
||||
|
echo "run ./install.sh" |
||||
@ -0,0 +1,44 @@ |
|||||
|
#!/bin/bash |
||||
|
|
||||
|
|
||||
|
# ------------------------ |
||||
|
# install wireguard jq |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo apt update |
||||
|
sudo apt install wireguard jq |
||||
|
|
||||
|
|
||||
|
# ------------------------ |
||||
|
# install node version 15 |
||||
|
# ------------------------ |
||||
|
|
||||
|
curl -sL https://deb.nodesource.com/setup_15.x | sudo -E bash - |
||||
|
sudo apt-get install -y nodejs |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install docker |
||||
|
# ------------------------ |
||||
|
|
||||
|
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - |
||||
|
sudo add-apt-repository "deb [arch=amd64] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" |
||||
|
sudo apt update |
||||
|
sudo apt install -y docker-ce |
||||
|
sudo usermod -aG docker [USERNAME] |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install docker-compose |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo curl -L "https://github.com/docker/compose/releases/download/1.27.4/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose |
||||
|
sudo chmod +x /usr/local/bin/docker-compose |
||||
|
sudo ln -s /usr/local/bin/docker-compose /usr/bin/docker-compose |
||||
|
|
||||
|
# ------------------------ |
||||
|
# install pm2 |
||||
|
# ------------------------ |
||||
|
|
||||
|
sudo npm install -g pm2 |
||||
|
|
||||
|
echo "" |
||||
|
echo "run ./install.sh" |
||||
@ -0,0 +1,416 @@ |
|||||
|
<template> |
||||
|
<div id="app" class="container-fluid"> |
||||
|
|
||||
|
<nav class="navbar navbar-light navbar-expand-md bg-light justify-content-md-center justify-content-start"> |
||||
|
<b-navbar-brand class="logo simple-text ti-swarmlab text-secondary"> |
||||
|
Swarmlab.io |
||||
|
</b-navbar-brand> |
||||
|
<div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> |
||||
|
<ul class="navbar-nav mx-auto text-md-center text-left"> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#" |
||||
|
@click="hybrid('services')" |
||||
|
> |
||||
|
Manage_Your_Local_LabInstances</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#"> |
||||
|
| |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#" |
||||
|
@click="hybrid('bootstrap')" |
||||
|
>Containers</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#"> |
||||
|
- |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="nav-item my-auto"> |
||||
|
<a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#"> |
||||
|
- |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#" |
||||
|
@click="hybrid('connect-server')" |
||||
|
>Config_hybrid_server</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#"> |
||||
|
| |
||||
|
</a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#" |
||||
|
@click="hybrid('manage_service')" |
||||
|
> |
||||
|
Manage_Your_hybrid_LabInstances</a> |
||||
|
</li> |
||||
|
</li> |
||||
|
</ul> |
||||
|
<ul class="nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap"> |
||||
|
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item> |
||||
|
<b-nav-item > | </b-nav-item> |
||||
|
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Lab_onDemand </b-nav-item> |
||||
|
<b-nav-item > </b-nav-item> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
|
||||
|
<!-- ***************** container items ****************** --> |
||||
|
<b-row |
||||
|
v-show="hybridmenou == 'bootstrap'" |
||||
|
> |
||||
|
<b-col cols="12" > |
||||
|
|
||||
|
<network-table |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</network-table> |
||||
|
|
||||
|
</b-col> |
||||
|
</b-row> |
||||
|
|
||||
|
<b-row |
||||
|
v-show="hybridmenou == 'services'" |
||||
|
> |
||||
|
<b-col cols="12"> |
||||
|
<services-table |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</services-table> |
||||
|
|
||||
|
</b-col> |
||||
|
</b-row> |
||||
|
|
||||
|
<b-row |
||||
|
v-show="hybridmenou == 'connect-server'" |
||||
|
> |
||||
|
<b-col cols="12"> |
||||
|
<connect-server |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</connect-server> |
||||
|
|
||||
|
</b-col> |
||||
|
</b-row> |
||||
|
|
||||
|
<b-row |
||||
|
v-show="hybridmenou == 'manage_service'" |
||||
|
> |
||||
|
<b-col cols="12"> |
||||
|
<manage-services |
||||
|
style="background-color: #f8f9fa" |
||||
|
> |
||||
|
</manage-services> |
||||
|
|
||||
|
</b-col> |
||||
|
</b-row> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
<div class="d-flex" id="wrapper"> |
||||
|
|
||||
|
<!-- Sidebar max --> |
||||
|
<div class=" bg-light border-right" id="sidebar-wrapper" |
||||
|
v-if="sidemenou == 'max'" |
||||
|
> |
||||
|
<div class=" logo simple-text ti-swarmlab text-secondary sidebar-heading" |
||||
|
@click="onActionMenu('min')" |
||||
|
> |
||||
|
Swarmlab.io |
||||
|
</div> |
||||
|
<div class="list-group list-group-flush" |
||||
|
> |
||||
|
|
||||
|
<!-- Menou Dashboard --> |
||||
|
<b-list-group-item v-b-toggle.hybrid-profile variant="light" name="Dashboard" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('dashboard','')" style="cursor: pointer;" :class="{ active: isActive('dashboard') }"> Dashboard</b-list-group-item> |
||||
|
|
||||
|
<b-collapse id="hybrid-profile" class="m-subm" accordion="m-sidebar" role="tabpanel"> |
||||
|
<b-list-group-item variant="light" name="dashboard" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_dashboard')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_dashboard') }"> Profile</b-list-group-item> |
||||
|
<b-list-group-item variant="light" name="Profile" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('dashboard','dashboard_profile')" style="cursor: pointer;" :class="{ active: isActiveSub('dashboard_profile') }"> Profile</b-list-group-item> |
||||
|
</b-collapse> |
||||
|
|
||||
|
<!-- Menou StandAlone --> |
||||
|
<b-list-group-item v-b-toggle.hybrid-local variant="light" name="Local" class="ti-dashboard list-group-item list-group-item-action" v-on:click="setActive('local','')" style="cursor: pointer;" :class="{ active: isActive('local') }"> Local</b-list-group-item> |
||||
|
|
||||
|
<b-collapse id="hybrid-local" class="m-subm" accordion="m-sidebar" role="tabpanel"> |
||||
|
<b-list-group-item variant="light" name="local" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_local')" style="cursor: pointer;" :class="{ active: isActiveSub('local_local') }"> Local</b-list-group-item> |
||||
|
<b-list-group-item variant="light" name="Menou" class="m-subm-listgroup list-group-item list-group-item-action" v-on:click="setActive('local','local_menou')" style="cursor: pointer;" :class="{ active: isActiveSub('local_menou') }"> Menou</b-list-group-item> |
||||
|
</b-collapse> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- Sidebar min --> |
||||
|
<div class="bg-light border-right" id="sidebar-wrapper" |
||||
|
v-if="sidemenou == 'min'" |
||||
|
> |
||||
|
<div class=" ti-layout-slider sidebar-heading" |
||||
|
@click="onActionMenu('max')" |
||||
|
> |
||||
|
</div> |
||||
|
<div class="list-group list-group-flush" |
||||
|
> |
||||
|
<a href="#" class="ti-help list-group-item list-group-item-action bg-light"></a> |
||||
|
<a href="#" class="ti-link list-group-item list-group-item-action bg-light"></a> |
||||
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
||||
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
||||
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
||||
|
<a href="#" class="list-group-item list-group-item-action bg-light"></a> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- /#sidebar-wrapper --> |
||||
|
|
||||
|
<!-- Page Content --> |
||||
|
<div id="page-content-wrapper"> |
||||
|
|
||||
|
<nav class="navbar navbar-expand-lg navbar-light bg-light border-bottom"> |
||||
|
<button class="btn btn-primary" > |
||||
|
Max Menu |
||||
|
</button> |
||||
|
<button class="btn btn-primary" > |
||||
|
Min Menu |
||||
|
</button> |
||||
|
|
||||
|
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
||||
|
<span class="navbar-toggler-icon"></span> |
||||
|
</button> |
||||
|
|
||||
|
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
||||
|
<ul class="navbar-nav ml-auto mt-2 mt-lg-0"> |
||||
|
<li class="nav-item active"> |
||||
|
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
||||
|
</li> |
||||
|
<li class="nav-item"> |
||||
|
<a class="nav-link" href="#">Link</a> |
||||
|
</li> |
||||
|
<li class="nav-item dropdown"> |
||||
|
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> |
||||
|
Dropdown |
||||
|
</a> |
||||
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown"> |
||||
|
<a class="dropdown-item" href="#">Action</a> |
||||
|
<a class="dropdown-item" href="#">Another action</a> |
||||
|
<div class="dropdown-divider"></div> |
||||
|
<a class="dropdown-item" href="#">Something else here</a> |
||||
|
</div> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</nav> |
||||
|
|
||||
|
<div class="container-fluid"> |
||||
|
<h1 class="mt-4">Simple Sidebar</h1> |
||||
|
<p>The starting state of the menu will appear collapsed on smaller screens, and will appear non-collapsed on larger screens. When toggled using the button below, the menu will change.</p> |
||||
|
<p>Make sure to keep all page content within the <code>#page-content-wrapper</code>. The top navbar is optional, and just for demonstration. Just create an element with the <code>#menu-toggle</code> ID which will toggle the menu when clicked.</p> |
||||
|
</div> |
||||
|
|
||||
|
</div> |
||||
|
<!-- /#page-content-wrapper --> |
||||
|
|
||||
|
</div> |
||||
|
<!-- /#wrapper --> |
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
|
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script> |
||||
|
import "@/assets/css/themify-icons.css"; |
||||
|
|
||||
|
import ConnectServer from "./components/myconnect-server.vue"; |
||||
|
import NetworkTable from "./components/mynetwork.vue"; |
||||
|
import ServicesTable from "./components/myservices.vue"; |
||||
|
import ManageServices from "./components/manageservices.vue"; |
||||
|
|
||||
|
export default { |
||||
|
name: 'app', |
||||
|
components: { |
||||
|
NetworkTable, |
||||
|
ServicesTable, |
||||
|
ConnectServer, |
||||
|
ManageServices |
||||
|
}, |
||||
|
data() { |
||||
|
return { |
||||
|
activeItem: '', // menou |
||||
|
activeItemSub: '', //submenou |
||||
|
sidemenou:'max', |
||||
|
hybridmenou:'bootstrap', |
||||
|
show: true, |
||||
|
token: '', |
||||
|
SwarmabAsciiLabTemplate:'' |
||||
|
} |
||||
|
}, |
||||
|
mounted() { |
||||
|
}, |
||||
|
created() { |
||||
|
}, |
||||
|
methods: { |
||||
|
onActionMenu(action){ |
||||
|
if(action == 'max'){ |
||||
|
this.sidemenou = 'max' |
||||
|
}else if(action == 'min'){ |
||||
|
this.sidemenou = 'min' |
||||
|
} |
||||
|
console.log(action) |
||||
|
}, |
||||
|
hybrid(action) { |
||||
|
this.hybridmenou = action |
||||
|
console.log(action) |
||||
|
if(action == 'bootstrap'){ |
||||
|
this.$root.$emit('hybrid_refresh_dockerservices') |
||||
|
}else if(action == 'connect-server'){ |
||||
|
this.$root.$emit('hybrid_connect_server') |
||||
|
}else if(action == 'services'){ |
||||
|
this.$root.$emit('hybrid_refresh_availableservices') |
||||
|
}else if(action == 'manage_service'){ |
||||
|
//this.$root.$emit('hybrid_manage_service') |
||||
|
} |
||||
|
}, |
||||
|
isActive: function (menuItem) { |
||||
|
console.log('active ' + menuItem); |
||||
|
return this.activeItem === menuItem |
||||
|
}, |
||||
|
isActiveSub: function (menuItem) { |
||||
|
console.log('activesub ' + menuItem); |
||||
|
return this.activeItemSub === menuItem |
||||
|
}, |
||||
|
setActive: function (menuItem,menuItemSub) { |
||||
|
console.log('set ' + menuItem); |
||||
|
this.activeItem = menuItem // no need for Vue.set() |
||||
|
this.activeItemSub = menuItemSub // no need for Vue.set() |
||||
|
} |
||||
|
|
||||
|
|
||||
|
} |
||||
|
} |
||||
|
</script> |
||||
|
|
||||
|
<style> |
||||
|
.active { |
||||
|
background-color: #e7e7e7 !important; |
||||
|
color: #0c5460 !important; |
||||
|
} |
||||
|
|
||||
|
@import url('https://fonts.googleapis.com/css?family=Lato:400,700'); |
||||
|
|
||||
|
|
||||
|
body { |
||||
|
background: #EEF1F4 !important; |
||||
|
} |
||||
|
|
||||
|
.nav-background { |
||||
|
background: #353535; |
||||
|
} |
||||
|
|
||||
|
.ti-swarmlab:before { |
||||
|
position: relative; |
||||
|
top:-5px; |
||||
|
right:-8px; |
||||
|
font-size: 1.5em; |
||||
|
font-weight: 300; |
||||
|
content: "\e606"; |
||||
|
color: #222; |
||||
|
color: #74B3C8; |
||||
|
border-color: #c60000; |
||||
|
} |
||||
|
|
||||
|
.ti-themify-logo:before { |
||||
|
content: "\e6d1"; |
||||
|
} |
||||
|
|
||||
|
.menoutext { |
||||
|
font-family: 'Lato', sans-serif !important; |
||||
|
} |
||||
|
|
||||
|
.mycontainer { |
||||
|
padding-right: 20px !important; |
||||
|
padding-left: 5px !important; |
||||
|
margin-right:auto; |
||||
|
margin-left:auto |
||||
|
} |
||||
|
|
||||
|
|
||||
|
.m-subm { |
||||
|
width: 100%; |
||||
|
border-left: 4px solid #4b4ba3;; |
||||
|
background-color: #f0f0f0; |
||||
|
border-top: none; |
||||
|
border-bottom: none; |
||||
|
border-right: none; |
||||
|
|
||||
|
} |
||||
|
.m-subm-card { |
||||
|
padding-left: 0px; |
||||
|
padding-right: 0px; |
||||
|
padding-top: 0px; |
||||
|
padding-bottom: 0px; |
||||
|
background-color: #f0f0f0; |
||||
|
border-top: none; |
||||
|
border-bottom: none; |
||||
|
border-left: none; |
||||
|
border-right: none; |
||||
|
margin-bottom: 0px; |
||||
|
margin-top: 0px; |
||||
|
} |
||||
|
.m-subm-listgroup { |
||||
|
width: 100%; |
||||
|
//border-left: 4px solid #4b4ba3; |
||||
|
background-color: #f0f0f0; |
||||
|
border-top: none; |
||||
|
border-bottom: none; |
||||
|
border-right: none; |
||||
|
border-left: none; |
||||
|
padding-left: 2.25rem; |
||||
|
} |
||||
|
|
||||
|
.m-subm-listgroup:hover { |
||||
|
background-color: #e7e7e7; |
||||
|
font-weight: 580; |
||||
|
} |
||||
|
.m-subm-listgroup:focus { |
||||
|
background-color: #e7e7e7; |
||||
|
color:#393982; |
||||
|
font-weight: 580; |
||||
|
} |
||||
|
|
||||
|
|
||||
|
</style> |
||||
Loading…
Reference in new issue