Usar um plug-in de gateway personalizado em sua extensão de ferramenta

Artigo
11/02/2024
Aplica-se a:

✅ Windows Admin Center, ✅ Windows Admin Center Preview

Neste artigo, usaremos um gateway personalizado em uma nova extensão de ferramenta vazia que criamos com a CLI do Windows Admin Center.

Prepare o seu ambiente

Caso ainda não tenha feito 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

Caso ainda não tenha feito isso, adicione um novo módulo vazio ao seu 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 this.appContextService.node interno seja usado para chamar qualquer API definida no plug-in de gateway personalizado. Isso garantirá que, se as credenciais forem necessárias dentro do plug-in do gateway, elas serão tratadas corretamente.

Modificar module.ts

Abra o arquivo module.ts 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 as declarações):

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Modificar component.ts

Abra o arquivo component.ts 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 arquivo component.html 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 a extensão lateralmente

Agora você está pronto para compilar e carregar a extensão no Windows Admin Center.

Partilhar via