从 Angular 应用程序启动/停止 docker 容器

Question

我正在创建一个基于微服务的应用程序，并且从一个角度前端我能够列出我所有的微服务，我添加了按钮来通过 docker rest API 停止/启动/重新启动每个微服务。

这是我来自 Angular 应用程序的 docker 服务类：

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, BehaviorSubject  } from 'rxjs';

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json',
    'Access-Control-Allow-Origin': '*',
    'Access-Control-Allow-Methods': 'GET, POST, PATCH, PUT, DELETE, OPTIONS',
    'Access-Control-Allow-Headers': 'Origin, Content-Type, X-Auth-Token'
  })
};

@Injectable({
  providedIn: 'root'
})
export class DockerService {


  private docker_api: string;

  constructor(private http: HttpClient) {
    this.docker_api = "http://10.1.10.202:5555/containers"
   }

   getContainerStatus(name: string) {
      return this.http.get(`${this.docker_api}/json?all=True&filters={"name":["${name}"]}` , httpOptions);
   }

   stopContainer(name: string) {
    this.http.post(`${this.docker_api}/${name}/stop`, {}, httpOptions);
   }

   startContainer(name: string) {
    this.http.post(`${this.docker_api}/${name}/start`, {}, httpOptions);
   }

   restartContainer(name: string) {
    this.http.post(`${this.docker_api}/${name}/restart`, {}, httpOptions);
   }


}

我正在从 setting.component.ts 访问它：

import { Component, OnInit } from '@angular/core';
import { ApplicationModel } from '../../application.model'
import { Router, ActivatedRoute } from '@angular/router'
import { ApiService } from '../../api-service.service'
import { DockerService } from '../../docker.service'
import { HttpClient } from '@angular/common/http'


@Component({
  selector: 'app-settings',
  templateUrl: './settings.component.html',
  styleUrls: ['./settings.component.scss']
})
export class SettingsComponent implements OnInit {

  app: ApplicationModel;
  apps : ApplicationModel[];
  container;
  map = new Map<string, string>();

  constructor(private router: Router, private route: ActivatedRoute, private _apiService: ApiService, private _dockerService: DockerService) { 
  }

  ngOnInit() {
    let id = +this.route.snapshot.params['id'];
    this._apiService.getApplications()
    .subscribe(data => {
      this.apps = data;
      console.log(data)
      for (let i = 0; i < this.apps.length; i++){
        if(this.apps[i].id == id){
          this.app = this.apps[i];
          console.log(this.app);
            this.app.microservices.forEach(ms => {
              console.log(ms);
                this._dockerService.getContainerStatus(ms.name).subscribe(data => {
              ms.state = data[0].State;
              console.log(data);
                });
            });
          console.log(this.app);
        }
      }
    });

  }

  back() {
    this.router.navigate(['/applications']);
  }

  start(name: string){
   this._dockerService.startContainer(name);
   console.log('started');
  }

  stop(name: string){
    this._dockerService.stopContainer(name);
     console.log('stopped');
  }

  restart(name: string){
   this._dockerService.restartContainer(name);
   console.log('restarted');
  }

}

在我的 html 模板中使用 (click) 调用启动/停止/重启函数：

<div class="row h-100">  
    <div class="col-lg-12 col-md-12 col-sm-12 text-center my-auto">
        <div *ngIf="app" class="card shadow text-center  mx-auto justify-content-center">
            <div class="card-header">
                <h1>{{app.name | uppercase}}</h1>
              </div>
              <table class="table table-striped">
                <thead>
                    <tr>
                      <th scope="col">Micro Service</th>
                      <th scope="col">Status</th>
                      <th scope="col">Actions</th>
                    </tr>
                <tbody>
                  <tr *ngFor="let ms of app.microservices">
                    <td style="width: 33%">{{ms.name}}</td>
                    <td style="width: 33%">
                        <div *ngIf="ms.state === 'running'; else elseBlock">
                {{ms.state}}
                        </div>
                        <ng-template #elseBlock>{{ms.state}}</ng-template>
                    </td>
                    <td style="width: 33%">
                        <a (click)="start(ms.name)"><img src="../../../assets/img/start.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                              <a (click)="stop(ms.name)"><img src="../../../assets/img/stop.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                        <a (click)="restart(ms.name)"><img src="../../../assets/img/restart.png" height="50px" width="50px" class="settings mx-auto" appSelector></a>
                    </td>
                  </tr>
                  <tr>
                    <td colspan="3" class="text-center"><a (click)="back()"><img src="../../../assets/img/back.png" height="50px" width="50px" class="settings mx-auto" appSelector></a></td>
                  </tr>
                </tbody>
              </table>
        </div>
    </div>
</div> 

但问题出在这里，什么也没有发生，console.log 工作但没有 API 调用，网络选项卡内没有任何内容，但请求与邮递员一起工作。

顺便说一句，在 NgOnInit 内部调用的来自 docker.service 的 getContainerStatus 工作正常。

有人可以帮助我吗？ 谢谢。

Answer 1

当您调用 docker 服务 http observables 时，您并没有订阅它们，因此您永远不会进行 ajax 调用。

start(name: string){
       this._dockerService.startContainer(name).subscribe();
       console.log('started');
}

您可能想在订阅完成时做一些事情，比如触发通知：

start(name: string){
       this._dockerService.startContainer(name).subscribe(() => /* do something nice */);
       console.log('started');
 }

您也可以点击控制台日志：

start(name: string){
       this._dockerService.startContainer(name)
            .pipe(
                tap(() => console.log('started'))
            )
            .subscribe(() => /* do something nice */);
 }