feat: public

app.js

@@ -170,8 +170,125 @@ server.run = function (options) {
           }]
       }])
     });
-  apis.route('/hostlist')
+  apis.route('/perms/v1/user/my/asset-groups-assets/')
     .get(function (req, res) {
+      res.json([
+    {
+        "id": 0,
+        "name": "ungrouped",
+        "assets": []
+    },
+    {
+        "id": 1,
+        "name": "Default",
+        "comment": "Default asset group",
+        "assets": [
+            {
+                "id": 2,
+                "hostname": "192.168.1.6",
+                "ip": "192.168.2.6",
+                "port": 22,
+                "system_users": [
+                    {
+                        "id": 1,
+                        "name": "web",
+                        "username": "web",
+                        "protocol": "ssh",
+                        "auth_method": "P",
+                        "auto_push": true
+                    }
+                ]
+            },
+            {
+                "id": 4,
+                "hostname": "testserver123",
+                "ip": "123.57.183.135",
+                "port": 8022,
+                "system_users": [
+                    {
+                        "id": 1,
+                        "name": "web",
+                        "username": "web",
+                        "protocol": "ssh",
+                        "auth_method": "P",
+                        "auto_push": true
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "id": 4,
+        "name": "java",
+        "comment": "",
+        "assets": [
+            {
+                "id": 2,
+                "hostname": "192.168.1.6",
+                "ip": "192.168.2.6",
+                "port": 22,
+                "system_users": [
+                    {
+                        "id": 1,
+                        "name": "web",
+                        "username": "web",
+                        "protocol": "ssh",
+                        "auth_method": "P",
+                        "auto_push": true
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "id": 3,
+        "name": "数据库",
+        "comment": "",
+        "assets": [
+            {
+                "id": 2,
+                "hostname": "192.168.1.6",
+                "ip": "192.168.2.6",
+                "port": 22,
+                "system_users": [
+                    {
+                        "id": 1,
+                        "name": "web",
+                        "username": "web",
+                        "protocol": "ssh",
+                        "auth_method": "P",
+                        "auto_push": true
+                    }
+                ]
+            }
+        ]
+    },
+    {
+        "id": 2,
+        "name": "运维组",
+        "comment": "",
+        "assets": [
+            {
+                "id": 2,
+                "hostname": "192.168.1.6",
+                "ip": "192.168.2.6",
+                "port": 22,
+                "system_users": [
+                    {
+                        "id": 1,
+                        "name": "web",
+                        "username": "web",
+                        "protocol": "ssh",
+                        "auth_method": "P",
+                        "auto_push": true
+                    }
+                ]
+            }
+        ]
+    }
+]);
+
+
       res.json([{
         "name": "测试服务器组1",
         "id": 1,

src/app/BasicPage/nav/nav.component.css

@@ -80,6 +80,7 @@
 .dropdown-content li:hover {
   background-color: #3a3333;
   color: black;
+  width: 100%;
 }
 
 .dropdown-content li.disabled:hover {

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

@@ -9,7 +9,7 @@
       <input type="checkbox" id="hostgroup-{{i}}">
       <label for="hostgroup-{{i}}">{{hostGroup.name}}</label>
       <ul>
-        <li *ngFor="let host of hostGroup.children | SearchFilter: q" (click)="Connect(host)">{{host.name}}</li>
+        <li *ngFor="let host of hostGroup.assets | SearchFilter: q" (click)="Connect(host)">{{host.hostname}}</li>
       </ul>
     </li>
   </ul>

src/app/ControlPage/cleftbar/cleftbar.component.ts

@@ -45,9 +45,33 @@ export class CleftbarComponent implements OnInit {
   }
 
   static Hide() {
+    DataStore.leftbarshow = false;
+    DataStore.Nav.map(function (value, i) {
+      for (var ii in value["children"]) {
+        if (DataStore.Nav[i]["children"][ii]["id"] === "HindLeftManager") {
+          DataStore.Nav[i]["children"][ii] = {
+            "id": "ShowLeftManager",
+            "click": "ShowLeft",
+            "name": "Show left manager"
+          }
+        }
+      }
+    })
   }
 
   static Show() {
+    DataStore.leftbarshow = true;
+    DataStore.Nav.map(function (value, i) {
+      for (var ii in value["children"]) {
+        if (DataStore.Nav[i]["children"][ii]["id"] === "ShowLeftManager") {
+          DataStore.Nav[i]["children"][ii] = {
+            "id": "HindLeftManager",
+            "click": "HideLeft",
+            "name": "Hind left manager"
+          }
+        }
+      }
+    })
   }
 
   constructor(private _appService: AppService,
@@ -61,7 +85,7 @@ export class CleftbarComponent implements OnInit {
   }
 
   ngOnInit() {
-    this._http.get('/api/hostlist')
+    this._http.get('/api/perms/v1/user/my/asset-groups-assets/')
       .map(res => res.json())
       .subscribe(response => {
         this.HostGroups = response;
@@ -71,10 +95,10 @@ export class CleftbarComponent implements OnInit {
   Connect(host) {
     console.log(host);
     let username: string;
-    if (host.users.length > 1) {
+    if (host.system_users.length > 1) {
       let options = "";
-      for (let u of host.users) {
-        options += "<option value='" + u + "'>" + u + "</option>"
+      for (let u of host.system_users) {
+        options += "<option value='" + u.username + "'>" + u.username + "</option>"
       }
       layer.open({
         title: 'Please Choose a User',
@@ -94,8 +118,8 @@ export class CleftbarComponent implements OnInit {
           //return false 开启该代码可禁止点击该按钮关闭
         }
       });
-    } else if (host.users.length === 1) {
-      username = host.users[0]
+    } else if (host.system_users.length === 1) {
+      username = host.system_users[0].username
     }
     if (username === "") {
       return

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

@@ -11,7 +11,6 @@ import {Component, OnInit} from '@angular/core';
 import {NavList} from '../control.component'
 import {SshComponent} from '../ssh/ssh.component'
 import {RdpComponent} from '../rdp/rdp.component'
-import {NavComponent} from "../../../BasicPage/nav/nav.component";
 
 declare let jQuery: any;
 
@@ -19,7 +18,7 @@ declare let jQuery: any;
 @Component({
   selector: 'app-controlnav',
   templateUrl: './controlnav.component.html',
-  styleUrls: ['./controlnav.component.css']
+  styleUrls: ['./controlnav.component.css'],
 })
 export class ControlnavComponent implements OnInit {
   setActive = ControlnavComponent.setActive;

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

@@ -2,6 +2,5 @@
   <div *ngFor="let m of NavList.List;let i=index"
        [ngClass]="{'disconnected':!m.connected,'hidden': m.hide,'hidden':m.type!='rdp'}" id="rdp-{{i}}">
     <canvas id="canvas-{{i}}"></canvas>
-
   </div>
 </div>

src/app/ControlPage/control/ssh/ssh.component.css

@@ -6,7 +6,7 @@
 }
 
 #term > div {
-  height:100%;
+  height: 100%;
 }
 
 .terminal {

src/app/ControlPage/control/ssh/ssh.component.ts

@@ -47,7 +47,7 @@ export class SshComponent implements OnInit {
 
 
     let id = NavList.List.length - 1;
-    NavList.List[id].nick = host.name;
+    NavList.List[id].nick = host.hostname;
     NavList.List[id].connected = true;
     NavList.List[id].edit = false;
     NavList.List[id].closed = false;

src/app/ControlPage/controlpage.component.html

 <div class="container-fluid row">
-  <app-cleftbar class="col-md-2" ></app-cleftbar>
-  <app-control class="col-md-10" ></app-control>
+  <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/ControlPage/search/search.component.ts

@@ -64,7 +64,7 @@ export class SearchFilter implements PipeTransform {
     if (input) {
       input = input.toLowerCase();
       return value.filter(function (el: any) {
-        return el.name.toLowerCase().indexOf(input) > -1;
+        return el.name.toLowerCase().indexOf(input) > -1 || el.comment.toLocaleLowerCase().indexOf(input) > -1;
       })
     }
     return value;

src/app/app-routing.module.ts

@@ -13,13 +13,17 @@ import {IndexPageComponent} from './IndexPage/index-page.component';
 import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
 import {LoginComponent} from './BasicPage/login/login.component';
 import {ControlPageComponent} from './ControlPage/controlpage.component';
+import {RdppageComponent} from "./rdppage/rdppage.component";
+import {TermpageComponent} from "./termpage/termpage.component";
 
 const appRoutes: Routes = [
   // { path: 'crisis-center', component: CrisisListComponent },
-  {path: 'welcome', component: IndexPageComponent}, // <-- delete this line
+  // {path: 'welcome', component: IndexPageComponent}, // <-- delete this line
   {path: 'login', component: LoginComponent},
   {path: 'control', component: ControlPageComponent},
-  {path: '', redirectTo: '/welcome', pathMatch: 'full'},
+  {path: 'rdp/:token', component: RdppageComponent},
+  {path: 'term/:token', component: TermpageComponent},
+  {path: '', redirectTo: '/control', pathMatch: 'full'},
   {path: '**', component: NotFoundComponent}
 ];
 

src/app/app.component.html

-<app-nav></app-nav>
-<nav></nav>
+<app-nav *ngIf="DataStore.NavShow"></app-nav>
+<nav *ngIf="DataStore.NavShow"></nav>
 <router-outlet></router-outlet>

src/app/app.component.ts

@@ -6,7 +6,7 @@
  * @author   liuzheng <liuzheng712@gmail.com>
  */
 import {Component} from '@angular/core';
-import {AppService, HttpService} from './app.service';
+import {AppService, HttpService, DataStore} from './app.service';
 
 @Component({
   selector: 'app-root',
@@ -17,5 +17,5 @@ import {AppService, HttpService} from './app.service';
 })
 
 export class AppComponent {
-  // DataStore = DataStore;
+  DataStore = DataStore;
 }

src/app/app.module.ts

@@ -34,6 +34,8 @@ import {ControlPageComponent} from './ControlPage/controlpage.component';
 import {IndexPageComponent} from './IndexPage/index-page.component';
 import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
 import {PopupComponent} from './BasicPage/popup/popup.component';
+import { RdppageComponent } from './rdppage/rdppage.component';
+import { TermpageComponent } from './termpage/termpage.component';
 
 
 @NgModule({
@@ -60,7 +62,9 @@ import {PopupComponent} from './BasicPage/popup/popup.component';
     ControlPageComponent,
     IndexPageComponent,
     NotFoundComponent,
-    PopupComponent
+    PopupComponent,
+    RdppageComponent,
+    TermpageComponent,
     // HeroListComponent,
     // CrisisListComponent,
   ],

src/app/app.service.ts

@@ -57,20 +57,22 @@ export let User: {
 export let DataStore: {
   socket: any;
   Nav: Array<{}>;
+  NavShow: boolean;
   Path: {};
   error: {};
   msg: {};
   loglevel: number;
-  leftbarhide: boolean;
+  leftbarshow: boolean;
   windowsize: Array<number>;
 } = {
   socket: io.connect(),
   Nav: [{}],
+  NavShow: true,
   Path: {},
   error: {},
   msg: {},
   loglevel: 0,
-  leftbarhide: false,
+  leftbarshow: true,
   windowsize: [],
 };
 export let CSRF: string = '';
@@ -264,7 +266,6 @@ export class AppService implements OnInit {
   }
 
 
-
 //
 //
 //   HideLeft() {

src/app/rdppage/rdppage.component.html

+<canvas id="canvas"></canvas>

src/app/rdppage/rdppage.component.spec.ts

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

src/app/rdppage/rdppage.component.ts

+/**
+ * RDP页面
+ *
+ * @date     2017-11-24
+ * @author   liuzheng <liuzheng712@gmail.com>
+ */
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {DataStore} from "../app.service";
+
+declare let Mstsc: any;
+
+@Component({
+  selector: 'app-rdppage',
+  templateUrl: './rdppage.component.html',
+  styleUrls: ['./rdppage.component.css']
+})
+export class RdppageComponent implements OnInit {
+
+  constructor(private activatedRoute: ActivatedRoute) {
+    DataStore.NavShow = false;
+  }
+
+  ngOnInit() {
+    let token: string;
+    this.activatedRoute.params.subscribe((params: Params) => {
+      token = params['token'];
+    });
+
+    let canvas = Mstsc.$("canvas");
+    canvas.style.display = 'inline';
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+
+    let client = Mstsc.client.create(Mstsc.$("canvas"));
+    client.connect(token, "socket.io");
+  }
+
+}

src/app/termpage/termpage.component.css

+#term {
+  width: 100%;
+  height: 100%;
+}
+
+#term > div {
+  height: 100%;
+}
+
+.terminal {
+  border: #000 solid 5px;
+  color: #f0f0f0;
+  box-shadow: rgba(0, 0, 0, 0.8) 2px 2px 20px;
+  white-space: nowrap;
+  display: inline-block;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+}
+
+#term .terminal div span {
+  min-width: 12px;
+}
+
+#liuzheng {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  font-size: 11px !important;
+  padding-bottom: 16px !important;
+  font-family: 'Monaco', iosevka !important;
+}

src/app/termpage/termpage.component.html

+<span id="liuzheng">liuzheng</span>
+<div id="term"></div>

src/app/termpage/termpage.component.spec.ts

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

src/app/termpage/termpage.component.ts

+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute, Params} from '@angular/router';
+import {DataStore} from "../app.service";
+import * as io from 'socket.io-client';
+
+declare let jQuery: any;
+declare let Terminal: any;
+
+@Component({
+  selector: 'app-termpage',
+  templateUrl: './termpage.component.html',
+  styleUrls: ['./termpage.component.css']
+})
+export class TermpageComponent implements OnInit {
+  constructor(private activatedRoute: ActivatedRoute) {
+    DataStore.NavShow = false;
+
+  }
+
+  ngOnInit() {
+    let token: string;
+    this.activatedRoute.params.subscribe((params: Params) => {
+      token = params['token'];
+    });
+    let socket = io.connect();
+    let term = new Terminal({
+      cols: '80',
+      rows: '24',
+      useStyle: true,
+      screenKeys: true,
+    });
+
+    socket.on('connect', function () {
+      socket.emit('token', token);
+
+      term.on('data', function (data) {
+        socket.emit('data', data);
+      });
+
+
+      socket.on('data', function (data) {
+        term.write(data);
+      });
+
+      socket.on('disconnect', function () {
+        term.destroy();
+      });
+
+      window.onresize = function () {
+        let col = Math.floor(jQuery('#term').width() / jQuery('#liuzheng').width() * 8) - 3;
+        let row = Math.floor(jQuery('#term').height() / jQuery('#liuzheng').height()) - 5;
+        let rows = 24;
+        let cols = 80;
+
+
+        if (col < 80) col = 80;
+        if (row < 24) row = 24;
+        if (cols == col && row == rows) {
+        } else {
+          socket.emit('resize', [col, row]);
+          term.resize(col, row);
+        }
+      };
+      jQuery(window).resize();
+    });
+
+  }
+
+}