Adding Operation View in Docker View

SoftwareAG · May 7, 2021 · 00b2e10 · 00b2e10
1 parent 3ad7690
commit 00b2e10
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 29 deletions.
diff --git a/app.module.ts b/app.module.ts
@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule as NgRouterModule } from '@angular/router';
 import { UpgradeModule as NgUpgradeModule } from '@angular/upgrade/static';
-import { CoreModule, RouterModule, HOOK_ONCE_ROUTE, ViewContext } from '@c8y/ngx-components';
+import { CoreModule, RouterModule, HOOK_ONCE_ROUTE, ViewContext} from '@c8y/ngx-components';
 import { AssetsNavigatorModule } from '@c8y/ngx-components/assets-navigator';
 import { DeviceGridExampleModule } from '@c8y/ngx-components/device-grid-example';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { DeviceProfileModule } from '@c8y/ngx-components/device-profile';
-import { OperationsModule } from '@c8y/ngx-components/operations';
+import { OperationsModule, SingleOperationDetailsModule} from '@c8y/ngx-components/operations';
 import { ImpactProtocolModule } from '@c8y/ngx-components/protocol-impact';
 import { OpcuaProtocolModule } from '@c8y/ngx-components/protocol-opcua';
 import { RepositoryModule } from '@c8y/ngx-components/repository';
@@ -53,8 +53,9 @@ import {
     RepositoryModule,
     DeviceProfileModule,
     LoraProtocolModule,
-    BinaryFileDownloadModule
-  ],
+    BinaryFileDownloadModule,
+    SingleOperationDetailsModule
+    ],
   declarations: [
     AnalyticsComponent, 
     DockerComponent,

diff --git a/components/docker-comp/docker.component.html b/components/docker-comp/docker.component.html
@@ -1,6 +1,11 @@
 <div class="row">
   <h1>List containers</h1>
 </div>
+<br>
+<div class="row">
+  <c8y-single-operation [operation]="operation"></c8y-single-operation>
+</div>
+<br>
 
 <div class="row">
   <div class="card-group interact-grid">
@@ -22,9 +27,9 @@ <h1>List containers</h1>
             </button>
             <ul class="dropdown-menu dropdown-menu-right" *dropdownMenu>
               <li>
-                <a style="cursor: pointer;">
-                  <i c8yIcon="cogs"></i> Configure
-                </a>
+              <a style="cursor: pointer;">
+                <i c8yIcon="cogs"></i> Configure
+              </a>
               <a (click)="remove(container)" style="cursor: pointer;">
                 <i c8yIcon="remove"></i> Remove
               </a>

diff --git a/components/docker-comp/docker.component.ts b/components/docker-comp/docker.component.ts
@@ -2,8 +2,8 @@ import { elementEventFullName } from "@angular/compiler/src/view_compiler/view_c
 import { Component, OnInit } from "@angular/core";
 import { ActivatedRoute } from "@angular/router";
 
-import { OperationService, IOperation, FetchClient, InventoryService, RealtimeAction} from "@c8y/client";
-import { Alert, AlertService } from "@c8y/ngx-components";
+import { OperationService, IOperation, FetchClient, InventoryService, RealtimeAction, Realtime} from "@c8y/client";
+import { Alert, AlertService} from "@c8y/ngx-components";
 import { interval } from "rxjs";
 
 @Component({
@@ -14,7 +14,9 @@ import { interval } from "rxjs";
 export class DockerComponent implements OnInit {
   containers: any;
   deviceId: string;
+  operation: IOperation;
   available: any;
+  realtime: any;
 
   isAvailable: boolean;
 
@@ -26,7 +28,7 @@ export class DockerComponent implements OnInit {
     private ops: OperationService,
     private alert: AlertService,
     private fetchClient: FetchClient,
-    private invSvc: InventoryService
+    private invSvc: InventoryService,
   ) {
     this.available = new Object();
   }
@@ -38,6 +40,7 @@ export class DockerComponent implements OnInit {
     this.deviceFetchClient();
     this.modal = document.getElementById("docker-modal");
     this.spanClose = document.getElementById("closeModal");
+    this.operation = null;
   }
 
   ngAfterViewChecked() {
@@ -86,7 +89,7 @@ export class DockerComponent implements OnInit {
 
   deviceFetchClient() {
     const realtimeOps = {
-      realtime: true,
+      realtime: true
     };
     const detail$ = this.invSvc.detail$(this.deviceId, realtimeOps);
     detail$.subscribe((data) => {
@@ -95,6 +98,13 @@ export class DockerComponent implements OnInit {
       this.available = data[0]["c8y_Availability"];
       //console.log("System is " + this.available.status);
     });
+    this.realtime = new Realtime(this.fetchClient);
+    const subscription = this.realtime.subscribe('/operations/'+this.deviceId, (data) => {
+      if (data.data.data['c8y_Docker'] != undefined) {
+        this.operation = data.data.data;
+      }
+    });
+
     this.fetchClient.fetch("inventory/managedObjects/" + this.deviceId).then(
       (response) => {
         //try...
@@ -121,20 +131,18 @@ export class DockerComponent implements OnInit {
       },
       description: status + " container '" + item.name + "' on thin edge",
     };
-    console.log(
-      `Container '${item.name}' send operation '${status}' to deviceId ${this.deviceId}`
-    );
     //    this.ops.create(dockerOperation);
     this.ops.create(dockerOperation).then(
       (result) => {
+        this.operation = result.data;
         const myAlert: Alert = {
-          text: "Create operation '" + status + "'.",
-          type: "info",
+          text: "Docker Update Operation sent to Device",
+          type: "success",
           timeout: 8000,
         };
         this.alert.add(myAlert);
-        console.log(result);
-        console.log(myAlert);
+        //console.log(result);
+        //console.log(myAlert);
       },
       (error) => {
         const myAlert: Alert = {
@@ -162,20 +170,16 @@ export class DockerComponent implements OnInit {
       },
       description: status + " container '" + item.name + "' on thin edge",
     };
-    console.log(
-      `Container '${item.name}' send operation '${status}' to deviceId ${this.deviceId}`
-    );
     //    this.ops.create(dockerOperation);
     this.ops.create(dockerOperation).then(
       (result) => {
-        const myAlert: Alert = {
-          text: "Create operation '" + status + "'.",
-          type: "info",
+        this.operation = result.data;
+          const myAlert: Alert = {
+          text: "Docker Create Operation sent to Device",
+          type: "success",
           timeout: 8000,
         };
         this.alert.add(myAlert);
-        console.log(result);
-        console.log(myAlert);
       },
       (error) => {
         const myAlert: Alert = {
@@ -213,16 +217,14 @@ export class DockerComponent implements OnInit {
         alert("Image must be filled out");
       }
     }
-    console.log(document.forms["myForm"]);
     let item = {
       name : xName,
       image: xImage,
       ports: xPorts
     }
-    console.log(item);
 
     const myAlert: Alert = {
-      text: "Create new container + '" + item.name + "'...",
+      text: "Creating new container + '" + item.name + "'...",
       type: "info",
       timeout: 8000,
     };