|
| 1 | +import {Component, Input, OnInit} from '@angular/core'; |
| 2 | +import {Account, Asset, ConnectionToken, Endpoint, View} from '@app/model'; |
| 3 | +import {ConnectTokenService, HttpService, I18nService, SettingService} from '@app/services'; |
| 4 | +import {ToastrService} from 'ngx-toastr'; |
| 5 | + |
| 6 | +import {Command, InfoItem} from '../guide/model'; |
| 7 | +import {User} from '@app/globals'; |
| 8 | + |
| 9 | +@Component({ |
| 10 | + selector: 'elements-connector-nec', |
| 11 | + templateUrl: './nec.component.html', |
| 12 | + styleUrls: ['./nec.component.scss'] |
| 13 | +}) |
| 14 | + |
| 15 | +export class ElementConnectorNecComponent implements OnInit { |
| 16 | + @Input() view: View; |
| 17 | + |
| 18 | + asset: Asset; |
| 19 | + account: Account; |
| 20 | + protocol: string; |
| 21 | + endpoint: Endpoint; |
| 22 | + name: string; |
| 23 | + cli: string; |
| 24 | + infoItems: Array<InfoItem> = []; |
| 25 | + info: any; |
| 26 | + globalSetting: any; |
| 27 | + loading = true; |
| 28 | + passwordMask = '******'; |
| 29 | + passwordShow = '******'; |
| 30 | + token: ConnectionToken; |
| 31 | + showSetReusable: boolean; |
| 32 | + commands: Array<Command> = []; |
| 33 | + |
| 34 | + constructor(private _http: HttpService, |
| 35 | + private _i18n: I18nService, |
| 36 | + private _toastr: ToastrService, |
| 37 | + private _connectTokenSvc: ConnectTokenService, |
| 38 | + private _settingSvc: SettingService |
| 39 | + ) { |
| 40 | + this.globalSetting = this._settingSvc.globalSetting; |
| 41 | + this.showSetReusable = this.globalSetting.CONNECTION_TOKEN_REUSABLE; |
| 42 | + } |
| 43 | + |
| 44 | + async ngOnInit() { |
| 45 | + const {asset, account, protocol, smartEndpoint, connectToken} = this.view; |
| 46 | + this.token = connectToken; |
| 47 | + this.asset = asset; |
| 48 | + this.account = account; |
| 49 | + this.protocol = protocol; |
| 50 | + this.endpoint = smartEndpoint; |
| 51 | + |
| 52 | + const oriHost = this.asset.address; |
| 53 | + this.name = `${this.asset.name}(${oriHost})`; |
| 54 | + this.setConnectionInfo(); |
| 55 | + this.genConnCli(); |
| 56 | + this.loading = false; |
| 57 | + this.view.termComp = this; |
| 58 | + } |
| 59 | + |
| 60 | + setConnectionInfo() { |
| 61 | + this.infoItems = [ |
| 62 | + {name: 'name', value: this.name, label: this._i18n.t('Name')}, |
| 63 | + {name: 'host', value: this.endpoint.getHost(), label: this._i18n.t('Host')}, |
| 64 | + {name: 'port', value: this.endpoint.getPort(this.protocol), label: this._i18n.t('Port')}, |
| 65 | + {name: 'username', value: this.token.id, label: this._i18n.t('Username')}, |
| 66 | + {name: 'password', value: this.token.value, label: this._i18n.t('Password')}, |
| 67 | + {name: 'protocol', value: this.protocol, label: this._i18n.t('Protocol')}, |
| 68 | + {name: 'date_expired', value: `${this.token.date_expired}`, label: this._i18n.t('Expire time')}, |
| 69 | + ]; |
| 70 | + if (this.showSetReusable) { |
| 71 | + this.infoItems.push({name: 'set_reusable', value: '', label: this._i18n.t('Set reusable')}); |
| 72 | + } |
| 73 | + |
| 74 | + this.info = this.infoItems.reduce((pre, current) => { |
| 75 | + pre[current.name] = current.value; |
| 76 | + return pre; |
| 77 | + }, {}); |
| 78 | + } |
| 79 | + |
| 80 | + genConnCli() { |
| 81 | + const {password, host, port, protocol} = this.info; |
| 82 | + // Password placeholders. Because there is a safe cli, the secret needs to be hidden, so the placeholders are replaced |
| 83 | + const passwordHolder = `@${password}@`; |
| 84 | + let cli = ''; |
| 85 | + |
| 86 | + switch (this.protocol) { |
| 87 | + case 'vnc': |
| 88 | + cli = `vncviewer` + |
| 89 | + ` -UserName=${this.token.id}` + |
| 90 | + ` ${host}:${port || '5900'}`; |
| 91 | + break; |
| 92 | + |
| 93 | + default: |
| 94 | + cli = `Protocol '${protocol}' Not support now`; |
| 95 | + } |
| 96 | + const cliSafe = cli.replace(passwordHolder, this.passwordMask); |
| 97 | + const cliValue = cli.replace(passwordHolder, password); |
| 98 | + this.cli = cliValue; |
| 99 | + const vncPort = port || '5900'; |
| 100 | + const cliDirect = `vncviewer -UserName=${User.username}#${this.account.username}#${this.asset.id} ${this.endpoint.host}:${vncPort}`; |
| 101 | + |
| 102 | + this.commands = [ |
| 103 | + { |
| 104 | + title: this._i18n.instant('Connect command line') + ' (' + this._i18n.instant('Using token') + ')', |
| 105 | + value: cliValue, |
| 106 | + safeValue: cliSafe, |
| 107 | + helpText: this._i18n.instant('Password is token password on the table'), |
| 108 | + callClient: false |
| 109 | + }, |
| 110 | + { |
| 111 | + title: this._i18n.instant('Connect command line') + ' (' + this._i18n.instant('Directly') + ')', |
| 112 | + value: cliDirect, |
| 113 | + safeValue: cliDirect, |
| 114 | + helpText: this._i18n.instant('Password is your password login to system'), |
| 115 | + callClient: false |
| 116 | + } |
| 117 | + ]; |
| 118 | + } |
| 119 | + |
| 120 | + async reconnect() { |
| 121 | + const oldConnectToken = this.view.connectToken; |
| 122 | + const newConnectToken = await this._connectTokenSvc.exchange(oldConnectToken); |
| 123 | + if (!newConnectToken) { |
| 124 | + return; |
| 125 | + } |
| 126 | + // 更新当前 view 的 connectToken |
| 127 | + this.view.connectToken = newConnectToken; |
| 128 | + await this.ngOnInit(); |
| 129 | + // 刷新完成隐藏密码 |
| 130 | + this.passwordShow = this.passwordMask; |
| 131 | + } |
| 132 | +} |
0 commit comments