dendi-wang/thingsboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added highlight rules

Browse Source
This commit is contained in:
mpetrov 2025-02-18 18:21:59 +02:00
parent 036cff6a75
commit 7216719d3e
8 changed files with 139 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-ngx/src/app/modules/home/components/calculated-fields/calculated-fields-table-config.ts
View File

@ -43,6 +43,7 @@ import {
CalculatedFieldDialogData,
CalculatedFieldTestScriptDialogData,
getCalculatedFieldArgumentsEditorCompleter,
getCalculatedFieldArgumentsHighlights,
} from '@shared/models/calculated-field.models';
import {
CalculatedFieldDebugDialogComponent,
@ -275,6 +276,7 @@ export class CalculatedFieldsTableConfig extends EntityTableConfig<CalculatedFie
arguments: resultArguments,
expression: calculatedField.configuration.expression,
argumentsEditorCompleter: getCalculatedFieldArgumentsEditorCompleter(calculatedField.configuration.arguments),
argumentsHighlightRules: getCalculatedFieldArgumentsHighlights(calculatedField.configuration.arguments),
openCalculatedFieldEdit
}
}).afterClosed()

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.html
View File

@ -96,9 +96,11 @@
required
formControlName="expressionSCRIPT"
functionName="calculate"
class="expression-edit"
[functionArgs]="functionArgs$ | async"
[disableUndefinedCheck]="true"
[scriptLanguage]="ScriptLanguage.TBEL"
[highlightRules]="argumentsHighlightRules$ | async"
[editorCompleter]="argumentsEditorCompleter$ | async"
helpId="calculated-field/expression_fn"
>

18
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.scss
View File

@ -20,3 +20,21 @@
max-width: 100%;
}
}
:host ::ng-deep {
.expression-edit {
.ace_tb {
&.ace_calculated-field {
&-key {
color: #C52F00;
}
&-ts, &-time-window, &-values, &-value {
color: #7214D0;
}
&-start-ts, &-end-ts, &-limit {
color: #185F2A;
}
}
}
}
}

7
ui-ngx/src/app/modules/home/components/calculated-fields/components/dialog/calculated-field-dialog.component.ts
View File

@ -28,6 +28,7 @@ import {
CalculatedFieldType,
CalculatedFieldTypeTranslations,
getCalculatedFieldArgumentsEditorCompleter,
getCalculatedFieldArgumentsHighlights,
OutputType,
OutputTypeTranslations
} from '@shared/models/calculated-field.models';
@ -74,6 +75,12 @@ export class CalculatedFieldDialogComponent extends DialogComponent<CalculatedFi
map(argumentsObj => getCalculatedFieldArgumentsEditorCompleter(argumentsObj))
);
argumentsHighlightRules$ = this.configFormGroup.get('arguments').valueChanges
.pipe(
startWith(this.data.value?.configuration?.arguments ?? {}),
map(argumentsObj => getCalculatedFieldArgumentsHighlights(argumentsObj))
);
additionalDebugActionConfig = this.data.value?.id ? {
...this.data.additionalDebugActionConfig,
action: () => this.data.additionalDebugActionConfig.action({ id: this.data.value.id, ...this.fromGroupValue }),

2
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.html
View File

@ -36,9 +36,11 @@
#expressionContent
formControlName="expression"
functionName="calculate"
class="expression-edit"
[functionArgs]="functionArgs"
[disableUndefinedCheck]="true"
[fillHeight]="true"
[highlightRules]="data.argumentsHighlightRules"
[scriptLanguage]="ScriptLanguage.TBEL"
[editorCompleter]="data.argumentsEditorCompleter"
resultType="object"

16
ui-ngx/src/app/modules/home/components/calculated-fields/components/test-dialog/calculated-field-script-test-dialog.component.scss
View File

@ -71,4 +71,20 @@
background-image: url("../../../../../../../assets/split.js/grips/vertical.png");
}
}
.expression-edit {
.ace_tb {
&.ace_calculated-field {
&-key {
color: #C52F00;
}
&-ts, &-time-window, &-values, &-value {
color: #7214D0;
}
&-start-ts, &-end-ts, &-limit {
color: #185F2A;
}
}
}
}
}

37
ui-ngx/src/app/shared/components/js-func.component.ts
View File

@ -187,6 +187,9 @@ export class JsFuncComponent implements OnInit, OnChanges, OnDestroy, ControlVal
if (changes.editorCompleter?.previousValue) {
this.updateCompleters();
}
if (changes.highlightRules?.previousValue) {
this.updateHighlightRules();
}
}
ngOnInit(): void {
@ -247,21 +250,7 @@ export class JsFuncComponent implements OnInit, OnChanges, OnDestroy, ControlVal
}
});
}
// @ts-ignore
if (!!this.highlightRules && !!this.jsEditor.session.$mode) {
// @ts-ignore
const newMode = new this.jsEditor.session.$mode.constructor();
newMode.$highlightRules = new newMode.HighlightRules();
for(const group in this.highlightRules) {
if(!!newMode.$highlightRules.$rules[group]) {
newMode.$highlightRules.$rules[group].unshift(...this.highlightRules[group]);
} else {
newMode.$highlightRules.$rules[group] = this.highlightRules[group];
}
}
// @ts-ignore
this.jsEditor.session.$onChangeMode(newMode);
}
this.updateHighlightRules();
this.updateJsWorkerGlobals();
this.initialCompleters = this.jsEditor.completers || [];
this.updateCompleters();
@ -282,6 +271,24 @@ export class JsFuncComponent implements OnInit, OnChanges, OnDestroy, ControlVal
}
}
private updateHighlightRules(): void {
// @ts-ignore
if (!!this.highlightRules && !!this.jsEditor.session.$mode) {
// @ts-ignore
const newMode = new this.jsEditor.session.$mode.constructor();
newMode.$highlightRules = new newMode.HighlightRules();
for(const group in this.highlightRules) {
if(!!newMode.$highlightRules.$rules[group]) {
newMode.$highlightRules.$rules[group].unshift(...this.highlightRules[group]);
} else {
newMode.$highlightRules.$rules[group] = this.highlightRules[group];
}
}
// @ts-ignore
this.jsEditor.session.$onChangeMode(newMode);
}
}
private onAceEditorResize() {
if (this.editorsResizeCaf) {
this.editorsResizeCaf();

71
ui-ngx/src/app/shared/models/calculated-field.models.ts
View File

@ -28,6 +28,7 @@ import { EntityType } from '@shared/models/entity-type.models';
import { AliasFilterType } from '@shared/models/alias.models';
import { Observable } from 'rxjs';
import { TbEditorCompleter } from '@shared/models/ace/completion.models';
import { AceHighlightRules } from '@shared/models/ace/ace.models';
export interface CalculatedField extends Omit<BaseData<CalculatedFieldId>, 'label'>, HasVersion, HasTenantId, ExportableEntity<CalculatedFieldId> {
debugSettings?: EntityDebugSettings;
@ -168,6 +169,7 @@ export interface CalculatedFieldTestScriptInputParams {
export interface CalculatedFieldTestScriptDialogData extends CalculatedFieldTestScriptInputParams {
argumentsEditorCompleter: TbEditorCompleter;
argumentsHighlightRules: AceHighlightRules;
openCalculatedFieldEdit?: boolean;
}
@ -313,5 +315,72 @@ export const getCalculatedFieldArgumentsEditorCompleter = (argumentsObj: Record<
break;
}
return acc;
}, {}))
}, {}));
}
export const getCalculatedFieldArgumentsHighlights = (
argumentsObj: Record<string, CalculatedFieldArgument>
): AceHighlightRules => {
return {
start: Object.keys(argumentsObj).map(key => ({
token: 'tb.calculated-field-key',
regex: `\\b${key}\\b`,
next: argumentsObj[key].refEntityKey.type === ArgumentType.Rolling
? 'calculatedFieldRollingArgumentValue'
: 'calculatedFieldSingleArgumentValue'
})),
...calculatedFieldSingleArgumentValueHighlightRules,
...calculatedFieldRollingArgumentValueHighlightRules,
...calculatedFieldTimeWindowArgumentValueHighlightRules
};
};
const calculatedFieldSingleArgumentValueHighlightRules: AceHighlightRules = {
calculatedFieldSingleArgumentValue: [
{
token: 'tb.calculated-field-value',
regex: /value/,
next: 'no_regex'
},
{
token: 'tb.calculated-field-ts',
regex: /ts/,
next: 'no_regex'
}
],
}
const calculatedFieldRollingArgumentValueHighlightRules: AceHighlightRules = {
calculatedFieldRollingArgumentValue: [
{
token: 'tb.calculated-field-values',
regex: /values/,
next: 'no_regex'
},
{
token: 'tb.calculated-field-time-window',
regex: /timeWindow/,
next: 'calculatedFieldRollingArgumentTimeWindow'
}
],
}
const calculatedFieldTimeWindowArgumentValueHighlightRules: AceHighlightRules = {
calculatedFieldRollingArgumentTimeWindow: [
{
token: 'tb.calculated-field-start-ts',
regex: /startTs/,
next: 'no_regex'
},
{
token: 'tb.calculated-field-end-ts',
regex: /endTs/,
next: 'no_regex'
},
{
token: 'tb.calculated-field-limit',
regex: /limit/,
next: 'no_regex'
}
]
}