You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@nifi.apache.org by mc...@apache.org on 2016/11/15 16:56:21 UTC

nifi git commit: [NIFI-2844] Update CSS styles for Cluster Summary Dialog icons and refresh button. This closes #1104

Repository: nifi
Updated Branches:
  refs/heads/master 97cd94d26 -> 45bf8430f


[NIFI-2844] Update CSS styles for Cluster Summary Dialog icons and refresh button. This closes #1104


Project: http://git-wip-us.apache.org/repos/asf/nifi/repo
Commit: http://git-wip-us.apache.org/repos/asf/nifi/commit/45bf8430
Tree: http://git-wip-us.apache.org/repos/asf/nifi/tree/45bf8430
Diff: http://git-wip-us.apache.org/repos/asf/nifi/diff/45bf8430

Branch: refs/heads/master
Commit: 45bf8430fc035b34c20df165f8976e2bbc16140c
Parents: 97cd94d
Author: Scott Aslan <sc...@gmail.com>
Authored: Mon Nov 14 14:47:11 2016 -0500
Committer: Matt Gilman <ma...@gmail.com>
Committed: Tue Nov 15 11:55:42 2016 -0500

----------------------------------------------------------------------
 .../cluster-connection-summary-dialog.jsp       |   3 +-
 .../cluster-input-port-summary-dialog.jsp       |   3 +-
 .../cluster-output-port-summary-dialog.jsp      |   3 +-
 .../cluster-process-group-summary-dialog.jsp    |   3 +-
 .../cluster-processor-summary-dialog.jsp        |   3 +-
 ...ster-remote-process-group-summary-dialog.jsp |   3 +-
 .../nifi-web-ui/src/main/webapp/css/summary.css | 219 +++++++++++++------
 .../webapp/js/nf/summary/nf-summary-table.js    |  10 +-
 8 files changed, 171 insertions(+), 76 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
index de2d890..93e2293 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-connection-summary-dialog.jsp
@@ -27,9 +27,10 @@
                 <div id="cluster-connection-icon"></div>
                 <div id="cluster-connection-details">
                     <div id="cluster-connection-name"></div>
-                    <div id="cluster-connection-id"></div>
+                    <div id="cluster-connection-type"></div>
                     <div id="cluster-connection-group-id" class="hidden"></div>
                 </div>
+                <div id="cluster-connection-id"></div>
             </div>
         </div>
         <div id="cluster-connection-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
index 82d6a1d..e1708ea 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-input-port-summary-dialog.jsp
@@ -27,9 +27,10 @@
                 <div id="cluster-input-port-icon"></div>
                 <div id="cluster-input-port-details">
                     <div id="cluster-input-port-name"></div>
-                    <div id="cluster-input-port-id"></div>
+                    <div id="cluster-input-port-type"></div>
                     <div id="cluster-input-port-group-id" class="hidden"></div>
                 </div>
+                <div id="cluster-input-port-id"></div>
             </div>
         </div>
         <div id="cluster-input-port-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
index e30bbdc..4578ce3 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-output-port-summary-dialog.jsp
@@ -27,9 +27,10 @@
                 <div id="cluster-output-port-icon"></div>
                 <div id="cluster-output-port-details">
                     <div id="cluster-output-port-name"></div>
-                    <div id="cluster-output-port-id"></div>
+                    <div id="cluster-output-port-type"></div>
                     <div id="cluster-output-port-group-id" class="hidden"></div>
                 </div>
+                <div id="cluster-output-port-id"></div>
             </div>
         </div>
         <div id="cluster-output-port-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
index 820bf4f..c8044d0 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-process-group-summary-dialog.jsp
@@ -27,8 +27,9 @@
                 <div id="cluster-process-group-icon"></div>
                 <div id="cluster-process-group-details">
                     <div id="cluster-process-group-name"></div>
-                    <div id="cluster-process-group-id"></div>
+                    <div id="cluster-process-group-type"></div>
                 </div>
+                <div id="cluster-process-group-id"></div>
             </div>
         </div>
         <div id="cluster-process-group-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
index 40167a9..72018ab 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-processor-summary-dialog.jsp
@@ -27,9 +27,10 @@
                 <div id="cluster-processor-icon"></div>
                 <div id="cluster-processor-details">
                     <div id="cluster-processor-name"></div>
-                    <div id="cluster-processor-id"></div>
+                    <div id="cluster-processor-type"></div>
                     <div id="cluster-processor-group-id" class="hidden"></div>
                 </div>
+                <div id="cluster-processor-id"></div>
             </div>
         </div>
         <div id="cluster-processor-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
index ce126c5..e4872ef 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/summary/cluster-remote-process-group-summary-dialog.jsp
@@ -27,9 +27,10 @@
                 <div id="cluster-remote-process-group-icon"></div>
                 <div id="cluster-remote-process-group-details">
                     <div id="cluster-remote-process-group-name"></div>
-                    <div id="cluster-remote-process-group-id"></div>
+                    <div id="cluster-remote-process-group-type"></div>
                     <div id="cluster-remote-process-group-group-id" class="hidden"></div>
                 </div>
+                <div id="cluster-remote-process-group-id"></div>
             </div>
         </div>
         <div id="cluster-remote-process-group-summary-table"></div>

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
index 0310197..e56b4d7 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/summary.css
@@ -329,8 +329,6 @@ span.sorted {
 }
 
 #cluster-processor-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -350,34 +348,50 @@ span.sorted {
 #cluster-processor-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-processor-icon {
-    width: 28px;
-    height: 26px;
     float: left;
     margin-right: 5px;
-    margin-top: -2px;
 }
 
 #cluster-processor-icon:before {
     font-family: flowfont;
-    content: "\e808";
-    font-size: 16px;
+    content: "\e807";
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-processor-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-processor-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-processor-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-processor-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
 
 /* cluster input port summary table */
@@ -401,8 +415,6 @@ span.sorted {
 }
 
 #cluster-input-port-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -422,35 +434,50 @@ span.sorted {
 #cluster-input-port-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-input-port-icon {
-    background-size: cover;
-    width: 40px;
-    height: 26px;
     float: left;
     margin-right: 5px;
-    margin-top: -2px;
 }
 
 #cluster-input-port-icon:before {
     font-family: flowfont;
     content: "\e832";
-    font-size: 16px;
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-input-port-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-input-port-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-input-port-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-input-port-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
 
 /* cluster output port summary table */
@@ -474,8 +501,6 @@ span.sorted {
 }
 
 #cluster-output-port-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -495,35 +520,50 @@ span.sorted {
 #cluster-output-port-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-output-port-icon {
-    background-size: cover;
-    width: 40px;
-    height: 26px;
     float: left;
     margin-right: 5px;
-    margin-top: -2px;
 }
 
 #cluster-output-port-icon:before {
     font-family: flowfont;
     content: "\e833";
-    font-size: 16px;
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-output-port-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-output-port-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-output-port-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-output-port-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
 
 /* cluster remote process group summary table */
@@ -547,8 +587,6 @@ span.sorted {
 }
 
 #cluster-remote-process-group-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -568,11 +606,10 @@ span.sorted {
 #cluster-remote-process-group-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-remote-process-group-icon {
-    width: 30px;
-    height: 22px;
     float: left;
     margin-right: 5px;
 }
@@ -580,21 +617,39 @@ span.sorted {
 #cluster-remote-process-group-icon:before {
     font-family: flowfont;
     content: "\e805";
-    font-size: 16px;
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-remote-process-group-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-remote-process-group-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-remote-process-group-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-remote-process-group-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
 
 /* cluster connection summary table */
@@ -618,8 +673,6 @@ span.sorted {
 }
 
 #cluster-connection-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -639,34 +692,50 @@ span.sorted {
 #cluster-connection-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-connection-icon {
-    width: 28px;
-    height: 28px;
     float: left;
     margin-right: 5px;
-    margin-top: -4px;
 }
 
 #cluster-connection-icon:before {
     font-family: flowfont;
     content: "\e834";
-    font-size: 16px;
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-connection-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-connection-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-connection-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-connection-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
 
 /* cluster process group summary table */
@@ -690,8 +759,6 @@ span.sorted {
 }
 
 #cluster-process-group-refresh-button {
-    height: 24px;
-    width: 26px;
     float: left;
 }
 
@@ -711,32 +778,48 @@ span.sorted {
 #cluster-process-group-details-container {
     position: absolute;
     right: 35px;
+    height: 52px;
 }
 
 #cluster-process-group-icon {
-    width: 29px;
-    height: 20px;
     float: left;
     margin-right: 5px;
-    margin-top: 1px;
 }
 
 #cluster-process-group-icon:before {
     font-family: flowfont;
     content: "\e804";
-    font-size: 16px;
+    font-size: 32px;
     color: #ad9897;
 }
 
 #cluster-process-group-details {
     float: left;
+    padding-left: 10px;
 }
 
 #cluster-process-group-name {
-    margin-bottom: 2px;
-    color: #000;
-    font-weight: bold;
-    white-space: nowrap;
+    height: 15px;
+    font-size: 15px;
+    font-family: Roboto;
+    color: #262626;
+    width: 230px;
+    text-overflow: ellipsis;
     overflow: hidden;
-    width: 200px;
+    white-space: nowrap;
+}
+
+#cluster-process-group-type {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #728e9b;
+    margin-top: 3px;
+}
+
+#cluster-process-group-id {
+    font-size: 12px;
+    font-family: Roboto;
+    color: #775351;
+    position: absolute;
+    bottom: 0px;
 }
\ No newline at end of file

http://git-wip-us.apache.org/repos/asf/nifi/blob/45bf8430/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
----------------------------------------------------------------------
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
index 10ac093..b72f5bd 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/summary/nf-summary-table.js
@@ -1707,8 +1707,8 @@ nf.SummaryTable = (function () {
             }
 
             // generate the mark up
-            var formattedValue = '<div class="' + transmissionClass + '" style="margin-top: 5px;"></div>';
-            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div>';
+            var formattedValue = '<div layout="row"><div class="' + transmissionClass + '"></div>';
+            return formattedValue + '<div class="status-text" style="margin-top: 4px;">' + transmissionLabel + '</div><div style="float: left; margin-left: 4px;">' + nf.Common.escapeHtml(activeThreadCount) + '</div></div>';
         };
 
         var transmissionStatusColumn = {
@@ -2495,6 +2495,7 @@ nf.SummaryTable = (function () {
 
                 // populate the processor details
                 $('#cluster-processor-name').text(processorStatus.name).ellipsis();
+                $('#cluster-processor-type').text(processorStatus.aggregateSnapshot.type).ellipsis();
                 $('#cluster-processor-id').text(processorStatus.id);
                 $('#cluster-processor-group-id').text(processorStatus.groupId);
 
@@ -2551,6 +2552,7 @@ nf.SummaryTable = (function () {
 
                 // populate the processor details
                 $('#cluster-connection-name').text(connectionStatus.name).ellipsis();
+                $('#cluster-connection-type').text('Connection').ellipsis();
                 $('#cluster-connection-id').text(connectionStatus.id);
                 $('#cluster-connection-group-id').text(connectionStatus.groupId);
 
@@ -2611,6 +2613,7 @@ nf.SummaryTable = (function () {
 
                 // populate the input port details
                 $('#cluster-process-group-name').text(processGroupStatus.name).ellipsis();
+                $('#cluster-process-group-type').text('Process Group').ellipsis();
                 $('#cluster-process-group-id').text(processGroupStatus.id);
 
                 // update the stats last refreshed timestamp
@@ -2662,6 +2665,7 @@ nf.SummaryTable = (function () {
 
                 // populate the input port details
                 $('#cluster-input-port-name').text(inputPortStatus.name).ellipsis();
+                $('#cluster-input-port-type').text('Input Port').ellipsis();
                 $('#cluster-input-port-id').text(inputPortStatus.id);
                 $('#cluster-input-port-group-id').text(inputPortStatus.groupId);
 
@@ -2714,6 +2718,7 @@ nf.SummaryTable = (function () {
 
                 // populate the output port details
                 $('#cluster-output-port-name').text(outputPortStatus.name).ellipsis();
+                $('#cluster-output-port-type').text('Output Port').ellipsis();
                 $('#cluster-output-port-id').text(outputPortStatus.id);
                 $('#cluster-output-port-group-id').text(outputPortStatus.groupId);
 
@@ -2768,6 +2773,7 @@ nf.SummaryTable = (function () {
 
                 // populate the remote process group details
                 $('#cluster-remote-process-group-name').text(remoteProcessGroupStatus.name).ellipsis();
+                $('#cluster-remote-process-group-type').text('Remote Process Group').ellipsis();
                 $('#cluster-remote-process-group-id').text(remoteProcessGroupStatus.id);
                 $('#cluster-remote-process-group-group-id').text(remoteProcessGroupStatus.groupId);