< template >
< div id = "app" class = "container-fluid" >
<!-- -- -- -- if warning -- -- -- -- -- -- -- - -- >
< div
v - if = "warning===true"
>
< card class = "card-user" style = "max-height:100%" >
< div class = "row" >
< div class = "col-3 order-first " >
< br >
< / div >
< div class = "col-8 order-last" >
< br >
< h2 > Welcome to Swarmlab - hybrid ! < / h2 >
< br >
You are now < b > connected to the local Swarmlab client . < / b >
< br >
That means that < b > at the moment you are offline < / b > and can only < b > work locally on your PC . < / b >
< br >
< br >
To < u > connect to the server < / u > please < i > visit the "Profile" Menu and click on "connect" . < / i >
< br >
< br >
< b > DISCLAMER : < / b >
< br >
When connecting to the server < b > your host is becoming part of a network < / b > of multiple other computers that are also connected .
< br >
This means that communication between those hosts is unlimited .
< br >
< br >
Since docker is a contained virtual environment this is < b > VERY SAFE < / b >
< br >
< br >
< b > BUT < / b >
< br >
to be absolutely secure , like when connecting to any network :
< br >
< ul >
< li >
please make sure < b > your passwords are strong < / b > ( and obviously < b > change all defaults < / b > like the ones provided for the downloadable docker images or our labs , since they are publicly available )
< / li >
< li >
don 't connect to hosts you don' t trust ( e . g . when using the hybrid only trust relliable sources )
< / li >
< li >
be aware that you are in a public network ( like an airport e . g . ) and act accordingly
< / li >
< / ul >
< div class = "row" >
< div class = "col-5 order-first " >
< b > You can always check your connection status at the top right < / b >
< / div >
< div class = "col-7 order-last" >
< img src = "@/assets/img/warning.png" alt = "..." >
< / div >
< / div >
< br >
< br >
< h4 class = "text-warning" >
Please make sure all users on your system have a strong password !
< / h4 >
< h5 class = "text-info" >
< span class = "text-dark" > Advice : < / span > If at all unsure ( e . g . < span class = "text-primary" > if your machine has personal data on it < / span > ) you can ofcourse use our image and launch a virtual machine to be absolutely isolated .
< / h5 >
< div class = "row" >
< div class = "col-3 order-first " >
< br >
< / div >
< div class = "col-8 order-last" >
< div class = "input-group" >
< div class = "input-group-append" >
< button
class = "btn btn-outline-danger"
round
type = "button"
@ click = "setWarning" >
Yes I understad and will be careful < / button >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / card >
< / div >
<!-- -- -- -- else warning -- -- -- -- -- -- -- - -- >
< div
v - else
>
< 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 - n a v b a r - b r a n d >
< 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" >
< b -nav -item href = "https://git.swarmlab.io:3000" target = "_swarmlabgit" > Swarmlab_git < / b - n a v - i t e m >
< 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 >
< b -nav -item : href = "'https://api-client.swarmlab.io:8088/?token='+ token" target = "_swarmlab" > Swarmlab_Cloud < / b - n a v - i t e m >
< / ul >
< ul class = "nav navbar-nav flex-row justify-content-md-center justify-content-start flex-nowrap" >
<!-- -- -- -- -- -- -- -- - socket connection -- >
< b -nav -item
@ click = "onAction('check')"
> Check Connection Status : < / b - n a v - i t e m >
< b -nav -item > Agent < / b - n a v - i t e m >
<!--
v - if = "$socket.disconnected"
-- >
< li class = "nav-item"
v - if = "issocket === 'close'"
>
< a
class = "ti-link nav-link text-danger"
href = "#"
title = "You are disconnected from hybrid_agent"
>
< / a >
< / li >
< li class = "nav-item"
v - else
>
< a
class = "ti-link nav-link text-success"
href = "#"
title = "You are connected hybrid_agent"
@ click = "onAction('connect')"
>
< / a >
< / li >
<!-- -- -- -- -- -- -- -- - socket connection -- >
<!-- -- -- -- -- -- -- -- - wg connection -- >
< b -nav -item > Server < / b - n a v - i t e m >
< li class = "nav-item"
v - if = "isconnect!==true"
>
< a
class = "ti-link nav-link text-danger"
href = "#"
title = "You are disconnected from hybrid_server"
>
< / a >
< / li >
< li class = "nav-item"
v - else
>
< a
class = "ti-link nav-link text-success"
href = "#"
title = "You are connected hybrid_server"
>
< / a >
< / li >
<!-- -- -- -- -- -- -- -- - wg connection -- >
< b -nav -item > < / b - n a v - i t e m >
< / ul >
< / div >
< / nav >
<!-- * * * * * * * * * * * * * * * * * container items * * * * * * * * * * * * * * * * * * -- >
< b -row >
< b -col cols = "12" >
< div class = "d-flex" id = "wrapper" >
<!-- Sidebar max -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< div class = " bg-light border-right" id = "sidebar-wrapper"
style = "width: 15rem;"
v - if = "sidemenou == 'max'"
>
< div class = "list-group list-group-flush"
>
<!-- Menou Dashboard -- >
< b -list -group -item v-b-toggle.hybrid-dashboard 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') }" @click ="hybrid('dashboard')" > Dashboard < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-dashboard" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "dashboard" class = "ti-view-grid 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') }" > Dashoard < / b - l i s t - g r o u p - i t e m >
<!--
< 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 - l i s t - g r o u p - i t e m >
-- >
< / b - c o l l a p s e >
<!-- Menou Settings -- >
< b -list -group -item v-b-toggle.hybrid-profile variant = "light" name = "Local" class = "ti-user list-group-item list-group-item-action" v -on :click ="setActive('profile','')" style = "cursor: pointer;" : class = "{ active: isActive('profile') }" @click ="hybrid('connect-server')" > Profile < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-profile" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
<!--
< b -list -group -item variant = "light" name = "profile" class = "ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('profile','profile_profile')" style = "cursor: pointer;" : class = "{ active: isActiveSub('profile_profile') } " > Local < / b - l i s t - g r o u p - i t e m >
-- >
< b -list -group -item variant = "light" name = "Settings" class = "ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('settings','profile_settings')" style = "cursor: pointer;" : class = "{ active: isActiveSub('profile_settings') }" @click ="hybrid('connect-server')" > Settings < / b -list -group -item >
< / b - c o l l a p s e >
<!-- Menou hybrid -- >
< b -list -group -item v-b-toggle.hybrid-hybrid variant = "light" name = "Local" class = "ti-loop list-group-item list-group-item-action" v -on :click ="setActive('hybrid','')" style = "cursor: pointer;" : class = "{ active: isActive('hybrid') }" @click ="hybrid('manage_service')" > Hybrid / Public < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-hybrid" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Hybrid" class = "ti-target m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('hybrid','hybrid_instances')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_instances') }" @click ="hybrid('manage_service')" > Join < / b -list -group -item >
< b -list -group -item variant = "light" name = "Deploy" class = "ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('hybrid','hybrid_deploy')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_deploy') }" @click ="hybrid('manage_deploy')" > Deploy < / b -list -group -item >
< / b - c o l l a p s e >
<!-- Menou container -- >
< b -list -group -item v-b-toggle.hybrid-container variant = "light" name = "Local" class = "ti-package list-group-item list-group-item-action" v -on :click ="setActive('container','')" style = "cursor: pointer;" : class = "{ active: isActive('container') }" @click ="hybrid('bootstrap')" > Container < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-container" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('container','hybrid_container')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_container') }" @click ="hybrid('bootstrap')" > Container < / b -list -group -item >
< / b - c o l l a p s e >
<!-- Menou private -- >
< b -list -group -item v-b-toggle.hybrid-private variant = "light" name = "Private" class = "ti-home list-group-item list-group-item-action" v -on :click ="setActive('private','')" style = "cursor: pointer;" : class = "{ active: isActive('private') }" @click ="hybrid('services')" > Private / Local < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-private" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('private','hybrid_private')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_private') }" @click ="hybrid('services')" > LabRoom < / b -list -group -item >
< b -list -group -item variant = "light" name = "Storage" class = "ti-server m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('private','hybrid_storage')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_storage') }" @click ="hybrid('storage')" > Storage < / b -list -group -item >
< / b - c o l l a p s e >
<!-- Menou llo -- >
< b -list -group -item v-b-toggle.hybrid-llo variant = "light" name = "Llo" class = "ti-book list-group-item list-group-item-action" v -on :click ="setActive('llo','')" style = "cursor: pointer;" : class = "{ active: isActive('llo') }" @click ="hybrid('llo')" > LearningObjects < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-llo" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-view-list m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('llo','hybrid_llo')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_llo') }" @click ="hybrid('llo')" > Courses < / b -list -group -item >
< / b - c o l l a p s e >
<!-- Menou close -- >
< b -list -group -item variant = "light" name = "menou-min" class = "ti-angle-double-left list-group-item list-group-item-action" v -on :click ="onActionMenu('min')" style = "cursor: pointer;" : class = "{ active: isActive('menou-min') }" title = "Minimize" > < / b - l i s t - g r o u p - i t e m >
< / div >
< / div >
<!-- / S i d e b a r m a x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<!-- Sidebar min -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- >
< div class = " bg-light border-right" id = "sidebar-wrapper1"
v - if = "sidemenou == 'min'"
>
< div class = "list-group list-group-flush"
>
<!-- Menou Dashboard -- >
< b -list -group -item v-b-toggle.hybrid-dashboard1 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') }" @click ="hybrid('dashboard')" title = "Dashboard" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-dashboard1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "dashboard" class = "ti-view-grid 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') }" title = "Dashboard" > < / b - l i s t - g r o u p - i t e m >
<!--
< 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 - l i s t - g r o u p - i t e m >
-- >
< / b - c o l l a p s e >
<!-- Menou Settings -- >
< b -list -group -item v-b-toggle.hybrid-profile1 variant = "light" name = "Local" class = "ti-user list-group-item list-group-item-action" v -on :click ="setActive('profile','')" style = "cursor: pointer;" : class = "{ active: isActive('profile') }" @click ="hybrid('connect-server')" title = "Profile" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-profile1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Settings" class = "ti-pencil-alt m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('settings','profile_settings')" style = "cursor: pointer;" : class = "{ active: isActiveSub('profile_settings') }" @click ="hybrid('connect-server')" title = "Profile" > < / b - l i s t - g r o u p - i t e m >
< / b - c o l l a p s e >
<!-- Menou hybrid -- >
< b -list -group -item v-b-toggle.hybrid-hybrid1 variant = "light" name = "Local" class = "ti-loop list-group-item list-group-item-action" v -on :click ="setActive('hybrid','')" style = "cursor: pointer;" : class = "{ active: isActive('hybrid') }" @click ="hybrid('manage_service')" title = "Hybrid" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-hybrid1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Hybrid" class = "ti-target m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('hybrid','hybrid_instances')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_instances') }" @click ="hybrid('manage_service')" title = "Zones" > < / b - l i s t - g r o u p - i t e m >
< b -list -group -item variant = "light" name = "Deploy" class = "ti-cloud-up m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('hybrid','hybrid_deploy')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_deploy') }" @click ="hybrid('manage_deploy')" title = "Deploy" > < / b - l i s t - g r o u p - i t e m >
< / b - c o l l a p s e >
<!-- Menou container -- >
< b -list -group -item v-b-toggle.hybrid-container1 variant = "light" name = "Local" class = "ti-package list-group-item list-group-item-action" v -on :click ="setActive('container','')" style = "cursor: pointer;" : class = "{ active: isActive('container') }" @click ="hybrid('bootstrap')" title = "Container" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-container1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-harddrives m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('container','hybrid_container')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_container') }" @click ="hybrid('bootstrap')" title = "Show all containers" > < / b - l i s t - g r o u p - i t e m >
< / b - c o l l a p s e >
<!-- Menou private -- >
< b -list -group -item v-b-toggle.hybrid-private1 variant = "light" name = "Private" class = "ti-home list-group-item list-group-item-action" v -on :click ="setActive('private','')" style = "cursor: pointer;" : class = "{ active: isActive('private') }" @click ="hybrid('services')" title = "Private" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-private1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-harddrive m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('private','hybrid_private')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_private') }" @click ="hybrid('services')" title = "LabRoom" > < / b - l i s t - g r o u p - i t e m >
< b -list -group -item variant = "light" name = "Storage" class = "ti-server m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('private','hybrid_storage')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_storage') }" @click ="hybrid('storage')" title = "Storage" > < / b - l i s t - g r o u p - i t e m >
< / b - c o l l a p s e >
<!-- Menou llo -- >
< b -list -group -item v-b-toggle.hybrid-llo1 variant = "light" name = "Llo" class = "ti-book list-group-item list-group-item-action" v -on :click ="setActive('llo','')" style = "cursor: pointer;" : class = "{ active: isActive('llo') }" @click ="hybrid('llo')" title = "LearningObjects" > < / b - l i s t - g r o u p - i t e m >
< b -collapse id = "hybrid-llo1" class = "m-subm" accordion = "m-sidebar" role = "tabpanel" >
< b -list -group -item variant = "light" name = "Container" class = "ti-view-list m-subm-listgroup list-group-item list-group-item-action" v -on :click ="setActive('llo','hybrid_llo')" style = "cursor: pointer;" : class = "{ active: isActiveSub('hybrid_llo') }" @click ="hybrid('llo')" title = "Courses" > < / b - l i s t - g r o u p - i t e m >
< / b - c o l l a p s e >
<!-- Menou close -- >
< b -list -group -item variant = "light" name = "menou-max" class = "ti-angle-double-right list-group-item list-group-item-action" v -on :click ="onActionMenu('max')" style = "cursor: pointer;" title = "Maximize" > < / b - l i s t - g r o u p - i t e m >
< / div >
< / div >
<!-- / S i d e b a r m a x - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - >
<!-- / # s i d e b a r - w r a p p e r - - >
<!-- Page Content -- >
<!-- content -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< div class = "w-100 p-3" style = "background-color: #eee;" >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid dashboard -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< view -dashboard
v - if = "hybridmenou == 'dashboard'"
style = "background-color: #f8f9fa"
>
< / v i e w - d a s h b o a r d >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid dashboard -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid settings -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< connect -server
style = "background-color: #f8f9fa"
v - show = "hybridmenou == 'connect-server'"
>
< / c o n n e c t - s e r v e r >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid settings -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage services -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< manage -services
: key = "componentKeyreload"
v - if = "hybridmenou == 'manage_service'"
style = "background-color: #f8f9fa"
>
< / m a n a g e - s e r v i c e s >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage services -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage llo -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< manage -llo
v - if = "hybridmenou == 'llo'"
style = "background-color: #f8f9fa"
>
< / m a n a g e - l l o >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage llo -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid container -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< network -table
: key = "componentKeyreload1"
v - show = "hybridmenou == 'bootstrap'"
style = "background-color: #f8f9fa"
>
< / n e t w o r k - t a b l e >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid container -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid private bootstrap -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< services -table
v - show = "hybridmenou == 'services'"
style = "background-color: #f8f9fa"
>
< / s e r v i c e s - t a b l e >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid private bootstrap -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage storage -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< manage -storage
: key = "componentKeyreload2"
v - show = "hybridmenou == 'storage'"
style = "background-color: #f8f9fa"
>
< / m a n a g e - s t o r a g e >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid manage storage -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid private deploy -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< manage -deploy
v - if = "hybridmenou == 'manage_deploy'"
style = "background-color: #f8f9fa"
>
< / m a n a g e - d e p l o y >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
<!-- -- -- -- hybrid private deploy -- -- -- -- -- -- -- - -- >
<!-- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - -- >
< / div >
<!-- Page Content -- >
<!-- / # p a g e - c o n t e n t - w r a p p e r - - >
< / div >
<!-- / # w r a p p e r - - >
< / b - c o l >
< / b - r o w >
< footer class = "footer" >
< div id = "appfooter" class = "container" style = "max-width:75%" >
< span data -jsl10n = " license " class = "jsl10n" > Content is available under the
< a class = "text-info" href = "https://creativecommons.org/licenses/by-sa/3.0/" target = "_blank" > Creative Commons License < / a > < / span >
& nbsp ; | & nbsp ;
< a class = "text-info" href = "https://www.gnu.org/licenses/agpl-3.0.html" target = "_blank" > © < / a >
& nbsp ; Coded with & nbsp ;
< i class = "ti-heart" > < / i > & nbsp ; by
< a class = "text-info" href = "https://git.swarmlab.io:3000/zeus" target = "_blank" > & nbsp ; zeus < / a > & nbsp ;
- Released under the
< a class = "text-info" href = "https://www.gnu.org/licenses/agpl-3.0.html" target = "_blank" > & nbsp ; GNU AGPL License < / a > & nbsp ; | & nbsp ;
< a class = "text-info"
href = "#"
@ click = "showdiscl()"
> Disclaimer and Notices < / a >
< span
v - if = "hybridmenou == 'llo'||hybridmenou == 'dashboard'"
>
& nbsp ; | & nbsp ;
< / span >
< a
v - if = "hybridmenou == 'llo'||hybridmenou == 'dashboard'"
rel = "nofollow" class = "external text text-info" href = "https://letsgolarval.wordpress.com/open-art/" target = "newl" >
Linux Penguin
< / a >
< span
v - if = "hybridmenou == 'llo'||hybridmenou == 'dashboard'"
>
by Rebekah Yoder /
< / span >
< a
v - if = "hybridmenou == 'llo'||hybridmenou == 'dashboard'"
rel = "nofollow" class = "external text text-info" href = "https://creativecommons.org/licenses/by/2.0/" target = "newl" > BY - SA
< / a >
< / div >
< / footer >
<!-- -- -- -- / w a r n i n g - - - - - - - - - - - - - - - - - >
< / div >
< / div >
< / template >
< script >
import "@/assets/css/themify-icons.css" ;
import store from '@/store/index'
import { mapState , mapGetters , mapActions , dispatch } from 'vuex'
import Vue from 'vue'
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" ;
import ManageStorage from "./components/mystorage.vue" ;
import ManageDeploy from "./components/managedeploy.vue" ;
import ManageLlo from "./components/managello.vue" ;
import ViewDashboard from "./components/dashboard.vue" ;
export default {
name : 'app' ,
components : {
NetworkTable ,
ViewDashboard ,
ServicesTable ,
ConnectServer ,
ManageServices ,
ManageStorage ,
ManageDeploy ,
ManageLlo
} ,
data ( ) {
return {
warning : true ,
componentKeyreload : 1 ,
componentKeyreload1 : 1 ,
componentKeyreload2 : 1 ,
setStatusAgent : '' ,
issocket : false , //socket server
isconnect : false , // dockerswarm wg
activeItem : '' , // menou
activeItemSub : '' , //submenou
sidemenou : 'max' ,
hybridmenou : 'dashboard' ,
show : true ,
token : '' ,
SwarmabAsciiLabTemplate : ''
}
} ,
mounted ( ) {
this . $root . $on ( 'hybrid_server_status' , ( value ) => {
this . serverstatus ( )
} )
} ,
beforeDestroy ( ) {
this . $root . $off ( 'hybrid_server_status' )
} ,
created ( ) {
} ,
methods : {
setWarning ( ) {
this . warning = false
} ,
async onAction ( action ) {
if ( action == 'check' ) {
if ( this . $socket . disconnected ) {
var socketStatus = 'close'
} else if ( this . $socket . connected ) {
var socketStatus = 'open'
}
if ( this . isconnect ) {
var serverStatus = 'open'
} else {
var serverStatus = 'close'
}
var info = "Status<br>"
info += "Agent is " + socketStatus + "<br>"
info += "Server is " + serverStatus
this . $swal ( {
type : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
//cancelButtonText: 'No, cancel!',
showCancelButton : true ,
showLoaderOnConfirm : false ,
//reverseButtons: true,
focusCancel : true ,
confirmButtonText : 'Yes, Reconnect!'
} ) . then ( ( result ) => {
this . reconnenting ( result ) ;
} )
}
} ,
async reconnenting ( result ) {
if ( result . value ) {
//console.log(JSON.stringify(result))
//window.location.reload()
this . componentKeyreload += 1
this . componentKeyreload1 += 1
this . componentKeyreload2 += 1
}
} ,
async serverstatus ( action ) {
var log = store . getters [ 'pipelineLLO/getstatus' ]
//console.log('status log ' + JSON.stringify(log))
if ( log . data . swarmlab == 'active' && log . data . hybrid == 'Online' ) {
this . isconnect = true
} else {
this . isconnect = false
}
} ,
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 == 'dashboard' ) {
console . log ( 'dashboard ' + action )
} else if ( action == 'connect-server' ) {
this . $root . $emit ( 'hybrid_connect_server' )
} else if ( action == 'llo' ) {
console . log ( 'llo ' + action )
//this.$root.$emit('hybrid_manage_llo')
} else if ( action == 'services' ) {
this . $root . $emit ( 'hybrid_refresh_availableservices' )
} else if ( action == 'manage_service' ) {
//this.$root.$emit('hybrid_manage_service')
} else if ( action == 'storage' ) {
//this.$root.$emit('hybrid_manage_service')
} else if ( action == 'manage_deploy' ) {
}
} ,
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()
} ,
showdiscl ( ) {
var winfo = '<code class="precode text-info" >Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:'
winfo += '<br>'
winfo += '<br>'
winfo += '1. Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.'
winfo += '<br>'
winfo += '<br>'
winfo += '2. Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.'
winfo += '<br>'
winfo += '<br>'
winfo += '3. Neither the name of Swarmlab.io nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.'
winfo += '<br>'
winfo += '<br>'
winfo += 'THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS “AS IS” AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.</code>' ;
let info = '<div class="text-left" style="height: 550px; overflow-y: scroll;"><b><p>' + winfo + '</p></b></div>'
this . $swal ( {
type : 'Info' ,
title : 'Legal Disclaimer and Notices' ,
icon : 'info' ,
html : info ,
showCloseButton : true ,
showLoaderOnConfirm : false ,
allowOutsideClick : false ,
cancelButtonText : 'No, cancel!' ,
showCancelButton : false ,
showLoaderOnConfirm : false ,
reverseButtons : true ,
focusCancel : true ,
confirmButtonText : 'Ok!'
} )
}
} ,
computed : {
socketStatus ( ) {
return store . getters [ 'pipelineLLO/getsocketStatus' ]
}
} ,
watch : {
socketStatus ( status ) {
//console.log('watchok '+status)
this . issocket = status
}
}
}
< / script >
< style >
. active {
background - color : # e7e7e7 ! important ;
color : # 0 c5460 ! 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 : - 5 px ;
right : - 8 px ;
font - size : 1.5 em ;
font - weight : 300 ;
content : "\e606" ;
color : # 222 ;
color : # 74 B3C8 ;
border - color : # c60000 ;
}
. ti - themify - logo : before {
content : "\e6d1" ;
}
. menoutext {
font - family : 'Lato' , sans - serif ! important ;
}
. mycontainer {
padding - right : 20 px ! important ;
padding - left : 5 px ! important ;
margin - right : auto ;
margin - left : auto
}
. m - subm {
width : 100 % ;
border - left : 4 px solid # 4 b4ba3 ; ;
background - color : # f0f0f0 ;
border - top : none ;
border - bottom : none ;
border - right : none ;
}
. m - subm - card {
padding - left : 0 px ;
padding - right : 0 px ;
padding - top : 0 px ;
padding - bottom : 0 px ;
background - color : # f0f0f0 ;
border - top : none ;
border - bottom : none ;
border - left : none ;
border - right : none ;
margin - bottom : 0 px ;
margin - top : 0 px ;
}
. 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.25 rem ;
}
. m - subm - listgroup : hover {
background - color : # e7e7e7 ;
font - weight : 580 ;
}
. m - subm - listgroup : focus {
background - color : # e7e7e7 ;
color : # 393982 ;
font - weight : 580 ;
}
/ * !
* Start Bootstrap - Simple Sidebar ( https : //startbootstrap.com/template/simple-sidebar)
* Copyright 2013 - 2020 Start Bootstrap
* Licensed under MIT ( https : //github.com/StartBootstrap/startbootstrap-simple-sidebar/blob/master/LICENSE)
* /
# sidebar - wrapper . list - group {
margin : 0 ;
line - height : 30 px ;
font - size : 12 px ;
font - weight : 600 ;
}
/ *
# sidebar - wrapper . list - group {
width : 15 rem ;
}
# wrapper {
overflow - x : hidden ;
}
# sidebar - wrapper {
min - height : 100 vh ;
margin - left : - 15 rem ;
- webkit - transition : margin .25 s ease - out ;
- moz - transition : margin .25 s ease - out ;
- o - transition : margin .25 s ease - out ;
transition : margin .25 s ease - out ;
}
# sidebar - wrapper . sidebar - heading {
padding : 0.875 rem 1.25 rem ;
font - size : 1.2 rem ;
}
# sidebar - wrapper . list - group {
width : 15 rem ;
}
# wrapper . toggled # sidebar - wrapper {
margin - left : 0 ;
}
@ media ( min - width : 768 px ) {
# sidebar - wrapper {
margin - left : 0 ;
}
# page - content - wrapper {
min - width : 0 ;
width : 100 % ;
}
# wrapper . toggled # sidebar - wrapper {
margin - left : - 15 rem ;
}
}
# page - content - wrapper {
min - width : 100 vh ;
}
# sidebar - wrapper1 . list - group {
margin : 0 ;
line - height : 30 px ;
font - size : 12 px ;
font - weight : 600 ;
}
/ *
# sidebar - wrapper1 . list - group {
width : 15 rem ;
}
# wrapper {
overflow - x : hidden ;
}
# sidebar - wrapper1 {
min - height : 100 vh ;
margin - left : - 15 rem ;
- webkit - transition : margin .25 s ease - out ;
- moz - transition : margin .25 s ease - out ;
- o - transition : margin .25 s ease - out ;
transition : margin .25 s ease - out ;
}
# sidebar - wrapper1 . sidebar - heading {
padding : 0.875 rem 1.25 rem ;
font - size : 1.2 rem ;
}
# sidebar - wrapper1 . list - group {
width : 15 rem ;
}
# wrapper . toggled # sidebar - wrapper1 {
margin - left : 0 ;
}
@ media ( min - width : 768 px ) {
# sidebar - wrapper1 {
margin - left : 0 ;
}
# page - content - wrapper {
min - width : 0 ;
width : 100 % ;
}
# wrapper . toggled # sidebar - wrapper1 {
margin - left : - 15 rem ;
}
}
* /
precode {
overflow : auto ;
word - wrap : normal ;
text - align : left ;
white - space : pre ;
}
< / style >
