MB-24033 revised usage meters & server/bucket details

pavel-blagodov · Michael Wiederhold · commit c9da9d706863 · 2017-04-27T21:38:06.000Z
- removed some data/labels from usage meters to simplify them and customized the display of each -> overview, servers, buckets - should be NO change to add bucket dialog - tightened layout of the details area in buckets and servers - added some new data to the text list of propoerties in servers/buckets - removed unused itemStyle and labelStyle - removed markers Change-Id: I6ddd046bd419da746873eeea07427f2a2517763e Reviewed-on: http://review.couchbase.org/77162 Tested-by: Pavel Blagodov <stochmail@gmail.com> Reviewed-by: Michael Wiederhold <mike@couchbase.com>
diff --git a/priv/public/ui/app/components/directives/mn_bar_usage/mn_bar_usage.html b/priv/public/ui/app/components/directives/mn_bar_usage/mn_bar_usage.html
@@ -14,11 +14,6 @@
      ng-repeat="item in config.items | orderBy:[]:true"
      ng-style="{width: item.itemStyle.width}"
      ng-class="'usage-item-' + $index"></div>
-<!--  <i
-     class="marker"
-     ng-repeat="marker in config.markers | orderBy:[]:true"
-     ng-style="{left: marker.itemStyle.left}"
-     ng-class="'marker-' + $index"></i>  -->
 </div>
 <div class="row">
   <span
diff --git a/priv/public/ui/app/components/directives/mn_bar_usage/mn_bar_usage.js b/priv/public/ui/app/components/directives/mn_bar_usage/mn_bar_usage.js
@@ -41,23 +41,10 @@
         _.each(values, function (item, i) {
           var v = values[i];
           values[i] += sum;
+          newOptions.items[i].itemStyle = newOptions.items[i].itemStyle || {};
           newOptions.items[i].itemStyle.width = values[i] + "%";
           sum += v;
         });
-        _.each(newOptions.markers, function (marker) {
-          var percent = mnCalculatePercentFilter(marker.value, total);
-          var i;
-          if (_.indexOf(values, percent) < 0 && (i = _.indexOf(values, percent+1)) >= 0) {
-            // if we're very close to some value, stick to it, so that
-            // rounding error is not visible
-            if (items[i].value - marker.value < sum*0.01) {
-              percent++;
-            }
-          }
-          marker.itemStyle = marker.itemStyle || {};
-          marker.itemStyle.left = (percent > 100 ? 100 : percent) + '%';
-          marker.itemStyle.zIndex = 4;
-        });
         newOptions.tdItems = _.select(newOptions.items, function (item) {
           return item.name !== null;
         });
diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
@@ -638,11 +638,13 @@ section.error {
   line-height: 2.2;
   font-size: .75rem;
   flex: 0 1 auto;
+  max-width: 280px;
 }
 .cbui-table-props {
-  margin-top: 1rem;
   font-size: .75rem;
   flex: 0 1 auto;
+  min-width: 280px;
+  max-width: 580px;
 }
 .cbui-table-props div {
   margin-top: .75rem;
@@ -652,10 +654,22 @@ section.error {
   margin-top: 0;
 }
 .cbui-table-meters {
-  margin: 1rem 0 0 4rem;
-  flex: 0 2 100%;
+  margin: 1rem 2rem 0 2rem;
+  flex: 0 1 100%;
+  max-width: 480px;
+}
+.cbui-table-meters + .cbui-table-meters {
+  margin: 1rem 2rem 0 1rem;
+}
+.cbui-table-meters.buckets .row {
+  display: block;
+}
+.cbui-table-meters.buckets .row span {
+  display: block;
+}
+.cbui-table-meters.servers .bar-usages .label-bottom-1.with-square:before {
+  background-color: #efebe0;
 }
-
 /* table cell-related stuff --------- */
 .cbui-table-cell {
   -webkit-box-flex: 1;
@@ -1218,6 +1232,18 @@ meter {
 .bar-usages.overcommitted .marker-1 {
   background-color: rgb(68, 66, 69);
 }
+.bar-usages.overcommitted.bar-usages-dashboard .label-bottom-1:before {
+  background-color: #e07f82; /* .red-3 */
+}
+.bar-usages.overcommitted.bar-usages-dashboard .label-bottom-2:before {
+  background-color: #efebe0;
+}
+.bar-usages.overcommitted.bar-usages-dashboard.has-free-space .usage-item-0 {
+  background-color: #efebe0;
+}
+.bar-usages.overcommitted.bar-usages-dashboard.has-free-space .usage-item-1 {
+  background-color: #e07f82; /* .red-3 */
+}
 
 /* spinner ---------------- */
 
diff --git a/priv/public/ui/app/mn_admin/mn_buckets/details/mn_buckets_details.html b/priv/public/ui/app/mn_admin/mn_buckets/details/mn_buckets_details.html
@@ -9,9 +9,13 @@
         <span ng-show="bucket.isEphemeral">Ephemeral</span>
       </div>
       <div class="nowrap" ng-show="rbac.cluster.bucket[bucket.name].settings.read">
-        <strong>RAM Quota: </strong>
+        <strong>Bucket RAM Quota: </strong>
         {{bucket.quota.ram | mnFormatQuantity}}
       </div>
+      <div class="nowrap" ng-show="rbac.cluster.bucket[bucket.name].settings.read">
+        <strong>Cluster RAM Quota: </strong>
+        {{bucket.basicStats.storageTotals.ram.quotaTotalPerNode | mnFormatQuantity}}
+      </div>
       <div
          class="nowrap"
          ng-if="rbac.cluster.bucket[bucket.name].settings.read"
@@ -43,7 +47,7 @@
       </div>
     </div>
 
-    <div class="cbui-table-meters">
+    <div class="cbui-table-meters buckets">
       <h5 ng-show="rbac.cluster.bucket[bucket.name].settings.read">Memory</h5>
       <hr>
       <div
@@ -53,12 +57,12 @@ <h5 ng-show="rbac.cluster.bucket[bucket.name].settings.read">Memory</h5>
          ng-show="rbac.cluster.bucket[bucket.name].settings.read">
       </div>
     </div>
-    <div class="cbui-table-meters">
+    <div class="cbui-table-meters buckets">
       <h5 ng-show="bucket.isMembase">Disk</h5>
       <hr ng-show="bucket.isMembase">
       <div ng-if="bucket.isMembase && rbac.cluster.bucket[bucket.name].settings.read">
         <div
-           class="bar-usages label-top-has-square label-top-0-other-data"
+           class="bar-usages"
            mn-bar-usage
            base-info="bucketsDetailsCtl.getGuageConfig(bucketsDetailsCtl.bucketDetails)"
            ng-if="rbac.cluster.bucket[bucket.name].settings.read">
@@ -71,10 +75,11 @@ <h5 ng-show="bucket.isMembase">Disk</h5>
      ng-if="bucketsDetailsCtl.warmUpTasks.length && rbac.cluster.tasks.read"
      mn-warmup-progress
      warm-up-tasks="bucketsDetailsCtl.warmUpTasks"
-     sort-by="hostname">
+     sort-by="hostname"
+     class="margin-bottom1">
   </div>
 
-  <div class="row flex-right margin-top1">
+  <div class="row flex-right">
     <span>
       <button
          class="outline"
diff --git a/priv/public/ui/app/mn_admin/mn_buckets/details/mn_buckets_details_service.js b/priv/public/ui/app/mn_admin/mn_buckets/details/mn_buckets_details_service.js
@@ -62,42 +62,24 @@
       };
       bucketRamGuageConfig.items = [{
         name: 'other buckets',
-        value: ramSummary.otherBuckets,
-        itemStyle: {'background-color': '#00BCE9', 'z-index': '2'},
-        labelStyle: {'color': '#1878a2', 'text-align': 'left'}
+        value: ramSummary.otherBuckets
       }, {
         name: 'this bucket',
-        value: ramSummary.thisAlloc,
-        itemStyle: {'background-color': '#7EDB49', 'z-index': '1'},
-        labelStyle: {'color': '#409f05', 'text-align': 'center'}
+        value: ramSummary.thisAlloc
       }, {
         name: 'remaining',
-        value: ramSummary.total - ramSummary.otherBuckets - ramSummary.thisAlloc,
-        itemStyle: {'background-color': '#E1E2E3'},
-        labelStyle: {'color': '#444245', 'text-align': 'right'}
+        value: ramSummary.total - ramSummary.otherBuckets - ramSummary.thisAlloc
       }];
-      bucketRamGuageConfig.markers = [];
 
       if (bucketRamGuageConfig.items[2].value < 0) {
         bucketRamGuageConfig.items[1].value = ramSummary.total - ramSummary.otherBuckets;
         bucketRamGuageConfig.items[2] = {
           name: 'overcommitted',
-          value: ramSummary.otherBuckets + ramSummary.thisAlloc - ramSummary.total,
-          itemStyle: {'background-color': '#F40015'},
-          labelStyle: {'color': '#e43a1b'}
+          value: ramSummary.otherBuckets + ramSummary.thisAlloc - ramSummary.total
         };
-        bucketRamGuageConfig.markers.push({
-          value: ramSummary.total,
-          itemStyle: {'background-color': '#444245'}
-        });
-        bucketRamGuageConfig.markers.push({
-          value: ramSummary.otherBuckets + ramSummary.thisAlloc,
-          itemStyle: {'background-color': 'red'}
-        });
         bucketRamGuageConfig.topLeft = {
           name: 'total allocated',
-          value: ramSummary.otherBuckets + ramSummary.thisAlloc,
-          itemStyle: {'color': '#e43a1b'}
+          value: ramSummary.otherBuckets + ramSummary.thisAlloc
         };
       }
       return bucketRamGuageConfig;
@@ -106,35 +88,19 @@
     function getGuageConfig(total, thisBucket, otherBuckets, otherData) {
       var free = total - otherData - thisBucket - otherBuckets;
 
-      guageConfig.topLeft = {
-        name: 'other data',
-        value: otherData,
-        itemStyle: {color: "#C19710"}
-      };
       guageConfig.topRight = {
         name: 'total cluster storage',
         value: total
       };
       guageConfig.items = [{
-        name: null,
-        value: otherData,
-        itemStyle: {'background-color':'#FDC90D', 'z-index': '3'},
-        labelStyle: {}
-      }, {
         name: 'other buckets',
-        value: otherBuckets,
-        itemStyle: {'background-color':'#00BCE9', 'z-index': '2'},
-        labelStyle: {'color':'#1878a2', 'text-align': 'left'}
+        value: otherBuckets
       }, {
         name: 'this bucket',
-        value: thisBucket,
-        itemStyle: {'background-color':'#7EDB49', 'z-index': '1'},
-        labelStyle: {'color':'#409f05', 'text-align': 'center'}
+        value: thisBucket
       }, {
         name: 'remaining',
-        value: free,
-        itemStyle: {'background-color':'#E1E2E3'},
-        labelStyle: {'color':'#444245', 'text-align': 'right'}
+        value: free
       }];
 
       return guageConfig;
diff --git a/priv/public/ui/app/mn_admin/mn_overview/mn_overview.html b/priv/public/ui/app/mn_admin/mn_overview/mn_overview.html
@@ -80,7 +80,11 @@ <h4>XDCR</h4>
        class="column width-6">
       <h4>Data Service Memory</h4>
       <div
-         class="bar-usages"
+         ng-class="{
+                   overcommitted: overviewCtl.mnOverviewConfig.ramOverviewConfig.items[1].name === 'overused',
+                   'has-free-space': overviewCtl.mnOverviewConfig.ramOverviewConfig.items[2].name === 'available'
+}"
+         class="bar-usages bar-usages-dashboard"
          mn-bar-usage
          base-info="overviewCtl.mnOverviewConfig.ramOverviewConfig"></div>
     </div>
diff --git a/priv/public/ui/app/mn_admin/mn_overview/mn_overview_service.js b/priv/public/ui/app/mn_admin/mn_overview/mn_overview_service.js
@@ -28,52 +28,28 @@
     };
 
     var ramOverviewConfigBase = {
-      topLeft: {
-        name: 'Total Allocated'
-      },
       topRight: {
-        name: 'Total in Cluster'
+        name: 'total quota'
       },
       items: [{
-        name: 'In Use',
-        itemStyle: {'background-color': '#00BCE9', 'z-index': 3},
-        labelStyle: {'color':'#1878a2', 'text-align': 'left'}
+        name: 'in use'
       }, {
-        name: 'Unused',
-        itemStyle: {'background-color': '#7EDB49', 'z-index': 2},
-        labelStyle: {'color': '#409f05', 'text-align': 'center'}
+        name: 'unused quota'
       }, {
-        name: 'Unallocated',
-        itemStyle: {'background-color': '#E1E2E3'},
-        labelStyle: {'color': '#444245', 'text-align': 'right'}
-      }],
-      markers: [{
-        itemStyle: {'background-color': '#e43a1b'}
+        name: 'unallocated'
       }]
     };
 
     var hddOverviewConfigBase = {
-      topLeft: {
-        name: 'Usable Free Space'
-      },
       topRight: {
-        name: 'Total Cluster Storage'
+        name: 'usable free space'
       },
       items: [{
-        name: 'In Use',
-        itemStyle: {'background-color': '#00BCE9', 'z-index': 3},
-        labelStyle: {'color': '#1878A2', 'text-align': 'left'}
+        name: 'in use by couchbase'
       }, {
-        name: 'Other Data',
-        itemStyle: {'background-color': '#FDC90D', 'z-index': 2},
-        labelStyle: {'color': '#C19710', 'text-align': 'center'}
+        name: 'other data'
       }, {
-        name: "Free",
-        itemStyle: {'background-color': '#E1E2E3'},
-        labelStyle: {'color': '#444245', 'text-align': 'right'}
-      }],
-      markers: [{
-        itemStyle: {'background-color': '#E43A1B'}
+        name: "free"
       }]
     };
 
@@ -144,30 +120,28 @@
 
           var ramOverviewConfig = _.clone(ramOverviewConfigBase, true);
 
-          ramOverviewConfig.topLeft.value = bucketsQuota;
-          ramOverviewConfig.topRight.value = quotaTotal;
+          ramOverviewConfig.topRight.value = bucketsQuota;
           ramOverviewConfig.items[0].value = usedQuota;
           ramOverviewConfig.items[1].value = bucketsQuota - usedQuota;
           ramOverviewConfig.items[2].value = Math.max(quotaTotal - bucketsQuota, 0);
-          ramOverviewConfig.markers[0].value = bucketsQuota
 
           if (ramOverviewConfig.items[1].value < 0) {
             ramOverviewConfig.items[0].value = bucketsQuota;
             ramOverviewConfig.items[1] = {
-              name: 'Overused',
-              value: usedQuota - bucketsQuota,
-              itemStyle: {'background-color': '#F40015', 'z-index': 4},
-              labelStyle: {'color': '#e43a1b'}
+              name: 'overused',
+              value: usedQuota - bucketsQuota
+            };
+            ramOverviewConfig.topRight = {
+              name: 'cluster quota',
+              value: quotaTotal
             };
             if (usedQuota < quotaTotal) {
-              ramOverviewConfig.items[2].name = 'Available';
-              ramOverviewConfig.items[2].value = quotaTotal - usedQuota;
+              ramOverviewConfig.items[2] = {
+                name: 'available',
+                value: quotaTotal - usedQuota
+              };
             } else {
-              ramOverviewConfig.items.length = 2;
-              ramOverviewConfig.markers.push({
-                value: quotaTotal,
-                itemStyle: {'color': '#444245', 'z-index': 5}
-              })
+              ramOverviewConfig.items.pop();
             }
           }
 
@@ -184,12 +158,10 @@
 
           var hddOverviewConfig = _.clone(hddOverviewConfigBase, true);
 
-          hddOverviewConfig.topLeft.value = free;
-          hddOverviewConfig.topRight.value = total;
+          hddOverviewConfig.topRight.value = free;
           hddOverviewConfig.items[0].value = usedSpace;
           hddOverviewConfig.items[1].value = other;
           hddOverviewConfig.items[2].value = total - other - usedSpace;
-          hddOverviewConfig.markers[0].value = other + usedSpace + free;
 
           rv.hddOverviewConfig = hddOverviewConfig;
         })();
diff --git a/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html b/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details.html
diff --git a/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details_service.js b/priv/public/ui/app/mn_admin/mn_servers/details/mn_servers_list_item_details_service.js
