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

[NIFI-1782] new search UX and add angular control of flow status values. This closes #433

This commit is contained in:
Scott Aslan 2016-05-11 16:06:35 -04:00 committed by Matt Gilman
parent 25e7f314b1
commit 3c3304aff4
14 changed files with 573 additions and 457 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -364,7 +364,6 @@
<include>${staging.dir}/js/nf/canvas/nf-selectable.js</include> <include>${staging.dir}/js/nf/canvas/nf-selectable.js</include>
<include>${staging.dir}/js/nf/canvas/nf-connectable.js</include> <include>${staging.dir}/js/nf/canvas/nf-connectable.js</include>
<include>${staging.dir}/js/nf/canvas/nf-birdseye.js</include> <include>${staging.dir}/js/nf/canvas/nf-birdseye.js</include>
<include>${staging.dir}/js/nf/canvas/nf-search.js</include>
<include>${staging.dir}/js/nf/canvas/nf-settings.js</include> <include>${staging.dir}/js/nf/canvas/nf-settings.js</include>
<include>${staging.dir}/js/nf/canvas/nf-go-to.js</include> <include>${staging.dir}/js/nf/canvas/nf-go-to.js</include>
<include>${staging.dir}/js/nf/canvas/nf-actions.js</include> <include>${staging.dir}/js/nf/canvas/nf-actions.js</include>
@ -377,6 +376,7 @@
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-breadcrumbs-controller.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> <include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js</include> <include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js</include> <include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js</include> <include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js</include>
<include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js</include> <include>${staging.dir}/js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js</include>

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

@ -53,7 +53,6 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-namespace.js?
<script type="text/javascript" src="js/nf/canvas/nf-connectable.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/nf-connectable.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-selectable.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/nf-selectable.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-birdseye.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/nf-birdseye.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-search.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/nf-settings.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-go-to.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/nf-go-to.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/nf-actions.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/nf-actions.js?${project.version}"></script>\n\
@ -65,6 +64,7 @@ nf.canvas.script.tags=<script type="text/javascript" src="js/nf/nf-namespace.js?
<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-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\ <script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-header-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-toolbox-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js?${project.version}"></script>\n\
<script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js?${project.version}"></script>\n\ <script type="text/javascript" src="js/nf/canvas/controllers/nf-ng-canvas-navigate-controller.js?${project.version}"></script>\n\

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

@ -61,11 +61,11 @@
</div> </div>
<div id="login-link-container"> <div id="login-link-container">
<span id="login-link" class="link" <span id="login-link" class="link"
ng-click="appCtrl.serviceProvider.headerCtrl.loginLink.shell.launch();">login</span> ng-click="appCtrl.serviceProvider.headerCtrl.loginCtrl.shell.launch();">login</span>
</div> </div>
<div id="logout-link-container" style="display: none;"> <div id="logout-link-container" style="display: none;">
<span id="logout-link" class="link" <span id="logout-link" class="link"
ng-click="appCtrl.serviceProvider.headerCtrl.logoutLink.logout();">logout</span> ng-click="appCtrl.serviceProvider.headerCtrl.logoutCtrl.logout();">logout</span>
</div> </div>
</div> </div>
<md-menu md-position-mode="target-right target" md-offset="-1 44"> <md-menu md-position-mode="target-right target" md-offset="-1 44">
@ -114,9 +114,9 @@
</md-menu-item> </md-menu-item>
<md-menu-item ng-if="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.enabled();" <md-menu-item ng-if="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.enabled();"
layout-align="space-around center"> layout-align="space-around center">
<a id="users-link" <a id="users-link" layout="row"
ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.shell.launch();;"><i ng-click="appCtrl.serviceProvider.headerCtrl.globalMenuCtrl.users.shell.launch();;"><i
class="fa fa-users"></i>Users</a> class="fa fa-users"></i>Users<div id="has-pending-accounts" class="hidden"></div></a>
</md-menu-item> </md-menu-item>
<md-menu-divider></md-menu-divider> <md-menu-divider></md-menu-divider>
<md-menu-item layout-align="space-around center"> <md-menu-item layout-align="space-around center">

26
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/flow-status.jsp
View File

@ -17,21 +17,23 @@
<%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %> <%@ page contentType="text/html" pageEncoding="UTF-8" session="false" %>
<div id="flow-status" flex layout="row" layout-align="space-between center"> <div id="flow-status" flex layout="row" layout-align="space-between center">
<div id="flow-status-container" layout="row" layout-align="space-around center"> <div id="flow-status-container" layout="row" layout-align="space-around center">
<i class="fa fa-cubes" ng-if="appCtrl.nf.Canvas.isClustered()"><span id="connected-nodes-count"></span></i> <i class="fa fa-cubes" ng-if="appCtrl.nf.Canvas.isClustered()"><span id="connected-nodes-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.connectedNodesCount}}</span></i>
<i class="icon icon-threads"><span id="active-thread-count"></span></i> <i class="icon icon-threads"><span id="active-thread-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.activeThreadCount}}</span></i>
<i class="fa fa-list"><span id="total-queued"></span></i> <i class="fa fa-list"><span id="total-queued">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.totalQueued}}</span></i>
<i class="fa fa-bullseye"><span id="controller-transmitting-count"></span></i> <i class="fa fa-bullseye"><span id="controller-transmitting-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerTransmittingCount}}</span></i>
<i class="icon icon-transmit-false"><span id="controller-not-transmitting-count"></span></i> <i class="icon icon-transmit-false"><span id="controller-not-transmitting-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerNotTransmittingCount}}</span></i>
<i class="fa fa-play"><span id="controller-running-count"></span></i> <i class="fa fa-play"><span id="controller-running-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerRunningCount}}</span></i>
<i class="fa fa-stop"><span id="controller-stopped-count"></span></i> <i class="fa fa-stop"><span id="controller-stopped-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerStoppedCount}}</span></i>
<i class="fa fa-warning"><span id="controller-invalid-count"></span></i> <i class="fa fa-warning"><span id="controller-invalid-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerInvalidCount}}</span></i>
<i class="icon icon-enable-false"><span id="controller-disabled-count"></span></i> <i class="icon icon-enable-false"><span id="controller-disabled-count">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.controllerDisabledCount}}</span></i>
<i class="fa fa-refresh"><span id="stats-last-refreshed"></span></i> <i class="fa fa-refresh"><span id="stats-last-refreshed">{{appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.statsLastRefreshed}}</span></i>
<div id="canvas-loading-container" class="loading-container"></div> <div id="canvas-loading-container" class="loading-container"></div>
</div> </div>
<div layout="row" layout-align="end center"> <div layout="row" layout-align="end center">
<input id="search-field" type="text"/> <div id="search-container">
<button id="search-button"><i class="fa fa-search"></i></button> <button id="search-button" ng-click="appCtrl.serviceProvider.headerCtrl.flowStatusCtrl.search.toggleSearchField();"><i class="fa fa-search"></i></button>
<input id="search-field" type="text" placeholder="Search"/>
</div>
<button id="bulletin-button"><i class="fa fa-sticky-note-o"></i></button> <button id="bulletin-button"><i class="fa fa-sticky-note-o"></i></button>
</div> </div>
</div> </div>

30
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css
View File

@ -53,25 +53,34 @@
border-right: none; border-right: none;
border-top: none; border-top: none;
border-bottom: none; border-bottom: none;
position: relative;
} }
#flow-status span { #flow-status span {
padding-left: 5px; padding-left: 5px;
} }
#search-button { #search-container {
background-color:#E3E8EB; /*tint base-color 80%*/ overflow: hidden;
height: 32px;
background: #FFFFFF;
} }
#search-button i{ .search-container-opened {
color: #004849; width: 235px;
font-size:15px; }
.search-container-closed {
width: 32px;
} }
#search-button:hover { #search-button:hover {
background-color:#FFFFFF; background-color: #FFFFFF !important; /* override any styles set by JS */
border-left: 1px solid #004849; /*link-color*/ border-left: 1px solid #004849; /*link-color*/
box-shadow:0 2px 2px rgba(0,0,0,0.25); }
#search-button .fa {
color: #004849;
} }
#bulletin-button { #bulletin-button {
@ -101,12 +110,11 @@ div.search-result-icon {
} }
#search-field { #search-field {
height: 32px; height: 33px;
width: 200px; width: 200px;
background: #FFFFFF; background: #FFFFFF;
border: 0px solid #AABBC3; border: 0px;
position: relative; padding: 0px;
left: 32px;
} }
input.search-flow { input.search-flow {

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

@ -174,7 +174,7 @@ md-toolbar.md-small .md-toolbar-tools {
background-image: url(../images/starburst.png); background-image: url(../images/starburst.png);
width: 9px; width: 9px;
height: 9px; height: 9px;
margin-top: 2px; margin-top: 3px;
margin-left: 13px; margin-left: 5px;
background-color: transparent; background-color: transparent;
} }

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

@ -188,7 +188,7 @@ rect.birdseye-brush {
background-color: rgba(249, 250, 251, 0.97); /*tint base-color 96%*/ background-color: rgba(249, 250, 251, 0.97); /*tint base-color 96%*/
border-top: 1px solid #C7D2D7; /*tint base-color 60%*/ border-top: 1px solid #C7D2D7; /*tint base-color 60%*/
color: #598599; color: #598599;
z-index: 2; z-index: 3;
height: 31px; height: 31px;
width: 100%; width: 100%;
} }

389
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-flow-status-controller.js Normal file
View File

@ -0,0 +1,389 @@
/*
* 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.
*/
/* global nf, d3 */
nf.ng.Canvas.FlowStatusCtrl = function (serviceProvider, $sanitize) {
'use strict';
var config = {
search: 'Search',
urls: {
search: '../nifi-api/flow/search-results',
status: '../nifi-api/flow/status'
}
};
function FlowStatusCtrl() {
this.connectedNodesCount = "-";
this.activeThreadCount = "-";
this.totalQueued = "-";
this.controllerTransmittingCount = "-";
this.controllerNotTransmittingCount = "-";
this.controllerRunningCount = "-";
this.controllerStoppedCount = "-";
this.controllerInvalidCount = "-";
this.controllerDisabledCount = "-";
this.statsLastRefreshed = "-";
/**
* The search controller.
*/
this.search = {
/**
* Get the search input element.
*/
getInputElement: function () {
return $('#search-field');
},
/**
* Get the search button element.
*/
getButtonElement: function () {
return $('#search-button');
},
/**
* Get the search container element.
*/
getSearchContainerElement: function () {
return $('#search-container');
},
/**
* Initialize the search controller.
*/
init: function () {
var self = this;
// Create new jQuery UI widget
$.widget('nf.searchAutocomplete', $.ui.autocomplete, {
reset: function () {
this.term = null;
},
_resizeMenu: function () {
var ul = this.menu.element;
ul.width(399);
},
_normalize: function (searchResults) {
var items = [];
items.push(searchResults);
return items;
},
_renderMenu: function (ul, items) {
var self = this;
// the object that holds the search results is normalized into a single element array
var searchResults = items[0];
// show all processors
if (!nf.Common.isEmpty(searchResults.processorResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-processor"></i></div>Processors</li>');
$.each(searchResults.processorResults, function (i, processorMatch) {
self._renderItem(ul, processorMatch);
});
}
// show all process groups
if (!nf.Common.isEmpty(searchResults.processGroupResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-group"></i></div>Process Groups</li>');
$.each(searchResults.processGroupResults, function (i, processGroupMatch) {
self._renderItem(ul, processGroupMatch);
});
}
// show all remote process groups
if (!nf.Common.isEmpty(searchResults.remoteProcessGroupResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-group-remote"></i></div>Remote Process Groups</li>');
$.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
self._renderItem(ul, remoteProcessGroupMatch);
});
}
// show all connections
if (!nf.Common.isEmpty(searchResults.connectionResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-connect"></i></div>Connections</li>');
$.each(searchResults.connectionResults, function (i, connectionMatch) {
self._renderItem(ul, connectionMatch);
});
}
// show all input ports
if (!nf.Common.isEmpty(searchResults.inputPortResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-port-in"></i></div>Input Ports</li>');
$.each(searchResults.inputPortResults, function (i, inputPortMatch) {
self._renderItem(ul, inputPortMatch);
});
}
// show all output ports
if (!nf.Common.isEmpty(searchResults.outputPortResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-port-out"></i></div>Output Ports</li>');
$.each(searchResults.outputPortResults, function (i, outputPortMatch) {
self._renderItem(ul, outputPortMatch);
});
}
// show all funnels
if (!nf.Common.isEmpty(searchResults.funnelResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-funnel"></i></div>Funnels</li>');
$.each(searchResults.funnelResults, function (i, funnelMatch) {
self._renderItem(ul, funnelMatch);
});
}
// ensure there were some results
if (ul.children().length === 0) {
ul.append('<li class="unset search-no-matches">No results matched the search terms</li>');
}
},
_renderItem: function (ul, match) {
var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
$.each(match.matches, function (i, match) {
itemContent.append($('<div class="search-match"></div>').text(match));
});
return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
}
})
// configure the new searchAutocomplete jQuery UI widget
this.getInputElement().searchAutocomplete({
appendTo: '#search-flow-results',
position: {
my: 'right top',
at: 'right bottom',
offset: '1 1'
},
source: function (request, response) {
// create the search request
$.ajax({
type: 'GET',
data: {
q: request.term
},
dataType: 'json',
url: config.urls.search
}).done(function (searchResponse) {
response(searchResponse.searchResultsDTO);
});
},
select: function (event, ui) {
var item = ui.item;
// show the selected component
nf.CanvasUtils.showComponent(item.groupId, item.id);
self.getInputElement().val('').blur();
// stop event propagation
return false;
},
open: function (event, ui) {
// show the glass pane
var searchField = $(this);
$('<div class="search-glass-pane"></div>').one('click', function () {
}).appendTo('body');
},
close: function (event, ui) {
// set the input text to '' and reset the cached term
$(this).searchAutocomplete('reset');
self.getInputElement().val('');
// remove the glass pane
$('div.search-glass-pane').remove();
}
});
// hide the search input
self.toggleSearchField();
},
/**
* Toggle/Slide the search field open/closed.
*/
toggleSearchField: function () {
var self = this;
// hide the context menu if necessary
nf.ContextMenu.hide();
var isVisible = self.getInputElement().is(':visible');
var display = 'none';
var class1 = 'search-container-opened';
var class2 = 'search-container-closed';
if (!isVisible) {
self.getButtonElement().css('background-color', '#FFFFFF');
display = 'inline-block';
class1 = 'search-container-closed';
class2 = 'search-container-opened';
} else {
self.getInputElement().css('display', display);
}
this.getSearchContainerElement().switchClass(class1, class2, 500, function () {
self.getInputElement().css('display', display);
if (!isVisible) {
self.getButtonElement().css('background-color', '#FFFFFF');
self.getInputElement().focus();
} else {
self.getButtonElement().css('background-color', '#E3E8EB');
}
});
}
}
/**
* The bulletins controller.
*/
this.bulletins = {
/**
* Update the bulletins.
*
* @param status The controller status returned from the `../nifi-api/flow/status` endpoint.
*/
update: function (status) {
// icon for system bulletins
var bulletinIcon = $('#bulletin-button');
var currentBulletins = bulletinIcon.data('bulletins');
// update the bulletins if necessary
if (nf.Common.doBulletinsDiffer(currentBulletins, status.bulletins)) {
bulletinIcon.data('bulletins', status.bulletins);
// get the formatted the bulletins
var bulletins = nf.Common.getFormattedBulletins(status.bulletins);
// bulletins for this processor are now gone
if (bulletins.length === 0) {
if (bulletinIcon.data('qtip')) {
bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
}
} else {
var newBulletins = nf.Common.formatUnorderedList(bulletins);
// different bulletins, refresh
if (bulletinIcon.data('qtip')) {
bulletinIcon.qtip('option', 'content.text', newBulletins);
} else {
// no bulletins before, show icon and tips
bulletinIcon.addClass('has-bulletins').qtip($.extend({
content: newBulletins
}, nf.CanvasUtils.config.systemTooltipConfig));
}
}
}
// update controller service and reporting task bulletins
nf.Settings.setBulletins(status.controllerServiceBulletins, status.reportingTaskBulletins);
}
}
}
FlowStatusCtrl.prototype = {
constructor: FlowStatusCtrl,
/**
* Initialize the flow status controller.
*/
init: function () {
this.search.init();
},
/**
* Reloads the current status of the flow.
*/
reloadFlowStatus: function () {
var self = this;
return $.ajax({
type: 'GET',
url: config.urls.status,
dataType: 'json'
}).done(function (response) {
// report the updated status
if (nf.Common.isDefinedAndNotNull(response.controllerStatus)) {
self.update(response.controllerStatus);
}
}).fail(nf.Common.handleAjaxError);
},
/**
* Update the flow status counts.
*
* @param status The controller status returned from the `../nifi-api/flow/status` endpoint.
*/
update: function (status) {
var controllerInvalidCountColor =
(nf.Common.isDefinedAndNotNull(status.invalidCount) && (status.invalidCount > 0)) ?
'#BA554A' : '#728E9B';
$('#controller-invalid-count').parent().css('color', controllerInvalidCountColor);
if (nf.Common.isDefinedAndNotNull(status.connectedNodes)) {
var connectedNodes = status.connectedNodes.split(' / ');
var connectedNodesCountColor =
(connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) ? '#BA554A' : '#728E9B';
$('#connected-nodes-count').parent().css('color', connectedNodesCountColor);
}
// update the report values
this.activeThreadCount = $sanitize(status.activeThreadCount);
this.totalQueued = $sanitize(status.queued);
// update the component counts
this.controllerTransmittingCount =
nf.Common.isDefinedAndNotNull(status.activeRemotePortCount) ?
$sanitize(status.activeRemotePortCount) : '-';
this.controllerNotTransmittingCount =
nf.Common.isDefinedAndNotNull(status.inactiveRemotePortCount) ?
$sanitize(status.inactiveRemotePortCount) : '-';
this.controllerRunningCount =
nf.Common.isDefinedAndNotNull(status.runningCount) ? $sanitize(status.runningCount) : '-';
this.controllerStoppedCount =
nf.Common.isDefinedAndNotNull(status.stoppedCount) ? $sanitize(status.stoppedCount) : '-';
this.controllerInvalidCount =
nf.Common.isDefinedAndNotNull(status.invalidCount) ? $sanitize(status.invalidCount) : '-';
this.controllerDisabledCount =
nf.Common.isDefinedAndNotNull(status.disabledCount) ? $sanitize(status.disabledCount) : '-';
this.connectedNodesCount =
nf.Common.isDefinedAndNotNull(status.connectedNodes) ? $sanitize(status.connectedNodes) : '-';
this.bulletins.update(status);
// handle any pending user request
if (status.hasPendingAccounts === true) {
$('#has-pending-accounts').show();
} else {
$('#has-pending-accounts').hide();
}
}
}
var flowStatusCtrl = new FlowStatusCtrl();
return flowStatusCtrl;
};

83
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js
View File

@ -30,12 +30,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
function GlobalMenuCtrl(serviceProvider) { function GlobalMenuCtrl(serviceProvider) {
/** /**
* The summary menu item. * The summary menu item controller.
*/ */
this.summary = { this.summary = {
/** /**
* The summary menu item's shell. * The summary menu item's shell controller.
*/ */
shell: { shell: {
@ -49,12 +49,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The counters menu item. * The counters menu item controller.
*/ */
this.counters = { this.counters = {
/** /**
* The counters menu item's shell. * The counters menu item's shell controller.
*/ */
shell: { shell: {
@ -68,12 +68,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The bulletin board menu item. * The bulletin board menu item controller.
*/ */
this.bulletinBoard = { this.bulletinBoard = {
/** /**
* The bulletin board menu item's shell. * The bulletin board menu item's shell controller.
*/ */
shell: { shell: {
@ -87,7 +87,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The data provenance menu item. * The data provenance menu item controller.
*/ */
this.dataProvenance = { this.dataProvenance = {
@ -101,7 +101,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}, },
/** /**
* The data provenance menu item's shell. * The data provenance menu item's shell controller.
*/ */
shell: { shell: {
@ -115,12 +115,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The controller settings menu item. * The controller settings menu item controller.
*/ */
this.controllerSettings = { this.controllerSettings = {
/** /**
* The controller settings menu item's shell. * The controller settings menu item's shell controller.
*/ */
shell: { shell: {
@ -136,7 +136,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The cluster menu item. * The cluster menu item controller.
*/ */
this.cluster = { this.cluster = {
@ -150,7 +150,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}, },
/** /**
* The cluster menu item's shell. * The cluster menu item's shell controller.
*/ */
shell: { shell: {
@ -164,12 +164,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The flow config history menu item. * The flow config history menu item controller.
*/ */
this.flowConfigHistory = { this.flowConfigHistory = {
/** /**
* The flow config history menu item's shell. * The flow config history menu item's shell controller.
*/ */
shell: { shell: {
@ -183,7 +183,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The users menu item. * The users menu item controller.
*/ */
this.users = { this.users = {
@ -197,7 +197,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}, },
/** /**
* The users menu item's shell. * The users menu item's shell controller.
*/ */
shell: { shell: {
@ -211,12 +211,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The templates menu item. * The templates menu item controller.
*/ */
this.templates = { this.templates = {
/** /**
* The templates menu item's shell. * The templates menu item's shell controller.
*/ */
shell: { shell: {
@ -232,12 +232,12 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The help menu item. * The help menu item controller.
*/ */
this.help = { this.help = {
/** /**
* The help menu item's shell. * The help menu item's shell controller.
*/ */
shell: { shell: {
@ -251,12 +251,36 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
}; };
/** /**
* The about menu item. * The about menu item controller.
*/ */
this.about = { this.about = {
/** /**
* The about menu item's modal. * Initialize the about details.
*/
init: function () {
// get the about details
$.ajax({
type: 'GET',
url: config.urls.controllerAbout,
dataType: 'json'
}).done(function (response) {
var aboutDetails = response.about;
// set the document title and the about title
document.title = aboutDetails.title;
$('#nf-version').text(aboutDetails.version);
// store the content viewer url if available
if (!nf.Common.isBlank(aboutDetails.contentViewerUrl)) {
$('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
}
}).fail(nf.Common.handleAjaxError);
this.modal.init();
},
/**
* The about menu item's modal controller.
*/ */
modal: { modal: {
@ -274,19 +298,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
*/ */
init: function () { init: function () {
var self = this; var self = this;
// get the about details
$.ajax({
type: 'GET',
url: config.urls.controllerAbout,
dataType: 'json'
}).done(function (response) {
var aboutDetails = response.about;
// set the document title and the about title
document.title = aboutDetails.title;
$('#nf-version').text(aboutDetails.version);
}).fail(nf.Common.handleAjaxError);
// configure the about dialog
this.getElement().modal({ this.getElement().modal({
overlayBackground: true, overlayBackground: true,
buttons: [{ buttons: [{
@ -326,6 +338,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
} }
} }
} }
GlobalMenuCtrl.prototype = { GlobalMenuCtrl.prototype = {
constructor: GlobalMenuCtrl, constructor: GlobalMenuCtrl,
@ -333,7 +346,7 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
* Initialize the global menu controls. * Initialize the global menu controls.
*/ */
init: function () { init: function () {
this.about.modal.init(); this.about.init();
} }
} }

73
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-header-controller.js
View File

@ -17,19 +17,63 @@
/* global nf, d3 */ /* global nf, d3 */
nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl) { nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
'use strict'; 'use strict';
var MIN_TOOLBAR_WIDTH = 640; var MIN_TOOLBAR_WIDTH = 640;
function HeaderCtrl(toolboxCtrl, globalMenuCtrl) { var config = {
urls: {
accessConfig: '../nifi-api/access/config'
}
};
function HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl) {
this.toolboxCtrl = toolboxCtrl; this.toolboxCtrl = toolboxCtrl;
this.globalMenuCtrl = globalMenuCtrl; this.globalMenuCtrl = globalMenuCtrl;
this.flowStatusCtrl = flowStatusCtrl;
/** /**
* The login link. * The login controller.
*/
this.loginCtrl = {
/**
* Initialize the login controller.
*/
init: function () {
var self = this;
// if the user is not anonymous or accessing via http
if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') {
$('#login-link-container').css('display', 'none');
}
// if accessing via http, don't show the current user
if (location.protocol === 'http:') {
$('#current-user-container').css('display', 'none');
}
// get the login config
var loginXhr = $.ajax({
type: 'GET',
url: config.urls.accessConfig,
dataType: 'json'
});
$.when(loginXhr).done(function (loginResult) {
self.supportsLogin = loginResult.config.supportsLogin;
}).fail(nf.Common.handleAjaxError);
},
/**
* Boolean describing whether or not the NiFi instance supports login.
*/
supportsLogin: undefined,
/**
* The login shell controller.
*/ */
this.loginLink = {
shell: { shell: {
/** /**
@ -42,15 +86,16 @@ nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl
}; };
/** /**
* Logout. * The logout controller.
*/ */
this.logoutLink = { this.logoutCtrl = {
logout: function () { logout: function () {
nf.Storage.removeItem("jwt"); nf.Storage.removeItem("jwt");
window.location = '/nifi'; window.location = '/nifi';
} }
}; };
} }
HeaderCtrl.prototype = { HeaderCtrl.prototype = {
constructor: HeaderCtrl, constructor: HeaderCtrl,
@ -65,20 +110,14 @@ nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl
/** /**
* Initialize the canvas header. * Initialize the canvas header.
*
* @argument {boolean} supportsLogin Whether login is supported.
*/ */
init: function () { init: function () {
this.toolboxCtrl.init(); this.toolboxCtrl.init();
this.globalMenuCtrl.init(); this.globalMenuCtrl.init();
this.flowStatusCtrl.init();
// if the user is not anonymous or accessing via http this.loginCtrl.init();
if ($('#current-user').text() !== nf.Common.ANONYMOUS_USER_TEXT || location.protocol === 'http:') {
$('#login-link-container').css('display', 'none');
}
// if accessing via http, don't show the current user
if (location.protocol === 'http:') {
$('#current-user-container').css('display', 'none');
}
}, },
/** /**
@ -108,7 +147,7 @@ nf.ng.Canvas.HeaderCtrl = function (serviceProvider, toolboxCtrl, globalMenuCtrl
} }
} }
var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl); var headerCtrl = new HeaderCtrl(toolboxCtrl, globalMenuCtrl, flowStatusCtrl);
headerCtrl.register(); headerCtrl.register();
return headerCtrl; return headerCtrl;
}; };

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

@ -28,7 +28,8 @@ $(document).ready(function () {
nf.ng.Canvas.AppCtrl.$inject = ['$scope', 'serviceProvider', 'headerCtrl', 'graphControlsCtrl']; nf.ng.Canvas.AppCtrl.$inject = ['$scope', 'serviceProvider', 'headerCtrl', 'graphControlsCtrl'];
nf.ng.ServiceProvider.$inject = []; nf.ng.ServiceProvider.$inject = [];
nf.ng.BreadcrumbsCtrl.$inject = ['serviceProvider', '$sanitize']; nf.ng.BreadcrumbsCtrl.$inject = ['serviceProvider', '$sanitize'];
nf.ng.Canvas.HeaderCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl']; nf.ng.Canvas.HeaderCtrl.$inject = ['serviceProvider', 'toolboxCtrl', 'globalMenuCtrl', 'flowStatusCtrl'];
nf.ng.Canvas.FlowStatusCtrl.$inject = ['serviceProvider', '$sanitize'];
nf.ng.Canvas.GlobalMenuCtrl.$inject = ['serviceProvider']; nf.ng.Canvas.GlobalMenuCtrl.$inject = ['serviceProvider'];
nf.ng.Canvas.ToolboxCtrl.$inject = ['processorComponent', nf.ng.Canvas.ToolboxCtrl.$inject = ['processorComponent',
'inputPortComponent', 'inputPortComponent',
@ -64,6 +65,7 @@ $(document).ready(function () {
app.service('headerCtrl', nf.ng.Canvas.HeaderCtrl); app.service('headerCtrl', nf.ng.Canvas.HeaderCtrl);
app.service('globalMenuCtrl', nf.ng.Canvas.GlobalMenuCtrl); app.service('globalMenuCtrl', nf.ng.Canvas.GlobalMenuCtrl);
app.service('toolboxCtrl', nf.ng.Canvas.ToolboxCtrl); app.service('toolboxCtrl', nf.ng.Canvas.ToolboxCtrl);
app.service('flowStatusCtrl', nf.ng.Canvas.FlowStatusCtrl);
app.service('processorComponent', nf.ng.ProcessorComponent); app.service('processorComponent', nf.ng.ProcessorComponent);
app.service('inputPortComponent', nf.ng.InputPortComponent); app.service('inputPortComponent', nf.ng.InputPortComponent);
app.service('outputPortComponent', nf.ng.OutputPortComponent); app.service('outputPortComponent', nf.ng.OutputPortComponent);
@ -126,15 +128,9 @@ nf.Canvas = (function () {
authorities: '../nifi-api/controller/authorities', authorities: '../nifi-api/controller/authorities',
kerberos: '../nifi-api/access/kerberos', kerberos: '../nifi-api/access/kerberos',
revision: '../nifi-api/flow/revision', revision: '../nifi-api/flow/revision',
status: '../nifi-api/flow/status',
bulletinBoard: '../nifi-api/flow/bulletin-board',
banners: '../nifi-api/flow/banners', banners: '../nifi-api/flow/banners',
controller: '../nifi-api/controller',
controllerConfig: '../nifi-api/controller/config', controllerConfig: '../nifi-api/controller/config',
about: '../nifi-api/flow/about', cluster: '../nifi-api/cluster'
accessConfig: '../nifi-api/access/config',
cluster: '../nifi-api/cluster',
d3Script: 'js/d3/d3.min.js'
} }
}; };
@ -521,9 +517,7 @@ nf.Canvas = (function () {
}); });
//breadcrumbs //breadcrumbs
nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').updateBreadcrumbsCss({'bottom': bottom + 'px'});
'appCtrl.serviceProvider.breadcrumbsCtrl.updateBreadcrumbsCss',
{'bottom': bottom + 'px'});
// body // body
$('#canvas-body').css({ $('#canvas-body').css({
@ -633,123 +627,6 @@ nf.Canvas = (function () {
}).fail(nf.Common.handleAjaxError); }).fail(nf.Common.handleAjaxError);
}; };
/**
* Reloads the current status of this flow.
*/
var reloadFlowStatus = function () {
return $.ajax({
type: 'GET',
url: config.urls.status,
dataType: 'json'
}).done(function (response) {
// report the updated status
if (nf.Common.isDefinedAndNotNull(response.controllerStatus)) {
var controllerStatus = response.controllerStatus;
// update the report values
$('#active-thread-count').text(controllerStatus.activeThreadCount);
$('#total-queued').text(controllerStatus.queued);
// update the connected nodes if applicable
if (nf.Common.isDefinedAndNotNull(controllerStatus.connectedNodes)) {
var connectedNodes = controllerStatus.connectedNodes.split(' / ');
if (connectedNodes.length === 2 && connectedNodes[0] !== connectedNodes[1]) {
$('#connected-nodes-count').addClass('alert');
} else {
$('#connected-nodes-count').removeClass('alert');
}
// set the connected nodes
$('#connected-nodes-count').text(controllerStatus.connectedNodes);
}
// update the component counts
if (nf.Common.isDefinedAndNotNull(controllerStatus.activeRemotePortCount)) {
$('#controller-transmitting-count').text(controllerStatus.activeRemotePortCount);
} else {
$('#controller-transmitting-count').text('-');
}
if (nf.Common.isDefinedAndNotNull(controllerStatus.inactiveRemotePortCount)) {
$('#controller-not-transmitting-count').text(controllerStatus.inactiveRemotePortCount);
} else {
$('#controller-not-transmitting-count').text('-');
}
if (nf.Common.isDefinedAndNotNull(controllerStatus.runningCount)) {
$('#controller-running-count').text(controllerStatus.runningCount);
} else {
$('#controller-running-count').text('-');
}
if (nf.Common.isDefinedAndNotNull(controllerStatus.stoppedCount)) {
$('#controller-stopped-count').text(controllerStatus.stoppedCount);
} else {
$('#controller-stopped-count').text('-');
}
if (nf.Common.isDefinedAndNotNull(controllerStatus.invalidCount)) {
$('#controller-invalid-count').text(controllerStatus.invalidCount);
if(controllerStatus.invalidCount > 0) {
$('#controller-invalid-count').parent().css('color', '#BA554A');
} else {
$('#controller-invalid-count').parent().css('color', '#728E9B');
}
} else {
$('#controller-invalid-count').text('-');
}
if (nf.Common.isDefinedAndNotNull(controllerStatus.disabledCount)) {
$('#controller-disabled-count').text(controllerStatus.disabledCount);
} else {
$('#controller-disabled-count').text('-');
}
// icon for system bulletins
var bulletinIcon = $('#controller-bulletins');
var currentBulletins = bulletinIcon.data('bulletins');
// update the bulletins if necessary
if (nf.Common.doBulletinsDiffer(currentBulletins, controllerStatus.bulletins)) {
bulletinIcon.data('bulletins', controllerStatus.bulletins);
// get the formatted the bulletins
var bulletins = nf.Common.getFormattedBulletins(controllerStatus.bulletins);
// bulletins for this processor are now gone
if (bulletins.length === 0) {
if (bulletinIcon.data('qtip')) {
bulletinIcon.removeClass('has-bulletins').qtip('api').destroy(true);
}
// hide the icon
bulletinIcon.hide();
} else {
var newBulletins = nf.Common.formatUnorderedList(bulletins);
// different bulletins, refresh
if (bulletinIcon.data('qtip')) {
bulletinIcon.qtip('option', 'content.text', newBulletins);
} else {
// no bulletins before, show icon and tips
bulletinIcon.addClass('has-bulletins').qtip($.extend({
content: newBulletins
}, nf.CanvasUtils.config.systemTooltipConfig));
}
// show the icon
bulletinIcon.show();
}
}
// update controller service and reporting task bulletins
nf.Settings.setBulletins(controllerStatus.controllerServiceBulletins, controllerStatus.reportingTaskBulletins);
// handle any pending user request
if (controllerStatus.hasPendingAccounts === true) {
$('#has-pending-accounts').show();
} else {
$('#has-pending-accounts').hide();
}
}
}).fail(nf.Common.handleAjaxError);
};
/** /**
* Refreshes the graph. * Refreshes the graph.
* *
@ -775,11 +652,8 @@ nf.Canvas = (function () {
nf.Canvas.setGroupId(processGroupFlow.id); nf.Canvas.setGroupId(processGroupFlow.id);
// update the breadcrumbs // update the breadcrumbs
nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').resetBreadcrumbs();
'appCtrl.serviceProvider.breadcrumbsCtrl.resetBreadcrumbs'); nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').generateBreadcrumbs(processGroupFlow.breadcrumb);
nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl',
'appCtrl.serviceProvider.breadcrumbsCtrl.generateBreadcrumbs',
processGroupFlow.breadcrumb);
// set the parent id if applicable // set the parent id if applicable
if (nf.Common.isDefinedAndNotNull(processGroupFlow.parentGroupId)) { if (nf.Common.isDefinedAndNotNull(processGroupFlow.parentGroupId)) {
@ -881,12 +755,11 @@ nf.Canvas = (function () {
// get the process group to refresh everything // get the process group to refresh everything
var processGroupXhr = reloadProcessGroup(nf.Canvas.getGroupId()); var processGroupXhr = reloadProcessGroup(nf.Canvas.getGroupId());
var statusXhr = reloadFlowStatus(); var statusXhr = nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl.flowStatusCtrl').reloadFlowStatus();
var settingsXhr = nf.Settings.loadSettings(false); // don't reload the status as we want to wait for deferreds to complete var settingsXhr = nf.Settings.loadSettings(false); // don't reload the status as we want to wait for deferreds to complete
$.when(processGroupXhr, statusXhr, settingsXhr).done(function (processGroupResult) { $.when(processGroupXhr, statusXhr, settingsXhr).done(function (processGroupResult) {
// adjust breadcrumbs if necessary // adjust breadcrumbs if necessary
nf.ng.Bridge.call('appCtrl.serviceProvider.breadcrumbsCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.breadcrumbsCtrl').resetScrollPosition();
'appCtrl.serviceProvider.breadcrumbsCtrl.resetScrollPosition');
// don't load the status until the graph is loaded // don't load the status until the graph is loaded
reloadStatus(nf.Canvas.getGroupId()).done(function () { reloadStatus(nf.Canvas.getGroupId()).done(function () {
@ -904,7 +777,9 @@ nf.Canvas = (function () {
reloadStatus: function () { reloadStatus: function () {
return $.Deferred(function (deferred) { return $.Deferred(function (deferred) {
// refresh the status and check any bulletins // refresh the status and check any bulletins
$.when(reloadStatus(nf.Canvas.getGroupId()), reloadFlowStatus(), checkRevision()).done(function () { $.when(reloadStatus(nf.Canvas.getGroupId()),
nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl.flowStatusCtrl').reloadFlowStatus(),
checkRevision()).done(function () {
deferred.resolve(); deferred.resolve();
}).fail(function () { }).fail(function () {
deferred.reject(); deferred.reject();
@ -995,22 +870,6 @@ nf.Canvas = (function () {
dataType: 'json' dataType: 'json'
}); });
// get the about details
var aboutXhr = $.ajax({
type: 'GET',
url: config.urls.about,
dataType: 'json'
}).done(function (response) {
}).fail(nf.Common.handleAjaxError);
// get the login config
var loginXhr = $.ajax({
type: 'GET',
url: config.urls.accessConfig,
dataType: 'json'
});
// create the deferred cluster request // create the deferred cluster request
var isClusteredRequest = $.Deferred(function (deferred) { var isClusteredRequest = $.Deferred(function (deferred) {
$.ajax({ $.ajax({
@ -1030,10 +889,8 @@ nf.Canvas = (function () {
}).promise(); }).promise();
// ensure the config requests are loaded // ensure the config requests are loaded
$.when(configXhr, loginXhr, aboutXhr, userXhr).done(function (configResult, loginResult, aboutResult) { $.when(configXhr, userXhr).done(function (configResult) {
var configResponse = configResult[0]; var configResponse = configResult[0];
var loginResponse = loginResult[0];
var aboutResponse = aboutResult[0];
// calculate the canvas offset // calculate the canvas offset
var canvasContainer = $('#canvas-container'); var canvasContainer = $('#canvas-container');
@ -1041,17 +898,6 @@ nf.Canvas = (function () {
// get the config details // get the config details
var configDetails = configResponse.config; var configDetails = configResponse.config;
var loginDetails = loginResponse.config;
var aboutDetails = aboutResponse.about;
// set the document title and the about title
document.title = aboutDetails.title;
$('#nf-version').text(aboutDetails.version);
// store the content viewer url if available
if (!nf.Common.isBlank(aboutDetails.contentViewerUrl)) {
$('#nifi-content-viewer-url').text(aboutDetails.contentViewerUrl);
}
// when both request complete, load the application // when both request complete, load the application
isClusteredRequest.done(function () { isClusteredRequest.done(function () {
@ -1068,9 +914,7 @@ nf.Canvas = (function () {
initCanvas(); initCanvas();
nf.Canvas.View.init(); nf.Canvas.View.init();
nf.ContextMenu.init(); nf.ContextMenu.init();
nf.ng.Bridge.call('appCtrl.serviceProvider.headerCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl').init();
'appCtrl.serviceProvider.headerCtrl.init', loginDetails.supportsLogin);
nf.Search.init();
nf.Settings.init(); nf.Settings.init();
nf.Actions.init(); nf.Actions.init();
nf.QueueListing.init(); nf.QueueListing.init();
@ -1104,8 +948,7 @@ nf.Canvas = (function () {
nf.RemoteProcessGroupDetails.init(); nf.RemoteProcessGroupDetails.init();
nf.GoTo.init(); nf.GoTo.init();
nf.Graph.init().done(function () { nf.Graph.init().done(function () {
nf.ng.Bridge.call('appCtrl.serviceProvider.graphControlsCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.graphControlsCtrl').init();
'appCtrl.serviceProvider.graphControlsCtrl.init');
// determine the split between the polling // determine the split between the polling
var pollingSplit = autoRefreshIntervalSeconds / 2; var pollingSplit = autoRefreshIntervalSeconds / 2;

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

@ -1,179 +0,0 @@
/*
* 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.
*/
nf.Search = (function () {
var config = {
search: 'Search',
urls: {
search: '../nifi-api/flow/search-results'
}
};
return {
/**
* Initialize the header by register all required listeners.
*/
init: function () {
$.widget('nf.searchAutocomplete', $.ui.autocomplete, {
reset: function () {
this.term = null;
},
_resizeMenu: function () {
var ul = this.menu.element;
ul.width(399);
},
_normalize: function(searchResults) {
var items = [];
items.push(searchResults);
return items;
},
_renderMenu: function (ul, items) {
var self = this;
// the object that holds the search results is normalized into a single element array
var searchResults = items[0];
// show all processors
if (!nf.Common.isEmpty(searchResults.processorResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-processor"></i></div>Processors</li>');
$.each(searchResults.processorResults, function (i, processorMatch) {
self._renderItem(ul, processorMatch);
});
}
// show all process groups
if (!nf.Common.isEmpty(searchResults.processGroupResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-group"></i></div>Process Groups</li>');
$.each(searchResults.processGroupResults, function (i, processGroupMatch) {
self._renderItem(ul, processGroupMatch);
});
}
// show all remote process groups
if (!nf.Common.isEmpty(searchResults.remoteProcessGroupResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-group-remote"></i></div>Remote Process Groups</li>');
$.each(searchResults.remoteProcessGroupResults, function (i, remoteProcessGroupMatch) {
self._renderItem(ul, remoteProcessGroupMatch);
});
}
// show all connections
if (!nf.Common.isEmpty(searchResults.connectionResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-connect"></i></div>Connections</li>');
$.each(searchResults.connectionResults, function (i, connectionMatch) {
self._renderItem(ul, connectionMatch);
});
}
// show all input ports
if (!nf.Common.isEmpty(searchResults.inputPortResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-port-in"></i></div>Input Ports</li>');
$.each(searchResults.inputPortResults, function (i, inputPortMatch) {
self._renderItem(ul, inputPortMatch);
});
}
// show all output ports
if (!nf.Common.isEmpty(searchResults.outputPortResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-port-out"></i></div>Output Ports</li>');
$.each(searchResults.outputPortResults, function (i, outputPortMatch) {
self._renderItem(ul, outputPortMatch);
});
}
// show all funnels
if (!nf.Common.isEmpty(searchResults.funnelResults)) {
ul.append('<li class="search-header"><div class="search-result-icon"><i class="icon icon-funnel"></i></div>Funnels</li>');
$.each(searchResults.funnelResults, function (i, funnelMatch) {
self._renderItem(ul, funnelMatch);
});
}
// ensure there were some results
if (ul.children().length === 0) {
ul.append('<li class="unset search-no-matches">No results matched the search terms</li>');
}
},
_renderItem: function (ul, match) {
var itemContent = $('<a></a>').append($('<div class="search-match-header"></div>').text(match.name));
$.each(match.matches, function (i, match) {
itemContent.append($('<div class="search-match"></div>').text(match));
});
return $('<li></li>').data('ui-autocomplete-item', match).append(itemContent).appendTo(ul);
}
});
// configure the search field
$('#search-field').searchAutocomplete({
appendTo: '#search-flow-results',
position: {
my: 'right top',
at: 'right bottom',
offset: '1 1'
},
source: function (request, response) {
// create the search request
$.ajax({
type: 'GET',
data: {
q: request.term
},
dataType: 'json',
url: config.urls.search
}).done(function (searchResponse) {
response(searchResponse.searchResultsDTO);
});
},
select: function (event, ui) {
var item = ui.item;
// show the selected component
nf.CanvasUtils.showComponent(item.groupId, item.id);
// blur the search field
$(this).blur();
// stop event propagation
return false;
},
open: function (event, ui) {
// show the glass pane
var searchField = $(this);
$('<div class="search-glass-pane"></div>').one('click', function () {
// blur the field
searchField.blur();
}).appendTo('body');
},
close: function (event, ui) {
// set the text to 'Search' and reset the cached term
$(this).searchAutocomplete('reset');
// remove the glass pane
$('div.search-glass-pane').remove();
}
}).focus(function () {
// hide the context menu if necessary
nf.ContextMenu.hide();
// clear the text for the user to type
$(this).val('').removeClass('search-flow');
}).blur(function () {
$(this).val(config.search).addClass('search-flow');
}).val(config.search).addClass('search-flow');
}
};
}());

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

@ -1618,8 +1618,7 @@ nf.Settings = (function () {
// refresh the system diagnostics when clicked // refresh the system diagnostics when clicked
nf.Common.addHoverEffect('#settings-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () { nf.Common.addHoverEffect('#settings-refresh-button', 'button-refresh', 'button-refresh-hover').click(function () {
if ($('#settings-refresh-required-icon').is(':visible')) { if ($('#settings-refresh-required-icon').is(':visible')) {
nf.ng.Bridge.call('appCtrl.serviceProvider.headerCtrl', nf.ng.Bridge.get('appCtrl.serviceProvider.headerCtrl').reloadAndClearWarnings();
'appCtrl.serviceProvider.headerCtrl.reloadAndClearWarnings');
} else { } else {
nf.Settings.loadSettings(); nf.Settings.loadSettings();
} }

4
nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-ng-bridge.js
View File

@ -61,9 +61,10 @@ nf.ng.Bridge = (function () {
angular.forEach(funArray, function (value) { angular.forEach(funArray, function (value) {
fun = fun[value]; fun = fun[value];
}); });
var args = Array.prototype.slice.call(arguments, 2); var args = Array.prototype.slice.call(arguments, 2);
var result = fun.apply(obj, args); var result = fun.apply(obj, args);
this.rootScope.$apply();
if (result) { if (result) {
return result; return result;
} }
@ -82,6 +83,7 @@ nf.ng.Bridge = (function () {
angular.forEach(objArray, function (value) { angular.forEach(objArray, function (value) {
obj = obj[value]; obj = obj[value];
}); });
return obj; return obj;
}, },