|
|
|
|
<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">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<b-nav-item href="https://git.swarmlab.io:3000" target="_swarmlabgit"> Swarmlab_git </b-nav-item>
|
|
|
|
|
<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-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')"
|
|
|
|
|
>Connection Status:</b-nav-item>
|
|
|
|
|
<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>
|
|
|
|
|
</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-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>
|
|
|
|
|
</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-nav-item>
|
|
|
|
|
</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') }"> Dashboard</b-list-group-item>
|
|
|
|
|
|
|
|
|
|
<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">
|
|
|
|
|
<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')"> Zone</b-list-group-item>
|
|
|
|
|
</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 -->
|
|
|
|
|
<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</b-list-group-item>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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') }"></b-list-group-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /Sidebar max ------------------------------------ -->
|
|
|
|
|
<!-- Sidebar min -------------------------------- -->
|
|
|
|
|
<div class=" bg-light border-right" id="sidebar-wrapper"
|
|
|
|
|
v-if="sidemenou == 'min'"
|
|
|
|
|
>
|
|
|
|
|
<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') }" title="Dashboard"></b-list-group-item>
|
|
|
|
|
|
|
|
|
|
<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') }" 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 -->
|
|
|
|
|
<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')" title="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="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 -->
|
|
|
|
|
<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')" title="Hybrid" > </b-list-group-item>
|
|
|
|
|
|
|
|
|
|
<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')" title="Zones"> </b-list-group-item>
|
|
|
|
|
</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')" title="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')" title="Show all containers"> </b-list-group-item>
|
|
|
|
|
</b-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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')" title="Private"> </b-list-group-item>
|
|
|
|
|
|
|
|
|
|
<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')" title="Bootstrap"> </b-list-group-item>
|
|
|
|
|
</b-collapse>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 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;" ></b-list-group-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /Sidebar max ------------------------------------ -->
|
|
|
|
|
|
|
|
|
|
<!-- /#sidebar-wrapper -->
|
|
|
|
|
|
|
|
|
|
<!-- Page Content -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- content----------------------------------- -->
|
|
|
|
|
|
|
|
|
|
<div class="w-100 p-3" style="background-color: #eee;">
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid settings --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<connect-server
|
|
|
|
|
style="background-color: #f8f9fa"
|
|
|
|
|
v-show="hybridmenou == 'connect-server'"
|
|
|
|
|
>
|
|
|
|
|
</connect-server>
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid settings --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid manage services --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<manage-services
|
|
|
|
|
v-show="hybridmenou == 'manage_service'"
|
|
|
|
|
style="background-color: #f8f9fa"
|
|
|
|
|
>
|
|
|
|
|
</manage-services>
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid manage services --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid container --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<network-table
|
|
|
|
|
v-show="hybridmenou == 'bootstrap'"
|
|
|
|
|
style="background-color: #f8f9fa"
|
|
|
|
|
>
|
|
|
|
|
</network-table>
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid container --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid private bootstrap --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<services-table
|
|
|
|
|
v-show="hybridmenou == 'services'"
|
|
|
|
|
style="background-color: #f8f9fa"
|
|
|
|
|
>
|
|
|
|
|
</services-table>
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
<!-- ------ hybrid private bootstrap --------------- -->
|
|
|
|
|
<!-- ----------------------------------- -->
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Page Content -->
|
|
|
|
|
|
|
|
|
|
<!-- /#page-content-wrapper -->
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
<!-- /#wrapper -->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</b-col>
|
|
|
|
|
</b-row>
|
|
|
|
|
|
|
|
|
|
</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";
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
name: 'app',
|
|
|
|
|
components: {
|
|
|
|
|
NetworkTable,
|
|
|
|
|
ServicesTable,
|
|
|
|
|
ConnectServer,
|
|
|
|
|
ManageServices
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
setStatusAgent:'',
|
|
|
|
|
issocket:false, //socket server
|
|
|
|
|
isconnect:false, // dockerswarm wg
|
|
|
|
|
activeItem: '', // menou
|
|
|
|
|
activeItemSub: '', //submenou
|
|
|
|
|
sidemenou:'max',
|
|
|
|
|
hybridmenou:'bootstrap',
|
|
|
|
|
show: true,
|
|
|
|
|
token: '',
|
|
|
|
|
SwarmabAsciiLabTemplate:''
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.$root.$on('hybrid_server_status', (value) => {
|
|
|
|
|
this.serverstatus()
|
|
|
|
|
})
|
|
|
|
|
},
|
|
|
|
|
beforeDestroy () {
|
|
|
|
|
this.$root.$off('hybrid_server_status')
|
|
|
|
|
},
|
|
|
|
|
created() {
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
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, Connect!'
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
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 == '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()
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
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: #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;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*!
|
|
|
|
|
* 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;
|
|
|
|
|
}
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
