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