Usar um plug-in de gateway personalizado em sua extensão de ferramenta
Aplica-se a: Windows Admin Center, Versão prévia do Windows Admin Center
neste artigo, usaremos um plug-in de gateway personalizado em uma nova extensão de ferramenta vazia que criamos com a CLI do centro de administração Windows.
Prepare o seu ambiente
Se você ainda não fez isso, siga as instruções em desenvolver uma extensão de ferramenta para preparar seu ambiente e criar uma nova extensão de ferramenta vazia.
Adicionar um módulo ao seu projeto
Se você ainda não fez isso, adicione um novo módulo vazio ao projeto, que usaremos na próxima etapa.
Adicionar integração ao plug-in de gateway personalizado
Agora, usaremos um plug-in de gateway personalizado no novo módulo vazio que acabamos de criar.
Criar plugin. Service. TS
Altere para o diretório do novo módulo de ferramenta criado acima ( \src\app\{!Module-Name}
) e crie um novo arquivo plugin.service.ts
.
Adicione o seguinte código ao arquivo recém-criado:
import { Injectable } from '@angular/core';
import { AppContextService, HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Cim, Http, PowerShell, PowerShellSession } from '@microsoft/windows-admin-center-sdk/core';
import { AjaxResponse, Observable } from 'rxjs';
@Injectable()
export class PluginService {
constructor(private appContextService: AppContextService, private http: Http) {
}
public getGatewayRestResponse(): Observable<any> {
let callUrl = this.appContextService.activeConnection.nodeName;
return this.appContextService.node.get(callUrl, 'features/Sample%20Uno').map(
(response: any) => {
return response;
}
)
}
}
Altere as referências para Sample Uno
e Sample%20Uno
para o nome do recurso conforme apropriado.
Aviso
É recomendável que o interno this.appContextService.node
seja usado para chamar qualquer API que esteja definida em seu plug-in de gateway personalizado. Isso garantirá que, se as credenciais forem necessárias dentro do seu plug-in de gateway, elas serão tratadas corretamente.
Modificar módulo. TS
Abra o module.ts
arquivo do novo módulo criado anteriormente (ou seja, {!Module-Name}.module.ts
):
Adicione as seguintes instruções de importação:
import { HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Http } from '@microsoft/windows-admin-center-sdk/core';
import { PluginService } from './plugin.service';
Adicione os seguintes provedores (após declarações):
,
providers: [
HttpService,
PluginService,
Http
]
Modificar componente. TS
Abra o component.ts
arquivo do novo módulo criado anteriormente (ou seja, {!Module-Name}.component.ts
):
Adicione as seguintes instruções de importação:
import { ActivatedRouteSnapshot } from '@angular/router';
import { AppContextService } from '@microsoft/windows-admin-center-sdk/angular';
import { Subscription } from 'rxjs';
import { Strings } from '../../generated/strings';
import { PluginService } from './plugin.service';
Adicione as seguintes variáveis:
private serviceSubscription: Subscription;
private responseResult: string;
Modifique o construtor e modifique/adicione as seguintes funções:
constructor(private appContextService: AppContextService, private plugin: PluginService) {
//
}
public ngOnInit() {
this.responseResult = 'click go to do something';
}
public onClick() {
this.serviceSubscription = this.plugin.getGatewayRestResponse().subscribe(
(response: any) => {
this.responseResult = 'response: ' + response.message;
},
(error) => {
console.log(error);
}
);
}
Modificar component.html
Abra o component.html
arquivo do novo módulo criado anteriormente (ou seja, {!Module-Name}.component.html
):
Adicione o seguinte conteúdo ao arquivo HTML:
<button (click)="onClick()" >go</button>
{{ responseResult }}
Compilar e carregar lado sua extensão
agora você está pronto para compilar e carregar lado sua extensão no centro de administração Windows.