Usar un complemento de puerta de enlace personalizado en la extensión de herramienta

Artículo
10/05/2023

Se aplica a: Windows Admin Center, versión preliminar de Windows Admin Center

En este artículo, usaremos un complemento de puerta de enlace personalizado en una nueva extensión de herramienta vacía que hemos creado con la CLI de Windows Admin Center.

Preparación del entorno

Si aún no lo ha hecho, siga las instrucciones de Desarrollar una extensión de herramienta para preparar el entorno y crear una nueva extensión de herramienta vacía.

Adición de un módulo al proyecto

Si aún no lo ha hecho, agregue al proyecto un módulo vacío nuevo, que usaremos en el paso siguiente.

Incorporación de integración al complemento de puerta de enlace personalizado

Ahora usaremos un complemento de puerta de enlace personalizado en el nuevo módulo vacío que acaba de crear.

Creación de plugin.service.ts

Cambie al directorio del módulo de herramientas creado anteriormente (\src\app\{!Module-Name}) y cree un archivo plugin.service.ts nuevo.

Agregue el código siguiente al archivo que acaba de crear:

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;
            }
        )
    }
}

Cambie las referencias a Sample Uno y Sample%20Uno al nombre de la característica según corresponda.

Advertencia

Se recomienda usar el elemento integrado this.appContextService.node para llamar a cualquier API que se defina en el complemento de puerta de enlace personalizado. Esto garantizará que, si se requieren credenciales dentro del complemento de puerta de enlace, se controlarán correctamente.

Modificación de module.ts

Abra el archivo module.ts del nuevo módulo creado anteriormente (es decir, {!Module-Name}.module.ts):

Agregue las siguientes instrucciones import:

import { HttpService } from '@microsoft/windows-admin-center-sdk/angular';
import { Http } from '@microsoft/windows-admin-center-sdk/core';
import { PluginService } from './plugin.service';

Agregue los siguientes proveedores (después de las declaraciones):

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Modificación de component.ts

Abra el archivo component.ts del nuevo módulo creado anteriormente (es decir, {!Module-Name}.component.ts):

Agregue las siguientes instrucciones import:

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';

Agregue las siguientes variables:

  private serviceSubscription: Subscription;
  private responseResult: string;

Modifique el constructor y modifique o agregue las funciones siguientes:

  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);
      }
    );
  }

Modificación de component.html

Abra el archivo component.html del nuevo módulo creado anteriormente (es decir, {!Module-Name}.component.html):

Agregue el siguiente contenido al archivo HTML:

<button (click)="onClick()" >go</button>
{{ responseResult }}

Compilación y carga lateral de la extensión

Ahora está listo para compilar y cargar lateralmente la extensión en Windows Admin Center.

Share via