[Update] 更新tree和优化term

package.json

 {
   "name": "luna",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.json",
-    "build": "ng build --environment prod  --base-href=/luna/  --deploy '/luna/'",
+    "build": "ng build --environment prod --aot --prod --base-href=/luna/  --deploy '/luna/'",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^5.2.0",
-    "@angular/cdk": "^5.2.0",
+    "@angular/animations": "^5.2.10",
+    "@angular/cdk": "^5.2.5",
     "@angular/common": "5.2.0",
     "@angular/compiler": "5.2.0",
     "@angular/core": "5.2.0",
-    "@angular/flex-layout": "^5.0.0-beta.14",
     "@angular/forms": "5.2.0",
     "@angular/http": "5.2.0",
-    "@angular/material": "^5.1.1",
+    "@angular/material": "^5.2.5",
     "@angular/platform-browser": "5.2.0",
     "@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",
+    "@swimlane/ngx-datatable": "^11.3.2",
+    "@swimlane/ngx-ui": "^20.2.1",
+    "ajv": "^6.5.0",
+    "animate.css": "^3.6.1",
     "body-parser": "^1.18.2",
-    "bootstrap": "^4.0.0-beta.3",
+    "bootstrap": "^4.1.1",
     "clipboard": "^1.7.1",
     "compass-mixins": "^0.12.10",
     "core-js": "2.5.3",
     "directory-encoder": "^0.9.2",
-    "elfinder": "^2.1.33",
     "filetree-css": "^1.0.0",
     "font-awesome": "4.7.0",
     "guacamole-common-js": "^0.9.14-b",
@@ -44,42 +42,43 @@
     "jquery-slimscroll": "^1.3.8",
     "jquery-sparkline": "^2.4.0",
     "jvectormap": "1.2.2",
-    "lodash": "^4.17.5",
+    "lodash": "^4.17.10",
     "material-design-icons": "^3.0.1",
     "materialize-css": "^0.100.2",
-    "metismenu": "^2.5.0",
+    "metismenu": "^2.7.7",
     "mstsc.js": "^0.2.4",
     "ng2-charts": "^1.5.0",
     "ngx-bootstrap": "^1.6.6",
     "ngx-cookie-service": "^1.0.10",
     "ngx-layer": "0.0.4",
-    "ngx-logger": "^1.1.2",
+    "ngx-logger": "^2.2.4",
     "ngx-perfect-scrollbar": "5.2.0",
     "ngx-progressbar": "^2.1.1",
     "npm-font-open-sans": "^1.1.0",
-    "peity": "^3.2.1",
+    "peity": "^3.3.0",
     "popper.js": "1.12.9",
     "requirejs": "^2.3.5",
     "roboto-fontface": "^0.8.0",
     "rxjs": "5.5.6",
     "sass-math": "^1.0.0",
-    "socket.io": "^2.0.3",
+    "socket.io": "^2.1.0",
     "socket.io-client": "^2.1.0",
     "ssh-keygen": "^0.4.1",
-    "tether": "^1.4.0",
+    "tether": "^1.4.4",
     "tslib": "^1.9.0",
     "uuid-js": "^0.7.5",
-    "xterm": "^2.9.2",
+    "xterm": "^3.3.0",
     "zone.js": "0.8.20"
   },
   "devDependencies": {
-    "@angular-devkit/core": "^0.4.2",
-    "@angular-devkit/schematics": "^0.4.2",
-    "@angular/cli": "^1.7.3",
+    "@angular-devkit/core": "^0.4.9",
+    "@angular-devkit/schematics": "^0.4.9",
+    "@angular/cli": "^1.7.4",
     "@angular/compiler-cli": "5.2.0",
     "@angular/language-service": "5.2.0",
     "@types/jasmine": "2.8.4",
     "@types/jasminewd2": "~2.0.2",
+    "@types/xterm": "^3.0.0",
     "codelyzer": "4.0.2",
     "jasmine-core": "2.8.0",
     "jasmine-spec-reporter": "4.2.1",

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";
 
 .ztree {
   height: 100%;

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

@@ -32,8 +32,13 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   hiddenNodes: any;
 
   onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
+    if (treeNode.isParent) {
+      const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
+      zTreeObj.expandNode(treeNode);
+    } else {
       this.Connect(treeNode);
     }
+  }
 
   constructor(private _appService: AppService,
               public _dialog: MatDialog,

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

 import {AfterViewInit, Component, Input, OnInit } from '@angular/core';
-import * as Terminal from 'xterm/dist/xterm';
+import {Terminal} from 'xterm';
 import {NavList} from '../../pages/control/control/control.component';
 import {UUIDService} from '../../app.service';
 import {TermWS} from '../../globals';
@@ -26,8 +26,12 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit {
   ngOnInit() {
     this.secret = this._uuid.gen();
     this.term = new Terminal({
-      useStyle: true,
-      screenKeys: true,
+      fontFamily: '"Monaco", "Consolas", "monospace"',
+      fontSize: 14,
+      rightClickSelectsWord: true,
+      theme: {
+        background: '#1f1b1b'
+      }
     });
   }
 

src/app/elements/term/term.component.css

@@ -17,18 +17,18 @@ div {
   *padding: 15px 0 15px 15px;;
 }
 
-div.terminal div span {
-  min-width: 12px;
-}
+/*div.terminal div span {*/
+  /*min-width: 12px;*/
+/*}*/
 
-.terminal div {
-  user-select: text;
-}
+/*.terminal div {*/
+  /*user-select: text;*/
+/*}*/
 
 /*.terminal, .terminal .xterm-viewport {*/
   /*background-color: inherit;*/
 /*}*/
 
-.terminal .xterm-rows {
-  background-color: #1f1b1b;
-}
+/*.terminal .xterm-rows {*/
+  /*background-color: #1f1b1b;*/
+/*}*/

src/app/elements/term/term.component.html

-<div style="padding: 15px">
+<div style='padding:15px 0 15px 15px'>
   <div #term (mouseenter)="active()"></div>
 </div>
 

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

 import {AfterViewInit, Component, Input, Output, OnInit, ViewChild, EventEmitter} from '@angular/core';
 import {ElementRef} from '@angular/core';
-import * as Terminal from 'xterm/dist/xterm';
-// import { Terminal } from 'xterm';
-import * as $ from 'jquery/dist/jquery.min.js';
+import {Terminal} from 'xterm';
+import {fit} from 'xterm/lib/addons/fit/fit';
 import {Observable} from 'rxjs/Rx';
 import 'rxjs/Observable';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+
 @Component({
   selector: 'elements-term',
   templateUrl: './term.component.html',
@@ -17,8 +17,6 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   @ViewChild('term') el: ElementRef;
   @Input() term: Terminal;
   @Output() winSizeChangeTrigger = new EventEmitter<Array<number>>();
-  col = 80;
-  row = 24;
   winSizeChange$: Observable<any>;
 
   constructor() {
@@ -34,22 +32,23 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   }
 
   ngAfterViewInit() {
-    this.term.open(this.el.nativeElement, true);
+    this.term.open(this.el.nativeElement);
     this.resizeTerm();
   }
 
   resizeTerm() {
-    let contentElement = $('.window.active');
-    if (contentElement.length === 0) {
-      contentElement = $('body');
-    }
-    const markerElement = $('#marker');
-    const col = Math.floor((contentElement.width() - 30) / markerElement.width() * 6) - 1;
-    const row = Math.floor((contentElement.height() - 30) / markerElement.height());
-    this.col = col > 80 ? col : 80;
-    this.row = row > 24 ? row : 24;
-    this.term.resize(this.col, this.row);
-    this.winSizeChangeTrigger.emit([this.col, this.row]);
+    fit(this.term);
+    // let contentElement = $('.window.active');
+    // if (contentElement.length === 0) {
+    //   contentElement = $('body');
+    // }
+    // const markerElement = $('#marker');
+    // const col = Math.floor((contentElement.width() - 30) / markerElement.width() * 6) - 1;
+    // const row = Math.floor((contentElement.height() - 30) / markerElement.height());
+    // this.col = col > 80 ? col : 80;
+    // this.row = row > 24 ? row : 24;
+    // this.term.resize(this.col, this.row);
+    this.winSizeChangeTrigger.emit([this.term.cols, this.term.rows]);
   }
 
   active() {

src/app/globals.ts

 'use strict';
-import * as terminal from 'xterm/dist/xterm';
 import * as io from 'socket.io-client';
-
-export function Terminal(xargs: any) {
-  return terminal(xargs);
-}
+import {Terminal} from 'xterm';
 
 export const TermWS = io.connect('/ssh');
-export let term: {
-  term: any;
-  col: number;
-  row: number;
-} = {
-  term: Terminal({
-    cols: 80,
-    rows: 24,
-    useStyle: true,
-    screenKeys: true,
-    scrollback: 10
-  }),
-  col: 80,
-  row: 24,
-};
 export const sep = '/';
 export let Video: {
   id: string,
@@ -153,4 +134,3 @@ export let wsEvent: {
 };
 
 export const i18n = new Map();
-

src/app/pages/index/ileftbar/ileftbar.component.html

-<p>
-  ileftbar works!
-</p>

src/app/pages/index/ileftbar/ileftbar.component.spec.ts

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

src/app/pages/index/ileftbar/ileftbar.component.ts

-/**
- * 主页的左边栏
- *
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-import {Component, OnInit} from '@angular/core';
-import {AppService, LogService} from '../../../app.service';
-
-@Component({
-  selector: 'pages-ileftbar',
-  templateUrl: './ileftbar.component.html',
-  styleUrls: ['./ileftbar.component.css']
-})
-export class IleftbarComponent implements OnInit {
-
-  constructor(private _appService: AppService,
-              private _logger: LogService) {
-    this._logger.log('nav.ts:NavComponent');
-    // this._appService.getnav()
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/pages/index/ileftbar/ileftbar.module.ts

-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import {IleftbarComponent} from './ileftbar.component';
-
-@NgModule({
-  imports: [
-    CommonModule
-  ],
-  declarations: [
-    IleftbarComponent
-  ]
-})
-export class IleftbarModule {
-}

src/app/pages/pages.component.ts

@@ -8,7 +8,6 @@ import {PagesReplayComponent} from './replay/replay.component';
 import {PagesNotFoundComponent} from './not-found/not-found.component';
 import {PagesLoginComponent} from './login/login.component';
 import {CleftbarComponent} from './control/cleftbar/cleftbar.component';
-import {Mp4Component} from './replay/mp4/mp4.component';
 import {JsonComponent} from './replay/json/json.component';
 import {ControlComponent} from './control/control/control.component';
 import {PagesControlNavComponent} from './control/control/controlnav/nav.component';
@@ -24,7 +23,7 @@ export const PagesComponents = [
   CleftbarComponent,
   PagesIndexComponent,
   PagesMonitorComponent,
-  PagesReplayComponent, Mp4Component, JsonComponent,
+  PagesReplayComponent, JsonComponent,
   // PagesSettingComponent,
   PagesNotFoundComponent,
   PagesLoginComponent,

src/app/pages/replay/guacamole/guacamole.component.html

@@ -16,7 +16,7 @@
           <div class="seek-notification">
               <p>
                   Seek in progress...
-                  <button id="cancel-seek" class="btn" (click)="cancelSeek()">Cancel</button>
+                  <button id="cancel-seek" class="btn" (click)="cancelSeek($event)">Cancel</button>
               </p>
           </div>
       </div>

src/app/pages/replay/guacamole/guacamole.component.ts

@@ -11,10 +11,14 @@ function zeroPad(num, minLength) {
   return str;
 }
 
-function formatTime(millis) {
+function formatTime(millis: number) {
   const totalSeconds = Math.floor(millis / 1000);
   const seconds = totalSeconds % 60;
   const minutes = Math.floor(totalSeconds / 60);
+  console.log('1');
+  console.log('1');
+  console.log('1');
+  console.log('1');
   return zeroPad(minutes, 2) + ':' + zeroPad(seconds, 2);
 }
 
@@ -25,7 +29,7 @@ function formatTime(millis) {
 })
 export class ReplayGuacamoleComponent implements OnInit {
   isPlaying = false;
-  recording: Guacamole.SessionRecording;
+  recording: any;
   playerRef: any;
   displayRef: any;
   max = 100;
@@ -64,7 +68,7 @@ export class ReplayGuacamoleComponent implements OnInit {
 
   initRecording() {
     const that = this;
-    this.recording.connect();
+    this.recording.connect('');
     this.recording.onplay = function() {
       that.isPlaying = true;
     };

src/app/pages/replay/json/json.component.ts

 import {Component, Input, OnInit} from '@angular/core';
-import * as Terminal from 'xterm/dist/xterm';
+import {Terminal} from 'xterm';
 import {HttpService, LogService} from '../../../app.service';
 import {Replay} from '../replay.model';
 
@@ -25,7 +25,14 @@ export class JsonComponent implements OnInit {
   constructor(private _http: HttpService) {}
 
   ngOnInit() {
-    this.term = new Terminal();
+    this.term = new Terminal({
+      fontFamily: '"Monaco", "Consolas", "monospace"',
+      fontSize: 14,
+      rightClickSelectsWord: true,
+      theme: {
+        background: '#1f1b1b'
+      }
+    });
     if (this.replay.src !== 'READY') {
       this._http.get_replay_data(this.replay.src)
         .subscribe(

src/app/pages/replay/mp4/mp4.component.html

-<div [ngStyle]="{'width.px': 800,'height.px': 600}">
-  <video controls>
-    <source [src]="replay.src" type="video/mp4">
-    Your browser does not support the video tag.
-    <br>
-    您的浏览器不支持，请升级
-  </video>
-</div>

src/app/pages/replay/mp4/mp4.component.spec.ts

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

src/app/pages/replay/mp4/mp4.component.ts

-import {Component, Input, OnInit} from '@angular/core';
-import {Replay} from '../replay.model';
-
-@Component({
-  selector: 'app-replay-mp4',
-  templateUrl: './mp4.component.html',
-  styleUrls: ['./mp4.component.css']
-})
-export class Mp4Component implements OnInit {
-  @Input() replay: Replay;
-  constructor() {
-  }
-
-  ngOnInit() {
-    if (this.replay.height === 0) {
-      this.replay.height = 600;
-    }
-    if (this.replay.width === 0) {
-      this.replay.width = 800;
-    }
-
-  }
-
-}

src/styles.css

@@ -27,27 +27,49 @@ app-root {
   color: white;
 }
 
-.terminal {
-  font-family: 'Monaco', 'Consolas', 'monospace' !important;
-  font-size: 13px;
-  white-space: nowrap;
-  /*display: inline-block;*/
-  /*background-color: #1f1b1b;*/
-}
+/*.terminal {*/
+  /*font-family: 'Monaco', 'Consolas', 'monospace' !important;*/
+  /*font-size: 13px;*/
+  /*white-space: nowrap;*/
+  /*!*display: inline-block;*!*/
+  /*!*background-color: #1f1b1b;*!*/
+/*}*/
 
-.terminal div {
-  user-select: text;
-}
+/*.terminal div {*/
+  /*user-select: text;*/
+/*}*/
 
-.terminal .xterm-rows {
-  background-color: #1f1b1b;
-  /*margin: 15px;*/
-}
+/*.terminal .xterm-rows {*/
+  /*background-color: #1f1b1b;*/
+  /*!*margin: 15px;*!*/
+/*}*/
 
 /*.xterm-rows {*/
   /*padding: 15px;*/
 /*}*/
 
+/*.xterm .composition-view {*/
+    /*!* TODO: Composition position got messed up somewhere *!*/
+    /*background: #1f1b1b !important;*/
+    /*color: #FFF;*/
+    /*display: none;*/
+    /*position: absolute;*/
+    /*white-space: nowrap;*/
+    /*z-index: 1;*/
+/*}*/
+
+/*.xterm .xterm-viewport {*/
+    /*!* On OS X this is required in order for the scroll bar to appear fully opaque *!*/
+    /*background: #1f1b1b !important;*/
+    /*overflow-y: scroll;*/
+    /*cursor: default;*/
+    /*position: absolute;*/
+    /*right: 0;*/
+    /*left: 0;*/
+    /*top: 0;*/
+    /*bottom: 0;*/
+/*}*/
+
 .terminal .xterm-viewport {
   background-color: #1f1b1b;
   overflow: auto;