From c3dbbb845fd0cb9079a3a1652930976e098fa2b6 Mon Sep 17 00:00:00 2001
From: Scott Aslan <scottyaslan@gmail.com>
Date: Mon, 27 Feb 2017 12:05:29 -0500
Subject: [PATCH] [NIFI-3038] Update cluster summary dialog layout. This closes
 #1534

---
 .../cluster-connection-summary-dialog.jsp     |  10 +-
 .../cluster-input-port-summary-dialog.jsp     |  10 +-
 .../cluster-output-port-summary-dialog.jsp    |  10 +-
 .../cluster-process-group-summary-dialog.jsp  |  10 +-
 .../cluster-processor-summary-dialog.jsp      |  10 +-
 ...er-remote-process-group-summary-dialog.jsp |  10 +-
 .../src/main/webapp/css/summary.css           | 180 ++++++++++++------
 7 files changed, 156 insertions(+), 84 deletions(-)

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 93e229353b..77a631f891 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
@@ -18,11 +18,6 @@
 <div id="cluster-connection-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-connection-summary-header">
-            <button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-connection-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-connection-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-connection-summary-loading-container" class="loading-container"></div>
             <div id="cluster-connection-details-container">
                 <div id="cluster-connection-icon"></div>
                 <div id="cluster-connection-details">
@@ -35,4 +30,9 @@
         </div>
         <div id="cluster-connection-summary-table"></div>
     </div>
+    <button id="cluster-connection-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-connection-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-connection-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-connection-summary-loading-container" class="loading-container"></div>
 </div>
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 e1708ea6f4..854e211295 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
@@ -18,11 +18,6 @@
 <div id="cluster-input-port-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-input-port-summary-header">
-            <button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-input-port-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-input-port-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-input-port-summary-loading-container" class="loading-container"></div>
             <div id="cluster-input-port-details-container">
                 <div id="cluster-input-port-icon"></div>
                 <div id="cluster-input-port-details">
@@ -35,4 +30,9 @@
         </div>
         <div id="cluster-input-port-summary-table"></div>
     </div>
+    <button id="cluster-input-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-input-port-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-input-port-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-input-port-summary-loading-container" class="loading-container"></div>
 </div>
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 4578ce397e..c16c53bc96 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
@@ -18,11 +18,6 @@
 <div id="cluster-output-port-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-output-port-summary-header">
-            <button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-output-port-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-output-port-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-output-port-summary-loading-container" class="loading-container"></div>
             <div id="cluster-output-port-details-container">
                 <div id="cluster-output-port-icon"></div>
                 <div id="cluster-output-port-details">
@@ -35,4 +30,9 @@
         </div>
         <div id="cluster-output-port-summary-table"></div>
     </div>
+    <button id="cluster-output-port-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-output-port-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-output-port-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-output-port-summary-loading-container" class="loading-container"></div>
 </div>
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 c8044d0467..f1dbf89dff 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
@@ -18,11 +18,6 @@
 <div id="cluster-process-group-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-process-group-summary-header">
-            <button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-process-group-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-process-group-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-process-group-summary-loading-container" class="loading-container"></div>
             <div id="cluster-process-group-details-container">
                 <div id="cluster-process-group-icon"></div>
                 <div id="cluster-process-group-details">
@@ -34,4 +29,9 @@
         </div>
         <div id="cluster-process-group-summary-table"></div>
     </div>
+    <button id="cluster-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-process-group-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-process-group-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-process-group-summary-loading-container" class="loading-container"></div>
 </div>
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 72018ab7ab..1c1132321b 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
@@ -18,11 +18,6 @@
 <div id="cluster-processor-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-processor-summary-header">
-            <button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-processor-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-processor-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-processor-summary-loading-container" class="loading-container"></div>
             <div id="cluster-processor-details-container">
                 <div id="cluster-processor-icon"></div>
                 <div id="cluster-processor-details">
@@ -35,4 +30,9 @@
         </div>
         <div id="cluster-processor-summary-table"></div>
     </div>
+    <button id="cluster-processor-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-processor-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-processor-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-processor-summary-loading-container" class="loading-container"></div>
 </div>
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 e4872ef657..540cd4237c 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
@@ -18,11 +18,6 @@
 <div id="cluster-remote-process-group-summary-dialog" class="hidden large-dialog">
     <div class="dialog-content">
         <div id="cluster-remote-process-group-summary-header">
-            <button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
-            <div id="cluster-remote-process-group-summary-last-refreshed-container" class="last-refreshed-container">
-                Last updated:&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed"></span>
-            </div>
-            <div id="cluster-remote-process-group-summary-loading-container" class="loading-container"></div>
             <div id="cluster-remote-process-group-details-container">
                 <div id="cluster-remote-process-group-icon"></div>
                 <div id="cluster-remote-process-group-details">
@@ -35,4 +30,9 @@
         </div>
         <div id="cluster-remote-process-group-summary-table"></div>
     </div>
+    <button id="cluster-remote-process-group-refresh-button" class="refresh-button pointer fa fa-refresh" title="Refresh"></button>
+    <div id="cluster-remote-process-group-summary-last-refreshed-container" class="last-refreshed-container">
+        Last updated:&nbsp;<span id="cluster-remote-process-group-summary-last-refreshed" class="value-color"></span>
+    </div>
+    <div id="cluster-remote-process-group-summary-loading-container" class="loading-container"></div>
 </div>
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 0ca16786fb..07bffc26f6 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
@@ -326,7 +326,15 @@ span.sorted {
 }
 
 #cluster-processor-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-processor-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-processor-summary-last-refreshed {
@@ -334,7 +342,9 @@ span.sorted {
 }
 
 #cluster-processor-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -344,8 +354,9 @@ span.sorted {
 
 #cluster-processor-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-processor-icon {
@@ -360,17 +371,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-processor-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-processor-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -381,6 +386,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-processor-id {
@@ -389,6 +396,11 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
 
 /* cluster input port summary table */
@@ -412,7 +424,15 @@ span.sorted {
 }
 
 #cluster-input-port-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-input-port-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-input-port-summary-last-refreshed {
@@ -420,7 +440,9 @@ span.sorted {
 }
 
 #cluster-input-port-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -430,8 +452,9 @@ span.sorted {
 
 #cluster-input-port-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-input-port-icon {
@@ -446,17 +469,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-input-port-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-input-port-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -467,6 +484,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-input-port-id {
@@ -475,6 +494,11 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
 
 /* cluster output port summary table */
@@ -498,7 +522,15 @@ span.sorted {
 }
 
 #cluster-output-port-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-output-port-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-output-port-summary-last-refreshed {
@@ -506,7 +538,9 @@ span.sorted {
 }
 
 #cluster-output-port-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -516,8 +550,9 @@ span.sorted {
 
 #cluster-output-port-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-output-port-icon {
@@ -532,17 +567,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-output-port-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-output-port-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -553,6 +582,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-output-port-id {
@@ -561,6 +592,11 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
 
 /* cluster remote process group summary table */
@@ -584,7 +620,15 @@ span.sorted {
 }
 
 #cluster-remote-process-group-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-remote-process-group-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-remote-process-group-summary-last-refreshed {
@@ -592,7 +636,9 @@ span.sorted {
 }
 
 #cluster-remote-process-group-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -602,8 +648,9 @@ span.sorted {
 
 #cluster-remote-process-group-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-remote-process-group-icon {
@@ -618,17 +665,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-remote-process-group-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-remote-process-group-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -639,6 +680,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-remote-process-group-id {
@@ -647,6 +690,11 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
 
 /* cluster connection summary table */
@@ -670,7 +718,15 @@ span.sorted {
 }
 
 #cluster-connection-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-connection-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-connection-summary-last-refreshed {
@@ -678,7 +734,9 @@ span.sorted {
 }
 
 #cluster-connection-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -688,8 +746,9 @@ span.sorted {
 
 #cluster-connection-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-connection-icon {
@@ -704,17 +763,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-connection-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-connection-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -725,6 +778,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-connection-id {
@@ -733,6 +788,11 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
 
 /* cluster process group summary table */
@@ -756,7 +816,15 @@ span.sorted {
 }
 
 #cluster-process-group-refresh-button {
-    float: left;
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+}
+
+#cluster-process-group-summary-last-refreshed-container {
+    position: absolute;
+    bottom: 27px;
+    left: 48px;
 }
 
 #cluster-process-group-summary-last-refreshed {
@@ -764,7 +832,9 @@ span.sorted {
 }
 
 #cluster-process-group-summary-loading-container {
-    float: left;
+    position: absolute;
+    bottom: 28px;
+    left: 212px;
     width: 16px;
     height: 16px;
     background-color: transparent;
@@ -774,8 +844,9 @@ span.sorted {
 
 #cluster-process-group-details-container {
     position: absolute;
-    right: 35px;
+    right: 0px;
     height: 52px;
+    left: 0px;
 }
 
 #cluster-process-group-icon {
@@ -790,17 +861,11 @@ span.sorted {
     color: #ad9897;
 }
 
-#cluster-process-group-details {
-    float: left;
-    padding-left: 10px;
-}
-
 #cluster-process-group-name {
     height: 15px;
     font-size: 15px;
     font-family: Roboto;
     color: #262626;
-    width: 230px;
     text-overflow: ellipsis;
     overflow: hidden;
     white-space: nowrap;
@@ -811,6 +876,8 @@ span.sorted {
     font-family: Roboto;
     color: #728e9b;
     margin-top: 3px;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 #cluster-process-group-id {
@@ -819,4 +886,9 @@ span.sorted {
     color: #775351;
     position: absolute;
     bottom: 0px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    left: 0px;
+    right: 0px;
 }
\ No newline at end of file