From 415959686f42a6362d3ed9f2551e2f285a7440dc Mon Sep 17 00:00:00 2001
From: Volodymyr Babak <volodymyr.babak@gmail.com>
Date: Tue, 22 Dec 2020 20:12:04 +0200
Subject: [PATCH] Added sync button. Added copy edge key and secret buttons

---
 ui-ngx/src/app/core/http/edge.service.ts      |  5 ++
 .../home/pages/edge/edge.component.html       | 26 +++++-
 .../modules/home/pages/edge/edge.component.ts | 46 +++++------
 .../modules/home/pages/edge/edge.module.ts    |  3 -
 .../pages/edge/edges-table-config.resolver.ts | 80 ++++++++++++-------
 .../assets/locale/locale.constant-en_US.json  |  7 +-
 6 files changed, 102 insertions(+), 65 deletions(-)

diff --git a/ui-ngx/src/app/core/http/edge.service.ts b/ui-ngx/src/app/core/http/edge.service.ts
index f6335e1a3b..95e78fa99c 100644
--- a/ui-ngx/src/app/core/http/edge.service.ts
+++ b/ui-ngx/src/app/core/http/edge.service.ts
@@ -23,6 +23,7 @@ import { PageData } from '@shared/models/page/page-data';
 import { EntitySubtype } from '@app/shared/models/entity-type.models';
 import { Edge, EdgeEvent, EdgeInfo, EdgeSearchQuery } from "@shared/models/edge.models";
 import { EntityId } from "@shared/models/id/entity-id";
+import { EdgeId } from "@shared/models/id/edge-id";
 @Injectable({
   providedIn: 'root'
 })
@@ -95,4 +96,8 @@ export class EdgeService {
     return this.http.get<PageData<EdgeEvent>>(`/api/edge/${entityId.id}/events` + `${pageLink.toQuery()}`,
       defaultHttpOptionsFromConfig(config));
   }
+
+  public syncEdge(edgeId: EdgeId, config?: RequestConfig) {
+    return this.http.post(`/api/edge/sync`, edgeId, defaultHttpOptionsFromConfig(config));
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
index 6fe5d4d87c..3a75e752a7 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.component.html
@@ -83,7 +83,7 @@
     </button>
     <button mat-raised-button
             ngxClipboard
-            (cbOnSuccess)="onEdgeKeyCopied($event)"
+            (cbOnSuccess)="onEdgeInfoCopied('key')"
             [cbContent]="entity?.routingKey"
             [fxShow]="!isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
@@ -91,12 +91,20 @@
     </button>
     <button mat-raised-button
             ngxClipboard
-            (cbOnSuccess)="onEdgeSecretCopied($event)"
+            (cbOnSuccess)="onEdgeInfoCopied('secret')"
             [cbContent]="entity?.secret"
             [fxShow]="!isEdit">
       <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
       <span translate>edge.copy-edge-secret</span>
     </button>
+    <button mat-raised-button
+            ngxClipboard
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'syncEdge')"
+            [fxShow]="!isEdit">
+      <mat-icon svgIcon="mdi:sync"></mat-icon>
+      <span translate>edge.sync</span>
+    </button>
   </div>
 </div>
 <div class="mat-padding" fxLayout="column">
@@ -148,19 +156,29 @@
       </div>
       <div fxLayout="row">
         <fieldset fxFlex disabled>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>edge.edge-key</mat-label>
             <input matInput formControlName="routingKey">
           </mat-form-field>
         </fieldset>
+        <button mat-button mat-icon-button type="button" ngxClipboard (cbOnSuccess)="onEdgeInfoCopied('key')"
+                [cbContent]="entityForm?.get('routingKey').value"
+                matTooltip="{{'edge.copy-edge-key' | translate}}">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+        </button>
       </div>
       <div fxLayout="row">
         <fieldset fxFlex disabled>
-          <mat-form-field class="mat-block">
+          <mat-form-field class="mat-block" fxFlex>
             <mat-label translate>edge.edge-secret</mat-label>
             <input matInput formControlName="secret">
           </mat-form-field>
         </fieldset>
+        <button mat-button mat-icon-button type="button" ngxClipboard (cbOnSuccess)="onEdgeInfoCopied('secret')"
+                [cbContent]="entityForm?.get('secret').value"
+                matTooltip="{{'edge.copy-edge-secret' | translate}}">
+          <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
+        </button>
       </div>
       <mat-form-field class="mat-block">
         <mat-label translate>edge.label</mat-label>
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.component.ts b/ui-ngx/src/app/modules/home/pages/edge/edge.component.ts
index bfa14e0e0f..0d98a5829a 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.component.ts
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.component.ts
@@ -93,8 +93,11 @@ export class EdgeComponent extends EntityComponent<EdgeInfo> {
     this.entityForm.patchValue({edgeLicenseKey: entity.edgeLicenseKey});
     this.entityForm.patchValue({routingKey: entity.routingKey});
     this.entityForm.patchValue({secret: entity.secret});
-    this.entityForm.patchValue({additionalInfo: {
-      description: entity.additionalInfo ? entity.additionalInfo.description : ''}});
+    this.entityForm.patchValue({
+      additionalInfo: {
+        description: entity.additionalInfo ? entity.additionalInfo.description : ''
+      }
+    });
   }
 
   onEdgeIdCopied($event) {
@@ -104,29 +107,7 @@ export class EdgeComponent extends EntityComponent<EdgeInfo> {
         type: 'success',
         duration: 750,
         verticalPosition: 'bottom',
-        horizontalPosition: 'left'
-      }));
-  }
-
-  onEdgeKeyCopied($event) {
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message: this.translate.instant('edge.edge-key-copied-message'),
-        type: 'success',
-        duration: 750,
-        verticalPosition: 'bottom',
-        horizontalPosition: 'left'
-      }));
-  }
-
-  onEdgeSecretCopied($event) {
-    this.store.dispatch(new ActionNotificationShow(
-      {
-        message: this.translate.instant('edge.edge-secret-copied-message'),
-        type: 'success',
-        duration: 750,
-        verticalPosition: 'bottom',
-        horizontalPosition: 'left'
+        horizontalPosition: 'right'
       }));
   }
 
@@ -135,10 +116,23 @@ export class EdgeComponent extends EntityComponent<EdgeInfo> {
       length = 1;
     }
     var l = length > 10 ? 10 : length;
-    var str =  Math.random().toString(36).substr(2, l);
+    var str = Math.random().toString(36).substr(2, l);
     if (str.length >= length) {
       return str;
     }
     return str.concat(this.generateSecret(length - str.length));
   }
+
+  onEdgeInfoCopied(type: string) {
+    const message = type === 'key' ? 'edge.edge-key-copied-message'
+      : 'edge.edge-secret-copied-message';
+    this.store.dispatch(new ActionNotificationShow(
+      {
+        message: this.translate.instant(message),
+        type: 'success',
+        duration: 750,
+        verticalPosition: 'bottom',
+        horizontalPosition: 'right'
+      }));
+  }
 }
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edge.module.ts b/ui-ngx/src/app/modules/home/pages/edge/edge.module.ts
index 89562c2dd0..89018a58b4 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edge.module.ts
+++ b/ui-ngx/src/app/modules/home/pages/edge/edge.module.ts
@@ -36,9 +36,6 @@ import { EdgeTabsComponent } from "@home/pages/edge/edge-tabs.component";
     HomeDialogsModule,
     HomeComponentsModule,
     EdgeRoutingModule
-  ],
-  exports: [
-    EdgeComponent
   ]
 })
 
diff --git a/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts b/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
index e1e0b59ced..b5b4835dba 100644
--- a/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
+++ b/ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
@@ -57,6 +57,7 @@ import { EdgeComponent } from "@home/pages/edge/edge.component";
 import { EdgeTableHeaderComponent } from "@home/pages/edge/edge-table-header.component";
 import { EdgeId } from "@shared/models/id/edge-id";
 import { EdgeTabsComponent } from "@home/pages/edge/edge-tabs.component";
+import { ActionNotificationShow } from "@core/notification/notification.actions";
 
 @Injectable()
 export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeInfo>> {
@@ -182,10 +183,10 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
     if (edgeScope === 'tenant') {
       actions.push(
         {
-           name: this.translate.instant('edge.make-public'),
-           icon: 'share',
-           isEnabled: (entity) => (!entity.customerId || entity.customerId.id === NULL_UUID),
-           onAction: ($event, entity) => this.makePublic($event, entity)
+          name: this.translate.instant('edge.make-public'),
+          icon: 'share',
+          isEnabled: (entity) => (!entity.customerId || entity.customerId.id === NULL_UUID),
+          onAction: ($event, entity) => this.makePublic($event, entity)
         },
         {
           name: this.translate.instant('edge.assign-to-customer'),
@@ -478,32 +479,53 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
     );
   }
 
+  syncEdge($event, edge) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.edgeService.syncEdge(edge.id).subscribe(
+      () => {
+        this.store.dispatch(new ActionNotificationShow(
+          {
+            message: this.translate.instant('edge.sync-process-started-successfully'),
+            type: 'success',
+            duration: 750,
+            verticalPosition: 'bottom',
+            horizontalPosition: 'right'
+          }));
+      }
+    );
+  }
+
   onEdgeAction(action: EntityAction<EdgeInfo>): boolean {
-  switch (action.action) {
-    case 'makePublic':
-      this.makePublic(action.event, action.entity);
-    return true;
-    case 'assignToCustomer':
-      this.assignToCustomer(action.event, [action.entity.id]);
-    return true;
-    case 'unassignFromCustomer':
-      this.unassignFromCustomer(action.event, action.entity);
-    return true;
-    case 'openEdgeAssets':
-      this.openEdgeAssets(action.event, action.entity);
-    return true;
-    case 'openEdgeDevices':
-      this.openEdgeDevices(action.event, action.entity);
-    return true;
-    case 'openEdgeEntityViews':
-      this.openEdgeEntityViews(action.event, action.entity);
-    return true;
-    case 'openEdgeDashboards':
-      this.openEdgeDashboards(action.event, action.entity);
-    return true;
-    case 'openEdgeRuleChains':
-      this.openEdgeRuleChains(action.event, action.entity);
-    return true;
+    switch (action.action) {
+      case 'makePublic':
+        this.makePublic(action.event, action.entity);
+        return true;
+      case 'assignToCustomer':
+        this.assignToCustomer(action.event, [action.entity.id]);
+        return true;
+      case 'unassignFromCustomer':
+        this.unassignFromCustomer(action.event, action.entity);
+        return true;
+      case 'openEdgeAssets':
+        this.openEdgeAssets(action.event, action.entity);
+        return true;
+      case 'openEdgeDevices':
+        this.openEdgeDevices(action.event, action.entity);
+        return true;
+      case 'openEdgeEntityViews':
+        this.openEdgeEntityViews(action.event, action.entity);
+        return true;
+      case 'openEdgeDashboards':
+        this.openEdgeDashboards(action.event, action.entity);
+        return true;
+      case 'openEdgeRuleChains':
+        this.openEdgeRuleChains(action.event, action.entity);
+        return true;
+      case 'syncEdge':
+        this.syncEdge(action.event, action.entity);
+        return true;
     }
   }
 
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 89c7d38226..0a1bcf153e 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -1177,10 +1177,10 @@
       "dashboards": "Edge Dashboards",
       "manage-edge-rulechains": "Edge rule chains",
       "edge-key": "Edge key",
-      "copy-edge-key": "Copy edge key",
+      "copy-edge-key": "Copy Edge key",
       "edge-key-copied-message": "Edge key has been copied to clipboard",
       "edge-secret": "Edge secret",
-      "copy-edge-secret": "Copy edge secret",
+      "copy-edge-secret": "Copy Edge secret",
       "edge-secret-copied-message": "Edge secret has been copied to clipboard",
       "manage-edge-assets": "Edge assets",
       "manage-edge-devices": "Edge devices",
@@ -1239,7 +1239,8 @@
       "edge-event-action-type-assigned-to-edge": "Assigned to Edge",
       "edge-event-action-type-unassigned-from-edge": "Unassigned from Edge",
       "edge-event-action-type-credentials-request": "Credentials Request",
-      "edge-event-action-type-entity-merge-request": "Entity Merge Request"
+      "edge-event-action-type-entity-merge-request": "Entity Merge Request",
+      "sync-process-started-successfully": "Sync process started successfully!"
     },
     "error": {
         "unable-to-connect": "Unable to connect to the server! Please check your internet connection.",