feat: connect page,support guacamole

src/app/app-routing.module.ts

@@ -14,20 +14,18 @@ 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 {RdpPageComponent} from './rdp-page/rdp-page.component';
-import {TermPageComponent} from './term-page/term-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: 'rdp/:token', component: RdpPageComponent},
-  {path: 'term/:token', component: TermPageComponent},
   {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},

src/app/app.module.ts

@@ -39,8 +39,6 @@ import {ControlnavComponent} from './ControlPage/control/controlnav/controlnav.c
 import {ControlPageComponent} from './ControlPage/controlpage.component';
 import {IndexPageComponent} from './IndexPage/index-page.component';
 import {NotFoundComponent} from './BasicPage/not-found/not-found.component';
-import {RdpPageComponent} from './rdp-page/rdp-page.component';
-import {TermPageComponent} from './term-page/term-page.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';
@@ -66,6 +64,7 @@ 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';
 
 @NgModule({
   imports: [
@@ -105,8 +104,6 @@ import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.componen
     ControlPageComponent,
     IndexPageComponent,
     NotFoundComponent,
-    RdpPageComponent,
-    TermPageComponent,
     ReplayPageComponent,
     Mp4Component,
     JsonComponent,
@@ -123,6 +120,7 @@ import {ElementGuacamoleComponent} from './elements/guacamole/guacamole.componen
     SettingPageTerminalComponent,
     SettingPageS3Component,
     TransPipe,
+    ConnectPageComponent,
   ],
   entryComponents: [
     CleftbarDialogComponent,

src/app/app.service.ts

@@ -70,9 +70,9 @@ export class HttpService {
     return this.http.get<Array<HostGroup>>('/api/perms/v1/user/nodes-assets/');
   }
 
-  get_guacamole_token(username: string) {
+  get_guacamole_token(user_id: string) {
     const body = new HttpParams()
-      .set('username', username)
+      .set('username', user_id)
       .set('password', 'jumpserver');
     return this.http.post('/guacamole/api/tokens',
       body.toString(),
@@ -94,6 +94,19 @@ export class HttpService {
     );
   }
 
+  guacamole_token_add_asset(token: string) {
+    const params = new HttpParams()
+      .set('asset_token', token)
+      .set('token', DataStore.guacamole_token);
+    return this.http.get(
+      '/guacamole/api/session/ext/jumpserver/asset/token/add',
+      {
+        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
+        params: params
+      }
+    );
+  }
+
   search(q: string) {
     const params = new HttpParams()
       .set('q', q);

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

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

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

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

src/app/term-page/term-page.component.ts → src/app/connect-page/connect-page.component.ts

 import {Component, OnInit} from '@angular/core';
+import {AppService} from '../app.service';
 import {DataStore} from '../globals';
-import {ActivatedRoute, Params} from '@angular/router';
 import * as jQuery from 'jquery/dist/jquery.min.js';
-import {LogService} from '../app.service';
 
 @Component({
-  selector: 'app-term-page',
-  templateUrl: './term-page.component.html',
-  styleUrls: ['./term-page.component.scss']
+  selector: 'app-connect-page',
+  templateUrl: './connect-page.component.html',
+  styleUrls: ['./connect-page.component.scss']
 })
-export class TermPageComponent implements OnInit {
+export class ConnectPageComponent implements OnInit {
   token: string;
+  system: string;
 
-  constructor(private activatedRoute: ActivatedRoute,
-              private _logger: LogService) {
+  constructor(private _appService: AppService) {
     DataStore.NavShow = false;
-    this._logger.debug('TermPageComponent');
   }
 
   ngOnInit() {
-    this.activatedRoute.params.subscribe((params: Params) => {
-      this.token = params['token'];
-    });
+    this.system = this._appService.getQueryString('system');
+    this.token = this._appService.getQueryString('token');
+
     jQuery('body').css('background-color', 'black');
+
   }
+
 }

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

@@ -14,6 +14,7 @@ import {NavList} from '../../ControlPage/control/control.component';
 export class ElementGuacamoleComponent implements OnInit {
   @Input() host: any;
   @Input() userid: any;
+  @Input() token: string;
   @Input() index: number;
   target: string;
   @ViewChild('rdp') el: ElementRef;
@@ -26,41 +27,57 @@ export class ElementGuacamoleComponent implements OnInit {
 
   ngOnInit() {
     // /guacamole/api/tokens will redirect to http://guacamole/api/tokens
-    const base = window.btoa(this.host.id + '\0' + 'c' + '\0' + 'jumpserver');
-    if (environment.production) {
-      if (DataStore.guacamole_token) {
-        this._http.guacamole_add_asset(User.id, this.host.id, this.userid).subscribe(
-          data => {
-            this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
-          },
-          error2 => {
-            this._logger.error(error2);
-          }
-        );
-      } else {
-        this._http.get_guacamole_token(User.id).subscribe(
-          data => {
-            // /guacamole/client will redirect to http://guacamole/#/client
-            DataStore.guacamole_token = data['authToken'];
+    if (this.token) {
+      this._http.get_guacamole_token(User.id).subscribe(
+        data => {
+          DataStore.guacamole_token = data['authToken'];
+          this._http.guacamole_token_add_asset(this.token).subscribe(
+            _ => {
+              this.target = document.location.origin + '/guacamole/#/client/' + data['result'] + '?token=' + DataStore.guacamole_token;
+            },
+            error2 => {
+              this._logger.error(error2);
+            }
+          );
+        });
+    } else {
+      const base = window.btoa(this.host.id + '\0' + 'c' + '\0' + 'jumpserver');
+      if (environment.production) {
+        if (DataStore.guacamole_token) {
+          this._http.guacamole_add_asset(User.id, this.host.id, this.userid).subscribe(
+            data => {
+              this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
+            },
+            error2 => {
+              this._logger.error(error2);
+            }
+          );
+        } else {
+          this._http.get_guacamole_token(User.id).subscribe(
+            data => {
+              // /guacamole/client will redirect to http://guacamole/#/client
+              DataStore.guacamole_token = data['authToken'];
 
-            this._http.guacamole_add_asset(User.id, this.host.id, this.userid).subscribe(
-              data2 => {
-                this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
-              },
-              error2 => {
-                this._logger.error(error2);
-              }
-            );
-            // '/guacamole/#/client/' + base + '?token=' + data['authToken'];
-          },
-          error2 => {
-            this._logger.error(error2);
-          }
-        );
+              this._http.guacamole_add_asset(User.id, this.host.id, this.userid).subscribe(
+                data2 => {
+                  this.target = document.location.origin + '/guacamole/#/client/' + base + '?token=' + DataStore.guacamole_token;
+                },
+                error2 => {
+                  this._logger.error(error2);
+                }
+              );
+              // '/guacamole/#/client/' + base + '?token=' + data['authToken'];
+            },
+            error2 => {
+              this._logger.error(error2);
+            }
+          );
+        }
+      } else {
+        this.target = this._cookie.get('guacamole');
       }
-    } else {
-      this.target = this._cookie.get('guacamole');
     }
+
     NavList.List[this.index].Rdp = this.el.nativeElement;
   }
 

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

-<p>
-  rdp-page works!
-</p>

src/app/rdp-page/rdp-page.component.spec.ts

-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { RdpPageComponent } from './rdp-page.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/rdp-page/rdp-page.component.ts

-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'app-rdp-page',
-  templateUrl: './rdp-page.component.html',
-  styleUrls: ['./rdp-page.component.scss']
-})
-export class RdpPageComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}

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

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