Use signleton marked options service. Fix popover size to not overflow viewport size. Add path routing for rulenode help assets to k8s ingress configuration.

k8s/common/thingsboard.yml

@@ -424,6 +424,10 @@ spec:
         backend:
           serviceName: tb-node
           servicePort: 8080
+      - path: /assets/help/.*/rulenode/.*
+        backend:
+          serviceName: tb-node
+          servicePort: 8080
       - path: /oauth2/.*
         backend:
           serviceName: tb-node

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" style="padding-top: 150px;" tb-toast toastTarget="dashboardRoot"
+<div class="tb-dashboard-page mat-content" [ngClass]="{'mobile-app': isMobileApp && !isEdit}" tb-toast toastTarget="dashboardRoot"
      fxFlex tb-fullscreen [fullscreen]="widgetEditMode || iframeMode || forceFullscreen || isFullscreen">
   <tb-hotkeys-cheatsheet #cheatSheetComponent></tb-hotkeys-cheatsheet>
   <section class="tb-dashboard-toolbar"

ui-ngx/src/app/modules/home/components/widget/widget.component.ts

@@ -1355,8 +1355,9 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
           parentDashboard: this.widgetContext.parentDashboard ?
             this.widgetContext.parentDashboard : this.widgetContext.dashboard
         },
+        {width: popoverWidth, height: popoverHeight},
         popoverStyle,
-        {width: popoverWidth, height: popoverHeight}
+        {}
       );
       this.widgetContext.registerPopoverComponent(component);
     }
@@ -1398,6 +1399,7 @@ export class WidgetComponent extends PageComponent implements OnInit, AfterViewI
     this.dialog.open(this.embedDashboardDialogComponent, {
       disableClose: true,
       panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
+      viewContainerRef: this.widgetContentContainer,
       data: {
         dashboard,
         state: objToBase64([ stateObject ]),

ui-ngx/src/app/shared/components/help-markdown.component.scss

@@ -16,8 +16,8 @@
 :host {
   .tb-help-markdown {
     overflow: auto;
-    max-width: 50vw;
+    max-width: 80vw;
-    max-height: 50vh;
+    max-height: 80vh;
     margin-top: 30px;
   }
 }

ui-ngx/src/app/shared/components/popover.component.scss

@@ -31,6 +31,8 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
   text-align: left;
   cursor: auto;
   user-select: text;
+  max-width: 100vw;
+  max-height: 100vh;
 
   &::after {
     position: absolute;
@@ -74,6 +76,8 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
     box-shadow: $box-shadow-base;
     overflow: hidden;
     position: relative;
+    width: 100%;
+    height: 100%;
   }
 
   &-close-button {
@@ -97,9 +101,17 @@ $box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0,
     }
   }
 
+  &-content {
+    width: 100%;
+    height: 100%;
+  }
+
   &-inner-content {
     padding: 12px 16px;
     color: rgba(0, 0, 0, 0.85);
+    overflow: auto;
+    width: 100%;
+    height: 100%;
   }
 
   // Arrows

ui-ngx/src/app/shared/components/popover.component.ts

@@ -312,7 +312,7 @@ export class TbPopoverService {
 
   displayPopover<T>(trigger: Element, renderer: Renderer2, hostView: ViewContainerRef,
                     componentType: Type<T>, preferredPlacement: PopoverPlacement = 'top', hideOnClickOutside = true,
-                    injector?: Injector, context?: any, popoverStyle: any = {}, style?: any): TbPopoverComponent {
+                    injector?: Injector, context?: any, overlayStyle: any = {}, popoverStyle: any = {}, style?: any): TbPopoverComponent {
     const componentRef = hostView.createComponent(this.componentFactory);
     const component = componentRef.instance;
     this.popoverWithTriggers.push({
@@ -329,6 +329,7 @@ export class TbPopoverService {
     component.tbComponentFactory = this.resolver.resolveComponentFactory(componentType);
     component.tbComponentInjector = injector;
     component.tbComponentContext = context;
+    component.tbOverlayStyle = overlayStyle;
     component.tbPopoverInnerStyle = popoverStyle;
     component.tbComponentStyle = style;
     component.tbHideOnClickOutside = hideOnClickOutside;
@@ -474,7 +475,7 @@ export class TbPopoverService {
             </div>
             <div class="tb-popover-inner" [ngStyle]="tbPopoverInnerStyle" role="tooltip">
               <div class="tb-popover-close-button" (click)="closeButtonClick($event)">×</div>
-              <div>
+              <div style="width: 100%; height: 100%;">
                 <div class="tb-popover-inner-content">
                   <ng-container *ngIf="tbContent">
                     <ng-container *tbStringTemplateOutlet="tbContent">{{ tbContent }}</ng-container>

ui-ngx/src/app/shared/shared.module.ts

@@ -314,7 +314,8 @@ import { MarkedOptionsService } from '@shared/components/marked-options.service'
       sanitize: SecurityContext.NONE,
       markedOptions: {
         provide: MarkedOptions,
-        useClass: MarkedOptionsService
+        useFactory: (markedOptionsService: MarkedOptionsService) => markedOptionsService,
+        deps: [MarkedOptionsService]
       }
     })
   ],