NIFI-11874 update Process Group configuration layout in the UI (#7591)

* NIFI-11874 update Process Group configuration layout in the UI

* NIFI-11874: relocate checkbox for recursive application of paramenter context

* NIFI-11874 remove comments tab from process group configuration

* NIFI-11874 minor cleanup of float CSS for process-group-parameter-context-combo

This closes #7591
This commit is contained in:
markobean 2023-10-21 10:09:29 -04:00 committed by GitHub
parent 2687a591c3
commit 63a2503fc3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 134 additions and 115 deletions

View File

@ -26,130 +26,142 @@
<button id="add-process-group-configuration-controller-service" class="add-button fa fa-plus" title="Create a new controller service"></button>
<div id="general-process-group-configuration-tab-content" class="configuration-tab">
<div id="general-process-group-configuration">
<div class="setting">
<div class="setting-name">Process group name</div>
<span id="process-group-id" class="hidden"></span>
<div class="editable setting-field">
<input type="text" id="process-group-name" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-name" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group parameter context</div>
<div class="editable setting-field">
<div id="process-group-parameter-context-combo"></div>
<div id="parameter-contexts-recursive-container">
<div id="parameter-contexts-recursive" class="nf-checkbox checkbox-unchecked"></div>
<div class="nf-checkbox-label">Apply recursively</div>
<div class="fa fa-question-circle" alt="Info" title="When checked Parameter Context will be applied to the Process Group and all the embedded Process Groups recursively, if the user has the proper permissions on all the respective components. If the user does not have the proper permissions on any embedded Process Group, then the Parameter Context will not be applied for any components."></div>
<div class="settings-columns">
<div class="settings-column">
<div class="setting">
<div class="setting-name">Process group name</div>
<span id="process-group-id" class="hidden"></span>
<div class="editable setting-field">
<input type="text" id="process-group-name" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-name" class="unset"></span>
</div>
</div>
<div class="clear"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-parameter-context" class="unset">Unauthorized</span>
</div>
</div>
<div class="setting">
<div class="setting-name">Execution Engine</div>
<div class="editable setting-field">
<div id="process-group-execution-engine-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-execution-engine" class="unset"></span>
</div>
</div>
<div id="stateless-group-options" class="setting">
<div class="setting">
<div class="setting-name">Max Concurrent Tasks</div>
<div class="editable setting-field">
<input type="text" id="process-group-max-concurrent-tasks" class="setting-input"/>
<div class="setting">
<div class="setting-name">Process group parameter context</div>
<div class="editable setting-field">
<div id="process-group-parameter-context-combo"></div>
<div id="parameter-contexts-recursive-container">
<div id="parameter-contexts-recursive" class="nf-checkbox checkbox-unchecked"></div>
<div class="nf-checkbox-label">Apply recursively</div>
<div class="fa fa-question-circle" alt="Info" title="When checked Parameter Context will be applied to the Process Group and all the embedded Process Groups recursively, if the user has the proper permissions on all the respective components. If the user does not have the proper permissions on any embedded Process Group, then the Parameter Context will not be applied for any components."></div>
</div>
<div class="clear"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-parameter-context" class="unset">Unauthorized</span>
</div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-max-concurrent-tasks" class="unset"></span>
<div class="setting">
<div class="setting-name">Execution Engine</div>
<div class="editable setting-field">
<div id="process-group-execution-engine-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-execution-engine" class="unset"></span>
</div>
</div>
<div id="stateless-group-options" class="setting">
<div class="setting">
<div class="setting-name">Max Concurrent Tasks</div>
<div class="editable setting-field">
<input type="text" id="process-group-max-concurrent-tasks" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-max-concurrent-tasks" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Stateless Flow Timeout</div>
<div class="editable setting-field">
<input type="text" id="process-group-stateless-flow-timeout" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-stateless-flow-timeout" class="unset"></span>
</div>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group FlowFile concurrency</div>
<div class="editable setting-field">
<div id="process-group-flowfile-concurrency-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-flowfile-concurrency" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group outbound policy</div>
<div class="editable setting-field">
<div id="process-group-outbound-policy-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-outbound-policy" class="unset"></span>
</div>
</div>
</div>
<div class="setting">
<div class="setting-name">Stateless Flow Timeout</div>
<div class="editable setting-field">
<input type="text" id="process-group-stateless-flow-timeout" class="setting-input"/>
<div class="settings-column">
<div class="setting">
<div class="setting-name">Default FlowFile Expiration
<div class="fa fa-question-circle" alt="Info" title="This setting applies as the default FLowFile expiration for any new connection. Configuration of existing connections is unaffected."></div>
</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-flowfile-expiration" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-flowfile-expiration" class="unset"></span>
</div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-stateless-flow-timeout" class="unset"></span>
<div class="setting">
<div class="setting-name">Default Back Pressure Object Threshold
<div class="fa fa-question-circle" alt="Info" title="This setting applies as the default back pressure object count for any new connection. Configuration of existing connections is unaffected."></div>
</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-back-pressure-object-threshold" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-back-pressure-object-threshold" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Default Back Pressure Data Size Threshold
<div class="fa fa-question-circle" alt="Info" title="This setting applies as the default back pressure data size for any new connection. Configuration of existing connections is unaffected."></div>
</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-back-pressure-data-size-threshold" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-back-pressure-data-size-threshold" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Log File Suffix
<div class="fa fa-question-circle" alt="Info" title="Turns on dedicated logging. When left empty log messages will be logged only to the primary app log. When set messages logged by components in this group will be sent to the standard app log, as well as a separate log file, with the provided name, specific to this group."></div>
</div>
<div class="editable setting-field">
<input type="text" id="process-group-log-file-suffix" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-log-file-suffix" class="unset"></span>
</div>
</div>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group FlowFile concurrency</div>
<div class="editable setting-field">
<div id="process-group-flowfile-concurrency-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-flowfile-concurrency" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group comments</div>
<div class="editable setting-field">
<textarea id="process-group-comments" class="setting-input"></textarea>
</div>
<div class="setting">
<div class="setting-name">Process group outbound policy</div>
<div class="editable setting-field">
<div id="process-group-outbound-policy-combo"></div>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-outbound-policy" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Default FlowFile Expiration</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-flowfile-expiration" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-flowfile-expiration" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Default Back Pressure Object Threshold</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-back-pressure-object-threshold" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-back-pressure-object-threshold" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Default Back Pressure Data Size Threshold</div>
<div class="editable setting-field">
<input type="text" id="process-group-default-back-pressure-data-size-threshold" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-default-back-pressure-data-size-threshold" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Log File Suffix
<div class="fa fa-question-circle" alt="Info" title="Turns on dedicated logging. When left empty log messages will be logged only to the primary app log. When set messages logged by components in this group will be sent to the standard app log, as well as a separate log file, with the provided name, specific to this group."></div>
</div>
<div class="editable setting-field">
<input type="text" id="process-group-log-file-suffix" class="setting-input"/>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-log-file-suffix" class="unset"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Process group comments</div>
<div class="editable setting-field">
<textarea id="process-group-comments" class="setting-input"></textarea>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-comments" class="unset"></span>
</div>
<div class="read-only setting-field">
<span id="read-only-process-group-comments" class="unset"></span>
</div>
</div>
<div class="editable settings-buttons">
<div id="process-group-configuration-save" class="button">Apply</div>
<div class="clear"></div>
</div>
<div class="editable settings-buttons">
<div id="process-group-configuration-save" class="button">Apply</div>
<div class="clear"></div>
</div>
</div>
<div id="process-group-controller-services-tab-content" class="configuration-tab">

View File

@ -76,6 +76,14 @@
/* general */
#general-process-group-configuration div.settings-columns {
display: flex;
}
#general-process-group-configuration div.settings-columns .settings-column {
margin-right: 50px;
}
#general-process-group-configuration input, #general-process-group-configuration textarea {
width: 350px;
vertical-align: middle;
@ -83,11 +91,9 @@
#process-group-parameter-context-combo {
width: 328px;
float: left;
}
#parameter-contexts-recursive-container {
float: left;
margin-left: 10px;
}
@ -126,6 +132,7 @@
#process-group-comments {
height: 100px;
width: 750px;
}
#read-only-process-group-comments {