Skip to content

Commit 9935a23

Browse files
robashcompavel-blagodov
robashcom
authored and
pavel-blagodov
committed
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]>
1 parent 110dd43 commit 9935a23

File tree

4 files changed

+136
-84
lines changed

4 files changed

+136
-84
lines changed

‎priv/public/ui/app/css/cbui-components.css‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -728,6 +728,11 @@ section.error {
728728
width: 640px;
729729
}
730730

731+
/* extra-large-width modal dialog (uses .panel) ------------------------------- */
732+
.dialog-xlg {
733+
width: 720px;
734+
}
735+
731736
/* LABELS & BADGES ------------------------------------------------------ */
732737
.label {
733738
font-size: .688rem;
@@ -2299,4 +2304,33 @@ nav.nav-sidebar-hidden {
22992304

23002305
.nvd3.nv-scatter.nv-single-point .nv-groups .nv-group .nv-point:not(.hover) {
23012306
fill-opacity: .0 !important;
2302-
stroke-opa
2307+
}
2308+
/* stroke-opa */
2309+
2310+
/* checkbox filter widget for the chartbuilder data section --------------- */
2311+
.checkbox-filter {
2312+
border: 1px solid #d1d1d1;
2313+
border-radius: 5px;
2314+
margin: 0 .25rem;
2315+
display: flex;
2316+
align-items: center;
2317+
justify-content: center;
2318+
width: 100%;
2319+
}
2320+
.checkbox-filter:first-child {
2321+
margin: 0 .25rem 0 0;
2322+
}
2323+
.checkbox-filter:last-child {
2324+
margin: 0 0 0 .25rem;
2325+
}
2326+
.checkbox-filter input[type="checkbox"] + label:before {
2327+
display: none;
2328+
}
2329+
.checkbox-filter.selected {
2330+
background-color: #d9e7f7;
2331+
}
2332+
.checkbox-filter label {
2333+
width: 100%;
2334+
font-size: .8125rem!important;
2335+
text-align: center;
2336+
}

‎priv/public/ui/app/css/cbui-layout.css‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -305,7 +305,7 @@ footer {
305305
width: 4rem; /* 1rem = 16px, 4rem = 64px */
306306
}
307307
.fix-width-1-5 {
308-
width: 6rem; /* 1rem = 16px, 3rem = 48px */
308+
width: 6rem; /* 1rem = 16px, 6rem = 96px */
309309
}
310310
.fix-width-2 {
311311
width: 8rem; /* 128px */
@@ -360,6 +360,10 @@ footer {
360360
max-height: 500px;
361361
overflow: auto;
362362
}
363+
.max-height-550 {
364+
max-height: 550px;
365+
overflow: auto;
366+
}
363367
.min-height-2 {
364368
height: 2rem;
365369
}

‎priv/public/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder.html‎

Lines changed: 95 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
1-
<div class="dialog-lg">
1+
<div class="dialog-xlg">
22
<div class="panel-header">
3-
<h2>Chart Builder</h2>
3+
<h2>Add a Chart</h2>
44
</div>
55
<form
66
class="forms"
77
mn-spinner="chartBuilderCtl.viewLoading"
88
ng-submit="chartBuilderCtl.create()">
9-
<div class="panel-content">
10-
<div class="row">
9+
<div class="panel-content forms max-height-500">
10+
11+
<div class="row pills margin-bottom-half">
1112
<a ng-repeat="(name, block) in chartBuilderCtl.statsDirectoryBlocks track by name"
1213
ng-if="chartBuilderCtl.filterStats(name)"
1314
ng-class="{selected: chartBuilderCtl.selectedBlock == name}"
14-
ng-click="chartBuilderCtl.selectTab(name)">
15+
ng-click="chartBuilderCtl.selectTab(name)"
16+
class="margin-right-half">
1517
{{name | mnFormatStatsSections | mnFormatServices}}
1618
</a>
1719
</div>
1820

19-
<div>
21+
<div ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
22+
class="row margin-bottom-1">
2023
<ui-select
21-
ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
2224
style="width:200px"
2325
class="cbui-select"
2426
ng-model="chartBuilderCtl.newChart.bucket"
@@ -34,36 +36,48 @@ <h2>Chart Builder</h2>
3436
</ui-select-choices>
3537
</ui-select>
3638

37-
<ui-select
38-
ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']"
39-
style="width:200px"
40-
class="cbui-select"
41-
ng-model="chartBuilderCtl.groupItem"
42-
theme="selectize"
43-
ng-disabled="!rbac.bucketNames['.stats!read'].length">
44-
<ui-select-match
45-
class="ui-select-match">{{$select.selected.key}}</ui-select-match>
46-
<ui-select-choices
47-
class="ui-select-choices"
48-
repeat="stat.key as (key, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'] | filter: {'key':$select.search}">
49-
<span class="select-item ellipsis" ng-bind-html="stat.key | highlight: $select.search"></span>
50-
</ui-select-choices>
51-
</ui-select>
39+
<div class="row flex-right"
40+
ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']">
41+
<label class="text-small">Views/Indexes: &nbsp;</label>
42+
<ui-select
43+
ng-if="chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items']"
44+
style="width:200px"
45+
class="cbui-select"
46+
ng-model="chartBuilderCtl.groupItem"
47+
theme="selectize"
48+
ng-disabled="!rbac.bucketNames['.stats!read'].length">
49+
<ui-select-match
50+
class="ui-select-match">{{$select.selected.key}}</ui-select-match>
51+
<ui-select-choices
52+
class="ui-select-choices"
53+
repeat="stat.key as (key, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'] | filter: {'key':$select.search}">
54+
<span class="select-item ellipsis" ng-bind-html="stat.key | highlight: $select.search"></span>
55+
</ui-select-choices>
56+
</ui-select>
57+
</div>
58+
</div>
5259

53-
<div ng-if="chartBuilderCtl.selectedBlock == '@kv'">
54-
<div class="formrow checkbox-list"
55-
ng-repeat="(name, _) in chartBuilderCtl.kvGroups">
56-
<input
57-
id="kv-filter-{{name}}"
58-
type="checkbox"
59-
ng-model="chartBuilderCtl.selectedKVFilters[name]">
60-
<label
61-
for="kv-filter-{{name}}"
62-
class="checkbox">{{name}}</label>
63-
</div>
60+
<div class="row row-min margin-bottom-half"
61+
ng-if="chartBuilderCtl.selectedBlock == '@kv'">
62+
<div class="checkbox-filter"
63+
ng-repeat="(name, _) in chartBuilderCtl.kvGroups"
64+
ng-class="{selected : chartBuilderCtl.selectedKVFilters[name]}">
65+
<input
66+
id="kv-filter-{{name}}"
67+
type="checkbox"
68+
ng-model="chartBuilderCtl.selectedKVFilters[name]">
69+
<label
70+
for="kv-filter-{{name}}"
71+
class="initialcaps">{{name}}</label>
72+
</div>
73+
</div>
6474

75+
<div class="margin-bottom-1" style="columns: 120px 3;">
76+
<!-- ////////////// bucket KV stats //////////////////-->
77+
<div ng-if="chartBuilderCtl.selectedBlock == '@kv'">
6578
<div ng-repeat="(name1, group) in chartBuilderCtl.kvGroups">
6679
<div ng-repeat="name in group"
80+
ng-style="{opacity: chartBuilderCtl.maybeDisableField(chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-']['@items'][name], name) ? '0.3' : '1'}"
6781
ng-if="chartBuilderCtl.selectedKVFilters[name1]">
6882
<input
6983
id="stat-{{name}}-checkbox"
@@ -79,12 +93,10 @@ <h2>Chart Builder</h2>
7993
<label for="stat-{{name}}-checkbox"
8094
ng-attr-title="{{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name].desc}}">
8195
{{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].title}}</label>
82-
<small>
83-
({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].unit}})</small>
8496
</div>
8597
</div>
8698
</div>
87-
99+
<!-- ////////////// bucket XDCR/VIEWS/INDEXES...(items) stats //////////////////-->
88100
<div
89101
ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]['@items'][chartBuilderCtl.groupItem]"
90102
ng-if="chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-']['@items'][name]"
@@ -102,9 +114,9 @@ <h2>Chart Builder</h2>
102114
ng-model="chartBuilderCtl.newChart.stats[chartBuilderCtl.groupItem + '/' + name]">
103115
<label for="stat-{{name}}-checkbox">
104116
{{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"]["@items"][name].title}}</label>
105-
<small>({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"]["@items"][name].unit}})</small>
106117
</div>
107118

119+
<!-- ////////////// bucket non KV stats //////////////////-->
108120
<div
109121
ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock + '-' + chartBuilderCtl.newChart.bucket]"
110122
ng-if="chartBuilderCtl.selectedBlock !== '@kv' && chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name] && name !== '@items'"
@@ -123,10 +135,9 @@ <h2>Chart Builder</h2>
123135
<label for="stat-{{name}}-checkbox"
124136
ng-attr-title="{{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + '-'][name].desc}}">
125137
{{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].title}}</label>
126-
<small>
127-
({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock + "-"][name].unit}})</small>
128138
</div>
129139

140+
<!-- ////////////// services specific stats //////////////////-->
130141
<div
131142
ng-repeat="(name, stat) in chartBuilderCtl.statsDirectoryBlocks[chartBuilderCtl.selectedBlock] track by name"
132143
ng-if="chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name] && name !== '@items'"
@@ -144,56 +155,59 @@ <h2>Chart Builder</h2>
144155
ng-model="chartBuilderCtl.newChart.stats[name]">
145156
<label for="stat-{{name}}-checkbox">
146157
{{chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name].title}}</label>
147-
<!-- ng-true-value="{{stat | json}}" -->
148-
<!-- {{::stat.title}} - -->
149-
<small>
150-
({{::chartBuilderCtl.statsDesc[chartBuilderCtl.selectedBlock][name].unit}})</small>
151158
</div>
152159
</div>
153160

154-
<h4 class="margin-top-1">Selected Stats:</h4>
155-
<div ng-repeat="(breadcrumb, _val) in chartBuilderCtl.breadcrumbs">
156-
{{breadcrumb}}
157-
</div>
158-
159-
<h4 class="margin-top-1">Show Data For:</h4>
160-
<div class="formrow checkbox-list">
161-
<input
162-
type="radio"
163-
id="for-whole-cluster"
164-
ng-model="chartBuilderCtl.newChart.specificStat"
165-
name="specificStat"
166-
ng-change="chartBuilderCtl.onSpecificChecked()"
167-
value="false">
168-
<label for="for-whole-cluster">whole cluster</label> <!-- default value -->
169-
<input
170-
type="radio"
171-
id="for-individual-nodes"
172-
ng-model="chartBuilderCtl.newChart.specificStat"
173-
ng-change="chartBuilderCtl.onSpecificChecked()"
174-
name="specificStat"
175-
value="true">
176-
<label for="for-individual-nodes">individual nodes</label>
177-
</div>
161+
<hr>
162+
<div class="row items-top flex-left">
163+
<div class="column">
164+
<h4>Display Data From</h4>
165+
<div class="formrow checkbox-list">
166+
<input
167+
type="radio"
168+
id="for-whole-cluster"
169+
ng-model="chartBuilderCtl.newChart.specificStat"
170+
name="specificStat"
171+
ng-change="chartBuilderCtl.onSpecificChecked()"
172+
value="false">
173+
<label for="for-whole-cluster">whole cluster</label>
174+
<input
175+
type="radio"
176+
id="for-individual-nodes"
177+
ng-model="chartBuilderCtl.newChart.specificStat"
178+
ng-change="chartBuilderCtl.onSpecificChecked()"
179+
name="specificStat"
180+
value="true">
181+
<label for="for-individual-nodes">individual nodes</label>
182+
</div>
183+
</div>
178184

179-
<h4 class="margin-top-1">Chart Size</h4>
180-
<select ng-model="chartBuilderCtl.newChart.size">
181-
<option value="small">S</option>
182-
<option value="medium">M</option>
183-
<option value="large">L</option>
184-
</select>
185+
<div class="column">
186+
<h4>Chart Size</h4>
187+
<select
188+
ng-model="chartBuilderCtl.newChart.size"
189+
class="fix-width-1-5">
190+
<option value="small">S</option>
191+
<option value="medium">M</option>
192+
<option value="large">L</option>
193+
</select>
194+
</div>
185195

186-
<h4 class="margin-top-1">Group</h4>
187-
<select ng-model="chartBuilderCtl.newChart.group">
188-
<option
189-
ng-repeat="group in chartBuilderCtl.groups"
190-
value="{{group.id}}">{{group.name}}</option>
191-
</select>
196+
<div class="flex-grow-2">
197+
<h4>Group</h4>
198+
<select
199+
ng-model="chartBuilderCtl.newChart.group">
200+
<option
201+
ng-repeat="group in chartBuilderCtl.groups"
202+
value="{{group.id}}">{{group.name}}</option>
203+
</select>
204+
</div>
205+
</div>
192206
</div>
193207

194-
<div class="panel-footer">
208+
<div class="panel-footer scroll-shadow">
195209
<a href="" ng-click="$dismiss()">Cancel</a>
196-
<button type="submit">Display Selected Stat<span ng-show="!chartBuilderCtl.newChart.specificStat">s</span></button>
210+
<button type="submit">Save Chart</button>
197211
</div>
198212
</form>
199213
</div>

‎priv/public/ui/app/mn_admin/mn_statistics/chart_builder/mn_statistics_chart_builder_controller.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@
2727
vm.groups = mnStatisticsNewService.export.scenarios.selected.groups;
2828
vm.newChart = _.cloneDeep(chart) || {
2929
stats: {},
30-
size: "medium",
30+
size: "small",
3131
specificStat: "false",
3232
group: vm.groups[0].id.toString(),
3333
bucket: $scope.rbac.bucketNames['.stats!read'][0]

0 commit comments

Comments
 (0)