Merge pull request #31 from jumpserver/dev

优化Luna左侧树，使用websocket等

i18n/zh-CN.json

+cn.json
\ No newline at end of file

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",
+    "elfinder": "git+https://github.com/Studio-42/elFinder.git#2.1.33",
     "filetree-css": "^1.0.0",
     "font-awesome": "4.7.0",
     "guacamole-common-js": "^0.9.14-b",
@@ -44,42 +43,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,
@@ -58,53 +63,38 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
   draw() {
     const nodes = {};
     const assets = {};
-    this.Data.forEach((v, i) => {
-      if (!nodes[v['id']]) {
-        nodes[v['id']] = true;
+    this.Data.forEach(node => {
+      if (!nodes[node['id']]) {
+        nodes[node['id']] = true;
         this.nodes.push({
-          'id': v['id'],
-          'key': v['key'],
-          'name': v['name'],
-          'value': v['value'],
-          'pId': v['parent'],
-          'assets_amount': v['assets_amount'],
+          'id': node['id'],
+          'key': node['key'],
+          'name': node['name'],
+          'value': node['value'],
+          'pId': node['parent'],
+          'assets_amount': node['assets_amount'],
           'isParent': true,
-          'open': v['key'] === '0'
+          'open': node['key'] === '0'
         });
       }
 
-      v['assets_granted'].forEach((vv, ii) => {
-        vv['nodes'].forEach((vvv, iii) => {
-          if (!nodes[vvv['id']]) {
-            this.nodes.push({
-              'id': vvv['id'],
-              'key': vvv['key'],
-              'name': vvv['value'],
-              'value': vvv['value'],
-              'pId': vvv['parent'],
-              'assets_amount': vvv['assets_amount'],
-              'isParent': true,
-              'open': vvv['key'] === '0'
-            });
-            nodes[vvv['id']] = true;
-          }
-          if (!assets[vv['id'] + '@' + vvv['id']]) {
+      node['assets_granted'].forEach(asset => {
+        if (!assets[asset['id']]) {
           this.nodes.push({
-              'id': vv['id'],
-              'name': vv['hostname'],
-              'value': vv['hostname'],
-              'system_users_granted': vv['system_users_granted'],
-              'platform': vv['platform'],
-              'comment': vv['comment'],
+            'id': asset['id'],
+            'name': asset['hostname'],
+            'value': asset['hostname'],
+            'system_users_granted': asset['system_users_granted'],
+            'platform': asset['platform'],
+            'comment': asset['comment'],
             'isParent': false,
-              'pId': vvv['id'],
-              'iconSkin': vv['platform'].toLowerCase()
+            'pId': node['id'],
+            'iconSkin': asset['platform'].toLowerCase()
           });
-            assets[vv['id'] + '@' + vvv['id']] = true;
+          assets[asset['id'] + '@' + node['id']] = true;
         }
       });
     });
-    });
     this.nodes.sort(function(node1, node2) {
       if (node1.isParent && !node2.isParent) {
         return -1;
@@ -143,6 +133,8 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     } else if (host.system_users_granted.length === 1) {
       user = host.system_users_granted[0];
       this.login(host, user);
+    } else {
+      alert('该主机没有授权登录用户');
     }
   }
 
@@ -184,10 +176,10 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
 
   filter() {
     const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
+    const _keywords = $('#keyword').val();
     zTreeObj.showNodes(this.hiddenNodes);
 
     function filterFunc(node) {
-      const _keywords = $('#keyword').val();
       if (node.isParent || node.name.indexOf(_keywords) !== -1) {
         return false;
       }
@@ -195,9 +187,12 @@ export class ElementAssetTreeComponent implements OnInit, OnChanges {
     }
 
     this.hiddenNodes = zTreeObj.getNodesByFilter(filterFunc);
-
     zTreeObj.hideNodes(this.hiddenNodes);
+    if (_keywords) {
       zTreeObj.expandAll(true);
+    } else {
+      zTreeObj.expandAll(false);
+    }
   }
 }
 

src/app/elements/nav/nav.component.ts

@@ -13,7 +13,6 @@ import {DataStore, i18n} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
-// import * as layer from 'layui-layer/src/layer.js';
 declare let layer: any;
 
 @Component({
@@ -66,6 +65,9 @@ export class ElementNavComponent implements OnInit {
         break;
       }
       case'Disconnect': {
+        if (!confirm('断开当前连接? (RDP暂不支持)')) {
+          break;
+        }
         switch (NavList.List[NavList.Active].type) {
           case 'ssh': {
             ControlComponent.TerminalDisconnect(NavList.Active);
@@ -83,6 +85,9 @@ export class ElementNavComponent implements OnInit {
         break;
       }
       case'DisconnectAll': {
+        if (!confirm('断开所有连接? (RDP暂不支持)')) {
+          break;
+        }
         ControlComponent.DisconnectAll();
         break;
       }
@@ -255,12 +260,8 @@ export class ElementNavComponent implements OnInit {
           'href': '',
           'name': 'Share session (read/write)',
           'disable': true
-        },
-        {
-          'id': 'Settings',
-          'click': 'Settings',
-          'name': 'Settings'
-        }]
+        }
+        ]
     }, {
       'id': 'Help',
       'name': 'Help',

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

 import {AfterViewInit, Component, Input, OnInit } from '@angular/core';
-import * as io from 'socket.io-client';
-// import {ws} from '../../globals';
-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 {CookieService} from 'ngx-cookie-service';
+import {TermWS} from '../../globals';
 
-const ws = io.connect('/ssh');
+const ws = TermWS;
 
 @Component({
   selector: 'elements-ssh-term',
@@ -21,17 +21,22 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit {
   term: Terminal;
   secret: string;
 
-  constructor(private _uuid: UUIDService) {
+  constructor(private _uuid: UUIDService, private _cookie: CookieService) {
   }
 
   ngOnInit() {
     this.secret = this._uuid.gen();
     this.term = new Terminal({
-      // cols: 80,
-      // rows: 24,
-      useStyle: true,
-      screenKeys: true,
+      fontFamily: '"Monaco", "Consolas", "monospace"',
+      fontSize: 14,
+      rightClickSelectsWord: true,
+      theme: {
+        background: '#1f1b1b'
+      }
     });
+    const rowInit = parseInt(this._cookie.get('rows') || '24', 10);
+    const colsInit = parseInt(this._cookie.get('cols') || '80', 10);
+    this.term.resize(colsInit, rowInit);
   }
 
   ngAfterViewInit() {
@@ -57,35 +62,36 @@ export class ElementSshTermComponent implements OnInit, AfterViewInit {
     });
 
     ws.on('data', data => {
-      if (data['room'] === NavList.List[that.index].room) {
+      const view = NavList.List[that.index];
+      if (view && data['room'] === view.room) {
         that.term.write(data['data']);
       }
     });
 
     ws.on('disconnect', () => {
-      that.disconnect();
+      that.close();
     });
+
     ws.on('logout', (data) => {
       if (data['room'] === NavList.List[that.index].room) {
         NavList.List[that.index].connected = false;
-        // this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
       }
     });
+
     ws.on('room', data => {
-      console.log('Compile secret: ', data['secret'], this.secret);
       if (data['secret'] === this.secret) {
-        console.log('Set room: ', data['room']);
         NavList.List[that.index].room = data['room'];
-        console.log('get', that.index, 'room: ', NavList.List[that.index].room);
       }
     });
   }
 
-  disconnect() {
+  close() {
+    const view = NavList.List[this.index];
+    if (view) {
       NavList.List[this.index].connected = false;
-    // this.term.write('\r\n\x1b[31mBye Bye!\x1b[m\r\n');
       ws.emit('logout', NavList.List[this.index].room);
     }
+  }
 
   active() {
     this.term.focus();

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 {CookieService} from 'ngx-cookie-service';
+import * as $ from 'jquery/dist/jquery.min.js';
 import 'rxjs/Observable';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/distinctUntilChanged';
 
+import {NavList} from '../../pages/control/control/control.component';
+
+
 @Component({
   selector: 'elements-term',
   templateUrl: './term.component.html',
@@ -17,11 +21,9 @@ 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() {
+  constructor(private _cookie: CookieService) {
   }
 
   ngOnInit() {
@@ -30,29 +32,37 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
       .distinctUntilChanged();
 
     this.winSizeChange$
-      .subscribe(() => this.resizeTerm());
+      .subscribe(() => {
+        if (NavList.List[NavList.Active].type === 'ssh') {
+          this.resizeTerm();
+        }
+      });
   }
 
   ngAfterViewInit() {
-    this.term.open(this.el.nativeElement, true);
+    this.term.open(this.el.nativeElement);
     this.resizeTerm();
   }
 
+  getWinSize() {
+    const activeEle = $('#winContainer');
+    const markerEle = $('#marker');
+    const cols = Math.floor(activeEle.width() / markerEle.width() * 6) - 6;
+    const rows = Math.floor(activeEle.height() / markerEle.height()) - 1;
+    return [cols, rows];
+  }
+
   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;
-    console.log('Box size: ', contentElement.width(), '*', contentElement.height());
-    console.log('Mark size: ', markerElement.width(), '*', markerElement.height());
-    console.log('Resize term size: ', this.col, this.row);
-    this.term.resize(this.col, this.row);
-    this.winSizeChangeTrigger.emit([this.col, this.row]);
+    // fit(this.term);
+    const size = this.getWinSize();
+    if (isNaN(size[0])) {
+      fit(this.term);
+    } else {
+      this.term.resize(size[0], size[1]);
+      this.winSizeChangeTrigger.emit([this.term.cols, this.term.rows]);
+    }
+    this._cookie.set('cols', this.term.cols.toString(), 0, '/', document.domain);
+    this._cookie.set('rows', this.term.rows.toString(), 0, '/', document.domain);
   }
 
   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/connect/connect.component.ts

@@ -26,14 +26,12 @@ export class PagesConnectComponent implements OnInit {
     this.system = this._appService.getQueryString('system');
     this.token = this._appService.getQueryString('token');
 
-    jQuery('body').css('background-color', 'black');
-
     this.userid = this._localStorage.get('user-' + this.token);
     this.authToken = this._localStorage.get('authToken-' + this.token);
     this.base = this._localStorage.get('base-' + this.token);
 
+    jQuery('body').css('background-color', '#1f1b1b');
     if (this.system === 'windows') {
-
       if (!this.userid) {
         this._http.get_user_id_from_token(this.token)
           .subscribe(

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

@@ -2,7 +2,7 @@
   <div fxFlex="1 1 20%" minBasis="100px" maxBasis="800px" fxFlexFill ngxSplitArea *ngIf="DataStore.leftbarshow">
     <pages-control-cleftbar></pages-control-cleftbar>
   </div>
-  <div fxFlex="0" ngxSplitHandle></div>
+  <div fxFlex="0" ngxSplitHandle [style.display]="activeViewIsRdp() ? 'none' : 'block'" (mouseup)="dragSplitBtn($event)"></div>
   <div fxFlex="1 1 80%" ngxSplitArea class="content">
     <pages-control-control></pages-control-control>
   </div>

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

@@ -6,8 +6,8 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService} from '../../app.service';
 import {DataStore, User} from '../../globals';
+import {NavList} from './control/control.component';
 
 @Component({
   selector: 'pages-control',
@@ -21,6 +21,14 @@ export class PagesControlComponent implements OnInit {
   constructor() {
   }
 
+  activeViewIsRdp() {
+    return NavList.List[NavList.Active].type === 'rdp';
+  }
+
+  dragSplitBtn(evt) {
+    window.dispatchEvent(new Event('resize'));
+  }
+
   ngOnInit() {
   }
 

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

@@ -2,7 +2,7 @@
   <div fxFlex="0 0 30px" class="search">
     <pages-control-nav></pages-control-nav>
   </div>
-  <div fxFlex="0 0 calc(100%-35px)">
+  <div fxFlex="0 0 calc(100%-35px)" id="winContainer">
     <div class="window" *ngFor="let m of NavList.List;let i=index"
          [ngClass]="{'active':i==NavList.Active}" style="height: 100%">
       <elements-ssh-term [index]="i"

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

@@ -69,7 +69,6 @@ export class ControlComponent implements OnInit {
   }
 
   static DisconnectAll() {
-    alert('DisconnectAll');
     for (let i = 0; i < NavList.List.length; i++) {
       ControlComponent.TerminalDisconnect(i);
     }

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,7 +11,7 @@ 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);
@@ -25,7 +25,7 @@ function formatTime(millis) {
 })
 export class ReplayGuacamoleComponent implements OnInit {
   isPlaying = false;
-  recording: Guacamole.SessionRecording;
+  recording: any;
   playerRef: any;
   displayRef: any;
   max = 100;
@@ -64,7 +64,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/app/pages/replay/replay.component.ts

@@ -27,31 +27,14 @@ export class PagesReplayComponent implements OnInit {
     this._http.get_replay_json(token)
       .subscribe(
         data => {
-          // this.replay = data.json() as Replay;
           this.replay.type = data['type'];
           this.replay.src = data['src'];
           this.replay.id = data['id'];
+        },
+        err => {
+          this._http.get_replay(token);
+          alert('没找到录像文件');
         }
-        // err => {
-        //   this._http.get_replay(token)
-        //     .subscribe(
-        //       data => {
-        //         this.replay.type = 'json';
-        //         this.replay.json = data;
-        //         this.replay.src = 'READY';
-        //         this.replay.timelist = Object.keys(this.replay.json).map(Number);
-        //         this.replay.timelist = this.replay.timelist.sort(function (a, b) {
-        //           return a - b;
-        //         });
-        //         this.replay.totalTime = this.replay.timelist[this.replay.timelist.length - 1] * 1000;
-        //
-        //       }, err2 => {
-        //         alert('无法下载');
-        //         this._logger.error(err2);
-        //       },
-        //     );
-        // }
       );
-
   }
 }

src/environments/environment.prod.ts

 export const environment = {
   production: true
 };
+// export const version = '1.3.0-{{BUILD_NUMBER}} GPLv2.';
+// export const version = '1.3.0-101 GPLv2.';
 export const version = '1.3.0-{{BUILD_NUMBER}} GPLv2.';

src/index.html

@@ -10,7 +10,7 @@
 </head>
 <body>
 <app-root></app-root>
-<span id="marker" style="display: none">marker</span>
+<span id="marker" style="display: none;font-size: 14px">marker</span>
 
 </body>
 </html>

src/sass/style.scss

@@ -94,6 +94,6 @@ $material-design-icons-font-path: '~/material-design-icons/iconfont/';
 
 button.icon-split-handle.ngx-split-button {
   height: 100%;
-  border: 1px solid #3a3333;
-  opacity: 0.5;
+  //border: 1px solid #3a3333;
+  opacity: 0.0;
 }

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;

tools/build.sh

@@ -6,6 +6,6 @@ npm run-script build
 
 rm -fr luna*
 mv dist luna
-cp -R i18n/ luna/
+cp -R i18n luna/
 tar czf luna.tar.gz luna
 md5 luna.tar.gz