KYLIN-1772 region 0 segment UI refine
diff --git a/webapp/app/less/app.less b/webapp/app/less/app.less
index 483fd74..987a20b 100644
--- a/webapp/app/less/app.less
+++ b/webapp/app/less/app.less
@@ -238,6 +238,25 @@
 
 .cube-detail {
   background-color: white;
+  .cube-segment-list {
+    margin-bottom:10px;
+    padding: 4px 8px;
+    border:solid 1px #ddd;
+    ul {
+      li {
+        font-weight: 500;
+        span {
+          font-weight: normal;
+        }
+      }
+    }
+    &.cube-broken-segment {
+      color:#808080;
+      opacity: 0.6;
+      border-color: #808080;
+      border-style: dashed;
+    }
+  }
 }
 
 .model-detail {
diff --git a/webapp/app/partials/cubes/cube_detail.html b/webapp/app/partials/cubes/cube_detail.html
index 2218dde..17e89b4 100755
--- a/webapp/app/partials/cubes/cube_detail.html
+++ b/webapp/app/partials/cubes/cube_detail.html
@@ -101,21 +101,21 @@
     </div>
 
   <div class="cube-detail" ng-show="cube.visiblePage=='hbase'">
-        <div style="margin: 15px;">
+        <div style="margin: 15px; overflow: hidden;">
             <div ng-if="cube.hbase">
               <div class="hr hr8 hr-double hr-dotted"></div>
-              <h5><b>Segment Number:</b> <span class="red">{{cube.hbase.length}}</span> <b>Total Size:</b> <span class="red">{{cube.totalSize | bytes}}</span></h5>
+              <h5><b>Segment Number:</b> <span class="blue">{{cube.hbase.length}}</span> <b>Total Size:</b> <span class="blue">{{cube.totalSize | bytes}}</span></h5>
             </div>
-            <div ng-repeat="table in cube.hbase">
+            <div ng-repeat="table in cube.hbase" class="cube-segment-list" ng-class="{'cube-broken-segment': table.regionCount === 0}">
                 <h5><b>Segment:</b> {{table.segmentName}}</h5>
                 <ul>
-                    <li ng-if="cube.streaming">Status: <span class="red">{{table.segmentStatus}}</span></li>
-                    <li ng-if="cube.model.partition_desc.partition_date_column">Start Time: <span class="red">{{table.dateRangeStart | reverseToGMT0}}</span></li>
-                    <li ng-if="cube.model.partition_desc.partition_date_column">End Time: <span class="red">{{table.dateRangeEnd | reverseToGMT0}}</span></li>
-                    <li>Source Count: <span class="red">{{table.sourceCount}}</span></li>
-                    <li>HBase Table: <span class="red">{{table.tableName}}</span></li>
-                    <li>Region Count: <span class="red">{{table.regionCount}}</span></li>
-                    <li>Size: <span class="red">{{table.tableSize | bytes}}</span></li>
+                    <li ng-if="cube.streaming">Status: <span>{{table.segmentStatus}}</span></li>
+                    <li ng-if="cube.model.partition_desc.partition_date_column">Start Time: <span>{{table.dateRangeStart | reverseToGMT0}}</span></li>
+                    <li ng-if="cube.model.partition_desc.partition_date_column">End Time: <span>{{table.dateRangeEnd | reverseToGMT0}}</span></li>
+                    <li>Source Count: <span>{{table.sourceCount}}</span></li>
+                    <li>HBase Table: <span>{{table.tableName}}</span></li>
+                    <li>Region Count: <span ng-class="{'red': table.regionCount == 0}">{{table.regionCount}}</span></li>
+                    <li>Size: <span>{{table.tableSize | bytes}}</span></li>
                 </ul>
             </div>
             <div ng-if="cube.hbase.length == 0">