mirror of https://github.com/apache/nifi.git
[NIFI-13735] update codemirror to use height 100% and fix jolt advanced ui scrollbar issue (#9255)
This closes #9255
This commit is contained in:
Scott Aslan
GitHub
parent
445d34f91e
commit
981cb0fb4e
|
|
@ -26,29 +26,16 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.output-editor {
|
||||
.CodeMirror.cm-s-nifi {
|
||||
height: calc(100vh - 180px);
|
||||
min-height: 345px;
|
||||
}
|
||||
}
|
||||
|
||||
.jolt-spec-editor {
|
||||
.CodeMirror.cm-s-nifi {
|
||||
height: calc(100vh - 422px);
|
||||
}
|
||||
}
|
||||
|
||||
.input-editor {
|
||||
.CodeMirror.cm-s-nifi {
|
||||
height: calc(100vh - 414px);
|
||||
min-height: 116px;
|
||||
min-height: 81px;
|
||||
}
|
||||
}
|
||||
|
||||
.attributes-editor {
|
||||
height: calc(100vh - 362px);
|
||||
min-height: 168px;
|
||||
min-height: 126px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,35 +15,32 @@
|
|||
~ limitations under the License.
|
||||
-->
|
||||
|
||||
<div class="jolt-transform-json-ui flex flex-col h-screen">
|
||||
<div class="p-5 flex-1 flex flex-col">
|
||||
<div class="jolt-transform-json-ui p-5 flex flex-col h-full min-h-[495px] overflow-auto">
|
||||
<div class="flex-1 flex flex-col">
|
||||
<h3 class="primary-color">Advanced</h3>
|
||||
@if (processorDetails$ | async; as processorDetails) {
|
||||
<form [formGroup]="editJoltTransformJSONProcessorForm">
|
||||
<div class="flex justify-between"></div>
|
||||
<div class="flex flex-1 flex-row">
|
||||
<div class="w-1/3 pr-2 flex flex-col gap-y-3">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title> Properties </mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be used when transforming the input."></i
|
||||
>Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be
|
||||
used when transforming the input.
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="mt-4">
|
||||
<div class="flex">
|
||||
<component-context
|
||||
[type]="'Processor'"
|
||||
[name]="processorDetails?.name"></component-context>
|
||||
<form [formGroup]="editJoltTransformJSONProcessorForm" class="h-full flex flex-row">
|
||||
<div class="w-1/3 pr-2 flex-1">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title> Properties </mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be used when transforming the input."></i
|
||||
>Select the 'Jolt Transform' and enter the 'Jolt Specification' properties to be
|
||||
used when transforming the input.
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="grow mt-4">
|
||||
<div class="h-full flex flex-col">
|
||||
<component-context
|
||||
[type]="'Processor'"
|
||||
[name]="processorDetails?.name"></component-context>
|
||||
<div class="mt-2">
|
||||
<mat-form-field>
|
||||
<mat-label>
|
||||
|
|
@ -68,33 +65,39 @@
|
|||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
<div class="jolt-spec-editor mb-2 flex-1">
|
||||
<div class="flex flex-1 justify-start">
|
||||
<div class="mat-body-strong">
|
||||
Jolt Specification
|
||||
<i
|
||||
class="fa fa-info-circle primary-color ml-2"
|
||||
<div class="jolt-spec-editor grow mb-2">
|
||||
<div class="h-full flex flex-col">
|
||||
<div>
|
||||
<div class="mat-body-strong">
|
||||
Jolt Specification
|
||||
<i
|
||||
class="fa fa-info-circle primary-color ml-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Jolt Specification for transformation of JSON data. The value for this property may be the text of a Jolt specification or the path to a file containing a Jolt specification. 'Jolt Specification' must be set, or the value is ignored if the Jolt Sort Transformation is selected."></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-end mb-2">
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Jolt Specification for transformation of JSON data. The value for this property may be the text of a Jolt specification or the path to a file containing a Jolt specification. 'Jolt Specification' must be set, or the value is ignored if the Jolt Sort Transformation is selected."></i>
|
||||
[tooltipInputData]="getFormatTooltip()"
|
||||
(click)="formatSpecification()">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="relative flex-1">
|
||||
<div class="jolt-spec-editor h-full w-full absolute overflow-auto">
|
||||
<ngx-codemirror
|
||||
formControlName="specification"
|
||||
[options]="getJoltSpecOptions()"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="initSpecEditor($event)"></ngx-codemirror>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-1 justify-end mb-2">
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
[tooltipInputData]="getFormatTooltip()"
|
||||
(click)="formatSpecification()">
|
||||
<i class="fa fa-align-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ngx-codemirror
|
||||
formControlName="specification"
|
||||
[options]="getJoltSpecOptions()"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="initSpecEditor($event)"></ngx-codemirror>
|
||||
</div>
|
||||
<div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
@if (joltState.validate().loading) {
|
||||
|
|
@ -183,45 +186,47 @@
|
|||
>
|
||||
}
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<div class="flex flex-1 justify-between">
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
(click)="validateJoltSpec()"
|
||||
[disabled]="isValidateDisabled()">
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
(click)="saveProperties()"
|
||||
[disabled]="isSaveDisabled()">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<div class="flex flex-1 justify-between">
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
(click)="validateJoltSpec()"
|
||||
[disabled]="isValidateDisabled()">
|
||||
Validate
|
||||
</button>
|
||||
<button
|
||||
color="primary"
|
||||
mat-flat-button
|
||||
(click)="saveProperties()"
|
||||
[disabled]="isSaveDisabled()">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="w-1/3 pl-2 pr-2 flex-1 flex-col">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Flow File Input</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Enter 'Example Data' and/or 'Attributes' to be transformed by the 'Jolt Transform' and 'Jolt Specification'."></i
|
||||
>Enter sample flow file content and optional attributes to be transformed by the
|
||||
defined 'Jolt Transform' and 'Jolt Specification'.
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="w-1/3 pl-2 pr-2 flex flex-col">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title>Flow File Input</mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="Enter 'Example Data' and/or 'Attributes' to be transformed by the 'Jolt Transform' and 'Jolt Specification'."></i
|
||||
>Enter sample flow file content and optional attributes to be transformed by the
|
||||
defined 'Jolt Transform' and 'Jolt Specification'.
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="mt-4 gap-y-2">
|
||||
<div class="flex flex-col p-2 gap-y-2">
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="grow mt-4">
|
||||
<div class="h-full flex flex-col">
|
||||
<div class="grow flex flex-col gap-y-2">
|
||||
<mat-expansion-panel [expanded]="step === 0" (opened)="setStep(0)" hideToggle>
|
||||
<mat-expansion-panel-header>
|
||||
<mat-panel-title>
|
||||
|
|
@ -237,8 +242,8 @@
|
|||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
<div class="input-editor flex-1">
|
||||
<div class="flex flex-1 justify-end mb-4">
|
||||
<div class="flex flex-col">
|
||||
<div class="flex justify-end mb-4">
|
||||
<button
|
||||
mat-icon-button
|
||||
color="primary"
|
||||
|
|
@ -249,11 +254,13 @@
|
|||
<i class="fa fa-align-left"></i>
|
||||
</button>
|
||||
</div>
|
||||
<ngx-codemirror
|
||||
formControlName="input"
|
||||
[options]="getExampleDataOptions()"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="initInputEditor($event)"></ngx-codemirror>
|
||||
<div class="input-editor">
|
||||
<ngx-codemirror
|
||||
formControlName="input"
|
||||
[options]="getExampleDataOptions()"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="initInputEditor($event)"></ngx-codemirror>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
<mat-expansion-panel [expanded]="step === 1" (opened)="setStep(1)" hideToggle>
|
||||
|
|
@ -271,27 +278,29 @@
|
|||
</div>
|
||||
</mat-panel-title>
|
||||
</mat-expansion-panel-header>
|
||||
|
||||
<div class="attributes-editor">
|
||||
<map-table
|
||||
formControlName="expressionLanguageAttributes"
|
||||
[createNew]="createNew"
|
||||
[reportChangesOnly]="false">
|
||||
<div class="flex flex-row justify-end items-center">
|
||||
<button
|
||||
mat-icon-button
|
||||
[disabled]="isEmpty()"
|
||||
color="primary"
|
||||
type="button"
|
||||
(click)="clearAttributesClicked()">
|
||||
<i class="fa fa-eraser"></i>
|
||||
</button>
|
||||
</div>
|
||||
</map-table>
|
||||
<div class="flex-1">
|
||||
<div class="attributes-editor">
|
||||
<map-table
|
||||
formControlName="expressionLanguageAttributes"
|
||||
[createNew]="createNew"
|
||||
[reportChangesOnly]="false">
|
||||
<div class="flex flex-row justify-end items-center">
|
||||
<button
|
||||
title="Clear All"
|
||||
mat-icon-button
|
||||
[disabled]="isEmpty()"
|
||||
color="primary"
|
||||
type="button"
|
||||
(click)="clearAttributesClicked()">
|
||||
<i class="fa fa-eraser"></i>
|
||||
</button>
|
||||
</div>
|
||||
</map-table>
|
||||
</div>
|
||||
</div>
|
||||
</mat-expansion-panel>
|
||||
</div>
|
||||
<div class="flex flex-1 mt-2 justify-start">
|
||||
<div class="flex mt-2 justify-start">
|
||||
<div class="w-full overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
@if (joltState.transform().loading) {
|
||||
<i
|
||||
|
|
@ -333,51 +342,55 @@
|
|||
}
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<div class="flex flex-1 justify-start">
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
(click)="transformJoltSpec()"
|
||||
[disabled]="isTransformDisabled()">
|
||||
Transform
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
<mat-card-actions>
|
||||
<div class="flex flex-1 justify-start">
|
||||
<button
|
||||
mat-stroked-button
|
||||
color="primary"
|
||||
(click)="transformJoltSpec()"
|
||||
[disabled]="isTransformDisabled()">
|
||||
Transform
|
||||
</button>
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="w-1/3 pl-2">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title> Output </mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="The output of the transformation given the specification, flow file content, and (optional) attributes."></i
|
||||
>The output of the transformation given the specification, flow file content, and
|
||||
(optional) attributes.
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</mat-card>
|
||||
</div>
|
||||
<div class="w-1/3 pl-2 flex flex-col gap-y-3">
|
||||
<mat-card class="h-full">
|
||||
<mat-card-header>
|
||||
<mat-card-title> Output </mat-card-title>
|
||||
<mat-card-subtitle>
|
||||
<div class="overflow-ellipsis overflow-hidden whitespace-nowrap">
|
||||
<i
|
||||
class="fa fa-info-circle primary-color mr-2"
|
||||
nifiTooltip
|
||||
[tooltipComponentType]="TextTip"
|
||||
tooltipInputData="The output of the transformation given the specification, flow file content, and (optional) attributes."></i
|
||||
>The output of the transformation given the specification, flow file content,
|
||||
and (optional) attributes.
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content class="grow">
|
||||
<div class="h-full flex">
|
||||
<div class="relative mt-4 flex-1">
|
||||
<div class="output-editor h-full w-full absolute overflow-auto">
|
||||
<ngx-codemirror
|
||||
[ngModel]="
|
||||
joltState.transform().transformationResponse
|
||||
? (joltState.transform().transformationResponse | json)
|
||||
: ''
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
[options]="getOutputOptions()"
|
||||
(mousedown)="preventDrag($event)"></ngx-codemirror>
|
||||
</div>
|
||||
</mat-card-subtitle>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div class="output-editor mt-4 mb-4 flex-1">
|
||||
<ngx-codemirror
|
||||
[ngModel]="
|
||||
joltState.transform().transformationResponse
|
||||
? (joltState.transform().transformationResponse | json)
|
||||
: ''
|
||||
"
|
||||
[ngModelOptions]="{ standalone: true }"
|
||||
[options]="getOutputOptions()"
|
||||
(mousedown)="preventDrag($event)"></ngx-codemirror>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
</div>
|
||||
</form>
|
||||
} @else {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
resizable
|
||||
(resized)="resized($event)">
|
||||
<form class="h-full" [formGroup]="nfEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
|
||||
<div class="flex flex-col gap-y-3 h-full">
|
||||
<div class="flex flex-col gap-y-3 relative h-full">
|
||||
<div class="flex justify-end">
|
||||
<div
|
||||
class="property-hint flex gap-x-4 italic text-gray-500"
|
||||
|
|
@ -47,22 +47,25 @@
|
|||
</ng-template>
|
||||
</div>
|
||||
<div class="flex flex-col gap-y-0.5 flex-1">
|
||||
<div class="nf-editor flex-1" [class.blank]="blank" [class.sensitive]="showSensitiveHelperText">
|
||||
<div
|
||||
class="nf-editor h-full w-full absolute overflow-auto"
|
||||
[class.blank]="blank"
|
||||
[class.sensitive]="showSensitiveHelperText">
|
||||
<ngx-codemirror
|
||||
[options]="getOptions()"
|
||||
formControlName="value"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="codeMirrorLoaded($event)"></ngx-codemirror>
|
||||
@if (!readonly) {
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="setEmptyString"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(change)="setEmptyStringChanged()"
|
||||
>Set empty string
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
@if (!readonly) {
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="setEmptyString"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(change)="setEmptyStringChanged()"
|
||||
>Set empty string
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-x-2">
|
||||
@if (readonly) {
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
|
||||
.cm-s-nifi.CodeMirror {
|
||||
@extend .surface-contrast;
|
||||
min-height: 108px;
|
||||
height: 100%;
|
||||
cursor: default;
|
||||
line-height: normal;
|
||||
background-color: if(
|
||||
|
|
|
|||
|
|
@ -22,24 +22,24 @@
|
|||
resizable
|
||||
(resized)="resized($event)">
|
||||
<form class="h-full" [formGroup]="textEditorForm" cdkTrapFocus [cdkTrapFocusAutoCapture]="!readonly">
|
||||
<div class="flex flex-col gap-y-3 h-full">
|
||||
<div class="flex flex-col gap-y-3 relative h-full">
|
||||
<div class="flex flex-col gap-y-0.5 flex-1">
|
||||
<div class="editor flex-1" [class.blank]="blank">
|
||||
<div class="editor h-full w-full absolute overflow-auto" [class.blank]="blank">
|
||||
<ngx-codemirror
|
||||
formControlName="value"
|
||||
[options]="getOptions()"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(codeMirrorLoaded)="codeMirrorLoaded($event)"></ngx-codemirror>
|
||||
@if (!readonly) {
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="setEmptyString"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(change)="setEmptyStringChanged()"
|
||||
>Set empty string
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
@if (!readonly) {
|
||||
<mat-checkbox
|
||||
color="primary"
|
||||
formControlName="setEmptyString"
|
||||
(mousedown)="preventDrag($event)"
|
||||
(change)="setEmptyStringChanged()"
|
||||
>Set empty string
|
||||
</mat-checkbox>
|
||||
}
|
||||
</div>
|
||||
<div class="flex justify-end items-center gap-x-2">
|
||||
@if (readonly) {
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
</div>
|
||||
@if (!isDisabled) {
|
||||
<div>
|
||||
<button mat-icon-button color="primary" type="button" (click)="newEntryClicked()">
|
||||
<button title="Add" mat-icon-button color="primary" type="button" (click)="newEntryClicked()">
|
||||
<i class="fa fa-plus"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue