perf: 连接时支持连接参数

jumpserver · Jun 5, 2023 · 1a1c896 · 1a1c896
1 parent a3d549a
commit 1a1c896
Show file tree

Hide file tree

Showing 10 changed files with 173 additions and 95 deletions.
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "license": "GPLv3",
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --base-href=/luna/ --disable-host-check",
+    "start": "ng serve --hmr --proxy-config proxy.conf.json --host 0.0.0.0 --base-href=/luna/ --disable-host-check",
     "build": "ng build --prod --base-href=/luna/ --output-path 'luna'",
     "extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/*.json  --sort --format namespaced-json",
     "test": "ng test",

diff --git a/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.html b/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.html
@@ -1,48 +1,45 @@
-<div class="advanced-option" *ngIf="isShowAdvancedOption">
+<div class="advanced-option">
   <mat-accordion>
-    <mat-expansion-panel>
+    <mat-expansion-panel [disabled]="!isShowAdvancedOption">
       <mat-expansion-panel-header style="height: 32px;">
         <mat-panel-title>
           {{ 'Advanced option' | translate }}
         </mat-panel-title>
       </mat-expansion-panel-header>
-
-      <ng-container *ngFor="let item of advancedOptions">
-        <mat-checkbox
-          #checkbox
-          *ngIf="item.type == 'checkbox'"
-          [hidden]="!item.hidden()"
-          [name]="item.field"
-          [(ngModel)]="item.value"
-          (ngModelChange)="optionChange($event)"
-        >
-          {{ item.label | translate }}
-        </mat-checkbox>
 
-        <div
-          *ngIf="item.type == 'radio'"
-          [hidden]="!item.hidden()"
-        >
-          <label id="radio-label">
-            {{item.label + ':'}}
-          </label>
-          <mat-radio-group
-            aria-labelledby="example-radio-group-label"
-            class="example-radio-group"
-            (ngModelChange)="optionChange($event)"
-            [(ngModel)]="item.value"
-          >
-            <mat-radio-button
-              *ngFor="let i of item.options"
-              [value]="i"
-              class="example-radio-button"
+      <div *ngIf="isShowAdvancedOption" class="options-container">
+        <ng-container *ngFor="let item of advancedOptions">
+          <div *ngIf="item.type === 'checkbox'" class="option-item">
+            <mat-checkbox
+              (ngModelChange)="optionChange($event)"
+              [(ngModel)]="item.value"
+              [name]="item.field"
             >
-              {{i}}
-            </mat-radio-button>
-          </mat-radio-group>
-        </div>
-      </ng-container>
-
+              {{ item.label | translate }}
+            </mat-checkbox>
+          </div>
+          <ng-container *ngIf="item.type === 'select'">
+            <mat-form-field class="option-item">
+              <mat-label>{{ item.label | translate }}</mat-label>
+              <mat-select [(ngModel)]="item.value" [name]="item.field">
+                <mat-option *ngFor="let option of item.options" [value]="option.value">
+                  {{ option.label | translate }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+          </ng-container>
+          <ng-container *ngIf="item.type === 'radio'">
+            <div class="option-item">
+              <mat-radio-group [(ngModel)]="item.value" [name]="item.field">
+                <mat-label style="margin-right: 10px">{{ item.label | translate }}</mat-label>
+                <mat-radio-button *ngFor="let option of item.options" [value]="option.value">
+                  {{ option.label | translate }}
+                </mat-radio-button>
+              </mat-radio-group>
+            </div>
+          </ng-container>
+        </ng-container>
+      </div>
     </mat-expansion-panel>
   </mat-accordion>
 </div>
diff --git a/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.scss b/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.scss
@@ -1,40 +1,78 @@
 .advanced-option {
   margin-top: 1.25em;
 }
+
 .mat-expansion-panel-header {
-  height: 32px!important;
-  padding: 0;
-  padding-right: 4px;
+  height: 32px !important;
+  padding: 0 4px 0 0;
 }
+
 .mat-expansion-panel-header-title {
   color: rgba(0, 0, 0, 0.54);
   font-size: 13px;
 }
+
 .mat-expansion-panel:not([class*=mat-elevation-z]) {
   box-shadow: none;
 }
+
 .mat-expansion-panel {
-  border-bottom: 1px solid rgba(0, 0, 0, 0.42);
+  border-bottom: 1px solid rgb(0, 0, 0, 12%);
+
   &::ng-deep .mat-expansion-panel-body {
-    padding: 0 0 14px!important;
+    padding: 0 0 0 !important;
   }
 }
+
+.mat-expansion-panel.mat-expanded {
+  border-bottom: none;
+
+  &::ng-deep .mat-expansion-panel-content {
+    padding: 10px 5px 0 5px;
+    border: solid 1px rgb(0, 0, 0, 12%);
+  }
+}
+
 .mat-accordion .mat-expansion-panel:last-of-type {
   border-bottom-right-radius: 0;
   border-bottom-left-radius: 0;
 }
+
 .example-radio-group {
   display: flex;
   flex-direction: column;
   margin-top: 4px;
 }
+
 .example-radio-button {
   margin: 2px;
 }
-.ng-star-inserted {
-  margin-top: 5px;
+
+
+.option-item.mat-form-field {
+  margin-top: 10px;
+}
+
+.option-item {
+  flex: 0 0 49%;
+  box-sizing: border-box;
+}
+
+.option-item:first-child {
+  margin-left: 0;
+}
+
+.mat-checkbox-layout {
+  margin-left: 12px !important;
+}
+
+.options-container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline; /* 添加这一行 */
 }
- .mat-checkbox-layout {
-  margin-left: 12px!important;
+
+.options-container > ng-container {
+
 }
 
diff --git a/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts b/src/app/elements/connect/connect-dialog/advanced-option/advanced-option.component.ts
@@ -1,5 +1,6 @@
-import {Component, Input, OnChanges, Output, EventEmitter} from '@angular/core';
+import {Component, EventEmitter, Input, OnChanges, Output} from '@angular/core';
 import {ConnectMethod, ConnectOption, Protocol} from '@app/model';
+import {resolutionsChoices} from '@app/globals';
 
 @Component({
   selector: 'elements-advanced-option',
@@ -12,24 +13,58 @@ export class ElementAdvancedOptionComponent implements OnChanges {
   @Output() onOptionsChange = new EventEmitter<ConnectOption[]>();
   public advancedOptions: ConnectOption[] = [];
   public isShowAdvancedOption = false;
-  public needShowAutoCompletionProtocols: Array<string> = ['mysql', 'mariadb'];
 
-  constructor() {}
+  constructor() {
+  }
 
   ngOnChanges() {
     this.advancedOptions = [
       {
-        type: 'checkbox',
+        type: 'select',
+        field: 'charset',
+        label: 'Charset',
+        hidden: () => {
+          const protocolsCanCharset: Array<string> = ['ssh', 'telnet'];
+          console.log('CUrrent protocol', this.protocol);
+          return this.connectMethod.component !== 'koko' || !protocolsCanCharset.includes(this.protocol.name);
+        },
+        value: 'default',
+        options: [
+          {label: 'Default', value: 'default'},
+          {label: 'UTF-8', value: 'utf8'},
+          {label: 'GBK', value: 'gbk'},
+        ]
+      },
+      {
+        type: 'select',
         field: 'disableautohash',
         hidden: () => {
-          return this.connectMethod.value === 'web_cli'
-          && this.needShowAutoCompletionProtocols.includes(this.protocol.name);
+          console.log('CUrrent protocol hash', this.protocol);
+          const protocolsCanAutoHash: Array<string> = ['mysql', 'mariadb'];
+          return this.connectMethod.component !== 'koko' || !protocolsCanAutoHash.includes(this.protocol.name);
         },
         label: 'Disable auto completion',
-        value: false
+        value: false,
+        options: [
+          {label: 'Yes', value: true},
+          {label: 'No', value: false},
+        ]
+      },
+      {
+        type: 'select',
+        field: 'resolution',
+        hidden: () => {
+          const protocolsCanResolution: Array<string> = ['rdp'];
+          console.log('CUrrent protocol res', this.protocol);
+          return !protocolsCanResolution.includes(this.protocol.name);
+        },
+        options: resolutionsChoices.map(i => ({label: i, value: i})),
+        label: 'Resolution',
+        value: 'Auto'
       }
     ];
-    this.isShowAdvancedOption = this.advancedOptions.some(i => i.hidden());
+    this.advancedOptions = this.advancedOptions.filter(i => !i.hidden());
+    this.isShowAdvancedOption = this.advancedOptions.length > 0;
   }
 
   optionChange(event) {

diff --git a/src/app/elements/setting/setting.component.ts b/src/app/elements/setting/setting.component.ts
@@ -4,6 +4,7 @@ import {SettingService} from '@app/services';
 import {GlobalSetting, Setting} from '@app/model';
 import {I18nService} from '@app/services/i18n';
 import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {resolutionsChoices} from '@app/globals';
 
 
 @Component({
@@ -12,12 +13,12 @@ import {MAT_DIALOG_DATA} from '@angular/material/dialog';
   styleUrls: ['./setting.component.css']
 })
 export class ElementSettingComponent implements OnInit {
-  resolutionsChoices = ['Auto', '1024x768', '1366x768', '1600x900', '1920x1080'];
   public boolChoices: any[];
   public keyboardLayoutOptions: any[];
   setting: Setting;
   globalSetting: GlobalSetting;
   type = 'general';
+  resolutionsChoices = resolutionsChoices;
 
   constructor(public dialogRef: MatDialogRef<ElementSettingComponent>,
               private _i18n: I18nService,
@@ -28,13 +29,13 @@ export class ElementSettingComponent implements OnInit {
       {name: _i18n.instant('No'), value: '0'}
     ];
     this.keyboardLayoutOptions = [
-      { value: 'en-us-qwerty', label: _i18n.instant('US English keyboard layout') },
-      { value: 'en-gb-qwerty', label: _i18n.instant('UK English keyboard layout') },
-      { value: 'ja-jp-qwerty', label: _i18n.instant('Japanese keyboard layout') },
-      { value: 'fr-fr-azerty', label: _i18n.instant('French keyboard layout') },
-      { value: 'fr-ch-qwertz', label: _i18n.instant('Swiss French keyboard layout') },
-      { value: 'fr-be-azerty', label: _i18n.instant('Belgian French keyboard layout') },
-      { value: 'tr-tr-qwerty', label: _i18n.instant('Turkey keyboard layout') }
+      {value: 'en-us-qwerty', label: _i18n.instant('US English keyboard layout')},
+      {value: 'en-gb-qwerty', label: _i18n.instant('UK English keyboard layout')},
+      {value: 'ja-jp-qwerty', label: _i18n.instant('Japanese keyboard layout')},
+      {value: 'fr-fr-azerty', label: _i18n.instant('French keyboard layout')},
+      {value: 'fr-ch-qwertz', label: _i18n.instant('Swiss French keyboard layout')},
+      {value: 'fr-be-azerty', label: _i18n.instant('Belgian French keyboard layout')},
+      {value: 'tr-tr-qwerty', label: _i18n.instant('Turkey keyboard layout')}
     ];
   }
 

diff --git a/src/app/globals.ts b/src/app/globals.ts
@@ -1,8 +1,7 @@
 'use strict';
 import {EventEmitter} from 'events/events';
 import {BehaviorSubject} from 'rxjs';
-import {ConnectEvt, User as _User} from './model';
-import {DataStore as _DataStore, Browser as _Browser, Video as _Video, Monitor as _Monitor} from './model';
+import {Browser as _Browser, ConnectEvt, DataStore as _DataStore, Monitor as _Monitor, User as _User, Video as _Video} from './model';
 
 export let TermWS = null;
 export const emitter = new (EventEmitter);
@@ -34,3 +33,4 @@ export const ROOT_ORG_ID = '00000000-0000-0000-0000-000000000000';
 
 export const connectEvt = new BehaviorSubject<ConnectEvt>(new ConnectEvt(null, null));
 
+export const resolutionsChoices = ['Auto', '1024x768', '1366x768', '1600x900', '1920x1080'];
diff --git a/src/app/model.ts b/src/app/model.ts
@@ -20,7 +20,7 @@ export class User {
   date_joined: string;
   last_login: string;
   date_expired: string;
-  groups: Array <UserGroup>;
+  groups: Array<UserGroup>;
   logined: boolean;
 }
 
@@ -158,7 +158,9 @@ export class View {
 
   getConnectOption(field: string) {
     const connectOptions = this.connectOptions || [];
-    if (connectOptions.length === 0) { return ''; }
+    if (connectOptions.length === 0) {
+      return '';
+    }
     const filteredField = connectOptions.find(i => i.field === field);
     return filteredField ? filteredField.value.toString() : '';
   }
@@ -344,7 +346,7 @@ export class AuthInfo {
 }
 
 export class ConnectOption {
-  type: 'checkbox' | 'radio';
+  type: 'checkbox' | 'radio' | 'select';
   field: string;
   hidden: Function;
   label: string;
@@ -398,7 +400,7 @@ export class ConnectionToken {
   from_ticket_info: FromTicketInfo;
 }
 
-export class Protocol  {
+export class Protocol {
   name: string;
   port: number;
   public: boolean;
@@ -450,6 +452,7 @@ export interface Organization {
   is_root?: boolean;
   is_default?: boolean;
 }
+
 export class InitTreeConfig {
   refresh: boolean;
   apiName?: string;