This is an automated email from the ASF dual-hosted git repository.
mcgilman pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/nifi.git
The following commit(s) were added to refs/heads/main by this push:
new 63a2503fc3 NIFI-11874 update Process Group configuration layout in the
UI (#7591)
63a2503fc3 is described below
commit 63a2503fc385b1450cde879a3a1cf2b05584e5bd
Author: markobean <[email protected]>
AuthorDate: Sat Oct 21 10:09:29 2023 -0400
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
---
.../canvas/process-group-configuration.jsp | 238 +++++++++++----------
.../webapp/css/process-group-configuration.css | 11 +-
2 files changed, 134 insertions(+), 115 deletions(-)
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
index f4858a4405..4064ec5cf0 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
@@ -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>
- <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 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="read-only setting-field">
- <span
id="read-only-process-group-stateless-flow-timeout" class="unset"></span>
+ <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>
- <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 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 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="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">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="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">
diff --git
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
index ca0b80f8eb..1059af3956 100644
---
a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
+++
b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
@@ -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 {
