feat: Add update method for device device update

Signed-off-by: Huaqiao Zhang <huaqiaoz@vmware.com>

web/src/app/device-service/device-service-list/device-service-list.component.html

+<!--
+*******************************************************************************
+ * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ *
+ * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
+ *******************************************************************************
+ -->
+
 <ul class="list-group p-0">
     <li *ngFor="let svc of deviceServiceList" class="list-group-item list-group-item-action list-group-item-light">
         <div class="media">
@@ -7,14 +25,14 @@
             <div class="media-body">
                 <div class="mt-0 mb-1">
                     <h5 class="d-inline mr-3 align-middle text-dark">{{svc.name}}</h5>
-                    <span class="float-right">
+                    <!-- <span class="float-right">
                         <i class="fa fa-calendar align-baseline text-primary"></i><span class="badge badge-light align-baseline"> {{svc.created | date:'yyyy-MM-dd hh:mm:ss'}}</span>
-                    </span>
+                    </span> -->
                 </div>
                 <p *ngIf="svc.description; else nodesc">{{svc.description}}</p>
                 <ng-template #nodesc> <p class="my-1">no description.</p> </ng-template>
                 <div>
-                    <!-- <span class="badge badge-info mr-3">Port {{svc.addressable.port}}</span> -->
+                    <span class="badge badge-info mr-3">Port {{getSvcPort(svc.baseAddress)}}</span>
                     <span [ngSwitch]="svc.adminState">
                         <span *ngSwitchCase="'UNLOCKED'" class="badge badge-success mr-3">{{svc.adminState}}</span> 
                         <span *ngSwitchDefault class="badge badge-danger mr-3">{{svc.adminState}}</span> 
@@ -25,9 +43,36 @@
                    </span> -->
 
                     <a *ngIf="associatedDevices.size" class="badge badge-primary" role="button" (click)="associatedDevicesSkip(svc.name)">Associated Devices &nbsp; {{associatedDevices.get(svc.name)}}</a>
-                    <span class="badge badge-secondary float-right" role="button"> <i class="fa fa-cog"></i> Setting</span>
+                    <span class="badge badge-secondary float-right" role="button" (click)="edit(svc)"> <i class="fa fa-cog"></i> Setting</span>
                 </div>
             </div>
         </div>
     </li>
-</ul>
\ No newline at end of file
+</ul>
+
+<div *ngIf="deviceSvcSelected" class="card mt-3">
+    <div class="card-header">
+        <i class="fa fa-edit mr-1 text-danger"></i>
+        <span>edit {{ deviceSvcSelected.name }}</span>
+        <button class="btn btn-success btn-sm float-right" (click)="updateSvc()">Save</button>
+    </div>
+    <div class="card-body">
+        <form>
+            <div class="form-group row">
+                <label for="deviceDesc" class="col-md-2 col-form-label">Description</label>
+                <div class="col-md-10">
+                  <input type="text" class="form-control" name="deviceSvcDescription" [(ngModel)]="deviceSvcSelected.description">
+                </div>
+              </div>
+            <div class="form-group row">
+                <label for="adminState" class="col-md-2 col-form-label" >AdminState</label>
+                <div class="col-md-10">
+                    <select class="form-control"  name="deviceSvcAdminState" [(ngModel)]="deviceSvcSelected.adminState">
+                        <option value="UNLOCKED">UNLOCKED</option>
+                        <option value="LOCKED">LOCKED</option>
+                    </select>
+                </div>
+            </div>
+        </form>
+    </div>
+</div>
\ No newline at end of file

web/src/app/device-service/device-service-list/device-service-list.component.ts

+/*******************************************************************************
+ * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * 
+ * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
+ *******************************************************************************/
+
 import { Component, OnInit } from '@angular/core';
 import { Router, NavigationExtras, ActivatedRoute } from '@angular/router';
 import { MetadataService } from '../../services/metadata.service';
 import { DeviceService } from '../../contracts/v2/device-service';
 import { MultiDeviceServiceResponse } from '../../contracts/v2/responses/device-service-response';
 import { MultiDeviceResponse } from '../../contracts/v2/responses/device-response';
+import {  MessageService } from '../../message/message.service';
 
 @Component({
   selector: 'app-device-service-list',
@@ -13,10 +30,11 @@ import { MultiDeviceResponse } from '../../contracts/v2/responses/device-respons
 export class DeviceServiceListComponent implements OnInit {
 
   deviceServiceList: DeviceService[] = [];
+  deviceSvcSelected?: DeviceService;
   associatedDevices = new Map<string, number>();
-  // deviceServiceState = new Map<string, string>();
 
   constructor(private metaSvc: MetadataService,
+    private msgSvc: MessageService,
     private router: Router,
     private route: ActivatedRoute) { }
 
@@ -29,6 +47,23 @@ export class DeviceServiceListComponent implements OnInit {
     })
   }
 
+  getSvcPort(baseURL: string): string {
+    return (new URL(baseURL)).port
+  }
+
+  edit(svc: DeviceService) {
+    this.deviceSvcSelected = svc;
+  }
+
+  updateSvc() {
+    this.metaSvc
+    .updateDeviceService(this.deviceSvcSelected as DeviceService)
+    .subscribe(() => {
+      this.msgSvc.success("update device service",`name: ${this.deviceSvcSelected?.name}`);
+      this.deviceSvcSelected = undefined;
+    })
+  }
+
   associatedDevicesSkip(svcName: string) {
     let navParam: NavigationExtras = {
       queryParams: { 'svcName': svcName },

web/src/app/device-service/device-service-routing.module.ts

+/*******************************************************************************
+ * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ * 
+ * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
+ *******************************************************************************/
+
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 

web/src/app/device-service/device-service.component.html

+<!--
+*******************************************************************************
+ * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ *
+ * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
+ *******************************************************************************
+ -->
+
 <div class="card">
     <div class="card-header">
       <ul class="nav nav-tabs card-header-tabs font-weight-bold">