SUBMARINE-609. [WEB] Delete environment through UI

submarine-workbench/workbench-web-ng/src/app/interfaces/environment-spec.ts

@@ -23,6 +23,7 @@ export interface KernelSpec {
 }
 
 export interface EnvironmentSpec {
+  name: string;
   description: string;
   dockerImage: string;
   image: string;

submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.html

@@ -71,7 +71,7 @@ <h2>Environment</h2>
           nzTitle="Confirm to delete?"
           nzCancelText="Cancel"
           nzOkText="Ok"
-          (nzOnConfirm)="deleteEnvironment()"
+          (nzOnConfirm)="deleteEnvironments()"
         >
           <i nz-icon nzType="delete" nzTheme="outline"></i>
           Delete

submarine-workbench/workbench-web-ng/src/app/pages/workbench/environment/environment.component.ts

@@ -18,16 +18,19 @@
  */
 
 import { Component, OnInit } from '@angular/core';
-import { EnvironmentService } from '@submarine/services/environment.service';
 import { Environment } from '@submarine/interfaces/environment-info';
+import { EnvironmentService } from '@submarine/services/environment.service';
+import { NzMessageService } from 'ng-zorro-antd';
 
 @Component({
   selector: 'submarine-environment',
   templateUrl: './environment.component.html',
   styleUrls: ['./environment.component.scss']
 })
 export class EnvironmentComponent implements OnInit {
-  constructor(private environmentService: EnvironmentService) {}
+  constructor(
+    private environmentService: EnvironmentService,
+    private nzMessageService: NzMessageService) {}
 
   environmentList: Environment[] = [];
   checkedList: boolean[] = [];
@@ -53,8 +56,32 @@ export class EnvironmentComponent implements OnInit {
   // TODO(kobe860219): Update an environment
   updateEnvironment(id: string, data) {}
 
-  // TODO(kobe860219): Delete an environment
-  deleteEnvironment(id: string) {}
+  onDeleteEnvironment(name: string, onMessage: boolean) {
+    this.environmentService.deleteEnvironment(name).subscribe(
+      () => {
+        if (onMessage === true) {
+          this.nzMessageService.success('Delete Experiment Successfully!');
+        }
+        this.fetchEnvironmentList();
+      },
+      (err) => {
+        if (onMessage === true) {
+          this.nzMessageService.error(err.message);
+        }
+      }
+    );
+  }
+
+  deleteEnvironments() {
+    for (let i = this.checkedList.length - 1; i >= 0; i--) {
+      console.log(this.environmentList[i].environmentSpec.name)
+      if (this.checkedList[i] === true) {
+        this.onDeleteEnvironment(this.environmentList[i].environmentSpec.name, false);
+      }
+    }
+
+    this.selectAllChecked = false;
+  }
 
   selectAllEnv() {
     for (let i = 0; i < this.checkedList.length; i++) {

submarine-workbench/workbench-web-ng/src/app/pages/workbench/experiment/experiment.component.ts

@@ -430,7 +430,7 @@ export class ExperimentComponent implements OnInit {
       },
       (err) => {
         if (onMessage === true) {
-          this.nzMessageService.success(err.message);
+          this.nzMessageService.error(err.message);
         }
       }
     );

submarine-workbench/workbench-web-ng/src/app/services/environment.service.ts

@@ -20,10 +20,10 @@
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Rest } from '@submarine/interfaces';
+import { Environment } from '@submarine/interfaces/environment-info';
 import { BaseApiService } from '@submarine/services/base-api.service';
 import { of, throwError, Observable } from 'rxjs';
 import { catchError, map, switchMap } from 'rxjs/operators';
-import { Environment } from '@submarine/interfaces/environment-info';
 
 @Injectable({
   providedIn: 'root'
@@ -54,6 +54,16 @@ export class EnvironmentService {
   // TODO(kobe860219): Update an environment
   updateEnvironment(updateData) {}
 
-  // TODO(kobe860219): Delete an environment
-  deleteEnvironment(id: string) {}
+  deleteEnvironment(name: string): Observable<Environment> {
+    const apiUrl = this.baseApi.getRestApi(`/v1/environment/${name}`);
+    return this.httpClient.delete<Rest<Environment>>(apiUrl).pipe(
+      switchMap((res) => {
+        if (res.success) {
+          return of(res.result);
+        } else {
+          throw this.baseApi.createRequestError(res.message, res.code, apiUrl, 'delete', name);
+        }
+      })
+    );
+  }
 }