ツール拡張機能でカスタムのゲートウェイ プラグインを使用する

この記事では、Windows Admin Center CLI で作成した新しい空のツール拡張機能で、カスタム ゲートウェイ プラグインを使用します。

環境を準備する

まだ行っていない場合は、ツール拡張機能を開発する手順に従って環境を準備し、新しい空のツール拡張機能を作成します。

モジュールをプロジェクトに追加する

まだ行っていない場合は、新しい空のモジュールをプロジェクトに追加します。これは次の手順で使用します。

カスタム ゲートウェイ プラグインに統合を追加する

次に、作成したばかりの新しい空のモジュールでカスタム ゲートウェイ プラグインを使用します。

plugin.service.ts を作成する

上で作成した新しいツール モジュール (\src\app\{!Module-Name}) のディレクトリに移動し、新しいファイル plugin.service.ts を作成します。

次のコードを作成したばかりのファイルに追加します

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

必要に応じて、Sample Uno と Sample%20Uno の参照を使用する機能名に変更します。

module.ts を変更する

前に作成した新しいモジュールの module.ts ファイル (つまり {!Module-Name}.module.ts) を開きます。

次の import ステートメントを追加します。

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

次のプロバイダーを追加します (宣言の後)。

  ,
  providers: [
    HttpService,
    PluginService,
    Http
  ]

component.ts を変更する

前に作成した新しいモジュールの component.ts ファイル (つまり {!Module-Name}.component.ts) を開きます。

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

次の変数を追加します。

  private serviceSubscription: Subscription;
  private responseResult: string;

コンストラクターを変更し、次の関数を変更/追加します。

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

component.html を変更する

前に作成した新しいモジュールの component.html ファイル (つまり {!Module-Name}.component.html) を開きます。

次の内容を html ファイルに追加します。

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

拡張機能をビルドしてサイドロードする

これで、Windows Admin Center で拡張機能をビルドしてサイド ロードする準備ができました。