[Update] 修改Luna结构

package.json

@@ -19,6 +19,7 @@
     "@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",
@@ -31,6 +32,7 @@
     "ajv": "^6.5.0",
     "animate.css": "^3.6.1",
     "body-parser": "^1.18.2",
+    "bootstrap": "^4.3.1",
     "clipboard": "^1.7.1",
     "compass-mixins": "^0.12.10",
     "core-js": "2.5.3",
@@ -75,7 +77,7 @@
   "devDependencies": {
     "@angular-devkit/core": "^0.4.9",
     "@angular-devkit/schematics": "^0.4.9",
-    "@angular/cli": "^7.2.1",
+    "@angular/cli": "^1.7.4",
     "@angular/compiler-cli": "^5.2.11",
     "@angular/language-service": "5.2.0",
     "@types/jasmine": "2.8.4",

proxy.conf.json

 {
   "/api": {
-    "target": "http://127.0.0.1:5001",
+    "target": "http://127.0.0.1:8080",
     "secure": false
   },
   "/luna/i18n": {
@@ -8,7 +8,7 @@
     "secure": false
   },
   "/socket.io/": {
-    "target": "http://127.0.0.1:5001",
+    "target": "http://127.0.0.1:5000",
     "secure": false,
     "ws": true
   },
@@ -27,5 +27,13 @@
       "^/rdp": ""
     },
     "secure": false
+  },
+  "/guacamole/": {
+    "target": "http://127.0.0.1:8083",
+    "secure": false,
+    "ws": true,
+    "pathRewrite": {
+      "^/guacamole": ""
+    }
   }
 }

src/app/app.module.ts

@@ -9,16 +9,16 @@ import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel lives here
 import {NGXLogger} from 'ngx-logger';
+import {FlexLayoutModule} from '@angular/flex-layout';
 import {HttpClientModule} from '@angular/common/http';
+import {CookieService} from 'ngx-cookie-service';
+import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
 
-import {AppRouterModule} from './router/router.module';
 
 // service
 import {AppService, HttpService, LocalStorageService, NavService, LogService, UUIDService, TreeFilterService} from './app.service';
-import {CookieService} from 'ngx-cookie-service';
-import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
-
 
+import {AppRouterModule} from './router/router.module';
 import {Pipes} from './pipes/pipes';
 import {AppComponent} from './pages/app.component';
 import {PagesComponents} from './pages/pages.component';
@@ -34,6 +34,7 @@ import {SftpComponent} from './elements/sftp/sftp.component';
 @NgModule({
   imports: [
     BrowserModule,
+    FlexLayoutModule,
     FormsModule,
     HttpClientModule,
     ReactiveFormsModule,

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

@@ -3,9 +3,9 @@ import {MatDialog} from '@angular/material';
 import {BehaviorSubject} from 'rxjs/BehaviorSubject';
 import {ActivatedRoute} from '@angular/router';
 
-import {AppService, HttpService, LogService, NavService, TreeFilterService} from '../../app.service';
-import {connectEvt, translate} from '../../globals';
-import {TreeNode, ConnectEvt} from '../../model';
+import {AppService, HttpService, LogService, NavService, TreeFilterService} from '@app/app.service';
+import {connectEvt, translate} from '@app/globals';
+import {TreeNode, ConnectEvt} from '@app/model';
 
 declare var $: any;
 

src/app/elements/connect/connect.component.ts

 import {Component, Input, OnInit, Output, Inject, OnDestroy, EventEmitter} from '@angular/core';
-import {connectEvt} from '../../globals';
-import {AppService, HttpService, LogService, NavService} from '../../app.service';
+import {connectEvt} from '@app/globals';
+import {AppService, HttpService, LogService, NavService} from '@app/app.service';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
 import {ActivatedRoute} from '@angular/router';
-import {SystemUser, TreeNode, Asset} from '../../model';
-import {View} from '../content/model';
+import {SystemUser, TreeNode, Asset} from '@app/model';
+import {View} from '@app/model';
 import * as jQuery from 'jquery/dist/jquery.min';
 
 declare var $: any;

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

 import {Component, OnInit, Input, Output, EventEmitter} from '@angular/core';
-import {View, ViewAction} from '../content/model';
-
-
+import {View, ViewAction} from '@app/model';
 
 @Component({
   selector: 'elements-content-tab',

src/app/elements/content-window/content-window.component.css

-div, elements-term, elements-guacamole, elements-settings {
+div, elements-term, elements-guacamole {
   height: 100%;
 }
 
-elements-term, elements-guacamole, elements-settings {
+elements-term, elements-guacamole {
   /*padding-bottom: 30px;*/
 }
 

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

 import {Component, OnInit, Input} from '@angular/core';
-import {View} from '../content/model';
+import {View} from '@app/model';
 
 @Component({
   selector: 'elements-content-window',

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

-<div id="content" fxLayout="column" ngxSplit="column">
-  <div fxFlex="0 0 30px">
-    <div class="scroll-button" style="padding: 0 5px">
+<div id="content">
+  <div>
+    <div class="scroll-button">
       <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>
@@ -13,9 +13,9 @@
       </ul>
     </div>
   </div>
-  <div fxFlex="1 1 calc(100%-30px)" id="winContainer">
+  <div id="winContainer">
     <elements-content-window *ngFor="let view of viewList" [view]="view" ></elements-content-window>
   </div>
 </div>
 
-<elements-connect [ngStyle]="{'display': none}" (onNewView)="onNewView($event)" ></elements-connect>
+<elements-connect [ngStyle]="{'display': 'none'}" (onNewView)="onNewView($event)" ></elements-connect>

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

@@ -13,6 +13,7 @@
   display: inline-block;
   min-width: 100%;
   padding-left: 0;
+  margin: 0;
 }
 /*
  *  scrollbar
@@ -36,7 +37,8 @@
   height: 30px;
   overflow: hidden;
   background-color: #3a3333;
-  color: white
+  color: white;
+  padding: 0 5px;
 }
 
 .scroll-button a.disabled {
@@ -44,7 +46,14 @@
   cursor: not-allowed;
 }
 
-
-.window {
+#content {
   height: 100%;
 }
+
+#winContainer {
+  height: calc(100% - 30px);
+}
+//
+//.window {
+//  height: 100%;
+//}

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

 import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
-import {View, ViewAction} from './model';
+import {View, ViewAction} from '@app/model';
 
 @Component({
   selector: 'elements-content',
@@ -7,8 +7,8 @@ import {View, ViewAction} from './model';
   styleUrls: ['./content.component.scss']
 })
 export class ElementContentComponent implements OnInit {
-  viewList: Array<View> = [];
   @ViewChild('tabs') tabsRef: ElementRef;
+  viewList: Array<View> = [];
 
   static DisconnectAll() {
   }

src/app/elements/content/model.ts

-export class View {
-  id: string;
-  nick: string;
-  type: string;
-  editable: boolean;
-  active: boolean;
-  connected: boolean;
-  hide: boolean;
-  closed: boolean;
-  host: any;
-  user: any;
-  remoteApp: string;
-  room: string;
-  Rdp: any;
-  Term: any;
-}
-
-export class ViewAction {
-  view: View;
-  name: string;
-
-  constructor(view: View, name: string) {
-    this.view = view;
-    this.name = name;
-  }
-}

src/app/elements/dialog/dialog.service.ts

 import {Component, Inject, Injectable, OnInit} from '@angular/core';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
-import {LogService} from '../../app.service';
+import {LogService} from '@app/app.service';
 import {FormControl, Validators} from '@angular/forms';
 
 // import * as layer from 'layui-layer/src/layer.js';

src/app/elements/elements.component.ts

@@ -6,7 +6,6 @@ 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 {ElementOfooterComponent} from './ofooter/ofooter.component';
 import {ElementFooterComponent} from './footer/footer.component';
 import {ElementTermComponent} from './term/term.component';
 import {ElementInteractiveComponent} from './interactive/interactive.component';
@@ -28,7 +27,6 @@ export const ElementComponents = [
   ElementContentViewComponent,
   ElementConnectComponent,
   ElementTreeFilterComponent,
-  ElementOfooterComponent,
   ElementTableComponent,
   ElementFooterComponent,
   ElementTermComponent,

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

@@ -5,9 +5,9 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService, LogService} from '../../app.service';
-import {DataStore, User} from '../../globals';
-import {version} from '../../../environments/environment';
+import {AppService, LogService} from '@app/app.service';
+import {DataStore, User} from '@app/globals';
+import {version} from '@src/environments/environment';
 
 @Component({
   selector: 'elements-footer',

src/app/elements/guacamole/guacamole.component.html

-<!--<iframe #rdp [src]="trust('https://inews.gtimg.com/newsapp_bt/0/3460971429/1000')"  width="100%" height="100%" (mouseenter)="active()"></iframe>-->
+<div class="rdpIframe">
   <iframe #rdpRef *ngIf="target" [src]="trust(target)" width="100%" height="100%" (mouseenter)="active()"></iframe>
+</div>

src/app/elements/guacamole/guacamole.component.scss

@@ -2,3 +2,7 @@ iframe {
   border: none;
   background-color: white;
 }
+
+.rdpIframe {
+ height: 100%;
+}

src/app/elements/guacamole/guacamole.component.ts

 import {Component, ElementRef, Input, OnInit, ViewChild} from '@angular/core';
 import {CookieService} from 'ngx-cookie-service';
-import {HttpService, LogService} from '../../app.service';
-import {DataStore, User} from '../../globals';
+import {HttpService, LogService} from '@app/app.service';
+import {DataStore, User} from '@app/globals';
 import {DomSanitizer} from '@angular/platform-browser';
-import {View} from '../content/model';
+import {View} from '@app/model';
 
 @Component({
   selector: 'elements-guacamole',

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

-<div class="sidebar" fxLayout="column" ngxSplit="column">
+<div class="sidebar" fxLayout="column" >
   <div fxflex="1 1 30px" class="tree-filter">
     <elements-tree-filter ></elements-tree-filter>
   </div>
-  <div class="overflow ngx-scroll-overlay" fxflex="1 1 calc(90%-60px)">
+  <div class="overflow ngx-scroll-overlay" fxflex="1 1 calc(100% - 60px)">
     <elements-asset-tree ></elements-asset-tree>
   </div>
 

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

@@ -3,10 +3,6 @@
   width: 100%;
   overflow: auto;
 }
-//
-//:root {
-//  font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
-//}
 
 label {
   margin-bottom: 0;
@@ -16,14 +12,10 @@ label {
   content: "\f26c";
 }
 
-.tree-filter {
-  height: 30px;
-}
-
 .overflow {
-  height: 90%;
   display: flex;
   width: 100%;
+  height: 100%;
   float: left;
   position: inherit;
   background: #2f2a2a;
@@ -38,7 +30,7 @@ label {
   padding: 1px 20px 0 20px;
   border-top: 1px solid #e7eaec;
   bottom: 0;
-  height: 60px;
+  height: 30px;
 }
 
 .footer-version > p {
@@ -49,23 +41,6 @@ label {
   color: #d6cbcb;
 }
 
-//@import "~@swimlane/ngx-ui/release/styles/components/scrollbars";
-
 .ngx-scroll-overlay {
   overflow: auto; // for FF
 }
-
-//.sidebar::-webkit-scrollbar-track {
-//  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.3);
-//  background-color: #676a6c;
-//}
-//
-//.sidebar::-webkit-scrollbar {
-//  width: 8px;
-//}
-//
-//.sidebar::-webkit-scrollbar-thumb {
-//  background-color: #F5F5F5;
-//  border-radius: 6px;
-//  border: 2px solid transparent;
-//}

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

 import {Component, Inject, OnInit, ViewChild, ElementRef} from '@angular/core';
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '@app/app.service';
 // import {ElementTreeFilterComponent} from '../tree-filter/tree-filter.component';
-import {DataStore} from '../../globals';
-import {version} from '../../../environments/environment';
+import {DataStore} from '@app/globals';
+import {version} from '@src/environments/environment';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 
 

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

 .nav {
   display: block;
-  height: 31px;
-  padding-top: 2px;
+  height: 30px;
+  padding-top: 0;
   background-color: #463e3e;
+  list-style: none;
 }
 
 .nav ul {
   list-style-type: none;
   line-height: 24px;
+  margin: 0;
+  box-sizing: border-box;
+  font-weight: 400;
+  text-align: left;
 }
 
 .nav li {
   display: inline-block;
 }
 
-.nav a {
+.nav .dropdown a {
   color: #f0f0f1;
   font-family: Roboto,sans-serif;
   font-size: 13px;
   font-weight: 300;
   text-decoration: none;
-  padding: 6px 15px 6px 15px;
+  padding: 6px 15px;
+  height: 30px;
 }
 
 .nav a:hover {

src/app/elements/nav/nav.component.html

-<script src="../../trans.pipe.spec.ts"></script>
 <div class="nav">
-  <ul>
-    <li><a href="/"><img src="static/imgs/logo.png" height="26px"/></a>
+  <ul class="nav-main">
+    <li>
+      <a href="/"><img src="static/imgs/logo.png" height="26px"/></a>
     </li>
-    <li *ngFor="let v of navs" [ngClass]="{'dropdown': v.children}">
+    <li *ngFor="let v of navs" [ngClass]="{'dropdown': v.children}" >
       <a>{{v.name|trans}}</a>
       <ul [ngClass]="{'dropdown-content': v.children}">
         <li *ngFor="let vv of v.children" [ngClass]="{'disabled': vv.disable}">

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

@@ -6,8 +6,8 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, Inject, OnInit} from '@angular/core';
-import {HttpService, LocalStorageService, NavService, LogService} from '../../app.service';
-import {DataStore, i18n} from '../../globals';
+import {HttpService, LocalStorageService, NavService, LogService} from '@app/app.service';
+import {DataStore, i18n} from '@app/globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 declare let layer: any;
@@ -19,7 +19,7 @@ declare let layer: any;
 })
 export class ElementNavComponent implements OnInit {
   DataStore = DataStore;
-  navs: Array<object>;
+  navs: Array<any>;
   _asyncTree = false;
 
   static Hide() {
@@ -215,26 +215,6 @@ export class ElementNavComponent implements OnInit {
 
   getNav() {
     return [{
-      'id': 'File',
-      'name': 'Server',
-      'children': [
-        {
-          'id': 'Disconnect',
-          'click': 'Disconnect',
-          'name': 'Disconnect'
-        },
-        {
-          'id': 'DisconnectAll',
-          'click': 'DisconnectAll',
-          'name': 'Disconnect all'
-        },
-        {
-          'id': 'Reconnect',
-          'click': 'Reconnect',
-          'name': 'Reconnect'
-        },
-      ]
-    }, {
       'id': 'FileManager',
       'name': 'File Manager',
       'children': [

src/app/elements/ofooter/ofooter.component.html

-<div class="footer fixed">
-    <div class="pull-right">
-        Version <strong>{{version}}</strong> GPLv2.
-        <img style="display: none" src="http://www.jumpserver.org/img/evaluate_avatar1.jpg">
-    </div>
-    <div>
-        <strong>Copyright</strong> 北京堆栈科技有限公司 &copy; 2014-2018
-    </div>
-</div>

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

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

src/app/elements/ofooter/ofooter.component.ts

-import {Component, OnInit} from '@angular/core';
-import {version} from '../../../environments/environment';
-import {DataStore} from '../../globals';
-
-@Component({
-  selector: 'elements-ofooter',
-  templateUrl: './ofooter.component.html',
-  styleUrls: ['./ofooter.component.scss']
-})
-export class ElementOfooterComponent implements OnInit {
-  version = version;
-
-  constructor() {
-    DataStore.NavShow = false;
-  }
-
-  ngOnInit() {
-  }
-
-}

src/app/elements/rdp/rdp.component.ts

@@ -6,7 +6,7 @@
  */
 import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {DataStore} from '../../globals';
+import {DataStore} from '@app/globals';
 
 declare let Mstsc: any;
 

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

 import {Component, OnInit, Input, ElementRef, ViewChild} from '@angular/core';
-import {DataStore} from '../../globals';
+import {DataStore} from '@app/globals';
 import {DomSanitizer} from '@angular/platform-browser';
 
 @Component({

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

 import {Component, Input, OnInit, OnDestroy } from '@angular/core';
 import {Terminal} from 'xterm';
-import {View} from '../content/model';
-import {LogService, UUIDService} from '../../app.service';
-import {Socket} from '../../utils/socket';
-import {getWsSocket, translate} from '../../globals';
+import {View} from '@app/model';
+import {LogService, UUIDService} from '@app/app.service';
+import {Socket} from '@app/utils/socket';
+import {getWsSocket, translate} from '@app/globals';
 
 
 @Component({

src/app/elements/table/table.component.ts

 import {Component, Input, OnInit, ViewChild} from '@angular/core';
 import {DatatableComponent} from '@swimlane/ngx-datatable';
 import {MatPaginator} from '@angular/material';
-import {LogService} from '../../app.service';
+import {LogService} from '@app/app.service';
 
 export let Config: {
   search: boolean,

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

@@ -2,6 +2,7 @@ import {AfterViewInit, Component, Input, Output, OnInit, ViewChild, EventEmitter
 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 * as $ from 'jquery/dist/jquery.min.js';
 import 'rxjs/Observable';
@@ -21,6 +22,10 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
   @Output() winSizeChangeTrigger = new EventEmitter<Array<number>>();
   winSizeChange$: Observable<any>;
 
+  constructor(private _logger: LogService){
+
+  }
+
   ngOnInit() {
     this.winSizeChange$ = Observable.fromEvent(window, 'resize')
       .debounceTime(500)
@@ -61,7 +66,7 @@ export class ElementTermComponent implements OnInit, AfterViewInit {
     const dimensions = (<any>this.term).renderer.dimensions;
     const geometry = [
       Math.floor(availableWidth / dimensions.actualCellWidth) - 1,
-      Math.floor(availableHeight / dimensions.actualCellHeight) - 2
+      Math.floor(availableHeight / dimensions.actualCellHeight) - 1
     ];
 
     if (!isFinite(geometry[0])) {

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

@@ -2,15 +2,31 @@ import {Component, OnInit, Pipe, PipeTransform} from '@angular/core';
 import {FormControl} from '@angular/forms';
 import {debounceTime, distinctUntilChanged} from 'rxjs/operators';
 
-import {LogService, TreeFilterService} from '../../app.service';
+import {LogService, TreeFilterService} from '@app/app.service';
+
+
+@Pipe({name: 'SearchFilter'})
+export class SearchFilter implements PipeTransform {
+  transform(value: any, input: string) {
+    if (input) {
+      input = input.toLowerCase();
+      return value.filter(function (el: any) {
+        // ToDo: search with a simple SQL like language, and a bug search a group's hosts
+        return JSON.stringify(el).toLowerCase().indexOf(input) > -1;
+      });
+    }
+    return value;
+  }
+}
 
 @Component({
   selector: 'elements-tree-filter',
   templateUrl: './tree-filter.component.html',
   styleUrls: ['./tree-filter.component.css'],
+  providers: [SearchFilter],
 })
 export class ElementTreeFilterComponent implements OnInit {
-  private searchControl: FormControl;
+  searchControl: FormControl;
   private debounce = 400;
 
   constructor(private _treeFilterService: TreeFilterService,
@@ -29,16 +45,3 @@ export class ElementTreeFilterComponent implements OnInit {
 }
 
 
-@Pipe({name: 'SearchFilter'})
-export class SearchFilter implements PipeTransform {
-  transform(value: any, input: string) {
-    if (input) {
-      input = input.toLowerCase();
-      return value.filter(function (el: any) {
-        // ToDo: search with a simple SQL like language, and a bug search a group's hosts
-        return JSON.stringify(el).toLowerCase().indexOf(input) > -1;
-      });
-    }
-    return value;
-  }
-}

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

 import {Component, Input, OnInit} from '@angular/core';
-import {HttpService} from '../../app.service';
+import {HttpService} from '@app/app.service';
 
 export interface Assets {
   name: string;

src/app/globals.ts

@@ -26,8 +26,8 @@ export const DataStore: _DataStore = {
   msg: {},
   logLevel: 4,
   showLeftBar: true,
-  windowsize: [],
-  autologin: false,
+  windowSize: [],
+  autoLogin: false,
   guacamoleToken: '',
   guacamoleTokenTime: 0
 };

src/app/model.ts

@@ -91,6 +91,33 @@ export class NavEvt {
 
 }
 
+export class View {
+  id: string;
+  nick: string;
+  type: string;
+  editable: boolean;
+  active: boolean;
+  connected: boolean;
+  hide: boolean;
+  closed: boolean;
+  host: any;
+  user: any;
+  remoteApp: string;
+  room: string;
+  Rdp: any;
+  Term: any;
+}
+
+export class ViewAction {
+  view: View;
+  name: string;
+
+  constructor(view: View, name: string) {
+    this.view = view;
+    this.name = name;
+  }
+}
+
 export class DataStore {
   socket: any;
   Nav: Array<object>;
@@ -100,8 +127,8 @@ export class DataStore {
   msg: {};
   logLevel: number;
   showLeftBar = true;
-  windowsize: Array<number>;
-  autologin: boolean;
+  windowSize: Array<number>;
+  autoLogin: boolean;
   guacamoleToken: string;
   guacamoleTokenTime: number;
 
@@ -139,7 +166,7 @@ export class Video {
   height: number;
   width: number;
   json: object;
-  timelist: Array<number>;
+  timeList: Array<number>;
   totalTime: number;
 }
 
@@ -149,3 +176,4 @@ export class Monitor {
   type: string;
 }
 
+

src/app/pages/blank/blank.component.ts

 import {Component, OnInit} from '@angular/core';
-import {DataStore} from '../../globals';
+import {DataStore} from '@app/globals';
 
 @Component({
   selector: 'pages-blank',

src/app/pages/connect/connect.component.ts

 import {Component, OnInit} from '@angular/core';
-import {AppService, HttpService, LocalStorageService} from '../../app.service';
-import {DataStore} from '../../globals';
+import {AppService, HttpService, LocalStorageService} from '@app/app.service';
+import {DataStore} from '@app/globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({

src/app/pages/login/login.component.ts

@@ -6,10 +6,10 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '@app/app.service';
 import {NgForm} from '@angular/forms';
 import {Router} from '@angular/router';
-import {DataStore, User} from '../../globals';
+import {DataStore, User} from '@app/globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({

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

-div {
+.content {
   height: 100%;
   width: 100%;
   padding: 0;
   background-color: #1f1b1b;
+  /*background-color: red;*/
   margin: 0;
   position: initial;
 }
 
+/*.content {*/
+  /*overflow: hidden !important;*/
+/*}*/
+
 elements-nav {
   height: 30px;
 }
 
 #container {
-  padding-top: 0;
+  padding: 0;
+  margin: 0;
   height: calc(100% - 30px);
 }
 
-
 /*.container-fluid {*/
   /*padding-top: 30px;*/
 /*}*/

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

 <elements-nav></elements-nav>
-<div id="container" class="container-fluid row" fxLayout="row" ngxSplit="row">
+<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">
     <elements-left-bar></elements-left-bar>
   </div>

src/app/pages/main/main.component.ts

 import {Component, HostListener, OnInit} from '@angular/core';
-import {DataStore, User} from '../../globals';
-import {environment} from '../../../environments/environment';
+import {DataStore, User} from '@app/globals';
+import {environment} from '@src/environments/environment';
 
 @Component({
   selector: 'pages-main',

src/app/pages/monitor/linux/linux.component.ts

 import {Component, OnInit} from '@angular/core';
-import {Monitor} from '../../../globals';
+import {Monitor} from '@app/globals';
 
 @Component({
   selector: 'pages-monitor-linux',

src/app/pages/monitor/monitor.component.ts

 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {DataStore, Monitor} from '../../globals';
+import {DataStore, Monitor} from '@app/globals';
 
 @Component({
   selector: 'pages-monitor',

src/app/pages/not-found/not-found.component.ts

 import {Component, OnInit} from '@angular/core';
-import {DataStore} from '../../globals';
+import {DataStore} from '@app/globals';
 
 @Component({
   selector: 'pages-not-found',

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

 import {Component, Input, OnInit} from '@angular/core';
 import {Terminal} from 'xterm';
-import {HttpService, LogService} from '../../../app.service';
+import {HttpService, LogService} from '@app/app.service';
 import {Replay} from '../replay.model';
 
 function zeroPad(num, minLength) {

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

 import {Component, OnInit} from '@angular/core';
 import {ActivatedRoute, Params} from '@angular/router';
-import {HttpService, LogService} from '../../app.service';
-import {DataStore} from '../../globals';
+import {HttpService, LogService} from '@app/app.service';
+import {DataStore} from '@app/globals';
 import {Replay} from './replay.model';
 
 @Component({

src/app/pipes/pipes.ts

 import {TransPipe} from './trans.pipe';
 import {UtcDatePipe} from './date.pipe';
 import {TruncatecharsPipe} from './truncatechars.pipe';
+import {SearchFilter} from '@app/elements/tree-filter/tree-filter.component';
 
 export const Pipes = [
   UtcDatePipe,
   TransPipe,
-  TruncatecharsPipe
+  TruncatecharsPipe,
+  SearchFilter
 ];

src/assets/123.json

-{
-  "hello": "world"
-}

src/sass/style.scss

@@ -3,6 +3,7 @@ $fa-font-path: '~font-awesome/fonts';
 @import '~font-awesome/scss/font-awesome';
 
 // bootstrap
+// Todo: 去掉依赖
 @import '~bootstrap/scss/bootstrap';
 
 $FontPathOpenSans: '~npm-font-open-sans/fonts';
@@ -17,6 +18,7 @@ $roboto-font-path: '~roboto-fontface/fonts';
  *
 */
 $asset-path: '../static/imgs/inspinia';
+// Todo: 去掉依赖
 @import '../assets/inspinia/style';
 
 @import '~@swimlane/ngx-datatable/release/index.css';

src/styles.css

@@ -10,6 +10,7 @@ body {
   width: 100%;
   background-color: rgb(243, 243, 244);
   overflow-y: hidden;
+  margin: 0;
 }
 
 app-root {

tools/build.sh

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

tsconfig.json

 {
   "compileOnSave": false,
   "compilerOptions": {
+    "baseUrl": "src",
+    "paths": {
+      "@src/*": ["*"],
+      "@app/*": ["app/*"]
+    },
     "allowJs": true,
     "outDir": "./dist/out-tsc",
     "sourceMap": true,