Edge instructions UI implementation

ui-ngx/src/app/core/http/edge.service.ts

@@ -16,7 +16,7 @@
 
 import { Injectable } from '@angular/core';
 import { defaultHttpOptionsFromConfig, RequestConfig } from './http-utils';
-import { Observable } from 'rxjs';
+import { Observable, of } from 'rxjs';
 import { HttpClient } from '@angular/common/http';
 import { PageLink, TimePageLink } from '@shared/models/page/page-link';
 import { PageData } from '@shared/models/page/page-data';
@@ -113,4 +113,8 @@ export class EdgeService {
   public bulkImportEdges(entitiesData: BulkImportRequest, config?: RequestConfig): Observable<BulkImportResult> {
     return this.http.post<BulkImportResult>('/api/edge/bulk_import', entitiesData, defaultHttpOptionsFromConfig(config));
   }
+
+  public getEdgeInstructions(edgeId: string, config?: RequestConfig): Observable<string> {
+    return this.http.get<string>(`/api/edge/instructions/${edgeId}`, defaultHttpOptionsFromConfig(config));
+  }
 }

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

@@ -0,0 +1,26 @@
+<div style="min-width: 800px;">
+  <mat-toolbar color="primary">
+    <h2><mat-icon>info_outline</mat-icon>
+      {{ 'edge.install-connect-instructions' | translate }}</h2>
+    <span fxFlex></span>
+    <button mat-button mat-icon-button
+            (click)="cancel()"
+            type="button">
+      <mat-icon class="material-icons">close</mat-icon>
+    </button>
+  </mat-toolbar>
+  <mat-progress-bar color="warn" mode="indeterminate" *ngIf="isLoading$ | async">
+  </mat-progress-bar>
+  <div style="height: 4px;" *ngIf="!(isLoading$ | async)"></div>
+  <div mat-dialog-content>
+    <tb-markdown [data]="instructions" lineNumbers fallbackToPlainMarkdown></tb-markdown>
+  </div>
+  <div mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
+    <button mat-button color="primary"
+            type="button"
+            [disabled]="(isLoading$ | async)"
+            (click)="cancel()" cdkFocusInitial>
+      {{ 'action.close' | translate }}
+    </button>
+  </div>
+</div>

ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.scss

@@ -0,0 +1,3 @@
+:host {
+}
+

ui-ngx/src/app/modules/home/pages/edge/edge-instructions-dialog.component.ts

@@ -0,0 +1,31 @@
+import { Component, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA, MatDialogRef } from "@angular/material/dialog";
+import { DialogComponent } from "@shared/components/dialog.component";
+import { Store } from "@ngrx/store";
+import { AppState } from "@core/core.state";
+import { Router } from "@angular/router";
+
+export interface EdgeInstructionsData {
+  instructions: string;
+}
+
+@Component({
+  selector: 'tb-edge-instructions',
+  templateUrl: './edge-instructions-dialog.component.html',
+  styleUrls: ['./edge-instructions-dialog.component.scss']
+})
+export class EdgeInstructionsDialogComponent extends DialogComponent<EdgeInstructionsDialogComponent, EdgeInstructionsData> {
+
+  instructions: string = this.data.instructions;
+
+  constructor(protected store: Store<AppState>,
+              protected router: Router,
+              public dialogRef: MatDialogRef<EdgeInstructionsDialogComponent, EdgeInstructionsData>,
+              @Inject(MAT_DIALOG_DATA) public data: EdgeInstructionsData) {
+    super(store, router, dialogRef);
+  }
+
+  cancel(): void {
+    this.dialogRef.close(null);
+  }
+}

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

@@ -112,6 +112,15 @@
       <span translate>edge.sync</span>
     </button>
   </div>
+  <div fxLayout="row" fxLayout.xs="column">
+    <button mat-button color="primary"
+            [disabled]="(isLoading$ | async)"
+            (click)="onEntityAction($event, 'openInstructions')"
+            [fxShow]="!isEdit">
+      <mat-icon>info_outline</mat-icon>
+      <span>{{ 'edge.install-connect-instructions' | translate }}</span>
+    </button>
+  </div>
 </div>
 <div class="mat-padding" fxLayout="column">
   <mat-form-field class="mat-block"

ui-ngx/src/app/modules/home/pages/edge/edge.module.ts

@@ -23,12 +23,14 @@ import { EdgeRoutingModule } from '@home/pages/edge/edge-routing.module';
 import { EdgeComponent } from '@modules/home/pages/edge/edge.component';
 import { EdgeTableHeaderComponent } from '@home/pages/edge/edge-table-header.component';
 import { EdgeTabsComponent } from '@home/pages/edge/edge-tabs.component';
+import { EdgeInstructionsDialogComponent } from './edge-instructions-dialog.component';
 
 @NgModule({
   declarations: [
     EdgeComponent,
     EdgeTableHeaderComponent,
-    EdgeTabsComponent
+    EdgeTabsComponent,
+    EdgeInstructionsDialogComponent
   ],
   imports: [
     CommonModule,

ui-ngx/src/app/modules/home/pages/edge/edges-table-config.resolver.ts

@@ -58,6 +58,10 @@ import { EdgeTableHeaderComponent } from '@home/pages/edge/edge-table-header.com
 import { EdgeId } from '@shared/models/id/edge-id';
 import { EdgeTabsComponent } from '@home/pages/edge/edge-tabs.component';
 import { ActionNotificationShow } from '@core/notification/notification.actions';
+import {
+  EdgeInstructionsData,
+  EdgeInstructionsDialogComponent
+} from "@home/pages/edge/edge-instructions-dialog.component";
 
 @Injectable()
 export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeInfo>> {
@@ -526,6 +530,23 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
     );
   }
 
+  openInstructions($event, edge) {
+    if ($event) {
+      $event.stopPropagation();
+    }
+    this.edgeService.getEdgeInstructions(edge.id.id).subscribe(
+      (edgeInstructionsTemplate: string) => {
+        this.dialog.open<EdgeInstructionsDialogComponent, EdgeInstructionsData>(EdgeInstructionsDialogComponent, {
+          disableClose: false,
+          panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+          data: {
+            instructions: edgeInstructionsTemplate
+          }
+        });
+      }
+    )
+  }
+
   onEdgeAction(action: EntityAction<EdgeInfo>, config: EntityTableConfig<EdgeInfo>): boolean {
     switch (action.action) {
       case 'open':
@@ -558,6 +579,9 @@ export class EdgesTableConfigResolver implements Resolve<EntityTableConfig<EdgeI
       case 'syncEdge':
         this.syncEdge(action.event, action.entity);
         return true;
+      case 'openInstructions':
+        this.openInstructions(action.event, action.entity);
+        return true;
     }
   }
 

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

@@ -1745,6 +1745,7 @@
         "make-private-edge-title": "Are you sure you want to make the edge '{{edgeName}}' private?",
         "make-private-edge-text": "After the confirmation the edge and all its data will be made private and won't be accessible by others.",
         "import": "Import edge",
+        "install-connect-instructions": "Install & Connect Instructions",
         "label": "Label",
         "load-entity-error": "Failed to load data. Entity has been deleted.",
         "assign-new-edge": "Assign new edge",