Skip to content

Commit

Permalink
NIFI-11874 update Process Group configuration layout in the UI (#7591)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@markobean
markobean authored Oct 21, 2023
1 parent 2687a59 commit 63a2503
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 115 deletions.
238 changes: 125 additions & 113 deletions ...i-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/process-group-configuration.jsp
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
11 changes: 9 additions & 2 deletions ...e/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/process-group-configuration.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,18 +76,24 @@

/* 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;
}

#process-group-parameter-context-combo {
width: 328px;
float: left;
}

#parameter-contexts-recursive-container {
float: left;
margin-left: 10px;
}

Expand Down Expand Up @@ -126,6 +132,7 @@

#process-group-comments {
height: 100px;
width: 750px;
}

#read-only-process-group-comments {
Expand Down

0 comments on commit 63a2503

Please sign in to comment.