Merge pull request #103 from jumpserver/dev_beta

Dev beta

.angular-cli.json

-{
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
-  "project": {
-    "name": "WebTerminal"
-  },
-  "apps": [
-    {
-      "root": "src",
-      "outDir": "dist",
-      "assets": [
-        "assets",
-        "static",
-        "theme/default/",
-        "favicon.ico"
-      ],
-      "index": "index.html",
-      "main": "main.ts",
-      "polyfills": "polyfills.ts",
-      "test": "test.ts",
-      "tsconfig": "tsconfig.app.json",
-      "testTsconfig": "tsconfig.spec.json",
-      "prefix": "app",
-      "styles": [
-        "../node_modules/animate.css/animate.min.css",
-        "../node_modules/xterm/dist/xterm.css",
-        "sass/style.scss",
-        "styles.css",
-        "assets/ztree/awesomeStyle/awesome.css"
-      ],
-      "comment": [
-        "../node_modules/jquery-sparkline/jquery.sparkline.js",
-        "../node_modules/metismenu/dist/metisMenu.js",
-        "assets/slimscroll/jquery.slimscroll.min.js",
-        "../node_modules/tether/dist/js/tether.min.js"
-
-      ],
-      "scripts": [
-        "../node_modules/jquery/dist/jquery.min.js",
-        "../node_modules/xterm/dist/xterm.js",
-        "assets/ztree/jquery.ztree.all.min.js",
-        "assets/ztree/jquery.ztree.exhide.min.js"
-      ],
-      "environmentSource": "environments/environment.ts",
-      "environments": {
-        "dev": "environments/environment.ts",
-        "prod": "environments/environment.prod.ts"
-      }
-    }
-  ],
-  "e2e": {
-    "protractor": {
-      "config": "./protractor.conf.js"
-    }
-  },
-  "lint": [
-    {
-      "project": "src/tsconfig.app.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "src/tsconfig.spec.json",
-      "exclude": "**/node_modules/**"
-    },
-    {
-      "project": "e2e/tsconfig.e2e.json",
-      "exclude": "**/node_modules/**"
-    }
-  ],
-  "test": {
-    "karma": {
-      "config": "./karma.conf.js"
-    }
-  },
-  "defaults": {
-    "styleExt": "scss",
-    "component": {}
-  }
-}

angular.json

+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "WebTerminal": {
+      "root": "",
+      "sourceRoot": "src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "tsConfig": "src/tsconfig.app.json",
+            "polyfills": "src/polyfills.ts",
+            "assets": [
+              "src/assets",
+              "src/static",
+              "src/theme/default",
+              "src/favicon.ico"
+            ],
+            "styles": [
+              "node_modules/animate.css/animate.min.css",
+              "node_modules/xterm/dist/xterm.css",
+              "src/sass/style.scss",
+              "src/styles.css",
+              "src/assets/ztree/awesomeStyle/awesome.css"
+            ],
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/xterm/dist/xterm.js",
+              "src/assets/ztree/jquery.ztree.all.min.js",
+              "src/assets/ztree/jquery.ztree.exhide.min.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "extractCss": true,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "WebTerminal:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "WebTerminal:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "WebTerminal:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "karmaConfig": "./karma.conf.js",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "src/tsconfig.spec.json",
+            "scripts": [
+              "node_modules/jquery/dist/jquery.min.js",
+              "node_modules/xterm/dist/xterm.js",
+              "src/assets/ztree/jquery.ztree.all.min.js",
+              "src/assets/ztree/jquery.ztree.exhide.min.js"
+            ],
+            "styles": [
+              "node_modules/animate.css/animate.min.css",
+              "node_modules/xterm/dist/xterm.css",
+              "src/sass/style.scss",
+              "src/styles.css",
+              "src/assets/ztree/awesomeStyle/awesome.css"
+            ],
+            "assets": [
+              "src/assets",
+              "src/static",
+              "src/theme/default",
+              "src/favicon.ico"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "src/tsconfig.app.json",
+              "src/tsconfig.spec.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    },
+    "WebTerminal-e2e": {
+      "root": "e2e",
+      "sourceRoot": "e2e",
+      "projectType": "application",
+      "architect": {
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "./protractor.conf.js",
+            "devServerTarget": "WebTerminal:serve"
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "e2e/tsconfig.e2e.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "WebTerminal",
+  "schematics": {
+    "@schematics/angular:component": {
+      "prefix": "app",
+      "styleext": "scss"
+    },
+    "@schematics/angular:directive": {
+      "prefix": "app"
+    }
+  }
+}
\ No newline at end of file

karma.conf.js

@@ -4,24 +4,22 @@
 module.exports = function (config) {
   config.set({
     basePath: '',
-    frameworks: ['jasmine', '@angular/cli'],
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
       require('karma-jasmine-html-reporter'),
       require('karma-coverage-istanbul-reporter'),
-      require('@angular/cli/plugins/karma')
+      require('@angular-devkit/build-angular/plugins/karma')
     ],
     client:{
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
+      dir: require('path').join(__dirname, 'coverage'), reports: [ 'html', 'lcovonly' ],
       fixWebpackSourcePaths: true
     },
-    angularCli: {
-      environment: 'dev'
-    },
+    
     reporters: ['progress', 'kjhtml'],
     port: 9876,
     colors: true,

package.json

@@ -5,15 +5,14 @@
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0",
-    "build": "ng build --environment prod --aot --prod --base-href=/luna/  --deploy '/luna/'",
+    "build": "ng build --prod --base-href=/luna/ --output-path 'luna'",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
-  "other": {
+  "abandon": {
     "@swimlane/ngx-datatable": "^11.3.2",
-    "ajv": "^6.5.0",
     "body-parser": "^1.18.2",
     "clipboard": "^1.7.1",
     "compass-mixins": "^0.12.10",
@@ -34,68 +33,66 @@
     "roboto-fontface": "^0.8.0",
     "sass-math": "^1.0.0",
     "tether": "^1.4.4",
+    "npm-font-open-sans": "^1.1.0",
+    "@swimlane/ngx-ui": "^25.11.0",
     "utf-8-validate": "^5.0.2"
   },
   "dependencies": {
-    "@angular/animations": "^5.2.11",
-    "@angular/cdk": "^5.2.4",
-    "@angular/common": "^5.2.11",
-    "@angular/compiler": "^5.2.11",
-    "@angular/core": "^5.2.11",
-    "@angular/flex-layout": "^5.0.0-beta.15",
-    "@angular/forms": "^5.2.11",
-    "@angular/http": "^5.2.11",
-    "@angular/material": "^5.2.0",
-    "@angular/platform-browser": "^5.2.11",
-    "@angular/platform-browser-dynamic": "^5.2.11",
-    "@angular/router": "^5.2.11",
-    "@swimlane/ngx-ui": "^20.2.1",
+    "@angular/animations": "~7.2.0",
+    "@angular/cdk": "^7.3.7",
+    "@angular/common": "~7.2.0",
+    "@angular/compiler": "~7.2.0",
+    "@angular/core": "~7.2.0",
+    "@angular/flex-layout": "^7.0.0-beta.19",
+    "@angular/forms": "~7.2.0",
+    "@angular/http": "^7.2.15",
+    "@angular/material": "^7.3.7",
+    "@angular/platform-browser": "~7.2.0",
+    "@angular/platform-browser-dynamic": "~7.2.0",
+    "@angular/router": "~7.2.0",
     "@types/jquery": "^3.3.6",
     "@types/neffos.js": "^0.1.1",
-    "@types/socket.io-client": "^1.4.32",
-    "rxjs": "5.5.6",
-    "zone.js": "0.8.20",
-    "uuid-js": "^0.7.5",
-    "xterm": "3.3.0",
-    "socket.io": "^1.4.32",
-    "socket.io-client": "^1.4.32",
-    "core-js": "2.5.3",
-    "neffos.js": "^0.1.19",
+    "ajv": "^6.5.0",
+    "animate.css": "^3.6.1",
     "bootstrap": "^4.3.1",
-    "popper.js": "^1.14.7",
-    "jquery": "^3.4.1",
+    "codemirror": "^5.42.0",
+    "core-js": "^2.5.4",
+    "font-awesome": "4.7.0",
     "guacamole-common-js": "0.9.14-b",
-    "ngx-cookie-service": "^1.0.10",
+    "jquery": "^3.4.1",
     "metismenu": "^2.7.9",
-    "ngx-logger": "^2.2.4",
-    "animate.css": "^3.6.1",
-    "tslib": "^1.9.0",
-    "requirejs": "^2.3.5",
+    "neffos.js": "^0.1.19",
+    "ngx-cookie-service": "^1.0.10",
+    "ngx-logger": "4.0.4",
     "ngx-progressbar": "^2.1.1",
-    "npm-font-open-sans": "^1.1.0",
-    "font-awesome": "4.7.0"
+    "popper.js": "^1.14.7",
+    "requirejs": "^2.3.5",
+    "rxjs": "~6.3.3",
+    "rxjs-compat": "^6.0.0-rc.0",
+    "tslib": "^1.9.0",
+    "uuid-js": "^0.7.5",
+    "xterm": "3.3.0",
+    "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^0.3.2",
-    "@angular-devkit/schematics": "^0.3.2",
-    "@angular/cli": "^1.7.4",
-    "@angular/compiler-cli": "^5.2.11",
-    "@angular/language-service": "5.2.0",
-    "@types/jasmine": "2.8.4",
-    "@types/jasminewd2": "~2.0.2",
-    "codelyzer": "4.0.2",
-    "jasmine-core": "2.8.0",
-    "jasmine-spec-reporter": "4.2.1",
-    "karma": "2.0.0",
-    "karma-chrome-launcher": "2.2.0",
-    "karma-cli": "1.0.1",
-    "karma-coverage-istanbul-reporter": "1.3.3",
-    "karma-jasmine": "1.1.1",
-    "karma-jasmine-html-reporter": "0.2.2",
-    "node-sass": "^4.11.0",
-    "protractor": "^5.4.2",
-    "ts-node": "3.3.0",
-    "tslint": "5.9.1",
-    "typescript": "2.6.2"
+    "@angular-devkit/build-angular": "~0.13.0",
+    "@angular/cli": "~7.3.9",
+    "@angular/compiler-cli": "~7.2.0",
+    "@angular/language-service": "~7.2.0",
+    "@types/node": "~8.9.4",
+    "@types/jasmine": "~2.8.8",
+    "@types/jasminewd2": "~2.0.3",
+    "codelyzer": "~4.5.0",
+    "jasmine-core": "~2.99.1",
+    "jasmine-spec-reporter": "~4.2.1",
+    "karma": "~4.0.0",
+    "karma-chrome-launcher": "~2.2.0",
+    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma-jasmine": "~1.1.2",
+    "karma-jasmine-html-reporter": "^0.2.2",
+    "protractor": "~5.4.0",
+    "ts-node": "~7.0.0",
+    "tslint": "~5.11.0",
+    "typescript": "~3.2.2"
   }
 }

src/app/app.module.ts

@@ -6,7 +6,6 @@ import {HttpClientModule} from '@angular/common/http';
 import {CookieService} from 'ngx-cookie-service';
 import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
 
-
 // service
 import {AppService, HttpService, LocalStorageService, NavService, LogService, UUIDService, TreeFilterService} from './app.service';
 
@@ -15,12 +14,10 @@ import {Pipes} from './pipes/pipes';
 import {AppComponent} from './pages/app.component';
 import {PagesComponents} from './pages/pages.component';
 import {ElementComponents} from './elements/elements.component';
-import {ChangLanWarningDialogComponent, RDPSolutionDialogComponent, FontDialogComponent} from './elements/nav/nav.component';
-import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
+import {PageMainComponent} from '@app/pages/main/main.component';
 import {PluginModules} from './plugins/plugins';
-import {TestPageComponent} from './test-page/test-page.component';
+import {ChangLanWarningDialogComponent, RDPSolutionDialogComponent, FontDialogComponent} from './elements/nav/nav.component';
 import {AssetTreeDialogComponent, ManualPasswordDialogComponent} from './elements/connect/connect.component';
-import {SftpComponent} from './elements/sftp/sftp.component';
 
 
 @NgModule({
@@ -34,19 +31,17 @@ import {SftpComponent} from './elements/sftp/sftp.component';
   ],
   declarations: [
     AppComponent,
-    TestPageComponent,
     ...Pipes,
     ...ElementComponents,
     ...PagesComponents,
-    SftpComponent,
   ],
   entryComponents: [
     AssetTreeDialogComponent,
     ManualPasswordDialogComponent,
-    ElementDialogAlertComponent,
     ChangLanWarningDialogComponent,
     RDPSolutionDialogComponent,
-    FontDialogComponent
+    FontDialogComponent,
+    PageMainComponent,
   ],
   bootstrap: [AppComponent],
   providers: [
@@ -58,7 +53,6 @@ import {SftpComponent} from './elements/sftp/sftp.component';
     NavService,
     UUIDService,
     LocalStorageService,
-    DialogService,
     CookieService,
     TreeFilterService,
     NGXLogger,

src/app/app.service.ts

 import {EventEmitter, Injectable, OnInit} from '@angular/core';
 import {Router} from '@angular/router';
 import {CookieService} from 'ngx-cookie-service';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/catch';
+
+
 import {DataStore, User, Browser, i18n} from './globals';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';

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

 import {Component, Input, OnInit, OnDestroy, ElementRef, ViewChild} from '@angular/core';
 import {MatDialog} from '@angular/material';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {BehaviorSubject} from 'rxjs';
 import {ActivatedRoute} from '@angular/router';
 
 import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/app.service';

src/app/elements/content/content.component.scss

@@ -41,6 +41,10 @@
   padding: 0 5px;
 }
 
+.scroll-button .right {
+  padding-left: 5px;
+}
+
 .scroll-button a.disabled {
   color: #676A6D;
   cursor: not-allowed;

src/app/elements/elements.component.ts

@@ -5,17 +5,16 @@ import {ElementContentViewComponent} from './content-window/content-window.compo
 import {ElementContentTabComponent} from './content-tab/content-tab.component';
 import {ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
 import {ElementTreeFilterComponent} from './tree-filter/tree-filter.component';
-import {ElementFooterComponent} from './footer/footer.component';
 import {ElementTermComponent} from './term/term.component';
 import {ChangLanWarningDialogComponent, ElementNavComponent} from './nav/nav.component';
 import {ElementRdpComponent} from './rdp/rdp.component';
-import {ElementServerMenuComponent} from './server-menu/server-menu.component';
 import {ElementIframeComponent} from './iframe/iframe.component';
 import {ElementDialogAlertComponent} from './dialog/dialog.service';
 import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
 import {ElementSshTermComponent} from './ssh-term/ssh-term.component';
 import {ElementConnectComponent, AssetTreeDialogComponent, ManualPasswordDialogComponent} from './connect/connect.component';
 import {RDPSolutionDialogComponent, FontDialogComponent} from './nav/nav.component';
+import {ElementSftpComponent} from '@app/elements/sftp/sftp.component';
 
 export const ElementComponents = [
   ElementLeftBarComponent,
@@ -24,19 +23,18 @@ export const ElementComponents = [
   ElementContentViewComponent,
   ElementConnectComponent,
   ElementTreeFilterComponent,
-  ElementFooterComponent,
   ElementTermComponent,
   ElementNavComponent,
-  ChangLanWarningDialogComponent,
   ElementRdpComponent,
-  ElementServerMenuComponent,
   ElementIframeComponent,
   ElementDialogAlertComponent,
   ElementGuacamoleComponent,
   ElementAssetTreeComponent,
   ElementSshTermComponent,
   ElementConnectComponent,
+  ElementSftpComponent,
   AssetTreeDialogComponent,
+  ChangLanWarningDialogComponent,
   ManualPasswordDialogComponent,
   RDPSolutionDialogComponent,
   FontDialogComponent

src/app/elements/footer/footer.component.html

-<div class="footer fixed">
-  <div class="pull-right">
-    Version <strong>{{version}}</strong> GPL.
-  </div>
-  <div>
-    <strong>Copyright</strong> Jumpserver.org Team &copy; 2014-2018
-  </div>
-</div>

src/app/elements/footer/footer.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ElementFooterComponent } from './footer.component';
-
-describe('FooterComponent', () => {
-  let component: ElementFooterComponent;
-  let fixture: ComponentFixture<ElementFooterComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ElementFooterComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ElementFooterComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/elements/footer/footer.component.ts

-/**
- * footer
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-import {Component, OnInit} from '@angular/core';
-import {AppService, LogService} from '@app/app.service';
-import {DataStore, User} from '@app/globals';
-import {version} from '@src/environments/environment';
-
-@Component({
-  selector: 'elements-footer',
-  templateUrl: './footer.component.html',
-  styleUrls: ['./footer.component.css']
-})
-export class ElementFooterComponent implements OnInit {
-  DataStore = DataStore;
-  User = User;
-  version = version;
-
-  constructor(private _appService: AppService,
-              private _logger: LogService) {
-    this._logger.log('nav.ts:NavComponent');
-    // this._appService.getnav()
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/elements/left-bar/left-bar.component.html

 <div class="sidebar" fxLayout="column" >
-  <div fxflex="1 1 30px" class="tree-filter">
+  <div fxflex="30px" class="tree-filter">
     <elements-tree-filter ></elements-tree-filter>
   </div>
-  <div class="overflow ngx-scroll-overlay" fxflex="1 1 calc(100% - 60px)">
+  <div fxflex="calc(100% - 60px)" class="overflow ngx-scroll-overlay">
     <elements-asset-tree ></elements-asset-tree>
   </div>
 
-  <div class="footer-version" fxflex="1 1 30px">
+  <div fxflex="30px" class="footer-version">
     <p> Version <strong>{{version}}</strong></p>
   </div>
 </div>

src/app/elements/server-menu/server-menu.component.html

-<div class="ES-menu" [ngStyle]="{'top':top,'left':left}">
-  <ul class="dropdown-content">
-    <li [ngClass]="m.type" *ngFor="let m of MenuList">
-      <a (click)="m.action" *ngIf="m.type!='line'">{{m.name}}</a>
-    </li>
-  </ul>
-</div>

src/app/elements/server-menu/server-menu.component.scss

-.ES-menu {
-  display: block;
-  width: 120px;
-  background-color: #2f2a2a;
-  position: absolute;
-}
-
-.ES-menu ul {
-  list-style-type: none;
-  line-height: 24px;
-}
-
-.ES-menu li {
-  display: inline-block;
-}
-
-.dropdown {
-  position: relative;
-  display: inline-block;
-}
-
-.dropdown:hover {
-  background-color: #2d2828;
-}
-
-.dropdown-content {
-  position: absolute;
-  background-color: black;
-  color: #c6bcbc;
-  padding: 4px 0;
-  z-index: 999;
-  float: none;
-  list-style: none;
-  line-height: normal;
-  direction: ltr;
-  width: auto;
-  top: auto;
-  left: 0px;
-  margin-left: 0px;
-  margin-top: 0px;
-  min-width: 150px;
-}
-
-.ES-menu:hover .dropdown-content {
-  display: block;
-}
-
-.ES-menu .dropdown-content li {
-  float: left;
-  display: flex;
-}
-
-.ES-menu .dropdown-content li a {
-  padding: 6px 14px 6px 14px;
-  white-space: nowrap;
-  font-family: 'Roboto', sans-serif;
-  font-size: 13px;
-  font-weight: 300;
-  position: relative;
-  text-decoration: none;
-  min-width: 150px;
-  line-height: normal;
-}
-
-.ES-menu .dropdown-content li a span {
-  float: right;
-}
-
-.dropdown-content li:hover {
-  background-color: #3a3333;
-  color: black;
-  width: 100%;
-}
-
-.dropdown-content li.disabled:hover {
-  background-color: black;
-}
-
-.dropdown-content li.disabled a {
-  color: #c5babc;
-}
-
-.dropdown-content li.disabled a:hover {
-  cursor: default;
-  color: #c5babc;
-}
-
-.ES-menu a {
-  color: #f0f0f1;
-  text-align: center;
-  text-decoration: none;
-  padding: 6px 15px 6px 15px;
-
-}
-
-.ES-menu a:hover {
-  color: #fff;
-  cursor: pointer
-}
-
-.ES-menu .line {
-  height: 1px;
-  width: 100%;
-  background-color: white;
-}

src/app/elements/server-menu/server-menu.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { ElementServerMenuComponent } from './server-menu.component';
-
-describe('ElementServerMenuComponent', () => {
-  let component: ElementServerMenuComponent;
-  let fixture: ComponentFixture<ElementServerMenuComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ ElementServerMenuComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(ElementServerMenuComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/app/elements/server-menu/server-menu.component.ts

-import {Component, OnInit} from '@angular/core';
-import {DialogService} from '../dialog/dialog.service';
-
-
-export class Menu {
-  name: string;
-  type: string;
-  action: any;
-}
-
-@Component({
-  selector: 'elements-server-menu',
-  templateUrl: './server-menu.component.html',
-  styleUrls: ['./server-menu.component.scss'],
-})
-export class ElementServerMenuComponent implements OnInit {
-  MenuList: Array<any>;
-  top: number;
-  left: number;
-
-  constructor(private _dialog: DialogService) {
-  }
-
-  ngOnInit() {
-    const m = new Menu();
-    const line = new Menu();
-    m.action = '';
-    m.name = 'test';
-    m.type = 'lll';
-    line.type = 'line';
-    this.MenuList = [m, m, line, m, m];
-    this._dialog.alert('sss');
-  }
-
-  public contextmenu(top: number, left: number) {
-    this.top = top;
-    this.left = left;
-  }
-
-}

src/app/elements/sftp/sftp.component.spec.ts

 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
-import { SftpComponent } from './sftp.component';
+import { ElementSftpComponent } from './sftp.component';
 
-describe('SftpComponent', () => {
-  let component: SftpComponent;
-  let fixture: ComponentFixture<SftpComponent>;
+describe('ElementSftpComponent', () => {
+  let component: ElementSftpComponent;
+  let fixture: ComponentFixture<ElementSftpComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ SftpComponent ]
+      declarations: [ ElementSftpComponent ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
-    fixture = TestBed.createComponent(SftpComponent);
+    fixture = TestBed.createComponent(ElementSftpComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });

src/app/elements/sftp/sftp.component.ts

@@ -7,7 +7,7 @@ import {DomSanitizer} from '@angular/platform-browser';
   templateUrl: './sftp.component.html',
   styleUrls: ['./sftp.component.scss']
 })
-export class SftpComponent implements OnInit {
+export class ElementSftpComponent implements OnInit {
   @Input() host: any;
   target: any;
   @ViewChild('sftp') el: ElementRef;

src/app/elements/term/term.component.ts

@@ -3,11 +3,10 @@ import {ElementRef} from '@angular/core';
 import {Terminal} from 'xterm';
 import {fit} from 'xterm/lib/addons/fit/fit';
 import {LogService} from '@app/app.service';
-import {Observable} from 'rxjs/Rx';
+import {Observable, fromEvent} from 'rxjs';
+import {debounceTime, distinctUntilChanged } from 'rxjs/operators';
 import * as $ from 'jquery/dist/jquery.min.js';
 import 'rxjs/Observable';
-import 'rxjs/add/operator/debounceTime';
-import 'rxjs/add/operator/distinctUntilChanged';
 
 
 @Component({
@@ -27,9 +26,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   ngOnInit() {
-    this.winSizeChange$ = Observable.fromEvent(window, 'resize')
-      .debounceTime(500)
-      .distinctUntilChanged();
+    this.winSizeChange$ = fromEvent(window, 'resize').pipe(
+      debounceTime(500),
+      distinctUntilChanged(),
+    );
 
     this.winSizeChange$
       .subscribe(() => {
@@ -45,7 +45,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   getWinSize() {
     let availableHeight = 0;
     let availableWidth = 0;
-    if (document.fullscreenElement) {
+    if (document['fullscreenElement']) {
       availableWidth = document.body.clientWidth - 10;
       availableHeight = document.body.clientHeight;
     } else {

src/app/globals.ts

 'use strict';
 import {EventEmitter} from 'events/events';
-import * as io from 'socket.io-client';
 import {Socket} from './utils/socket';
-import {BehaviorSubject} from 'rxjs/BehaviorSubject';
+import {BehaviorSubject} from 'rxjs';
 import {ConnectEvt, User as _User } from './model';
 import {DataStore as _DataStore, Browser as _Browser, Video as _Video, Monitor as _Monitor} from './model';
 
@@ -43,7 +42,6 @@ export async function getWsSocket() {
   const nsConn = await TermWS.connect();
   if (!nsConn) {
     console.log('Try to using socket.io protocol');
-    TermWS = io.connect('/ssh', {reconnectionAttempts: 10});
   }
   DataStore.socket = TermWS;
   return TermWS;

src/app/pages/main/main.component.css

+#container {
+  height: calc(100% - 30px);
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background-color: #1f1b1b;
+}
+
 .content {
   height: 100%;
-  width: 100%;
   padding: 0;
   background-color: #1f1b1b;
   /*background-color: red;*/
   margin: 0;
   position: initial;
+  min-width: 100px;
 }
 
+
 /*.content {*/
   /*overflow: hidden !important;*/
 /*}*/
 
-elements-nav {
-  height: 30px;
+.left-side {
+  min-width: 100px;
 }
 
-#container {
+.handle {
+  outline: none;
+  -webkit-user-select: none;
+  user-select: none;
+  z-index: 9999;
+  height: 5px;
+  width: 1px;
+  display: block;
   padding: 0;
   margin: 0;
-  height: calc(100% - 30px);
+  position: relative;
+  line-height: 0;
+}
+
+.handle-row {
+  top: 50%;
+  left: -8px;
+  transform: translateX(-50%) rotate(270deg);
+  cursor: col-resize;;
+}
+
+elements-nav {
+  height: 30px;
 }
 
 /*.container-fluid {*/
   /*padding-top: 30px;*/
 /*}*/
+

src/app/pages/main/main.component.html

 <elements-nav></elements-nav>
-<div fxLayout="row" id="container" class="container-fluid row" ngxSplit="row">
-  <div fxFlex="1 1 20%" minBasis="100px" maxBasis="800px" fxFlexFill ngxSplitArea *ngIf="DataStore.showLeftBar">
+<div fxLayout="row" id="container" ngxSplit="row">
+  <div fxFlex="20%" fxFlexFill maxBasis="400px" minBasis="100px" ngxSplitArea *ngIf="DataStore.showLeftBar" class="left-side">
     <elements-left-bar></elements-left-bar>
   </div>
-  <div fxFlex="0" ngxSplitHandle (mouseup)="dragSplitBtn($event)"></div>
-  <div [fxFlex]="DataStore.showLeftBar ? '1 1 80%' : '1 1 100%'" ngxSplitArea class="content">
+  <div ngxSplitHandle (mouseup)="dragSplitBtn($event)" class="handle handle-row" *ngIf="DataStore.showLeftBar" >
+    <i class="fa fa-window-minimize" style="color: white"></i>
+  </div>
+  <div [fxFlex]="DataStore.showLeftBar ? '80%' : '100%'" fxFlexFill ngxSplitArea class="content">
     <elements-content></elements-content>
   </div>
 </div>

src/app/plugins/MaterialModule.component.ts

 import {NgModule} from '@angular/core';
 import {
-  MatAutocompleteModule,
+  // MatAutocompleteModule,
   MatButtonModule,
-  MatButtonToggleModule,
+  // MatButtonToggleModule,
   MatCardModule,
-  MatCheckboxModule,
+  // MatCheckboxModule,
   MatChipsModule,
-  MatDatepickerModule,
+  // MatDatepickerModule,
   MatDialogModule,
-  MatExpansionModule,
-  MatGridListModule,
-  MatIconModule,
+  // MatExpansionModule,
+  // MatGridListModule,
+  // MatIconModule,
   MatInputModule,
-  MatListModule,
-  MatMenuModule,
-  MatNativeDateModule,
-  MatPaginatorModule,
-  MatProgressBarModule,
-  MatProgressSpinnerModule,
+  // MatListModule,
+  // MatMenuModule,
+  // MatNativeDateModule,
+  // MatPaginatorModule,
+  // MatProgressBarModule,
+  // MatProgressSpinnerModule,
   MatRadioModule,
-  MatRippleModule,
+  // MatRippleModule,
   MatSelectModule,
-  MatSidenavModule,
-  MatSliderModule,
-  MatSlideToggleModule,
-  MatSnackBarModule,
-  MatSortModule,
-  MatTableModule,
-  MatTabsModule,
-  MatToolbarModule,
-  MatTooltipModule,
-  MatStepperModule,
+  // MatSidenavModule,
+  // MatSliderModule,
+  // MatSlideToggleModule,
+  // MatSnackBarModule,
+  // MatSortModule,
+  // MatTableModule,
+  // MatTabsModule,
+  // MatToolbarModule,
+  // MatTooltipModule,
+  // MatStepperModule,
 } from '@angular/material';
 import {CdkTableModule} from '@angular/cdk/table';
 
 @NgModule({
   exports: [
     CdkTableModule,
-    MatAutocompleteModule,
+    // MatAutocompleteModule,
     MatButtonModule,
-    MatButtonToggleModule,
+    // MatButtonToggleModule,
     MatCardModule,
-    MatCheckboxModule,
+    // MatCheckboxModule,
     MatChipsModule,
-    MatStepperModule,
-    MatDatepickerModule,
+    // MatStepperModule,
+    // MatDatepickerModule,
     MatDialogModule,
-    MatExpansionModule,
-    MatGridListModule,
-    MatIconModule,
+    // MatExpansionModule,
+    // MatGridListModule,
+    // MatIconModule,
     MatInputModule,
-    MatListModule,
-    MatMenuModule,
-    MatNativeDateModule,
-    MatPaginatorModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
+    // MatListModule,
+    // MatMenuModule,
+    // MatNativeDateModule,
+    // MatPaginatorModule,
+    // MatProgressBarModule,
+    // MatProgressSpinnerModule,
     MatRadioModule,
-    MatRippleModule,
+    // MatRippleModule,
     MatSelectModule,
-    MatSidenavModule,
-    MatSliderModule,
-    MatSlideToggleModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatTableModule,
-    MatTabsModule,
-    MatToolbarModule,
-    MatTooltipModule,
+    // MatSidenavModule,
+    // MatSliderModule,
+    // MatSlideToggleModule,
+    // MatSnackBarModule,
+    // MatSortModule,
+    // MatTableModule,
+    // MatTabsModule,
+    // MatToolbarModule,
+    // MatTooltipModule,
   ]
 })
 export class MaterialModule {

src/app/plugins/plugins.ts

 import {MaterialModule} from './MaterialModule.component';
-import {NgxUIModule, SplitModule} from '@swimlane/ngx-ui';
+// import {SplitModule, NgxUIModule} from '@swimlane/ngx-ui';
+import {SplitModule} from '@app/plugins/split/split.module';
+import {FlexLayoutModule} from '@angular/flex-layout';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 import {NgProgressModule} from 'ngx-progressbar';
-import {FlexLayoutModule} from '@angular/flex-layout';
 
 
 export const PluginModules = [
   BrowserAnimationsModule,
   NgProgressModule,
   MaterialModule,
-  FlexLayoutModule,
   LoggerModule.forRoot({level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
-  NgxUIModule,
-  SplitModule
+  FlexLayoutModule,
+  SplitModule,
+  // NgxUIModule,
 ];
 
 

src/app/plugins/split/split-area.directive.ts

+import {Directive, Optional, Self} from '@angular/core';
+import {DefaultFlexDirective} from '@angular/flex-layout';
+
+@Directive({
+  selector: '[ngxSplitArea]',
+  host: {
+    style: 'overflow: auto;'
+  }
+})
+export class SplitAreaDirective {
+  constructor(@Optional() @Self() public flex: DefaultFlexDirective) {}
+}

src/app/plugins/split/split-handle.directive.ts

+import {Directive, ElementRef, Inject, Output} from '@angular/core';
+import {DOCUMENT} from '@angular/common';
+import {fromEvent, Observable} from 'rxjs';
+import {map, switchMap, takeUntil, throttleTime} from 'rxjs/operators';
+
+@Directive({
+  selector: '[ngxSplitHandle]',
+  host: {
+    class: 'ngx-split-handle',
+    title: 'Drag to resize'
+  }
+})
+export class SplitHandleDirective {
+  @Output() drag: Observable<{ x: number, y: number }>;
+
+  constructor(ref: ElementRef, @Inject(DOCUMENT) _document: any) {
+    let last = {x: 0, y: 0};
+    const scanPositionDelta = (event: MouseEvent) => {
+      const current = {x: event.screenX, y: event.screenY};
+      const delta = {x: current.x - last.x, y: current.y - last.y};
+      last = current;
+      return delta;
+    };
+
+    const mousedown$ = fromEvent(ref.nativeElement, 'mousedown').pipe(map(scanPositionDelta));
+    const mousemove$ = fromEvent(window, 'mousemove').pipe(
+      throttleTime(50),
+      map(scanPositionDelta)
+    );
+    const mouseup$ = fromEvent(window, 'mouseup');
+
+    this.drag = mousedown$.pipe(switchMap(() => mousemove$.pipe(takeUntil(mouseup$))));
+  }
+}

src/app/plugins/split/split.directive.ts

+import {
+  AfterContentInit,
+  ContentChild,
+  ContentChildren,
+  Directive,
+  ElementRef,
+  Input,
+  OnDestroy,
+  QueryList,
+} from '@angular/core';
+import {FlexDirective} from '@angular/flex-layout';
+import {Subscription} from 'rxjs';
+
+import {SplitHandleDirective} from './split-handle.directive';
+import {SplitAreaDirective} from './split-area.directive';
+
+
+@Directive({
+  selector: '[ngxSplit]',
+  host: {
+    class: 'ngx-split'
+  }
+})
+export class SplitDirective implements AfterContentInit, OnDestroy {
+  @Input('ngxSplit') direction = 'row';
+  @ContentChild(SplitHandleDirective) handle: SplitHandleDirective;
+  @ContentChildren(SplitAreaDirective) areas: QueryList<SplitAreaDirective>;
+
+  private watcher: Subscription;
+
+  constructor(private elementRef: ElementRef) {}
+
+  ngAfterContentInit(): void {
+    this.watcher = this.handle.drag.subscribe(this.onDrag.bind(this));
+  }
+
+  ngOnDestroy() {
+    this.watcher.unsubscribe();
+  }
+
+  /**
+   * While dragging, continually update the `flex.activatedValue` for each area
+   * managed by the splitter.
+   */
+  onDrag({x, y}: {x: number, y: number}): void {
+    const dragAmount = (this.direction === 'row') ? x : y;
+
+    this.areas.forEach((area, i) => {
+      // get the cur flex and the % in px
+      const flex = (area.flex as FlexDirective);
+      const delta = (i === 0) ? dragAmount : -dragAmount;
+      const currentValue = flex.activatedValue;
+
+      // Update Flex-Layout value to build/inject new flexbox CSS
+      flex.activatedValue = `${this.calculateSize(currentValue, delta)}`;
+    });
+  }
+
+  /**
+   * Use the pixel delta change to recalculate the area size (%)
+   * Note: flex value may be '', %, px, or '<grow> <shrink> <basis>'
+   */
+  calculateSize(value: string, delta: number): number {
+    const containerSizePx = this.elementRef.nativeElement.clientWidth;
+    const elementSizePx = Math.round(valueToPixel(value, containerSizePx));
+
+    const elementSize = ((elementSizePx + delta) / containerSizePx) * 100;
+    return Math.round(elementSize * 100) / 100;
+  }
+}
+
+/** Convert the pixel or percentage value to a raw pixel float value */
+function valueToPixel(value: string, parentWidth: number): number {
+  const size = parseFloat(value);
+  return !value.includes('px') ? parentWidth * (size / 100) : size;
+}

src/app/plugins/split/split.module.ts

+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {FlexLayoutModule} from '@angular/flex-layout';
+import {SplitDirective} from './split.directive';
+import {SplitAreaDirective} from './split-area.directive';
+import {SplitHandleDirective} from './split-handle.directive';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+  ],
+  declarations: [SplitDirective, SplitAreaDirective, SplitHandleDirective],
+  exports: [SplitDirective, SplitAreaDirective, SplitHandleDirective]
+})
+export class SplitModule {}

src/app/router/router.module.ts

@@ -2,20 +2,18 @@ import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
 import {PagesBlankComponent} from '../pages/blank/blank.component';
-import {TestPageComponent} from '../test-page/test-page.component';
 import {PagesConnectComponent} from '../pages/connect/connect.component';
 import {PagesReplayComponent} from '../pages/replay/replay.component';
 import {PageMainComponent} from '../pages/main/main.component';
 import {PagesMonitorComponent} from '../pages/monitor/monitor.component';
-import {SftpComponent} from '../elements/sftp/sftp.component';
+import {ElementSftpComponent} from '../elements/sftp/sftp.component';
 
 
 const appRoutes: Routes = [
   {path: 'replay/:token', component: PagesReplayComponent},
   {path: 'monitor/:token', component: PagesMonitorComponent},
-  {path: 'test', component: TestPageComponent},
   {path: 'connect', component: PagesConnectComponent},
-  {path: 'sftp', component: SftpComponent},
+  {path: 'sftp', component: ElementSftpComponent},
   {path: 'undefined', component: PagesBlankComponent},
   {path: '', component: PageMainComponent},
   // {path: '**', component: PagesNotFoundComponent}

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

-<!--<tree-root [nodes]="nodes" [options]="options"></tree-root>-->
-<!--<app-replay-mp4></app-replay-mp4>-->
-<!--<elements-tree [TreeData]="nodes1"></elements-tree>-->
-<elements-asset-tree></elements-asset-tree>
-

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.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { TestPageComponent } from './test-page.component';
-
-describe('TestPageComponent', () => {
-  let component: TestPageComponent;
-  let fixture: ComponentFixture<TestPageComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ TestPageComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(TestPageComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});

src/tsconfig.spec.json

@@ -11,7 +11,8 @@
     ]
   },
   "files": [
-    "test.ts"
+    "test.ts",
+    "polyfills.ts"
   ],
   "include": [
     "**/*.spec.ts",

tsconfig.json

@@ -3,8 +3,12 @@
   "compilerOptions": {
     "baseUrl": "src",
     "paths": {
-      "@src/*": ["*"],
-      "@app/*": ["app/*"]
+      "@src/*": [
+        "*"
+      ],
+      "@app/*": [
+        "app/*"
+      ]
     },
     "allowJs": true,
     "outDir": "./dist/out-tsc",
@@ -21,6 +25,8 @@
     "lib": [
       "es2017",
       "dom"
-    ]
+    ],
+    "module": "es2015",
+    "allowSyntheticDefaultImports": true
   }
 }

tslint.json

@@ -14,8 +14,7 @@
     "eofline": true,
     "forin": true,
     "import-blacklist": [
-      true,
-      "rxjs"
+      true
     ],
     "import-spacing": true,
     "indent": [