Browse Source

Added sync button. Added copy edge key and secret buttons

pull/3811/head
Volodymyr Babak 6 years ago
parent
commit
415959686f
  1. 5
      ui-ngx/src/app/core/http/edge.service.ts
  2. 26
      ui-ngx/src/app/modules/home/pages/edge/edge.component.html
  3. 46
      ui-ngx/src/app/modules/home/pages/edge/edge.component.ts
  4. 3
      ui-ngx/src/app/modules/home/pages/edge/edge.module.ts
  5. 80
      ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts
  6. 7
      ui-ngx/src/assets/locale/locale.constant-en_US.json

5
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 { EntitySubtype } from '@app/shared/models/entity-type.models';
import { Edge, EdgeEvent, EdgeInfo, EdgeSearchQuery } from "@shared/models/edge.models"; import { Edge, EdgeEvent, EdgeInfo, EdgeSearchQuery } from "@shared/models/edge.models";
import { EntityId } from "@shared/models/id/entity-id"; import { EntityId } from "@shared/models/id/entity-id";
import { EdgeId } from "@shared/models/id/edge-id";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
@ -95,4 +96,8 @@ export class EdgeService {
return this.http.get<PageData<EdgeEvent>>(`/api/edge/${entityId.id}/events` + `${pageLink.toQuery()}`, return this.http.get<PageData<EdgeEvent>>(`/api/edge/${entityId.id}/events` + `${pageLink.toQuery()}`,
defaultHttpOptionsFromConfig(config)); defaultHttpOptionsFromConfig(config));
} }
public syncEdge(edgeId: EdgeId, config?: RequestConfig) {
return this.http.post(`/api/edge/sync`, edgeId, defaultHttpOptionsFromConfig(config));
}
} }

26
ui-ngx/src/app/modules/home/pages/edge/edge.component.html

@ -83,7 +83,7 @@
</button> </button>
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onEdgeKeyCopied($event)" (cbOnSuccess)="onEdgeInfoCopied('key')"
[cbContent]="entity?.routingKey" [cbContent]="entity?.routingKey"
[fxShow]="!isEdit"> [fxShow]="!isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
@ -91,12 +91,20 @@
</button> </button>
<button mat-raised-button <button mat-raised-button
ngxClipboard ngxClipboard
(cbOnSuccess)="onEdgeSecretCopied($event)" (cbOnSuccess)="onEdgeInfoCopied('secret')"
[cbContent]="entity?.secret" [cbContent]="entity?.secret"
[fxShow]="!isEdit"> [fxShow]="!isEdit">
<mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon> <mat-icon svgIcon="mdi:clipboard-arrow-left"></mat-icon>
<span translate>edge.copy-edge-secret</span> <span translate>edge.copy-edge-secret</span>
</button> </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> </div>
<div class="mat-padding" fxLayout="column"> <div class="mat-padding" fxLayout="column">
@ -148,19 +156,29 @@
</div> </div>
<div fxLayout="row"> <div fxLayout="row">
<fieldset fxFlex disabled> <fieldset fxFlex disabled>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block" fxFlex>
<mat-label translate>edge.edge-key</mat-label> <mat-label translate>edge.edge-key</mat-label>
<input matInput formControlName="routingKey"> <input matInput formControlName="routingKey">
</mat-form-field> </mat-form-field>
</fieldset> </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>
<div fxLayout="row"> <div fxLayout="row">
<fieldset fxFlex disabled> <fieldset fxFlex disabled>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block" fxFlex>
<mat-label translate>edge.edge-secret</mat-label> <mat-label translate>edge.edge-secret</mat-label>
<input matInput formControlName="secret"> <input matInput formControlName="secret">
</mat-form-field> </mat-form-field>
</fieldset> </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> </div>
<mat-form-field class="mat-block"> <mat-form-field class="mat-block">
<mat-label translate>edge.label</mat-label> <mat-label translate>edge.label</mat-label>

46
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({edgeLicenseKey: entity.edgeLicenseKey});
this.entityForm.patchValue({routingKey: entity.routingKey}); this.entityForm.patchValue({routingKey: entity.routingKey});
this.entityForm.patchValue({secret: entity.secret}); this.entityForm.patchValue({secret: entity.secret});
this.entityForm.patchValue({additionalInfo: { this.entityForm.patchValue({
description: entity.additionalInfo ? entity.additionalInfo.description : ''}}); additionalInfo: {
description: entity.additionalInfo ? entity.additionalInfo.description : ''
}
});
} }
onEdgeIdCopied($event) { onEdgeIdCopied($event) {
@ -104,29 +107,7 @@ export class EdgeComponent extends EntityComponent<EdgeInfo> {
type: 'success', type: 'success',
duration: 750, duration: 750,
verticalPosition: 'bottom', verticalPosition: 'bottom',
horizontalPosition: 'left' horizontalPosition: 'right'
}));
}
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'
})); }));
} }
@ -135,10 +116,23 @@ export class EdgeComponent extends EntityComponent<EdgeInfo> {
length = 1; length = 1;
} }
var l = length > 10 ? 10 : length; 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) { if (str.length >= length) {
return str; return str;
} }
return str.concat(this.generateSecret(length - str.length)); 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'
}));
}
} }

3
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, HomeDialogsModule,
HomeComponentsModule, HomeComponentsModule,
EdgeRoutingModule EdgeRoutingModule
],
exports: [
EdgeComponent
] ]
}) })

80
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 { EdgeTableHeaderComponent } from "@home/pages/edge/edge-table-header.component";
import { EdgeId } from "@shared/models/id/edge-id"; import { EdgeId } from "@shared/models/id/edge-id";
import { EdgeTabsComponent } from "@home/pages/edge/edge-tabs.component"; import { EdgeTabsComponent } from "@home/pages/edge/edge-tabs.component";
import { ActionNotificationShow } from "@core/notification/notification.actions";
@Injectable() @Injectable()
export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeInfo>> { export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeInfo>> {
@ -182,10 +183,10 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
if (edgeScope === 'tenant') { if (edgeScope === 'tenant') {
actions.push( actions.push(
{ {
name: this.translate.instant('edge.make-public'), name: this.translate.instant('edge.make-public'),
icon: 'share', icon: 'share',
isEnabled: (entity) => (!entity.customerId || entity.customerId.id === NULL_UUID), isEnabled: (entity) => (!entity.customerId || entity.customerId.id === NULL_UUID),
onAction: ($event, entity) => this.makePublic($event, entity) onAction: ($event, entity) => this.makePublic($event, entity)
}, },
{ {
name: this.translate.instant('edge.assign-to-customer'), 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 { onEdgeAction(action: EntityAction<EdgeInfo>): boolean {
switch (action.action) { switch (action.action) {
case 'makePublic': case 'makePublic':
this.makePublic(action.event, action.entity); this.makePublic(action.event, action.entity);
return true; return true;
case 'assignToCustomer': case 'assignToCustomer':
this.assignToCustomer(action.event, [action.entity.id]); this.assignToCustomer(action.event, [action.entity.id]);
return true; return true;
case 'unassignFromCustomer': case 'unassignFromCustomer':
this.unassignFromCustomer(action.event, action.entity); this.unassignFromCustomer(action.event, action.entity);
return true; return true;
case 'openEdgeAssets': case 'openEdgeAssets':
this.openEdgeAssets(action.event, action.entity); this.openEdgeAssets(action.event, action.entity);
return true; return true;
case 'openEdgeDevices': case 'openEdgeDevices':
this.openEdgeDevices(action.event, action.entity); this.openEdgeDevices(action.event, action.entity);
return true; return true;
case 'openEdgeEntityViews': case 'openEdgeEntityViews':
this.openEdgeEntityViews(action.event, action.entity); this.openEdgeEntityViews(action.event, action.entity);
return true; return true;
case 'openEdgeDashboards': case 'openEdgeDashboards':
this.openEdgeDashboards(action.event, action.entity); this.openEdgeDashboards(action.event, action.entity);
return true; return true;
case 'openEdgeRuleChains': case 'openEdgeRuleChains':
this.openEdgeRuleChains(action.event, action.entity); this.openEdgeRuleChains(action.event, action.entity);
return true; return true;
case 'syncEdge':
this.syncEdge(action.event, action.entity);
return true;
} }
} }

7
ui-ngx/src/assets/locale/locale.constant-en_US.json

@ -1177,10 +1177,10 @@
"dashboards": "Edge Dashboards", "dashboards": "Edge Dashboards",
"manage-edge-rulechains": "Edge rule chains", "manage-edge-rulechains": "Edge rule chains",
"edge-key": "Edge key", "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-key-copied-message": "Edge key has been copied to clipboard",
"edge-secret": "Edge secret", "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", "edge-secret-copied-message": "Edge secret has been copied to clipboard",
"manage-edge-assets": "Edge assets", "manage-edge-assets": "Edge assets",
"manage-edge-devices": "Edge devices", "manage-edge-devices": "Edge devices",
@ -1239,7 +1239,8 @@
"edge-event-action-type-assigned-to-edge": "Assigned to Edge", "edge-event-action-type-assigned-to-edge": "Assigned to Edge",
"edge-event-action-type-unassigned-from-edge": "Unassigned from Edge", "edge-event-action-type-unassigned-from-edge": "Unassigned from Edge",
"edge-event-action-type-credentials-request": "Credentials Request", "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": { "error": {
"unable-to-connect": "Unable to connect to the server! Please check your internet connection.", "unable-to-connect": "Unable to connect to the server! Please check your internet connection.",

Loading…
Cancel
Save