perf: add nec vnc component

src/app/elements/content/content-window/content-view/content-view.component.html

@@ -16,11 +16,16 @@
       [view]="view"
     >
     </elements-connector-koko>
+    <elements-connector-nec
+      *ngSwitchCase="'nec'"
+      [view]="view"
+    >
+    </elements-connector-nec>
     <elements-connector-default
       *ngSwitchDefault
       [connector]="connector"
       [view]="view"
     >
     </elements-connector-default>
   </div>
-</div>
+</div>

src/app/elements/content/content-window/nec/nec.component.html

@@ -0,0 +1,7 @@
+<elements-connector-guide
+  [assetType]="('Host' | translate)"
+  [canReuse]="true"
+  [commands]="commands"
+  [infoItems]="infoItems"
+  [token]="token"
+></elements-connector-guide>

src/app/elements/content/content-window/nec/nec.component.ts

@@ -0,0 +1,132 @@
+import {Component, Input, OnInit} from '@angular/core';
+import {Account, Asset, ConnectionToken, Endpoint, View} from '@app/model';
+import {ConnectTokenService, HttpService, I18nService, SettingService} from '@app/services';
+import {ToastrService} from 'ngx-toastr';
+
+import {Command, InfoItem} from '../guide/model';
+import {User} from '@app/globals';
+
+@Component({
+  selector: 'elements-connector-nec',
+  templateUrl: './nec.component.html',
+  styleUrls: ['./nec.component.scss']
+})
+
+export class ElementConnectorNecComponent implements OnInit {
+  @Input() view: View;
+
+  asset: Asset;
+  account: Account;
+  protocol: string;
+  endpoint: Endpoint;
+  name: string;
+  cli: string;
+  infoItems: Array<InfoItem> = [];
+  info: any;
+  globalSetting: any;
+  loading = true;
+  passwordMask = '******';
+  passwordShow = '******';
+  token: ConnectionToken;
+  showSetReusable: boolean;
+  commands: Array<Command> = [];
+
+  constructor(private _http: HttpService,
+              private _i18n: I18nService,
+              private _toastr: ToastrService,
+              private _connectTokenSvc: ConnectTokenService,
+              private _settingSvc: SettingService
+  ) {
+    this.globalSetting = this._settingSvc.globalSetting;
+    this.showSetReusable = this.globalSetting.CONNECTION_TOKEN_REUSABLE;
+  }
+
+  async ngOnInit() {
+    const {asset, account, protocol, smartEndpoint, connectToken} = this.view;
+    this.token = connectToken;
+    this.asset = asset;
+    this.account = account;
+    this.protocol = protocol;
+    this.endpoint = smartEndpoint;
+
+    const oriHost = this.asset.address;
+    this.name = `${this.asset.name}(${oriHost})`;
+    this.setConnectionInfo();
+    this.genConnCli();
+    this.loading = false;
+    this.view.termComp = this;
+  }
+
+  setConnectionInfo() {
+    this.infoItems = [
+      {name: 'name', value: this.name, label: this._i18n.t('Name')},
+      {name: 'host', value: this.endpoint.getHost(), label: this._i18n.t('Host')},
+      {name: 'port', value: this.endpoint.getPort(this.protocol), label: this._i18n.t('Port')},
+      {name: 'username', value: this.token.id, label: this._i18n.t('Username')},
+      {name: 'password', value: this.token.value, label: this._i18n.t('Password')},
+      {name: 'protocol', value: this.protocol, label: this._i18n.t('Protocol')},
+      {name: 'date_expired', value: `${this.token.date_expired}`, label: this._i18n.t('Expire time')},
+    ];
+    if (this.showSetReusable) {
+      this.infoItems.push({name: 'set_reusable', value: '', label: this._i18n.t('Set reusable')});
+    }
+
+    this.info = this.infoItems.reduce((pre, current) => {
+      pre[current.name] = current.value;
+      return pre;
+    }, {});
+  }
+
+  genConnCli() {
+    const {password, host, port, protocol} = this.info;
+    // Password placeholders. Because there is a safe cli, the secret needs to be hidden, so the placeholders are replaced
+    const passwordHolder = `@${password}@`;
+    let cli = '';
+
+    switch (this.protocol) {
+      case 'vnc':
+        cli = `vncviewer` +
+          ` -UserName=${this.token.id}` +
+          ` ${host}:${port || '5900'}`;
+        break;
+
+      default:
+        cli = `Protocol '${protocol}' Not support now`;
+    }
+    const cliSafe = cli.replace(passwordHolder, this.passwordMask);
+    const cliValue = cli.replace(passwordHolder, password);
+    this.cli = cliValue;
+    const vncPort = port || '5900';
+    const cliDirect = `vncviewer -UserName=${User.username}#${this.account.username}#${this.asset.id} ${this.endpoint.host}:${vncPort}`;
+
+    this.commands = [
+      {
+      title: this._i18n.instant('Connect command line') + ' (' + this._i18n.instant('Using token') + ')',
+      value: cliValue,
+      safeValue: cliSafe,
+      helpText:  this._i18n.instant('Password is token password on the table'),
+      callClient: false
+    },
+      {
+        title: this._i18n.instant('Connect command line') + ' (' + this._i18n.instant('Directly') + ')',
+        value: cliDirect,
+        safeValue: cliDirect,
+        helpText: this._i18n.instant('Password is your password login to system'),
+        callClient: false
+      }
+    ];
+  }
+
+  async reconnect() {
+    const oldConnectToken = this.view.connectToken;
+    const newConnectToken = await this._connectTokenSvc.exchange(oldConnectToken);
+    if (!newConnectToken) {
+      return;
+    }
+    // 更新当前 view 的 connectToken
+    this.view.connectToken = newConnectToken;
+    await this.ngOnInit();
+    // 刷新完成隐藏密码
+    this.passwordShow = this.passwordMask;
+  }
+}

src/app/elements/elements.component.ts

@@ -30,10 +30,12 @@ import {ElementsReplayMp4Component} from './replay/mp4/mp4.component';
 import {ElementConnectorGuideComponent} from '@app/elements/content/content-window/guide/guide.component';
 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 {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';
 
 
 export const ElementComponents = [
@@ -53,6 +55,7 @@ export const ElementComponents = [
   ElementAssetTreeComponent,
   ElementConnectorKokoComponent,
   ElementConnectorMagnusComponent,
+  ElementConnectorNecComponent,
   ElementConnectComponent,
   ElementDownloadDialogComponent,
   ElementACLDialogComponent,