Chart builder style revision #1

Revise chart builder visual style: - pill navigation for stat sections - selectable filters for Data section - consolidated vertical space - made lists of stats + checkboxes into columns - made dialog wider + max-height-500 (scrolling) Change-Id: I37fe6e2150b076a73b8bd0a6cd356938b3f202d7 Reviewed-on: http://review.couchbase.org/106111 Reviewed-by: Rob Ashcom <[email protected]> Reviewed-by: Pavel Blagodov <[email protected]> Tested-by: Pavel Blagodov <[email protected]>
couchbase · Mar 21, 2019 · 9935a23 · 9935a23
1 parent 110dd43
commit 9935a23
Show file tree

Hide file tree

Showing 4 changed files with 136 additions and 84 deletions.
diff --git a/priv/public/ui/app/css/cbui-components.css b/priv/public/ui/app/css/cbui-components.css
@@ -728,6 +728,11 @@ section.error {
   width: 640px;
 }
 
+/* extra-large-width modal dialog (uses .panel) ------------------------------- */
+.dialog-xlg {
+  width: 720px;
+}
+
 /* LABELS & BADGES ------------------------------------------------------ */
 .label {
   font-size: .688rem;
@@ -2299,4 +2304,33 @@ nav.nav-sidebar-hidden {
 
 .nvd3.nv-scatter.nv-single-point .nv-groups .nv-group .nv-point:not(.hover) {
   fill-opacity: .0 !important;
-  stroke-opa
+  }
+/* stroke-opa */
+
+/*  checkbox filter widget for the chartbuilder data section  --------------- */
+.checkbox-filter {
+  border: 1px solid #d1d1d1;
+  border-radius: 5px;
+  margin: 0 .25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+.checkbox-filter:first-child {
+  margin: 0 .25rem 0 0;
+}
+.checkbox-filter:last-child {
+  margin: 0 0 0 .25rem;
+}
+.checkbox-filter input[type="checkbox"] + label:before {
+  display: none;
+}
+.checkbox-filter.selected {
+  background-color: #d9e7f7;
+}
+.checkbox-filter label {
+  width: 100%;
+  font-size: .8125rem!important;
+  text-align: center;
+}
diff --git a/priv/public/ui/app/css/cbui-layout.css b/priv/public/ui/app/css/cbui-layout.css
@@ -305,7 +305,7 @@ footer {
   width: 4rem; /* 1rem = 16px, 4rem = 64px */
 }
 .fix-width-1-5 {
-  width: 6rem; /* 1rem = 16px, 3rem = 48px */
+  width: 6rem; /* 1rem = 16px, 6rem = 96px */
 }
 .fix-width-2 {
   width: 8rem; /* 128px */
@@ -360,6 +360,10 @@ footer {
   max-height: 500px;
   overflow: auto;
 }
+.max-height-550 {
+  max-height: 550px;
+  overflow: auto;
+}
 .min-height-2 {
   height: 2rem;
 }

diff --git a/priv/public/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder.html b/priv/public/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder.html
@@ -1,24 +1,26 @@
-<div class="dialog-lg">
+<div class="dialog-xlg">
   <div class="panel-header">
-    <h2>Chart Builder</h2>
+    <h2>Add a Chart</h2>
   </div>
   <form
     class="forms"
     mn-spinner="chartBuilderCtl.viewLoading"
     ng-submit="chartBuilderCtl.create()">
-    <div class="panel-content">
-      <div class="row">
+    <div class="panel-content forms max-height-500">
+
+      <div class="row pills margin-bottom-half">
         <a ng-repeat="(name, block) in chartBuilderCtl.statsDirectoryBlocks track by name"
            ng-if="chartBuilderCtl.filterStats(name)"
            ng-class="{selected: chartBuilderCtl.selectedBlock == name}"
-           ng-click="chartBuilderCtl.selectTab(name)">
+           ng-click="chartBuilderCtl.selectTab(name)"
+           class="margin-right-half">
           {{name | mnFormatStatsSections | mnFormatServices}}
         </a>
       </div>
 
-      <div>
+      <div ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
+           class="row margin-bottom-1">
         <ui-select
-          ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
           style="width:200px"
           class="cbui-select"
           ng-model="chartBuilderCtl.newChart.bucket"
@@ -34,36 +36,48 @@ <h2>Chart Builder</h2>
           </ui-select-choices>
         </ui-select>
 
-        <ui-select
-          ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']"
-          style="width:200px"
-          class="cbui-select"
-          ng-model="chartBuilderCtl.groupItem"
-          theme="selectize"
-          ng-disabled="!rbac.bucketNames['.stats!read'].length">
-          <ui-select-match
-            class="ui-select-match">{{$select.selected.key}}</ui-select-match>
-          <ui-select-choices
-            class="ui-select-choices"
-            repeat="stat.key as (key, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'] | filter: {'key':$select.search}">
-            <span class="select-item ellipsis" ng-bind-html="stat.key | highlight: $select.search"></span>
-          </ui-select-choices>
-        </ui-select>
+        <div class="row flex-right"
+             ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']">
+          <label class="text-small">Views/Indexes: &nbsp;</label>
+          <ui-select
+            ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']"
+            style="width:200px"
+            class="cbui-select"
+            ng-model="chartBuilderCtl.groupItem"
+            theme="selectize"
+            ng-disabled="!rbac.bucketNames['.stats!read'].length">
+            <ui-select-match
+              class="ui-select-match">{{$select.selected.key}}</ui-select-match>
+            <ui-select-choices
+              class="ui-select-choices"
+              repeat="stat.key as (key, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'] | filter: {'key':$select.search}">
+              <span class="select-item ellipsis" ng-bind-html="stat.key | highlight: $select.search"></span>
+            </ui-select-choices>
+          </ui-select>
+        </div>
+      </div>
 
-        <div ng-if="chartBuilderCtl.selectedBlock == '@kv'">
-          <div class="formrow checkbox-list"
-               ng-repeat="(name, _) in chartBuilderCtl.kvGroups">
-            <input
-              id="kv-filter-{{name}}"
-              type="checkbox"
-              ng-model="chartBuilderCtl.selectedKVFilters[name]">
-            <label
-              for="kv-filter-{{name}}"
-              class="checkbox">{{name}}</label>
-          </div>
+      <div class="row row-min margin-bottom-half"
+           ng-if="chartBuilderCtl.selectedBlock == '@kv'">
+        <div class="checkbox-filter"
+             ng-repeat="(name, _) in chartBuilderCtl.kvGroups"
+             ng-class="{selected : chartBuilderCtl.selectedKVFilters[name]}">
+          <input
+            id="kv-filter-{{name}}"
+            type="checkbox"
+            ng-model="chartBuilderCtl.selectedKVFilters[name]">
+          <label
+            for="kv-filter-{{name}}"
+            class="initialcaps">{{name}}</label>
+        </div>
+      </div>
 
+      <div class="margin-bottom-1" style="columns: 120px 3;">
+        <!-- ////////////// bucket KV stats //////////////////-->
+        <div ng-if="chartBuilderCtl.selectedBlock == '@kv'">
           <div ng-repeat="(name1, group) in chartBuilderCtl.kvGroups">
             <div ng-repeat="name in group"
+                 ng-style="{opacity: chartBuilderCtl.maybeDisableField(chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-']['@items'][name], name) ? '0.3' : '1'}"
                  ng-if="chartBuilderCtl.selectedKVFilters[name1]">
               <input
                 id="stat-{{name}}-checkbox"
@@ -79,12 +93,10 @@ <h2>Chart Builder</h2>
               <label for="stat-{{name}}-checkbox"
                      ng-attr-title="{{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name].desc}}">
                 {{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].title}}</label>
-              <small>
-                ({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].unit}})</small>
             </div>
           </div>
         </div>
-
+        <!-- ////////////// bucket XDCR/VIEWS/INDEXES...(items) stats //////////////////-->
         <div
           ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'][chartBuilderCtl.groupItem]"
           ng-if="chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-']['@items'][name]"
@@ -102,9 +114,9 @@ <h2>Chart Builder</h2>
             ng-model="chartBuilderCtl.newChart.stats[chartBuilderCtl.groupItem + '/' + name]">
           <label for="stat-{{name}}-checkbox">
             {{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"]["@items"][name].title}}</label>
-          <small>({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"]["@items"][name].unit}})</small>
         </div>
 
+        <!-- ////////////// bucket non KV stats //////////////////-->
         <div
           ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
           ng-if="chartBuilderCtl.selectedBlock !== '@kv' && chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name] && name !== '@items'"
@@ -123,10 +135,9 @@ <h2>Chart Builder</h2>
           <label for="stat-{{name}}-checkbox"
                  ng-attr-title="{{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name].desc}}">
             {{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].title}}</label>
-          <small>
-            ({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].unit}})</small>
         </div>
 
+        <!-- ////////////// services specific stats //////////////////-->
         <div
           ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock] track by name"
           ng-if="chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name] && name !== '@items'"
@@ -144,56 +155,59 @@ <h2>Chart Builder</h2>
             ng-model="chartBuilderCtl.newChart.stats[name]">
           <label for="stat-{{name}}-checkbox">
             {{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name].title}}</label>
-          <!-- ng-true-value="{{stat | json}}" -->
-          <!-- {{::stat.title}} -  -->
-          <small>
-            ({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name].unit}})</small>
         </div>
       </div>
 
-      <h4 class="margin-top-1">Selected Stats:</h4>
-      <div ng-repeat="(breadcrumb, _val) in chartBuilderCtl.breadcrumbs">
-        {{breadcrumb}}
-      </div>
-
-      <h4 class="margin-top-1">Show Data For:</h4>
-      <div class="formrow checkbox-list">
-        <input
-          type="radio"
-          id="for-whole-cluster"
-          ng-model="chartBuilderCtl.newChart.specificStat"
-          name="specificStat"
-          ng-change="chartBuilderCtl.onSpecificChecked()"
-          value="false">
-        <label for="for-whole-cluster">whole cluster</label> <!--  default value -->
-        <input
-          type="radio"
-          id="for-individual-nodes"
-          ng-model="chartBuilderCtl.newChart.specificStat"
-          ng-change="chartBuilderCtl.onSpecificChecked()"
-          name="specificStat"
-          value="true">
-        <label for="for-individual-nodes">individual nodes</label>
-      </div>
+      <hr>
+      <div class="row items-top flex-left">
+        <div class="column">
+          <h4>Display Data From</h4>
+          <div class="formrow checkbox-list">
+            <input
+              type="radio"
+              id="for-whole-cluster"
+              ng-model="chartBuilderCtl.newChart.specificStat"
+              name="specificStat"
+              ng-change="chartBuilderCtl.onSpecificChecked()"
+              value="false">
+            <label for="for-whole-cluster">whole cluster</label>
+            <input
+              type="radio"
+              id="for-individual-nodes"
+              ng-model="chartBuilderCtl.newChart.specificStat"
+              ng-change="chartBuilderCtl.onSpecificChecked()"
+              name="specificStat"
+              value="true">
+            <label for="for-individual-nodes">individual nodes</label>
+          </div>
+        </div>
 
-      <h4 class="margin-top-1">Chart Size</h4>
-      <select ng-model="chartBuilderCtl.newChart.size">
-        <option value="small">S</option>
-        <option value="medium">M</option>
-        <option value="large">L</option>
-      </select>
+        <div class="column">
+          <h4>Chart Size</h4>
+          <select
+            ng-model="chartBuilderCtl.newChart.size"
+            class="fix-width-1-5">
+            <option value="small">S</option>
+            <option value="medium">M</option>
+            <option value="large">L</option>
+          </select>
+        </div>
 
-      <h4 class="margin-top-1">Group</h4>
-      <select ng-model="chartBuilderCtl.newChart.group">
-        <option
-          ng-repeat="group in chartBuilderCtl.groups"
-          value="{{group.id}}">{{group.name}}</option>
-      </select>
+        <div class="flex-grow-2">
+          <h4>Group</h4>
+          <select
+            ng-model="chartBuilderCtl.newChart.group">
+            <option
+              ng-repeat="group in chartBuilderCtl.groups"
+              value="{{group.id}}">{{group.name}}</option>
+          </select>
+        </div>
+      </div>
     </div>
 
-    <div class="panel-footer">
+    <div class="panel-footer scroll-shadow">
       <a href="" ng-click="$dismiss()">Cancel</a>
-      <button type="submit">Display Selected Stat<span ng-show="!chartBuilderCtl.newChart.specificStat">s</span></button>
+      <button type="submit">Save Chart</button>
     </div>
   </form>
 </div>
diff --git a/...lic/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder_controller.js b/...lic/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder_controller.js
@@ -27,7 +27,7 @@
     vm.groups = mnStatisticsNewService.export.scenarios.selected.groups;
     vm.newChart = _.cloneDeep(chart) || {
       stats: {},
-      size: "medium",
+      size: "small",
       specificStat: "false",
       group: vm.groups[0].id.toString(),
       bucket: $scope.rbac.bucketNames['.stats!read'][0]