Merged in dev (pull request #94)

Dev

.angular-cli.json

@@ -24,7 +24,8 @@
         "../node_modules/xterm/dist/xterm.css",
         "../node_modules/elfinder/css/elfinder.min.css",
         "sass/style.scss",
-        "styles.css"
+        "styles.css",
+        "assets/ztree/awesomeStyle/awesome.css"
       ],
       "scripts": [
         "../node_modules/jquery/dist/jquery.min.js",
@@ -35,7 +36,9 @@
         "assets/inspinia/inspinia.js",
         "assets/slimscroll/jquery.slimscroll.min.js",
         "../node_modules/elfinder/js/elfinder.min.js",
-        "../node_modules/xterm/dist/xterm.js"
+        "../node_modules/xterm/dist/xterm.js",
+        "assets/ztree/jquery.ztree.all.min.js",
+        "assets/ztree/jquery.ztree.exhide.min.js"
       ],
       "environmentSource": "environments/environment.ts",
       "environments": {

i18n/zh.json

+cn.json
\ No newline at end of file

package-lock.json

 {
   "name": "luna",
-  "version": "0.5.0",
+  "version": "1.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -231,6 +231,14 @@
         "tslib": "1.8.1"
       }
     },
+    "@angular/flex-layout": {
+      "version": "2.0.0-beta.10-4905443",
+      "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-2.0.0-beta.10-4905443.tgz",
+      "integrity": "sha512-jjr6mQ3X2vdEQbsyHD/mz1hfTBUUEOZVLFWEz/sbNoeU7uiA4lvqdp/ASrkZydGJHmTDUYrbBE/9kx0lherZ8Q==",
+      "requires": {
+        "tslib": "1.8.1"
+      }
+    },
     "@angular/forms": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@angular/forms/-/forms-5.2.0.tgz",
@@ -340,6 +348,27 @@
       "resolved": "https://registry.npmjs.org/@swimlane/ngx-datatable/-/ngx-datatable-11.1.7.tgz",
       "integrity": "sha512-TMDN26Q4J+Sh+OPqAx8BK5Q/3hAAmcTAUQ9wvC9nboSOAmYUaHGz8t21yGdeUtRtunIfMpjTnwLa+X2Pfoq42w=="
     },
+    "@swimlane/ngx-ui": {
+      "version": "20.2.0",
+      "resolved": "https://registry.npmjs.org/@swimlane/ngx-ui/-/ngx-ui-20.2.0.tgz",
+      "integrity": "sha512-GPmuhcsLtogiBrITZUSUVEB8X7EtrmJQ+T5MEQqdA/rPsu6VHMPHmx+Dl+Sf2iUubydJByewRgBHNVyr5L+tMQ==",
+      "requires": {
+        "@angular/flex-layout": "2.0.0-beta.10-4905443",
+        "angular2-moment": "1.8.0",
+        "codemirror": "5.37.0",
+        "moment": "2.22.1",
+        "mousetrap": "1.6.1",
+        "ng2-file-upload": "1.3.0",
+        "normalize.css": "5.0.0"
+      },
+      "dependencies": {
+        "moment": {
+          "version": "2.22.1",
+          "resolved": "https://registry.npmjs.org/moment/-/moment-2.22.1.tgz",
+          "integrity": "sha512-shJkRTSebXvsVqk56I+lkb2latjBs8I+pc2TzWc545y2iFnSjm7Wg0QMh+ZWcdSLQyGEau5jI8ocnmkyTgr9YQ=="
+        }
+      }
+    },
     "@types/jasmine": {
       "version": "2.8.4",
       "resolved": "https://registry.npmjs.org/@types/jasmine/-/jasmine-2.8.4.tgz",
@@ -518,6 +547,14 @@
         }
       }
     },
+    "angular2-moment": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/angular2-moment/-/angular2-moment-1.8.0.tgz",
+      "integrity": "sha512-cBppm4FM9sOtZr4eSnodjbIhvn3bZzuw1VIb3VN53/aWKQVrNosQVG7l0dnX5ifdy08i9Yd/5eGYOXw+Lb63YA==",
+      "requires": {
+        "moment": "2.18.1"
+      }
+    },
     "animate.css": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-3.5.2.tgz",
@@ -1993,6 +2030,11 @@
         "sprintf-js": "1.0.3"
       }
     },
+    "codemirror": {
+      "version": "5.37.0",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-5.37.0.tgz",
+      "integrity": "sha512-dQaayDJCLU4UJcwg2RM44oFrs0dMNndTp6qxQJF6XI71l1xN3RB4IqiKES0b0rccbARbrD/UBB4t8DNknfaOTw=="
+    },
     "collection-visit": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/collection-visit/-/collection-visit-1.0.0.tgz",
@@ -5792,11 +5834,6 @@
       "integrity": "sha1-4g/146KvwmkDILbcVSaCqcf631E=",
       "dev": true
     },
-    "inconsolata": {
-      "version": "0.0.2",
-      "resolved": "https://registry.npmjs.org/inconsolata/-/inconsolata-0.0.2.tgz",
-      "integrity": "sha1-uqFDP0PUKqHtsmvZ7odzjpKSUOs="
-    },
     "indent-string": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/indent-string/-/indent-string-2.1.0.tgz",
@@ -7632,6 +7669,11 @@
       "resolved": "https://registry.npmjs.org/moment/-/moment-2.18.1.tgz",
       "integrity": "sha1-w2GT3Tzhwu7SrbfIAtu8d6gbHA8="
     },
+    "mousetrap": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/mousetrap/-/mousetrap-1.6.1.tgz",
+      "integrity": "sha1-KghfXHUSlMdefoH27CVFspy/Qtk="
+    },
     "move-concurrently": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/move-concurrently/-/move-concurrently-1.0.1.tgz",
@@ -8034,6 +8076,16 @@
         "chart.js": "2.7.1"
       }
     },
+    "ng2-file-tree": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/ng2-file-tree/-/ng2-file-tree-0.4.3.tgz",
+      "integrity": "sha1-gpYDAd2GVlu9XLbirQJg4azElq4="
+    },
+    "ng2-file-upload": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/ng2-file-upload/-/ng2-file-upload-1.3.0.tgz",
+      "integrity": "sha512-Pudxik6LWYsT8hNiEW7RfjgGWAnvfQywxwJYMdt1snTUe+KnlRc/QqPv3QEQW6plXTanuLkYz/TbqilSfSHOsw=="
+    },
     "ngx-bootstrap": {
       "version": "1.9.3",
       "resolved": "https://registry.npmjs.org/ngx-bootstrap/-/ngx-bootstrap-1.9.3.tgz",
@@ -8481,6 +8533,11 @@
       "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
       "dev": true
     },
+    "normalize.css": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/normalize.css/-/normalize.css-5.0.0.tgz",
+      "integrity": "sha1-fOyHXOgXilMzxN6Ato6pwYudfDc="
+    },
     "npm-font-open-sans": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/npm-font-open-sans/-/npm-font-open-sans-1.1.0.tgz",

package.json

@@ -24,6 +24,7 @@
     "@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",
     "body-parser": "^1.18.2",
@@ -47,6 +48,7 @@
     "metismenu": "^2.5.0",
     "mstsc.js": "^0.2.4",
     "ng2-charts": "^1.5.0",
+    "ng2-file-tree": "^0.4.3",
     "ngx-bootstrap": "^1.6.6",
     "ngx-cookie-service": "^1.0.10",
     "ngx-layer": "0.0.4",

proxy.conf.json

@@ -4,7 +4,7 @@
     "secure": false
   },
   "/luna/i18n": {
-    "target": "http://127.0.0.1:5000",
+    "target": "http://127.0.0.1:8088",
     "secure": false
   },
   "/socket.io/": {

src/app/ControlPage/cleftbar/cleftbar.component.html

-<div id="sidebar">
-  <div class="search">
-    <input class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q" autocomplete="off"
-           title="Search"
-           type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
-  </div>
-  <div class="overflow">
-    <ul class="filetree">
-      <li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">
-        <input type="checkbox" id="hostgroup-{{i}}">
-        <label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>
-        <ul [ngClass]="{'insearch': q }">
-          <li *ngFor="let host of hostGroup.assets_granted | SearchFilter: q" (click)="Connect(host)"
-              (contextmenu)="onRightClick($event)" matTooltip="{{host.hostname}}"
-              [matTooltipPosition]="TooltipPosition">
-            <i class="fa" [ngClass]="'fa-'+(host.platform||'undefined').toLowerCase()" id="fa-{{i}}"></i>
-            {{host.hostname}}
-          </li>
-        </ul>
-      </li>
-    </ul>
-  </div>
-
-</div>
-<div class="footer">
-  Version <strong>{{version}}</strong>
-</div>
-<!--<app-element-server-menu></app-element-server-menu>-->

src/app/ControlPage/control/control.component.html

-<app-controlnav></app-controlnav>
-<div *ngFor="let m of NavList.List;let i=index"
-     [ngClass]="{'active':i==NavList.Active}"
->
-  <app-element-term [host]="m.host"
-                    [userid]="m.user.id"
-                    [index]="i"
-                    *ngIf="m.type=='ssh'">
-  </app-element-term>
-  <app-element-guacamole [host]="m.host"
-                      [userid]="m.user.id"
-                      [index]="i"
-                      *ngIf="m.type=='rdp'">
-  </app-element-guacamole>
-</div>

src/app/ControlPage/control/controlnav/controlnav.component.spec.ts

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

src/app/ControlPage/controlpage.component.html

-<div class="container-fluid row">
-  <app-cleftbar class="col-md-2" *ngIf="DataStore.leftbarshow"></app-cleftbar>
-  <app-control [ngClass]="{'col-md-10':DataStore.leftbarshow,'col-md-12':!DataStore.leftbarshow}"></app-control>
-</div>

src/app/IndexPage/index-page.component.spec.ts

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

src/app/app-routing.module.ts

-/**
- * app路由
- *
- *
- * @date     2017-11-07
- * @author   liuzheng <liuzheng712@gmail.com>
- */
-import {NgModule} from '@angular/core';
-import {RouterModule, Routes} from '@angular/router';
-import {environment} from '../environments/environment';
-
-import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
-import {LoginComponent} from './BasicPage/login/login.component';
-import {ControlPageComponent} from './ControlPage/controlpage.component';
-import {ReplayPageComponent} from './replay-page/replay-page.component';
-import {MonitorPageComponent} from './monitor-page/monitor-page.component';
-import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
-import {BlankPageComponent} from './blank-page/blank-page.component';
-import {TestPageComponent} from './test-page/test-page.component';
-import {SettingPageComponent} from './setting-page/setting-page.component';
-import {ConnectPageComponent} from './connect-page/connect-page.component';
-
-const appRoutes: Routes = [
-  // {path: 'users/login', component: LoginComponent},
-  {path: 'replay/:token', component: ReplayPageComponent},
-  {path: 'monitor/:token', component: MonitorPageComponent},
-  // {path: 'test', component: TestPageComponent},
-  {path: 'connect', component: ConnectPageComponent},
-  // {path: 'setting', component: SettingPageComponent},
-  {path: 'undefined', component: BlankPageComponent},
-  {path: '', component: ControlPageComponent},
-  {path: '**', component: NotFoundComponent}
-];
-
-@NgModule({
-  imports: [
-    RouterModule.forRoot(
-      appRoutes,
-      {enableTracing: !environment.production} // <-- debugging purposes only
-    )
-  ],
-  exports: [
-    RouterModule
-  ]
-})
-export class AppRoutingModule {
-}

src/app/app.module.ts

@@ -11,122 +11,55 @@ import {FormsModule, ReactiveFormsModule} from '@angular/forms'; // <-- NgModel
 import {LoggerModule, NGXLogger, NgxLoggerLevel} from 'ngx-logger';
 import {HttpClientModule} from '@angular/common/http';
 
-import {AppRoutingModule} from './app-routing.module';
+import {AppRouterModule} from './router/router.module';
 
-import {AppComponent} from './app.component';
+import {AppComponent} from './pages/app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
 // service
 import {AppService, HttpService, LocalStorageService, LogService, UUIDService} from './app.service';
-import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
 
-// Elements
-import {ElementFooterComponent} from './elements/footer/footer.component';
-import {ElementTermComponent} from './elements/term/term.component';
-import {ElementInteractiveComponent} from './elements/interactive/interactive.component';
-import {ChangLanWarningDialogComponent, ElementNavComponent} from './elements/nav/nav.component';
-import {ElementPopupComponent} from './elements/popup/popup.component';
-import {ElementRdpComponent} from './elements/rdp/rdp.component';
-import {ElementServerMenuComponent} from './elements/server-menu/server-menu.component';
-import {ElementIframeComponent} from './elements/iframe/iframe.component';
-import {ElementElfinderComponent} from './elements/elfinder/elfinder.component';
 
-// pages
-import {LoginComponent} from './BasicPage/login/login.component';
-import {IleftbarComponent} from './IndexPage/ileftbar/ileftbar.component';
-import {SearchComponent, SearchFilter} from './ControlPage/search/search.component';
-import {CleftbarComponent, CleftbarDialogComponent} from './ControlPage/cleftbar/cleftbar.component';
-import {ControlComponent} from './ControlPage/control/control.component';
-import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.component';
-import {ControlPageComponent} from './ControlPage/controlpage.component';
-import {IndexPageComponent} from './IndexPage/index-page.component';
-import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
-import {ReplayPageComponent} from './replay-page/replay-page.component';
-import {Mp4Component} from './replay-page/mp4/mp4.component';
-import {JsonComponent} from './replay-page/json/json.component';
-import {UtcDatePipe} from './app.pipe';
-import {MonitorPageComponent} from './monitor-page/monitor-page.component';
-import {LinuxComponent} from './monitor-page/linux/linux.component';
-import {WindowsComponent} from './monitor-page/windows/windows.component';
 import {NgProgressModule} from 'ngx-progressbar';
-import {TestPageComponent} from './test-page/test-page.component';
-import {BlankPageComponent} from './blank-page/blank-page.component';
-import {MaterialModule} from './MaterialModule.component';
 import {CookieService} from 'ngx-cookie-service';
 import {NgxDatatableModule} from '@swimlane/ngx-datatable';
-import {ElementTableComponent} from './elements/table/table.component';
-import {SettingPageComponent} from './setting-page/setting-page.component';
-import {ElementLeftbarComponent} from './elements/leftbar/leftbar.component';
-import {ElementOfooterComponent} from './elements/ofooter/ofooter.component';
-import {SettingPageBasicComponent} from './setting-page/basic/basic.component';
-import {SettingPageEmailComponent} from './setting-page/email/email.component';
-import {SettingPageLdapComponent} from './setting-page/ldap/ldap.component';
-import {SettingPageTerminalComponent} from './setting-page/terminal/terminal.component';
-import {SettingPageS3Component} from './setting-page/s3/s3.component';
-import {TransPipe} from './trans.pipe';
 import {MAT_LABEL_GLOBAL_OPTIONS} from '@angular/material';
-import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.component';
-import {ConnectPageComponent} from './connect-page/connect-page.component';
+
+
+import {Pipes} from './pipes/pipes';
+import {PagesComponents} from './pages/pages.component';
+import {ElementComponents} from './elements/elements.component';
+import {ChangLanWarningDialogComponent} from './elements/nav/nav.component';
+import {DialogService, ElementDialogAlertComponent} from './elements/dialog/dialog.service';
+import {PluginModules} from './plugins/plugins';
+import {TestPageComponent} from './test-page/test-page.component';
+import {Ng2FileTreeModule} from 'ng2-file-tree/ng2-file-tree';
+import {AssetTreeDialogComponent} from './elements/asset-tree/asset-tree.component';
+
 
 @NgModule({
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     FormsModule,
-    AppRoutingModule,
     NgProgressModule,
     HttpClientModule,
     ReactiveFormsModule,
-    MaterialModule,
     LoggerModule.forRoot({serverLoggingUrl: '/api/logs', level: NgxLoggerLevel.DEBUG, serverLogLevel: NgxLoggerLevel.ERROR}),
-    NgxDatatableModule
+    NgxDatatableModule,
+    AppRouterModule,
+    ...PluginModules,
+    Ng2FileTreeModule
   ],
   declarations: [
     AppComponent,
-    ElementNavComponent, ChangLanWarningDialogComponent,
-    ElementFooterComponent,
-    ElementPopupComponent,
-    ElementTermComponent,
-    ElementInteractiveComponent,
-    ElementRdpComponent,
-    ElementServerMenuComponent,
-    ElementIframeComponent,
-    ElementDialogAlertComponent,
-    ElementTableComponent,
-    ElementLeftbarComponent,
-    ElementOfooterComponent,
-    ElementGuacamoleComponent,
-    ElementElfinderComponent,
-    LoginComponent,
-    SearchComponent,
-    SearchFilter,
-    IleftbarComponent,
-    CleftbarComponent, CleftbarDialogComponent,
-    ControlComponent,
-    ControlnavComponent,
-    ControlPageComponent,
-    IndexPageComponent,
-    NotFoundComponent,
-    ReplayPageComponent,
-    Mp4Component,
-    JsonComponent,
-    UtcDatePipe,
-    MonitorPageComponent,
-    LinuxComponent,
-    WindowsComponent,
     TestPageComponent,
-    BlankPageComponent,
-    SettingPageComponent,
-    SettingPageBasicComponent,
-    SettingPageEmailComponent,
-    SettingPageLdapComponent,
-    SettingPageTerminalComponent,
-    SettingPageS3Component,
-    TransPipe,
-    ConnectPageComponent,
+    ...Pipes,
+    ...ElementComponents,
+    ...PagesComponents
   ],
   entryComponents: [
-    CleftbarDialogComponent,
+    AssetTreeDialogComponent,
     ElementDialogAlertComponent,
     ChangLanWarningDialogComponent,
   ],

src/app/app.service.ts

@@ -14,7 +14,7 @@ import {DataStore, User, Browser, i18n} from './globals';
 import {environment} from '../environments/environment';
 import {HttpClient, HttpHeaders, HttpParams} from '@angular/common/http';
 import {NGXLogger} from 'ngx-logger';
-import {HostGroup} from './ControlPage/cleftbar/cleftbar.component';
+import {HostGroup} from './pages/control/cleftbar/cleftbar.component';
 import * as UUID from 'uuid-js/lib/uuid.js';
 
 declare function unescape(s: string): string;
@@ -126,12 +126,19 @@ export class HttpService {
     return this.http.get('/api/terminal/v1/sessions/' + token + '/replay');
   }
 
+  get_replay_json(token: string) {
+    return this.http.get('/api/terminal/v2/sessions/' + token + '/replay');
+  }
+
+  get_replay_data(src: string) {
+    return this.http.get(src);
+  }
+
   get_user_id_from_token(token: string) {
     const params = new HttpParams()
       .set('user-only', '1')
       .set('token', token);
     return this.http.get('/api/users/v1/connection-token/', {params: params});
-
   }
 
 }

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

+<ul id="ztree" class="ztree"></ul>

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%;
+  background-color: inherit;
+}

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

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

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

+import {Component, Input, OnInit, Inject, SimpleChanges, OnChanges} from '@angular/core';
+import {NavList, View} from '../../pages/control/control/control.component';
+import {AppService, LogService} from '../../app.service';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
+import {FormControl, Validators} from '@angular/forms';
+import {DataStore} from '../../globals';
+import {ElementServerMenuComponent} from '../server-menu/server-menu.component';
+import {DialogService} from '../dialog/dialog.service';
+
+declare var $: any;
+
+@Component({
+  selector: 'elements-asset-tree',
+  templateUrl: './asset-tree.component.html',
+  styleUrls: ['./asset-tree.component.scss']
+})
+export class ElementAssetTreeComponent implements OnInit, OnChanges {
+  @Input() Data: any;
+  @Input() query: string;
+  nodes = [];
+  setting = {
+    view: {
+      dblClickExpand: false,
+      showLine: true
+    },
+    data: {
+      simpleData: {
+        enable: true
+      }
+    },
+    callback: {
+      onClick: this.onCzTreeOnClick.bind(this)
+    },
+  };
+  hiddenNodes: any;
+
+  onCzTreeOnClick(event, treeId, treeNode, clickFlag) {
+    this.Connect(treeNode);
+  }
+
+  constructor(private _appService: AppService,
+              public _dialog: MatDialog,
+              public _logger: LogService) {
+  }
+
+  ngOnInit() {
+    if (this.Data) {
+      this.draw();
+    }
+    // clearInterval(this.timer);
+    //
+    // this.timer = setInterval(() => {
+    //   if (this.Data) {
+    //     this.draw();
+    //     clearInterval(this.timer);
+    //   }
+    // }, 100);
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['Data'] && this.Data) {
+      this.draw();
+    }
+    if (changes['query'] && !changes['query'].firstChange) {
+      this.filter();
+    }
+  }
+
+  draw() {
+    const nodes = {};
+    const assets = {};
+    this.Data.forEach((v, i) => {
+      if (!nodes[v['id']]) {
+        nodes[v['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'],
+          'isParent': true,
+          'open': v['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']]) {
+            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'],
+              'isParent': false,
+              'pId': vvv['id'],
+              'iconSkin': vv['platform'].toLowerCase()
+            });
+            assets[vv['id'] + '@' + vvv['id']] = true;
+          }
+
+        });
+      });
+    });
+    $.fn.zTree.init($('#ztree'), this.setting, this.nodes);
+  }
+
+  Connect(host) {
+    // console.log(host);
+    let user: any;
+    if (host.system_users_granted.length > 1) {
+      user = this.checkPriority(host.system_users_granted);
+      if (user) {
+        this.login(host, user);
+      } else {
+        const dialogRef = this._dialog.open(AssetTreeDialogComponent, {
+          height: '200px',
+          width: '300px',
+          data: {users: host.system_users_granted}
+        });
+
+        dialogRef.afterClosed().subscribe(result => {
+          if (result) {
+            for (const i of host.system_users_granted) {
+              if (i.id.toString() === result.toString()) {
+                user = i;
+                break;
+              }
+            }
+            this.login(host, user);
+          }
+        });
+      }
+    } else if (host.system_users_granted.length === 1) {
+      user = host.system_users_granted[0];
+      this.login(host, user);
+    }
+  }
+
+  // autologin() {
+  //   const asset_id = this._appService.getQueryString('asset_id');
+  //   const user_id = this._appService.getQueryString('user_id');
+  //   let tag = false;
+  //   if (asset_id) {
+  //     for (let g of this.Data) {
+  //       if (g['assets_granted']) {
+  //         for (let host of g['assets_granted']) {
+  //           if (host.id.toString() === asset_id) {
+  //             if (user_id) {
+  //               host['system_users_granted'].forEach((user, kk) => {
+  //                 if (user.id.toString() === user_id.toString()) {
+  //                   this.login(host, user);
+  //                   tag = true;
+  //                   return;
+  //                 }
+  //               });
+  //             } else {
+  //               this.Connect(host);
+  //               tag = true;
+  //               return;
+  //             }
+  //           }
+  //         }
+  //       }
+  //     }
+  //     if (!tag) {
+  //       this._layer.alert('Maybe you do not have permission on that host');
+  //     }
+  //   }
+  //   DataStore.autologin = true;
+  // }
+
+  login(host, user) {
+    const id = NavList.List.length - 1;
+    this._logger.debug(NavList);
+    this._logger.debug(host);
+    if (user) {
+      NavList.List[id].nick = host.name;
+      NavList.List[id].connected = true;
+      NavList.List[id].edit = false;
+      NavList.List[id].closed = false;
+      NavList.List[id].host = host;
+      NavList.List[id].user = user;
+      if (user.protocol === 'ssh') {
+        NavList.List[id].type = 'ssh';
+      } else if (user.protocol === 'rdp') {
+        NavList.List[id].type = 'rdp';
+      }
+      NavList.List.push(new View());
+      NavList.Active = id;
+    }
+    this._logger.debug(NavList);
+  }
+
+  checkPriority(sysUsers) {
+    let priority = -1;
+    let user: any;
+    for (const u of sysUsers) {
+      if (u.priority > priority) {
+        user = u;
+        priority = u.priority;
+      } else if (u.priority === priority) {
+        return null;
+      }
+    }
+    return user;
+  }
+
+  filter() {
+    const zTreeObj = $.fn.zTree.getZTreeObj('ztree');
+    zTreeObj.showNodes(this.hiddenNodes);
+
+    function filterFunc(node) {
+      const _keywords = $('#keyword').val();
+      if (node.isParent || node.name.indexOf(_keywords) !== -1) {
+        return false;
+      }
+      return true;
+    }
+
+    this.hiddenNodes = zTreeObj.getNodesByFilter(filterFunc);
+
+    zTreeObj.hideNodes(this.hiddenNodes);
+    zTreeObj.expandAll(true);
+  }
+}
+
+
+@Component({
+  selector: 'elements-asset-tree-dialog',
+  templateUrl: 'dialog.html',
+})
+export class AssetTreeDialogComponent implements OnInit {
+  UserSelectControl = new FormControl('', [Validators.required]);
+  selected: any;
+
+  constructor(public dialogRef: MatDialogRef<AssetTreeDialogComponent>,
+              @Inject(MAT_DIALOG_DATA) public data: any,
+              private _logger: LogService) {
+  }
+
+  ngOnInit() {
+    this.selected = this.data.users[0].id;
+    this.UserSelectControl.setValue(this.selected);
+    // this._logger.debug(this.UserSelectControl);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;
+
+  compareByValue(f1: any, f2: any) {
+    return f1 && f2 && f1.value === f2.value;
+  }
+}

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

@@ -43,7 +43,7 @@ export class DialogService {
 
 
 @Component({
-  selector: 'app-alert',
+  selector: 'elements-alert',
   templateUrl: 'alert.html',
   styleUrls: ['./alert.scss']
 })

src/app/elements/elements.component.ts

+// Elements
+import {ElementTableComponent} from './table/table.component';
+import {ElementLeftbarComponent} from './leftbar/leftbar.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';
+import {ChangLanWarningDialogComponent, ElementNavComponent} from './nav/nav.component';
+import {ElementPopupComponent} from './popup/popup.component';
+import {ElementRdpComponent} from './rdp/rdp.component';
+import {ElementServerMenuComponent} from './server-menu/server-menu.component';
+import {ElementIframeComponent} from './iframe/iframe.component';
+import {ElementElfinderComponent} from './elfinder/elfinder.component';
+import {ElementSettingsComponent} from './settings/settings.component';
+import {ElementDialogAlertComponent} from './dialog/dialog.service';
+import {ElementGuacamoleComponent} from './guacamole/guacamole.component';
+import {AssetTreeDialogComponent, ElementAssetTreeComponent} from './asset-tree/asset-tree.component';
+
+export const ElementComponents = [
+  ElementLeftbarComponent,
+  ElementOfooterComponent,
+  ElementTableComponent,
+  ElementFooterComponent,
+  ElementTermComponent,
+  ElementInteractiveComponent,
+  ElementNavComponent, ChangLanWarningDialogComponent,
+  ElementPopupComponent,
+  ElementRdpComponent,
+  ElementServerMenuComponent,
+  ElementIframeComponent,
+  ElementElfinderComponent,
+  ElementSettingsComponent,
+  ElementDialogAlertComponent,
+  ElementGuacamoleComponent,
+  ElementAssetTreeComponent,
+  AssetTreeDialogComponent
+];

src/app/elements/elfinder/elfinder.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 // import * as elfinder from 'elfinder/js/elfinder.min.js';
 
 @Component({
-  selector: 'app-element-elfinder',
+  selector: 'elements-elfinder',
   templateUrl: './elfinder.component.html',
   styleUrls: ['./elfinder.component.scss']
 })

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

@@ -10,7 +10,7 @@ import {DataStore, User} from '../../globals';
 import {version} from '../../../environments/environment';
 
 @Component({
-  selector: 'app-element-footer',
+  selector: 'elements-footer',
   templateUrl: './footer.component.html',
   styleUrls: ['./footer.component.css']
 })

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

@@ -4,10 +4,10 @@ import {HttpService, LogService} from '../../app.service';
 import {DataStore, User} from '../../globals';
 import {DomSanitizer} from '@angular/platform-browser';
 import {environment} from '../../../environments/environment';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 
 @Component({
-  selector: 'app-element-guacamole',
+  selector: 'elements-guacamole',
   templateUrl: './guacamole.component.html',
   styleUrls: ['./guacamole.component.scss']
 })

src/app/elements/iframe/iframe.component.ts

 import {Component, Input, OnInit} from '@angular/core';
 import {DomSanitizer} from '@angular/platform-browser';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 
 import {User, DataStore} from '../../globals';
 import {HttpService, LogService} from '../../app.service';
@@ -8,7 +8,7 @@ import {environment} from '../../../environments/environment';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
-  selector: 'app-element-iframe',
+  selector: 'elements-iframe',
   templateUrl: './iframe.component.html',
   styleUrls: ['./iframe.component.scss']
 })

src/app/elements/interactive/interactive.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-element-interactive',
+  selector: 'elements-interactive',
   templateUrl: './interactive.component.html',
   styleUrls: ['./interactive.component.scss']
 })

src/app/elements/leftbar/leftbar.component.ts

@@ -3,7 +3,7 @@ import {FormBuilder, FormGroup} from '@angular/forms';
 import {Router} from '@angular/router';
 
 @Component({
-  selector: 'app-element-leftbar',
+  selector: 'elements-leftbar',
   templateUrl: './leftbar.component.html',
   styleUrls: ['./leftbar.component.scss']
 })

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

@@ -7,8 +7,8 @@
  */
 import {Component, Inject, OnInit} from '@angular/core';
 import {AppService, HttpService, LocalStorageService, LogService} from '../../app.service';
-import {CleftbarComponent} from '../../ControlPage/cleftbar/cleftbar.component';
-import {ControlComponent, NavList} from '../../ControlPage/control/control.component';
+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';
@@ -17,7 +17,7 @@ import {FormControl, Validators} from '@angular/forms';
 declare let layer: any;
 
 @Component({
-  selector: 'app-element-nav',
+  selector: 'elements-nav',
   templateUrl: './nav.component.html',
   styleUrls: ['./nav.component.css'],
 })
@@ -26,7 +26,7 @@ export class ElementNavComponent implements OnInit {
   ChangeLanWarningDialog: any;
 
   static Hide() {
-    jQuery('app-element-nav').hide();
+    jQuery('elements-nav').hide();
   }
 
   constructor(private _appService: AppService,
@@ -53,6 +53,10 @@ export class ElementNavComponent implements OnInit {
         CleftbarComponent.Hide();
         break;
       }
+      case 'Settings': {
+        this.Settings();
+        break;
+      }
       case 'ShowLeft': {
         CleftbarComponent.Show();
         break;
@@ -253,10 +257,9 @@ export class ElementNavComponent implements OnInit {
           'disable': true
         },
         {
-          'id': 'Language',
-          'href': '',
-          'name': 'Language',
-          'disable': true
+          'id': 'Settings',
+          'click': 'Settings',
+          'name': 'Settings'
         }]
     }, {
       'id': 'Help',
@@ -339,11 +342,22 @@ export class ElementNavComponent implements OnInit {
     }
     location.reload();
   }
+
+  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;
+  }
 }
 
 
 @Component({
-  selector: 'app-element-nav-dialog',
+  selector: 'elements-nav-dialog',
   templateUrl: 'changeLanWarning.html',
 })
 export class ChangLanWarningDialogComponent implements OnInit {

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

@@ -3,7 +3,7 @@ import {version} from '../../../environments/environment';
 import {DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-element-ofooter',
+  selector: 'elements-ofooter',
   templateUrl: './ofooter.component.html',
   styleUrls: ['./ofooter.component.scss']
 })

src/app/elements/popup/popup.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-element-popup',
+  selector: 'elements-popup',
   templateUrl: './popup.component.html',
   styleUrls: ['./popup.component.css']
 })

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

@@ -11,7 +11,7 @@ import {DataStore} from '../../globals';
 declare let Mstsc: any;
 
 @Component({
-  selector: 'app-element-rdp',
+  selector: 'elements-rdp',
   templateUrl: './rdp.component.html',
   styleUrls: ['./rdp.component.scss']
 })

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

@@ -9,7 +9,7 @@ export class Menu {
 }
 
 @Component({
-  selector: 'app-element-server-menu',
+  selector: 'elements-server-menu',
   templateUrl: './server-menu.component.html',
   styleUrls: ['./server-menu.component.scss'],
 })

src/app/replay-page/mp4/mp4.component.html → src/app/elements/settings/settings.component.html

 <p>
-  mp4 works!
+  settings works!
 </p>

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

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

src/app/elements/settings/settings.component.ts

+import {Component, Input, OnInit} from '@angular/core';
+
+@Component({
+  selector: 'elements-settings',
+  templateUrl: './settings.component.html',
+  styleUrls: ['./settings.component.scss']
+})
+export class ElementSettingsComponent implements OnInit {
+  @Input() index: number;
+
+  constructor() {
+  }
+
+  ngOnInit() {
+  }
+
+}

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

@@ -28,7 +28,7 @@ export let Config: {
 };
 
 @Component({
-  selector: 'app-element-table',
+  selector: 'elements-table',
   templateUrl: './table.component.html',
   styleUrls: ['./table.component.scss']
 })

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

 import {AfterViewInit, Component, Input, OnInit, ViewChild} from '@angular/core';
 import {ElementRef} from '@angular/core';
 import {term, Terminal, TermWS} from '../../globals';
-import {NavList} from '../../ControlPage/control/control.component';
+import {NavList} from '../../pages/control/control/control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 import {UUIDService} from '../../app.service';
 import {CookieService} from 'ngx-cookie-service';
 
 @Component({
-  selector: 'app-element-term',
+  selector: 'elements-term',
   templateUrl: './term.component.html',
   styleUrls: ['./term.component.css']
 })

src/app/elements/tree/tree.component.html

+<div *ngFor="let node of TreeData">
+  <div *ngIf="node.leafs?.length>0">
+    {{node.id}}
+    <elements-tree [TreeData]="node.leafs"></elements-tree>
+  </div>
+  <div *ngIf="node.leafs?.length==0">
+    {{node.id}}
+  </div>
+</div>
+
+
+<!--<ul class="filetree ">-->
+<!--<li *ngFor="let hostGroup of HostGroups | SearchFilter: q; let i = index ">-->
+<!--<input type="checkbox" id="hostgroup-{{i}}">-->
+<!--<label for="hostgroup-{{i}}" matTooltip="{{hostGroup.name}}" [matTooltipPosition]="TooltipPosition">{{hostGroup.name}}</label>-->
+<!--</li>-->
+<!--</ul>-->

src/app/monitor-page/linux/linux.component.spec.ts → src/app/elements/tree/tree.component.spec.ts

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

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

+import {Component, Input, OnInit} from '@angular/core';
+import {HttpService} from '../../app.service';
+
+export interface Assets {
+  name: string;
+  id: string;
+  type: string;
+}
+
+export interface Groups {
+  id: string;
+  key: string;
+  name: string;
+  value: string;
+  parent: string;
+  assets_granted: Array<Assets>;
+}
+
+export class TreeStruct {
+  id: string;
+
+  leafs: Array<TreeStruct>;
+
+  static create(id, parent: string) {
+    const tmp = new TreeStruct();
+    tmp.id = id;
+    tmp.leafs = [];
+    return tmp;
+  }
+
+}
+
+
+@Component({
+  selector: 'elements-tree',
+  templateUrl: './tree.component.html',
+  styleUrls: ['./tree.component.scss']
+})
+export class ElementTreeComponent implements OnInit {
+  @Input() TreeData: Array<TreeStruct>;
+
+  constructor(private _http: HttpService) {
+
+
+  }
+
+  ngOnInit() {
+  }
+
+}

src/app/globals.ts

@@ -26,13 +26,17 @@ export let Video: {
   id: string,
   src: string,
   type: string,
+  height: number,
+  width: number,
   json: object;
   timelist: Array<number>;
   totalTime: number;
 } = {
-  id: 'sss',
-  src: 'sss',
-  type: 'json',
+  id: '',
+  src: '',
+  type: '',
+  width: 0,
+  height: 0,
   json: {},
   timelist: [],
   totalTime: 0,

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

-<app-monitor-linux></app-monitor-linux>

src/app/app.component.css → src/app/pages/app.component.css

 
-app-element-nav {
+elements-nav {
   font-family: 'Roboto', sans-serif;
   font-size: 13px;
   font-weight: 300;
@@ -22,7 +22,7 @@ nav {
   width: 100%;
 }
 
-app-element-interactive {
+elements-interactive {
   position: absolute;
   display: inline-block;
   bottom: 120px;

src/app/app.component.html → src/app/pages/app.component.html

 <ng-progress></ng-progress>
-<app-element-nav *ngIf="DataStore.NavShow"></app-element-nav>
+<elements-nav *ngIf="DataStore.NavShow"></elements-nav>
 <router-outlet></router-outlet>
-<!--<app-element-interactive></app-element-interactive>-->
+<!--<elements-interactive></elements-interactive>-->

src/app/app.component.ts → src/app/pages/app.component.ts

@@ -6,7 +6,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component} from '@angular/core';
-import {DataStore} from './globals';
+import {DataStore} from '../globals';
 
 @Component({
   selector: 'app-root',

src/app/blank-page/blank-page.component.spec.ts → src/app/pages/blank/blank.component.spec.ts

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

src/app/blank-page/blank-page.component.ts → src/app/pages/blank/blank.component.ts

 import {Component, OnInit} from '@angular/core';
-import {DataStore} from '../globals';
+import {DataStore} from '../../globals';
 
 @Component({
-  selector: 'app-blank-page',
-  templateUrl: './blank-page.component.html',
-  styleUrls: ['./blank-page.component.scss']
+  selector: 'pages-blank',
+  templateUrl: './blank.component.html',
+  styleUrls: ['./blank.component.scss']
 })
-export class BlankPageComponent implements OnInit {
+export class PagesBlankComponent implements OnInit {
 
   constructor() {
     DataStore.NavShow = false;

src/app/connect-page/connect-page.component.html → src/app/pages/connect/connect.component.html

-<app-element-term
+<elements-term
   [token]="token"
   [index]="0"
   *ngIf="system =='linux'">
-</app-element-term>
-<app-element-guacamole
+</elements-term>
+<elements-guacamole
   [target]="target"
   [index]="0"
   *ngIf="system=='windows' && target">
-</app-element-guacamole>
+</elements-guacamole>

src/app/connect-page/connect-page.component.spec.ts → src/app/pages/connect/connect.component.spec.ts

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

src/app/connect-page/connect-page.component.ts → 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.service';
+import {DataStore} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-connect-page',
-  templateUrl: './connect-page.component.html',
-  styleUrls: ['./connect-page.component.scss']
+  selector: 'pages-connect',
+  templateUrl: './connect.component.html',
+  styleUrls: ['./connect.component.scss']
 })
-export class ConnectPageComponent implements OnInit {
+export class PagesConnectComponent implements OnInit {
   token: string;
   system: string;
   authToken: string;

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

+<div class="sidebar" fxLayout="column" ngxSplit="column">
+  <div fxflex="0 0 50px" class="search">
+    <input id="keyword" class="left-search" placeholder=" {{'Search'| trans }} ..." maxlength="2048" name="q"
+           autocomplete="off"
+           title="Search"
+           type="text" tabindex="1" spellcheck="false" autofocus [(ngModel)]="q" (keyup.enter)="Search(q)">
+  </div>
+  <div class="overflow ngx-scroll-overlay" fxflex="1 1 100%">
+    <elements-asset-tree [Data]="zNodes" [query]="q"></elements-asset-tree>
+  </div>
+
+  <div class="footer-version" fxflex="0 0 40px">
+    <p> Version <strong>{{version}}</strong></p>
+  </div>
+</div>
+<!--<elements-server-menu></elements-server-menu>-->

src/app/ControlPage/cleftbar/cleftbar.component.css → src/app/pages/control/cleftbar/cleftbar.component.scss

+.sidebar {
+  height: 100%;
+  width: 100%;
+}
+
 :root {
   font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 }
@@ -8,6 +13,7 @@ label {
 
 .filetree {
   padding-left: 20px;
+  height: inherit;
 }
 
 .filetree input[type="checkbox"] {
@@ -52,51 +58,56 @@ label {
   display: inline-block;
 }
 
-.search {
-  border-left-width: 0;
-  border-bottom: #19aa8d 2px inset;
+.fa.fa-undefined:before {
+  content: "\f26c";
 }
 
 .left-search {
   padding-left: 14px;
   width: 100%;
   border: none;
-  height: 28px;
   background: #2f2a2a;
   color: #ffffff;
 }
 
-.footer {
-  background: #2f2a2a;
-  font-size: 9pt;
-  border-top-width: 1px;
-  left: 0;
-  padding: 1px 20px 0 20px;
-  position: absolute;
+.search {
+  border-left-width: 0;
+  border-bottom: #19aa8d 2px inset;
+  //padding-top: 30px;
+  width: 100%;
+  //position: fixed;
+  //height: 28px;
 }
 
-.fa.fa-undefined:before {
-  content: "\f26c";
+.search > input {
+  height: 30px;
 }
 
 .overflow {
   height: 100%;
-  overflow-y: scroll;
-  position: absolute;
   width: 100%;
+  float: left;
+  position: inherit;
+  background: #2f2a2a;
+  color: #d6cbcb;
 }
 
-::-webkit-scrollbar {
-  width: 10px;
-  height: 10px;
+.footer-version {
+  background: #2f2a2a;
+  font-size: 9pt;
+  left: 0;
+  width: 100%;
+  padding: 1px 20px 0 20px;
+  border-top: 1px solid #e7eaec;
+  bottom: 0;
+  //height: 30px;
+  //position: fixed;
 }
 
-::-webkit-scrollbar-track {
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
-  border-radius: 10px;
+.footer-version > p {
+  height: 8px;
+  padding-top: 2px;
+  padding-bottom: 2px;
 }
 
-::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
-}
+@import "~@swimlane/ngx-ui/release/styles/components/scrollbars";

src/app/ControlPage/cleftbar/cleftbar.component.ts → src/app/pages/control/cleftbar/cleftbar.component.ts

@@ -8,16 +8,15 @@
  */
 
 import {Component, Inject, OnInit} from '@angular/core';
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '../../../app.service';
 import {SearchComponent} from '../search/search.component';
-import {DataStore} from '../../globals';
-import {version} from '../../../environments/environment';
-import {ElementServerMenuComponent} from '../../elements/server-menu/server-menu.component';
+import {DataStore} from '../../../globals';
+import {version} from '../../../../environments/environment';
 import {NavList, View} from '../control/control.component';
 import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material';
 import {FormControl, Validators} from '@angular/forms';
-import {DialogService} from '../../elements/dialog/dialog.service';
-
+import {ElementServerMenuComponent} from '../../../elements/server-menu/server-menu.component';
+import {DialogService} from '../../../elements/dialog/dialog.service';
 
 export interface HostGroup {
   name: string;
@@ -32,14 +31,15 @@ export class Host {
 }
 
 @Component({
-  selector: 'app-cleftbar',
+  selector: 'pages-control-cleftbar',
   templateUrl: './cleftbar.component.html',
-  styleUrls: ['./cleftbar.component.css'],
+  styleUrls: ['./cleftbar.component.scss'],
   providers: [SearchComponent, ElementServerMenuComponent]
 })
 export class CleftbarComponent implements OnInit {
   DataStore = DataStore;
   HostGroups: Array<HostGroup>;
+  zNodes: any;
   version = version;
   q: string;
   event: MouseEvent;
@@ -94,110 +94,14 @@ export class CleftbarComponent implements OnInit {
   ngOnInit() {
     this._http.get_my_asset_groups_assets()
       .subscribe(response => {
-        this.HostGroups = response;
-        if (!DataStore.autologin) {
-          this.autologin();
-        }
+        this.zNodes = response;
+        // this.HostGroups = response;
+        // if (!DataStore.autologin) {
+        //   this.autologin();
+        // }
       });
   }
 
-  autologin() {
-    const asset_id = this._appService.getQueryString('asset_id');
-    const user_id = this._appService.getQueryString('user_id');
-    let tag = false;
-    if (asset_id) {
-      for (let g of this.HostGroups) {
-        if (g['assets_granted']) {
-          for (let host of g['assets_granted']) {
-            if (host.id.toString() === asset_id) {
-              if (user_id) {
-                host['system_users_granted'].forEach((user, kk) => {
-                  if (user.id.toString() === user_id.toString()) {
-                    this.login(host, user);
-                    tag = true;
-                    return;
-                  }
-                });
-              } else {
-                this.Connect(host);
-                tag = true;
-                return;
-              }
-            }
-          }
-        }
-      }
-      if (!tag) {
-        this._layer.alert('Maybe you do not have permission on that host');
-      }
-    }
-    DataStore.autologin = true;
-  }
-
-  Connect(host) {
-    // console.log(host);
-    let user: any;
-    if (host.system_users_granted.length > 1) {
-      user = this.checkPriority(host.system_users_granted);
-      if (user) {
-        this.login(host, user);
-      } else {
-        const dialogRef = this._dialog.open(CleftbarDialogComponent, {
-          height: '200px',
-          width: '300px',
-          data: {users: host.system_users_granted}
-        });
-
-        dialogRef.afterClosed().subscribe(result => {
-          if (result) {
-            for (let i of host.system_users_granted) {
-              if (i.id.toString() === result.toString()) {
-                user = i;
-                break;
-              }
-            }
-            this.login(host, user);
-          }
-        });
-      }
-    } else if (host.system_users_granted.length === 1) {
-      user = host.system_users_granted[0];
-      this.login(host, user);
-    }
-  }
-
-  login(host, user) {
-    const id = NavList.List.length - 1;
-    if (user) {
-      NavList.List[id].nick = host.hostname;
-      NavList.List[id].connected = true;
-      NavList.List[id].edit = false;
-      NavList.List[id].closed = false;
-      NavList.List[id].host = host;
-      NavList.List[id].user = user;
-      if (user.protocol === 'ssh') {
-        NavList.List[id].type = 'ssh';
-      } else if (user.protocol === 'rdp') {
-        NavList.List[id].type = 'rdp';
-      }
-      NavList.List.push(new View());
-      NavList.Active = id;
-    }
-  }
-
-  checkPriority(sysUsers) {
-    let priority = -1;
-    let user: any;
-    for (const u of sysUsers) {
-      if (u.priority > priority) {
-        user = u;
-        priority = u.priority;
-      } else if (u.priority === priority) {
-        return null;
-      }
-    }
-    return user;
-  }
 
   Search(q) {
     this._search.Search(q);
@@ -210,34 +114,3 @@ export class CleftbarComponent implements OnInit {
     // this._menu.contextmenu(this.clientY, this.clientX);
   }
 }
-
-
-@Component({
-  selector: 'app-cleftbar-dialog',
-  templateUrl: 'dialog.html',
-})
-export class CleftbarDialogComponent implements OnInit {
-  UserSelectControl = new FormControl('', [Validators.required]);
-  selected: any;
-
-  constructor(public dialogRef: MatDialogRef<CleftbarDialogComponent>,
-              @Inject(MAT_DIALOG_DATA) public data: any,
-              private _logger: LogService) {
-  }
-
-  ngOnInit() {
-    this.selected = this.data.users[0].id;
-    this.UserSelectControl.setValue(this.selected);
-    // this._logger.debug(this.UserSelectControl);
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  compareFn: ((f1: any, f2: any) => boolean) | null = this.compareByValue;
-
-  compareByValue(f1: any, f2: any) {
-    return f1 && f2 && f1.value === f2.value;
-  }
-}

src/app/ControlPage/controlpage.component.css → src/app/pages/control/control.component.css

-div, term-leftbar, term-body {
+div {
   height: 100%;
   width: 100%;
   padding: 0;
-}
-
-div {
   background-color: black;
   margin: 0;
-  padding-top: 30px;
   position: initial;
 }
 
-app-cleftbar {
-  padding: 0;
+pages-control-cleftbar, pages-control-control {
   background: #2f2a2a;
   color: #d6cbcb;
 }
 
-app-control {
-  padding: 0;
+.container-fluid {
+  padding-top: 30px;
 }

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

+<div class="container-fluid row" fxLayout="row" ngxSplit="row">
+  <div fxFlex="20%" ngxSplitArea *ngIf="DataStore.leftbarshow">
+    <pages-control-cleftbar></pages-control-cleftbar>
+  </div>
+  <div fxFlex="15px" ngxSplitHandle ></div>
+  <div fxFlex>
+    <pages-control-control></pages-control-control>
+  </div>
+</div>

src/app/ControlPage/controlpage.component.spec.ts → src/app/pages/control/control.component.spec.ts

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

src/app/ControlPage/controlpage.component.ts → src/app/pages/control/control.component.ts

@@ -6,15 +6,15 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService} from '../app.service';
-import {DataStore, User} from '../globals';
+import {AppService} from '../../app.service';
+import {DataStore, User} from '../../globals';
 
 @Component({
-  selector: 'app-controllpage',
-  templateUrl: './controlpage.component.html',
-  styleUrls: ['./controlpage.component.css'],
+  selector: 'pages-control',
+  templateUrl: './control.component.html',
+  styleUrls: ['./control.component.css'],
 })
-export class ControlPageComponent implements OnInit {
+export class PagesControlComponent implements OnInit {
   DataStore = DataStore;
   User = User;
 

src/app/ControlPage/control/control.component.css → src/app/pages/control/control/control.component.css

-div, app-element-term, app-element-iframe {
+div, elements-term, elements-guacamole, elements-settings {
   height: 100%;
+}
+
+elements-term, elements-guacamole, elements-settings {
   padding-bottom: 30px;
 }
 
-div {
+.window {
   display: none;
 }
 
 .active {
   display: block;
 }
+
+.right-side {
+  height: 100%;
+  width: 100%;
+  background-color: gray;
+}

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

+<div fxLayout="column" ngxSplit="column" style="width: 100%;height: 100%;">
+  <div fxflex="0 0 50px" class="search">
+    <pages-control-nav></pages-control-nav>
+  </div>
+  <div fxFlex>
+    <div class="window" *ngFor="let m of NavList.List;let i=index"
+         [ngClass]="{'active':i==NavList.Active}">
+      <elements-term [index]="i"
+                     [host]="m.host"
+                     [userid]="m.user.id"
+                     *ngIf="m.type=='ssh'">
+      </elements-term>
+      <elements-guacamole [index]="i"
+                          [host]="m.host"
+                          [userid]="m.user.id"
+                          *ngIf="m.type=='rdp'">
+      </elements-guacamole>
+      <elements-settings [index]="i"
+                         *ngIf="m.type=='settings'">
+      </elements-settings>
+    </div>
+  </div>
+</div>

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

@@ -8,7 +8,7 @@
  */
 
 import {Component, OnInit} from '@angular/core';
-import {TermWS} from '../../globals';
+import {TermWS} from '../../../globals';
 
 // export class Term {
 //   machine: string;
@@ -41,7 +41,7 @@ export let NavList: {
 };
 
 @Component({
-  selector: 'app-control',
+  selector: 'pages-control-control',
   templateUrl: './control.component.html',
   styleUrls: ['./control.component.css']
 })

src/app/pages/control/control/controlnav/nav.component.spec.ts

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

src/app/ControlPage/control/controlnav/controlnav.component.ts → src/app/pages/control/control/controlnav/nav.component.ts

@@ -12,12 +12,12 @@ import {ControlComponent, NavList} from '../control.component';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-controlnav',
-  templateUrl: './controlnav.component.html',
-  styleUrls: ['./controlnav.component.css'],
+  selector: 'pages-control-nav',
+  templateUrl: './nav.component.html',
+  styleUrls: ['./nav.component.css'],
 })
-export class ControlnavComponent implements OnInit {
-  setActive = ControlnavComponent.setActive;
+export class PagesControlNavComponent implements OnInit {
+  setActive = PagesControlNavComponent.setActive;
   NavList = NavList;
 
   static checkActive(index) {
@@ -31,7 +31,7 @@ export class ControlnavComponent implements OnInit {
     } else {
       NavList.Active = index;
     }
-    ControlnavComponent.setActive(NavList.Active);
+    PagesControlNavComponent.setActive(NavList.Active);
   }
 
   static setActive(index) {
@@ -65,7 +65,7 @@ export class ControlnavComponent implements OnInit {
       ControlComponent.TerminalDisconnect(index);
     }
     NavList.List.splice(index, 1);
-    ControlnavComponent.checkActive(index);
+    PagesControlNavComponent.checkActive(index);
   }
 
   scrollleft() {

src/app/ControlPage/search/search.component.ts → src/app/pages/control/search/search.component.ts

@@ -7,7 +7,7 @@
  */
 import {Component, OnChanges, Input, Pipe, PipeTransform} from '@angular/core';
 
-import {AppService, HttpService, LogService} from '../../app.service';
+import {AppService, HttpService, LogService} from '../../../app.service';
 
 export let Q = '';
 

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

@@ -6,10 +6,10 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService, LogService} from '../../app.service';
+import {AppService, LogService} from '../../../app.service';
 
 @Component({
-  selector: 'app-ileftbar',
+  selector: 'pages-ileftbar',
   templateUrl: './ileftbar.component.html',
   styleUrls: ['./ileftbar.component.css']
 })

src/app/BasicPage/login/login.component.spec.ts → src/app/pages/index/index.component.spec.ts

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

src/app/IndexPage/index-page.component.ts → src/app/pages/index/index.component.ts

@@ -6,15 +6,15 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component, OnInit} from '@angular/core';
-import {AppService} from '../app.service';
-import {User} from '../globals';
+import {AppService} from '../../app.service';
+import {User} from '../../globals';
 
 @Component({
-  selector: 'app-index-page',
-  templateUrl: './index-page.component.html',
-  styleUrls: ['./index-page.component.css'],
+  selector: 'pages-index',
+  templateUrl: './index.component.html',
+  styleUrls: ['./index.component.css'],
 })
-export class IndexPageComponent implements OnInit {
+export class PagesIndexComponent implements OnInit {
   User = User;
 
   constructor() {

src/app/BasicPage/not-found/not-found.component.spec.ts → src/app/pages/login/login.component.spec.ts

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

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

@@ -13,11 +13,11 @@ import {DataStore, User} from '../../globals';
 import * as jQuery from 'jquery/dist/jquery.min.js';
 
 @Component({
-  selector: 'app-login',
+  selector: 'pages-login',
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
 })
-export class LoginComponent implements OnInit {
+export class PagesLoginComponent implements OnInit {
   DataStore = DataStore;
   User = User;
   loginBotton = 'login to your account';

src/app/monitor-page/linux/linux.component.html → src/app/pages/monitor/linux/linux.component.html

-<app-element-term
+<elements-term
   [index]="0"
   [monitor]="token"
-></app-element-term>
+></elements-term>

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

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

src/app/monitor-page/linux/linux.component.ts → src/app/pages/monitor/linux/linux.component.ts

 import {Component, OnInit} from '@angular/core';
-import {Monitor} from '../../globals';
+import {Monitor} from '../../../globals';
 
 @Component({
-  selector: 'app-monitor-linux',
+  selector: 'pages-monitor-linux',
   templateUrl: './linux.component.html',
   styleUrls: ['./linux.component.css']
 })
-export class LinuxComponent implements OnInit {
+export class PagesMonitorLinuxComponent implements OnInit {
   token: string;
 
   constructor() {

src/app/pages/monitor/monitor.component.html

+<pages-monitor-linux></pages-monitor-linux>

src/app/monitor-page/monitor-page.component.spec.ts → src/app/pages/monitor/monitor.component.spec.ts

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

src/app/monitor-page/monitor-page.component.ts → 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 '../../globals';
 
 @Component({
-  selector: 'app-monitor-page',
-  templateUrl: './monitor-page.component.html',
-  styleUrls: ['./monitor-page.component.css']
+  selector: 'pages-monitor',
+  templateUrl: './monitor.component.html',
+  styleUrls: ['./monitor.component.css']
 })
-export class MonitorPageComponent implements OnInit {
+export class PagesMonitorComponent implements OnInit {
 
   constructor(private activatedRoute: ActivatedRoute) {
     DataStore.NavShow = false;

src/app/monitor-page/windows/windows.component.spec.ts → src/app/pages/monitor/windows/windows.component.spec.ts

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

src/app/monitor-page/windows/windows.component.ts → src/app/pages/monitor/windows/windows.component.ts

 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-windows',
+  selector: 'pages-monitor-windows',
   templateUrl: './windows.component.html',
   styleUrls: ['./windows.component.css']
 })
-export class WindowsComponent implements OnInit {
+export class PagesMonitorWindowsComponent implements OnInit {
 
   constructor() { }