[Update] 修改一些代码

.angular-cli.json

@@ -8,6 +8,7 @@
       "root": "src",
       "outDir": "dist",
       "assets": [
+        "assets",
         "static",
         "theme/default/",
         "favicon.ico"

Dockerfile

@@ -9,5 +9,5 @@ RUN npm run-script build
 
 FROM nginx:alpine
 COPY --from=stage-build /data/dist /opt/luna/
-COPY i18n /opt/luna/i18n
+COPY ./src/assets/i18n /opt/luna/i18n
 COPY nginx.conf /etc/nginx/conf.d/default.conf

src/app/app.service.ts

@@ -13,7 +13,7 @@ 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';
-import {SystemUser, GuacObjAddResp, TreeNode, User as _User} from './model';
+import {SystemUser, GuacObjAddResp, TreeNode, User as _User, NavEvt} from './model';
 import {environment} from '../environments/environment';
 import * as UUID from 'uuid-js/lib/uuid.js';
 
@@ -68,6 +68,11 @@ export class HttpService {
     return this.http.get<_User>('/api/users/v1/profile/');
   }
 
+  getMyGrantedAssets(keyword) {
+    const url = `/api/perms/v1/users/assets/tree/?search=${keyword}`;
+    return this.http.get<Array<TreeNode>>(url);
+  }
+
   getMyGrantedNodes(async: boolean, refresh?: boolean) {
     const cachePolicy = refresh ? '2' : '1';
     const syncUrl = `/api/perms/v1/users/nodes-with-assets/tree/?cache_policy=${cachePolicy}`;
@@ -310,7 +315,11 @@ export class AppService implements OnInit {
     this.lang = lang;
 
     if (lang !== 'en') {
-      this._http.get('/luna/i18n/' + 'zh' + '.json').subscribe(
+      let url = `/luna/i18n/zh.json`;
+      if (!environment.production) {
+        url = `/assets/i18n/zh.json`;
+      }
+      this._http.get(url).subscribe(
         data => {
           this._localStorage.set('lang', JSON.stringify(data));
         },
@@ -321,46 +330,47 @@ export class AppService implements OnInit {
     }
     const l = this._localStorage.get('lang');
     if (l) {
-      const data = JSON.parse(l);
-      Object.keys(data).forEach((k, _) => {
-        i18n.set(k, data[k]);
-      });
+      try {
+        const data = JSON.parse(l);
+        Object.keys(data).forEach((k, _) => {
+          i18n.set(k, data[k]);
+        });
+      } catch (e) {
+        this._logger.error('Parse lang json failed');
+      }
     }
   }
 
   checklogin() {
     this._logger.log('service.ts:AppService,checklogin');
-    if (DataStore.Path) {
-      if (document.location.pathname === '/luna/connect') {
-        return;
-      }
-      if (User.logined) {
-        if (document.location.pathname === '/login') {
-          this._router.navigate(['']);
-        } else {
-          this._router.navigate([document.location.pathname]);
-        }
-        return;
-        // jQuery('angular2').show();
-      }
-      this._http.getUserProfile().subscribe(
-        user => {
-          Object.assign(User, user);
-          User.logined = true;
-          this._localStorage.set('user', user.id);
-        },
-        err => {
-          // this._logger.error(err);
-          User.logined = false;
-          window.location.href = document.location.origin + '/users/login?next=' +
-            document.location.pathname + document.location.search;
-          // this._router.navigate(['login']);
-        },
-      );
-    } else {
+    if (!DataStore.Path) {
       this._router.navigate(['FOF']);
-      // jQuery('angular2').show();
     }
+    if (document.location.pathname === '/luna/connect') {
+      return;
+    }
+    if (User.logined) {
+      if (document.location.pathname === '/login') {
+        this._router.navigate(['']);
+      } else {
+        this._router.navigate([document.location.pathname]);
+      }
+      return;
+    }
+    this._http.getUserProfile().subscribe(
+      user => {
+        Object.assign(User, user);
+        User.logined = true;
+        this._localStorage.set('user', user.id);
+      },
+      err => {
+        // this._logger.error(err);
+        User.logined = false;
+        window.location.href = document.location.origin + '/users/login?next=' +
+          document.location.pathname + document.location.search;
+        // this._router.navigate(['login']);
+      },
+    );
   }
 
   browser() {
@@ -391,8 +401,25 @@ export class UUIDService {
 
 @Injectable()
 export class NavService {
+  onNavClick: EventEmitter<NavEvt> = new EventEmitter<NavEvt>();
+
   constructor(private store: LocalStorageService) {}
 
+  disconnectAllConnection() {
+    const evt = new NavEvt('disconnectAll', '');
+    this.onNavClick.emit(evt);
+  }
+
+  disconnectConnection() {
+    const evt = new NavEvt('disconnect', '');
+    this.onNavClick.emit(evt);
+  }
+
+  changeLang(value) {
+    const evt = new NavEvt('changeLang', value);
+    this.onNavClick.emit(evt);
+  }
+
   get treeLoadAsync() {
     const value = this.store.get('LoadTreeAsync');
     return value === '1';

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

@@ -4,9 +4,8 @@ import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {ActivatedRoute} from '@angular/router';
 
 import {AppService, HttpService, LogService, NavService, TreeFilterService} from '../../app.service';
-import {connectEvt} from '../../globals';
+import {connectEvt, i18n} from '../../globals';
 import {TreeNode, ConnectEvt} from '../../model';
-import {View} from '../content/model';
 
 declare var $: any;
 
@@ -274,6 +273,33 @@ export class ElementAssetTreeComponent implements OnInit, OnDestroy {
   }
 
   filterAssetsServer(keyword) {
+    if (!this.assetsTree) {
+      return;
+    }
+    if (!keyword) {
+      const searchNode = this.assetsTree.getNodesByFilter((node) => node.id === 'search');
+      if (searchNode) {
+        this.assetsTree.removeChildNodes(searchNode[0]);
+        this.assetsTree.removeNode(searchNode[0]);
+      }
+      const treeNodes = this.assetsTree.getNodes();
+      if (treeNodes.length !== 0) {
+        this.assetsTree.showNode(treeNodes[0]);
+      }
+      return;
+    }
+    this._http.getMyGrantedAssets(keyword).subscribe(nodes => {
+      const treeNodes = this.assetsTree.getNodes();
+      if (treeNodes.length !== 0) {
+        this.assetsTree.hideNode(treeNodes[0]);
+      }
+      const newNode = {id: 'search', name: i18n.get('Search'), isParent: true, open: true, zAsync: true};
+      const parentNode = this.assetsTree.addNodes(null, newNode)[0];
+      parentNode.zAsync = true;
+      console.log(parentNode);
+      this.assetsTree.addNodes(parentNode, nodes);
+      parentNode.open = true;
+    });
     return;
   }
 

src/app/elements/content/content.component.html

@@ -4,9 +4,8 @@
       <a class="left" (click)="scrollLeft()"><i class="fa fa-caret-left"></i></a>
       <a class="right" (click)="scrollRight()"><i class="fa fa-caret-right"></i></a>
     </div>
-    <div class="tabs">
-      <ul>
-        <!--<ul [ngStyle]="{'width':150*viewList.length+'px'}">-->
+    <div class="tabs" #tabs>
+      <ul [ngStyle]="{'width':tabsWidth+'px'}">
         <elements-content-tab
           *ngFor="let view of viewList"
           [view]="view" (onAction)="onViewAction($event)">

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

@@ -9,7 +9,8 @@
   list-style-type: none;
   height: 30px;
   background-color: #3a3333;
-  display: block;
+  //display: block;
+  display: inline-block;
   min-width: 100%;
   padding-left: 0;
 }
@@ -38,6 +39,12 @@
   color: white
 }
 
+.scroll-button a.disabled {
+  color: #676A6D;
+  cursor: not-allowed;
+}
+
+
 .window {
   height: 100%;
 }

src/app/elements/content/content.component.ts

-/**
- * 控制页面
- *
- * 主管已连接的主机标签卡，各连接方式的web展现（WebTerminal、RDP、VNC等）
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-
-import {Component, OnInit} from '@angular/core';
-import {TermWS} from '../../globals';
+import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {View, ViewAction} from './model';
-import jQuery from 'jquery/dist/jquery.min';
 
 @Component({
   selector: 'elements-content',
@@ -19,10 +8,7 @@ import jQuery from 'jquery/dist/jquery.min';
 })
 export class ElementContentComponent implements OnInit {
   viewList: Array<View> = [];
-
-  static RdpDisconnect(id) {
-    // viewList.List[id].connected = false;
-  }
+  @ViewChild('tabs') tabsRef: ElementRef;
 
   static DisconnectAll() {
     // for (let i = 0; i < viewList.List.length; i++) {
@@ -31,6 +17,10 @@ export class ElementContentComponent implements OnInit {
     // }
   }
 
+  get tabsWidth() {
+    return (this.viewList.length + 1) * 151 + 10;
+  }
+
   constructor() {
   }
 
@@ -38,8 +28,11 @@ export class ElementContentComponent implements OnInit {
   }
 
   onNewView(view) {
-    this.viewList.push(view);
-    this.setViewActive(view);
+    this.scrollToEnd();
+    setTimeout(() => {
+      this.viewList.push(view);
+      this.setViewActive(view);
+    }, 100);
   }
 
   onViewAction(action: ViewAction) {
@@ -79,13 +72,15 @@ export class ElementContentComponent implements OnInit {
   }
 
   scrollLeft() {
-    const tabRef = jQuery('.tabs');
-    tabRef.scrollLeft(tabRef.scrollLeft() - 100);
+    this.tabsRef.nativeElement.scrollLeft -= 150 * 2;
   }
 
   scrollRight() {
-    const tabRef = jQuery('.tabs');
-    tabRef.scrollLeft(tabRef.scrollLeft() + 100);
+    this.tabsRef.nativeElement.scrollLeft += 150 * 2;
+  }
+
+  scrollToEnd() {
+    this.tabsRef.nativeElement.scrollLeft = this.tabsRef.nativeElement.scrollWidth;
   }
 
 }

src/app/elements/nav/nav.component.css

 .nav {
   display: block;
-  margin-top: 2px;
   height: 31px;
+  padding-top: 2px;
   background-color: #463e3e;
 }
 
@@ -16,6 +16,9 @@
 
 .nav a {
   color: #f0f0f1;
+  font-family: Roboto,sans-serif;
+  font-size: 13px;
+  font-weight: 300;
   text-decoration: none;
   padding: 6px 15px 6px 15px;
 }
@@ -47,9 +50,9 @@
   direction: ltr;
   width: auto;
   top: auto;
-  left: 0px;
-  margin-left: 0px;
-  margin-top: 0px;
+  left: 0;
+  margin-left: 0;
+  margin-top: 0;
   min-width: 150px;
 }
 

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

@@ -7,8 +7,6 @@
  */
 import {Component, Inject, OnInit} from '@angular/core';
 import {HttpService, LocalStorageService, NavService, LogService} from '../../app.service';
-import {CleftbarComponent} from '../../pages/control/cleftbar/cleftbar.component';
-import {ControlComponent, NavList, View} from '../../pages/control/control/control.component';
 import {DataStore, i18n} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
@@ -22,7 +20,6 @@ declare let layer: any;
 export class ElementNavComponent implements OnInit {
   DataStore = DataStore;
   navs: Array<object>;
-  ChangeLanWarningDialog: any;
   _asyncTree = false;
 
   static Hide() {
@@ -51,26 +48,23 @@ export class ElementNavComponent implements OnInit {
   }
 
   click(event) {
-    this._logger.debug('nav.ts:NavComponent,click', event);
     switch (event) {
-      case 'ReloadLeftbar': {
-        CleftbarComponent.Reload();
-        break;
-      }
       case 'ConnectSFTP': {
         window.open('/coco/elfinder/sftp/');
         break;
       }
       case 'HideLeft': {
-        CleftbarComponent.Hide();
+        DataStore.showLeftBar = false;
+        this.refreshNav();
         break;
       }
-      case 'Settings': {
-        this.Settings();
+      case 'ShowLeft': {
+        DataStore.showLeftBar = true;
+        this.refreshNav();
         break;
       }
-      case 'ShowLeft': {
-        CleftbarComponent.Show();
+      case 'Settings': {
+        this.Settings();
         break;
       }
       case 'Copy': {
@@ -79,7 +73,9 @@ export class ElementNavComponent implements OnInit {
       }
       case 'FullScreen': {
         const ele: any = document.getElementsByClassName('window active')[0];
-        
+        if (!ele) {
+          return;
+        }
         if (ele.requestFullscreen) {
           ele.requestFullscreen();
         } else if (ele.mozRequestFullScreen) {
@@ -91,35 +87,21 @@ export class ElementNavComponent implements OnInit {
         } else {
           throw new Error('不支持全屏api');
         }
-        
         window.dispatchEvent(new Event('resize'));
         break;
       }
       case'Disconnect': {
-        if (!confirm('断开当前连接? (RDP暂不支持)')) {
+        if (!confirm('断开当前连接?')) {
           break;
         }
-        switch (NavList.List[NavList.Active].type) {
-          case 'ssh': {
-            ControlComponent.TerminalDisconnect(NavList.Active);
-            break;
-          }
-          case 'rdp': {
-            ControlComponent.RdpDisconnect(NavList.Active);
-            break;
-          }
-          default: {
-            // statements;
-            break;
-          }
-        }
+        this._navSvc.disconnectConnection();
         break;
       }
       case'DisconnectAll': {
-        if (!confirm('断开所有连接? (RDP暂不支持)')) {
+        if (!confirm('断开所有连接?')) {
           break;
         }
-        ControlComponent.DisconnectAll();
+        this._navSvc.disconnectAllConnection();
         break;
       }
       case 'Website': {
@@ -162,10 +144,6 @@ export class ElementNavComponent implements OnInit {
         });
         break;
       }
-      case 'EnterLicense': {
-        this.EnterLicense();
-        break;
-      }
       case 'English': {
         const dialog = this._dialog.open(
           ChangLanWarningDialogComponent,
@@ -223,23 +201,6 @@ export class ElementNavComponent implements OnInit {
 
   }
 
-  EnterLicense() {
-    layer.prompt({
-      formType: 2,
-      maxlength: 500,
-      title: 'Please Input Code',
-      scrollbar: false,
-      area: ['400px', '300px'],
-      moveOut: true,
-      moveType: 1
-    }, function (value, index) {
-      DataStore.socket.emit('key', value);
-      // layer.msg(value); //得到value
-      layer.close(index);
-
-    });
-  }
-
   refreshNav() {
     this.navs = this.getNav();
   }
@@ -278,7 +239,14 @@ export class ElementNavComponent implements OnInit {
         {
           'id': 'HideLeftManager',
           'click': 'HideLeft',
-          'name': 'Hide left manager'
+          'name': 'Hide left manager',
+          'hide': !DataStore.showLeftBar
+        },
+        {
+          'id': 'ShowLeftManager',
+          'click': 'ShowLeft',
+          'name': 'Show left manager',
+          'hide': DataStore.showLeftBar
         },
         {
           'id': 'RDPResolution',
@@ -334,7 +302,7 @@ export class ElementNavComponent implements OnInit {
         {
           'id': 'ShowManualPassword',
           'click': 'SkipManualPassword',
-          'name': 'show manual password',
+          'name': 'Show manual password',
           'hide': !this._navSvc.skipAllManualPassword
         }
         ]
@@ -376,21 +344,6 @@ export class ElementNavComponent implements OnInit {
     ];
   }
 
-  Connect() {
-    layer.prompt({
-      formType: 2,
-      maxlength: 500,
-      title: 'Please Input Code',
-      scrollbar: false,
-      area: ['400px', '300px'],
-      moveOut: true,
-      moveType: 1
-    }, function (value, index) {
-      DataStore.socket.emit('key', value);
-      layer.close(index);
-    });
-  }
-
   English() {
     this._localStorage.delete('lang');
     i18n.clear();
@@ -414,14 +367,6 @@ export class ElementNavComponent implements OnInit {
   }
 
   Settings() {
-    const id = NavList.List.length - 1;
-    NavList.List[id].nick = 'Setting';
-    NavList.List[id].connected = true;
-    NavList.List[id].edit = false;
-    NavList.List[id].closed = false;
-    NavList.List[id].type = 'settings';
-    NavList.List.push(new View());
-    NavList.Active = id;
   }
 }
 

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

-import {AfterViewInit, Component, Input, OnInit, OnDestroy } from '@angular/core';
+import {Component, Input, OnInit, OnDestroy } from '@angular/core';
 import {Terminal} from 'xterm';
 import {View} from '../content/model';
-import {UUIDService} from '../../app.service';
-import {CookieService} from 'ngx-cookie-service';
+import {LogService, UUIDService} from '../../app.service';
 import {Socket} from '../../utils/socket';
 import {getWsSocket} from '../../globals';
 
@@ -24,7 +23,7 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
   ws: Socket;
   roomID: string;
 
-  constructor(private _uuid: UUIDService, private _cookie: CookieService) {
+  constructor(private _uuid: UUIDService, private _logger: LogService) {
   }
 
   ngOnInit() {
@@ -71,7 +70,7 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
         'token': this.token, 'secret': this.secret,
         'size': [this.term.cols, this.term.rows]
       };
-      console.log('On token event trigger');
+      this._logger.debug('On token event trigger');
       this.ws.emit('token', data);
     }
 
@@ -88,20 +87,20 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
 
     // 服务器主动断开
     this.ws.on('disconnect', () => {
-      console.log('On disconnect event trigger');
+      this._logger.debug('On disconnect event trigger');
       this.view.connected = false;
     });
 
     this.ws.on('logout', data => {
       if (data.room === this.roomID) {
-        console.log('On logout event trigger: ', data.room, this.roomID);
+        this._logger.debug('On logout event trigger: ', data.room, this.roomID);
         this.view.connected = false;
       }
     });
 
     this.ws.on('room', data => {
       if (data.secret === this.secret && data.room) {
-        console.log('On room', data);
+        this._logger.debug('On room', data);
         this.roomID = data.room;
         this.view.room = data.room;
       }
@@ -113,7 +112,7 @@ export class ElementSshTermComponent implements OnInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
-    console.log('Close view');
+    this._logger.debug('Close view');
     if (this.view && (this.view.room === this.roomID)) {
       this.view.connected = false;
       this.ws.emit('logout', this.roomID);

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

@@ -68,9 +68,6 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
       Math.floor(availableWidth / dimensions.actualCellWidth) - 1,
       Math.floor(availableHeight / dimensions.actualCellHeight) - 2
     ];
-    console.log(availableWidth, dimensions.actualCellWidth);
-    console.log(availableHeight, dimensions.actualCellHeight);
-    console.log('with: ', geometry[0], 'height: ', geometry[1]);
 
     if (!isFinite(geometry[0])) {
       geometry[0] = 80;
@@ -84,14 +81,12 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   resizeTerm() {
     const size = this.getWinSize();
     // Todo: 修改大小
-    console.log('get size is: ', size);
     if (isNaN(size[0]) || isNaN(size[1])) {
       fit(this.term);
     } else {
       (<any>this.term).renderer.clear();
       this.term.resize(size[0], size[1]);
     }
-    console.log(size);
     this.winSizeChangeTrigger.emit([this.term.cols, this.term.rows]);
   }
 

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

-import {Component, OnInit, Output, Pipe, PipeTransform, EventEmitter} from '@angular/core';
+import {Component, OnInit, Pipe, PipeTransform} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 

src/app/globals.ts

@@ -24,7 +24,7 @@ export const DataStore: _DataStore = {
   Path: {},
   error: {},
   msg: {},
-  loglevel: 0,
+  logLevel: 4,
   showLeftBar: true,
   windowsize: [],
   autologin: false,

src/app/model.ts

@@ -80,6 +80,17 @@ export class ConnectEvt {
   }
 }
 
+export class NavEvt {
+  name: string;
+  value: any;
+
+  constructor(name: string, value: any) {
+    this.name = name;
+    this.value = value;
+  }
+
+}
+
 export class DataStore {
   socket: any;
   Nav: Array<object>;
@@ -87,7 +98,7 @@ export class DataStore {
   Path: {};
   error: {};
   msg: {};
-  loglevel: number;
+  logLevel: number;
   showLeftBar = true;
   windowsize: Array<number>;
   autologin: boolean;

src/app/router/router.module.ts

-/**
- * app路由
- *
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
 import {NgModule} from '@angular/core';
 import {RouterModule, Routes} from '@angular/router';
 
@@ -13,8 +6,6 @@ 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 {PagesControlComponent} from '../pages/control/control.component';
-import {PagesNotFoundComponent} from '../pages/not-found/not-found.component';
 import {PagesMonitorComponent} from '../pages/monitor/monitor.component';
 import {SftpComponent} from '../elements/sftp/sftp.component';
 
@@ -27,7 +18,7 @@ const appRoutes: Routes = [
   {path: 'sftp', component: SftpComponent},
   {path: 'undefined', component: PagesBlankComponent},
   {path: '', component: PageMainComponent},
-  {path: '**', component: PagesNotFoundComponent}
+  // {path: '**', component: PagesNotFoundComponent}
 ];
 
 @NgModule({
@@ -35,7 +26,6 @@ const appRoutes: Routes = [
     RouterModule.forRoot(
       appRoutes,
       {enableTracing: false} // <-- debugging purposes only
-      // {enableTracing: !environment.production} // <-- debugging purposes only
     )
   ],
   exports: [

src/app/utils/socket.ts

@@ -17,6 +17,7 @@ export class Socket {
 
   async connect() {
     const emitter = new EventEmitter();
+    emitter.setMaxListeners(20);
     this.emitter = emitter;
     const events = {
     };

src/assets/123.json

+{
+  "hello": "world"
+}

i18n/zh.json → src/assets/i18n/zh.json

@@ -65,5 +65,9 @@
   "username": "用户名",
   "password": "密码",
   "skip": "跳过",
-  "loading": "加载中"
+  "loading": "加载中",
+  "load tree async": "异步加载树",
+  "load tree sync": "同步加载树",
+  "show manual password": "显示手动密码窗",
+  "skip manual password": "跳过手动密码窗"
 }