Skip to content

Commit 799586b

Browse files
pavel-blagodovpavel-blagodov
committed
dashboard style revisions #1
this changes the overall layout of the Overview page + revises the scenario controls Change-Id: I5673f942700d5f2736553c7b6c6c633a02daa799 Reviewed-on: http://review.couchbase.org/106293 Reviewed-by: Pavel Blagodov <[email protected]> Tested-by: Pavel Blagodov <[email protected]>
1 parent 5b24583 commit 799586b

File tree

3 files changed

+110
-94
lines changed

3 files changed

+110
-94
lines changed

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

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,14 @@ header h1 .icon {
3333
text-overflow: ellipsis;
3434
text-align: right;
3535
letter-spacing: .025rem;
36+
line-height: 1rem;
37+
}
38+
.about-text a {
39+
color: #fff;
40+
font-weight: 600;
41+
}
42+
.about-text a:hover {
43+
text-decoration: underline;
3644
}
3745
.menu-icon {
3846
display: none;
@@ -1560,13 +1568,16 @@ input[type="checkbox"].fake-select + label:before {
15601568
/* dashboard service widgets displaying status & details for each service + XDCR */
15611569
.service-widget-row {
15621570
display: flex;
1563-
align-items: flex-start;
1571+
align-items: center;
15641572
justify-content: space-between;
1565-
max-width: 1280px;
1573+
width: 800px;
1574+
margin: .25rem auto .5rem auto;
15661575
}
15671576
.service-widget {
1568-
padding: 0 0 0 .5rem;
1569-
flex: 0 1 auto;
1577+
display: flex;
1578+
align-items: center;
1579+
justify-content: flex-start;
1580+
padding: 0 0 0 .25rem;
15701581
margin-right: 1.5rem;
15711582
cursor: pointer;
15721583
}
@@ -1583,6 +1594,9 @@ input[type="checkbox"].fake-select + label:before {
15831594
color: #000;
15841595
text-decoration: underline;
15851596
}
1597+
.service-widget b {
1598+
margin-right: .5rem;
1599+
}
15861600

15871601
/* DYNAMIC STATUSES - SERVERS/BUCKETS/SERVICES -------------------------- */
15881602
/* old-style background colors ------------------------------------------
@@ -1603,7 +1617,6 @@ input[type="checkbox"].fake-select + label:before {
16031617
/* new-style border colors ---------------------------------------------- */
16041618
.service-widget.dynamic_inactive,
16051619
.dynamic_inactive {
1606-
background-color: #fff;
16071620
border-left: 8px solid #a1a1a1; /* gray-3 */
16081621
}
16091622
.service-widget.dynamic_healthy,
@@ -1615,13 +1628,11 @@ input[type="checkbox"].fake-select + label:before {
16151628
.dynamic_inactiveAdded,
16161629
.dynamic_warmup {
16171630
border-left: 8px solid #f7a623; /* orange-1 */
1618-
background-color: #fff;
16191631
}
16201632
.service-widget.dynamic_unhealthy,
16211633
.dynamic_inactiveFailed,
16221634
.dynamic_unhealthy {
16231635
border-left: 8px solid #d65558; /* red-2 */
1624-
background-color: #fff;
16251636
animation: pulse_unhealthy 3s infinite;
16261637
}
16271638
.dynamic_selected { /* selected chart cell in statistics */
@@ -1701,15 +1712,12 @@ input[type="checkbox"].fake-select + label:before {
17011712
}
17021713
/* dashboard version is a lighter-colored flex container ----------------- */
17031714
.content-box-dashboard {
1704-
border-radius: 3px;
1705-
background-color: #f6f7f9;
17061715
font-size: .75rem;
1707-
padding: 1rem;
1708-
margin: 0 0 1.5rem -1rem;
17091716
display: flex;
17101717
align-items: center;
17111718
justify-content: center;
17121719
flex-wrap: nowrap;
1720+
margin-bottom: .5rem;
17131721
}
17141722
.content-box p {
17151723
margin-bottom: .5rem;
@@ -2347,6 +2355,8 @@ nav.nav-sidebar-hidden {
23472355
font-size: 3rem;
23482356
cursor: pointer;
23492357
margin: 1rem;
2358+
width: calc(25% - 2rem);
2359+
height: 180px;
23502360
}
23512361
.chart-adder:hover {
23522362
color: #a1a1a1;

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,12 @@ footer {
7171
padding: .25rem 0;
7272
width: 100%;
7373
color: #555;
74-
background-color: #ecf3fa;
74+
background-color: #fff;
7575
font-size: .688rem;
7676
position: fixed;
7777
bottom: 0;
7878
left: 0;
79+
box-shadow: 0px -1px 2px 1px rgba(0,0,0,0.15);
7980
}
8081
/* basic flex component for horizontal layout --------------------------- */
8182
.row {

‎priv/public/ui/app/mn_admin/mn_overview/mn_overview.html‎

Lines changed: 87 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,82 @@
11
<mn-element-cargo depot="header">
22
<div class="about-text resp-sml">
33
{{::adminCtl.implementationVersion | mnPrettyVersion}} <span ng-show="overviewCtl.isIPv6">&#8231; IPv6</span><span ng-show="!overviewCtl.isIPv6">&#8231; IPv4</span>
4+
<br>
5+
&copy; 2018 <a href="http://couchbase.com" target="_blank">Couchbase, Inc.</a>
46
</div>
57
</mn-element-cargo>
68

7-
<div class="margin-top-half margin-left-half" mn-spinner="(rbac.cluster.bucket['.'].stats.read && !overviewCtl.mnOverviewStats) || !overviewCtl.mnOverviewConfig || !overviewCtl.nodes || (rbac.cluster.bucket['.'].settings.read && !buckets.details)">
9+
<div class="margin-top-half" mn-spinner="(rbac.cluster.bucket['.'].stats.read && !overviewCtl.mnOverviewStats) || !overviewCtl.mnOverviewConfig || !overviewCtl.nodes || (rbac.cluster.bucket['.'].settings.read && !buckets.details)">
810

9-
<div class="content-box-dashboard max-width-12 resp-xsml">
11+
<div class="zero-content max-width-12 " ng-show="!buckets.details.length">
12+
You have no data buckets.
13+
<span ng-show="rbac.cluster.buckets.create">
14+
Go to <a ui-sref="app.admin.buckets">Buckets</a> to add one, or load a
15+
<a ui-sref="app.admin.settings.sampleBuckets">sample bucket</a> with data & indexes.
16+
</span>
17+
</div>
18+
19+
<div ui-view=""></div>
20+
21+
<!--
22+
<div class="content-box-dashboard max-width-12 margin-top-2 resp-wrap-med resp-med">
23+
<div
24+
class="column width-6">
25+
<b class="text-small">Data Service Memory</b>
26+
<div
27+
ng-class="{
28+
overcommitted: overviewCtl.mnOverviewConfig.ramOverviewConfig.items[1].name === 'overused',
29+
'has-free-space': overviewCtl.mnOverviewConfig.ramOverviewConfig.items[2].name === 'available'
30+
}"
31+
class="bar-usages bar-usages-dashboard"
32+
mn-bar-usage
33+
base-info="overviewCtl.mnOverviewConfig.ramOverviewConfig"></div>
34+
</div>
35+
<div
36+
class="column width-6">
37+
<b class="text-small">Data Service Disk</b>
38+
<div
39+
class="bar-usages"
40+
mn-bar-usage
41+
base-info="overviewCtl.mnOverviewConfig.hddOverviewConfig"></div>
42+
</div>
43+
</div>
44+
45+
<div ng-if="rbac.cluster.bucket['.'].settings.read">
46+
<div
47+
ng-if="rbac.cluster.bucket['.'].stats.read"
48+
class="row flex-left items-top resp-wrap-med">
49+
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1 margin-right-3">
50+
<b class="text-small">Buckets Operations Per Second</b>
51+
<span ng-show="!overviewCtl.mnOverviewStats.opsGraphConfig.stats.length">
52+
loading stats...
53+
</span>
54+
<div
55+
ng-if="overviewCtl.mnOverviewStats.opsGraphConfig.stats.length"
56+
mn-plot
57+
mn-plot-config="overviewCtl.mnOverviewStats.opsGraphConfig"
58+
style="height: 150px; width: 360px; margin-right: 2rem;"
59+
class="text-smaller"></div>
60+
</div>
61+
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1">
62+
<b class="text-small">Disk Fetches Per Second</b>
63+
<span ng-show="!overviewCtl.mnOverviewStats.readsGraphConfig.stats.length">
64+
loading stats...
65+
</span>
66+
67+
<div
68+
ng-if="overviewCtl.mnOverviewStats.readsGraphConfig.stats.length"
69+
mn-plot
70+
mn-plot-config="overviewCtl.mnOverviewStats.readsGraphConfig"
71+
style="height: 150px; width: 360px;"
72+
class="text-smaller"></div>
73+
</div>
74+
</div>
75+
</div>
76+
-->
77+
</div>
78+
<footer>
79+
<div class="content-box-dashboard resp-xsml">
1080
<div class="dashboard-nodes" title="active nodes">
1181
<span class="icon fa-server green-2"></span>
1282
<h3>{{overviewCtl.nodes.all.active.length || '0'}}</h3>
@@ -35,10 +105,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
35105
ui-sref="app.admin.buckets"
36106
ng-class="['dynamic_' + overviewCtl.nodes.kv.statusClass]">
37107
<b class="text-small">Data</b>
38-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
108+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
39109
{{overviewCtl.nodes.kv.length || '0'}}
40110
node{{overviewCtl.getEndings(overviewCtl.nodes.kv.length)}}
41-
</a>
111+
</a>-->
42112
<div
43113
class="error"
44114
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodesByStatuses">
@@ -50,10 +120,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
50120
ui-sref="app.admin.gsi"
51121
ng-class="['dynamic_' + overviewCtl.nodes.index.statusClass]">
52122
<b class="text-small">Index</b>
53-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
123+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
54124
{{overviewCtl.nodes.index.length || '0'}}
55125
node{{overviewCtl.getEndings(overviewCtl.nodes.index.length)}}
56-
</a>
126+
</a>-->
57127
<div
58128
class="error"
59129
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.index.nodesByStatuses">
@@ -65,10 +135,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
65135
ui-sref="app.admin.query.workbench"
66136
ng-class="['dynamic_' + overviewCtl.nodes.n1ql.statusClass]">
67137
<b class="text-small">Query</b>
68-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
138+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
69139
{{overviewCtl.nodes.n1ql.length || '0'}}
70140
node{{overviewCtl.getEndings(overviewCtl.nodes.n1ql.length)}}
71-
</a>
141+
</a>-->
72142
<div
73143
class="error"
74144
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.n1ql.nodesByStatuses">
@@ -80,10 +150,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
80150
ui-sref="app.admin.search.fts_list"
81151
ng-class="['dynamic_' + overviewCtl.nodes.fts.statusClass]">
82152
<b class="text-small">Search</b>
83-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
153+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
84154
{{overviewCtl.nodes.fts.length || '0'}}
85155
node{{overviewCtl.getEndings(overviewCtl.nodes.fts.length)}}
86-
</a>
156+
</a>-->
87157
<div
88158
class="error"
89159
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.fts.nodesByStatuses">
@@ -96,10 +166,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
96166
ui-sref="app.admin.cbas.workbench"
97167
ng-class="['dynamic_' + overviewCtl.nodes.cbas.statusClass]">
98168
<b class="text-small">Analytics</b>
99-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
169+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
100170
{{overviewCtl.nodes.cbas.length || '0'}}
101171
node{{overviewCtl.getEndings(overviewCtl.nodes.cbas.length)}}
102-
</a>
172+
</a>-->
103173
<div
104174
class="error"
105175
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.cbas.nodesByStatuses">
@@ -112,10 +182,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
112182
ui-sref="app.admin.eventing.summary"
113183
ng-class="['dynamic_' + overviewCtl.nodes.eventing.statusClass]">
114184
<b class="text-small">Eventing</b>
115-
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
185+
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
116186
{{overviewCtl.nodes.eventing.length || '0'}}
117187
node{{overviewCtl.getEndings(overviewCtl.nodes.eventing.length)}}
118-
</a>
188+
</a>-->
119189
<div
120190
class="error"
121191
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.eventing.nodesByStatuses">
@@ -130,77 +200,12 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
130200
<b class="text-small">XDCR</b>
131201
<a>
132202
{{overviewCtl.xdcrReferences.filtered.length}}
133-
remote cluster{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}
134-
</a>
203+
remote{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}
204+
</a> |
135205
<a>
136206
{{adminCtl.tasks.tasksXDCR.length}}
137207
replication{{overviewCtl.getEndings(adminCtl.tasks.tasksXDCR.length)}}
138208
</a>
139209
</div>
140210
</div>
141-
142-
<div ui-view=""></div>
143-
144-
<div class="content-box-dashboard max-width-12 margin-top-2 resp-wrap-med resp-med">
145-
<div
146-
class="column width-6">
147-
<b class="text-small">Data Service Memory</b>
148-
<div
149-
ng-class="{
150-
overcommitted: overviewCtl.mnOverviewConfig.ramOverviewConfig.items[1].name === 'overused',
151-
'has-free-space': overviewCtl.mnOverviewConfig.ramOverviewConfig.items[2].name === 'available'
152-
}"
153-
class="bar-usages bar-usages-dashboard"
154-
mn-bar-usage
155-
base-info="overviewCtl.mnOverviewConfig.ramOverviewConfig"></div>
156-
</div>
157-
<div
158-
class="column width-6">
159-
<b class="text-small">Data Service Disk</b>
160-
<div
161-
class="bar-usages"
162-
mn-bar-usage
163-
base-info="overviewCtl.mnOverviewConfig.hddOverviewConfig"></div>
164-
</div>
165-
</div>
166-
167-
<div ng-if="rbac.cluster.bucket['.'].settings.read">
168-
<div
169-
ng-if="rbac.cluster.bucket['.'].stats.read"
170-
class="row flex-left items-top resp-wrap-med">
171-
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1 margin-right-3">
172-
<b class="text-small">Buckets Operations Per Second</b>
173-
<span ng-show="!overviewCtl.mnOverviewStats.opsGraphConfig.stats.length">
174-
loading stats...
175-
</span>
176-
<div
177-
ng-if="overviewCtl.mnOverviewStats.opsGraphConfig.stats.length"
178-
mn-plot
179-
mn-plot-config="overviewCtl.mnOverviewStats.opsGraphConfig"
180-
style="height: 150px; width: 360px; margin-right: 2rem;"
181-
class="text-smaller"></div>
182-
</div>
183-
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1">
184-
<b class="text-small">Disk Fetches Per Second</b>
185-
<span ng-show="!overviewCtl.mnOverviewStats.readsGraphConfig.stats.length">
186-
loading stats...
187-
</span>
188-
189-
<div
190-
ng-if="overviewCtl.mnOverviewStats.readsGraphConfig.stats.length"
191-
mn-plot
192-
mn-plot-config="overviewCtl.mnOverviewStats.readsGraphConfig"
193-
style="height: 150px; width: 360px;"
194-
class="text-smaller"></div>
195-
</div>
196-
</div>
197-
<div class="zero-content max-width-12 " ng-show="!buckets.details.length">
198-
You have no data buckets.
199-
<span ng-show="rbac.cluster.buckets.create">
200-
Go to <a ui-sref="app.admin.buckets">Buckets</a> to add one, or load a
201-
<a ui-sref="app.admin.settings.sampleBuckets">sample bucket</a> with data & indexes.
202-
</span>
203-
</div>
204-
</div>
205-
</div>
206-
<footer>Copyright &copy; 2018 <a href="http://couchbase.com" target="_blank">Couchbase, Inc.</a> All rights reserved.</footer>
211+
</footer>

0 commit comments

Comments
 (0)