,
- private dynamicComponentFactoryService: DynamicComponentFactoryService) {}
+ private dynamicComponentFactoryService: DynamicComponentFactoryService,
+ private renderer: Renderer2) {}
ngOnChanges(changes: SimpleChanges): void {
if (isDefinedAndNotNull(this.data)) {
@@ -97,15 +103,25 @@ export class TbMarkdownComponent implements OnChanges {
private render(markdown: string) {
const compiled = this.markdownService.parse(markdown, { decodeHtml: false });
- let template = this.sanitizeCurlyBraces(compiled);
let markdownClass = 'tb-markdown-view';
if (this.markdownClass) {
markdownClass += ` ${this.markdownClass}`;
}
- template = `${template}
`;
+ let template = `${compiled}
`;
if (this.containerClass) {
template = `${template}
`;
}
+ const element: HTMLDivElement = this.renderer.createElement('div');
+ element.innerHTML = template;
+ this.handlePlugins(element);
+ this.markdownService.highlight(element);
+ const preElements = element.querySelectorAll('pre');
+ const matches = Array.from(template.matchAll(/)<\/pre>/g));
+ for (let i = 0; i < preElements.length; i++) {
+ const preHtml = preElements.item(i).outerHTML.replace('ngnonbindable=""', 'ngNonBindable');
+ template = template.replace(matches[i][0], preHtml);
+ }
+ template = this.sanitizeCurlyBraces(template);
this.markdownContainer.clear();
const parent = this;
let readyObservable: Observable;
@@ -113,8 +129,14 @@ export class TbMarkdownComponent implements OnChanges {
if (this.additionalCompileModules) {
compileModules = compileModules.concat(this.additionalCompileModules);
}
- let styles: string[] = deepClone(TbMarkdownComponent['ɵcmp'].styles);
- styles[0] = styles[0].replace(/\[_nghost\-%COMP%\]/g, '').replace(/\[_ngcontent\-%COMP%\]/g, '');
+ let styles: string[] = [];
+ if (this.applyDefaultMarkdownStyle) {
+ if (!defaultMarkdownStyle) {
+ defaultMarkdownStyle = deepClone(TbMarkdownComponent['ɵcmp'].styles)[0].replace(/\[_nghost\-%COMP%\]/g, '')
+ .replace(/\[_ngcontent\-%COMP%\]/g, '');
+ }
+ styles.push(defaultMarkdownStyle);
+ }
if (this.additionalStyles) {
styles = styles.concat(this.additionalStyles);
}
@@ -139,20 +161,18 @@ export class TbMarkdownComponent implements OnChanges {
}
}
this.tbMarkdownInstanceComponentRef.instance.style = this.style;
- this.handlePlugins(this.tbMarkdownInstanceComponentRef.location.nativeElement);
- this.markdownService.highlight(this.tbMarkdownInstanceComponentRef.location.nativeElement);
readyObservable = this.handleImages(this.tbMarkdownInstanceComponentRef.location.nativeElement);
this.cd.detectChanges();
this.error = null;
} catch (error) {
- readyObservable = this.handleError(compiled, error);
+ readyObservable = this.handleError(template, error, styles);
}
readyObservable.subscribe(() => {
this.ready.emit();
});
},
(error) => {
- readyObservable = this.handleError(compiled, error);
+ readyObservable = this.handleError(template, error, styles);
this.cd.detectChanges();
readyObservable.subscribe(() => {
this.ready.emit();
@@ -160,14 +180,24 @@ export class TbMarkdownComponent implements OnChanges {
});
}
- private handleError(template: string, error): Observable {
+ private handleError(template: string, error, styles?: string[]): Observable {
this.error = (error ? error + '' : 'Failed to render markdown!').replace(/\n/g, '
');
this.markdownContainer.clear();
if (this.fallbackToPlainMarkdownValue) {
const element = this.fallbackElement.nativeElement;
+ let styleElement;
+ if (styles?.length) {
+ const markdownClass = 'tb-markdown-view-' + guid();
+ let innerStyle = styles.join('\n');
+ innerStyle = innerStyle.replace(/\.tb-markdown-view/g, '.' + markdownClass);
+ template = template.replace(/tb-markdown-view/g, markdownClass);
+ styleElement = this.renderer.createElement('style');
+ styleElement.innerHTML = innerStyle;
+ }
element.innerHTML = template;
- this.handlePlugins(element);
- this.markdownService.highlight(element);
+ if (styleElement) {
+ this.renderer.appendChild(element, styleElement);
+ }
return this.handleImages(element);
} else {
return of(null);
diff --git a/ui-ngx/src/app/shared/models/time/time.models.ts b/ui-ngx/src/app/shared/models/time/time.models.ts
index 6c04aef946..06cf0ffd5f 100644
--- a/ui-ngx/src/app/shared/models/time/time.models.ts
+++ b/ui-ngx/src/app/shared/models/time/time.models.ts
@@ -237,7 +237,7 @@ export function initModelFromDefaultTimewindow(value: Timewindow, quickIntervalO
model.hideAggInterval = value.hideAggInterval;
model.hideTimezone = value.hideTimezone;
model.selectedTab = getTimewindowType(value);
- if (model.selectedTab === TimewindowType.REALTIME) {
+ if (isDefined(value.realtime)) {
if (isDefined(value.realtime.interval)) {
model.realtime.interval = value.realtime.interval;
}
@@ -250,12 +250,14 @@ export function initModelFromDefaultTimewindow(value: Timewindow, quickIntervalO
} else {
model.realtime.realtimeType = value.realtime.realtimeType;
}
- if (model.realtime.realtimeType === RealtimeWindowType.INTERVAL) {
+ if (isDefined(value.realtime.quickInterval)) {
model.realtime.quickInterval = value.realtime.quickInterval;
- } else {
+ }
+ if (isDefined(value.realtime.timewindowMs)) {
model.realtime.timewindowMs = value.realtime.timewindowMs;
}
- } else {
+ }
+ if (isDefined(value.history)) {
if (isDefined(value.history.interval)) {
model.history.interval = value.history.interval;
}
@@ -270,13 +272,19 @@ export function initModelFromDefaultTimewindow(value: Timewindow, quickIntervalO
} else {
model.history.historyType = value.history.historyType;
}
- if (model.history.historyType === HistoryWindowType.LAST_INTERVAL) {
+ if (isDefined(value.history.timewindowMs)) {
model.history.timewindowMs = value.history.timewindowMs;
- } else if (model.history.historyType === HistoryWindowType.INTERVAL) {
+ }
+ if (isDefined(value.history.quickInterval)) {
model.history.quickInterval = value.history.quickInterval;
- } else {
- model.history.fixedTimewindow.startTimeMs = value.history.fixedTimewindow.startTimeMs;
- model.history.fixedTimewindow.endTimeMs = value.history.fixedTimewindow.endTimeMs;
+ }
+ if (isDefined(value.history.fixedTimewindow)) {
+ if (isDefined(value.history.fixedTimewindow.startTimeMs)) {
+ model.history.fixedTimewindow.startTimeMs = value.history.fixedTimewindow.startTimeMs;
+ }
+ if (isDefined(value.history.fixedTimewindow.endTimeMs)) {
+ model.history.fixedTimewindow.endTimeMs = value.history.fixedTimewindow.endTimeMs;
+ }
}
}
if (value.aggregation) {
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 8fdb965dd6..05add798f5 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -4901,6 +4901,7 @@
"use-markdown-text-function": "Use markdown/HTML value function",
"markdown-text-function": "Markdown/HTML value function",
"markdown-text-pattern": "Markdown/HTML pattern (markdown or HTML with variables, for ex. '${entityName} or ${keyName} - some text.')",
+ "apply-default-markdown-style": "Apply default markdown style",
"markdown-css": "Markdown/HTML CSS"
},
"simple-card": {
diff --git a/ui-ngx/src/styles.scss b/ui-ngx/src/styles.scss
index 2704c7d522..3a7772a5fc 100644
--- a/ui-ngx/src/styles.scss
+++ b/ui-ngx/src/styles.scss
@@ -424,55 +424,6 @@ mat-label {
}
}
-.tb-markdown-view {
- pre[class*="language-"] {
-
- .token.atrule, .token.attr-value, .token.keyword {
- color: #2a7dec;
- }
-
- .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted {
- color: #eb5757;
- }
-
- .token.punctuation {
- color: #212529;
- }
-
- &.line-numbers {
- padding-left: 66px;
-
- & > code {
- span.line-numbers-rows {
- top: -12px;
- bottom: -12px;
- left: -66px;
- width: 50px;
- border: none;
- padding: 8px 12px 8px 18px;
- text-align: right;
- background: #f9fbff;
-
- & > span:before {
- color: rgba(33, 37, 41, .6);
- padding-right: 0;
- }
- }
- }
-
- &.no-line-numbers {
- padding-left: 16px;
-
- & > code {
- span.line-numbers-rows {
- display: none;
- }
- }
- }
- }
- }
-}
-
// Tooltipster
.tooltipster-sidetip.tooltipster-tb {