feat: add spliter, and fix the control left bar, todo the main body

mock.py

@@ -125,6 +125,301 @@ def asset_groups_assets():
       "name": "ungrouped",
       "assets": []
     },
+    {
+      "id": 2,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 3,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 4,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 5,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
+    {
+      "id": 6,
+      "name": "ungrouped",
+      "assets": []
+    },
     {
       "id": 1,
       "name": "Default long name long name long name",

package-lock.json

@@ -231,6 +231,14 @@
         "tslib": "1.8.1"
       }
     },
+    "@angular/flex-layout": {
+      "version": "2.0.0-beta.10-4905443",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.10-4905443.tgz",
+      "integrity": "sha512-jjr6mQ3X2vdEQbsyHD/mz1hfTBUUEOZVLFWEz/sbNoeU7uiA4lvqdp/ASrkZydGJHmTDUYrbBE/9kx0lherZ8Q==",
+      "requires": {
+        "tslib": "1.8.1"
+      }
+    },
     "@angular/forms": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.0.tgz",
@@ -340,6 +348,27 @@
       "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.1.7.tgz",
       "integrity": "sha512-TMDN26Q4J+Sh+OPqAx8BK5Q/3hAAmcTAUQ9wvC9nboSOAmYUaHGz8t21yGdeUtRtunIfMpjTnwLa+X2Pfoq42w=="
     },
+    "@swimlane/ngx-ui": {
+      "version": "20.2.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-ui/-/ngx-ui-20.2.0.tgz",
+      "integrity": "sha512-GPmuhcsLtogiBrITZUSUVEB8X7EtrmJQ+T5MEQqdA/rPsu6VHMPHmx+Dl+Sf2iUubydJByewRgBHNVyr5L+tMQ==",
+      "requires": {
+        "@angular/flex-layout": "2.0.0-beta.10-4905443",
+        "angular2-moment": "1.8.0",
+        "codemirror": "5.37.0",
+        "moment": "2.22.1",
+        "mousetrap": "1.6.1",
+        "ng2-file-upload": "1.3.0",
+        "normalize.css": "5.0.0"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.22.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
+          "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ=="
+        }
+      }
+    },
     "@types/jasmine": {
       "version": "2.8.4",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.4.tgz",
@@ -518,14 +547,12 @@
         }
       }
     },
-    "angular-tree-component": {
-      "version": "7.1.0",
-      "resolved": "https://registry.npmjs.org/angular-tree-component/-/angular-tree-component-7.1.0.tgz",
-      "integrity": "sha512-i0Kk4gnuU+i6p5ZsIcDcGrtHPnDLOyHk8Vqez6IpSuOLvVPZ3Y7/Y1MEOoj7Nx6qRU5NuuVaPLy2idOEB7ClRw==",
+    "angular2-moment": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/angular2-moment/-/angular2-moment-1.8.0.tgz",
+      "integrity": "sha512-cBppm4FM9sOtZr4eSnodjbIhvn3bZzuw1VIb3VN53/aWKQVrNosQVG7l0dnX5ifdy08i9Yd/5eGYOXw+Lb63YA==",
       "requires": {
-        "lodash": "4.17.5",
-        "mobx": "3.6.2",
-        "mobx-angular": "2.1.1"
+        "moment": "2.18.1"
       }
     },
     "animate.css": {
@@ -2003,6 +2030,11 @@
         "sprintf-js": "1.0.3"
       }
     },
+    "codemirror": {
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.37.0.tgz",
+      "integrity": "sha512-dQaayDJCLU4UJcwg2RM44oFrs0dMNndTp6qxQJF6XI71l1xN3RB4IqiKES0b0rccbARbrD/UBB4t8DNknfaOTw=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -7568,16 +7600,6 @@
         "minimist": "0.0.8"
       }
     },
-    "mobx": {
-      "version": "3.6.2",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-3.6.2.tgz",
-      "integrity": "sha512-Dq3boJFLpZEvuh5a/MbHLUIyN9XobKWIb0dBfkNOJffNkE3vtuY0C9kSDVpfH8BB0BPkVw8g22qCv7d05LEhKg=="
-    },
-    "mobx-angular": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/mobx-angular/-/mobx-angular-2.1.1.tgz",
-      "integrity": "sha1-1eNlOayyABht1aEXCAa0d2uai4g="
-    },
     "module-deps": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/module-deps/-/module-deps-4.1.1.tgz",
@@ -7647,6 +7669,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
       "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
     },
+    "mousetrap": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.1.tgz",
+      "integrity": "sha1-KghfXHUSlMdefoH27CVFspy/Qtk="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -8049,6 +8076,16 @@
         "chart.js": "2.7.1"
       }
     },
+    "ng2-file-tree": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/ng2-file-tree/-/ng2-file-tree-0.4.3.tgz",
+      "integrity": "sha1-gpYDAd2GVlu9XLbirQJg4azElq4="
+    },
+    "ng2-file-upload": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.3.0.tgz",
+      "integrity": "sha512-Pudxik6LWYsT8hNiEW7RfjgGWAnvfQywxwJYMdt1snTUe+KnlRc/QqPv3QEQW6plXTanuLkYz/TbqilSfSHOsw=="
+    },
     "ngx-bootstrap": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz",
@@ -8496,6 +8533,11 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize.css": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-5.0.0.tgz",
+      "integrity": "sha1-fOyHXOgXilMzxN6Ato6pwYudfDc="
+    },
     "npm-font-open-sans": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/npm-font-open-sans/-/npm-font-open-sans-1.1.0.tgz",
@@ -13566,11 +13608,6 @@
       "version": "0.8.20",
       "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.8.20.tgz",
       "integrity": "sha512-FXlA37ErSXCMy5RNBcGFgCI/Zivqzr0D19GuvDxhcYIJc7xkFp6c29DKyODJu0Zo+EMyur/WPPgcBh1EHjB9jA=="
-    },
-    "ztree-v3": {
-      "version": "3.5.17",
-      "resolved": "https://registry.npmjs.org/ztree-v3/-/ztree-v3-3.5.17.tgz",
-      "integrity": "sha1-fO1PmNrpdFZjzL+0MXIAEKSnjKo="
     }
   }
 }

package.json

@@ -24,6 +24,7 @@
     "@angular/platform-browser-dynamic": "5.2.0",
     "@angular/router": "5.2.0",
     "@swimlane/ngx-datatable": "^11.1.7",
+    "@swimlane/ngx-ui": "^20.2.0",
     "ajv": "^6.2.1",
     "animate.css": "^3.5.2",
     "body-parser": "^1.18.2",
@@ -47,6 +48,7 @@
     "metismenu": "^2.5.0",
     "mstsc.js": "^0.2.4",
     "ng2-charts": "^1.5.0",
+    "ng2-file-tree": "^0.4.3",
     "ngx-bootstrap": "^1.6.6",
     "ngx-cookie-service": "^1.0.10",
     "ngx-layer": "0.0.4",

src/app/app.module.ts

@@ -15,7 +15,6 @@ import {AppRouterModule} from './router/router.module';
 
 import {AppComponent} from './pages/app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {TreeModule} from 'angular-tree-component';
 
 // service
 import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
@@ -35,6 +34,7 @@ import {CleftbarDialogComponent} from './pages/control/cleftbar/cleftbar.compone
 import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
 import {PluginModules} from './plugins/plugins';
 import {TestPageComponent} from './test-page/test-page.component';
+import {Ng2FileTreeModule} from 'ng2-file-tree/ng2-file-tree';
 
 
 @NgModule({
@@ -47,9 +47,9 @@ import {TestPageComponent} from './test-page/test-page.component';
     ReactiveFormsModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
     NgxDatatableModule,
-    TreeModule,
     AppRouterModule,
-    ...PluginModules
+    ...PluginModules,
+    Ng2FileTreeModule
   ],
   declarations: [
     AppComponent,

src/app/elements/asset-tree/asset-tree.component.html

-<div class="overflow">
-  <ul class="filetree">
-    <li *ngFor="let hostGroup of HostGroups ; let i = index ">
-      <input type="checkbox" id="hostgroup-{{i}}">
-      <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
-      <ul [ngClass]="{'insearch': q }">
-        <li *ngFor="let host of hostGroup.assets_granted  " (click)="Connect(host)"
-            (contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}"
-            [matTooltipPosition]="TooltipPosition">
-          <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
-          {{host.hostname}}
-        </li>
-      </ul>
-    </li>
-  </ul>
-</div>
+<ngx-tree [nodes]="nodes1">
+  <ng-template let-label="label" let-model="model">
+    <strong>{{label}}</strong>
+  </ng-template>
+</ngx-tree>

src/app/elements/asset-tree/asset-tree.component.scss

+@import "~@swimlane/ngx-ui/release/components/tree/tree.component";
+@import "~@swimlane/ngx-ui/release/components/icon/icon.component";

src/app/elements/asset-tree/asset-tree.component.ts

 import {Component, OnInit} from '@angular/core';
 import {HttpService} from '../../app.service';
-import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
   selector: 'elements-asset-tree',
@@ -9,6 +8,25 @@ import * as jQuery from 'jquery/dist/jquery.min.js';
 })
 export class ElementAssetTreeComponent implements OnInit {
 
+  nodes1: any[] = [
+    {
+      label: 'Node1', model: {type: 'Array', count: 1}
+    },
+    {
+      label: 'Node2',
+      expandable: true,
+      model: {type: 'Object'},
+      children: [
+        {
+          label: 'Node1', model: {type: 'Array', count: 1}
+        }
+      ]
+    },
+    {
+      label: 'Node3', model: {type: 'Array', count: 1}
+    }
+  ];
+
   constructor(private _http: HttpService) {
 
 

src/app/elements/elements.component.ts

@@ -14,6 +14,7 @@ import {ElementElfinderComponent} from './elfinder/elfinder.component';
 import {ElementSettingsComponent} from './settings/settings.component';
 import {ElementDialogAlertComponent} from './dialog/dialog.service';
 import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
+import {ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
 
 export const ElementComponents = [
   ElementLeftbarComponent,
@@ -30,5 +31,6 @@ export const ElementComponents = [
   ElementElfinderComponent,
   ElementSettingsComponent,
   ElementDialogAlertComponent,
-  ElementGuacamoleComponent
+  ElementGuacamoleComponent,
+  ElementAssetTreeComponent
 ];

src/app/pages/control/cleftbar/cleftbar.component.html

-<div id="sidebar">
-  <div class="search">
+<div class="sidebar" fxLayout="column" ngxSplit="column">
+  <div fxflex="0 0 50px" class="search">
     <input class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q" autocomplete="off"
            title="Search"
            type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
   </div>
-  <div class="overflow">
-    <ul class="filetree">
+  <div class="overflow ngx-scroll-overlay" fxflex="1 1 100%">
+    <ul class="filetree ">
       <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
         <input type="checkbox" id="hostgroup-{{i}}">
         <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
@@ -21,8 +21,8 @@
     </ul>
   </div>
 
-</div>
-<div class="footer">
-  Version <strong>{{version}}</strong>
+  <div class="footer-version" fxflex="0 0 40px">
+    <p> Version <strong>{{version}}</strong></p>
+  </div>
 </div>
 <!--<elements-server-menu></elements-server-menu>-->

src/app/pages/control/cleftbar/cleftbar.component.css → src/app/pages/control/cleftbar/cleftbar.component.scss

+.sidebar {
+  height: 100%;
+  width: 100%;
+}
+
 :root {
   font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 }
@@ -8,6 +13,7 @@ label {
 
 .filetree {
   padding-left: 20px;
+  height: inherit;
 }
 
 .filetree input[type="checkbox"] {
@@ -52,51 +58,56 @@ label {
   display: inline-block;
 }
 
-.search {
-  border-left-width: 0;
-  border-bottom: #19aa8d 2px inset;
+.fa.fa-undefined:before {
+  content: "\f26c";
 }
 
 .left-search {
   padding-left: 14px;
   width: 100%;
   border: none;
-  height: 28px;
   background: #2f2a2a;
   color: #ffffff;
 }
 
-.footer {
-  background: #2f2a2a;
-  font-size: 9pt;
-  border-top-width: 1px;
-  left: 0;
-  padding: 1px 20px 0 20px;
-  position: absolute;
+.search {
+  border-left-width: 0;
+  border-bottom: #19aa8d 2px inset;
+  padding-top: 30px;
+  width: 100%;
+  //position: fixed;
+  //height: 28px;
 }
 
-.fa.fa-undefined:before {
-  content: "\f26c";
+.search > input {
+  height: 30px;
 }
 
 .overflow {
-  height: 100%;
-  overflow-y: scroll;
-  position: absolute;
+  //height: 100%;
+  float: left;
   width: 100%;
+  position: inherit;
+  background: #2f2a2a;
+  color: #d6cbcb;
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+.footer-version {
+  background: #2f2a2a;
+  font-size: 9pt;
+  left: 0;
+  width: 100%;
+  padding: 1px 20px 0 20px;
+  border-top: 1px solid #e7eaec;
+  bottom: 0;
+  //height: 30px;
+  //position: fixed;
 }
 
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
+.footer-version > p {
+  height: 8px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
+@import "~@swimlane/ngx-ui/release/styles/components/scrollbars";

src/app/pages/control/cleftbar/cleftbar.component.ts

@@ -34,7 +34,7 @@ export class Host {
 @Component({
   selector: 'pages-control-cleftbar',
   templateUrl: './cleftbar.component.html',
-  styleUrls: ['./cleftbar.component.css'],
+  styleUrls: ['./cleftbar.component.scss'],
   providers: [SearchComponent, ElementServerMenuComponent]
 })
 export class CleftbarComponent implements OnInit {

src/app/pages/control/control.component.css

-div, term-leftbar, term-body {
+div {
   height: 100%;
   width: 100%;
   padding: 0;
-}
-
-div {
   background-color: black;
   margin: 0;
-  padding-top: 30px;
   position: initial;
 }
 
@@ -15,8 +11,13 @@ pages-control-cleftbar {
   padding: 0;
   background: #2f2a2a;
   color: #d6cbcb;
+  width: 100%;
+  height: 100%;
 }
 
 pages-control-control {
   padding: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 11;
 }

src/app/pages/control/control.component.html

-<div class="container-fluid row">
-  <pages-control-cleftbar class="col-md-2" *ngIf="DataStore.leftbarshow"></pages-control-cleftbar>
-  <pages-control-control [ngClass]="{'col-md-10':DataStore.leftbarshow,'col-md-12':!DataStore.leftbarshow}"></pages-control-control>
+<div class="container-fluid row" fxLayout="row" ngxSplit="row">
+  <div class="left" fxFlex="20%" ngxSplitArea>
+    <pages-control-cleftbar class="col-md-2" *ngIf="DataStore.leftbarshow"></pages-control-cleftbar>
+  </div>
+  <div fxFlex="15px" ngxSplitHandle></div>
+  <div fxFlex="80%" ngxSplitArea>
+    <pages-control-control
+      [ngClass]="{'col-md-10':DataStore.leftbarshow,'col-md-12':!DataStore.leftbarshow}"></pages-control-control>
+  </div>
 </div>

src/app/plugins/plugins.ts

 import {MaterialModule} from './MaterialModule.component';
+import {NgxUIModule, SplitModule} from '@swimlane/ngx-ui';
 
 export const PluginModules = [
-  MaterialModule
+  MaterialModule,
+  NgxUIModule,
+  SplitModule
 ];
 
 

src/app/test-page/test-page.component.html

 <!--<tree-root [nodes]="nodes" [options]="options"></tree-root>-->
-<app-replay-mp4></app-replay-mp4>
+<!--<app-replay-mp4></app-replay-mp4>-->
+<!--<elements-asset-tree></elements-asset-tree>-->
+<div fxLayout="row" style="height:500px" ngxSplit="row">
+  <div fxFlex="30%" ngxSplitArea>
+    <ul>
+      <li>DDOS</li>
+      <li>DDOS</li>
+      <li>DDOS</li>
+    </ul>
+  </div>
+  <div fxFlex="15px" ngxSplitHandle></div>
+  <div fxFlex="70%" ngxSplitArea>
+    <ul>
+      <li>Alerts</li>
+      <li>Search</li>
+      <li>Admin</li>
+    </ul>
+  </div>
+</div>

src/app/test-page/test-page.component.scss

+:host {
+  display: block;
+  width: 100%;
+  margin: 50px 0;
+}
+.btns {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-wrap: wrap;
+}

src/app/test-page/test-page.component.ts

 import {Component, OnInit} from '@angular/core';
 import {DataStore, Video} from '../globals';
-import {TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions} from 'angular-tree-component';
 
 @Component({
   selector: 'app-test-page',
@@ -8,63 +7,8 @@ import {TREE_ACTIONS, KEYS, IActionMapping, ITreeOptions} from 'angular-tree-com
   styleUrls: ['./test-page.component.scss']
 })
 export class TestPageComponent implements OnInit {
-  nodes = [
-    {
-      id: 1,
-      name: 'root1',
-      children: [
-        {id: 2, name: 'child1'},
-        {id: 3, name: 'child2'}
-      ]
-    },
-    {
-      id: 4,
-      name: 'root2',
-      children: [
-        {id: 5, name: 'child2.1'},
-        {
-          id: 6,
-          name: 'child2.2',
-          children: [
-            {id: 7, name: 'subsub'}
-          ]
-        }
-      ]
-    }
-  ];
-  options: ITreeOptions = {
-    displayField: 'nodeName',
-    isExpandedField: 'expanded',
-    idField: 'uuid',
-    hasChildrenField: 'nodes',
-    actionMapping: {
-      mouse: {
-        dblClick: (tree, node, $event) => {
-          if (node.hasChildren) TREE_ACTIONS.TOGGLE_EXPANDED(tree, node, $event);
-        }
-      },
-      keys: {
-        [KEYS.ENTER]: (tree, node, $event) => {
-          node.expandAll();
-        }
-      }
-    },
-    nodeHeight: 23,
-    allowDrag: (node) => {
-      return true;
-    },
-    allowDrop: (node) => {
-      return true;
-    },
-    useVirtualScroll: true,
-    animateExpand: true,
-    scrollOnActivate: true,
-    animateSpeed: 30,
-    animateAcceleration: 1.2
-  };
 
   constructor() {
-    DataStore.NavShow = false;
   }
 
   ngOnInit() {

src/sass/style.scss

@@ -63,5 +63,11 @@ $material-design-icons-font-path: '~/material-design-icons/iconfont/';
   font-feature-settings: 'liga';
 }
 
-@import '~angular-tree-component/dist/angular-tree-component.css';
-
+//ul {
+//  padding-left: 0;
+//  list-style-type: none;
+//}
+//
+//ngx-tree div.ngx-tree div.ngx-tree-vr {
+//  display: none;
+//}