From 9db1def6c6c850ba6c0dddb1414b09985a2e3298 Mon Sep 17 00:00:00 2001 From: Matt Gilman Date: Fri, 6 May 2016 13:30:49 -0400 Subject: [PATCH] NIFI-1781: - Incorporating updated styles to reflect component level authorization. - Updating canvas for new look and feel. - This closes #417 --- .../nifi/web/api/entity/ProcessorEntity.java | 14 + .../nifi/cluster/manager/StatusMerger.java | 2 +- .../WEB-INF/partials/canvas/canvas-header.jsp | 2 +- .../WEB-INF/partials/canvas/flow-status.jsp | 2 +- .../src/main/webapp/css/flow-status.css | 2 +- .../nifi-web-ui/src/main/webapp/css/graph.css | 226 ++- .../src/main/webapp/css/header.css | 3 +- .../nifi-web-ui/src/main/webapp/css/main.css | 4 +- .../src/main/webapp/images/bgContextMenu.png | Bin 746 -> 0 bytes .../main/webapp/images/bgControlsInset.png | Bin 618 -> 0 bytes .../src/main/webapp/images/bgHeader.png | Bin 1697 -> 0 bytes .../src/main/webapp/images/bgNifiLogo.png | Bin 4232 -> 0 bytes .../src/main/webapp/images/bgOutline.png | Bin 585 -> 0 bytes .../src/main/webapp/images/bgPanCenter.png | Bin 362 -> 0 bytes .../src/main/webapp/images/bgPanZoom.png | Bin 832 -> 0 bytes .../images/bgProcessGroupDetailsArea.png | Bin 6596 -> 0 bytes .../webapp/images/bgProcessorStatArea.png | Bin 4062 -> 0 bytes .../bgRemoteProcessGroupDetailsArea.png | Bin 4433 -> 0 bytes .../src/main/webapp/images/bgSearchInput.png | Bin 221 -> 0 bytes .../main/webapp/images/bgToolbarBtnBorder.png | Bin 227 -> 0 bytes .../src/main/webapp/images/blueBtnBg-over.jpg | Bin 356 -> 0 bytes .../src/main/webapp/images/blueBtnBg.jpg | Bin 356 -> 0 bytes .../src/main/webapp/images/buttonColor.png | Bin 1679 -> 0 bytes .../src/main/webapp/images/buttonCopy.png | Bin 1166 -> 0 bytes .../src/main/webapp/images/buttonDelete.png | Bin 1837 -> 0 bytes .../src/main/webapp/images/buttonDisable.png | Bin 1737 -> 0 bytes .../src/main/webapp/images/buttonEnable.png | Bin 1375 -> 0 bytes .../src/main/webapp/images/buttonGroup.png | Bin 880 -> 0 bytes .../src/main/webapp/images/buttonOutline.png | Bin 495 -> 0 bytes .../src/main/webapp/images/buttonPanDown.png | Bin 554 -> 0 bytes .../src/main/webapp/images/buttonPanLeft.png | Bin 588 -> 0 bytes .../src/main/webapp/images/buttonPanRight.png | Bin 530 -> 0 bytes .../src/main/webapp/images/buttonPanUp.png | Bin 551 -> 0 bytes .../src/main/webapp/images/buttonPaste.png | Bin 1372 -> 0 bytes .../src/main/webapp/images/buttonRun.png | Bin 1163 -> 0 bytes .../src/main/webapp/images/buttonStop.png | Bin 869 -> 0 bytes .../src/main/webapp/images/buttonTemplate.png | Bin 1290 -> 0 bytes .../src/main/webapp/images/buttonZoom100.png | Bin 449 -> 0 bytes .../src/main/webapp/images/buttonZoomFit.png | Bin 499 -> 0 bytes .../src/main/webapp/images/buttonZoomIn.png | Bin 435 -> 0 bytes .../src/main/webapp/images/buttonZoomOut.png | Bin 339 -> 0 bytes .../src/main/webapp/images/grayBtnBg-over.jpg | Bin 319 -> 0 bytes .../src/main/webapp/images/grayBtnBg.jpg | Bin 317 -> 0 bytes .../src/main/webapp/images/headerTabBg.gif | Bin 131 -> 0 bytes .../src/main/webapp/images/portRemoved.png | Bin 1090 -> 0 bytes .../src/main/webapp/images/portRunning.png | Bin 337 -> 0 bytes .../src/main/webapp/images/portStopped.png | Bin 192 -> 0 bytes .../src/main/webapp/images/toolbarBg.gif | Bin 45 -> 0 bytes .../main/webapp/js/nf/canvas/nf-actions.js | 4 +- .../webapp/js/nf/canvas/nf-canvas-utils.js | 37 +- .../src/main/webapp/js/nf/canvas/nf-canvas.js | 164 +- .../nf/canvas/nf-connection-configuration.js | 69 +- .../main/webapp/js/nf/canvas/nf-connection.js | 1484 +++++++++-------- .../src/main/webapp/js/nf/canvas/nf-funnel.js | 134 +- .../src/main/webapp/js/nf/canvas/nf-label.js | 24 +- .../src/main/webapp/js/nf/canvas/nf-port.js | 486 +++--- .../webapp/js/nf/canvas/nf-process-group.js | 1145 +++++++------ .../main/webapp/js/nf/canvas/nf-processor.js | 886 +++++----- .../js/nf/canvas/nf-remote-process-group.js | 950 +++++------ .../src/main/webapp/js/nf/nf-common.js | 37 + 60 files changed, 2992 insertions(+), 2683 deletions(-) delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgContextMenu.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgControlsInset.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgHeader.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgNifiLogo.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgOutline.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgPanCenter.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgPanZoom.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessGroupDetailsArea.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessorStatArea.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgRemoteProcessGroupDetailsArea.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgSearchInput.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgToolbarBtnBorder.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/blueBtnBg-over.jpg delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/blueBtnBg.jpg delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonColor.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonCopy.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonDelete.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonDisable.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonEnable.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonGroup.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonOutline.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanDown.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanLeft.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanRight.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanUp.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPaste.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonRun.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonStop.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonTemplate.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoom100.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomFit.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomIn.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomOut.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/grayBtnBg-over.jpg delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/grayBtnBg.jpg delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/headerTabBg.gif delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRemoved.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRunning.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portStopped.png delete mode 100755 nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/toolbarBg.gif diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-client-dto/src/main/java/org/apache/nifi/web/api/entity/ProcessorEntity.java b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-client-dto/src/main/java/org/apache/nifi/web/api/entity/ProcessorEntity.java index edf3c5e6ac..89b784ece6 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-client-dto/src/main/java/org/apache/nifi/web/api/entity/ProcessorEntity.java +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-client-dto/src/main/java/org/apache/nifi/web/api/entity/ProcessorEntity.java @@ -17,6 +17,7 @@ package org.apache.nifi.web.api.entity; import org.apache.nifi.web.api.dto.ProcessorDTO; +import org.apache.nifi.web.api.dto.status.ProcessorStatusDTO; import javax.xml.bind.annotation.XmlRootElement; @@ -27,6 +28,7 @@ import javax.xml.bind.annotation.XmlRootElement; public class ProcessorEntity extends ComponentEntity { private ProcessorDTO component; + private ProcessorStatusDTO status; /** * The ProcessorDTO that is being serialized. @@ -41,4 +43,16 @@ public class ProcessorEntity extends ComponentEntity { this.component = component; } + /** + * The Processor status. + * + * @return status + */ + public ProcessorStatusDTO getStatus() { + return status; + } + + public void setStatus(ProcessorStatusDTO status) { + this.status = status; + } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-cluster/src/main/java/org/apache/nifi/cluster/manager/StatusMerger.java b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-cluster/src/main/java/org/apache/nifi/cluster/manager/StatusMerger.java index 7fc764ace1..d8cead75d3 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-cluster/src/main/java/org/apache/nifi/cluster/manager/StatusMerger.java +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-framework-cluster/src/main/java/org/apache/nifi/cluster/manager/StatusMerger.java @@ -634,7 +634,7 @@ public class StatusMerger { } public static String prettyPrint(final Integer count, final Long bytes) { - return formatCount(count) + " / " + formatDataSize(bytes); + return formatCount(count) + " (" + formatDataSize(bytes) + ")"; } } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp index f129d91fd1..8f004298ed 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp @@ -85,7 +85,7 @@ Bulletin Board + class="fa fa-sticky-note-o">Bulletin Board - +
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css index 6ce3538354..f79c8e3424 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/flow-status.css @@ -78,7 +78,7 @@ background-color:#728E9B; /*base-color*/ } -#bulletin-button i{ +#bulletin-button i.fa { color: #fff; font-size:15px; } diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css index 605a28cdbe..958eb05b6a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/graph.css @@ -53,16 +53,78 @@ text.unset { */ g.component { - font-family: Arial, sans-serif; + font-family: Roboto; +} + +g.component rect.body { + fill: #ffffff; +} + +g.component rect.body.unauthorized { + fill: #f4f6f7; +} + +g.component rect.border.unauthorized { + stroke-width: 1.5; + stroke: #ba554a; + stroke-dasharray: 3,3; } g.component.selected rect.border { - stroke: #ffcc00; - stroke-width: 5; + stroke: #004849; + stroke-width: 3; } -g.funnel.selected rect.border { - stroke-width: 2.5; +text.stats-label { + fill: #262626; + font-size: 12px; + font-family: Roboto Slab; +} + +text.stats-value { + fill: #775351; + font-size: 12px; + font-weight: bold; +} + +text.stats-value tspan.size, text.stats-value tspan.size { + font-weight: normal; +} + +text.stats-info { + fill: #728E9B; + font-size: 12px; +} + +text.bulletin-icon { + font-size: 13px; + font-family: FontAwesome; + fill: #ffffff; +} + +rect.bulletin-background { + fill: #728e9b; +} + +rect.bulletin-background.has-bulletins { + fill: #ba554a; +} + +text.process-group-invalid.has-validation-errors { + fill: #ba554a; +} + +text.active-thread-count-icon { + font-family: flowfont; + font-size: 12px; + fill: #728e9b; + text-anchor: end; +} + +text.active-thread-count { + fill: #775351; + font-size: 12px; + font-weight: bold; } /* @@ -88,19 +150,24 @@ image.add-connect { Processor */ -text.processor-stats-label { - fill: #fff; - font-size: 11px; - font-weight: bold; +text.processor-name { + fill: #262626; + font-size: 14px; } -text.processor-stats-value { - font-size: 11px; +text.processor-type { + fill: #728e9b; + font-size: 12px; } -text.processor-stats-info { - fill: #999999; - font-size: 11px; +text.processor-icon { + fill: #ad9897; + font-family: flowfont; + font-size: 30px; +} + +text.run-status-icon { + font-size: 13px; } /* @@ -108,7 +175,27 @@ text.processor-stats-info { */ g.connection { - font-family: Arial, sans-serif; + font-family: Roboto; +} + +g.connection rect.body { + fill: #ffffff; +} + +g.connection rect.body.unauthorized { + fill: #f4f6f7; +} + +g.connection rect.border.unauthorized { + stroke-width: 1.5; + stroke: #ba554a; + stroke-dasharray: 3,3; +} + +g.connection.selected rect.border { + /*stroke: #004849;*/ + stroke: #ffcc00; + stroke-width: 3; } path.connector { @@ -126,12 +213,6 @@ path.connector.connectable { stroke-dasharray: 4; } -g.connection rect.connection-label { - fill: #ffffff; - stroke: #000000; - stroke-width: 2; -} - g.connection path.connection-path { fill: none; stroke: #000000; @@ -139,6 +220,21 @@ g.connection path.connection-path { cursor: pointer; } +g.connection path.connection-path.unauthorized { + stroke: #ba554a; + stroke-dasharray: 3,3; +} + +text.connection-from-run-status, text.connection-to-run-status { + fill: #728e9b; + font-family: FontAwesome; + font-size: 10px; +} + +text.connection-from-run-status.is-missing-port, text.connection-to-run-status.is-missing-port { + fill: #ba554a; +} + /* grouped connection */ g.connection.grouped path.connection-path, g.connection.grouped rect.connection-label { @@ -196,12 +292,6 @@ g.connection rect.endpoint { cursor: pointer; } -g.connection text.connection-stats-label { - font-size: 11px; - font-weight: bold; - fill: #598599; -} - /* labels */ g.label rect.labelpoint { @@ -218,8 +308,30 @@ g.label.selected rect.labelpoint { /* funnels */ +text.funnel-icon { + fill: #ad9897; + font-family: flowfont; + font-size: 30px; +} + /* ports */ +text.port-name { + fill: #262626; + font-size: 14px; +} + +text.port-icon { + fill: #ad9897; + font-family: flowfont; + font-size: 30px; +} + +text.port-transmission-icon { + font-size: 11px; + fill: #728e9b +} + /* active thread count */ text.active-thread-count { @@ -228,35 +340,55 @@ text.active-thread-count { /* process groups */ +text.process-group-name { + fill: #262626; + font-size: 14px; +} + +text.process-group-contents-count { + font-weight: bold; + font-size: 13px; + fill: #294c58; +} + g.process-group.drop rect.border { stroke: #0000ff; stroke-width: 3; } -text.process-group-contents-count { - font-weight: bold; - fill: #294c58; -} - -text.process-group-stats-label { - font-size: 11px; - font-weight: bold; - fill: #598599; -} - -text.process-group-stats-value { - font-size: 11px; -} - -text.process-group-stats-info { - fill: #999999; - font-size: 11px; +text.process-group-contents-icon { + font-size: 13px; + fill: #728e9b; } /* remote process group */ +text.remote-process-group-name { + fill: #262626; + font-size: 14px; +} + +text.remote-process-group-uri { + fill: #004849; + font-size: 12px; +} + +text.remote-process-group-transmission-status { + font-size: 13px; + fill: #728e9b +} + +text.remote-process-group-transmission-status.has-authorization-errors { + fill: #ba554a; +} + +text.remote-process-group-transmission-secure { + font-family: FontAwesome; + font-size: 13px; + fill: #004849; +} + text.remote-process-group-last-refresh { - fill: #cccccc; - font-style: italic; + fill: #728e9b; text-anchor: end; } \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css index f95f78c841..b36914e62c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/header.css @@ -74,12 +74,13 @@ md-toolbar.md-small .md-toolbar-tools { #global-menu-content { font-size: 13px; - padding: 3px 0; + padding: 0px 0; background-color:rgba(249,250,251,0.97); /*tint base-color 96%*/ border:1px solid #004849; /*link-color*/ border-radius:2px; box-shadow:0 2px 3px rgba(0,0,0,0.35); width: 215px; + max-height: inherit; } #global-menu-content md-menu-item{ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css index 4488d62869..83a28303ed 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/main.css @@ -69,7 +69,7 @@ } @font-face { - font-family: 'Roboto+Slab'; + font-family: 'Roboto Slab'; font-style: normal; font-weight: normal; src: local('RobotoSlab Regular'), @@ -78,7 +78,7 @@ } @font-face { - font-family: 'Roboto+Slab'; + font-family: 'Roboto Slab'; font-style: normal; font-weight: bold; src: local('RobotoSlab Bold'), diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgContextMenu.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgContextMenu.png deleted file mode 100755 index 5d3bbf8a9ef12584f65572803b55832b2920c275..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 746 zcmVmRe) zl`3U>3=tt!{nnTS3A?XM4IyldNf1guyQWzU3F-G8)2xLcLbgk@W709TA|%zzR%w0 zyn~(SSP}$v9pN5K`Jyrz4JW5wG=mKm_6iIim`@T6BFA(^eFAcfh3_!^z^NEfTCoJFV&?V~9r9H- zvvS`$NhvWJgg>fikotd5VYGDcq>K(h1F2%P8wdW9H;wVMUe5spv8K`AX@*6MJwCVC zDa>d?n}K-VRiI)EB*)-Hnt2Ox8Y1i=LB%3tOUz`Nc~4R-2&`I@AVX}4b7Af{Nzv_p19R6&iWqYSTa7=&1H2?qr diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgControlsInset.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgControlsInset.png deleted file mode 100755 index ab3b6b7a250ab36e88cf832648de41d08d142270..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 618 zcmeAS@N?(olHy`uVBq!ia0vp^T0pGN!3HF!@C#5R5WfrBD=NDxcD>w(6ux+}$fPsPWkf)1dNJQ(~>DGRS9R%9yqm9>f zEL{9BLgdSxroLIu1^j*obUA+f^$`(DbdOlLVeiI|$|A?^dHl2T*0Vcnzu9`V3?KU( z=2usk>QlvJXGNA|q+MJ%)3rSfne!~i<>k+(TfggWGV!swcfarHWzM<34t}h;V{79W z{~{vh#f7h@4fjaR>9Old77*-^IAYTlti5-U_hA+hRv#WUrpZed^*wLy>=#`+dG4qD zFI~?zZk`Y#lB%CwgCw2XsvUJt~{lLqcvYk~9Z<&6@MfbYk zb^$@>(5ICQ9FxyJ7mN4QTD8(s#5zFGG-tWQqEBYC$~b@a3Vdx^P^5Fx_^qlI!;+VB zx9|Fe1Ydr#N-dycU-UGKJDyEDGD9qW5}BIZe!H?qwiLFM))!We7+I6 z3MhZ|>+8#Umlfk%*R9Jx;?9;ZSLO1}FCUmEyv;o{)kJ18FxDA7UHx3vIVCg!0D5f$ APyhe` diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgHeader.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgHeader.png deleted file mode 100755 index 65bc7fed5e244f96736113920e936d18058ed91e..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1697 zcmV;S244AzP)o000pP1^@s6g$-g>00004b3#c}2nYxW zd7IZ~ebVG7wVRUJ4ZXi@?ZDjy3H7_wSFEKFCBDYfj00sF; zL_t(|ob8?2lHxE7Mdj4|{~r(Ths24sc(+4geO0V$Ku02S&dQe9+NGb9labo0V~i)GW=iDr zi@0AFgr46JJ6bLJyeYXN4O%Jqn2*TH%!$r5&lG$RdjJ3c008%~i=dpKx?eDIVYWyt zMhUMHi*i4{ou3edQuujwQp+Q67|EUT!nnE;Ct`PtzElM>lamyj=Me-S00000z}Mh9 zDvVkPxrCrPZr>mloiQjYi*`Q73=oP$^kssur{bqq@7smntZJVjvSwBKAo>6R00000 zQHNMGt9V*0)>IZ{hbg!se>qq*l)<6~AWT*I(@` z{w<%kq$~gc0002^H5|Vob~I2`>=BAR6-BFpm#iqFnt1XNg0Q*rcZ>MTRsA|!JqId& z5Pkpv0001B1OV004L*Gb)Ltc2m20mv1-isv_Pk5Z_oqe2X9~wSe|~)x+}k&k6y!qV-d) z8|n`L00000dzL!=-|7N+s~uL?Ax=1poj5008^| z%c_UTFRp*HIGj*9T=92@O9bIAfNT-C|HxMZrGSz#N83SFW>!1s&6Pm3f&u^l004kr zWJ={wn=nHy%zD~Nqx>=zKAC^IYFHn0Wz}%1Ae=1(vm%TVqRkS5qt!rfWly#cR6;f- z1knx(0000006@%|s$qXisVxkn$X_4~rwBsX8v2-uU_uBksR%*{0ssI2001zBVPQC0 zF%$;bilNm?+9C``TS*5$p>$XfuBi%oLr8_;d{t1-&+jN9C!y)>@NHnuNn{dcA=98rScIxB^6QDaA|?QLv5TVF)xs<0GpmK2qR`sIh6Ctoof{uEwOvzAA{@X==7_32F{$X*0*R=`HM4}L#^!!QQRAM)c+2l_#`n( z)Sl1NE|%}eXNBmP;s0(il(VgllQA3JgI@nCKO^zpz3uVK`gE+Rb&gT{_Sg-!nJ1O9 zUzBspW8L+8%x}J16uzla_|F2{ao;tL;|ykOwav^ z_FNjtJxqyhxhFc3wBcvt$IlYTIboa=AXnO2>|cl1f@~YUU_Q4INj%4SQheO}Y7}d( zmcM~D2J&x&h`BTI?Yu>N`!FBR9I)kQlkW3!EORdrH#uF!8#KA|`Z1{YFU`x}WQ$+c zEl(%Tcy%uJ_o;I&k4u48`?7EOzqXM%%QNJo54GrY`Sh*UoGW$FIU}~TsW7UFQxPzA zCaWnDqe&OzL~>qZ@|GNv7u%+P#@4!^EX-e=TOSw~w~2F^d1RHOCcoT8u`Q&?-VkAteT(yS z?i>%U8;kA8ZH}$S5s`D7?c=WbHW#nSk#k#=|8BdT`*GZE?tDIlklVIJ*+ln4F7Zi6 rv_+#~YuUaW|L6#FM)yRtwTr?(@;$^3)<6A(00000NkvXXu0mjfmn#lO diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgNifiLogo.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgNifiLogo.png deleted file mode 100755 index d92c484bdde783dbfc61a8f6aabe4570b750b9e4..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4232 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 A>i_@% diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgPanZoom.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgPanZoom.png deleted file mode 100755 index 9a3f90660e8fe9168cb542bb3e9209aad377ccbd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 832 zcmeAS@N?(olHy`uVBq!ia0vp^)<8UygAGVd{OA-0q*#ibJVQ8upoSx*1IXtr@Q5sC zVBi)4Va7{$>;3=*#Y$WwN}P*Q6H7Al^Atidb5j`%O!W;7^$iU!C~Xf0s*nMx2+mI{ zDNig)WpGT%PfAsA%PdMQ&o9a@R&WkBVcT?h0Rscm3{Mxwkcv5PuN>^V6d-Z*W3y1% zJ5#%k^T)U)o~b^NJdxAJ%c(t$MbUS5gRZPq@ml4%QoacSub5VCy_{um;=#$E>gK9< z3+jL7=?i^&_4QXYLq5Zv8n#bbQ@xlHxD%ZF&#LKUAKEk|2)F*VSF`vTt}$%8y8PZ5 z!{XTTT@gC(4jKHp@%rnU)2F>}Z_?pEAkOgmzmW9tLJ`-C>Zdo&xtL*6EOUHI)LPC4 zc81kwesL+V2{1;?wY~Ov&&eFK+0w~}4kkRJQ*EKI_~!&5Iu zJu=j?U#nYm*($}}{a~7Yj{?V`y8Z9BMXl95rM~sh`TSKGQJNW_%~x#VJGSil?-Zk% zqA?P#lTX!0ySf)N+shnG4(aNBY{Au(@UC*6yMZ+Y^Qvob14~ O%;4$j=d#Wzp$P!c3ThDm diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessGroupDetailsArea.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessGroupDetailsArea.png deleted file mode 100755 index 58dedbd3dd65ddce91b164c03de042437d915fba..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6596 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessorStatArea.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgProcessorStatArea.png deleted file mode 100755 index 0d8874cb27053cbec016e94b5f54e82831907c57..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4062 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 Q^8f$<07*qoM6N<$f^8|O0{{R3 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgRemoteProcessGroupDetailsArea.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgRemoteProcessGroupDetailsArea.png deleted file mode 100755 index 59e0cd911d98efe119fb5bbd85350809b29c737a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 4433 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgSearchInput.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgSearchInput.png deleted file mode 100755 index 60658e504ba89167a5862790521aad6297259cf0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 221 zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V8<6ZZI=>f4u@pObhHwBu4M$1`kk47*5n0T@ zz%2yAjF;}#{Q(M!mAFQfI2WZRmSpDVDTHL^rZO0q>KhvB8yZ|t+8zv4Ap=qooS#-w zo>-L1;Fyx1l&avCS(I9yUzA;};2dniw(0T$pgL1e7sn8ZsmW_*8hy8C7Hs%CVDNPHb6Mw< G&;$Ub1VGCG diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgToolbarBtnBorder.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/bgToolbarBtnBorder.png deleted file mode 100755 index cb182125c81c1e951d204159e028a76ff25f8555..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 227 zcmeAS@N?(olHy`uVBq!ia0vp^j6f{K!3HGDSj;X0DVAa<&kznEsNqQI0P;BtJR*x3 z7`TN%nDNrxx<5ccnG)BClHmNblJdl&R0hYC{G?O`x6Go{^8BLgVg=`56Shs47Xa0X zfz&w{r6!hS=I1GdWag$a7#ivuS?U`aWL-Y^5U9f1)5S4_V`gsmK~4q*9%kon_YXME zIj}G&`P2>`JjIFA4T diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/blueBtnBg.jpg b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/blueBtnBg.jpg deleted file mode 100755 index b11ed7cc2b06f3bec4ddbb489cfbca5a582b2def..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 356 zcmex=2YIyC%Ube7#CY!kUJNMshed%g! i{v~L($+PKBW?x0ix)q;%ysgXF7s?v>XnN=5|2F|9I5?gF diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonColor.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonColor.png deleted file mode 100755 index 7f0cc069408dbf6e5b4669025174279f12316f90..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1679 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonDelete.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonDelete.png deleted file mode 100755 index dd1cc95c099e0d90c3b90560a8440931244132ac..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1837 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonEnable.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonEnable.png deleted file mode 100755 index 664a1d69c8469571ff9e6666fe814772e18b8335..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1375 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 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanDown.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanDown.png deleted file mode 100755 index 091ad18ce755cbae162ff1a35999ba449b0ea932..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 554 zcmV+_0@eMAP)7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00DwY zL_t(Ijm?pJmj_mt-mga%XW8y5tp-Jb^=kFW_s4nO%GUjgTQJ zL>ROSUNFhzrY{zj} z!!Qmo!!Sh0aac{$>`R4eLdl*j)@)}mI&eCJkvLnd*_u#_G0O<94H$lqfGVaCs2G+P5mWFj7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00E>) zL_t(IjlI)5Yr;?z2k>KckYd3UI|Ls~21`-F4x%mex{0m^>__O_p`u?yy0y5eU!dY3 z6kJlWG!jS)5e?S|qHVD)1Siv>M68La$>4!Ao%`c|A6#3z-LAk6%OMB?WHK4kuwJiQ zat;81#bN5g&&_^LlMfaak_yF!w`i+A&xP2BZPY8a`|bSKtUQ2cMq-jWcKBb zQ2yS{Wm@Ajf$FIM0F1)coq8$&fK6clTfCuBS#frnrn7-S0AyJPS(YJ@NKB&9=#b+$ z56|-?%d#$n&_JE5jWLE*ckDfyP^4$r9lv{|@f-Of4O}N)kH*<)n$G%sK2Q{8*(6EM zbGck+I-S~@&1R72c~>fx8mzAA_xrH!4iEO{7a^+iDbH|@eP-n7^9X;HK5I;8-x_DDR;!g*EN1#GSe6AV&hQ`pS61Ba14U5;Q4}o& aT5&%%CQy^9f8MnK00007IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00C-A zL_t(Ijbprc@!~QDIsz621qG5dZQHhu!OP2wEPX6&Y-}WH`tjoj0|NsC1G)N`NYcf? z!0`Y7e^Rxe=)TY^=@yT<+YaH?hhgFT`SVZM+uPq?v0{Y|Hs9j1uq?v!gr2hO{r%@}=wS0L zP79GOee~#&0J?8+S%_@us}G+9(0z;7LVN(9g~aG%dGqEChGc$zzQyt5#}%cer9V_x zSD!F3F?o-!4x7H2+m2dXfBaHWn2-BIgq_g|RcTQSeJtoME+{ClIC0{HqQAfYmCDM> z%eZ`nE;eh&af=&|Un*K?C|n7%HNdG4!@@_89tlpKJb8z)vGIF+!G|vQ`om|z3{R^a zDpDeN^)cSPdza+0^wgZ8AfD_5>0OXKa^x5?5606L7< UU1sUCB>(^b07*qoM6N<$f(V4{4FCWD diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanUp.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPanUp.png deleted file mode 100755 index c6bae8d4d06f5c8bc99cc46e78f46f8a8e5691fc..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 551 zcmV+?0@(eDP)7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00DnV zL_t(Ijn&k#YQjJq2JkP@2hh1C&=R_sL&snp?g2y{1;MwtP@kZ$5Z6GWW5kY4Ttpn| zAgzu)0_or+K7g@H4Ixb|7z^zOH{GA#ecXiz%jMF-A4-0`UZdS^XF`US)a-7h}ByeR;1Pwsqj zd!6ct0B|@Q5*K4kJq|L))U>%{()M-R2_4;bPC6n01VNBghIpP=pp-`9D^z5OS7eEAw!4Bpa#NlB5fTI;glDr^(XuRsQpyd(m;*q!+l6IW zN~6*6tJP|F<snIe3 zU>L@nQpz<=Q=_x-CyS;(o~UJ6;=Qjj0MP5y=Ve*q{qZEx5e9>S)oQhn%jIxR_WM0- p+Xet!!U>;D6wmu5#lNAf&L^S&F9i;kF1Y{z002ovPDHLkV1iq^;|Tx& diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPaste.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonPaste.png deleted file mode 100755 index 7e19a9acc9989a9af35c80bb04f89e0768d061e3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1372 zcmV-i1*7_jP)j^(u00004b3#c}2nYxW zd7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00gv2 zL_t(oh3%NjZ`?!}z<)F2O|!dctF}o?!=o)p=mP|Q0urjkfdhwD;?N!-2Lu;H{|+ul zNJv~ba6qC62@nz>Kt1qKr9z=C&8yw*Bbx_pk|s^;wRi0q4t5-S*V%2#fH0xw($=EK8}*0yjI)QnIta&Cbhp*n^v$w{C=u)@ZYq z-cksJZ13&$cv@>rf+vJP{sSIBviOL$q==WZvOQQXUBh!dq!jqRPoYrcz`#IT;Cj5$ zl@hM&BBcy@#UcZPL-);dyc${?5MYc!Nkw5xt}RbmO44}Uyk5quI*d%*!m)Z;^oxA? z)fpD%Za4k*UalME5>?0H{KZKY{2pdk6sJG^n)%ze?u%FReE??WZI(R2ovNlZIg2)? z?YE*bcPE}1W1}M&t*O`ReDh%Wr3bzF@C3Yz~a&pPe0j@Qi5XlmQ0@b z>(1TS;7b=TKgJ zS5BOyzklyKJW1d=JhQ(y9-EnWQoO>p9NP47V`>Js>TzV~09GQmQ;mm;s%GH3Dai2f zaO&9@gVvf;r%s`yN;LrXRQns*%+_M-~?Mri4+1887xKAAn5>1m>PyK zx~q|H)XzFQT8xmi3Dt&c!f!qdp6EpLe?Xxi> zS*2~SMzCTdq6%$0Ri+mW`5kW9gpf9RYH^wKS0_^qNitnx3H)$s2@xvTI0dDYNGS<| zAnWsgooC{rW$=Rl-wz@~0b@W!nQoeQzL^HEMnsx`YPE{*`$#FVEQ_wLu2{h=;D5n0 zI&_S{gtNmK1YyM{Dr`asvT#iXFN$59{_G3@PPK~XJx)HKkCjqNrS98Fr+GEHn4F#m zzz+hn&c{Vb2ocpG5p7PIw-ln)iO2NhO+NnMJs_MOLZks&YmUA8Is;FwwVAC>JSsP@ z^WnSiwB((5<1K~`t+ko0PCUGNzj^(u00004b3#c}2nYxW zd7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00ZMm zL_t(oh3%MKOj~6b$A9npp40MWQ7GeMuuYt-M%dJ3(UHt0%Q8ix4xPG1r)Ep^W*RfH z3$v&<#v5Q*ln`wunXoY#@U|okVEqX?xD`0^E@E9%)N22-`n- z(xmDCcb?~c&ihsIZQp=P0aa2`Qb-)JSgfEt!%(WQz?IH3lq@W8rSr@JkKjt@U4Cngvh zo}#6)p1M#uB8$SMp(Kk#DS>N9Qk%mJ)uiY=`4*3Ua*UtO|Kj;=c5#I_SZ(p#i8pxQ z{Z38|p3RG=ltfAap#brK&G(Z7oEYwBI+~M@O{2xzOh)5lB}cObI0>vCItJgXj2p zWSCUO_Rr7MEDDAakVwPd7FafJDnq&=fGu4Feztwr>~2i{!<>Wul|>p;LWq2(bdD+ww5Ybxn*$ zkn zs=$(*85r^SKtJXFr6PsEbR>19VV=Cbon7niL}js+EX7+}R>h&aI=H8?HLI;jE877S z5-3$cn#!vQ7niWq#^n1n5iTWUne5%Po5v$<1amli`0>h9CXY3@^K|q5IUPQ<3K|3) zNn>dh>&nWrK79BVy!)nB4n*!_?F}`{OKe_kP1`xNc@Om!wFTidlvdJMRzWbw+mz7# z<6&7zg2DVcs++@BGMV=qqMO5x>*jQvTqy0`E8k-MwA|^iSoszUJ_WC4T`PFC>srC9 dT~}Sf{{Ware!{adaRvYY002ovPDHLkV1ifmD!c#y diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonStop.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonStop.png deleted file mode 100755 index 2c6bd279efa5fe3de16bd8423f4cb859a5181512..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 869 zcmV-r1DgDaP)j^(u00004b3#c}2nYxW zd7IZ~ebVG7wVRUJ4ZXi@?ZDjy4F)uPXFEKD`)4|~Y00O;9 zL_t(oh3%M2YZFlv$A9;cXk(~t9&KH?6S@G^jTkX`qJ}wA%#j zb}p~cY|>~pb9uw)h~X&8<&{g8@~IB-PFlaZ9X6gk=31#V71oa;?md0R+Ujb`@8k74 zA+H}j%;nvG{(>88Yq`9^Fyh(LH5F@laQANP5Q%@zfpdrm zFE=+aT4!4BOn63NwdUs1_4EUglk1PYz4(8pdA^o0M#Er$bi2q{SVABo(C=f6&a|90 z*-S^h_MD=yw7Igc@v(ZPl-S@iXG$9PD+eIy!z~$ z53LOFOKS&ZEoyNQj6qoo)=ut?LAP3LwRZTe7gDjl(^6|Un2GmsHz2D1OvU<6ONYY| zz1}|6g{z>3?9Ti@u*-zcyIm%H-t98s^KO3tw|9u{Q>?Q)00000NkvXXu0mjf!2^=j diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonTemplate.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonTemplate.png deleted file mode 100755 index 2f52861919ce18e827e96bc05bd5cb88d9ceb6d0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1290 zcmV+l1@-!gP)&TefqxV{W`bQKUYUq6gqS| zUBO(B$5SwuWf`V$@^W!mhQ1HQ%f#jGB$QM2J;Iszq7OYNe4Kal&7H}@XQyWJ>}nlRsgVe|L_b+xhHPdH};%d znxb;fb%v{8F#uRy*G^)2$}0x2g2vV(;2Sc;AFe;qRKFVSm@9V8j{byj*ZHw+AM}%# z%kwQCspsxEG)!JDC(rb<98adlrs8X>A2*;K-dGtChY=o|k}5W|P;>JkOy2h1=MdAa z4!aZ##pF23Bmni)7g#;0eC@zM`bN}X?v_2DsNueGcqDxz`Y`vGGrbJQSuN%$5E2P+ zEo=g?uDGzunlgQSQd+xlcPghjCNtsr+fQ3T>&2nbqX*wAHJbpu)7)^Q_$$zdw0g^r zVR;tnDLvJ2&q{4rp41Da)>vzoW!dYO>NZvBH9UZ)Y~`Z1?zSrcXMiXWbUfrMq)AY8pksZKbn9&#likS zXw2nx*llISrkd(CV^JliVTB~mP*|d0LL%~<(gZn9DGpe_Jkja)iT{m^-Y z-PLh=VrCXovflFU$_<4hmz}PqZ+ULNH07Oh`^6c*H0>7wD79`s8 zKv0%bIh_?^ShWJ*dF-%bUB%aj_Cl*|4Ri z8YK*D13*QYNP-+jqY#I}(St`j`UY>J6gy$~}xo5?HuZ&b!OV*ZKpg>_N36t#G8Toe)wBd)Y?n@pqWHB4V(b$E7nCHEDM;5^f?u);g%YOoZKS4mS$3x zK<*;HWC1d@78z|@W5p4NmWx_U7BHJlITagC20;*T8{v}<&H`m+#W}eKy^f|+)fG>~ zA(NK^fzKFCJ&1p73;+ADjN_rv4~@RV_+Nkl0LrPVZ0i0W>i_@%07*qoM6N<$f_SHN A(*OVf diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoom100.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoom100.png deleted file mode 100755 index 7a2e6058909e06a02c05b599dd3137b40c75ddff..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 449 zcmeAS@N?(olHy`uVBq!ia0vp^DnKm2!3HGjUf)#)QY^(zo*^7SP{WbZ0pxQQctjR6 zFmMZjFyp1Wb$@_@G9|7NCBgY=CFO}lsSJ)O`AMk?Zka`?<@rU~#R|^BCTyE7F950& z1F3T^N=+=u%+FH@$;?eJteIb)BR#TcL6uv&F*}hS=-5Op!Yuv@q1(fBgI3GXXt|eWvrC^D6f} zE_pM(>aoM5Vw?YGic-!OwJA@|Py73@z=QGCu4|jr%QHGZfB83+sb;^Oe$hL&S)cxM zZkcAx!qxO3ZQ)nn%NZ@lic=R@o_l{gQ#769%C@&>Q(j*G5>wE&-sjY{DM6YIhHj_t z-I=xW*6HV_tUoMl^@`H|J8x3!PxI2VC}$RRT^P$^B`+UVXtVaKtETDChOI`&7#=ij oKEFD-ym6DxZI;eO9N}~9D{tS=ulsF(0~m}9p00i_>zopr09FsSx&QzG diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomFit.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomFit.png deleted file mode 100755 index ddecdbddb3fa488c54d320d2027dbf21683b198b..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 499 zcmeAS@N?(olHy`uVBq!ia0vp^DnKm2!3HGjUf)#)QY^(zo*^7SP{WbZ0pxQQctjR6 zFmMZjFyp1Wb$@_@G9|7NCBgY=CFO}lsSJ)O`AMk?Zka`?<@rU~#R|^BCTyE7F950& z1F3T^N=+=u%+FH@$;?e@ou{2)e>}VQ^-|_K-BX$T-21+L`}udd@mopuSHJ6g7(UqOKgh1BnkU}TCwP@_ z`tL=>JMOgh6(}%#sI71NxldkaZq3TFJ$7m5KK_a*5%J2*nf2^fJKqAJ4;px$o7T(f ln+Hr%nJsYGK;iUH#@kO@E>w$DasUIK!PC{xWt~$(69Bs~$iV;r diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomIn.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomIn.png deleted file mode 100755 index 311da20489f0592fb208e8c1798dc797962a8827..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 435 zcmeAS@N?(olHy`uVBq!ia0vp^DnKm2!3HGjUf)#)QY^(zo*^7SP{WbZ0pxQQctjR6 zFmMZjFyp1Wb$@_@G9|7NCBgY=CFO}lsSJ)O`AMk?Zka`?<@rU~#R|^BCTyE7F950& z1F3T^N=+=u%+FH@$;?e|s=J<3S(k%`Gq>gnEOY4CxACr5`zXUB$*JP%wBn~KcZVp#s+ zzF*a+uhzM@Vnajc&k5MGYn|t$BOH^STQ-RHu^aF-3ubij0vUbEeUBx)Z#+05Toijf z;sl#J*GjeSMIH<$zLQ^Zth5OC&u4n@_g&T0&6*~zTi0nXIUN`mDZr8x*Pf`saBG|G ztb*64^yK*5=bSzs&iJ8lfBX}Vh5O!LXPX@Pdh@}F>)({0+T_Fd$U^LM)yncymu{W@ zXT!R~wx+Xk?W2tU&h=L}YleupW+iWaKHFILT;{(k|DCjNrbd3dTRKmdKI;Vst027+4hX4Qo diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomOut.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/buttonZoomOut.png deleted file mode 100755 index 3ae45261aef45b50017756b38c29a9a2cc4b70e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 339 zcmeAS@N?(olHy`uVBq!ia0vp^DnQK7!3HFIvU78R6icy_X9x!n)NrJ90QsB+9+AZi z4BSE>%y{W;-5;Q!Oo?kmNpOBzNqJ&XDuZK6ep0G}TV_#ed45rLv4V533EQU23xMjx zK-EcFcyvMwKd2vo7!)5S5wqx0>Qje<;y06E%1>}|y|bAFw=)gtgBxiGbCOL=r(ec`sB{BNC_-#Fc0#BjjUoYnAHL-%K< X!072Jnm7M|LW#lC)z4*}Q$iB}?E7_N$R39YkGs~aKX`8ix7h0pmxAX1HvvPXDF^@n diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/headerTabBg.gif b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/headerTabBg.gif deleted file mode 100755 index 4ad168c1b31b7d19c72a686a1c51d57198f62776..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 131 zcmV-}0DS*PNk%w1VF~~d0J8u9aG0&_^7VM0vaZF^ld-|l-{t@R|G?7QrM}F8rMLF^ z`nSv0+vVzuY-~a#sA^8LV2LS&7EC2ui015yR000CqFo8*Fsn`%qP2iJZ44|k8 loMc&dWHAEAXBQiXzDt0eXciP28bx71U=%GP06P#+I;;Qy diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRemoved.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRemoved.png deleted file mode 100755 index cd370e4a833fe9498f21a7b04bae5c6cb90647bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1090 zcmaJ=T}TvB6dpBAOfl&}Dv;YqQ0UIjy8g`I`qRvAF0`_&D{jz33^V__qptSQHV<>py?ozyzH{!mW3l$j zB}He7D2ghHw8?R@dT~)7BwhSCe;P|?yi-@-+_UUay zHtZN`PpCuvs-V%$O`tI)5&;8Z1*D7t(-BiadQVp*v3JbUU=M=(gY>?sWHbgOWJ6HP za6Xl*<3U}3;RBoy5UPQn<2jc1vs}H8=fv82k>kO^N0V%})+5H{@IfxJ3(|cUTO!N4 zuFJSJ46=J!UJwM9^Rs@xk05+b+QdrAXF8P`1sOW3ty@?}Ch!!MZZwF4G;z9Lf?*xX zn$AI+NW<8aVzE5Kc_n3l(dhr7hH;2?a2y`_{im>#NL!GNLkA7oD!I6xN-vcqN;Xt5 zvJ(gmWV#sZLl`-I$O2MFEyIH@-PDll?BSzPF=9GcF;y6mgEUcKbX^l0qyX2z@p28v zg?T>YZ>`}4xuISX0+J+z>!b`#JfXJB!0 zq!^TkelNfO^3Lx+S@$q!iGDhIW2z~=Fmi0<+Wj1`e7v+`Z0y1A&h}Y)ee(kg$}bdZ z&#BJ2p^bQ~t#JD1`c!kv>h`SLa`DagC&Ok%MZv(Ql}WaGet1{;wVJ;$KK`I!;zYUc oo;4b;K3TLd6?D%%%As-!sEUTG&q^zuE$>xFLhbVOrR#V80Q(7O)&Kwi diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRunning.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portRunning.png deleted file mode 100755 index 898bdb5383aca8478815690dde817d7a54f350f7..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 337 zcmV-X0j~auP)*W2w#3*X5jIu z|Mt*sU&B8uB?Fl&6pEea;dtI`wMxH%-e^2AQU;JD2@nyet(vY^ujSi%eR%@*21Aoh zXB=ouVow8FYk1$PP^nGRK2T20#DIt{4Ut@Ji~$*B@ACPpm-|M;{a+9hq{w%P=bK{& z-xp3Tm>E0|PXT*}dKX5~=TR;8N^3emaSTW}jlMoEnsJHy2AF7pxGUGHmDx|@5r}$e j)52Qiru)~xzXcco6&$7$L>PMH00000NkvXXu0mjfy%LL2 diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portStopped.png b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/portStopped.png deleted file mode 100755 index 514f19f9f9c53aa3fb49e448bdb31c79a52229e0..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 192 zcmeAS@N?(olHy`uVBq!ia0vp^AT}2V6Od#Ih{( zJaZG%Q-e|yQz{EjrrH1%C3(6yhE&`t>38I7FyLV6&Rn(ie|_Uc`79^#?i1E&(AGg6TMci%|mQKarwrDITQI>%ox(XZM>OO#((PhHUZs(+op1xEIlyq oY4VRo!+ZY?l?pems$=3|*uT_6k@NoI9H4Csp00i_>zopr06QW_(EtDd diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/toolbarBg.gif b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/toolbarBg.gif deleted file mode 100755 index 820730f8fb98c29396314946daa1bda8039f81c6..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 45 xcmZ?wbhEHbWMq(GXkcKNxAXY_|Nj+#vM{hS{AbW%00NK<0~1S2|H^0vYXC4m3?={o diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js index 9d90a613c8..54314e970e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-actions.js @@ -152,7 +152,7 @@ nf.Actions = (function () { url: d.component.uri, dataType: 'json' }).done(function (response) { - var remoteProcessGroup = response.remoteProcessGroup; + var remoteProcessGroup = response.component; // the timestamp has not updated yet, poll again if (refreshTimestamp === remoteProcessGroup.flowRefreshed) { @@ -163,7 +163,7 @@ nf.Actions = (function () { // reload the group's connections var connections = nf.Connection.getComponentConnections(remoteProcessGroup.id); $.each(connections, function (_, connection) { - nf.Connection.reload(connection); + nf.Connection.reload(connection.component); }); } }); diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js index 55c4b49b5b..655dedb71c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas-utils.js @@ -405,16 +405,12 @@ nf.CanvasUtils = (function () { .each(function () { var bBox = this.getBBox(); d3.select(this).attr('x', function () { - return d.dimensions.width - bBox.width - 4; + return d.dimensions.width - bBox.width - 15; }); }); // update the background width - selection.select('rect.active-thread-count-background') - .attr('width', function () { - var bBox = activeThreadCount.node().getBBox(); - return bBox.width + 8; - }) + selection.select('text.active-thread-count-icon') .attr('x', function () { var bBox = activeThreadCount.node().getBBox(); @@ -423,22 +419,11 @@ nf.CanvasUtils = (function () { setOffset(bBox.width + 6); } - return d.dimensions.width - bBox.width - 8; - }) - .attr('stroke-dasharray', function() { - var rect = d3.select(this); - var width = parseFloat(rect.attr('width')); - var height = parseFloat(rect.attr('height')); - - var dashArray = []; - dashArray.push(0); - dashArray.push(width + height); - dashArray.push(width + height); - return dashArray.join(' '); + return d.dimensions.width - bBox.width - 20; }) .style('display', 'block'); } else { - selection.selectAll('text.active-thread-count, rect.active-thread-count-background').style('display', 'none'); + selection.selectAll('text.active-thread-count, text.active-thread-count-icon').style('display', 'none'); } }, @@ -475,16 +460,8 @@ nf.CanvasUtils = (function () { // if there are bulletins show them, otherwise hide if (nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins)) { // update the tooltip - selection.select('image.bulletin-icon') - .style('display', 'block') + selection.select('text.bulletin-icon') .each(function () { - var bBox = this.getBBox(); - var bulletinIcon = d3.select(this); - - bulletinIcon.attr('x', function () { - return d.dimensions.width - offset - bBox.width - 4; - }); - // if there are bulletins generate a tooltip tip = getTooltipContainer().append('div') .attr('id', function () { @@ -505,10 +482,8 @@ nf.CanvasUtils = (function () { }); // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, bulletinIcon); + nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); }); - } else { - selection.selectAll('image.bulletin-icon').style('display', 'none'); } }, diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js index d5ddbedb77..f82f6c32c2 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-canvas.js @@ -241,7 +241,7 @@ nf.Canvas = (function () { // create arrow definitions for the various line types defs.selectAll('marker') - .data(['normal', 'ghost']) + .data(['normal', 'ghost', 'unauthorized']) .enter().append('marker') .attr({ 'id': function (d) { @@ -256,6 +256,8 @@ nf.Canvas = (function () { 'fill': function (d) { if (d === 'ghost') { return '#aaaaaa'; + } else if (d === 'unauthorized') { + return '#ba554a'; } else { return '#000000'; } @@ -264,77 +266,42 @@ nf.Canvas = (function () { .append('path') .attr('d', 'M2,3 L0,6 L6,3 L0,0 z'); - // define the gradient for the processor stats background - var processGroupStatsBackground = defs.append('linearGradient') - .attr({ - 'id': 'process-group-stats-background', - 'x1': '0%', - 'y1': '100%', - 'x2': '0%', - 'y2': '0%' - }); + // filter for drop shadow + var filter = defs.append('filter') + .attr('id', 'component-drop-shadow'); - processGroupStatsBackground.append('stop') - .attr({ - 'offset': '0%', - 'stop-color': '#dedede' - }); + // blur + filter.append('feGaussianBlur') + .attr('in', 'SourceAlpha') + .attr('stdDeviation', 2) + .attr('result', 'blur'); - processGroupStatsBackground.append('stop') - .attr({ - 'offset': '50%', - 'stop-color': '#ffffff' - }); + // offset + filter.append('feOffset') + .attr('in', 'blur') + .attr('dx', 0) + .attr('dy', 1) + .attr('result', 'offsetBlur'); - processGroupStatsBackground.append('stop') - .attr({ - 'offset': '100%', - 'stop-color': '#dedede' - }); + // color/opacity + filter.append('feFlood') + .attr('flood-color', '#000000') + .attr('flood-opacity', 0.25) + .attr('result', 'offsetColor'); - // define the gradient for the processor stats background - var processorStatsBackground = defs.append('linearGradient') - .attr({ - 'id': 'processor-stats-background', - 'x1': '0%', - 'y1': '100%', - 'x2': '0%', - 'y2': '0%' - }); + // combine + filter.append('feComposite') + .attr('in', 'offsetColor') + .attr('in2', 'offsetBlur') + .attr('operator', 'in') + .attr('result', 'offsetColorBlur'); - processorStatsBackground.append('stop') - .attr({ - 'offset': '0%', - 'stop-color': '#6f97ac' - }); - - processorStatsBackground.append('stop') - .attr({ - 'offset': '100%', - 'stop-color': '#30505c' - }); - - // define the gradient for the port background - var portBackground = defs.append('linearGradient') - .attr({ - 'id': 'port-background', - 'x1': '0%', - 'y1': '100%', - 'x2': '0%', - 'y2': '0%' - }); - - portBackground.append('stop') - .attr({ - 'offset': '0%', - 'stop-color': '#aaaaaa' - }); - - portBackground.append('stop') - .attr({ - 'offset': '100%', - 'stop-color': '#ffffff' - }); + // stack the effect under the source graph + var feMerge = filter.append('feMerge'); + feMerge.append('feMergeNode') + .attr('in', 'offsetColorBlur'); + feMerge.append('feMergeNode') + .attr('in', 'SourceGraphic'); // define the gradient for the expiration icon var expirationBackground = defs.append('linearGradient') @@ -636,51 +603,6 @@ nf.Canvas = (function () { }).fail(nf.Common.handleAjaxError); }; - /** - * Sets the colors for the specified type. - * - * @param {array} colors The possible colors - * @param {string} type The component type for these colors - */ - var setColors = function (colors, type) { - var defs = d3.select('defs'); - - // update processors - var processorSelection = defs.selectAll('linearGradient.' + type + '-background').data(colors, function (d) { - return d; - }); - - // define the gradient for the processor background - var gradient = processorSelection.enter().append('linearGradient') - .attr({ - 'id': function (d) { - return type + '-background-' + d; - }, - 'class': type + '-background', - 'x1': '0%', - 'y1': '100%', - 'x2': '0%', - 'y2': '0%' - }); - - gradient.append('stop') - .attr({ - 'offset': '0%', - 'stop-color': function (d) { - return '#' + d; - } - }); - - gradient.append('stop') - .attr({ - 'offset': '100%', - 'stop-color': '#ffffff' - }); - - // remove old processor colors - processorSelection.exit().remove(); - }; - /** * Reloads the current status of this flow. */ @@ -1172,24 +1094,6 @@ nf.Canvas = (function () { }).fail(nf.Common.handleAjaxError); }, - /** - * Defines the gradient colors used to render processors. - * - * @param {array} colors The colors - */ - defineProcessorColors: function (colors) { - setColors(colors, 'processor'); - }, - - /** - * Defines the gradient colors used to render label. - * - * @param {array} colors The colors - */ - defineLabelColors: function (colors) { - setColors(colors, 'label'); - }, - /** * Return whether this instance of NiFi is clustered. * diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js index a316b5d772..e27f43170c 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection-configuration.js @@ -248,29 +248,32 @@ nf.ConnectionConfiguration = (function () { $.ajax({ type: 'GET', - url: config.urls.api + '/process-groups/' + encodeURIComponent(processGroupData.id), + url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id), data: { verbose: true }, dataType: 'json' }).done(function (response) { - var processGroup = response.component; - var processGroupContents = processGroup.contents; + var processGroup = response.processGroupFlow; + var processGroupContents = processGroup.flow; + + // show the output port options + var options = []; + $.each(processGroupContents.outputPorts, function (i, outputPort) { + if (outputPort.accessPolicy.canRead && outputPort.accessPolicy.canWrite) { + var component = outputPort.component; + options.push({ + text: component.name, + value: component.id, + description: nf.Common.escapeHtml(component.comments) + }); + } + }); // only proceed if there are output ports - if (!nf.Common.isEmpty(processGroupContents.outputPorts)) { + if (!nf.Common.isEmpty(options)) { $('#output-port-source').show(); - // show the output port options - var options = []; - $.each(processGroupContents.outputPorts, function (i, outputPort) { - options.push({ - text: outputPort.name, - value: outputPort.id, - description: nf.Common.escapeHtml(outputPort.comments) - }); - }); - // sort the options options.sort(function (a, b) { return a.text.localeCompare(b.text); @@ -331,7 +334,7 @@ nf.ConnectionConfiguration = (function () { }, dataType: 'json' }).done(function (response) { - var remoteProcessGroup = response.remoteProcessGroup; + var remoteProcessGroup = response.component; var remoteProcessGroupContents = remoteProcessGroup.contents; // only proceed if there are output ports @@ -473,29 +476,29 @@ nf.ConnectionConfiguration = (function () { $.ajax({ type: 'GET', - url: config.urls.api + '/process-groups/' + encodeURIComponent(processGroupData.id), - data: { - verbose: true - }, + url: config.urls.api + '/flow/process-groups/' + encodeURIComponent(processGroupData.id), dataType: 'json' }).done(function (response) { - var processGroup = response.component; - var processGroupContents = processGroup.contents; + var processGroup = response.processGroupFlow; + var processGroupContents = processGroup.flow; + + // show the input port options + var options = []; + $.each(processGroupContents.inputPorts, function (i, inputPort) { + if (inputPort.accessPolicy.canRead && inputPort.accessPolicy.canWrite) { + var component = inputPort.component; + options.push({ + text: component.name, + value: component.id, + description: nf.Common.escapeHtml(component.comments) + }); + } + }); // only proceed if there are output ports - if (!nf.Common.isEmpty(processGroupContents.inputPorts)) { + if (!nf.Common.isEmpty(options)) { $('#input-port-destination').show(); - // show the input port options - var options = []; - $.each(processGroupContents.inputPorts, function (i, inputPort) { - options.push({ - text: inputPort.name, - value: inputPort.id, - description: nf.Common.escapeHtml(inputPort.comments) - }); - }); - // sort the options options.sort(function (a, b) { return a.text.localeCompare(b.text); @@ -555,7 +558,7 @@ nf.ConnectionConfiguration = (function () { }, dataType: 'json' }).done(function (response) { - var remoteProcessGroup = response.remoteProcessGroup; + var remoteProcessGroup = response.component; var remoteProcessGroupContents = remoteProcessGroup.contents; // only proceed if there are output ports diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js index 48f7247f01..1353bbef43 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-connection.js @@ -21,12 +21,12 @@ nf.Connection = (function () { // the dimensions for the connection label var dimensions = { - width: 188 + width: 200 }; /** * Gets the position of the label for the specified connection. - * + * * @param {type} connectionLabel The connection label */ var getLabelPosition = function (connectionLabel) { @@ -86,7 +86,7 @@ nf.Connection = (function () { /** * Calculates the distance between the two points specified squared. - * + * * @param {object} v First point * @param {object} w Second point */ @@ -96,7 +96,7 @@ nf.Connection = (function () { /** * Calculates the distance between the two points specified. - * + * * @param {object} v First point * @param {object} w Second point */ @@ -106,7 +106,7 @@ nf.Connection = (function () { /** * Calculates the distance between the point and the line created by s1 and s2. - * + * * @param {object} p The point * @param {object} s1 Segment start * @param {object} s2 Segment end @@ -133,7 +133,7 @@ nf.Connection = (function () { /** * Calculates the index of the bend point that is nearest to the specified point. - * + * * @param {object} p * @param {object} connectionData */ @@ -183,17 +183,17 @@ nf.Connection = (function () { /** * Determines whether the terminal of the connection (source|destination) is * a group. - * + * * @param {object} terminal */ var isGroup = function (terminal) { return terminal.groupId !== nf.Canvas.getGroupId() && (isInputPortType(terminal.type) || isOutputPortType(terminal.type)); }; - + /** * Determines whether expiration is configured for the specified connection. - * - * @param {object} connection + * + * @param {object} connection * @return {boolean} Whether expiration is configured */ var isExpirationConfigured = function (connection) { @@ -210,7 +210,7 @@ nf.Connection = (function () { /** * Sorts the specified connections according to the z index. - * + * * @param {type} connections */ var sort = function (connections) { @@ -223,7 +223,9 @@ nf.Connection = (function () { * Selects the connection elements against the current connection map. */ var select = function () { - return connectionContainer.selectAll('g.connection').data(connectionMap.values()); + return connectionContainer.selectAll('g.connection').data(connectionMap.values(), function (d) { + return d.id; + }); }; var renderConnections = function (entered, selected) { @@ -232,39 +234,42 @@ nf.Connection = (function () { } var connection = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'connection' - }) - .classed('selected', selected); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'connection' + }) + .classed('selected', selected); // create a connection between the two components connection.append('path') - .attr({ - 'class': 'connection-path', - 'pointer-events': 'none' - }); + .attr({ + 'class': 'connection-path', + 'pointer-events': 'none' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // path to show when selection connection.append('path') - .attr({ - 'class': 'connection-selection-path', - 'pointer-events': 'none' - }); + .attr({ + 'class': 'connection-selection-path', + 'pointer-events': 'none' + }); // path to make selection easier var selectableConnection = connection.append('path') - .attr({ - 'class': 'connection-path-selectable', - 'pointer-events': 'stroke' - }) - .on('mousedown.selection', function () { - // select the connection when clicking the selectable path - nf.Selectable.select(d3.select(this.parentNode)); - }) - .call(nf.ContextMenu.activate); + .attr({ + 'class': 'connection-path-selectable', + 'pointer-events': 'stroke' + }) + .on('mousedown.selection', function () { + // select the connection when clicking the selectable path + nf.Selectable.select(d3.select(this.parentNode)); + }) + .call(nf.ContextMenu.activate); // only support adding bend points when appropriate selectableConnection.filter(function (d) { @@ -335,29 +340,29 @@ nf.Connection = (function () { if (updatePath === true) { updated.classed('grouped', function (d) { - var grouped = false; + var grouped = false; - if (d.accessPolicy.canRead) { - // if there are more than one selected relationship, mark this as grouped - if (nf.Common.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) { - grouped = true; + if (d.accessPolicy.canRead) { + // if there are more than one selected relationship, mark this as grouped + if (nf.Common.isDefinedAndNotNull(d.component.selectedRelationships) && d.component.selectedRelationships.length > 1) { + grouped = true; + } } - } - return grouped; - }) - .classed('ghost', function (d) { - var ghost = false; + return grouped; + }) + .classed('ghost', function (d) { + var ghost = false; - if (d.accessPolicy.canRead) { - // if the connection has a relationship that is unavailable, mark it a ghost relationship - if (hasUnavailableRelationship(d)) { - ghost = true; + if (d.accessPolicy.canRead) { + // if the connection has a relationship that is unavailable, mark it a ghost relationship + if (hasUnavailableRelationship(d)) { + ghost = true; + } } - } - return ghost; - }); + return ghost; + }); } updated.each(function (d) { @@ -438,44 +443,47 @@ nf.Connection = (function () { // update the connection paths connection.select('path.connection-path') - .attr({ - 'd': function () { - var datum = [d.start].concat(d.bends, [d.end]); - return lineGenerator(datum); - }, - 'marker-end': function () { - var marker = 'normal'; + .attr({ + 'd': function () { + var datum = [d.start].concat(d.bends, [d.end]); + return lineGenerator(datum); + }, + 'marker-end': function () { + var marker = 'normal'; - if (d.accessPolicy.canRead) { - // if the connection has a relationship that is unavailable, mark it a ghost relationship - if (hasUnavailableRelationship(d)) { - marker = 'ghost'; - } + if (d.accessPolicy.canRead) { + // if the connection has a relationship that is unavailable, mark it a ghost relationship + if (hasUnavailableRelationship(d)) { + marker = 'ghost'; } + } else { + marker = 'unauthorized'; + } - return 'url(#' + marker + ')'; - } - }); + return 'url(#' + marker + ')'; + } + }); connection.select('path.connection-selection-path') - .attr({ - 'd': function () { - var datum = [d.start].concat(d.bends, [d.end]); - return lineGenerator(datum); - } - }); + .attr({ + 'd': function () { + var datum = [d.start].concat(d.bends, [d.end]); + return lineGenerator(datum); + } + }); connection.select('path.connection-path-selectable') - .attr({ - 'd': function () { - var datum = [d.start].concat(d.bends, [d.end]); - return lineGenerator(datum); - } - }); + .attr({ + 'd': function () { + var datum = [d.start].concat(d.bends, [d.end]); + return lineGenerator(datum); + } + }); // ----- // bends // ----- if (d.accessPolicy.canWrite) { + // ------------------ // bends - startpoint // ------------------ @@ -484,17 +492,17 @@ nf.Connection = (function () { // create a point for the start startpoints.enter().append('rect') - .attr({ - 'class': 'startpoint linepoint', - 'pointer-events': 'all', - 'width': 8, - 'height': 8 - }) - .on('mousedown.selection', function () { - // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); - }) - .call(nf.ContextMenu.activate); + .attr({ + 'class': 'startpoint linepoint', + 'pointer-events': 'all', + 'width': 8, + 'height': 8 + }) + .on('mousedown.selection', function () { + // select the connection when clicking the label + nf.Selectable.select(d3.select(this.parentNode)); + }) + .call(nf.ContextMenu.activate); // update the start point startpoints.attr('transform', function (p) { @@ -512,18 +520,18 @@ nf.Connection = (function () { // create a point for the end endpoints.enter().append('rect') - .call(endpointDrag) - .attr({ - 'class': 'endpoint linepoint', - 'pointer-events': 'all', - 'width': 8, - 'height': 8 - }) - .on('mousedown.selection', function () { - // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); - }) - .call(nf.ContextMenu.activate); + .call(endpointDrag) + .attr({ + 'class': 'endpoint linepoint', + 'pointer-events': 'all', + 'width': 8, + 'height': 8 + }) + .on('mousedown.selection', function () { + // select the connection when clicking the label + nf.Selectable.select(d3.select(this.parentNode)); + }) + .call(nf.ContextMenu.activate); // update the end point endpoints.attr('transform', function (p) { @@ -541,65 +549,65 @@ nf.Connection = (function () { // create a point for the end midpoints.enter().append('rect') - .attr({ - 'class': 'midpoint linepoint', - 'pointer-events': 'all', - 'width': 8, - 'height': 8 - }) - .call(bendPointDrag) - .on('dblclick', function (p) { - // stop even propagation - d3.event.stopPropagation(); + .attr({ + 'class': 'midpoint linepoint', + 'pointer-events': 'all', + 'width': 8, + 'height': 8 + }) + .call(bendPointDrag) + .on('dblclick', function (p) { + // stop even propagation + d3.event.stopPropagation(); - // if this is a self loop prevent removing the last two bends - var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(d); - var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(d); - if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) { - nf.Dialog.showOkDialog({ - dialogContent: 'Looping connections must have at least two bend points.', - overlayBackground: false - }); - return; - } - - var newBends = []; - var bendIndex = -1; - - // create a new array of bends without the selected one - $.each(d.component.bends, function (i, bend) { - if (p.x !== bend.x && p.y !== bend.y) { - newBends.push(bend); - } else { - bendIndex = i; - } + // if this is a self loop prevent removing the last two bends + var sourceComponentId = nf.CanvasUtils.getConnectionSourceComponentId(d); + var destinationComponentId = nf.CanvasUtils.getConnectionDestinationComponentId(d); + if (sourceComponentId === destinationComponentId && d.component.bends.length <= 2) { + nf.Dialog.showOkDialog({ + dialogContent: 'Looping connections must have at least two bend points.', + overlayBackground: false }); + return; + } - if (bendIndex < 0) { - return; + var newBends = []; + var bendIndex = -1; + + // create a new array of bends without the selected one + $.each(d.component.bends, function (i, bend) { + if (p.x !== bend.x && p.y !== bend.y) { + newBends.push(bend); + } else { + bendIndex = i; } + }); - var connection = { - id: d.id, - bends: newBends - }; + if (bendIndex < 0) { + return; + } - // update the label index if necessary - var labelIndex = d.component.labelIndex; - if (newBends.length <= 1) { - connection.labelIndex = 0; - } else if (bendIndex <= labelIndex) { - connection.labelIndex = Math.max(0, labelIndex - 1); - } + var connection = { + id: d.id, + bends: newBends + }; - // save the updated connection - save(d, connection); - }) - .on('mousedown.selection', function () { - // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); - }) - .call(nf.ContextMenu.activate); + // update the label index if necessary + var labelIndex = d.component.labelIndex; + if (newBends.length <= 1) { + connection.labelIndex = 0; + } else if (bendIndex <= labelIndex) { + connection.labelIndex = Math.max(0, labelIndex - 1); + } + + // save the updated connection + save(d, connection); + }) + .on('mousedown.selection', function () { + // select the connection when clicking the label + nf.Selectable.select(d3.select(this.parentNode)); + }) + .call(nf.ContextMenu.activate); // update the midpoints midpoints.attr('transform', function (p) { @@ -622,27 +630,46 @@ nf.Connection = (function () { if (connectionLabelContainer.empty()) { // connection label container connectionLabelContainer = connection.insert('g', 'rect.startpoint') - .attr({ - 'class': 'connection-label-container', - 'pointer-events': 'all' - }) - .on('mousedown.selection', function () { - // select the connection when clicking the label - nf.Selectable.select(d3.select(this.parentNode)); - }) - .call(nf.ContextMenu.activate); + .attr({ + 'class': 'connection-label-container', + 'pointer-events': 'all' + }) + .on('mousedown.selection', function () { + // select the connection when clicking the label + nf.Selectable.select(d3.select(this.parentNode)); + }) + .call(nf.ContextMenu.activate); // connection label connectionLabelContainer.append('rect') - .attr({ - 'class': 'connection-label', - 'width': dimensions.width, - 'x': 0, - 'y': 0 - }); + .attr({ + 'class': 'body', + 'width': dimensions.width, + 'x': 0, + 'y': 0, + 'filter': 'url(#component-drop-shadow)' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // processor border + connectionLabelContainer.append('rect') + .attr({ + 'class': 'border', + 'width': dimensions.width, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); } var labelCount = 0; + var rowHeight = 19; + var backgrounds = []; + var borders = []; if (d.accessPolicy.canRead) { @@ -651,73 +678,93 @@ nf.Connection = (function () { // ----------------------- var connectionFrom = connectionLabelContainer.select('g.connection-from-container'); - + // determine if the connection require a from label if (isGroup(d.component.source)) { // see if the connection from label is already rendered if (connectionFrom.empty()) { connectionFrom = connectionLabelContainer.append('g') - .attr({ - 'class': 'connection-from-container' - }); - + .attr({ + 'class': 'connection-from-container' + }); + + // background + backgrounds.push(connectionFrom.append('rect') + .attr({ + 'class': 'connection-label-background', + 'width': dimensions.width, + 'height': rowHeight + })); + + // border + borders.push(connectionFrom.append('rect') + .attr({ + 'class': 'connection-label-border', + 'width': dimensions.width, + 'height': 1 + })); + connectionFrom.append('text') - .attr({ - 'class': 'connection-stats-label', - 'x': 0, - 'y': 10 - }) - .text('From'); - + .attr({ + 'class': 'stats-label', + 'x': 5, + 'y': 14 + }) + .text('From'); + connectionFrom.append('text') - .attr({ - 'class': 'connection-stats-value connection-from', - 'x': 33, - 'y': 10, - 'width': 130 - }); - - connectionFrom.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'connection-from-run-status', - 'width': 10, - 'height': 10, - 'x': 167, - 'y': 1 - }); + .attr({ + 'class': 'stats-value connection-from', + 'x': 43, + 'y': 14, + 'width': 130 + }); + + connectionFrom.append('text') + .attr({ + 'class': 'connection-from-run-status', + 'x': 185, + 'y': 14 + }); + } else { + backgrounds.push(connectionFrom.select('rect.connection-label-background')); + borders.push(connectionFrom.select('rect.connection-label-border')); } - + // update the connection from positioning connectionFrom.attr('transform', function () { - var y = 5 + (15 * labelCount++); - return 'translate(5, ' + y + ')'; + var y = (rowHeight * labelCount++); + return 'translate(0, ' + y + ')'; }); - + // update the label text connectionFrom.select('text.connection-from') - .each(function () { - var connectionFromLabel = d3.select(this); - - // reset the label name to handle any previous state - connectionFromLabel.text(null).selectAll('title').remove(); - - // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionFromLabel, d.component.source.name); - }).append('title').text(function () { - return d.component.source.name; - }); - - // update the label run status - connectionFrom.select('image.connection-from-run-status').attr('xlink:href', function () { - if (d.component.source.exists === false) { - return 'images/portRemoved.png'; - } else if (d.component.source.running === true) { - return 'images/portRunning.png'; - } else { - return 'images/portStopped.png'; - } + .each(function () { + var connectionFromLabel = d3.select(this); + + // reset the label name to handle any previous state + connectionFromLabel.text(null).selectAll('title').remove(); + + // apply ellipsis to the label as necessary + nf.CanvasUtils.ellipsis(connectionFromLabel, d.component.source.name); + }).append('title').text(function () { + return d.component.source.name; }); + + // update the label run status + connectionFrom.select('text.connection-from-run-status') + .text(function () { + if (d.component.source.exists === false) { + return '\uf071'; + } else if (d.component.source.running === true) { + return '\uf04b'; + } else { + return '\uf04d'; + } + }) + .classed('is-missing-port', function () { + return d.component.source.exists === true; + }); } else { // there is no connection from, but check if the name was previous // rendered so it can be removed @@ -725,79 +772,99 @@ nf.Connection = (function () { connectionFrom.remove(); } } - + // --------------------- // connection label - to // --------------------- - + var connectionTo = connectionLabelContainer.select('g.connection-to-container'); - + // determine if the connection require a to label if (isGroup(d.component.destination)) { // see if the connection to label is already rendered if (connectionTo.empty()) { connectionTo = connectionLabelContainer.append('g') - .attr({ - 'class': 'connection-to-container' - }); - + .attr({ + 'class': 'connection-to-container' + }); + + // background + backgrounds.push(connectionTo.append('rect') + .attr({ + 'class': 'connection-label-background', + 'width': dimensions.width, + 'height': rowHeight + })); + + // border + borders.push(connectionTo.append('rect') + .attr({ + 'class': 'connection-label-border', + 'width': dimensions.width, + 'height': 1 + })); + connectionTo.append('text') - .attr({ - 'class': 'connection-stats-label', - 'x': 0, - 'y': 10 - }) - .text('To'); - + .attr({ + 'class': 'stats-label', + 'x': 5, + 'y': 14 + }) + .text('To'); + connectionTo.append('text') - .attr({ - 'class': 'connection-stats-value connection-to', - 'x': 18, - 'y': 10, - 'width': 145 - }); - - connectionTo.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'connection-to-run-status', - 'width': 10, - 'height': 10, - 'x': 167, - 'y': 1 - }); + .attr({ + 'class': 'stats-value connection-to', + 'x': 25, + 'y': 14, + 'width': 145 + }); + + connectionTo.append('text') + .attr({ + 'class': 'connection-to-run-status', + 'x': 185, + 'y': 14 + }); + } else { + backgrounds.push(connectionTo.select('rect.connection-label-background')); + borders.push(connectionTo.select('rect.connection-label-border')); } - + // update the connection to positioning connectionTo.attr('transform', function () { - var y = 5 + (15 * labelCount++); - return 'translate(5, ' + y + ')'; + var y = (rowHeight * labelCount++); + return 'translate(0, ' + y + ')'; }); - + // update the label text connectionTo.select('text.connection-to') - .each(function (d) { - var connectionToLabel = d3.select(this); - - // reset the label name to handle any previous state - connectionToLabel.text(null).selectAll('title').remove(); - - // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionToLabel, d.component.destination.name); - }).append('title').text(function (d) { - return d.component.destination.name; - }); - - // update the label run status - connectionTo.select('image.connection-to-run-status').attr('xlink:href', function () { - if (d.component.destination.exists === false) { - return 'images/portRemoved.png'; - } else if (d.component.destination.running === true) { - return 'images/portRunning.png'; - } else { - return 'images/portStopped.png'; - } + .each(function (d) { + var connectionToLabel = d3.select(this); + + // reset the label name to handle any previous state + connectionToLabel.text(null).selectAll('title').remove(); + + // apply ellipsis to the label as necessary + nf.CanvasUtils.ellipsis(connectionToLabel, d.component.destination.name); + }).append('title').text(function (d) { + return d.component.destination.name; }); + + // update the label run status + connectionTo.select('text.connection-to-run-status') + .text(function () { + if (d.component.destination.exists === false) { + return '\uf071'; + } else if (d.component.destination.running === true) { + return '\uf04b'; + } else { + return '\uf04d'; + } + }) + .classed('is-missing-port', function () { + return d.component.destination.exists === false; + }); } else { // there is no connection to, but check if the name was previous // rendered so it can be removed @@ -805,60 +872,79 @@ nf.Connection = (function () { connectionTo.remove(); } } - + // ----------------------- // connection label - name // ----------------------- - + // get the connection name var connectionNameValue = nf.CanvasUtils.formatConnectionName(d.component); var connectionName = connectionLabelContainer.select('g.connection-name-container'); - + // is there a name to render if (!nf.Common.isBlank(connectionNameValue)) { // see if the connection name label is already rendered if (connectionName.empty()) { connectionName = connectionLabelContainer.append('g') - .attr({ - 'class': 'connection-name-container' - }); - + .attr({ + 'class': 'connection-name-container' + }); + + // background + backgrounds.push(connectionName.append('rect') + .attr({ + 'class': 'connection-label-background', + 'width': dimensions.width, + 'height': rowHeight + })); + + // border + borders.push(connectionName.append('rect') + .attr({ + 'class': 'connection-label-border', + 'width': dimensions.width, + 'height': 1 + })); + connectionName.append('text') - .attr({ - 'class': 'connection-stats-label', - 'x': 0, - 'y': 10 - }) - .text('Name'); - + .attr({ + 'class': 'stats-label', + 'x': 5, + 'y': 14 + }) + .text('Name'); + connectionName.append('text') - .attr({ - 'class': 'connection-stats-value connection-name', - 'x': 35, - 'y': 10, - 'width': 142 - }); + .attr({ + 'class': 'stats-value connection-name', + 'x': 45, + 'y': 14, + 'width': 142 + }); + } else { + backgrounds.push(connectionName.select('rect.connection-label-background')); + borders.push(connectionName.select('rect.connection-label-border')); } - + // update the connection name positioning connectionName.attr('transform', function () { - var y = 5 + (15 * labelCount++); - return 'translate(5, ' + y + ')'; + var y = (rowHeight * labelCount++); + return 'translate(0, ' + y + ')'; }); - + // update the connection name connectionName.select('text.connection-name') - .each(function () { - var connectionToLabel = d3.select(this); - - // reset the label name to handle any previous state - connectionToLabel.text(null).selectAll('title').remove(); - - // apply ellipsis to the label as necessary - nf.CanvasUtils.ellipsis(connectionToLabel, connectionNameValue); - }).append('title').text(function () { - return connectionNameValue; - }); + .each(function () { + var connectionToLabel = d3.select(this); + + // reset the label name to handle any previous state + connectionToLabel.text(null).selectAll('title').remove(); + + // apply ellipsis to the label as necessary + nf.CanvasUtils.ellipsis(connectionToLabel, connectionNameValue); + }).append('title').text(function () { + return connectionNameValue; + }); } else { // there is no connection name, but check if the name was previous // rendered so it can be removed @@ -876,85 +962,138 @@ nf.Connection = (function () { var queued = connectionLabelContainer.select('g.queued-container'); if (queued.empty()) { queued = connectionLabelContainer.append('g') - .attr({ - 'class': 'queued-container' - }); + .attr({ + 'class': 'queued-container' + }); - queued.append('text') - .attr({ - 'class': 'connection-stats-label', - 'x': 0, - 'y': 10 - }) - .text('Queued'); + // background + backgrounds.push(queued.append('rect') + .attr({ + 'class': 'connection-label-background', + 'width': dimensions.width, + 'height': rowHeight + })); + + // border + borders.push(queued.append('rect') + .attr({ + 'class': 'connection-label-border', + 'width': dimensions.width, + 'height': 1 + })); queued.append('text') .attr({ - 'class': 'connection-stats-value queued', - 'x': 46, - 'y': 10 + 'class': 'stats-label', + 'x': 5, + 'y': 14 + }) + .text('Queued'); + + var queuedText = queued.append('text') + .attr({ + 'class': 'stats-value queued', + 'x': 55, + 'y': 14 }); - + + // queued count + queuedText.append('tspan') + .attr({ + 'class': 'count' + }); + + // queued size + queuedText.append('tspan') + .attr({ + 'class': 'size' + }); + var expiration = queued.append('g') - .attr({ - 'class': 'expiration-icon', - 'transform': 'translate(167, 2)' - }); - + .attr({ + 'class': 'expiration-icon', + 'transform': 'translate(167, 2)' + }); + expiration.append('circle') - .attr({ - 'cx': 5, - 'cy': 5, - 'r': 4.75, - 'stroke-width': 0.5, - 'stroke': '#87888a', - 'fill': 'url(#expiration)' - }); - + .attr({ + 'cx': 5, + 'cy': 5, + 'r': 4.75, + 'stroke-width': 0.5, + 'stroke': '#87888a', + 'fill': 'url(#expiration)' + }); + expiration.append('line') - .attr({ - 'x1': 6, - 'y1': 5, - 'x2': 3, - 'y2': 4, - 'stroke': '#fff', - 'stroke-width': 1 - }); - + .attr({ + 'x1': 6, + 'y1': 5, + 'x2': 3, + 'y2': 4, + 'stroke': '#fff', + 'stroke-width': 1 + }); + expiration.append('line') - .attr({ - 'x1': 6, - 'y1': 5, - 'x2': 3, - 'y2': 7, - 'stroke': '#fff', - 'stroke-width': 1 - }); - + .attr({ + 'x1': 6, + 'y1': 5, + 'x2': 3, + 'y2': 7, + 'stroke': '#fff', + 'stroke-width': 1 + }); + expiration.append('title'); + } else { + backgrounds.push(queued.select('rect.connection-label-background')); + borders.push(queued.select('rect.connection-label-border')); } // update the queued vertical positioning as necessary queued.attr('transform', function () { - var y = 5 + (15 * labelCount++); - return 'translate(5, ' + y + ')'; + var y = (rowHeight * labelCount++); + return 'translate(0, ' + y + ')'; }); // update the height based on the labels being rendered - connectionLabelContainer.select('rect.connection-label') - .attr('height', function () { - return 5 + (15 * labelCount) + 3; - }); - + connectionLabelContainer.select('rect.body') + .attr('height', function () { + return (rowHeight * labelCount); + }); + connectionLabelContainer.select('rect.border') + .attr('height', function () { + return (rowHeight * labelCount); + }); + + // update the coloring of the backgrounds + $.each(backgrounds, function (i, background) { + if (i % 2 === 0) { + background.attr('fill', '#f4f6f7'); + } else { + background.attr('fill', '#ffffff'); + } + }); + + // update the coloring of the label borders + $.each(borders, function (i, border) { + if (i > 0) { + border.attr('fill', '#c7d2d7'); + } else { + border.attr('fill', 'transparent'); + } + }); + if (d.accessPolicy.canRead) { // determine whether or not to show the expiration icon connectionLabelContainer.select('g.expiration-icon') - .classed('hidden', function () { - return !isExpirationConfigured(d.component); - }) - .select('title').text(function () { - return 'Expires FlowFiles older than ' + d.component.flowFileExpiration; - }); + .classed('hidden', function () { + return !isExpirationConfigured(d.component); + }) + .select('title').text(function () { + return 'Expires FlowFiles older than ' + d.component.flowFileExpiration; + }); } if (d.accessPolicy.canWrite) { @@ -973,17 +1112,17 @@ nf.Connection = (function () { // update the position of the label if possible connection.select('g.connection-label-container') - .attr('transform', function () { - var label = d3.select(this).select('rect.connection-label'); - var position = getLabelPosition(label); - return 'translate(' + position.x + ', ' + position.y + ')'; - }); + .attr('transform', function () { + var label = d3.select(this).select('rect.body'); + var position = getLabelPosition(label); + return 'translate(' + position.x + ', ' + position.y + ')'; + }); }); }; /** * Updates the stats of the connections in the specified selection. - * + * * @param {selection} updated The selected connections to update */ var updateConnectionStatus = function (updated) { @@ -991,20 +1130,31 @@ nf.Connection = (function () { return; } - updated.select('text.queued') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.queued; - } else { - return '- / -'; - } - }); + // queued count value + updated.select('text.queued tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.queued, ' '); + } else { + return '-'; + } + }); + + // queued size value + updated.select('text.queued tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.queued, ' '); + } else { + return ' (-)'; + } + }); }; /** * Saves the connection entry specified by d with the new configuration specified * in connection. - * + * * @param {type} d * @param {type} connection */ @@ -1046,7 +1196,7 @@ nf.Connection = (function () { removed.each(function (d) { nf.CanvasUtils.reloadConnectionSourceAndDestination(d.sourceId, d.destinationId); }); - + // remove the connection removed.remove(); }; @@ -1056,323 +1206,321 @@ nf.Connection = (function () { selfLoopXOffset: (dimensions.width / 2) + 5, selfLoopYOffset: 25 }, - + init: function () { connectionMap = d3.map(); // create the connection container connectionContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'stroke', - 'class': 'connections' - }); + .attr({ + 'pointer-events': 'stroke', + 'class': 'connections' + }); // define the line generator lineGenerator = d3.svg.line() - .x(function (d) { - return d.x; - }) - .y(function (d) { - return d.y; - }) - .interpolate('linear'); + .x(function (d) { + return d.x; + }) + .y(function (d) { + return d.y; + }) + .interpolate('linear'); // handle bend point drag events bendPointDrag = d3.behavior.drag() - .on('dragstart', function () { - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }) - .on('drag', function (d) { - d.x = d3.event.x; - d.y = d3.event.y; + .on('dragstart', function () { + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }) + .on('drag', function (d) { + d.x = d3.event.x; + d.y = d3.event.y; - // redraw this connection - d3.select(this.parentNode).call(updateConnections, true, false); - }) - .on('dragend', function () { - var connection = d3.select(this.parentNode); - var connectionData = connection.datum(); - var bends = connection.selectAll('rect.midpoint').data(); + // redraw this connection + d3.select(this.parentNode).call(updateConnections, true, false); + }) + .on('dragend', function () { + var connection = d3.select(this.parentNode); + var connectionData = connection.datum(); + var bends = connection.selectAll('rect.midpoint').data(); - // ensure the bend lengths are the same - if (bends.length === connectionData.component.bends.length) { - // determine if the bend points have moved - var different = false; - for (var i = 0; i < bends.length && !different; i++) { - if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) { - different = true; - } - } - - // only save the updated bends if necessary - if (different) { - save(connectionData, { - id: connectionData.id, - bends: bends - }).fail(function () { - // restore the previous bend points - connectionData.bends = $.map(connectionData.component.bends, function (bend) { - return { - x: bend.x, - y: bend.y - }; - }); - - // refresh the connection - connection.call(updateConnections, true, false); - }); + // ensure the bend lengths are the same + if (bends.length === connectionData.component.bends.length) { + // determine if the bend points have moved + var different = false; + for (var i = 0; i < bends.length && !different; i++) { + if (bends[i].x !== connectionData.component.bends[i].x || bends[i].y !== connectionData.component.bends[i].y) { + different = true; } } - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }); + // only save the updated bends if necessary + if (different) { + save(connectionData, { + id: connectionData.id, + bends: bends + }).fail(function () { + // restore the previous bend points + connectionData.bends = $.map(connectionData.component.bends, function (bend) { + return { + x: bend.x, + y: bend.y + }; + }); + + // refresh the connection + connection.call(updateConnections, true, false); + }); + } + } + + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }); // handle endpoint drag events endpointDrag = d3.behavior.drag() - .on('dragstart', function (d) { - // indicate that dragging has begun - d.dragging = true; + .on('dragstart', function (d) { + // indicate that dragging has begun + d.dragging = true; - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }) - .on('drag', function (d) { - d.x = d3.event.x - 8; - d.y = d3.event.y - 8; + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }) + .on('drag', function (d) { + d.x = d3.event.x - 8; + d.y = d3.event.y - 8; - // ensure the new destination is valid - d3.select('g.hover').classed('connectable-destination', function () { - return nf.CanvasUtils.isValidConnectionDestination(d3.select(this)); - }); + // ensure the new destination is valid + d3.select('g.hover').classed('connectable-destination', function () { + return nf.CanvasUtils.isValidConnectionDestination(d3.select(this)); + }); - // redraw this connection - d3.select(this.parentNode).call(updateConnections, true, false); - }) - .on('dragend', function (d) { - // indicate that dragging as stopped - d.dragging = false; + // redraw this connection + d3.select(this.parentNode).call(updateConnections, true, false); + }) + .on('dragend', function (d) { + // indicate that dragging as stopped + d.dragging = false; - // get the corresponding connection - var connection = d3.select(this.parentNode); - var connectionData = connection.datum(); - var previousDestinationId = connectionData.component.destination.id; + // get the corresponding connection + var connection = d3.select(this.parentNode); + var connectionData = connection.datum(); + var previousDestinationId = connectionData.component.destination.id; - // attempt to select a new destination - var destination = d3.select('g.connectable-destination'); + // attempt to select a new destination + var destination = d3.select('g.connectable-destination'); - // resets the connection if we're not over a new destination - if (destination.empty()) { - connection.call(updateConnections, true, false); + // resets the connection if we're not over a new destination + if (destination.empty()) { + connection.call(updateConnections, true, false); + } else { + // prompt for the new port if appropriate + if (nf.CanvasUtils.isProcessGroup(destination) || nf.CanvasUtils.isRemoteProcessGroup(destination)) { + // user will select new port and updated connect details will be set accordingly + nf.ConnectionConfiguration.showConfiguration(connection, destination).done(function () { + // reload the previous destination + nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); + }).fail(function () { + // reset the connection + connection.call(updateConnections, true, false); + }); } else { - // prompt for the new port if appropriate - if (nf.CanvasUtils.isProcessGroup(destination) || nf.CanvasUtils.isRemoteProcessGroup(destination)) { - // user will select new port and updated connect details will be set accordingly - nf.ConnectionConfiguration.showConfiguration(connection, destination).done(function () { - // reload the previous destination - nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); - }).fail(function () { - // reset the connection - connection.call(updateConnections, true, false); - }); - } else { - // get the destination details - var destinationData = destination.datum(); - var destinationType = nf.CanvasUtils.getConnectableTypeForDestination(destination); + // get the destination details + var destinationData = destination.datum(); + var destinationType = nf.CanvasUtils.getConnectableTypeForDestination(destination); - var connectionEntity = { - 'revision': nf.Client.getRevision(), - 'component': { - 'id': connectionData.id, - 'destination': { - 'id': destinationData.id, - 'groupId': nf.Canvas.getGroupId(), - 'type': destinationType - } + var connectionEntity = { + 'revision': nf.Client.getRevision(), + 'component': { + 'id': connectionData.id, + 'destination': { + 'id': destinationData.id, + 'groupId': nf.Canvas.getGroupId(), + 'type': destinationType } - }; - - // if this is a self loop and there are less than 2 bends, add them - if (connectionData.bends.length < 2 && connectionData.component.source.id === destinationData.id) { - var rightCenter = { - x: destinationData.position.x + (destinationData.dimensions.width), - y: destinationData.position.y + (destinationData.dimensions.height / 2) - }; - var xOffset = nf.Connection.config.selfLoopXOffset; - var yOffset = nf.Connection.config.selfLoopYOffset; - - connectionEntity.connection.bends = []; - connectionEntity.connection.bends.push({ - 'x': (rightCenter.x + xOffset), - 'y': (rightCenter.y - yOffset) - }); - connectionEntity.connection.bends.push({ - 'x': (rightCenter.x + xOffset), - 'y': (rightCenter.y + yOffset) - }); } + }; - $.ajax({ - type: 'PUT', - url: connectionData.component.uri, - data: JSON.stringify(connectionEntity), - dataType: 'json', - contentType: 'application/json' - }).done(function (response) { - var updatedConnectionData = response.component; + // if this is a self loop and there are less than 2 bends, add them + if (connectionData.bends.length < 2 && connectionData.component.source.id === destinationData.id) { + var rightCenter = { + x: destinationData.position.x + (destinationData.dimensions.width), + y: destinationData.position.y + (destinationData.dimensions.height / 2) + }; + var xOffset = nf.Connection.config.selfLoopXOffset; + var yOffset = nf.Connection.config.selfLoopYOffset; - // update the revision - nf.Client.setRevision(response.revision); - - // refresh to update the label - nf.Connection.set(response); - - // reload the previous destination and the new source/destination - nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); - nf.CanvasUtils.reloadConnectionSourceAndDestination(updatedConnectionData.source.id, updatedConnectionData.destination.id); - }).fail(function (xhr, status, error) { - if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { - nf.Dialog.showOkDialog({ - dialogContent: nf.Common.escapeHtml(xhr.responseText), - overlayBackground: true - }); - - // reset the connection - connection.call(updateConnections, true, false); - } else { - nf.Common.handleAjaxError(xhr, status, error); - } + connectionEntity.connection.bends = []; + connectionEntity.connection.bends.push({ + 'x': (rightCenter.x + xOffset), + 'y': (rightCenter.y - yOffset) + }); + connectionEntity.connection.bends.push({ + 'x': (rightCenter.x + xOffset), + 'y': (rightCenter.y + yOffset) }); } - } - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }); + $.ajax({ + type: 'PUT', + url: connectionData.component.uri, + data: JSON.stringify(connectionEntity), + dataType: 'json', + contentType: 'application/json' + }).done(function (response) { + var updatedConnectionData = response.component; + + // update the revision + nf.Client.setRevision(response.revision); + + // refresh to update the label + nf.Connection.set(response); + + // reload the previous destination and the new source/destination + nf.CanvasUtils.reloadConnectionSourceAndDestination(null, previousDestinationId); + nf.CanvasUtils.reloadConnectionSourceAndDestination(updatedConnectionData.source.id, updatedConnectionData.destination.id); + }).fail(function (xhr, status, error) { + if (xhr.status === 400 || xhr.status === 404 || xhr.status === 409) { + nf.Dialog.showOkDialog({ + dialogContent: nf.Common.escapeHtml(xhr.responseText), + overlayBackground: true + }); + + // reset the connection + connection.call(updateConnections, true, false); + } else { + nf.Common.handleAjaxError(xhr, status, error); + } + }); + } + } + + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }); // label drag behavior labelDrag = d3.behavior.drag() - .on('dragstart', function (d) { - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }) - .on('drag', function (d) { - if (d.bends.length > 1) { - // get the dragged component - var drag = d3.select('rect.label-drag'); + .on('dragstart', function (d) { + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }) + .on('drag', function (d) { + if (d.bends.length > 1) { + // get the dragged component + var drag = d3.select('rect.label-drag'); - // lazily create the drag selection box - if (drag.empty()) { - var connectionLabel = d3.select(this).select('rect.connection-label'); + // lazily create the drag selection box + if (drag.empty()) { + var connectionLabel = d3.select(this).select('rect.body'); - var position = getLabelPosition(connectionLabel); - var width = dimensions.width; - var height = connectionLabel.attr('height'); + var position = getLabelPosition(connectionLabel); + var width = dimensions.width; + var height = connectionLabel.attr('height'); - // create a selection box for the move - drag = d3.select('#canvas').append('rect') - .attr('rx', 6) - .attr('ry', 6) - .attr('x', position.x) - .attr('y', position.y) - .attr('class', 'label-drag') - .attr('width', width) - .attr('height', height) - .attr('stroke-width', function () { - return 1 / nf.Canvas.View.scale(); - }) - .attr('stroke-dasharray', function () { - return 4 / nf.Canvas.View.scale(); - }) - .datum({ - x: position.x, - y: position.y, - width: width, - height: height - }); - } else { - // update the position of the drag selection - drag.attr('x', function (d) { + // create a selection box for the move + drag = d3.select('#canvas').append('rect') + .attr('x', position.x) + .attr('y', position.y) + .attr('class', 'label-drag') + .attr('width', width) + .attr('height', height) + .attr('stroke-width', function () { + return 1 / nf.Canvas.View.scale(); + }) + .attr('stroke-dasharray', function () { + return 4 / nf.Canvas.View.scale(); + }) + .datum({ + x: position.x, + y: position.y, + width: width, + height: height + }); + } else { + // update the position of the drag selection + drag.attr('x', function (d) { d.x += d3.event.dx; return d.x; }) - .attr('y', function (d) { - d.y += d3.event.dy; - return d.y; - }); - } + .attr('y', function (d) { + d.y += d3.event.dy; + return d.y; + }); + } - // calculate the current point - var datum = drag.datum(); - var currentPoint = { - x: datum.x + (datum.width / 2), - y: datum.y + (datum.height / 2) + // calculate the current point + var datum = drag.datum(); + var currentPoint = { + x: datum.x + (datum.width / 2), + y: datum.y + (datum.height / 2) + }; + + var closestBendIndex = -1; + var minDistance; + $.each(d.bends, function (i, bend) { + var bendPoint = { + 'x': bend.x, + 'y': bend.y }; - var closestBendIndex = -1; - var minDistance; - $.each(d.bends, function (i, bend) { - var bendPoint = { - 'x': bend.x, - 'y': bend.y - }; + // get the distance + var distance = distanceBetweenPoints(currentPoint, bendPoint); - // get the distance - var distance = distanceBetweenPoints(currentPoint, bendPoint); + // see if its the minimum + if (closestBendIndex === -1 || distance < minDistance) { + closestBendIndex = i; + minDistance = distance; + } + }); - // see if its the minimum - if (closestBendIndex === -1 || distance < minDistance) { - closestBendIndex = i; - minDistance = distance; - } + // record the closest bend + d.labelIndex = closestBendIndex; + + // refresh the connection + d3.select(this.parentNode).call(updateConnections, true, false); + } + }) + .on('dragend', function (d) { + if (d.bends.length > 1) { + // get the drag selection + var drag = d3.select('rect.label-drag'); + + // ensure we found a drag selection + if (!drag.empty()) { + // remove the drag selection + drag.remove(); + } + + // only save if necessary + if (d.labelIndex !== d.component.labelIndex) { + // get the connection to refresh below + var connection = d3.select(this.parentNode); + + // save the new label index + save(d, { + id: d.id, + labelIndex: d.labelIndex + }).fail(function () { + // restore the previous label index + d.labelIndex = d.component.labelIndex; + + // refresh the connection + connection.call(updateConnections, true, false); }); - - // record the closest bend - d.labelIndex = closestBendIndex; - - // refresh the connection - d3.select(this.parentNode).call(updateConnections, true, false); } - }) - .on('dragend', function (d) { - if (d.bends.length > 1) { - // get the drag selection - var drag = d3.select('rect.label-drag'); + } - // ensure we found a drag selection - if (!drag.empty()) { - // remove the drag selection - drag.remove(); - } - - // only save if necessary - if (d.labelIndex !== d.component.labelIndex) { - // get the connection to refresh below - var connection = d3.select(this.parentNode); - - // save the new label index - save(d, { - id: d.id, - labelIndex: d.labelIndex - }).fail(function () { - // restore the previous label index - d.labelIndex = d.component.labelIndex; - - // refresh the connection - connection.call(updateConnections, true, false); - }); - } - } - - // stop further propagation - d3.event.sourceEvent.stopPropagation(); - }); + // stop further propagation + d3.event.sourceEvent.stopPropagation(); + }); }, - + /** * Populates the graph with the specified connections. - * + * * @argument {object | array} connectionEntities The connections to add * @argument {boolean} selectAll Whether or not to select the new contents */ @@ -1398,17 +1546,17 @@ nf.Connection = (function () { // apply the selection and handle all new connection select().enter().call(renderConnections, selectAll); }, - + /** * Reorders the connections based on their current z index. */ reorder: function () { d3.selectAll('g.connection').call(sort); }, - + /** * Sets the value of the specified connection. - * + * * @param {type} connectionEntities */ set: function (connectionEntities) { @@ -1432,10 +1580,10 @@ nf.Connection = (function () { set(connectionEntities); } }, - + /** * Sets the connection status using the specified status. - * + * * @param {array} connectionStatus */ setStatus: function (connectionStatus) { @@ -1454,10 +1602,10 @@ nf.Connection = (function () { // update the visible connections d3.selectAll('g.connection.visible').call(updateConnectionStatus); }, - + /** * Refreshes the connection in the UI. - * + * * @param {string} connectionId */ refresh: function (connectionId) { @@ -1467,17 +1615,17 @@ nf.Connection = (function () { d3.selectAll('g.connection').call(updateConnections, true, true); } }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.connection.entering, g.connection.leaving').call(updateConnections, false, true); }, - + /** * Removes the specified connection. - * + * * @param {array|string} connections The connection id */ remove: function (connections) { @@ -1492,17 +1640,17 @@ nf.Connection = (function () { // apply the selection and handle all removed connections select().exit().call(removeConnections); }, - + /** * Removes all processors. */ removeAll: function () { nf.Connection.remove(connectionMap.keys()); }, - + /** * Reloads the connection state from the server and refreshes the UI. - * + * * @param {object} connection The connection to reload */ reload: function (connection) { @@ -1516,10 +1664,10 @@ nf.Connection = (function () { }); } }, - + /** * Gets the connection that have a source or destination component with the specified id. - * + * * @param {string} id component id * @returns {Array} components connections */ @@ -1533,11 +1681,11 @@ nf.Connection = (function () { }); return connections; }, - + /** * If the connection id is specified it is returned. If no connection id * specified, all connections are returned. - * + * * @param {string} id */ get: function (id) { diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js index d0422861cd..418d03fa1e 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-funnel.js @@ -20,8 +20,8 @@ nf.Funnel = (function () { var dimensions = { - width: 61, - height: 61 + width: 48, + height: 48 }; // ----------------------------- @@ -51,7 +51,7 @@ nf.Funnel = (function () { /** * Renders the funnels in the specified selection. - * + * * @param {selection} entered The selection of funnels to be rendered * @param {boolean} selected Whether the element should be selected */ @@ -61,40 +61,60 @@ nf.Funnel = (function () { } var funnel = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'funnel component' - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'funnel component' + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // funnel border funnel.append('rect') - .attr({ - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 1 - }); + .attr({ + 'rx': 2, + 'ry': 2, + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }).classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); - // processor icon - funnel.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconFunnel.png', - 'width': 41, - 'height': 41, - 'x': 10, - 'y': 10 - }); + // funnel body + funnel.append('rect') + .attr({ + 'rx': 2, + 'ry': 2, + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // funnel icon + funnel.append('text') + .attr({ + 'class': 'funnel-icon', + 'x': 9, + 'y': 34 + }) + .text('\ue803'); // always support selection funnel.call(nf.Selectable.activate).call(nf.ContextMenu.activate); @@ -109,7 +129,7 @@ nf.Funnel = (function () { /** * Updates the funnels in the specified selection. - * + * * @param {selection} updated The funnels to be updated */ var updateFunnels = function (updated) { @@ -117,7 +137,7 @@ nf.Funnel = (function () { /** * Removes the funnels in the specified selection. - * + * * @param {selection} removed The funnels to be removed */ var removeFunnels = function (removed) { @@ -133,15 +153,15 @@ nf.Funnel = (function () { // create the funnel container funnelContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'funnels' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'funnels' + }); }, - + /** * Populates the graph with the specified funnels. - * + * * @argument {object | array} funnelEntities The funnels to add * @argument {boolean} selectAll Whether or not to select the new contents */ @@ -168,11 +188,11 @@ nf.Funnel = (function () { // apply the selection and handle all new processors select().enter().call(renderFunnels, selectAll); }, - + /** * If the funnel id is specified it is returned. If no funnel id * specified, all funnels are returned. - * + * * @param {string} id */ get: function (id) { @@ -182,11 +202,11 @@ nf.Funnel = (function () { return funnelMap.get(id); } }, - + /** - * If the funnel id is specified it is refresh according to the current + * If the funnel id is specified it is refresh according to the current * state. If not funnel id is specified, all funnels are refreshed. - * + * * @param {string} id Optional */ refresh: function (id) { @@ -196,11 +216,11 @@ nf.Funnel = (function () { d3.selectAll('g.funnel').call(updateFunnels); } }, - + /** * Reloads the funnel state from the server and refreshes the UI. * If the funnel is currently unknown, this function just returns. - * + * * @param {object} funnel The funnel to reload */ reload: function (funnel) { @@ -214,21 +234,21 @@ nf.Funnel = (function () { }); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** - * Sets the specified funnel(s). If the is an array, it - * will set each funnel. If it is not an array, it will + * Sets the specified funnel(s). If the is an array, it + * will set each funnel. If it is not an array, it will * attempt to set the specified funnel. - * + * * @param {object | array} funnelEntities */ set: function (funnelEntities) { @@ -237,7 +257,7 @@ nf.Funnel = (function () { // update the current entry var funnelEntry = funnelMap.get(funnelEntity.id); $.extend(funnelEntry, funnelEntity); - + // update the connection in the UI d3.select('#id-' + funnelEntity.id).call(updateFunnels); } @@ -255,7 +275,7 @@ nf.Funnel = (function () { /** * Removes the specified funnel. - * + * * @param {array|string} funnels The funnel id */ remove: function (funnels) { @@ -270,7 +290,7 @@ nf.Funnel = (function () { // apply the selection and handle all removed funnels select().exit().call(removeFunnels); }, - + /** * Removes all processors. */ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js index 809b90520f..bb58ff97dc 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-label.js @@ -53,7 +53,9 @@ nf.Label = (function () { * Selects the labels elements against the current label map. */ var select = function () { - return labelContainer.selectAll('g.label').data(labelMap.values()); + return labelContainer.selectAll('g.label').data(labelMap.values(), function (d) { + return d.id; + }); }; /** @@ -126,21 +128,6 @@ nf.Label = (function () { return; } - // reset the colors - var colors = d3.set(); - colors.add(nf.Common.substringAfterLast(nf.Label.defaultColor(), '#')); - - // determine all unique colors - labelMap.forEach(function (id, d) { - if (d.accessPolicy.canRead) { - var color = d.component.style['background-color']; - if (nf.Common.isDefinedAndNotNull(color)) { - colors.add(nf.Common.substringAfterLast(color, '#')); - } - } - }); - nf.Canvas.defineLabelColors(colors.values()); - // update the border using the configured color updated.select('rect.border') .attr({ @@ -177,10 +164,7 @@ nf.Label = (function () { } } - // get just the color code part - color = nf.Common.substringAfterLast(color, '#'); - - return 'url(#label-background-' + color + ')'; + return color; }, 'width': function (d) { return d.dimensions.width; diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js index 74c7a77bc1..ba8060adb7 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-port.js @@ -20,15 +20,15 @@ nf.Port = (function () { var PREVIEW_NAME_LENGTH = 15; - var OFFSET_VALUE = 12; + var OFFSET_VALUE = 25; var portDimensions = { - width: 160, - height: 40 + width: 240, + height: 50 }; var remotePortDimensions = { - width: 160, - height: 56 + width: 240, + height: 75 }; // ---------------------------- @@ -51,7 +51,9 @@ nf.Port = (function () { * Selects the port elements against the current port map. */ var select = function () { - return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values()); + return portContainer.selectAll('g.input-port, g.output-port').data(portMap.values(), function (d) { + return d.id; + }); }; /** @@ -66,36 +68,54 @@ nf.Port = (function () { } var port = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': function (d) { - if (d.portType === 'INPUT_PORT') { - return 'input-port component'; - } else { - return 'output-port component'; - } + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': function (d) { + if (d.portType === 'INPUT_PORT') { + return 'input-port component'; + } else { + return 'output-port component'; } - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + } + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // port border port.append('rect') - .attr({ - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 1, - 'stroke': '#aaaaaa' - }); + .attr({ + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // port body + port.append('rect') + .attr({ + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); var offset = 0; @@ -105,84 +125,47 @@ nf.Port = (function () { // port remote banner port.append('rect') - .attr({ - 'class': 'remote-banner', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': offset, - 'fill': '#294c58', - 'fill-opacity': 0.95 - }); - } - - // port body - port.append('rect') .attr({ - 'x': 0, - 'y': offset, - 'class': 'port-body', + 'class': 'remote-banner', 'width': function (d) { return d.dimensions.width; }, - 'height': function (d) { - return d.dimensions.height - offset; - }, - 'fill': 'url(#port-background)', - 'fill-opacity': 0.8, - 'stroke-opacity': 0.8, - 'stroke-width': 0, - 'stroke': '#aaaaaa' + 'height': offset, + 'fill': '#e3e8eb' }); + } // port icon - port.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': function (d) { - if (d.portTtype === 'INPUT_PORT') { - return 'images/iconInputPort.png'; - } else { - return 'images/iconOutputPort.png'; - } - }, - 'width': 46, - 'height': 31, - 'x': function (d) { - if (d.portType === 'INPUT_PORT') { - return 0; - } else { - return 114; - } - }, - 'y': 5 + offset - }); + port.append('text') + .attr({ + 'class': 'port-icon', + 'x': 10, + 'y': 38 + offset + }) + .text(function (d) { + if (d.portType === 'INPUT_PORT') { + return '\ue832'; + } else { + return '\ue833'; + } + }); // port name port.append('text') - .attr({ - 'x': function (d) { - if (d.portType === 'INPUT_PORT') { - return 52; - } else { - return 5; - } - }, - 'y': 18 + offset, - 'width': 95, - 'height': 30, - 'font-size': '10px', - 'font-weight': 'bold', - 'fill': '#294c58', - 'class': 'port-name' - }); + .attr({ + 'x': 70, + 'y': 25 + offset, + 'width': 95, + 'height': 30, + 'class': 'port-name' + }); // make ports selectable port.call(nf.Selectable.activate).call(nf.ContextMenu.activate); // only activate dragging and connecting if appropriate port.filter(function (d) { - return d.accessPolicy.canWrite && d.accessPolicy.canRead; + return d.accessPolicy.canWrite && d.accessPolicy.canRead; }).call(nf.Draggable.activate).call(nf.Connectable.activate); // call update to trigger some rendering @@ -213,132 +196,85 @@ nf.Port = (function () { offset = OFFSET_VALUE; // port transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'port-transmission-icon', - 'width': 10, - 'height': 10, - 'x': 3, - 'y': 1 - }); + details.append('text') + .attr({ + 'class': 'port-transmission-icon', + 'x': 10, + 'y': 15 + }); + + // bulletin background + details.append('rect') + .attr({ + 'class': 'bulletin-background', + 'x': function (d) { + return portData.dimensions.width - offset; + }, + 'width': offset, + 'height': offset + }); // bulletin icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'bulletin-icon', - 'xlink:href': 'images/iconBulletin.png', - 'width': 12, - 'height': 12, - 'x': 147, - 'y': 0 - }); + details.append('text') + .attr({ + 'class': 'bulletin-icon', + 'x': function (d) { + return portData.dimensions.width - 18; + }, + 'y': 18 + }) + .text('\uf24a'); } // run status icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'port-run-status-icon', - 'width': 16, - 'height': 16, - 'x': function (d) { - if (d.portType === 'INPUT_PORT') { - return 33; - } else { - return 107; - } - }, - 'y': function () { - return 24 + offset; - } - }); - - // active thread count - details.append('rect') - .attr({ - 'class': 'active-thread-count-background', - 'height': 11, - 'y': 0, - 'fill': '#fff', - 'fill-opacity': '0.65', - 'stroke': '#aaa', - 'stroke-width': '1' - }); - - // active thread bacground details.append('text') - .attr({ - 'class': 'active-thread-count', - 'height': 11, - 'y': 9, - 'fill': '#000' - }); + .attr({ + 'class': 'run-status-icon', + 'x': 50, + 'y': function () { + return 25 + offset; + } + }); + + // ------------------- + // active thread count + // ------------------- + + // active thread count + details.append('text') + .attr({ + 'class': 'active-thread-count-icon', + 'y': 68 + }) + .text('\ue83f'); + + // active thread icon + details.append('text') + .attr({ + 'class': 'active-thread-count', + 'y': 68 + }); } if (portData.accessPolicy.canRead) { - // update the run status - details.select('image.port-run-status-icon') - .attr('xlink:href', function (d) { - var img = ''; - if (d.component.state === 'DISABLED') { - img = 'images/iconDisable.png'; - } else if (!nf.Common.isEmpty(d.component.validationErrors)) { - img = 'images/iconAlert.png'; - } else if (d.component.state === 'RUNNING') { - img = 'images/iconRun.png'; - } else if (d.component.state === 'STOPPED') { - img = 'images/iconStop.png'; - } - return img; - }) - .each(function (d) { - // remove the existing tip if necessary - var tip = d3.select('#run-status-tip-' + d.id); - if (!tip.empty()) { - tip.remove(); - } - - // if there are validation errors generate a tooltip - if (!nf.Common.isEmpty(d.component.validationErrors)) { - tip = d3.select('#port-tooltips').append('div') - .attr('id', function () { - return 'run-status-tip-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .html(function () { - var list = nf.Common.formatUnorderedList(d.component.validationErrors); - if (list === null || list.length === 0) { - return ''; - } else { - return $('
').append(list).html(); - } - }); - - // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); - } - }); - // update the port name port.select('text.port-name') - .each(function (d) { - var portName = d3.select(this); - var name = d.component.name; - var words = name.split(/\s+/); + .each(function (d) { + var portName = d3.select(this); + var name = d.component.name; + var words = name.split(/\s+/); - // reset the port name to handle any previous state - portName.text(null).selectAll('tspan, title').remove(); + // reset the port name to handle any previous state + portName.text(null).selectAll('tspan, title').remove(); - // handle based on the number of tokens in the port name - if (words.length === 1) { - // apply ellipsis to the port name as necessary - nf.CanvasUtils.ellipsis(portName, name); - } else { - nf.CanvasUtils.multilineEllipsis(portName, 2, name); - } - }).append('title').text(function (d) { + // handle based on the number of tokens in the port name + if (words.length === 1) { + // apply ellipsis to the port name as necessary + nf.CanvasUtils.ellipsis(portName, name); + } else { + nf.CanvasUtils.multilineEllipsis(portName, 2, name); + } + }).append('title').text(function (d) { return d.component.name; }); } @@ -349,14 +285,14 @@ nf.Port = (function () { if (portData.accessPolicy.canRead) { // update the port name port.select('text.port-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }); } // remove tooltips if necessary @@ -372,7 +308,7 @@ nf.Port = (function () { /** * Updates the port status. - * + * * @param {selection} updated The ports to be updated */ var updatePortStatus = function (updated) { @@ -380,14 +316,82 @@ nf.Port = (function () { return; } - updated.select('image.port-transmission-icon') - .attr('xlink:href', function (d) { - if (d.status.transmitting === true) { - return 'images/iconPortTransmitting.png'; - } else { - return 'images/iconPortNotTransmitting.png'; + // update the run status + updated.select('text.run-status-icon') + .attr({ + 'fill': function (d) { + var fill = '#728e9b'; + if (d.status.runStatus === 'Invalid') { + fill = '#ba554a'; } - }); + return fill; + }, + 'font-family': function (d) { + var family = 'FontAwesome'; + if (d.status.runStatus === 'Disabled') { + family = 'flowfont'; + } + return family; + } + }) + .text(function (d) { + var img = ''; + if (d.status.runStatus === 'Disabled') { + img = '\ue802'; + } else if (d.status.runStatus === 'Invalid') { + img = '\uf071'; + } else if (d.status.runStatus === 'Running') { + img = '\uf04b'; + } else if (d.status.runStatus === 'Stopped') { + img = '\uf04d'; + } + return img; + }) + .each(function (d) { + // remove the existing tip if necessary + var tip = d3.select('#run-status-tip-' + d.id); + if (!tip.empty()) { + tip.remove(); + } + + // if there are validation errors generate a tooltip + if (d.accessPolicy.canRead && !nf.Common.isEmpty(d.component.validationErrors)) { + tip = d3.select('#port-tooltips').append('div') + .attr('id', function () { + return 'run-status-tip-' + d.id; + }) + .attr('class', 'tooltip nifi-tooltip') + .html(function () { + var list = nf.Common.formatUnorderedList(d.component.validationErrors); + if (list === null || list.length === 0) { + return ''; + } else { + return $('
').append(list).html(); + } + }); + + // add the tooltip + nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + } + }); + + updated.select('text.port-transmission-icon') + .attr({ + 'font-family': function (d) { + if (d.status.transmitting === true) { + return 'FontAwesome'; + } else { + return 'flowfont'; + } + } + }) + .text(function (d) { + if (d.status.transmitting === true) { + return '\uf140'; + } else { + return '\ue80a'; + } + }); updated.each(function (d) { var port = d3.select(this); @@ -405,6 +409,10 @@ nf.Port = (function () { // bulletins // --------- + port.select('rect.bulletin-background').classed('has-bulletins', function () { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins); + }); + nf.CanvasUtils.bulletins(port, d, function () { return d3.select('#port-tooltips'); }, offset); @@ -426,7 +434,7 @@ nf.Port = (function () { /** * Removes the tooltips for the ports in the specified selection. - * + * * @param {selection} removed */ var removeTooltips = function (removed) { @@ -446,12 +454,12 @@ nf.Port = (function () { // create the port container portContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'ports' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'ports' + }); }, - + /** * Populates the graph with the specified ports. * @@ -490,7 +498,7 @@ nf.Port = (function () { // apply the selection and handle all new ports select().enter().call(renderPorts, selectAll); }, - + /** * If the port id is specified it is returned. If no port id * specified, all ports are returned. @@ -504,7 +512,7 @@ nf.Port = (function () { return portMap.get(id); } }, - + /** * If the port id is specified it is refresh according to the current * state. If not port id is specified, all ports are refreshed. @@ -518,14 +526,14 @@ nf.Port = (function () { d3.selectAll('g.input-port, g.output-port').call(updatePorts); } }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.input-port.entering, g.output-port.entering, g.input-port.leaving, g.output-port.leaving').call(updatePorts); }, - + /** * Reloads the port state from the server and refreshes the UI. * If the port is currently unknown, this function just returns. @@ -547,16 +555,16 @@ nf.Port = (function () { }); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** * Sets the specified port(s). If the is an array, it * will set each port. If it is not an array, it will @@ -585,10 +593,10 @@ nf.Port = (function () { set(portEntities); } }, - + /** * Sets the port status using the specified status. - * + * * @param {array} portStatus Port status */ setStatus: function (portStatus) { @@ -625,7 +633,7 @@ nf.Port = (function () { // apply the selection and handle all removed ports select().exit().call(removePorts); }, - + /** * Removes all ports.. */ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js index 5af7a45389..4a2da5ed31 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-process-group.js @@ -22,8 +22,8 @@ nf.ProcessGroup = (function () { var PREVIEW_NAME_LENGTH = 30; var dimensions = { - width: 365, - height: 142 + width: 380, + height: 172 }; // ---------------------------- @@ -44,8 +44,8 @@ nf.ProcessGroup = (function () { /** * Gets the process group comments. - * - * @param {object} d + * + * @param {object} d */ var getProcessGroupComments = function (d) { if (nf.Common.isBlank(d.component.comments)) { @@ -59,7 +59,9 @@ nf.ProcessGroup = (function () { * Selects the process group elements against the current process group map. */ var select = function () { - return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values()); + return processGroupContainer.selectAll('g.process-group').data(processGroupMap.values(), function (d) { + return d.id; + }); }; /** @@ -74,14 +76,14 @@ nf.ProcessGroup = (function () { } var processGroup = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'process-group component' - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'process-group component' + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // ---- // body @@ -89,74 +91,78 @@ nf.ProcessGroup = (function () { // process group border processGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 2, - 'stroke': '#294c58' - }); + .attr({ + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // process group body processGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'body', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': '#294c58', - 'fill-opacity': 0.8, - 'stroke-width': 0 - }); + .attr({ + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // process group name background + processGroup.append('rect') + .attr({ + 'width': function (d) { + return d.dimensions.width; + }, + 'height': 32, + 'fill': '#b8c6cd' + }); // process group name processGroup.append('text') - .attr({ - 'x': 10, - 'y': 15, - 'width': 316, - 'height': 16, - 'font-size': '10pt', - 'font-weight': 'bold', - 'fill': '#ffffff', - 'class': 'process-group-name' - }); + .attr({ + 'x': 10, + 'y': 20, + 'width': 316, + 'height': 16, + 'class': 'process-group-name' + }); // process group preview processGroup.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/bgProcessGroupDetailsArea.png', - 'width': 352, - 'height': 113, - 'x': 6, - 'y': 22, - 'class': 'process-group-preview' - }); + .call(nf.CanvasUtils.disableImageHref) + .attr({ + 'width': 352, + 'height': 113, + 'x': 6, + 'y': 22, + 'class': 'process-group-preview' + }); // always support selecting and navigation processGroup.on('dblclick', function (d) { - // enter this group on double click - nf.CanvasUtils.enterGroup(d.id); - }) - .call(nf.Selectable.activate).call(nf.ContextMenu.activate); + // enter this group on double click + nf.CanvasUtils.enterGroup(d.id); + }) + .call(nf.Selectable.activate).call(nf.ContextMenu.activate); // only support dragging, connection, and drag and drop if appropriate - if (nf.Common.isDFM()) { - processGroup.filter(function (d) { + processGroup.filter(function (d) { return d.accessPolicy.canWrite && d.accessPolicy.canRead; }) .on('mouseover.drop', function (d) { @@ -171,7 +177,7 @@ nf.ProcessGroup = (function () { var drag = d3.select('rect.drag-selection'); if (!drag.empty()) { // filter the current selection by this group - var selection = nf.CanvasUtils.getSelection().filter(function(d) { + var selection = nf.CanvasUtils.getSelection().filter(function (d) { return targetData.id === d.id; }); @@ -192,14 +198,13 @@ nf.ProcessGroup = (function () { }) .call(nf.Draggable.activate) .call(nf.Connectable.activate); - } // call update to trigger some rendering processGroup.call(updateProcessGroups); }; // attempt of space between component count and icon for process group contents - var CONTENTS_SPACER = 5; + var CONTENTS_SPACER = 10; /** * Updates the process groups in the specified selection. @@ -220,333 +225,388 @@ nf.ProcessGroup = (function () { if (details.empty()) { details = processGroup.append('g').attr('class', 'process-group-details'); - // ---------------- - // stats background - // ---------------- + // ------------------- + // contents background + // ------------------- details.append('rect') - .attr({ - 'x': 6, - 'y': 22, - 'width': 352, - 'height': 113, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': '#ffffff' - }); - - details.append('rect') - .attr({ - 'x': 6, - 'y': 22, - 'width': 352, - 'height': 22, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)', - 'class': 'process-group-contents-container' - }); - - details.append('rect') - .attr({ - 'x': 6, - 'y': 104, - 'width': 352, - 'height': 33, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)' - }); + .attr({ + 'x': 0, + 'y': 32, + 'width': function () { + return processGroupData.dimensions.width + }, + 'height': 24, + 'fill': '#e3e8eb' + }); // -------- // contents // -------- if (processGroupData.accessPolicy.canRead) { - // input ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconInputPortSmall.png', - 'width': 16, - 'height': 16, - 'x': 10, - 'y': 25 - }); - - // input ports count - details.append('text') - .attr({ - 'x': 29, - 'y': 37, - 'class': 'process-group-input-port-count process-group-contents-count' - }); - - // output ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconOutputPortSmall.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-output-port' - }); - - // output ports count - details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-output-port-count process-group-contents-count' - }); // transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionActive.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-transmitting' - }); + details.append('text') + .attr({ + 'x': 10, + 'y': 49, + 'class': 'process-group-transmitting process-group-contents-icon', + 'font-family': 'FontAwesome' + }) + .text('\uf140'); // transmitting count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-transmitting-count process-group-contents-count' - }); + .attr({ + 'x': 28, + 'y': 49, + 'class': 'process-group-transmitting-count process-group-contents-count' + }); // not transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionInactive.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-not-transmitting' - }); + details.append('text') + .attr({ + 'y': 49, + 'class': 'process-group-not-transmitting process-group-contents-icon', + 'font-family': 'flowfont' + }) + .text('\ue80a'); // not transmitting count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-not-transmitting-count process-group-contents-count' - }); + .attr({ + 'y': 49, + 'class': 'process-group-not-transmitting-count process-group-contents-count' + }); // running icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconRun.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-running' - }); + details.append('text') + .attr({ + 'y': 49, + 'class': 'process-group-running process-group-contents-icon', + 'font-family': 'FontAwesome' + }) + .text('\uf04b'); // running count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-running-count process-group-contents-count' - }); + .attr({ + 'y': 49, + 'class': 'process-group-running-count process-group-contents-count' + }); // stopped icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconStop.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-stopped' - }); + details.append('text') + .attr({ + 'y': 49, + 'class': 'process-group-stopped process-group-contents-icon', + 'font-family': 'FontAwesome' + }) + .text('\uf04d'); // stopped count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-stopped-count process-group-contents-count' - }); + .attr({ + 'y': 49, + 'class': 'process-group-stopped-count process-group-contents-count' + }); // invalid icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconAlert.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-invalid' - }); + details.append('text') + .attr({ + 'y': 49, + 'class': 'process-group-invalid process-group-contents-icon', + 'font-family': 'FontAwesome' + }) + .text('\uf071'); // invalid count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-invalid-count process-group-contents-count' - }); + .attr({ + 'y': 49, + 'class': 'process-group-invalid-count process-group-contents-count' + }); // disabled icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconDisable.png', - 'width': 16, - 'height': 16, - 'y': 25, - 'class': 'process-group-disabled' - }); + details.append('text') + .attr({ + 'y': 49, + 'class': 'process-group-disabled process-group-contents-icon', + 'font-family': 'flowfont' + }) + .text('\ue802'); // disabled count details.append('text') - .attr({ - 'y': 37, - 'class': 'process-group-disabled-count process-group-contents-count' - }); + .attr({ + 'y': 49, + 'class': 'process-group-disabled-count process-group-contents-count' + }); } + // ---------------- + // stats background + // ---------------- + + // queued + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 66, + 'fill': '#f4f6f7' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 84, + 'fill': '#c7d2d7' + }); + + // in + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 85, + 'fill': '#ffffff' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 103, + 'fill': '#c7d2d7' + }); + + // read/write + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 104, + 'fill': '#f4f6f7' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 122, + 'fill': '#c7d2d7' + }); + + // out + details.append('rect') + .attr({ + 'width': function () { + return processGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 123, + 'fill': '#ffffff' + }); + // ----- // stats // ----- // stats label container var processGroupStatsLabel = details.append('g') - .attr({ - 'transform': 'translate(6, 54)' - }); + .attr({ + 'transform': 'translate(6, 75)' + }); // queued label processGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-stats-label' - }) - .text('Queued'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'stats-label' + }) + .text('Queued'); // in label processGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-label' - }) - .text('In'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 24, + 'class': 'stats-label' + }) + .text('In'); // read/write label processGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'process-group-stats-label' - }) - .text('Read/Write'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 42, + 'class': 'stats-label' + }) + .text('Read/Write'); // out label processGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'process-group-stats-label' - }) - .text('Out'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 60, + 'class': 'stats-label' + }) + .text('Out'); // stats value container var processGroupStatsValue = details.append('g') - .attr({ - 'transform': 'translate(95, 54)' - }); + .attr({ + 'transform': 'translate(95, 75)' + }); // queued value - processGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-queued process-group-stats-value' - }); + var queuedText = processGroupStatsValue.append('text') + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'process-group-queued stats-value' + }); + + // queued count + queuedText.append('tspan') + .attr({ + 'class': 'count' + }); + + // queued size + queuedText.append('tspan') + .attr({ + 'class': 'size' + }); // in value - processGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-in process-group-stats-value' - }); + var inText = processGroupStatsValue.append('text') + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 24, + 'class': 'process-group-in stats-value' + }); + + // in count + inText.append('tspan') + .attr({ + 'class': 'count' + }); + + // in size + inText.append('tspan') + .attr({ + 'class': 'size' + }); // read/write value processGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'process-group-read-write process-group-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 42, + 'class': 'process-group-read-write stats-value' + }); // out value - processGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'process-group-out process-group-stats-value' - }); + var outText = processGroupStatsValue.append('text') + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 60, + 'class': 'process-group-out stats-value' + }); + + // in count + outText.append('tspan') + .attr({ + 'class': 'count' + }); + + // in size + outText.append('tspan') + .attr({ + 'class': 'size' + }); // stats value container var processGroupStatsInfo = details.append('g') - .attr({ - 'transform': 'translate(314, 54)' - }); + .attr({ + 'transform': 'translate(335, 75)' + }); // in info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 24, + 'class': 'stats-info' + }) + .text('5 min'); // read/write info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 42, + 'class': 'stats-info' + }) + .text('5 min'); // out info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 60, + 'class': 'stats-info' + }) + .text('5 min'); // -------- // comments @@ -554,189 +614,158 @@ nf.ProcessGroup = (function () { // process group comments details.append('text') - .attr({ - 'x': 10, - 'y': 118, - 'width': 342, - 'height': 22, - 'class': 'process-group-comments' - }); + .attr({ + 'x': 10, + 'y': 160, + 'width': 342, + 'height': 22, + 'class': 'process-group-comments' + }); // ------------------- // active thread count // ------------------- // active thread count - details.append('rect') - .attr({ - 'class': 'active-thread-count-background', - 'height': 13, - 'y': 0, - 'fill': '#fff', - 'fill-opacity': '0.4', - 'stroke': '#aaa', - 'stroke-width': '1' - }); - - // active thread bacground details.append('text') - .attr({ - 'class': 'active-thread-count', - 'height': 13, - 'y': 10, - 'fill': '#000' - }); + .attr({ + 'class': 'active-thread-count-icon', + 'y': 20 + }) + .text('\ue83f'); + + // active thread icon + details.append('text') + .attr({ + 'class': 'active-thread-count', + 'y': 20 + }); // --------- // bulletins // --------- + // bulletin background + details.append('rect') + .attr({ + 'class': 'bulletin-background', + 'x': function () { + return processGroupData.dimensions.width - 24; + }, + 'y': 32, + 'width': 24, + 'height': 24 + }); + // bulletin icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'bulletin-icon', - 'xlink:href': 'images/iconBulletin.png', - 'width': 12, - 'height': 12, - 'y': 2 - }); + details.append('text') + .attr({ + 'class': 'bulletin-icon', + 'x': function () { + return processGroupData.dimensions.width - 17; + }, + 'y': 50 + }) + .text('\uf24a'); } if (processGroupData.accessPolicy.canRead) { - // update the input ports - var inputPortCount = details.select('text.process-group-input-port-count') - .text(function (d) { - return d.component.inputPortCount; - }); - - // update the output ports - var outputPort = details.select('image.process-group-output-port') - .attr('x', function () { - var inputPortCountX = parseInt(inputPortCount.attr('x'), 10); - return inputPortCountX + inputPortCount.node().getComputedTextLength() + CONTENTS_SPACER; - }); - details.select('text.process-group-output-port-count') - .attr('x', function () { - var outputPortImageX = parseInt(outputPort.attr('x'), 10); - var outputPortImageWidth = parseInt(outputPort.attr('width'), 10); - return outputPortImageX + outputPortImageWidth + CONTENTS_SPACER; - }) - .text(function (d) { - return d.component.outputPortCount; - }); - - // get the container to help right align - var container = details.select('rect.process-group-contents-container'); - - // update disabled - var disabledCount = details.select('text.process-group-disabled-count') - .text(function (d) { - return d.component.disabledCount; - }) - .attr('x', function () { - var containerX = parseInt(container.attr('x'), 10); - var containerWidth = parseInt(container.attr('width'), 10); - return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; - }); - var disabled = details.select('image.process-group-disabled') - .attr('x', function () { - var disabledCountX = parseInt(disabledCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return disabledCountX - width - CONTENTS_SPACER; - }); - - // update invalid - var invalidCount = details.select('text.process-group-invalid-count') - .text(function (d) { - return d.component.invalidCount; - }) - .attr('x', function () { - var disabledX = parseInt(disabled.attr('x'), 10); - return disabledX - this.getComputedTextLength() - CONTENTS_SPACER; - }); - var invalid = details.select('image.process-group-invalid') - .attr('x', function () { - var invalidCountX = parseInt(invalidCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return invalidCountX - width - CONTENTS_SPACER; - }); - - // update stopped - var stoppedCount = details.select('text.process-group-stopped-count') - .text(function (d) { - return d.component.stoppedCount; - }) - .attr('x', function () { - var invalidX = parseInt(invalid.attr('x'), 10); - return invalidX - this.getComputedTextLength() - CONTENTS_SPACER; - }); - var stopped = details.select('image.process-group-stopped') - .attr('x', function () { - var stoppedCountX = parseInt(stoppedCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return stoppedCountX - width - CONTENTS_SPACER; - }); - - // update running - var runningCount = details.select('text.process-group-running-count') - .text(function (d) { - return d.component.runningCount; - }) - .attr('x', function () { - var stoppedX = parseInt(stopped.attr('x'), 10); - return stoppedX - this.getComputedTextLength() - CONTENTS_SPACER; - }); - var running = details.select('image.process-group-running') - .attr('x', function () { - var runningCountX = parseInt(runningCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return runningCountX - width - CONTENTS_SPACER; - }); - - // update not transmitting - var notTransmittingCount = details.select('text.process-group-not-transmitting-count') - .text(function (d) { - return d.component.inactiveRemotePortCount; - }) - .attr('x', function () { - var runningX = parseInt(running.attr('x'), 10); - return runningX - this.getComputedTextLength() - CONTENTS_SPACER; - }); - var notTransmitting = details.select('image.process-group-not-transmitting') - .attr('x', function () { - var notTransmittingCountX = parseInt(notTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return notTransmittingCountX - width - CONTENTS_SPACER; - }); // update transmitting var transmittingCount = details.select('text.process-group-transmitting-count') - .text(function (d) { - return d.component.activeRemotePortCount; - }) - .attr('x', function () { - var notTransmittingX = parseInt(notTransmitting.attr('x'), 10); - return notTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; - }); - details.select('image.process-group-transmitting') - .attr('x', function () { - var transmittingCountX = parseInt(transmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return transmittingCountX - width - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.activeRemotePortCount; + }); + + // update not transmitting + var notTransmitting = details.select('text.process-group-not-transmitting') + .attr('x', function () { + var transmittingX = parseInt(transmittingCount.attr('x'), 10); + return transmittingX + transmittingCount.node().getComputedTextLength() + CONTENTS_SPACER; + }); + var notTransmittingCount = details.select('text.process-group-not-transmitting-count') + .attr('x', function () { + var notTransmittingCountX = parseInt(notTransmitting.attr('x'), 10); + return notTransmittingCountX + notTransmitting.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .text(function (d) { + return d.component.inactiveRemotePortCount; + }); + + // update running + var running = details.select('text.process-group-running') + .attr('x', function () { + var notTransmittingX = parseInt(notTransmittingCount.attr('x'), 10); + return notTransmittingX + notTransmittingCount.node().getComputedTextLength() + CONTENTS_SPACER; + }); + var runningCount = details.select('text.process-group-running-count') + .attr('x', function () { + var runningCountX = parseInt(running.attr('x'), 10); + return runningCountX + running.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .text(function (d) { + return d.component.runningCount; + }); + + // update stopped + var stopped = details.select('text.process-group-stopped') + .attr('x', function () { + var runningX = parseInt(runningCount.attr('x'), 10); + return runningX + runningCount.node().getComputedTextLength() + CONTENTS_SPACER; + }); + var stoppedCount = details.select('text.process-group-stopped-count') + .attr('x', function () { + var stoppedCountX = parseInt(stopped.attr('x'), 10); + return stoppedCountX + stopped.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .text(function (d) { + return d.component.stoppedCount; + }); + + // update invalid + var invalid = details.select('text.process-group-invalid') + .attr('x', function () { + var stoppedX = parseInt(stoppedCount.attr('x'), 10); + return stoppedX + stoppedCount.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .classed('has-validation-errors', function (d) { + return d.accessPolicy.canRead && d.component.invalidCount > 0; + }); + var invalidCount = details.select('text.process-group-invalid-count') + .attr('x', function () { + var invalidCountX = parseInt(invalid.attr('x'), 10); + return invalidCountX + invalid.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .text(function (d) { + return d.component.invalidCount; + }); + + // update disabled + var disabled = details.select('text.process-group-disabled') + .attr('x', function () { + var invalidX = parseInt(invalidCount.attr('x'), 10); + return invalidX + invalidCount.node().getComputedTextLength() + CONTENTS_SPACER; + }); + details.select('text.process-group-disabled-count') + .attr('x', function () { + var disabledCountX = parseInt(disabled.attr('x'), 10); + return disabledCountX + disabled.node().getComputedTextLength() + CONTENTS_SPACER; + }) + .text(function (d) { + return d.component.disabledCount; + }); // update the process group comments details.select('text.process-group-comments') - .each(function (d) { - var processGroupComments = d3.select(this); + .each(function (d) { + var processGroupComments = d3.select(this); - // reset the process group name to handle any previous state - processGroupComments.text(null).selectAll('tspan, title').remove(); + // reset the process group name to handle any previous state + processGroupComments.text(null).selectAll('tspan, title').remove(); - // apply ellipsis to the port name as necessary - nf.CanvasUtils.multilineEllipsis(processGroupComments, 2, getProcessGroupComments(d)); - }).classed('unset', function (d) { + // apply ellipsis to the port name as necessary + nf.CanvasUtils.ellipsis(processGroupComments, getProcessGroupComments(d)); + }).classed('unset', function (d) { return nf.Common.isBlank(d.component.comments); }).append('title').text(function (d) { return getProcessGroupComments(d); @@ -744,15 +773,15 @@ nf.ProcessGroup = (function () { // update the process group name processGroup.select('text.process-group-name') - .each(function (d) { - var processGroupName = d3.select(this); + .each(function (d) { + var processGroupName = d3.select(this); - // reset the process group name to handle any previous state - processGroupName.text(null).selectAll('title').remove(); + // reset the process group name to handle any previous state + processGroupName.text(null).selectAll('title').remove(); - // apply ellipsis to the process group name as necessary - nf.CanvasUtils.ellipsis(processGroupName, d.component.name); - }).append('title').text(function (d) { + // apply ellipsis to the process group name as necessary + nf.CanvasUtils.ellipsis(processGroupName, d.component.name); + }).append('title').text(function (d) { return d.component.name; }); } @@ -766,14 +795,14 @@ nf.ProcessGroup = (function () { if (processGroupData.accessPolicy.canRead) { // update the process group name processGroup.select('text.process-group-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }); } // show the preview @@ -792,7 +821,7 @@ nf.ProcessGroup = (function () { /** * Updates the process group status. - * + * * @param {selection} updated The process groups to be updated */ var updateProcessGroupStatus = function (updated) { @@ -800,45 +829,75 @@ nf.ProcessGroup = (function () { return; } - // queued value - updated.select('text.process-group-queued') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.queued; - } else { - return '- / -'; - } - }); + // queued count value + updated.select('text.process-group-queued tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.queued, ' '); + } else { + return '-'; + } + }); - // in value - updated.select('text.process-group-in') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.input; - } else { - return '- / -'; - } - }); + // queued size value + updated.select('text.process-group-queued tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.queued, ' '); + } else { + return ' (-)'; + } + }); + + // in count value + updated.select('text.process-group-in tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.input, ' '); + } else { + return '-'; + } + }); + + // in size value + updated.select('text.process-group-in tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.input, ' '); + } else { + return ' (-)'; + } + }); // read/write value updated.select('text.process-group-read-write') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.read + ' / ' + d.status.written; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.read + ' / ' + d.status.written; + } else { + return '- / -'; + } + }); - // out value - updated.select('text.process-group-out') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.output; - } else { - return '- / -'; - } - }); + // out count value + updated.select('text.process-group-out tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.output, ' '); + } else { + return '-'; + } + }); + + // out size value + updated.select('text.process-group-out tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.output, ' '); + } else { + return ' (-)'; + } + }); updated.each(function (d) { var processGroup = d3.select(this); @@ -856,6 +915,10 @@ nf.ProcessGroup = (function () { // bulletins // --------- + processGroup.select('rect.bulletin-background').classed('has-bulletins', function () { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins); + }); + nf.CanvasUtils.bulletins(processGroup, d, function () { return d3.select('#process-group-tooltips'); }, offset); @@ -877,7 +940,7 @@ nf.ProcessGroup = (function () { /** * Removes the tooltips for the process groups in the specified selection. - * + * * @param {selection} removed */ var removeTooltips = function (removed) { @@ -896,12 +959,12 @@ nf.ProcessGroup = (function () { // create the process group container processGroupContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'process-groups' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'process-groups' + }); }, - + /** * Populates the graph with the specified process groups. * @@ -931,7 +994,7 @@ nf.ProcessGroup = (function () { // apply the selection and handle all new process group select().enter().call(renderProcessGroups, selectAll); }, - + /** * If the process group id is specified it is returned. If no process group id * specified, all process groups are returned. @@ -945,7 +1008,7 @@ nf.ProcessGroup = (function () { return processGroupMap.get(id); } }, - + /** * If the process group id is specified it is refresh according to the current * state. If no process group id is specified, all process groups are refreshed. @@ -959,14 +1022,14 @@ nf.ProcessGroup = (function () { d3.selectAll('g.process-group').call(updateProcessGroups); } }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.process-group.entering, g.process-group.leaving').call(updateProcessGroups); }, - + /** * Reloads the process group state from the server and refreshes the UI. * If the process group is currently unknown, this function just returns. @@ -984,16 +1047,16 @@ nf.ProcessGroup = (function () { }); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** * Sets the specified process group(s). If the is an array, it * will set each process group. If it is not an array, it will @@ -1007,7 +1070,7 @@ nf.ProcessGroup = (function () { // update the current entry var processGroupEntry = processGroupMap.get(processGroupEntity.id); $.extend(processGroupEntry, processGroupEntity); - + // update the process group in the UI d3.select('#id-' + processGroupEntry.id).call(updateProcessGroups); } @@ -1022,10 +1085,10 @@ nf.ProcessGroup = (function () { set(processGroupEntities); } }, - + /** * Sets the process group status using the specified status. - * + * * @param {array} processGroupStatus Process group status */ setStatus: function (processGroupStatus) { @@ -1062,7 +1125,7 @@ nf.ProcessGroup = (function () { // apply the selection and handle all removed process groups select().exit().call(removeProcessGroups); }, - + /** * Removes all process groups. */ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js index dbe52464a5..6ed968f1bf 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-processor.js @@ -23,8 +23,8 @@ nf.Processor = (function () { // default dimensions for each type of component var dimensions = { - width: 310, - height: 100 + width: 350, + height: 130 }; // --------------------------------- @@ -47,7 +47,9 @@ nf.Processor = (function () { * Selects the processor elements against the current processor map. */ var select = function () { - return processorContainer.selectAll('g.processor').data(processorMap.values()); + return processorContainer.selectAll('g.processor').data(processorMap.values(), function (d) { + return d.id; + }); }; // renders the processors @@ -57,80 +59,78 @@ nf.Processor = (function () { } var processor = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'processor component' - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'processor component' + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // processor border processor.append('rect') - .attr({ - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 1 - }); + .attr({ + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // processor body processor.append('rect') - .attr({ - 'class': 'body', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill-opacity': 0.8, - 'stroke-opacity': 0.8, - 'stroke-width': 0 - }); + .attr({ + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // processor name processor.append('text') - .attr({ - 'x': 25, - 'y': 18, - 'width': 220, - 'height': 16, - 'font-size': '10pt', - 'font-weight': 'bold', - 'fill': 'black', - 'class': 'processor-name' - }); + .attr({ + 'x': 62, + 'y': 20, + 'width': 220, + 'height': 16, + 'class': 'processor-name' + }); // processor icon - processor.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconProcessor.png', - 'width': 28, - 'height': 26, - 'x': 276, - 'y': 5 - }); + processor.append('text') + .attr({ + 'x': 6, + 'y': 32, + 'class': 'processor-icon' + }) + .text('\ue807'); // processor stats preview processor.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/bgProcessorStatArea.png', - 'width': 294, - 'height': 58, - 'x': 8, - 'y': 35, - 'class': 'processor-stats-preview' - }); + .call(nf.CanvasUtils.disableImageHref) + .attr({ + 'width': 294, + 'height': 58, + 'x': 8, + 'y': 35, + 'class': 'processor-stats-preview' + }); // make processors selectable processor.call(nf.Selectable.activate).call(nf.ContextMenu.activate); @@ -146,7 +146,7 @@ nf.Processor = (function () { /** * Updates the processors in the specified selection. - * + * * @param {selection} updated The processors to update */ var updateProcessors = function (updated) { @@ -156,45 +156,40 @@ nf.Processor = (function () { updated.each(function (processorData) { var processor = d3.select(this); - var details = processor.select('g.processor-details'); + var details = processor.select('g.processor-canvas-details'); // if this processor is visible, render everything if (processor.classed('visible')) { if (details.empty()) { - details = processor.append('g').attr('class', 'processor-details'); + details = processor.append('g').attr('class', 'processor-canvas-details'); // run status icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'run-status-icon', - 'width': 16, - 'height': 16, - 'x': 5, - 'y': 5 - }); + details.append('text') + .attr({ + 'class': 'run-status-icon', + 'x': 42, + 'y': 20 + }); if (processorData.accessPolicy.canRead) { // processor type details.append('text') - .attr({ - 'x': 25, - 'y': 30, - 'width': 246, - 'height': 16, - 'font-size': '8pt', - 'font-weight': 'normal', - 'fill': 'black' - }) - .each(function (d) { - var processorType = d3.select(this); + .attr({ + 'class': 'processor-type', + 'x': 62, + 'y': 35, + 'width': 246, + 'height': 16 + }) + .each(function (d) { + var processorType = d3.select(this); - // reset the processor type to handle any previous state - processorType.text(null).selectAll('title').remove(); + // reset the processor type to handle any previous state + processorType.text(null).selectAll('title').remove(); - // apply ellipsis to the processor type as necessary - nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.')); - }).append('title').text(function (d) { + // apply ellipsis to the processor type as necessary + nf.CanvasUtils.ellipsis(processorType, nf.Common.substringAfterLast(d.component.type, '.')); + }).append('title').text(function (d) { return nf.Common.substringAfterLast(d.component.type, '.'); }); } @@ -204,269 +199,305 @@ nf.Processor = (function () { // ----- // draw the processor statistics table - details.append('rect') - .attr({ - 'width': 294, - 'height': 59, - 'x': 8, - 'y': 35, - 'fill': '#ffffff', - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'stroke-opacity': 0.8 - }); + // in details.append('rect') - .attr({ - 'width': 73, - 'height': 59, - 'x': 8, - 'y': 35, - 'fill': 'url(#processor-stats-background)', - 'stroke-width': 0 - }); + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 50, + 'fill': '#f4f6f7' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 68, + 'fill': '#c7d2d7' + }); + + // read/write + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 69, + 'fill': '#ffffff' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 87, + 'fill': '#c7d2d7' + }); + + // out + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 20, + 'x': 0, + 'y': 88, + 'fill': '#f4f6f7' + }); + + // border + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 106, + 'fill': '#c7d2d7' + }); + + // tasks/time + details.append('rect') + .attr({ + 'width': function () { + return processorData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 107, + 'fill': '#ffffff' + }); // stats label container var processorStatsLabel = details.append('g') - .attr({ - 'transform': 'translate(8, 45)' - }); + .attr({ + 'transform': 'translate(10, 55)' + }); // in label processorStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'processor-stats-label' - }) - .text('In'); + .attr({ + 'width': 73, + 'height': 10, + 'y': 9, + 'class': 'stats-label' + }) + .text('In'); // read/write label processorStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'processor-stats-label' - }) - .text('Read/Write'); + .attr({ + 'width': 73, + 'height': 10, + 'y': 27, + 'class': 'stats-label' + }) + .text('Read/Write'); // out label processorStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'processor-stats-label' - }) - .text('Out'); + .attr({ + 'width': 73, + 'height': 10, + 'y': 46, + 'class': 'stats-label' + }) + .text('Out'); // tasks/time label processorStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'processor-stats-label' - }) - .text('Tasks/Time'); + .attr({ + 'width': 73, + 'height': 10, + 'y': 65, + 'class': 'stats-label' + }) + .text('Tasks/Time'); // stats value container var processorStatsValue = details.append('g') - .attr({ - 'transform': 'translate(80, 45)' - }); + .attr({ + 'transform': 'translate(85, 55)' + }); // in value - processorStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'processor-in processor-stats-value' - }); + var inText = processorStatsValue.append('text') + .attr({ + 'width': 180, + 'height': 9, + 'y': 9, + 'class': 'processor-in stats-value' + }); + + // in count + inText.append('tspan') + .attr({ + 'class': 'count' + }); + + // in size + inText.append('tspan') + .attr({ + 'class': 'size' + }); // read/write value processorStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'processor-read-write processor-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'y': 27, + 'class': 'processor-read-write stats-value' + }); // out value - processorStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'processor-out processor-stats-value' - }); + var outText = processorStatsValue.append('text') + .attr({ + 'width': 180, + 'height': 10, + 'y': 46, + 'class': 'processor-out stats-value' + }); + + // out count + outText.append('tspan') + .attr({ + 'class': 'count' + }); + + // out size + outText.append('tspan') + .attr({ + 'class': 'size' + }); // tasks/time value processorStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'processor-tasks-time processor-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'y': 65, + 'class': 'processor-tasks-time stats-value' + }); // stats value container var processorStatsInfo = details.append('g') - .attr('transform', 'translate(258, 45)'); + .attr('transform', 'translate(305, 55)'); // in info processorStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'processor-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'y': 9, + 'class': 'stats-info' + }) + .text('5 min'); // read/write info processorStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'processor-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'y': 27, + 'class': 'stats-info' + }) + .text('5 min'); // out info processorStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 30, - 'class': 'processor-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'y': 46, + 'class': 'stats-info' + }) + .text('5 min'); // tasks/time info processorStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 43, - 'class': 'processor-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'y': 65, + 'class': 'stats-info' + }) + .text('5 min'); // ------------------- // active thread count // ------------------- // active thread count - details.append('rect') - .attr({ - 'class': 'active-thread-count-background', - 'height': 13, - 'y': 0, - 'fill': '#fff', - 'fill-opacity': '0.65', - 'stroke': '#aaa', - 'stroke-width': '1' - }); - - // active thread bacground details.append('text') - .attr({ - 'class': 'active-thread-count', - 'height': 13, - 'y': 10, - 'fill': '#000' - }); + .attr({ + 'class': 'active-thread-count-icon', + 'y': 42 + }) + .text('\ue83f'); + + // active thread background + details.append('text') + .attr({ + 'class': 'active-thread-count', + 'y': 42 + }); // --------- // bulletins // --------- + // bulletin background + details.append('rect') + .attr({ + 'class': 'bulletin-background', + 'x': function (d) { + return processorData.dimensions.width - 24; + }, + 'width': 24, + 'height': 24 + }); + // bulletin icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'bulletin-icon', - 'xlink:href': 'images/iconBulletin.png', - 'width': 12, - 'height': 12, - 'x': 8, - 'y': 20 - }); + details.append('text') + .attr({ + 'class': 'bulletin-icon', + 'x': function (d) { + return processorData.dimensions.width - 18; + }, + 'y': 18 + }) + .text('\uf24a'); } if (processorData.accessPolicy.canRead) { - // update the run status - details.select('image.run-status-icon') - .attr('xlink:href', function (d) { - var img = ''; - if (d.component.state === 'DISABLED') { - img = 'images/iconDisable.png'; - } else if (!nf.Common.isEmpty(d.component.validationErrors)) { - img = 'images/iconAlert.png'; - } else if (d.component.state === 'RUNNING') { - img = 'images/iconRun.png'; - } else if (d.component.state === 'STOPPED') { - img = 'images/iconStop.png'; - } - return img; - }) - .each(function (d) { - // remove the existing tip if necessary - var tip = d3.select('#run-status-tip-' + d.id); - if (!tip.empty()) { - tip.remove(); - } - - // if there are validation errors generate a tooltip - if (!nf.Common.isEmpty(d.component.validationErrors)) { - tip = d3.select('#processor-tooltips').append('div') - .attr('id', function () { - return 'run-status-tip-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .html(function () { - var list = nf.Common.formatUnorderedList(d.component.validationErrors); - if (list === null || list.length === 0) { - return ''; - } else { - return $('
').append(list).html(); - } - }); - - // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); - } - }); - // update the processor name processor.select('text.processor-name') - .each(function (d) { - var processorName = d3.select(this); + .each(function (d) { + var processorName = d3.select(this); - // reset the processor name to handle any previous state - processorName.text(null).selectAll('title').remove(); + // reset the processor name to handle any previous state + processorName.text(null).selectAll('title').remove(); - // apply ellipsis to the processor name as necessary - nf.CanvasUtils.ellipsis(processorName, d.component.name); - }).append('title').text(function (d) { + // apply ellipsis to the processor name as necessary + nf.CanvasUtils.ellipsis(processorName, d.component.name); + }).append('title').text(function (d) { return d.component.name; }); } @@ -480,14 +511,14 @@ nf.Processor = (function () { if (processorData.accessPolicy.canRead) { // update the processor name processor.select('text.processor-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }); } // show the preview @@ -503,61 +534,29 @@ nf.Processor = (function () { } }); - // ----------------------------------------------------------------- - // ensure there is a linear gradient defined for each possible color - // ----------------------------------------------------------------- - - // reset the colors - var colors = d3.set(); - colors.add(nf.Common.substringAfterLast(nf.Processor.defaultColor(), '#')); - - // determine all unique colors - processorMap.forEach(function (id, d) { - if (d.accessPolicy.canRead) { - var color = d.component.style['background-color']; - if (nf.Common.isDefinedAndNotNull(color)) { - colors.add(nf.Common.substringAfterLast(color, '#')); - } - } - }); - nf.Canvas.defineProcessorColors(colors.values()); + // --------------- + // processor color + // --------------- // update the processor color - updated.select('rect.border') - .attr('stroke', function (d) { - var color = nf.Processor.defaultColor(); - - if (d.accessPolicy.canRead) { - // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { - color = d.component.style['background-color']; - } - } - - return color; - }); - updated.select('rect.body') - .attr('fill', function (d) { - var color = nf.Processor.defaultColor(); + .style('fill', function (d) { + var color = nf.Processor.defaultColor(); - if (d.accessPolicy.canRead) { - // use the specified color if appropriate - if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { - color = d.component.style['background-color']; - } + if (d.accessPolicy.canRead) { + // use the specified color if appropriate + if (nf.Common.isDefinedAndNotNull(d.component.style['background-color'])) { + color = d.component.style['background-color']; } + } - // get just the color code part - color = nf.Common.substringAfterLast(color, '#'); - - return 'url(#processor-background-' + color + ')'; - }); + return color; + }); }; /** * Updates the stats for the processors in the specified selection. - * + * * @param {selection} updated The processors to update */ var updateProcessorStatus = function (updated) { @@ -565,45 +564,124 @@ nf.Processor = (function () { return; } - // in value - updated.select('text.processor-in') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.input; - } else { - return '- / -'; + // update the run status + updated.select('text.run-status-icon') + .attr({ + 'fill': function (d) { + var fill = '#728e9b'; + if (d.status && d.status.runStatus === 'Invalid') { + fill = '#ba554a'; } - }); + return fill; + }, + 'font-family': function (d) { + var family = 'FontAwesome'; + if (d.status && d.status.runStatus === 'Disabled') { + family = 'flowfont'; + } + return family; + } + }) + .text(function (d) { + var img = ''; + if (d.status && d.status.runStatus === 'Disabled') { + img = '\ue802'; + } else if (d.status && d.status.runStatus === 'Invalid') { + img = '\uf071'; + } else if (d.status && d.status.runStatus === 'Running') { + img = '\uf04b'; + } else if (d.status && d.status.runStatus === 'Stopped') { + img = '\uf04d'; + } + return img; + }) + .each(function (d) { + // remove the existing tip if necessary + var tip = d3.select('#run-status-tip-' + d.id); + if (!tip.empty()) { + tip.remove(); + } + + // if there are validation errors generate a tooltip + if (d.accessPolicy.canRead && !nf.Common.isEmpty(d.component.validationErrors)) { + tip = d3.select('#processor-tooltips').append('div') + .attr('id', function () { + return 'run-status-tip-' + d.id; + }) + .attr('class', 'tooltip nifi-tooltip') + .html(function () { + var list = nf.Common.formatUnorderedList(d.component.validationErrors); + if (list === null || list.length === 0) { + return ''; + } else { + return $('
').append(list).html(); + } + }); + + // add the tooltip + nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + } + }); + + // in count value + updated.select('text.processor-in tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.input, ' '); + } else { + return '-'; + } + }); + + // in size value + updated.select('text.processor-in tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.input, ' '); + } else { + return ' (-)'; + } + }); // read/write value updated.select('text.processor-read-write') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.read + ' / ' + d.status.written; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.read + ' / ' + d.status.written; + } else { + return '- / -'; + } + }); - // out value - updated.select('text.processor-out') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.output; - } else { - return '- / -'; - } - }); + // out count value + updated.select('text.processor-out tspan.count') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return nf.Common.substringBeforeFirst(d.status.output, ' '); + } else { + return '-'; + } + }); + + // out size value + updated.select('text.processor-out tspan.size') + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return ' ' + nf.Common.substringAfterFirst(d.status.output, ' '); + } else { + return ' (-)'; + } + }); // tasks/time value updated.select('text.processor-tasks-time') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.tasks + ' / ' + d.status.tasksDuration; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.tasks + ' / ' + d.status.tasksDuration; + } else { + return '- / -'; + } + }); updated.each(function (d) { var processor = d3.select(this); @@ -618,6 +696,10 @@ nf.Processor = (function () { // bulletins // --------- + processor.select('rect.bulletin-background').classed('has-bulletins', function () { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins); + }); + nf.CanvasUtils.bulletins(processor, d, function () { return d3.select('#processor-tooltips'); }, 286); @@ -626,7 +708,7 @@ nf.Processor = (function () { /** * Removes the processors in the specified selection. - * + * * @param {selection} removed */ var removeProcessors = function (removed) { @@ -639,7 +721,7 @@ nf.Processor = (function () { /** * Removes the tooltips for the processors in the specified selection. - * + * * @param {selection} removed */ var removeTooltips = function (removed) { @@ -659,15 +741,15 @@ nf.Processor = (function () { // create the processor container processorContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'processors' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'processors' + }); }, - + /** * Populates the graph with the specified processors. - * + * * @argument {object | array} processorEntities The processors to add * @argument {boolean} selectAll Whether or not to select the new contents */ @@ -694,11 +776,11 @@ nf.Processor = (function () { // apply the selection and handle all new processors select().enter().call(renderProcessors, selectAll); }, - + /** * If the processor id is specified it is returned. If no processor id * specified, all processors are returned. - * + * * @param {string} id */ get: function (id) { @@ -708,11 +790,11 @@ nf.Processor = (function () { return processorMap.get(id); } }, - + /** - * If the processor id is specified it is refresh according to the current + * If the processor id is specified it is refresh according to the current * state. If not processor id is specified, all processors are refreshed. - * + * * @param {string} id Optional */ refresh: function (id) { @@ -722,27 +804,27 @@ nf.Processor = (function () { d3.selectAll('g.processor').call(updateProcessors); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.processor.entering, g.processor.leaving').call(updateProcessors); }, - + /** * Reloads the processor state from the server and refreshes the UI. * If the processor is currently unknown, this function just returns. - * + * * @param {object} processor The processor to reload */ reload: function (processor) { @@ -756,12 +838,12 @@ nf.Processor = (function () { }); } }, - + /** - * Sets the specified processor(s). If the is an array, it - * will set each processor. If it is not an array, it will + * Sets the specified processor(s). If the is an array, it + * will set each processor. If it is not an array, it will * attempt to set the specified processor. - * + * * @param {object | array} processorEntities */ set: function (processorEntities) { @@ -770,7 +852,7 @@ nf.Processor = (function () { // update the current entry var processorEntry = processorMap.get(processorEntity.id); $.extend(processorEntry, processorEntity); - + // update the processor in the UI d3.select('#id-' + processorEntry.id).call(updateProcessors); } @@ -785,10 +867,10 @@ nf.Processor = (function () { set(processorEntities); } }, - + /** * Removes the specified processor. - * + * * @param {array|string} processors The processors */ remove: function (processors) { @@ -803,17 +885,17 @@ nf.Processor = (function () { // apply the selection and handle all removed processors select().exit().call(removeProcessors); }, - + /** * Removes all processors. */ removeAll: function () { nf.Processor.remove(processorMap.keys()); }, - + /** * Sets the processor status using the specified status. - * + * * @param {array} processorStatus Processor status */ setStatus: function (processorStatus) { @@ -837,7 +919,7 @@ nf.Processor = (function () { * Returns the default color that should be used when drawing a processor. */ defaultColor: function () { - return '#aaaaaa'; + return '#ffffff'; } }; }()); \ No newline at end of file diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js index 27fa46170d..9cfa194767 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-remote-process-group.js @@ -22,8 +22,8 @@ nf.RemoteProcessGroup = (function () { var PREVIEW_NAME_LENGTH = 30; var dimensions = { - width: 365, - height: 140 + width: 380, + height: 158 }; // -------------------------------------------- @@ -44,8 +44,8 @@ nf.RemoteProcessGroup = (function () { /** * Gets the process group comments. - * - * @param {object} d + * + * @param {object} d */ var getProcessGroupComments = function (d) { if (nf.Common.isBlank(d.component.comments)) { @@ -59,7 +59,9 @@ nf.RemoteProcessGroup = (function () { * Selects the remote process group elements against the current remote process group map. */ var select = function () { - return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values()); + return remoteProcessGroupContainer.selectAll('g.remote-process-group').data(remoteProcessGroupMap.values(), function (d) { + return d.id; + }); }; /** @@ -74,14 +76,14 @@ nf.RemoteProcessGroup = (function () { } var remoteProcessGroup = entered.append('g') - .attr({ - 'id': function (d) { - return 'id-' + d.id; - }, - 'class': 'remote-process-group component' - }) - .classed('selected', selected) - .call(nf.CanvasUtils.position); + .attr({ + 'id': function (d) { + return 'id-' + d.id; + }, + 'class': 'remote-process-group component' + }) + .classed('selected', selected) + .call(nf.CanvasUtils.position); // ---- // body @@ -89,63 +91,68 @@ nf.RemoteProcessGroup = (function () { // remote process group border remoteProcessGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'border', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': 'transparent', - 'stroke-opacity': 0.8, - 'stroke-width': 2, - 'stroke': '#294c58' - }); + .attr({ + 'class': 'border', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'fill': 'transparent', + 'stroke': 'transparent' + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); // remote process group body remoteProcessGroup.append('rect') - .attr({ - 'rx': 6, - 'ry': 6, - 'class': 'body', - 'width': function (d) { - return d.dimensions.width; - }, - 'height': function (d) { - return d.dimensions.height; - }, - 'fill': '#294c58', - 'fill-opacity': 0.8, - 'stroke-width': 0 - }); + .attr({ + 'class': 'body', + 'width': function (d) { + return d.dimensions.width; + }, + 'height': function (d) { + return d.dimensions.height; + }, + 'filter': 'url(#component-drop-shadow)', + 'stroke-width': 0 + }) + .classed('unauthorized', function (d) { + return d.accessPolicy.canRead === false; + }); + + // remote process group name background + remoteProcessGroup.append('rect') + .attr({ + 'width': function (d) { + return d.dimensions.width; + }, + 'height': 32, + 'fill': '#b8c6cd' + }); // remote process group name remoteProcessGroup.append('text') - .attr({ - 'x': 25, - 'y': 17, - 'width': 305, - 'height': 16, - 'font-size': '10pt', - 'font-weight': 'bold', - 'fill': '#ffffff', - 'class': 'remote-process-group-name' - }); + .attr({ + 'x': 30, + 'y': 20, + 'width': 305, + 'height': 16, + 'class': 'remote-process-group-name' + }); - // process group icon + // remote process group icon remoteProcessGroup.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/bgRemoteProcessGroupDetailsArea.png', - 'width': 352, - 'height': 89, - 'x': 6, - 'y': 38, - 'class': 'remote-process-group-preview' - }); + .call(nf.CanvasUtils.disableImageHref) + .attr({ + 'width': 352, + 'height': 89, + 'x': 6, + 'y': 38, + 'class': 'remote-process-group-preview' + }); // always support selection remoteProcessGroup.call(nf.Selectable.activate).call(nf.ContextMenu.activate); @@ -182,48 +189,59 @@ nf.RemoteProcessGroup = (function () { details = remoteProcessGroup.append('g').attr('class', 'remote-process-group-details'); // remote process group transmission status - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'remote-process-group-transmission-status', - 'width': 16, - 'height': 16, - 'x': 5, - 'y': 5 - }); + details.append('text') + .attr({ + 'class': 'remote-process-group-transmission-status', + 'x': 10, + 'y': 20 + }); + + // ------------------ + // details background + // ------------------ + + details.append('rect') + .attr({ + 'x': 0, + 'y': 32, + 'width': function () { + return remoteProcessGroupData.dimensions.width + }, + 'height': 24, + 'fill': '#e3e8eb' + }); + + // ------- + // details + // ------- // remote process group secure transfer - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'remote-process-group-transmission-secure', - 'width': 14, - 'height': 12, - 'x': 7, - 'y': 23 - }); + details.append('text') + .attr({ + 'class': 'remote-process-group-transmission-secure', + 'x': 10, + 'y': 48 + }); if (remoteProcessGroupData.accessPolicy.canRead) { // remote process group uri details.append('text') - .attr({ - 'x': 25, - 'y': 32, - 'width': 305, - 'height': 12, - 'font-size': '8pt', - 'fill': '#91b9ce', - 'class': 'remote-process-group-uri' - }) - .each(function (d) { - var remoteProcessGroupUri = d3.select(this); + .attr({ + 'x': 30, + 'y': 48, + 'width': 305, + 'height': 12, + 'class': 'remote-process-group-uri' + }) + .each(function (d) { + var remoteProcessGroupUri = d3.select(this); - // reset the remote process group name to handle any previous state - remoteProcessGroupUri.text(null).selectAll('title').remove(); + // reset the remote process group name to handle any previous state + remoteProcessGroupUri.text(null).selectAll('title').remove(); - // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUri); - }).append('title').text(function (d) { + // apply ellipsis to the remote process group name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupUri, d.component.targetUri); + }).append('title').text(function (d) { return d.component.name; }); } @@ -232,168 +250,53 @@ nf.RemoteProcessGroup = (function () { // stats background // ---------------- + // sent details.append('rect') - .attr({ - 'x': 6, - 'y': 38, - 'width': 352, - 'height': 89, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': '#ffffff' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 66, + 'fill': '#f4f6f7' + }); + // border details.append('rect') - .attr({ - 'x': 6, - 'y': 38, - 'width': 176, - 'height': 22, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)', - 'class': 'remote-process-group-input-container' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 84, + 'fill': '#c7d2d7' + }); + // received details.append('rect') - .attr({ - 'x': 182, - 'y': 38, - 'width': 176, - 'height': 22, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)', - 'class': 'remote-process-group-output-container' - }); + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 19, + 'x': 0, + 'y': 85, + 'fill': '#ffffff' + }); + // border details.append('rect') - .attr({ - 'x': 6, - 'y': 94, - 'width': 352, - 'height': 33, - 'stroke-width': 1, - 'stroke': '#6f97ac', - 'fill': 'url(#process-group-stats-background)' - }); - - // -------- - // contents - // -------- - - if (remoteProcessGroupData.accessPolicy.canRead) { - // input ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconInputPortSmall.png', - 'width': 16, - 'height': 16, - 'x': 10, - 'y': 41 - }); - - // input ports count - details.append('text') - .attr({ - 'x': 30, - 'y': 53, - 'class': 'remote-process-group-input-port-count process-group-contents-count' - }); - - // input transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionActive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-input-transmitting' - }); - - // input transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-input-transmitting-count process-group-contents-count' - }); - - // input not transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionInactive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-input-not-transmitting' - }); - - // input not transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-input-not-transmitting-count process-group-contents-count' - }); - - // output ports icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconOutputPortSmall.png', - 'width': 16, - 'height': 16, - 'x': 186, - 'y': 41, - 'class': 'remote-process-group-output-port' - }); - - // output ports count - details.append('text') - .attr({ - 'x': 206, - 'y': 53, - 'class': 'remote-process-group-output-port-count process-group-contents-count' - }); - - // output transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionActive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-output-transmitting' - }); - - // output transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-output-transmitting-count process-group-contents-count' - }); - - // output not transmitting icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'xlink:href': 'images/iconTransmissionInactive.png', - 'width': 16, - 'height': 16, - 'y': 41, - 'class': 'remote-process-group-output-not-transmitting' - }); - - // output not transmitting count - details.append('text') - .attr({ - 'y': 53, - 'class': 'remote-process-group-output-not-transmitting-count process-group-contents-count' - }); - } + .attr({ + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 1, + 'x': 0, + 'y': 103, + 'fill': '#c7d2d7' + }); // ----- // stats @@ -401,85 +304,85 @@ nf.RemoteProcessGroup = (function () { // stats label container var remoteProcessGroupStatsLabel = details.append('g') - .attr({ - 'transform': 'translate(6, 70)' - }); + .attr({ + 'transform': 'translate(6, 75)' + }); // sent label remoteProcessGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-stats-label' - }) - .text('Sent'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'stats-label' + }) + .text('Sent'); // received label remoteProcessGroupStatsLabel.append('text') - .attr({ - 'width': 73, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-label' - }) - .text('Received'); + .attr({ + 'width': 73, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'stats-label' + }) + .text('Received'); // stats value container var remoteProcessGroupStatsValue = details.append('g') - .attr({ - 'transform': 'translate(95, 70)' - }); + .attr({ + 'transform': 'translate(95, 75)' + }); // queued value remoteProcessGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'remote-process-group-sent process-group-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'remote-process-group-sent stats-value' + }); // received value remoteProcessGroupStatsValue.append('text') - .attr({ - 'width': 180, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'remote-process-group-received process-group-stats-value' - }); + .attr({ + 'width': 180, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'remote-process-group-received stats-value' + }); // stats value container var processGroupStatsInfo = details.append('g') - .attr({ - 'transform': 'translate(315, 70)' - }); + .attr({ + 'transform': 'translate(335, 75)' + }); // sent info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 4, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 5, + 'class': 'stats-info' + }) + .text('5 min'); // received info processGroupStatsInfo.append('text') - .attr({ - 'width': 25, - 'height': 10, - 'x': 4, - 'y': 17, - 'class': 'process-group-stats-info' - }) - .text('(5 min)'); + .attr({ + 'width': 25, + 'height': 10, + 'x': 4, + 'y': 23, + 'class': 'stats-info' + }) + .text('5 min'); // -------- // comments @@ -487,101 +390,120 @@ nf.RemoteProcessGroup = (function () { // process group comments details.append('text') - .attr({ - 'x': 10, - 'y': 108, - 'width': 342, - 'height': 22, - 'class': 'remote-process-group-comments' - }); + .attr({ + 'x': 10, + 'y': 121, + 'width': 342, + 'height': 22, + 'class': 'remote-process-group-comments' + }); // ------------------- // last refreshed time // ------------------- - details.append('text') - .attr({ - 'x': 358, - 'y': 137, - 'class': 'remote-process-group-last-refresh' - }); - - // ------------------- - // active thread count - // ------------------- - - // active thread count details.append('rect') - .attr({ - 'class': 'active-thread-count-background', - 'height': 13, - 'y': 0, - 'fill': '#fff', - 'fill-opacity': '0.4', - 'stroke': '#aaa', - 'stroke-width': '1' - }); + .attr({ + 'x': 0, + 'y': function () { + return remoteProcessGroupData.dimensions.height - 24; + }, + 'width': function () { + return remoteProcessGroupData.dimensions.width; + }, + 'height': 24, + 'fill': '#e3e8eb' + }); - // active thread bacground details.append('text') - .attr({ - 'class': 'active-thread-count', - 'height': 13, - 'y': 10, - 'fill': '#000' - }); + .attr({ + 'x': 370, + 'y': 150, + 'class': 'remote-process-group-last-refresh' + }); + + // ------------------- + // active thread count + // ------------------- + + // active thread count + details.append('text') + .attr({ + 'class': 'active-thread-count-icon', + 'y': 20 + }) + .text('\ue83f'); + + // active thread icon + details.append('text') + .attr({ + 'class': 'active-thread-count', + 'y': 20 + }); // --------- // bulletins // --------- + // bulletin background + details.append('rect') + .attr({ + 'class': 'bulletin-background', + 'x': function () { + return remoteProcessGroupData.dimensions.width - 24; + }, + 'y': 32, + 'width': 24, + 'height': 24 + }); + // bulletin icon - details.append('image') - .call(nf.CanvasUtils.disableImageHref) - .attr({ - 'class': 'bulletin-icon', - 'xlink:href': 'images/iconBulletin.png', - 'width': 12, - 'height': 12, - 'y': 2 - }); + details.append('text') + .attr({ + 'class': 'bulletin-icon', + 'x': function () { + return remoteProcessGroupData.dimensions.width - 17; + }, + 'y': 50 + }) + .text('\uf24a'); } if (remoteProcessGroupData.accessPolicy.canRead) { // update the process groups transmission status - details.select('image.remote-process-group-transmission-secure') - .attr('xlink:href', function (d) { - var img = ''; - if (d.component.targetSecure === true) { - img = 'images/iconSecure.png'; - } else { - img = 'images/iconNotSecure.png'; - } - return img; - }) - .each(function (d) { - // remove the existing tip if necessary - var tip = d3.select('#transmission-secure-' + d.id); - if (!tip.empty()) { - tip.remove(); - } + details.select('text.remote-process-group-transmission-secure') + .text(function (d) { + var icon = ''; + if (d.component.targetSecure === true) { + icon = '\uf023'; + } else { + icon = '\uf09c'; + } + return icon; + }) + .each(function (d) { + // remove the existing tip if necessary + var tip = d3.select('#transmission-secure-' + d.id); + if (!tip.empty()) { + tip.remove(); + } - tip = d3.select('#remote-process-group-tooltips').append('div') - .attr('id', function () { - return 'transmission-secure-' + d.id; - }) - .attr('class', 'tooltip nifi-tooltip') - .text(function () { - if (d.component.targetSecure === true) { - return 'Site-to-Site is secure.'; - } else { - return 'Site-to-Site is NOT secure.'; - } - }); + tip = d3.select('#remote-process-group-tooltips').append('div') + .attr('id', function () { + return 'transmission-secure-' + d.id; + }) + .attr('class', 'tooltip nifi-tooltip') + .text(function () { + if (d.component.targetSecure === true) { + return 'Site-to-Site is secure.'; + } else { + return 'Site-to-Site is NOT secure.'; + } + }); - // add the tooltip - nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); - }); + // add the tooltip + nf.CanvasUtils.canvasTooltip(tip, d3.select(this)); + }); // ---------------------- // update the input ports @@ -589,45 +511,45 @@ nf.RemoteProcessGroup = (function () { // input port count details.select('text.remote-process-group-input-port-count') - .text(function (d) { - return d.component.inputPortCount; - }); + .text(function (d) { + return d.component.inputPortCount; + }); // get the input port container to help right align var inputContainer = details.select('rect.remote-process-group-input-container'); // update input not transmitting var inputNotTransmittingCount = details.select('text.remote-process-group-input-not-transmitting-count') - .text(function (d) { - return d.component.inactiveRemoteInputPortCount; - }) - .attr('x', function () { - var containerX = parseInt(inputContainer.attr('x'), 10); - var containerWidth = parseInt(inputContainer.attr('width'), 10); - return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.inactiveRemoteInputPortCount; + }) + .attr('x', function () { + var containerX = parseInt(inputContainer.attr('x'), 10); + var containerWidth = parseInt(inputContainer.attr('width'), 10); + return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; + }); var inputNotTransmitting = details.select('image.remote-process-group-input-not-transmitting') - .attr('x', function () { - var inputNotTransmittingCountX = parseInt(inputNotTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return inputNotTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var inputNotTransmittingCountX = parseInt(inputNotTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return inputNotTransmittingCountX - width - CONTENTS_SPACER; + }); // update input transmitting var inputTransmittingCount = details.select('text.remote-process-group-input-transmitting-count') - .text(function (d) { - return d.component.activeRemoteInputPortCount; - }) - .attr('x', function () { - var inputNotTransmittingX = parseInt(inputNotTransmitting.attr('x'), 10); - return inputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.activeRemoteInputPortCount; + }) + .attr('x', function () { + var inputNotTransmittingX = parseInt(inputNotTransmitting.attr('x'), 10); + return inputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; + }); details.select('image.remote-process-group-input-transmitting') - .attr('x', function () { - var inputTransmittingCountX = parseInt(inputTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return inputTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var inputTransmittingCountX = parseInt(inputTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return inputTransmittingCountX - width - CONTENTS_SPACER; + }); // ----------------------- // update the output ports @@ -635,45 +557,45 @@ nf.RemoteProcessGroup = (function () { // output port count details.select('text.remote-process-group-output-port-count') - .text(function (d) { - return d.component.outputPortCount; - }); + .text(function (d) { + return d.component.outputPortCount; + }); // get the output port container to help right align var outputContainer = details.select('rect.remote-process-group-output-container'); // update input not transmitting var outputNotTransmittingCount = details.select('text.remote-process-group-output-not-transmitting-count') - .text(function (d) { - return d.component.inactiveRemoteOutputPortCount; - }) - .attr('x', function () { - var containerX = parseInt(outputContainer.attr('x'), 10); - var containerWidth = parseInt(outputContainer.attr('width'), 10); - return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.inactiveRemoteOutputPortCount; + }) + .attr('x', function () { + var containerX = parseInt(outputContainer.attr('x'), 10); + var containerWidth = parseInt(outputContainer.attr('width'), 10); + return containerX + containerWidth - this.getComputedTextLength() - CONTENTS_SPACER; + }); var outputNotTransmitting = details.select('image.remote-process-group-output-not-transmitting') - .attr('x', function () { - var outputNotTransmittingCountX = parseInt(outputNotTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return outputNotTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var outputNotTransmittingCountX = parseInt(outputNotTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return outputNotTransmittingCountX - width - CONTENTS_SPACER; + }); // update output transmitting var outputTransmittingCount = details.select('text.remote-process-group-output-transmitting-count') - .text(function (d) { - return d.component.activeRemoteOutputPortCount; - }) - .attr('x', function () { - var outputNotTransmittingX = parseInt(outputNotTransmitting.attr('x'), 10); - return outputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; - }); + .text(function (d) { + return d.component.activeRemoteOutputPortCount; + }) + .attr('x', function () { + var outputNotTransmittingX = parseInt(outputNotTransmitting.attr('x'), 10); + return outputNotTransmittingX - this.getComputedTextLength() - CONTENTS_SPACER; + }); details.select('image.remote-process-group-output-transmitting') - .attr('x', function () { - var outputTransmittingCountX = parseInt(outputTransmittingCount.attr('x'), 10); - var width = parseInt(d3.select(this).attr('width'), 10); - return outputTransmittingCountX - width - CONTENTS_SPACER; - }); + .attr('x', function () { + var outputTransmittingCountX = parseInt(outputTransmittingCount.attr('x'), 10); + var width = parseInt(d3.select(this).attr('width'), 10); + return outputTransmittingCountX - width - CONTENTS_SPACER; + }); // --------------- // update comments @@ -681,15 +603,15 @@ nf.RemoteProcessGroup = (function () { // update the process group comments details.select('text.remote-process-group-comments') - .each(function (d) { - var remoteProcessGroupComments = d3.select(this); + .each(function (d) { + var remoteProcessGroupComments = d3.select(this); - // reset the processor name to handle any previous state - remoteProcessGroupComments.text(null).selectAll('tspan, title').remove(); + // reset the processor name to handle any previous state + remoteProcessGroupComments.text(null).selectAll('tspan, title').remove(); - // apply ellipsis to the port name as necessary - nf.CanvasUtils.multilineEllipsis(remoteProcessGroupComments, 2, getProcessGroupComments(d)); - }).classed('unset', function (d) { + // apply ellipsis to the port name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupComments, getProcessGroupComments(d)); + }).classed('unset', function (d) { return nf.Common.isBlank(d.component.comments); }).append('title').text(function (d) { return getProcessGroupComments(d); @@ -700,25 +622,25 @@ nf.RemoteProcessGroup = (function () { // -------------- details.select('text.remote-process-group-last-refresh') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.component.flowRefreshed)) { - return d.component.flowRefreshed; - } else { - return 'Remote flow not current'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.component.flowRefreshed)) { + return d.component.flowRefreshed; + } else { + return 'Remote flow not current'; + } + }); // update the process group name remoteProcessGroup.select('text.remote-process-group-name') - .each(function (d) { - var remoteProcessGroupName = d3.select(this); + .each(function (d) { + var remoteProcessGroupName = d3.select(this); - // reset the remote process group name to handle any previous state - remoteProcessGroupName.text(null).selectAll('title').remove(); + // reset the remote process group name to handle any previous state + remoteProcessGroupName.text(null).selectAll('title').remove(); - // apply ellipsis to the remote process group name as necessary - nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); - }).append('title').text(function (d) { + // apply ellipsis to the remote process group name as necessary + nf.CanvasUtils.ellipsis(remoteProcessGroupName, d.component.name); + }).append('title').text(function (d) { return d.component.name; }); } @@ -732,14 +654,14 @@ nf.RemoteProcessGroup = (function () { if (remoteProcessGroupData.accessPolicy.canRead) { // update the process group name remoteProcessGroup.select('text.remote-process-group-name') - .text(function (d) { - var name = d.component.name; - if (name.length > PREVIEW_NAME_LENGTH) { - return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); - } else { - return name; - } - }); + .text(function (d) { + var name = d.component.name; + if (name.length > PREVIEW_NAME_LENGTH) { + return name.substring(0, PREVIEW_NAME_LENGTH) + String.fromCharCode(8230); + } else { + return name; + } + }); } // show the preview @@ -758,7 +680,7 @@ nf.RemoteProcessGroup = (function () { /** * Updates the process group status. - * + * * @param {selection} updated The process groups to be updated */ var updateProcessGroupStatus = function (updated) { @@ -768,23 +690,23 @@ nf.RemoteProcessGroup = (function () { // sent value updated.select('text.remote-process-group-sent') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.sent; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.sent; + } else { + return '- / -'; + } + }); // received value updated.select('text.remote-process-group-received') - .text(function (d) { - if (nf.Common.isDefinedAndNotNull(d.status)) { - return d.status.received; - } else { - return '- / -'; - } - }); + .text(function (d) { + if (nf.Common.isDefinedAndNotNull(d.status)) { + return d.status.received; + } else { + return '- / -'; + } + }); // -------------------- // authorization issues @@ -792,19 +714,31 @@ nf.RemoteProcessGroup = (function () { // TODO - only consider state from the status // update the process groups transmission status - updated.select('image.remote-process-group-transmission-status') - .attr('xlink:href', function (d) { - var img = ''; + updated.select('text.remote-process-group-transmission-status') + .text(function (d) { + var icon = ''; if (nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues)) { - img = 'images/iconAlert.png'; + icon = '\uf071'; } else if (d.accessPolicy.canRead) { if (d.component.transmitting === true) { - img = 'images/iconTransmissionActive.png'; + icon = '\uf140'; } else { - img = 'images/iconTransmissionInactive.png'; + icon = '\ue80a'; } } - return img; + return icon; + }) + .attr('font-family', function (d) { + var family = ''; + if (nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues) || (d.accessPolicy.canRead && d.component.transmitting)) { + family = 'FontAwesome'; + } else { + family = 'flowfont'; + } + return family; + }) + .classed('has-authorization-errors', function (d) { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.authorizationIssues); }) .each(function (d) { // remove the existing tip if necessary @@ -850,6 +784,10 @@ nf.RemoteProcessGroup = (function () { // bulletins // --------- + remoteProcessGroup.select('rect.bulletin-background').classed('has-bulletins', function () { + return nf.Common.isDefinedAndNotNull(d.status) && !nf.Common.isEmpty(d.status.bulletins); + }); + nf.CanvasUtils.bulletins(remoteProcessGroup, d, function () { return d3.select('#remote-process-group-tooltips'); }, offset); @@ -871,7 +809,7 @@ nf.RemoteProcessGroup = (function () { /** * Removes the tooltips for the remote process groups in the specified selection. - * + * * @param {type} removed */ var removeTooltips = function (removed) { @@ -892,12 +830,12 @@ nf.RemoteProcessGroup = (function () { // create the process group container remoteProcessGroupContainer = d3.select('#canvas').append('g') - .attr({ - 'pointer-events': 'all', - 'class': 'remote-process-groups' - }); + .attr({ + 'pointer-events': 'all', + 'class': 'remote-process-groups' + }); }, - + /** * Populates the graph with the specified remote process groups. * @@ -927,9 +865,9 @@ nf.RemoteProcessGroup = (function () { // apply the selection and handle all new remote process groups select().enter().call(renderRemoteProcessGroups, selectAll); }, - + /** - * If the remote process group id is specified it is returned. If no remote process + * If the remote process group id is specified it is returned. If no remote process * group id specified, all remote process groups are returned. * * @param {string} id @@ -941,7 +879,7 @@ nf.RemoteProcessGroup = (function () { return remoteProcessGroupMap.get(id); } }, - + /** * If the remote process group id is specified it is refresh according to the current * state. If no remote process group id is specified, all remote process groups are refreshed. @@ -955,14 +893,14 @@ nf.RemoteProcessGroup = (function () { d3.selectAll('g.remote-process-group').call(updateRemoteProcessGroups); } }, - + /** * Refreshes the components necessary after a pan event. */ pan: function () { d3.selectAll('g.remote-process-group.entering, g.remote-process-group.leaving').call(updateRemoteProcessGroups); }, - + /** * Reloads the remote process group state from the server and refreshes the UI. * If the remote process group is currently unknown, this function just returns. @@ -986,16 +924,16 @@ nf.RemoteProcessGroup = (function () { }); } }, - + /** * Positions the component. - * + * * @param {string} id The id */ position: function (id) { d3.select('#id-' + id).call(nf.CanvasUtils.position); }, - + /** * Sets the specified remote process group(s). If the is an array, it * will set each remote process group. If it is not an array, it will @@ -1009,7 +947,7 @@ nf.RemoteProcessGroup = (function () { // update the current entry var remoteProcessGroupEntry = remoteProcessGroupMap.get(remoteProcessGroupEntity.id); $.extend(remoteProcessGroupEntry, remoteProcessGroupEntity); - + // update the remote process group in the UI d3.select('#id-' + remoteProcessGroupEntry.id).call(updateRemoteProcessGroups); } @@ -1024,10 +962,10 @@ nf.RemoteProcessGroup = (function () { set(remoteProcessGroupEntities); } }, - + /** * Sets the remote process group status using the specified status. - * + * * @param {array | object} remoteProcessGroupStatus Remote process group status */ setStatus: function (remoteProcessGroupStatus) { @@ -1064,7 +1002,7 @@ nf.RemoteProcessGroup = (function () { // apply the selection and handle all removed remote process groups select().exit().call(removeRemoteProcessGroups); }, - + /** * Removes all remote process groups. */ diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js index 879fb56ffe..882667199a 100644 --- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js +++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-common.js @@ -722,6 +722,43 @@ nf.Common = (function () { return result; }, + /** + * Extracts the contents of the specified str after the strToFind. If the + * strToFind is not found or the last part of the str, an empty string is + * returned. + * + * @argument {string} str The full string + * @argument {string} strToFind The substring to find + */ + substringAfterFirst: function (str, strToFind) { + var result = ''; + var indexOfStrToFind = str.indexOf(strToFind); + if (indexOfStrToFind >= 0) { + var indexAfterStrToFind = indexOfStrToFind + strToFind.length; + if (indexAfterStrToFind < str.length) { + result = str.substr(indexAfterStrToFind); + } + } + return result; + }, + + /** + * Extracts the contents of the specified str before the strToFind. If the + * strToFind is not found or the first part of the str, an empty string is + * returned. + * + * @argument {string} str The full string + * @argument {string} strToFind The substring to find + */ + substringBeforeFirst: function(str, strToFind) { + var result = ''; + var indexOfStrToFind = str.indexOf(strToFind); + if (indexOfStrToFind >= 0) { + result = str.substr(0, indexOfStrToFind); + } + return result + }, + /** * Updates the mouse pointer. *