Skip to content

Commit

Permalink
dashboard style revisions membase#1
Browse files Browse the repository at this point in the history 
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]>
  • Loading branch information
@pavel-blagodov
pavel-blagodov committed Mar 21, 2019
1 parent 5b24583 commit 799586b
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 94 deletions.
32 changes: 21 additions & 11 deletions priv/public/ui/app/css/cbui-components.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@ header h1 .icon {
text-overflow: ellipsis;
text-align: right;
letter-spacing: .025rem;
line-height: 1rem;
}
.about-text a {
color: #fff;
font-weight: 600;
}
.about-text a:hover {
text-decoration: underline;
}
.menu-icon {
display: none;
Expand Down Expand Up @@ -1560,13 +1568,16 @@ input[type="checkbox"].fake-select + label:before {
/* dashboard service widgets displaying status & details for each service + XDCR */
.service-widget-row {
display: flex;
align-items: flex-start;
align-items: center;
justify-content: space-between;
max-width: 1280px;
width: 800px;
margin: .25rem auto .5rem auto;
}
.service-widget {
padding: 0 0 0 .5rem;
flex: 0 1 auto;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 0 0 .25rem;
margin-right: 1.5rem;
cursor: pointer;
}
Expand All @@ -1583,6 +1594,9 @@ input[type="checkbox"].fake-select + label:before {
color: #000;
text-decoration: underline;
}
.service-widget b {
margin-right: .5rem;
}

/* DYNAMIC STATUSES - SERVERS/BUCKETS/SERVICES -------------------------- */
/* old-style background colors ------------------------------------------
Expand All @@ -1603,7 +1617,6 @@ input[type="checkbox"].fake-select + label:before {
/* new-style border colors ---------------------------------------------- */
.service-widget.dynamic_inactive,
.dynamic_inactive {
background-color: #fff;
border-left: 8px solid #a1a1a1; /* gray-3 */
}
.service-widget.dynamic_healthy,
Expand All @@ -1615,13 +1628,11 @@ input[type="checkbox"].fake-select + label:before {
.dynamic_inactiveAdded,
.dynamic_warmup {
border-left: 8px solid #f7a623; /* orange-1 */
background-color: #fff;
}
.service-widget.dynamic_unhealthy,
.dynamic_inactiveFailed,
.dynamic_unhealthy {
border-left: 8px solid #d65558; /* red-2 */
background-color: #fff;
animation: pulse_unhealthy 3s infinite;
}
.dynamic_selected { /* selected chart cell in statistics */
Expand Down Expand Up @@ -1701,15 +1712,12 @@ input[type="checkbox"].fake-select + label:before {
}
/* dashboard version is a lighter-colored flex container ----------------- */
.content-box-dashboard {
border-radius: 3px;
background-color: #f6f7f9;
font-size: .75rem;
padding: 1rem;
margin: 0 0 1.5rem -1rem;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: nowrap;
margin-bottom: .5rem;
}
.content-box p {
margin-bottom: .5rem;
Expand Down Expand Up @@ -2347,6 +2355,8 @@ nav.nav-sidebar-hidden {
font-size: 3rem;
cursor: pointer;
margin: 1rem;
width: calc(25% - 2rem);
height: 180px;
}
.chart-adder:hover {
color: #a1a1a1;
Expand Down
3 changes: 2 additions & 1 deletion priv/public/ui/app/css/cbui-layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,12 @@ footer {
padding: .25rem 0;
width: 100%;
color: #555;
background-color: #ecf3fa;
background-color: #fff;
font-size: .688rem;
position: fixed;
bottom: 0;
left: 0;
box-shadow: 0px -1px 2px 1px rgba(0,0,0,0.15);
}
/* basic flex component for horizontal layout --------------------------- */
.row {
Expand Down
169 changes: 87 additions & 82 deletions priv/public/ui/app/mn_admin/mn_overview/mn_overview.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,82 @@
<mn-element-cargo depot="header">
<div class="about-text resp-sml">
{{::adminCtl.implementationVersion | mnPrettyVersion}} <span ng-show="overviewCtl.isIPv6">&#8231; IPv6</span><span ng-show="!overviewCtl.isIPv6">&#8231; IPv4</span>
<br>
&copy; 2018 <a href="http://couchbase.com" target="_blank">Couchbase, Inc.</a>
</div>
</mn-element-cargo>

<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)">
<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)">

<div class="content-box-dashboard max-width-12 resp-xsml">
<div class="zero-content max-width-12 " ng-show="!buckets.details.length">
You have no data buckets.
<span ng-show="rbac.cluster.buckets.create">
Go to <a ui-sref="app.admin.buckets">Buckets</a> to add one, or load a
<a ui-sref="app.admin.settings.sampleBuckets">sample bucket</a> with data & indexes.
</span>
</div>

<div ui-view=""></div>

<!--
<div class="content-box-dashboard max-width-12 margin-top-2 resp-wrap-med resp-med">
<div
class="column width-6">
<b class="text-small">Data Service Memory</b>
<div
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>
<div
class="column width-6">
<b class="text-small">Data Service Disk</b>
<div
class="bar-usages"
mn-bar-usage
base-info="overviewCtl.mnOverviewConfig.hddOverviewConfig"></div>
</div>
</div>
<div ng-if="rbac.cluster.bucket['.'].settings.read">
<div
ng-if="rbac.cluster.bucket['.'].stats.read"
class="row flex-left items-top resp-wrap-med">
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1 margin-right-3">
<b class="text-small">Buckets Operations Per Second</b>
<span ng-show="!overviewCtl.mnOverviewStats.opsGraphConfig.stats.length">
loading stats...
</span>
<div
ng-if="overviewCtl.mnOverviewStats.opsGraphConfig.stats.length"
mn-plot
mn-plot-config="overviewCtl.mnOverviewStats.opsGraphConfig"
style="height: 150px; width: 360px; margin-right: 2rem;"
class="text-smaller"></div>
</div>
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1">
<b class="text-small">Disk Fetches Per Second</b>
<span ng-show="!overviewCtl.mnOverviewStats.readsGraphConfig.stats.length">
loading stats...
</span>
<div
ng-if="overviewCtl.mnOverviewStats.readsGraphConfig.stats.length"
mn-plot
mn-plot-config="overviewCtl.mnOverviewStats.readsGraphConfig"
style="height: 150px; width: 360px;"
class="text-smaller"></div>
</div>
</div>
</div>
-->
</div>
<footer>
<div class="content-box-dashboard resp-xsml">
<div class="dashboard-nodes" title="active nodes">
<span class="icon fa-server green-2"></span>
<h3>{{overviewCtl.nodes.all.active.length || '0'}}</h3>
Expand Down Expand Up @@ -35,10 +105,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.buckets"
ng-class="['dynamic_' + overviewCtl.nodes.kv.statusClass]">
<b class="text-small">Data</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.kv.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.kv.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.kv.nodesByStatuses">
Expand All @@ -50,10 +120,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.gsi"
ng-class="['dynamic_' + overviewCtl.nodes.index.statusClass]">
<b class="text-small">Index</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.index.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.index.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.index.nodesByStatuses">
Expand All @@ -65,10 +135,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.query.workbench"
ng-class="['dynamic_' + overviewCtl.nodes.n1ql.statusClass]">
<b class="text-small">Query</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.n1ql.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.n1ql.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.n1ql.nodesByStatuses">
Expand All @@ -80,10 +150,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.search.fts_list"
ng-class="['dynamic_' + overviewCtl.nodes.fts.statusClass]">
<b class="text-small">Search</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.fts.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.fts.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.fts.nodesByStatuses">
Expand All @@ -96,10 +166,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.cbas.workbench"
ng-class="['dynamic_' + overviewCtl.nodes.cbas.statusClass]">
<b class="text-small">Analytics</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.cbas.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.cbas.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.cbas.nodesByStatuses">
Expand All @@ -112,10 +182,10 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
ui-sref="app.admin.eventing.summary"
ng-class="['dynamic_' + overviewCtl.nodes.eventing.statusClass]">
<b class="text-small">Eventing</b>
<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
<!--<a ng-click="$event.stopPropagation()" ui-sref="app.admin.servers.list">
{{overviewCtl.nodes.eventing.length || '0'}}
node{{overviewCtl.getEndings(overviewCtl.nodes.eventing.length)}}
</a>
</a>-->
<div
class="error"
ng-repeat="(nodeStatuses, count) in overviewCtl.nodes.eventing.nodesByStatuses">
Expand All @@ -130,77 +200,12 @@ <h3>{{overviewCtl.nodes.all.down.length || '0'}}</h3>
<b class="text-small">XDCR</b>
<a>
{{overviewCtl.xdcrReferences.filtered.length}}
remote cluster{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}
</a>
remote{{overviewCtl.getEndings(overviewCtl.xdcrReferences.filtered.length)}}
</a> |
<a>
{{adminCtl.tasks.tasksXDCR.length}}
replication{{overviewCtl.getEndings(adminCtl.tasks.tasksXDCR.length)}}
</a>
</div>
</div>

<div ui-view=""></div>

<div class="content-box-dashboard max-width-12 margin-top-2 resp-wrap-med resp-med">
<div
class="column width-6">
<b class="text-small">Data Service Memory</b>
<div
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>
<div
class="column width-6">
<b class="text-small">Data Service Disk</b>
<div
class="bar-usages"
mn-bar-usage
base-info="overviewCtl.mnOverviewConfig.hddOverviewConfig"></div>
</div>
</div>

<div ng-if="rbac.cluster.bucket['.'].settings.read">
<div
ng-if="rbac.cluster.bucket['.'].stats.read"
class="row flex-left items-top resp-wrap-med">
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1 margin-right-3">
<b class="text-small">Buckets Operations Per Second</b>
<span ng-show="!overviewCtl.mnOverviewStats.opsGraphConfig.stats.length">
loading stats...
</span>
<div
ng-if="overviewCtl.mnOverviewStats.opsGraphConfig.stats.length"
mn-plot
mn-plot-config="overviewCtl.mnOverviewStats.opsGraphConfig"
style="height: 150px; width: 360px; margin-right: 2rem;"
class="text-smaller"></div>
</div>
<div ng-show="buckets.details.length" class="fix-width-5 margin-top-1">
<b class="text-small">Disk Fetches Per Second</b>
<span ng-show="!overviewCtl.mnOverviewStats.readsGraphConfig.stats.length">
loading stats...
</span>

<div
ng-if="overviewCtl.mnOverviewStats.readsGraphConfig.stats.length"
mn-plot
mn-plot-config="overviewCtl.mnOverviewStats.readsGraphConfig"
style="height: 150px; width: 360px;"
class="text-smaller"></div>
</div>
</div>
<div class="zero-content max-width-12 " ng-show="!buckets.details.length">
You have no data buckets.
<span ng-show="rbac.cluster.buckets.create">
Go to <a ui-sref="app.admin.buckets">Buckets</a> to add one, or load a
<a ui-sref="app.admin.settings.sampleBuckets">sample bucket</a> with data & indexes.
</span>
</div>
</div>
</div>
<footer>Copyright &copy; 2018 <a href="http://couchbase.com" target="_blank">Couchbase, Inc.</a> All rights reserved.</footer>
</footer>

0 comments on commit 799586b

Please sign in to comment.