area: ui

statics/css/skydive.css

@@ -123,6 +123,14 @@ label {
   height: 100%;
 }
 
+.topology-d3-infra, .topology-d3-full-host, .topology-d3-gremlin {
+  width: 100%;
+  /* text-align: center; */
+  /* outline: none; */
+  background-color: #292e34;
+  border-radius: 4px;
+}
+
 .topology-d3 {
   width: 100%;
   text-align: center;
@@ -131,6 +139,10 @@ label {
   border-radius: 4px;
 }
 
+.topology-d3-infra, .topology-d3-full-host, .topology-d3-gremlin {
+  height: 99%;
+}
+
 .topology-d3 {
   height: 99%;
   overflow: hidden;
@@ -987,3 +999,32 @@ input[type=number] {
   appearance: none;
 
 }
+
+.impossible-to-build-hierarchy-topology {
+    justify-content: center;
+    font-weight: bold;
+    font-size: 20px;
+    min-height: 100%;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    color: white;
+}
+
+.back-to-infrastructure-topology {
+    margin: 10px 0 0 10px;
+}
+.back-to-hosts-topology {
+    margin: 10px 0;
+    font-size: 24px;
+    cursor: pointer;
+    color: white;
+}
+.layout-switcher {
+    margin-bottom: 10px;
+}
+
+.layout-switcher .nav-pills li:not(.active) a {
+    background-color: black;
+    color: white;
+}

statics/css/themes/light/skydive.css

@@ -10,8 +10,12 @@ label {
   color: #337ab7;
 }
 
+.topology-d3-full-host, .topology-d3-infra, .topology-d3-gremlin {
+  background-color: #eee;
+}
+
 .topology-d3 {
-    background-color: #eee;
+  background-color: #eee;
 }
 
 .panel {
@@ -191,4 +195,26 @@ hr {
 
 .input-group-addon {
   color: black;
-}
+}
+
+.impossible-to-build-hierarchy-topology {
+    justify-content: center;
+    font-weight: bold;
+    font-size: 20px;
+    min-height: 100%;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+}
+
+.back-to-infrastructure-topology {
+    margin: 10px 0 0 10px;
+}
+.back-to-hosts-topology {
+    margin: 10px 0;
+    font-size: 24px;
+    cursor: pointer;
+}
+.layout-switcher {
+    margin-bottom: 10px;
+}

statics/index.html

@@ -32,6 +32,7 @@
   <script src="/statics/js/vendor/vue.min-2.5.16.js"></script>
   <script src="/statics/js/vendor/vue-router.min-2.2.1.js"></script>
   <script src="/statics/js/vendor/vuex.min-2.1.2.js"></script>
+  <script src="/statics/js/vendor/vue-select.js"></script>
   <script src="/statics/js/vendor/bootstrap.min.3.3.5.js"></script>
 
   <script src="/statics/js/vendor/bootstrap-3.3.7.min.js"></script>
@@ -46,9 +47,9 @@
 
   <script src="/statics/js/utils.js"></script>
 
+  <script src="/statics/js/components/topologypackage.js"></script>
   <script src="/statics/js/bundle.js"></script>
   <script src="/statics/js/api.js"></script>
-  <script src="/statics/js/websocket.js"></script>
 
   <!-- components -->
   <script src="/statics/js/components/collapse.js"></script>
@@ -84,9 +85,8 @@
 
   <!-- views -->
   <script src="/statics/js/components/login.js"></script>
-  <script src="/statics/js/components/layout.js"></script>
-  <script src="/statics/js/components/graph-layout.js"></script>
   <script src="/statics/js/components/topology.js"></script>
+  <script src="/statics/js/components/old_topology_approach.js"></script>
 
   <!-- UI config -->
   <script>

statics/js/app.js

@@ -1,5 +1,3 @@
-var websocket = new WSHandler();
-
 var store = new Vuex.Store({
 
   state: {
@@ -141,12 +139,12 @@ var routes = [
       created: function() {
         setCookie("authtok", "", -1);
         setCookie("permissions", "", -1);
-        websocket.disconnect();
+        globalEventHandler.websocket().disconnect();
         this.$store.commit('logout');
       }
     }
   },
-  { path: '/topology', component: TopologyComponent, props: (route) => ({ query: route.query }) },
+  { path: '/topology', component: window.layoutConfig.getValue('useNewUi') ? TopologyComponentNewApproach : TopologyComponentOldApproach, props: (route) => ({ query: route.query }) },
   { path: '/preference', component: PreferenceComponent },
   { path: '/status', component: StatusComponent },
   { path: '*', redirect: '/topology' }
@@ -181,10 +179,18 @@ var app = new Vue({
 
     this.setThemeFromConfig();
 
-    websocket.addConnectHandler(self.onConnected.bind(self));
-    websocket.addDisconnectHandler(self.onDisconnected.bind(self));
-    websocket.addErrorHandler(self.onError.bind(self));
-
+    globalEventHandler.onWebsocketEvent('websocket.connected', self.onConnected.bind(self));
+    globalEventHandler.onWebsocketEvent('websocket.disconnected', self.onDisconnected.bind(self));
+    globalEventHandler.onWebsocketEvent('websocket.error', self.onError.bind(self));
+    this.$store.subscribe(function(mutation) {
+      if (mutation.type === "login") {
+        globalEventHandler.websocket().toggleReconnectMode(true);
+	globalEventHandler.websocket().connect();
+      } else if (mutation.type === 'logout'){
+        globalEventHandler.websocket().toggleReconnectMode(false);
+	globalEventHandler.websocket().disconnect();
+      }
+    });
     this.checkAPI();
 
     this.interval = null;
@@ -211,7 +217,6 @@ var app = new Vue({
       if (newVal === true) {
         this.checkAPI();
         router.push('/topology');
-        websocket.connect();
 
         if (!this.interval)
           this.interval = setInterval(this.checkAPI, 5000);
@@ -262,15 +267,11 @@ var app = new Vue({
       this.$store.commit('disconnected');
       this.$error({message: 'Disconnected'});
 
-      if (this.$store.state.logged)
-        setTimeout(function(){websocket.connect();}, 1000);
     },
 
     onError: function() {
       if (this.$store.state.connected)
         this.$store.commit('disconnected');
-
-      setTimeout(function(){websocket.connect();}, 1000);
     },
 
     camelize: function(input) {

statics/js/components/capture-form.js

@@ -208,8 +208,8 @@ Vue.component('capture-form', {
       if (newValue === true &&
           this.$store.state.currentNode &&
           this.$store.state.currentNode.isCaptureAllowed() &&
-          this.$store.state.currentNode.metadata.TID) {
-        this.node1 = this.$store.state.currentNode.metadata.TID;
+          this.$store.state.currentNode.Metadata.TID) {
+        this.node1 = this.$store.state.currentNode.Metadata.TID;
       }
     },
 
@@ -239,7 +239,7 @@ Vue.component('capture-form', {
 
     node1: function(newNode) {
       var node = this.$store.state.currentNode;
-      this.nodeType = node.metadata.Type;
+      this.nodeType = node.Metadata.Type;
     },
 
     node2: function(newNode) {

statics/js/components/capture-list.js

@@ -178,12 +178,12 @@ Vue.component('capture-list', {
   },
 
   created: function() {
-    websocket.addMsgHandler('OnDemandNotification', this.onMsg.bind(this));
-    websocket.addConnectHandler(this.init.bind(this));
+    globalEventHandler.onWebsocketEvent('websocket.messageOnDemandNotification', this.onMsg.bind(this))
+    globalEventHandler.onWebsocketEvent('websocket.connected', this.init.bind(this))
   },
 
   beforeDestroy: function() {
-    websocket.delConnectHandler(this.init.bind(this));
+    globalEventHandler.removeWebsocketHandler('websocket.connected', this.init.bind(this))
   },
 
   computed: {