Utiliser un plug-in de passerelle personnalisé dans votre extension d’outil

S'applique à : Windows Admin Center, Windows Admin Center Preview

dans cet article, nous allons utiliser un plug-in de passerelle personnalisé dans une nouvelle extension d’outil vide que nous avons créée à l’aide de l’interface de commande Windows du centre d’administration.

Préparation de votre environnement

Si vous ne l’avez pas déjà fait, suivez les instructions fournies dans développer une extension d’outil pour préparer votre environnement et créer une extension d’outil vide.

Ajouter un module à votre projet

Si vous ne l’avez pas encore fait, ajoutez un nouveau module vide à votre projet, que nous utiliserons à l’étape suivante.

Ajouter l’intégration au plug-in de passerelle personnalisé

À présent, nous allons utiliser un plug-in de passerelle personnalisé dans le nouveau module vide que nous venons de créer.

Créer un plug-in. service. TS

Accédez au répertoire du nouveau module d’outil créé ci-dessus ( \src\app\{!Module-Name} ), puis créez un nouveau fichier plugin.service.ts .

Ajoutez le code suivant au fichier que vous venez de créer :

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

Modifiez les références à Sample Uno et Sample%20Uno à votre nom de fonctionnalité, le cas échéant.

Avertissement

Il est recommandé d’utiliser le intégré this.appContextService.node pour appeler toute API définie dans le plug-in de votre passerelle personnalisée. Ainsi, si des informations d’identification sont requises dans le plug-in de votre passerelle, elles seront gérées correctement.

Modifier le module. TS

Ouvrez le module.ts fichier du nouveau module créé précédemment (c.-à-d. {!Module-Name}.module.ts ) :

Ajoutez les instructions d’importation suivantes :

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

Ajoutez les fournisseurs suivants (après les déclarations) :

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

Modifier le composant. TS

Ouvrez le component.ts fichier du nouveau module créé précédemment (c.-à-d. {!Module-Name}.component.ts ) :

Ajoutez les instructions d’importation suivantes :

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

Ajoutez les variables suivantes :

  private serviceSubscription: Subscription;
  private responseResult: string;

Modifiez le constructeur et modifiez/ajoutez les fonctions suivantes :

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

Modifier component.html

Ouvrez le component.html fichier du nouveau module créé précédemment (c.-à-d. {!Module-Name}.component.html ) :

Ajoutez le contenu suivant au fichier HTML :

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

Créez et chargez votre extension

vous êtes maintenant prêt à créer et à charger votre extension dans Windows centre d’administration.