Merge pull request #1209 from jumpserver/dev

v4.5.0

Author: BaiJiangJie

proxy.conf.json

@@ -63,12 +63,18 @@
     "ws": true,
     "changeOrigin": true
   },
-  "/kael": {
+  "/facelive": {
     "target": "http://localhost:5173",
     "secure": false,
     "ws": true,
     "changeOrigin": true
   },
+  "/kael": {
+    "target": "http://localhost:5172",
+    "secure": false,
+    "ws": true,
+    "changeOrigin": true
+  },
   "/ui/": {
     "target": "http://localhost:9528",
     "secure": false,

src/app/elements/chat/chat.component.ts

@@ -139,6 +139,7 @@ export class ElementChatComponent implements OnInit, OnDestroy {
 
     elements.forEach(element => {
       element.addEventListener('mousedown', (event: MouseEvent) => {
+        if (event.button !== 0) return;
         event.preventDefault();
         startDrag(event);
       }, false);

src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts

@@ -120,6 +120,20 @@ export class ElementAdvancedOptionComponent implements OnChanges, OnInit {
           }
           return true;
         }
+      },
+      {
+        type: 'select',
+        field: 'rdp_connection_speed',
+        label: 'RDP connection speed',
+        hidden: () => {
+          return this.connectMethod && this.connectMethod.component !== 'razor';
+        },
+        value: 'auto',
+        options: [
+          {label: 'Auto', value: 'auto'},
+          {label: 'Low Speed Broadband (256 Kbps - 2 Mbps)', value: 'low_speed_broadband'},
+          {label: 'High-speed broadband (2 Mbps – 10 Mbps )', value: 'high_speed_broadband'},
+        ]
       }
     ];
   }

src/app/elements/connect/connect-dialog/connect-dialog.component.html

@@ -73,7 +73,7 @@ <h3>{{ "Connect" | translate }} - {{ asset.name | truncatechars:30 }}</h3>
           type="submit"
         >
           {{ "CONNECT"| translate }}
-          <span *ngIf="protocol && protocol.name === 'rdp'" class="online-num">
+          <span *ngIf="protocol && protocol.name === 'rdp' && viewAssetOnlineSessionInfo" class="online-num">
           ({{ 'Current online' | translate }}: {{ onlineNum === null ? '- ' : onlineNum }})
         </span>
         </button>

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

@@ -25,6 +25,7 @@ export class ElementConnectDialogComponent implements OnInit {
   public accountSelected: Account = null;
   public connectOption: Object;
   public outputData: ConnectData = new ConnectData();
+  public viewAssetOnlineSessionInfo: boolean = true;
   public manualAuthInfo: AuthInfo = new AuthInfo();
   public connectMethod: ConnectMethod = new ConnectMethod('Null', '', 'null', 'null');
   public preConnectData: ConnectData = new ConnectData();
@@ -92,6 +93,7 @@ export class ElementConnectDialogComponent implements OnInit {
         this.connectMethod = connectMethods[0];
       }
     }
+    this.viewAssetOnlineSessionInfo = this._settingSvc.globalSetting.VIEW_ASSET_ONLINE_SESSION_INFO
   }
 
   onProtocolChange(protocol) {
@@ -100,6 +102,9 @@ export class ElementConnectDialogComponent implements OnInit {
   }
 
   getOnlineNum() {
+    if (!this.viewAssetOnlineSessionInfo) {
+      return;
+    }
     if (this.protocol.name !== 'rdp') {
       return;
     }

src/app/elements/content/send-command-with-variable-dialog/send-command-with-variable-dialog.component.ts

@@ -19,7 +19,7 @@ export class ElementSendCommandWithVariableDialogComponent implements OnInit {
   }
   async getVariableFormMeta() {
     const adhoc = this.data.command.id
-    const url=`/api/v1/ops/variable/form_data/?t=${new Date().getTime()}&adhoc=${adhoc}`
+    const url=`/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&adhoc=${adhoc}`
     const res: any = await this._http.options(url).toPromise();
     this.formConfig = res.actions.GET;
     this.command = this.data.command;

src/app/elements/elements.component.ts

@@ -31,11 +31,14 @@ import {ElementConnectorGuideComponent} from '@app/elements/content/content-wind
 import {ElementCommandDialogComponent} from '@app/elements/content/command-dialog/command-dialog.component';
 import {ElementSendCommandDialogComponent} from '@app/elements/content/send-command-dialog/send-command-dialog.component';
 // tslint:disable-next-line:max-line-length
-import {ElementSendCommandWithVariableDialogComponent} from '@app/elements/content/send-command-with-variable-dialog/send-command-with-variable-dialog.component';
+import {
+  ElementSendCommandWithVariableDialogComponent
+} from '@app/elements/content/send-command-with-variable-dialog/send-command-with-variable-dialog.component';
 import {DynamicFormComponent} from '@app/elements/content/variable-dynamic-form/variable-dynamic-form.component';
 import {ElementChatComponent} from '@app/elements/chat/chat.component';
 import {ElementsPartsComponent} from './replay/parts/parts.component';
 import {ElementConnectorNecComponent} from '@app/elements/content/content-window/nec/nec.component';
+import {ElementFaceMonitorComponent} from '@app/elements/face-monitor/face-monitor.component';
 
 
 export const ElementComponents = [
@@ -51,6 +54,7 @@ export const ElementComponents = [
   ElementNavComponent,
   ElementChatComponent,
   ElementIframeComponent,
+  ElementFaceMonitorComponent,
   ElementDialogAlertComponent,
   ElementAssetTreeComponent,
   ElementConnectorKokoComponent,

src/app/elements/face-monitor/face-monitor.component.html

@@ -0,0 +1,22 @@
+<div class="box" [class.minimized]="isMinimized" *ngIf="isVisible">
+  <div class="box-header">
+    <span class="box-title" style="color: red" *ngIf="monitoringTabCount">●&nbsp;[{{ monitoringTabCount }}]个会话正在被监控中</span>
+    <div class="box-controls">
+      <button (click)="minimizeBox()">
+        <i *ngIf="!isMinimized" class="fa fa-window-minimize"></i>
+        <i *ngIf="isMinimized" class="fa fa-window-maximize"></i>
+      </button>
+      <button (click)="closeBox()">
+        <i class="fa fa-window-close"></i>
+      </button>
+    </div>
+  </div>
+  <div class="box-content" [hidden]="isMinimized">
+    <iframe
+      *ngIf="faceMonitorUrl"
+      [src]="faceMonitorUrl"
+      allow="camera"
+      sandbox="allow-scripts allow-same-origin"
+      style="width: 100%; height: 400px;border: none;"></iframe>
+  </div>
+</div>

src/app/elements/face-monitor/face-monitor.component.scss

@@ -0,0 +1,50 @@
+.box {
+  position: absolute;
+  width: 400px;
+  height: 460px;
+  bottom: 0;
+  right: 0;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  z-index: 99999;
+}
+
+.box.minimized {
+  height: 40px;
+}
+
+.box-header {
+  height: 40px;
+  background-color: #3a3433;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 10px;
+}
+
+.box-title {
+  font-weight: bold;
+}
+
+.box-controls button {
+  background: none;
+  border: none;
+  color: white;
+  font-size: 14px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+
+.box-controls button:hover {
+  text-decoration: underline;
+}
+
+.box-content {
+  flex: 1;
+  padding: 8px;
+  background-color: #2f2a2a;
+  overflow: auto;
+}

src/app/elements/face-monitor/face-monitor.component.ts

@@ -0,0 +1,47 @@
+import {Component, OnInit} from '@angular/core';
+import {FaceService} from '@app/services/face';
+import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';
+
+@Component({
+  selector: 'app-face-monitor',
+  templateUrl: './face-monitor.component.html',
+  styleUrls: ['./face-monitor.component.scss']
+})
+export class ElementFaceMonitorComponent implements OnInit {
+
+  constructor(
+    private faceMonitorService: FaceService,
+    private sanitizer: DomSanitizer
+  ) {
+    this.faceMonitorService.isVisible$.subscribe(status => {
+      this.isVisible = status;
+    });
+    this.faceMonitorService.monitoringTabCount$.subscribe(count => {
+      if (count > 0) {
+        this.ready = true;
+      }
+      this.monitoringTabCount = count;
+      if (this.ready && this.monitoringTabCount === 0) {
+        this.isVisible = false;
+      }
+    });
+  }
+
+  public faceMonitorUrl: SafeResourceUrl;
+  public isMinimized = false;
+  public isVisible = true;
+  public monitoringTabCount = 0;
+  public ready = false;
+
+  ngOnInit() {
+    this.faceMonitorUrl = this.sanitizer.bypassSecurityTrustResourceUrl('/facelive/monitor?token=' + this.faceMonitorService.getToken());
+  }
+
+  minimizeBox() {
+    this.isMinimized = !this.isMinimized;
+  }
+
+  closeBox() {
+    this.isVisible = false;
+  }
+}

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

@@ -5,6 +5,7 @@ import {MatDialog} from '@angular/material';
 import {Subject} from 'rxjs';
 import {debounceTime} from 'rxjs/operators';
 import {environment} from '@src/environments/environment';
+import {FaceService} from '@app/services/face';
 
 @Component({
   selector: 'elements-iframe',
@@ -32,6 +33,7 @@ export class ElementIframeComponent implements OnInit, AfterViewInit, OnDestroy
     private _http: HttpService,
     private _dialog: MatDialog,
     public viewSrv: ViewService,
+    private faceService: FaceService
   ) {
   }
 
@@ -67,9 +69,15 @@ export class ElementIframeComponent implements OnInit, AfterViewInit, OnDestroy
           break;
         case 'CLOSE':
           this.view.connected = false;
+          if (this.view.connectToken.face_monitor_token) {
+            this.faceService.removeMonitoringTab(this.view.id);
+          }
           break;
         case 'CONNECTED':
           this.view.connected = true;
+          if (this.view.connectToken.face_monitor_token) {
+            this.faceService.addMonitoringTab(this.view.id);
+          }
           break;
         case 'CLICK':
           document.body.click();

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

@@ -46,10 +46,6 @@ export class ElementNavComponent implements OnInit {
     this.viewIds = this._viewSrv.viewIds;
   }
 
-  refreshNav() {
-    this.navs = this.getNav();
-  }
-
   getNav() {
     return [
       {
@@ -97,36 +93,7 @@ export class ElementNavComponent implements OnInit {
       {
         id: 'Language',
         name: 'Language',
-        children: [
-          {
-            id: 'English',
-            click: () => {
-              this._i18n.use('en');
-            },
-            name: 'English'
-          },
-          {
-            id: 'Chinese',
-            click: () => {
-              this._i18n.use('zh');
-            },
-            name: '中文'
-          },
-          {
-            id: 'Chinese-hant',
-            click: () => {
-              this._i18n.use('zh_hant');
-            },
-            name: '中文(繁體)'
-          },
-          {
-            id: 'Japanese',
-            click: () => {
-              this._i18n.use('ja');
-            },
-            name: '日本語'
-          }
-        ]
+        children: this.getLanguageOptions(),
       },
       {
         id: 'Setting',
@@ -232,6 +199,24 @@ export class ElementNavComponent implements OnInit {
     ];
   }
 
+  getLanguageOptions() {
+    const langOptions = [];
+    this._settingSvc.afterInited().then((state) => {
+      const languages = this._settingSvc.globalSetting.LANGUAGES;
+      for (const langObj of languages) {
+        langOptions.push({
+          id: langObj.code,
+          click: () => {
+            this._i18n.use(langObj.code);
+            window.location.reload();
+          },
+          name: langObj.name
+        });
+      }
+    });
+    return langOptions;
+  }
+
   onJumpUi() {
     window.open('/ui/', '_blank');
   }