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

Article
11/02/2024
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 avec l’interface CLI Windows Admin Center.

Préparation de votre environnement

Si ce n’est pas déjà fait, suivez les instructions décrites 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 déjà fait, ajoutez un nouveau module vide à votre projet. Nous l’utiliserons à l’étape suivante.

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

Nous allons maintenant utiliser un plug-in de passerelle personnalisé dans le nouveau module vide que nous venons de créer.

Créer plugin.service.ts

Accédez au répertoire du nouveau module d’outil créé ci-dessus (\src\app\{!Module-Name}), puis créez un 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 par le nom de votre fonctionnalité comme il convient.

Avertissement

Il est recommandé que le this.appContextService.node intégré soit utilisé pour appeler toute API définie dans votre plug-in de passerelle personnalisé. Cela garantit que si les informations d’identification sont requises à l’intérieur de votre plug-in de passerelle, elles seront gérées correctement.

Modifier module.ts

Ouvrez le fichier module.ts du nouveau module créé précédemment (autrement dit, {!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 component.ts

Ouvrez le fichier component.ts du nouveau module créé précédemment (autrement dit, {!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 fichier component.html du nouveau module créé précédemment (autrement dit, {!Module-Name}.component.html) :

Ajoutez le contenu suivant au fichier HTML :

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

Générer et charger de manière indépendante votre extension

Vous êtes maintenant prêt à générer et à charger de manière indépendante votre extension dans Windows Admin Center.

Partager via