You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

816 lines
31 KiB

4 years ago
<template>
4 years ago
<div id="app" class="container-fluid">
4 years ago
<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">
4 years ago
4 years ago
<ul class="navbar-nav mx-auto text-md-center text-left">
4 years ago
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
4 years ago
<li class="nav-item">
<a class="nav-link" href="#">
-
</a>
</li>
4 years ago
<li class="nav-item my-auto">
<a class="nav-link navbar-brand mx-0 d-none d-md-inline" href="">Hybrid</a>
</li>
4 years ago
<li class="nav-item">
<a class="nav-link" href="#">
-
</a>
</li>
4 years ago
<b-nav-item :href="'https://api-client.swarmlab.io:8088/?token='+ token" target="_swarmlab"> Swarmlab_Cloud </b-nav-item>
</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')"
4 years ago
>Check Connection Status:</b-nav-item>
4 years ago
<b-nav-item >Agent</b-nav-item>
<!--
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>
4 years ago
</li>
4 years ago
<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>
4 years ago
</li>
4 years ago
<!-- --------------- socket connection -->
<!-- --------------- wg connection -->
<b-nav-item >Server</b-nav-item>
<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>
4 years ago
</li>
4 years ago
<li class="nav-item"
v-else
>
<a
class="ti-link nav-link text-success"
href="#"
title="You are connected hybrid_server"
>
</a>
4 years ago
</li>
4 years ago
<!-- --------------- wg connection -->
4 years ago
<b-nav-item > </b-nav-item>
</ul>
</div>
</nav>
<!-- ***************** container items ****************** -->
4 years ago
<b-row >
4 years ago
<b-col cols="12" >
4 years ago
4 years ago
<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 -->
4 years ago
<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-list-group-item>
4 years ago
<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-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 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-list-group-item>
<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-list-group-item>
-->
<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-collapse>
<!-- 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</b-list-group-item>
<b-collapse id="hybrid-hybrid" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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>
4 years ago
<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>
4 years ago
</b-collapse>
<!-- 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-list-group-item>
<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-collapse>
<!-- Menou private -->
4 years ago
<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-list-group-item>
4 years ago
<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')"> Bootstrap</b-list-group-item>
</b-collapse>
4 years ago
<!-- 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-list-group-item>
<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-collapse>
4 years ago
<!-- Menou close -->
4 years ago
<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-list-group-item>
4 years ago
</div>
</div>
<!-- /Sidebar max ------------------------------------ -->
<!-- Sidebar min -------------------------------- -->
4 years ago
<div class=" bg-light border-right" id="sidebar-wrapper1"
4 years ago
v-if="sidemenou == 'min'"
>
<div class="list-group list-group-flush"
>
<!-- Menou Dashboard -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-dashboard1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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-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 Settings -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-profile1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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-list-group-item>
</b-collapse>
<!-- Menou hybrid -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-hybrid1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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-list-group-item>
4 years ago
<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-list-group-item>
4 years ago
</b-collapse>
<!-- Menou container -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-container1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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-list-group-item>
</b-collapse>
<!-- Menou private -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-private1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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="Bootstrap"> </b-list-group-item>
</b-collapse>
4 years ago
<!-- Menou llo -->
4 years ago
<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-list-group-item>
4 years ago
4 years ago
<b-collapse id="hybrid-llo1" class="m-subm" accordion="m-sidebar" role="tabpanel">
4 years ago
<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-list-group-item>
</b-collapse>
4 years ago
<!-- Menou close -->
4 years ago
<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-list-group-item>
4 years ago
</div>
</div>
<!-- /Sidebar max ------------------------------------ -->
<!-- /#sidebar-wrapper -->
<!-- Page Content -->
<!-- content----------------------------------- -->
<div class="w-100 p-3" style="background-color: #eee;">
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboard --------------- -->
<!-- ----------------------------------- -->
<view-dashboard
v-if="hybridmenou == 'dashboard'"
style="background-color: #f8f9fa"
>
</view-dashboard>
<!-- ----------------------------------- -->
<!-- ------ hybrid dashboard --------------- -->
<!-- ----------------------------------- -->
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid settings --------------- -->
<!-- ----------------------------------- -->
<connect-server
style="background-color: #f8f9fa"
v-show="hybridmenou == 'connect-server'"
>
</connect-server>
<!-- ----------------------------------- -->
<!-- ------ hybrid settings --------------- -->
<!-- ----------------------------------- -->
<!-- ----------------------------------- -->
<!-- ------ hybrid manage services --------------- -->
<!-- ----------------------------------- -->
<manage-services
4 years ago
:key="componentKeyreload"
4 years ago
v-if="hybridmenou == 'manage_service'"
4 years ago
style="background-color: #f8f9fa"
>
</manage-services>
<!-- ----------------------------------- -->
<!-- ------ hybrid manage services --------------- -->
<!-- ----------------------------------- -->
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid manage llo --------------- -->
<!-- ----------------------------------- -->
<manage-llo
v-if="hybridmenou == 'llo'"
style="background-color: #f8f9fa"
>
</manage-llo>
<!-- ----------------------------------- -->
<!-- ------ hybrid manage llo --------------- -->
<!-- ----------------------------------- -->
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid container --------------- -->
<!-- ----------------------------------- -->
4 years ago
<network-table
4 years ago
:key="componentKeyreload1"
4 years ago
v-show="hybridmenou == 'bootstrap'"
4 years ago
style="background-color: #f8f9fa"
>
</network-table>
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid container --------------- -->
<!-- ----------------------------------- -->
4 years ago
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid private bootstrap --------------- -->
<!-- ----------------------------------- -->
4 years ago
<services-table
4 years ago
v-show="hybridmenou == 'services'"
4 years ago
style="background-color: #f8f9fa"
>
4 years ago
</services-table>
<!-- ----------------------------------- -->
<!-- ------ hybrid private bootstrap --------------- -->
<!-- ----------------------------------- -->
4 years ago
<!-- ----------------------------------- -->
<!-- ------ hybrid private deploy --------------- -->
<!-- ----------------------------------- -->
<manage-deploy
v-if="hybridmenou == 'manage_deploy'"
style="background-color: #f8f9fa"
>
</manage-deploy>
<!-- ----------------------------------- -->
<!-- ------ hybrid private deploy --------------- -->
<!-- ----------------------------------- -->
4 years ago
</div>
4 years ago
4 years ago
<!-- Page Content -->
4 years ago
4 years ago
<!-- /#page-content-wrapper -->
4 years ago
4 years ago
</div>
<!-- /#wrapper -->
4 years ago
4 years ago
4 years ago
</b-col>
</b-row>
4 years ago
4 years ago
<footer class="footer">
<div id="appfooter" class="container" style="max-width:75%">
4 years ago
<span data-jsl10n="license" class="jsl10n">Content is available under the
4 years ago
<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'"
>
&nbsp; | &nbsp;
</span>
<a
v-if="hybridmenou == 'llo'"
rel="nofollow" class="external text text-info" href="https://letsgolarval.wordpress.com/open-art/" target="newl">
Linux Penguin
</a>
<span
v-if="hybridmenou == 'llo'"
>
by Rebekah Yoder /
</span>
<a
v-if="hybridmenou == 'llo'"
rel="nofollow" class="external text text-info" href="https://creativecommons.org/licenses/by/2.0/" target="newl">BY-SA
</a>
</div>
</footer>
4 years ago
</div>
</template>
<script>
import "@/assets/css/themify-icons.css";
4 years ago
import store from '@/store/index'
import {mapState, mapGetters, mapActions,dispatch} from 'vuex'
import Vue from 'vue'
4 years ago
import ConnectServer from "./components/myconnect-server.vue";
4 years ago
import NetworkTable from "./components/mynetwork.vue";
4 years ago
import ServicesTable from "./components/myservices.vue";
4 years ago
import ManageServices from "./components/manageservices.vue";
4 years ago
import ManageDeploy from "./components/managedeploy.vue";
4 years ago
import ManageLlo from "./components/managello.vue";
4 years ago
import ViewDashboard from "./components/dashboard.vue";
4 years ago
export default {
name: 'app',
components: {
4 years ago
NetworkTable,
4 years ago
ViewDashboard,
4 years ago
ServicesTable,
ConnectServer,
4 years ago
ManageServices,
4 years ago
ManageDeploy,
ManageLlo
4 years ago
},
data() {
return {
4 years ago
componentKeyreload:1,
4 years ago
componentKeyreload1:1,
4 years ago
setStatusAgent:'',
issocket:false, //socket server
isconnect:false, // dockerswarm wg
activeItem: '', // menou
activeItemSub: '', //submenou
sidemenou:'max',
4 years ago
hybridmenou:'dashboard',
4 years ago
show: true,
token: '',
SwarmabAsciiLabTemplate:''
}
},
mounted() {
4 years ago
this.$root.$on('hybrid_server_status', (value) => {
this.serverstatus()
})
4 years ago
},
4 years ago
beforeDestroy () {
this.$root.$off('hybrid_server_status')
},
4 years ago
created() {
},
methods: {
4 years ago
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,
4 years ago
//cancelButtonText: 'No, cancel!',
showCancelButton: true,
4 years ago
showLoaderOnConfirm: false,
//reverseButtons: true,
4 years ago
focusCancel: true,
confirmButtonText: 'Yes, Reconnect!'
}).then((result)=> {
this.reconnenting(result);
})
4 years ago
}
4 years ago
},
async reconnenting(result) {
if(result.value){
//console.log(JSON.stringify(result))
//window.location.reload()
this.componentKeyreload += 1
4 years ago
this.componentKeyreload1 += 1
4 years ago
}
4 years ago
},
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)
},
4 years ago
hybrid(action) {
4 years ago
this.hybridmenou = action
4 years ago
//console.log(action)
4 years ago
if(action == 'bootstrap'){
this.$root.$emit('hybrid_refresh_dockerservices')
4 years ago
}else if(action == 'dashboard'){
console.log('dashboard '+action)
4 years ago
}else if(action == 'connect-server'){
this.$root.$emit('hybrid_connect_server')
4 years ago
}else if(action == 'llo'){
console.log('llo '+action)
//this.$root.$emit('hybrid_manage_llo')
4 years ago
}else if(action == 'services'){
this.$root.$emit('hybrid_refresh_availableservices')
4 years ago
}else if(action == 'manage_service'){
//this.$root.$emit('hybrid_manage_service')
4 years ago
}else if(action == 'manage_deploy'){
4 years ago
}
4 years ago
},
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()
4 years ago
},
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!'
})
}
4 years ago
4 years ago
},
computed: {
socketStatus() {
return store.getters['pipelineLLO/getsocketStatus']
}
},
watch: {
socketStatus(status) {
4 years ago
//console.log('watchok '+status)
4 years ago
this.issocket = status
}
4 years ago
}
}
</script>
<style>
4 years ago
.active {
background-color: #e7e7e7 !important;
color: #0c5460 !important;
}
4 years ago
@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;
}
4 years ago
.mycontainer {
padding-right: 20px !important;
padding-left: 5px !important;
margin-right:auto;
margin-left:auto
}
4 years ago
.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;
}
/*!
* 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:30px;
font-size:12px;
font-weight:600;
}
/*
#sidebar-wrapper .list-group {
width: 15rem;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper .list-group {
width: 15rem;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper {
margin-left: -15rem;
}
}
#page-content-wrapper {
min-width: 100vh;
}
4 years ago
#sidebar-wrapper1 .list-group {
margin:0;
line-height:30px;
font-size:12px;
font-weight:600;
}
/*
#sidebar-wrapper1 .list-group {
width: 15rem;
}
#wrapper {
overflow-x: hidden;
}
#sidebar-wrapper1 {
min-height: 100vh;
margin-left: -15rem;
-webkit-transition: margin .25s ease-out;
-moz-transition: margin .25s ease-out;
-o-transition: margin .25s ease-out;
transition: margin .25s ease-out;
}
#sidebar-wrapper1 .sidebar-heading {
padding: 0.875rem 1.25rem;
font-size: 1.2rem;
}
#sidebar-wrapper1 .list-group {
width: 15rem;
}
#wrapper.toggled #sidebar-wrapper1 {
margin-left: 0;
}
@media (min-width: 768px) {
#sidebar-wrapper1 {
margin-left: 0;
}
#page-content-wrapper {
min-width: 0;
width: 100%;
}
#wrapper.toggled #sidebar-wrapper1 {
margin-left: -15rem;
}
}
4 years ago
*/
4 years ago
precode {
overflow: auto;
word-wrap: normal;
text-align: left;
white-space: pre;
}
4 years ago
4 years ago
</style>