Apache
/
nifi
mirror of https://github.com/apache/nifi.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

NIFI-9514 NIFI-9515: Add UI support for Parameter Providers in Controller Services (#5671) 

* NIFI-9514 - Add UI support for Parameter Providers in Controller Services

* - Fix a dialog closing issue

* - Hide fetch parameters button if there are config errors

* - Update Fetch Parameters dialog with new UX
- Implement checkbox logic for Selectable Parameters table

* - add createNewParameterContext property to track if group will be created as a new parameter context
- update fetch parameters dialog views for editing and after applying changes
- show affected referencing components after applying changes
- disable apply button if no parameter contexts will be updated
- refactor showing and hiding fetched parameters and selectable parameters tables logic
- add tooltip for parameter context icon

* - update parameter contexts view for provided contexts

* - add affected referencing components after applying fetched parameters
- add referencing parameter contexts to the provider settings tab
- update checkbox style in the selectable parameters table
- fix updating the referencing components border
- fix lint errors

* - fix selectable parameters table checkbox styles

* - fix hasParameterContextChanged checks
- checkbox style tweaks

* - add status bar to fetch parameters dialog

* - more style tweaks and remove unnecessary code

* - fix the selectable parameters table not saving and loading correctly

* - add tooltips
- fix styles

* - link from the parameter context to the associated parameter provider

* 9514: support navigating to the controller service created in parameter providers

* fix bulletins format in status bar

* address review feedback
- manage permissions for parameter providers
- disable/enable Fetch Parameters dialog Apply button

* manage authorizations to access parameter providers and parameter contexts

* fix lint errors

* fix and refactor hasGroupsChanged to determine the Apply button state

* new parameter context name input cannot be empty in Fetch Parameters dialog

* address review feedback

* fix duplicate code

* more fixes

* update fetch parameters checkbox states

* replace slickgrid checkbox selection plugin with custom implementation for different selection types
- check for affected parameters using the parameter status

* fixed showing the correct referencing components when switching groups

* fixed selectable parameters table shifting contents on row selection

* leverage slickgrid onClick to set user-selected parameter sensitivities in the selectable parameters table

* fix statusbar bulletins in processor details
- fix updating borders for referencing components
- update referencing parameter icon
- update table title in fetch parameters dialog

* address review feedback

* populate controller services referencing components of a referenced provider
- update controller services tab name

* showing parameter providers in CS controller service

* update tooltip messages in fetch parameters dialog
- fix dialog height to make room for the status bar

* reload the parameter providers table after a referenced parameter provider change in controller services
- fix conditions for enabling/disabling fetch parameters dialog Apply button
- add affected components no permissions message in the dialog

* fix always reloading the parameter providers table
- fix disableApplyButton checks
- add dialog message for a missing new parameter context name

* remove extra reload

* more fixes for disableApplyButton
- fixed styles for dialog message

* add a check in disableApplyButton for changed parameter values that are not referenced
- add changed value icon for parameters that are not referenced
- fix border on the referencing affected components container

* removed unnused plugins

This closes #5671
This commit is contained in:
M Tien 2022-09-24 05:43:27 -07:00 committed by GitHub
parent a52974780d
commit d82ce18f88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
23 changed files with 5577 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/pom.xml
View File

@ -541,6 +541,7 @@
<include>${staging.dir}/js/nf/canvas/nf-controller-service.js</include>
<include>${staging.dir}/js/nf/canvas/nf-controller-services.js</include>
<include>${staging.dir}/js/nf/canvas/nf-reporting-task.js</include>
<include>${staging.dir}/js/nf/canvas/nf-parameter-provider.js</include>
<include>${staging.dir}/js/nf/canvas/nf-settings.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js</include>
@ -734,6 +735,7 @@
<output>${project.build.directory}/${project.build.finalName}/css/nf-canvas-all.css</output>
<includes>
<include>${staging.dir}/css/reporting-task.css</include>
<include>${staging.dir}/css/parameter-provider.css</include>
<include>${staging.dir}/css/controller-service.css</include>
<include>${staging.dir}/css/processor-configuration.css</include>
<include>${staging.dir}/css/processor-details.css</include>
@ -753,6 +755,7 @@
<include>${staging.dir}/css/new-port-dialog.css</include>
<include>${staging.dir}/css/new-controller-service-dialog.css</include>
<include>${staging.dir}/css/new-reporting-task-dialog.css</include>
<include>${staging.dir}/css/new-parameter-provider-dialog.css</include>
<include>${staging.dir}/css/new-parameter-context-dialog.css</include>
<include>${staging.dir}/css/graph.css</include>
<include>${staging.dir}/css/header.css</include>

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/resources/filters/canvas.properties
View File

@ -71,6 +71,7 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-ng-bridge.js?
<script type="text/javascript" src="js/nf/canvas/nf-controller-service.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-controller-services.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-reporting-task.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-parameter-provider.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-settings.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-header-controller.js?${project.version}"></script>\n\

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/pages/canvas.jsp
View File

@ -110,8 +110,10 @@
<jsp:include page="/WEB-INF/partials/canvas/search-users-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/disable-controller-service-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/enable-controller-service-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/fetch-parameters-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-controller-service-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-reporting-task-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-parameter-provider-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-parameter-context-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-processor-dialog.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/new-port-dialog.jsp"/>
@ -141,6 +143,7 @@
<jsp:include page="/WEB-INF/partials/canvas/shell.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/controller-service-configuration.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/reporting-task-configuration.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/parameter-provider-configuration.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/processor-configuration.jsp"/>
<jsp:include page="/WEB-INF/partials/processor-details.jsp"/>
<jsp:include page="/WEB-INF/partials/canvas/variable-configuration.jsp"/>

204
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/fetch-parameters-dialog.jsp Normal file
View File

@ -0,0 +1,204 @@
<%--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="fetch-parameters-dialog" layout="column" class="hidden large-dialog">
<div id="fetch-parameters-status-bar"></div>
<div class="dialog-content">
<%--settings-left--%>
<div class="settings-left">
<div id="fetch-parameters-provider-groups-container" class="setting">
<div class="setting-name">Name</div>
<div class="setting-field">
<span id="fetch-parameters-id" class="hidden"></span>
<div id="fetch-parameters-name"></div>
<div class="clear"></div>
</div>
</div>
<div id="fetch-parameters-usage-container" class="setting">
<div class="setting-name">
Select to configure a parameter group
<div class="fa fa-question-circle" alt="Info" title="Discovered parameter groups from this parameter provider. Select a group to create a parameter context, then configure its parameter sensitivities."></div>
</div>
<div id="parameter-groups-table"></div>
</div>
<div id="apply-groups-container" class="setting hidden">
<div class="setting-name">Parameter Groups</div>
<div class="setting-field">
<div id="apply-groups-list"></div>
</div>
</div>
</div>
<%--end settings-left--%>
<div class="spacer">&nbsp;</div>
<%--settings-center--%>
<div class="settings-center">
<div id="parameters-container" class="setting">
<div id="create-parameter-context-checkbox-container" class="setting-field"></div>
<div id="fetched-parameters-container" class="setting">
<div class="setting-name">
Fetched parameters
<div class="fa fa-question-circle" alt="Info" title="Discovered parameters from the selected parameter group."></div>
</div>
<div id="fetched-parameters-listing-container" class="setting-field">
<ol id="fetched-parameters-listing"></ol>
</div>
</div>
<div id="selectable-parameters-container" class="setting">
<div class="setting-name">
Select parameters to be set as sensitive
<div class="fa fa-question-circle" alt="Info" title="Only parameters that are not referenced can be modified."></div>
</div>
<div id="selectable-parameters-buttons">
<button id="select-all-fetched-parameters" class="selectable-parameters-buttons">
<div class="fa fa-check-square-o"></div>
<span>Select all</span>
</button>
<button id="deselect-all-fetched-parameters" class="selectable-parameters-buttons">
<div class="fa fa-minus-square-o"></div>
<span>Deselect all</span>
</button>
<div class="clear"></div>
</div>
<div id="selectable-parameters-table" class="setting-field"></div>
</div>
</div>
<div id="fetch-parameters-update-status-container" class="setting">
<div id="fetch-parameters-update-status" class="hidden">
<div class="setting">
<div class="setting-name">
Steps to update parameters
</div>
<div class="setting-field">
<ol id="fetch-parameters-update-steps"></ol>
</div>
</div>
</div>
</div>
</div>
<%--end settings-center--%>
<div class="spacer">&nbsp;</div>
<%--settings-right--%>
<div class="settings-right">
<div class="setting">
<div class="setting-name">
Parameter Contexts To Create
<div class="fa fa-question-circle" alt="Info" title="Parameter groups set to be created as parameter contexts, pending apply."></div>
</div>
<div class="setting-field">
<div id="parameter-contexts-to-create-container" class="ellipsis"></div>
</div>
</div>
<div class="setting">
<div class="setting-name">
Parameter Contexts To Update
<div class="fa fa-question-circle" alt="Info" title="Synced parameter contexts to be updated, pending apply."></div>
<div class="referencing-components-loading"></div>
</div>
<div class="setting-field">
<div id="parameter-contexts-to-update-container" class="ellipsis"></div>
</div>
</div>
<div id="fetch-parameters-referencing-components-container" class="setting hidden">
<div class="setting-name">
Referencing Components
<div class="fa fa-question-circle" alt="Info" title="Components referencing this selected parameter."></div>
<div class="referencing-components-loading"></div>
</div>
<div id="fetch-parameter-referencing-components-container" class="setting-field">
</div>
</div>
<div id="fetch-parameters-referencing-components-template" class="fetch-parameters-referencing-components-template hidden clear">
<div class="setting">
<div class="setting-name">Referencing Processors
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-processors"></ul>
</div>
</div>
<div class="setting">
<div class="setting-name">
Referencing Controller Services
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-controller-services"></ul>
</div>
</div>
<div class="setting">
<div class="setting-name">
Unauthorized referencing components
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-unauthorized-components"></ul>
</div>
</div>
</div>
<div id="fetch-parameters-affected-referencing-components-container" class="setting">
<div class="setting-name">
Affected Referencing Components
<div class="fa fa-question-circle" alt="Info" title="Affected components referencing this parameter provider."></div>
<div class="referencing-components-loading"></div>
</div>
<div id="affected-referencing-components-container" class="setting-field">
</div>
</div>
<div id="affected-referencing-components-template" class="affected-referencing-components-template hidden clear">
<div class="setting">
<div class="setting-name">Referencing Processors
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-processors"></ul>
</div>
</div>
<div class="setting">
<div class="setting-name">
Referencing Controller Services
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-controller-services"></ul>
</div>
</div>
<div class="setting">
<div class="setting-name">
Unauthorized referencing components
</div>
<div class="setting-field">
<ul class="fetch-parameters-referencing-unauthorized-components"></ul>
</div>
</div>
</div>
</div>
</div>
<%--end settings-right--%>
<div id="fetch-parameters-permissions-parameter-contexts-message" class="ellipsis fetch-parameters-dialog-message hidden">
You do not have permissions to modify one or more synced parameter contexts.
</div>
<div id="fetch-parameters-permissions-affected-components-message" class="ellipsis fetch-parameters-dialog-message hidden">
You do not have permissions to modify one or more affected components.
</div>
<div id="fetch-parameters-missing-context-name-message" class="ellipsis fetch-parameters-dialog-message hidden">
Missing parameter context name.
</div>
<div class="fetch-parameters-canceling hidden unset">
Canceling...
</div>
</div>

1
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-parameter-context-dialog.jsp
View File

@ -28,6 +28,7 @@
<div id="parameter-context-id-field" class="ellipsis"></div>
</div>
</div>
<div id="parameter-context-provider-setting" class="setting hidden"></div>
<div class="setting">
<div class="setting-name">Name</div>
<div id="parameter-context-name-container" class="setting-field">

61
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/new-parameter-provider-dialog.jsp Normal file
View File

@ -0,0 +1,61 @@
<%--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="new-parameter-provider-dialog" layout="column" class="hidden">
<div class="dialog-content">
<div layout="row" style="padding-bottom:0">
<div flex="25" layout="row" layout-align="start center">
<div class="setting-name" style="margin-top: 10px;">Source</div>
</div>
<div flex layout="row" layout-align="space-between center" id="parameter-provider-type-filter-controls" class="filter-status">
<div id="parameter-provider-type-filter-status">
Displaying&nbsp;<span id="displayed-parameter-provider-types"></span>&nbsp;of&nbsp;<span id="total-parameter-provider-types"></span>
</div>
<div id="controller-service-type-filter-container">
<input type="text" id="parameter-provider-type-filter" placeholder="Filter"/>
</div>
</div>
</div>
<div flex layout="row" style="padding-top:0;height: 90%;">
<div flex="25" id="parameter-provider-tag-cloud-container">
<div class="setting">
<div class="setting-field">
<div id="parameter-provider-bundle-group-combo"></div>
</div>
</div>
<div class="setting">
<div class="setting-field">
<div id="parameter-provider-tag-cloud"></div>
</div>
</div>
</div>
<div layout="column" flex id="parameter-provider-types-container">
<div id="parameter-provider-types-table" class="unselectable"></div>
<div id="parameter-provider-type-container">
<div id="parameter-provider-type-name"></div>
<div id="parameter-provider-type-bundle"></div>
</div>
<div id="parameter-provider-description-container" class="hidden">
<div id="parameter-provider-type-description" class="ellipsis multiline"></div>
<span class="hidden" id="selected-parameter-provider-name"></span>
<span class="hidden" id="selected-parameter-provider-type"></span>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>

82
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/parameter-provider-configuration.jsp Normal file
View File

@ -0,0 +1,82 @@
<%--
Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements. See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
--%>
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="parameter-provider-configuration" class="hidden large-dialog">
<div class="parameter-provider-configuration-tab-container dialog-content">
<div id="parameter-provider-configuration-tabs" class="tab-container"></div>
<div id="parameter-provider-configuration-tabs-content">
<div id="parameter-provider-standard-settings-tab-content" class="configuration-tab">
<div class="settings-left">
<div class="setting">
<div class="setting-name">Name</div>
<div class="parameter-provider-editable setting-field">
<input type="text" id="parameter-provider-name" name="parameter-provider-name"/>
</div>
<div class="parameter-provider-read-only setting-field hidden">
<span id="read-only-parameter-provider-name"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Id</div>
<div class="setting-field">
<span id="parameter-provider-id"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Type</div>
<div class="setting-field">
<span id="parameter-provider-type"></span>
</div>
</div>
<div class="setting">
<div class="setting-name">Bundle</div>
<div id="parameter-provider-bundle" class="setting-field"></div>
</div>
</div>
<div class="spacer">&nbsp;</div>
<div class="settings-right">
<div class="setting">
<div class="setting-name">
Referencing Components
<div class="fa fa-question-circle" alt="Info" title="Other components referencing this parameter provider."></div>
</div>
<div class="setting-field">
<div id="parameter-provider-referencing-components"></div>
</div>
</div>
</div>
</div>
<div id="parameter-provider-properties-tab-content" class="configuration-tab">
<div id="parameter-provider-properties"></div>
<div id="parameter-provider-properties-verification-results" class="verification-results">
<div class="verification-results-header">Verification Results</div>
<div id="parameter-provider-properties-verification-results-listing" class="verification-results-listing"></div>
</div>
</div>
<div id="parameter-provider-comments-tab-content" class="configuration-tab">
<textarea cols="30" rows="4" id="parameter-provider-comments" name="parameter-provider-comments" class="parameter-provider-editable setting-input"></textarea>
<div class="setting parameter-provider-read-only hidden">
<div class="setting-name">Comments</div>
<div class="setting-field">
<span id="read-only-parameter-provider-comments"></span>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="new-parameter-provider-property-container"></div>

10
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/policy-management.jsp
View File

@ -84,6 +84,16 @@
</div>
<div class="clear"></div>
</div>
<div id="policy-selected-parameter-provider-container" class="hidden policy-selected-component-container">
<div class="policy-selected-component-type-icon">
<i class="icon icon-drop"></i>
</div>
<div class="policy-selected-component-details-container">
<div class="policy-selected-component-name"></div>
<div class="policy-selected-component-type">Parameter Provider</div>
</div>
<div class="clear"></div>
</div>
<div id="selected-policy-component-id" class="hidden"></div>
<div id="selected-policy-component-type" class="hidden"></div>
<div id="component-policy-target"></div>

3
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/settings-content.jsp
View File

@ -65,6 +65,9 @@
<div id="registries-tab-content" class="configuration-tab controller-settings-table">
<div id="registries-table" class="settings-table"></div>
</div>
<div id="parameter-providers-tab-content" class="configuration-tab controller-settings-table">
<div id="parameter-providers-table" class="settings-table"></div>
</div>
</div>
</div>
<div id="settings-refresh-container">

2
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/canvas.css
View File

@ -23,6 +23,7 @@
@import url(controller-service.css);
@import url(component-state.css);
@import url(reporting-task.css);
@import url(parameter-provider.css);
@import url(port-configuration.css);
@import url(port-details.css);
@import url(label-configuration.css);
@ -34,6 +35,7 @@
@import url(new-port-dialog.css);
@import url(new-controller-service-dialog.css);
@import url(new-reporting-task-dialog.css);
@import url(new-parameter-provider-dialog.css);
@import url(new-parameter-context-dialog.css);
@import url(graph.css);
@import url(header.css);

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/dialog.css
View File

@ -478,7 +478,9 @@ div.variable-step {
margin-bottom: 2px;
}
div.parameter-context-step, div.referencing-components-loading {
div.parameter-context-step,
div.referencing-components-loading,
div.fetch-parameters-step {
min-width: 16px;
width: 16px;
height: 16px;

105
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/new-parameter-provider-dialog.css Normal file
View File

@ -0,0 +1,105 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
New parameter provider dialog.
*/
#new-parameter-provider-dialog {
min-height:620px;
height: 620px;
width: 800px;
min-width: 760px;
}
#parameter-provider-types-container {
padding: 0px;
}
#parameter-provider-bundle-group-combo {
margin-right: 2px;
}
#parameter-provider-description-container {
padding: 0px;
}
#parameter-provider-type-container {
padding: 20px 0 5px 0;
display: flex;
}
#parameter-provider-type-name {
color: #775351;
font-size: 16px;
font-weight: 500;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
#parameter-provider-type-bundle {
margin-left: 15px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 13px;
line-height: 16px;
color: #666;
letter-spacing: 0.25px;
min-width: 0;
}
#parameter-provider-type-description {
height: 80px;
font-size: 13px;
line-height: 17px;
padding-top: 10px;
}
#parameter-provider-types-table {
min-height: 150px;
overflow: hidden;
height: 70%;
width: 100%;
}
#parameter-provider-types-table-container th {
vertical-align: middle;
}
#parameter-provider-types-table div.slick-viewport {
overflow-x: hidden !important;
}
/*
Processor type table filter
*/
#parameter-provider-type-filter-controls {
min-height: 32px;
padding: 0px;
margin: 0px;
}
#parameter-provider-type-filter {
width: 200px;
}
#parameter-provider-tag-cloud {
margin-top: -2px;
}

496
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/parameter-provider.css Normal file
View File

@ -0,0 +1,496 @@
/*
* Licensed to the Apache Software Foundation (ASF) under one or more
* contributor license agreements. See the NOTICE file distributed with
* this work for additional information regarding copyright ownership.
* The ASF licenses this file to You under the Apache License, Version 2.0
* (the "License"); you may not use this file except in compliance with
* the License. You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/*
Parameter provider configuration styles.
*/
#parameter-provider-configuration {
position: absolute;
overflow: hidden;
width: 800px;
height: 450px;
font-size: 10px;
z-index: 1301;
display: none;
}
#parameter-provider-configuration-advanced {
display: none;
}
#parameter-provider-configuration div.configuration-tab {
display: none;
}
.parameter-provider-editable.setting-field {
height: 32px;
}
#parameter-provider-referencing-components {
padding: 2px;
}
/* parameter-provider settings */
#parameter-provider-name {
width: 250px;
float: left;
}
#parameter-provider-bundle {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/*
Comments
*/
#parameter-provider-comments {
height: 100%;
}
#read-only-parameter-provider-comments {
height: 100%;
white-space: pre-wrap;
}
/*
Fetch parameters dialog
*/
#fetch-parameters-dialog {
position: absolute;
overflow: hidden;
min-width: 1048px;
height: 62%;
font-size: 10px;
z-index: 1301;
display: none;
}
#fetch-parameters-dialog .dialog-content {
bottom: 48px;
}
#fetch-parameters-dialog div.create-parameter-context-label {
display: inline-block;
line-height: normal;
}
#fetch-parameters-dialog .dialog-content div.settings-left {
float: left;
width: 33%;
}
#fetch-parameters-dialog .dialog-content div.settings-center {
float: left;
width: 33%;
}
#fetch-parameters-dialog .dialog-content div.settings-right {
float: left;
width: 30%;
height: 100%;
position: absolute;
left: calc(72% - 20px);
}
#parameter-groups-table {
position: relative;
height: 300px;
}
#fetch-parameters-referencing-components {
border: 0 solid #CCCCCC;
overflow: auto;
padding: 2px;
}
#fetch-parameters-update-steps li {
width: 300px;
margin-bottom: 2px;
}
#fetched-parameters-listing-container {
position: relative;
overflow-x: auto;
border: 0 solid #CCCCCC;
padding: 2px;
min-height: 100px;
max-height: 343px;
min-width: 150px;
max-width: 326px;
}
#fetched-parameters-listing li,
#fetched-parameters-listing span {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
ol#fetched-parameters-listing ul {
padding-bottom: 4px;
}
ul.fetched-parameters {
padding: 0 0 2px 0;
list-style-type: disc;
}
div.referencing-component-block {
margin-bottom: 6px;
}
span.referencing-component-title {
margin-left: 5px;
font-weight: bold
}
span.referencing-component-count {
margin-left: 5px;
color: #aaa;
}
ul.referencing-component-listing {
margin-left: 20px;
margin-bottom: 6px;
}
ul.referencing-component-listing li {
margin-bottom: 6px;
white-space: nowrap;
}
div.referencing-component-state {
width: 13px;
}
div.referencing-component-state.disabled:before {
content: '\e802';
font-family: flowfont;
}
div.referencing-component-state.enabled:before {
content: '\f0e7';
font-family: FontAwesome;
}
div.referencing-component-bulletins {
float: left;
margin-left: 5px;
width: 12px;
height: 12px;
background-color: transparent;
display: none;
}
div.referencing-component-bulletins:before {
font-family: FontAwesome;
content: "\f24a";
font-size: 16px;
color: #004849;
}
div.service.expansion-button {
float: left;
margin-right: 4px;
width: 10px;
height: 10px;
}
span.referencing-component-active-thread-count {
margin-left: 5px;
float: left;
}
span.referencing-component-name {
margin-left: 5px;
margin-right: 5px;
}
span.referencing-component-type {
color: #aaa;
font-style: italic;
}
div.referencing-component-references {
margin-left: 2px;
margin-top: 0;
clear: left;
}
.fetch-parameters-referencing-components-template {
padding-left: 14px;
}
div.fetch-parameters-canceling {
position: absolute;
bottom: 10px;
right: 8px;
}
#fetch-parameters-name {
float: left;
max-width: 280px;
text-overflow: ellipsis;
}
#fetch-parameters-bulletins {
float: left;
margin-left: 5px;
width: 12px;
height: 12px;
background-color: transparent;
display: none;
}
#fetch-parameters-referencing-components {
border: 0 solid #CCCCCC;
padding: 2px;
overflow: auto;
white-space: nowrap;
}
div.fetch-parameters-referencing-components {
width: 16px;
height: 16px;
background-color: transparent;
float: right;
}
#fetch-parameters-progress {
margin-top: 2px;
}
#fetch-parameters-progress li {
line-height: 16px;
}
#affected-referencing-components-container,
#fetch-parameter-referencing-components-container {
position: absolute;
bottom: 10px;
top: 108px;
width: calc(100% - 6px);
overflow: auto;
border: 0 solid #CCCCCC;
padding: 2px;
}
#affected-referencing-components-container div.referencing-component-references {
margin: 0;
}
.affected-referencing-components-template {
position: relative;
left: 15px;
width: calc(100% - 15px);
}
span.parameter-provider-referencing-component-name {
margin-left: 5px;
max-width: calc(100% - 30px);
}
#checkbox-container {
display: flex;
flex-direction: row;
align-items: center;
}
/*
Slickgrid selectable parameters table
*/
#selectable-parameters-table {
position: absolute;
height: 267px;
width: 332px;
}
#selectable-parameters-table .slick-cell-checkboxsel {
padding: 1px 2px 5px 4px;
}
#selectable-parameters-table .slick-cell-checkboxsel.selected {
padding: 0px 2px 6px 4px;
}
#selectable-parameters-table .slick-column-name input {
margin: 5px 3px 3px 4px;
}
#selectable-parameters-table .slick-pane-left .slick-viewport {
overflow-x: hidden;
}
#selectable-parameters-table input[type="checkbox"] {
margin-top: 2px;
width: 0;
}
#selectable-parameters-table input[type="checkbox"]:focus {
box-shadow: none;
border: none;
}
#selectable-parameters-table .slick-column-name input[type="checkbox"] {
margin-top: 5px;
}
#selectable-parameters-table .slick-column-name input[checked="checked"]:before {
margin-top: 2px;
}
#selectable-parameters-table input[type="checkbox"]:before {
content: url(../images/inputCheckbox.png);
cursor: pointer;
clip-path: polygon(0% -16%, 50% -16%, 50% 104%, 0% 104%);
position: absolute;
margin-left: 1px;
margin-top: 3px;
}
#selectable-parameters-table input[checked="checked"]:before {
content: url(../images/inputCheckbox.png);
cursor: pointer;
clip-path: polygon(50% -16%, 100% -16%, 100% 116%, 50% 116%);
margin-left: -11px;
margin-top: 3px;
}
#selectable-parameters-table input[type="checkbox"].disabled:before {
content: url(../images/inputCheckbox.png);
opacity: .5;
cursor: not-allowed;
clip-path: polygon(0% -16%, 50% -16%, 50% 104%, 0% 104%);
position: absolute;
margin-left: 1px;
margin-top: 3px;
}
#selectable-parameters-table input[checked="checked"].disabled:before {
content: url(../images/inputCheckbox.png);
opacity: .5;
cursor: not-allowed;
clip-path: polygon(50% -16%, 100% -16%, 100% 116%, 50% 116%);
margin-left: -11px;
margin-top: 3px;
}
#parameter-groups-table .slick-pane-top .slick-viewport-top .grid-canvas-top,
#selectable-parameters-table .slick-pane-top .slick-viewport .grid-canvas-top {
width: 100% !important;
}
#selectable-parameters-table .slick-pane-top .slick-viewport-top .grid-canvas-top .slick-cell.l1 {
padding-top: 1px;
}
#selectable-parameters-table .slick-pane-top .slick-viewport-top .slick-cell.l1:not(.selected) .table-cell {
margin-top: 5px;
}
#fetched-parameters-listing .slick-cell-checkboxsel {
background: #f0f0f0;
border-right-color: silver;
border-right-style: solid;
}
.slick-columnpicker {
border: 1px solid #718BB7;
background: #f0f0f0;
padding: 6px;
-moz-box-shadow: 2px 2px 2px silver;
-webkit-box-shadow: 2px 2px 2px silver;
box-shadow: 2px 2px 2px silver;
min-width: 100px;
cursor: default;
}
.slick-columnpicker li {
list-style: none;
margin: 0;
padding: 0;
background: none;
}
.slick-columnpicker input {
margin: 4px;
}
.slick-columnpicker li a {
display: block;
padding: 4px;
font-weight: bold;
}
.slick-columnpicker li a:hover {
background: white;
}
#selectable-parameters-buttons {
position: relative;
padding-bottom: 4px;
}
.selectable-parameters-buttons {
line-height: 30px;
border: 1px solid #CCDADB;
background-color: rgba(249,250,251,1);
color: #004849;
padding: 0 7px;
float: left;
width: inherit;
margin-right: 8px;
display: flex;
align-items: center;
flex-direction: row;
}
.selectable-parameters-buttons span {
font-size: 12px;
text-transform: uppercase;
}
.selectable-parameters-buttons .fa {
font-size: 14px;
margin-left: -2px;
margin-right: 4px;
}
button.selectable-parameters-buttons:hover {
border: 1px solid #004849;
}
#create-parameter-context-container {
line-height: 12px;
}
.fetch-parameters-dialog-message {
position: absolute;
top: 537px;
left: 20px;
font-size: 13px;
line-height: normal;
color: #775351;
max-width: calc(100% - 230px);
z-index: 999;
}

14
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/statusbar/jquery.statusbar.css
View File

@ -25,11 +25,12 @@
height : 32px;
}
.dialog-status-bar[state] + .dialog-content {
.dialog-status-bar[state] + .dialog-content,
.dialog-status-bar[alerts] + .dialog-content {
top: 104px;
}
.dialog-status-bar:not([state]),
.dialog-status-bar:not([state]):not([alerts]),
.dialog-status-bar:not([state]) text.run-status-icon,
.dialog-status-bar-bulletins-content,
.dialog-status-bar-bulletins[count="0"],
@ -123,11 +124,12 @@
float : right;
margin-left : 22px;
margin-top : 5px;
background-color : rgba(36,36,36,0.75);
font-family: Arial;
background-color: rgba(0, 0, 0, 0.80) !important;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
font-family: Roboto;
font-weight : bold;
font-size : 12px;
padding : 10px 10px 10px 20px;
font-size : 13px;
padding : 10px;
width : auto;
max-width : 490px;
}

79
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/statusbar/jquery.statusbar.js
View File

@ -27,8 +27,7 @@
// static key path variables
var PROCESSOR_ID_KEY = 'component.id',
ACTIVE_THREAD_COUNT_KEY = 'status.aggregateSnapshot.activeThreadCount',
RUN_STATUS_KEY = 'status.aggregateSnapshot.runStatus',
BULLETINS_KEY = 'bulletins';
RUN_STATUS_KEY = 'status.aggregateSnapshot.runStatus'
var isUndefined = function (obj) {
return typeof obj === 'undefined';
@ -52,11 +51,15 @@
/**
* Initializes the status bar.
*
* @param type - the type of component or service for the status bus
*/
init: function () {
init: function (type) {
// get the combo
var bar = $(this).addClass('dialog-status-bar');
if (type === 'processor') {
bar.html('<text class="run-status-icon"></text>'+
'<span class="dialog-status-bar-state"></span>'+
'<span class="dialog-status-bar-threads" count="0"></span>'+
@ -64,6 +67,12 @@
'<div class="dialog-status-bar-bulletins-content"></div>'+
'</div>'+
'<div class="dialog-status-bar-buttons"></div>');
} else { // parameter provider
bar.html('<div class="dialog-status-bar-bulletins fa fa-sticky-note-o" count="0">'+
'<div class="dialog-status-bar-bulletins-content"></div>'+
'</div>');
}
return bar;
},
@ -93,19 +102,23 @@
/**
* Initializes the synchronization process to the canvas element
*
* @param id - id value of the processor to observe
* @param data - object of type or service to observe
* @param cb - callback to execute when a mutation is detected
*/
observe: function(id,cb) {
observe: function(data,cb) {
var bar = $(this);
if (data.processor) {
// id value of the processor to observe
var id = data.processor;
var g = document.querySelector('g[id="id-'+id+'"]');
//perform the initial set
bar.statusbar('set',id);
bar.statusbar('set', data);
//create and store an observer
bar.data('observer',new MutationObserver(function(mutations){
bar.statusbar('set',id);
bar.statusbar('set',data);
if(typeof cb == 'function'){
cb();
}
@ -115,6 +128,10 @@
bar.data('observer').observe(g,{attributes:true,childList:true,subtree:true});
return bar.data('observer');
} else { // parameter provider bulletins
//perform the initial set
return bar.statusbar('set', data);
}
},
/**
@ -240,38 +257,48 @@
/**
* Set the status bar display values
*
* @param id - processor id to evaluate
* @param data - object of type or service to set
*/
set : function(id) {
set : function(data) {
var bar = $(this),
obj = d3.select('#id-' + id).datum(),
bulletinList = $("<ul></ul>"),
runStatus = getKeyValue(obj,RUN_STATUS_KEY),
activeThreadCount = getKeyValue(obj,ACTIVE_THREAD_COUNT_KEY),
bulletins = getKeyValue(obj,BULLETINS_KEY);
processorId,
obj,
runStatus,
activeThreadCount,
bulletins;
//set the values
if(isDefinedAndNotNull(runStatus) &&
isDefinedAndNotNull(activeThreadCount) &&
isDefinedAndNotNull(bulletins) &&
Array.isArray(bulletins)) {
if (data.processor) {
processorId = data.processor;
obj = d3.select('#id-' + processorId).datum();
runStatus = getKeyValue(obj,RUN_STATUS_KEY);
activeThreadCount = getKeyValue(obj,ACTIVE_THREAD_COUNT_KEY);
bulletins = data.bulletins;
} else if (data.provider) {
bulletins = data.provider;
}
// set the values
if (isDefinedAndNotNull(runStatus) && isDefinedAndNotNull(activeThreadCount)) {
bar.attr('state',runStatus.toUpperCase());
bar.attr('alerts', 'true');
bar.find('.dialog-status-bar-state').text(runStatus);
bar.find('.dialog-status-bar-threads').attr('count',activeThreadCount);
bar.find('.dialog-status-bar-threads').attr('title',activeThreadCount+' active threads');
bar.find('.dialog-status-bar-threads').text('('+activeThreadCount+')');
$.each(bulletins, function(i,item){
if(item.canRead){
bulletinList.append($('<li>'+item.bulletin.timestamp+' '+item.bulletin.level+'<br/>'+item.bulletin.message+'<br>&nbsp;</li>'));
}
});
var bulletinCount = bulletinList.find('li').length;
bar.find('.dialog-status-bar-bulletins-content').html((bulletinCount > 0)?bulletinList:'');
// set the bulletins
if (isDefinedAndNotNull(bulletins)) {
var bulletinCount = bulletins.find('li').length;
bar.find('.dialog-status-bar-bulletins-content').html((bulletinCount > 0)?bulletins:'');
bar.find('.dialog-status-bar-bulletins').attr('count',bulletinCount);
//update the button state
if (data.processor) {
// update the button state
bar.statusbar('refreshButtons');
} else {
bar.attr('alerts', 'true');
}
}
return bar;
}

19
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-bootstrap.js
View File

@ -49,6 +49,7 @@
'nf.ConnectionConfiguration',
'nf.ControllerService',
'nf.ReportingTask',
'nf.ParameterProvider',
'nf.PolicyManagement',
'nf.ProcessorConfiguration',
'nf.ProcessGroupConfiguration',
@ -84,8 +85,8 @@
'nf.ng.Canvas.OperateCtrl',
'nf.ng.BreadcrumbsDirective',
'nf.ng.DraggableDirective'],
function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfParameterProvider, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
return factory($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfParameterProvider, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective);
});
} else if (typeof exports === 'object' && typeof module === 'object') {
module.exports = factory(require('jquery'),
@ -118,6 +119,7 @@
require('nf.ConnectionConfiguration'),
require('nf.ControllerService'),
require('nf.ReportingTask'),
require('nf.ParameterProvider'),
require('nf.PolicyManagement'),
require('nf.ProcessorConfiguration'),
require('nf.ProcessGroupConfiguration'),
@ -184,6 +186,7 @@
root.nf.ConnectionConfiguration,
root.nf.ControllerService,
root.nf.ReportingTask,
root.nf.ParameterProvider,
root.nf.PolicyManagement,
root.nf.ProcessorConfiguration,
root.nf.ProcessGroupConfiguration,
@ -220,7 +223,7 @@
root.nf.ng.BreadcrumbsDirective,
root.nf.ng.DraggableDirective);
}
}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
}(this, function ($, angular, nfCommon, nfCanvasUtils, nfErrorHandler, nfClient, nfDialog, nfStorage, nfCanvas, nfGraph, nfContextMenu, nfQuickSelect, nfShell, nfParameterContexts, nfSettings, nfActions, nfSnippet, nfQueueListing, nfVerify, nfVariableRegistry, nfComponentState, nfFlowVersion, nfComponentVersion, nfDraggable, nfConnectable, nfStatusHistory, nfBirdseye, nfConnectionConfiguration, nfControllerService, nfReportingTask, nfParameterProvider, nfPolicyManagement, nfProcessorConfiguration, nfProcessGroupConfiguration, nfControllerServices, nfRemoteProcessGroupConfiguration, nfRemoteProcessGroupPorts, nfPortConfiguration, nfLabelConfiguration, nfProcessorDetails, nfPortDetails, nfConnectionDetails, nfRemoteProcessGroupDetails, nfGoto, nfNgBridge, appCtrl, appConfig, serviceProvider, breadcrumbsCtrl, headerCtrl, flowStatusCtrl, globalMenuCtrl, toolboxCtrl, processorComponent, inputPortComponent, outputPortComponent, processGroupComponent, remoteProcessGroupComponent, funnelComponent, templateComponent, labelComponent, graphControlsCtrl, navigateCtrl, operateCtrl, breadcrumbsDirective, draggableDirective) {
var config = {
urls: {
@ -349,7 +352,7 @@
nfShell.init(nfContextMenu);
nfNgBridge.injector.get('headerCtrl').init();
nfSettings.init();
nfParameterContexts.init();
nfParameterContexts.init(nfParameterProvider);
nfActions.init();
nfQueueListing.init();
nfVerify.init();
@ -370,8 +373,14 @@
// initialize the connection config and invert control of the birdseye and graph
nfConnectionConfiguration.init(nfBirdseye, nfGraph, configDetails.defaultBackPressureObjectThreshold, configDetails.defaultBackPressureDataSizeThreshold);
nfControllerService.init(nfControllerServices, nfReportingTask);
nfControllerService.init(nfControllerServices, nfReportingTask, nfParameterProvider);
nfReportingTask.init(nfSettings);
nfParameterProvider.init({
nfSettings: nfSettings,
statusBarOptions: {
supportsStatusBar : true
}
});
nfPolicyManagement.init();
nfProcessorConfiguration.init({
supportsStatusBar : true,

98
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-service.js
View File

@ -68,7 +68,9 @@
}(this, function ($, d3, nfErrorHandler, nfCommon, nfDialog, nfStorage, nfClient, nfSettings, nfUniversalCapture, nfCustomUi, nfVerify, nfCanvasUtils, nfProcessor) {
'use strict';
var nfControllerServices, nfReportingTask;
var nfControllerServices,
nfReportingTask,
nfParameterProvider;
var config = {
edit: 'edit',
@ -251,6 +253,15 @@
if (referencingComponentState.length) {
updateReferencingSchedulableComponentState(referencingComponentState, reference);
}
} else if (reference.referenceType === 'ParameterProvider') {
// reload
nfParameterProvider.reload(reference.id);
// update the validation errors of this parameter provider
var referencingComponentState = $('div.' + reference.id + '-state');
if (referencingComponentState.length) {
updateValidationErrors(referencingComponentState, reference);
}
} else {
// reload the referencing services
reloadControllerService(serviceTable, reference.id);
@ -391,6 +402,42 @@
});
};
/**
* Updates validation errors. This is used for parameter providers and registry clients.
*
* @param validationErrorIcon
* @param referencingComponent
*/
var updateValidationErrors = function (validationErrorIcon, referencingComponent) {
var currentValidationErrors = validationErrorIcon.data('validation-errors');
// update the validation errors if necessary
if (!_.isEqual(currentValidationErrors, referencingComponent.validationErrors)) {
validationErrorIcon.data('validation-errors', referencingComponent.validationErrors);
// if there are validation errors update them
if (!nfCommon.isEmpty(referencingComponent.validationErrors)) {
var list = nfCommon.formatUnorderedList(referencingComponent.validationErrors);
// update existing tooltip or initialize a new one if appropriate
if (validationErrorIcon.data('qtip')) {
validationErrorIcon.qtip('option', 'content.text', list);
} else {
validationErrorIcon.show().qtip($.extend({},
nfCanvasUtils.config.systemTooltipConfig,
{
content: list
}));
}
} else {
if (validationErrorIcon.data('qtip')) {
validationErrorIcon.removeData('validation-errors').qtip('api').destroy(true);
}
validationErrorIcon.hide();
}
}
};
/**
* Updates the bulletins for all referencing components.
*
@ -444,6 +491,7 @@
var processors = $('<ul class="referencing-component-listing clear"></ul>');
var services = $('<ul class="referencing-component-listing clear"></ul>');
var tasks = $('<ul class="referencing-component-listing clear"></ul>');
var providers = $('<ul class="referencing-component-listing clear"></ul>');
var unauthorized = $('<ul class="referencing-component-listing clear"></ul>');
$.each(referencingComponents, function (_, referencingComponentEntity) {
// check the access policy for this referencing component
@ -582,6 +630,46 @@
// reporting task
var reportingTaskItem = $('<li></li>').append(reportingTaskState).append(reportingTaskBulletins).append(reportingTaskLink).append(reportingTaskType).append(reportingTaskActiveThreadCount);
tasks.append(reportingTaskItem);
} else if (referencingComponent.referenceType === 'ParameterProvider') {
var parameterProviderLink = $('<span class="referencing-component-name link"></span>').text(referencingComponent.name).on('click', function () {
var parameterProvidersGrid = $('#parameter-providers-table').data('gridInstance');
var parameterProvidersData = parameterProvidersGrid.getData();
// select the selected row
var row = parameterProvidersData.getRowById(referencingComponent.id);
parameterProvidersGrid.setSelectedRows([row]);
parameterProvidersGrid.scrollRowIntoView(row);
// close the dialog and shell
referenceContainer.closest('.dialog').modal('hide');
$('#settings-tabs').find('li:eq(4)').click();
// adjust the table size
parameterProvidersGrid.resizeCanvas();
});
// provider state - used to show the validation errors
var providerState = $('<div class="referencing-component-state invalid"></div>').addClass(referencingComponent.id + '-state');
if (nfCommon.isEmpty(referencingComponent.validationErrors)) {
providerState.hide();
} else {
updateValidationErrors(providerState, referencingComponent);
}
// bulletin
var providerBulletins = $('<div class="referencing-component-bulletins"></div>').addClass(referencingComponent.id + '-bulletins');
if (!nfCommon.isEmpty(referencingComponentEntity.bulletins)) {
updateBulletins(referencingComponentEntity.bulletins, providerBulletins);
}
// type
var providerType = $('<span class="referencing-component-type"></span>').text(referencingComponent.type);
// parameter provider
var providerItem = $('<li></li>').append(providerState).append(providerBulletins).append(parameterProviderLink).append(providerType);
providers.append(providerItem);
}
}
});
@ -614,6 +702,7 @@
createReferenceBlock('Processors', processors);
createReferenceBlock('Reporting Tasks', tasks);
createReferenceBlock('Controller Services', services);
createReferenceBlock('Parameter Providers', providers);
createReferenceBlock('Unauthorized', unauthorized);
// now that the dom elements are in place, we can show the bulletin icons.
@ -734,7 +823,7 @@
referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
}
} else {
if (referencingComponent.referenceType !== 'ControllerService') {
if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
referencingComponentRevisions[referencingComponentEntity.id] = nfClient.getRevision(referencingComponentEntity);
}
}
@ -948,7 +1037,7 @@
var referencingComponents = service.referencingComponents;
$.each(referencingComponents, function (_, referencingComponentEntity) {
var referencingComponent = referencingComponentEntity.component;
if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask') {
if (referencingComponent.referenceType === 'Processor' || referencingComponent.referenceType === 'ReportingTask' || referencingComponent.referenceType === 'ParameterProvider') {
referencingSchedulableComponents.push(referencingComponent.id);
}
});
@ -1753,9 +1842,10 @@
/**
* Initializes the controller service configuration dialog.
*/
init: function (nfControllerServicesRef, nfReportingTaskRef) {
init: function (nfControllerServicesRef, nfReportingTaskRef, nfParameterProviderRef) {
nfControllerServices = nfControllerServicesRef;
nfReportingTask = nfReportingTaskRef;
nfParameterProvider = nfParameterProviderRef;
// initialize the configuration dialog tabs
$('#controller-service-configuration-tabs').tabbs({

118
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-contexts.js
View File

@ -86,6 +86,8 @@
}(this, function ($, Slick, d3, nfClient, nfDialog, nfStorage, nfCommon, nfCanvasUtils, nfNgBridge, nfErrorHandler, nfFilteredDialogCommon, nfShell, nfComponentState, nfComponentVersion, nfPolicyManagement, nfProcessor, nfProcessGroup, nfProcessGroupConfiguration, _) {
'use strict';
var nfParameterProvider;
var config = {
urls: {
parameterContexts: '../nifi-api/parameter-contexts'
@ -132,6 +134,29 @@
return nfCommon.escapeHtml(dataContext.component.name);
};
/**
* Formatter for the provider column.
*
* @param {type} row
* @param {type} cell
* @param {type} value
* @param {type} columnDef
* @param {type} dataContext
* @returns {String}
*/
var providerFormatter = function (row, cell, value, columnDef, dataContext) {
var component = dataContext.component ? dataContext.component : null;
if (component && component.parameterProviderConfiguration) {
if (!dataContext.permissions.canRead) {
return '<span class="blank">' + nfCommon.escapeHtml(component.parameterProviderConfiguration.id) + '</span>';
}
return nfCommon.escapeHtml(component.parameterProviderConfiguration.component.parameterGroupName +
' from ' + component.parameterProviderConfiguration.component.parameterProviderName);
}
};
/**
* Sorts the specified data using the specified sort details.
*
@ -216,6 +241,8 @@
$('#parameter-process-group-id').text('').removeData('revision');
$('#parameter-referencing-components-context').removeClass('unset').attr('title', '').text('');
$('#parameter-context-provider-setting').hide();
var parameterGrid = $('#parameter-table').data('gridInstance');
var parameterData = parameterGrid.getData();
parameterGrid.setSelectedRows([]);
@ -1053,7 +1080,7 @@
referencingComponents: originalParameter.referencingComponents,
previousValue: originalParameter.value,
previousDescription: originalParameter.description,
isEditable: originalParameter.isEditable,
isEditable: originalParameter.isEditable || originalParameter.provided !== true,
isEmptyStringSet: serializedParam.isEmptyStringSet,
isNew: originalParameter.isNew,
hasValueChanged: serializedParam.hasValueChanged,
@ -1086,12 +1113,11 @@
$('#parameter-context-dialog').modal('refreshButtons');
};
var hasParameterContextChanged = function (parameterContextEntity) {
var parameters = marshalParameters();
var proposedParamContextName = $('#parameter-context-name').val();
var proposedParamContextDesc = $('#parameter-context-description-field').val();
var inheritedParameterContexts = marshalInheritedParameterContexts();
var componentDescription = _.get(parameterContextEntity, 'component.description', '');
var inheritedParameterContextEquals = isInheritedParameterContextEquals(parameterContextEntity, inheritedParameterContexts);
if (inheritedParameterContextEquals) {
@ -1100,15 +1126,23 @@
$('#inherited-parameter-contexts-message').removeClass('hidden');
}
if (parameterContextEntity.component.parameterProviderConfiguration) {
if (proposedParamContextName === _.get(parameterContextEntity, 'component.name') &&
proposedParamContextDesc === componentDescription &&
inheritedParameterContextEquals) {
return false;
}
} else {
var parameters = marshalParameters();
if (_.isEmpty(parameters) &&
proposedParamContextName === _.get(parameterContextEntity, 'component.name') &&
proposedParamContextDesc === _.get(parameterContextEntity, 'component.description') &&
inheritedParameterContextEquals) {
return false;
} else {
return true;
}
}
return true;
};
/**
@ -1560,7 +1594,7 @@
description: parameterEntity.parameter.description,
previousValue: parameterEntity.parameter.value,
previousDescription: parameterEntity.parameter.description,
isEditable: _.defaultTo(readOnly, false) ? false : parameterEntity.canWrite,
isEditable: _.defaultTo(readOnly, false) || parameterEntity.parameter.provided ? false : parameterEntity.canWrite,
referencingComponents: parameterEntity.parameter.referencingComponents,
parameterContext: containingParameterContext,
isInherited: (containingParameterContext.id !== parameterContext.component.id),
@ -2496,6 +2530,10 @@
markup += '<div title="Access Policies" class="pointer edit-access-policies fa fa-key"></div>';
}
if (canRead && dataContext.component.parameterProviderConfiguration) {
markup += '<div title="Go To Parameter Provider" class="pointer go-to-provider fa fa-long-arrow-right"></div>';
}
return markup;
};
@ -2537,6 +2575,13 @@
resizable: true,
formatter: nameFormatter
},
{
id: 'parameterProviderConfiguration',
name: 'Provider',
sortable: true,
resizable: true,
formatter: providerFormatter
},
{
id: 'description',
name: 'Description',
@ -2600,6 +2645,13 @@
// close the settings dialog
$('#shell-close-button').click();
} else if (target.hasClass('go-to-provider')) {
if (parameterContextEntity.component.parameterProviderConfiguration) {
nfParameterProvider.showParameterProvider(parameterContextEntity.component.parameterProviderConfiguration.id);
// close the settings dialog
$('#shell-close-button').click();
}
}
} else if (parameterContextsGrid.getColumns()[args.cell].id === 'info') {
if (target.hasClass('view-parameter-context')) {
@ -2657,8 +2709,12 @@
var nfParameterContexts = {
/**
* Initializes the parameter contexts page.
*
* @param nfParameterProviderRef The nfParameterProvider module.
*/
init: function () {
init: function (nfParameterProviderRef) {
nfParameterProvider = nfParameterProviderRef;
// parameter context refresh button
$('#parameter-contexts-refresh-button').on('click', function () {
loadParameterContexts();
@ -2926,6 +2982,36 @@
.prop('title', parameterContextEntity.id)
.text(parameterContextEntity.id);
// if provided, show the provider setting
if (parameterContextEntity.component.parameterProviderConfiguration) {
$('#parameter-context-provider-setting').show();
var parameterContextProviderSetting = $('#parameter-context-provider-setting').empty();
var providerContent = nfCommon.escapeHtml(parameterContextEntity.component.parameterProviderConfiguration.component.parameterGroupName +
' from ' + parameterContextEntity.component.parameterProviderConfiguration.component.parameterProviderName);
$('<div class="setting-name">Provider</div>').appendTo(parameterContextProviderSetting);
var settingEl = $('<div class="setting-field"></div>');
// provider name
var providerLinkEl = $('<span id="parameter-context-parameter-provider-name" class="parameter-context-parameter-provider-name link ellipsis"></span>')
.prop('title', providerContent)
.text(providerContent)
.on('click', function () {
// check if there are outstanding changes
handleOutstandingChanges().done(function () {
// close the shell
$('#shell-dialog').modal('hide');
// show the provider in question
nfParameterProvider.showParameterProvider(parameterContextEntity.component.parameterProviderConfiguration.id)
});
});
providerLinkEl.appendTo(settingEl);
settingEl.appendTo(parameterContextProviderSetting);
}
// get the reference container
var referencingComponentsContainer = $('#parameter-context-referencing-components');
@ -2996,6 +3082,22 @@
// select the parameters tab
$('#parameter-context-tabs').find('li:eq(1)').click();
// if parameters are provided
if (parameterContextEntity.component.parameterProviderConfiguration) {
// hide the add parameter button
$('#add-parameter').hide();
} else {
// hide the provider details
if (!$('#parameter-context-provider-setting').hasClass('hidden')) {
$('#parameter-context-provider-setting')
.empty()
.addClass('hidden');
}
// show the add parameter button
$('#add-parameter').show();
}
// check if border is necessary
updateReferencingComponentsBorder($('#parameter-referencing-components-container'));

3317
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-parameter-provider.js Normal file
View File

File diff suppressed because it is too large Load Diff

54
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-policy-management.js
View File

@ -1556,6 +1556,60 @@
return loadPolicy().always(showPolicy);
},
/**
* Shows the paramter provider policy.
*
* @param d
*/
showParameterProviderPolicy: function (d) {
initializingComponentPolicy = true;
// reset the policy message
resetPolicyMessage();
// update the policy controls visibility
$('#component-policy-controls').show();
$('#global-policy-controls').hide();
// update the visibility
if (d.permissions.canRead === true) {
$('#policy-selected-parameter-provider-container div.policy-selected-component-name').text(d.component.name);
} else {
$('#policy-selected-parameter-provider-container div.policy-selected-component-name').text(d.id);
}
$('#policy-selected-parameter-provider-container').show();
// populate the initial resource
$('#selected-policy-component-id').text(d.id);
$('#selected-policy-component-type').text('parameter-providers');
$('#component-policy-target')
.combo('setOptionEnabled', {
value: 'operate-component'
}, false)
.combo('setOptionEnabled', {
value: 'write-receive-data'
}, false)
.combo('setOptionEnabled', {
value: 'write-send-data'
}, false)
.combo('setOptionEnabled', {
value: 'read-data'
}, false)
.combo('setOptionEnabled', {
value: 'read-provenance'
}, false)
.combo('setOptionEnabled', {
value: 'write-data'
}, false)
.combo('setSelectedOption', {
value: 'read-component'
});
initializingComponentPolicy = false;
return loadPolicy().always(showPolicy);
},
/**
* Shows the template policy.
*

17
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor-configuration.js
View File

@ -659,7 +659,7 @@
//if the status bar is supported, initialize it.
if(config.supportsStatusBar){
$('#processor-configuration-status-bar').statusbar();
$('#processor-configuration-status-bar').statusbar('processor');
}
// initialize the bulletin combo
@ -784,6 +784,7 @@
$.when.apply(window, requests).done(function (processorResult, historyResult) {
// get the updated processor'
var processorResponse = processorResult[0];
var bulletins = processorResponse.bulletins;
processor = processorResponse.component;
// get the processor history
@ -1047,10 +1048,20 @@
//Synchronize the current component canvas attributes in the status bar
if(config.supportsStatusBar){
var formattedBulletins = nfCommon.getFormattedBulletins(bulletins);
var unorderedBulletins = nfCommon.formatUnorderedList(formattedBulletins);
//initialize the canvas synchronization
$("#processor-configuration-status-bar").statusbar('observe',processor.id, function(){
$("#processor-configuration-status-bar").statusbar(
'observe',
{
processor: processor.id,
bulletins: unorderedBulletins
},
function () {
$('#processor-configuration').modal('refreshButtons');
});
}
);
//if there are active threads, add the terminate button to the status bar
if(nfCommon.isDefinedAndNotNull(config.nfActions) &&

915
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-settings.js
View File

File diff suppressed because it is too large Load Diff

12
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-processor-details.js
View File

@ -183,7 +183,7 @@
//apply the status bar if indicated
if(config.supportsStatusBar){
$("#processor-details-status-bar").statusbar();
$("#processor-details-status-bar").statusbar('processor');
}
// initialize the properties
@ -372,9 +372,17 @@
//Populate the status bar if the feature is enabled
if (config.supportsStatusBar && nfCommon.isDefinedAndNotNull(config.nfCanvasUtils)){
var formattedBulletins = nfCommon.getFormattedBulletins(processorResponse.bulletins);
var unorderedBulletins = nfCommon.formatUnorderedList(formattedBulletins);
//initialize the canvas synchronization
$("#processor-details-status-bar").statusbar('observe',processor.id);
$("#processor-details-status-bar").statusbar(
'observe',
{
processor: processor.id,
bulletins: unorderedBulletins
}
);
//Fetch the component as a selection from the canvas
selection = config.nfCanvasUtils.getSelectionById(processor.id);