Skip to content

Commit

Permalink
spock-ui: update look and feel for servers tab
Browse files Browse the repository at this point in the history 
Change-Id: Ic35ac1dbd1601abfb8b9bb6fdcb4c1cd4e7364d0
Reviewed-on: http://review.couchbase.org/65125
Tested-by: Pavel Blagodov <stochmail@gmail.com>
Reviewed-by: Dave Finlay <dave.finlay@couchbase.com>
  • Loading branch information
@pavel-blagodov @dave-finlay
pavel-blagodov authored and dave-finlay committed Sep 13, 2016
1 parent 6a56a1f commit 22dd0b8
Show file tree
Hide file tree
Showing 15 changed files with 794 additions and 640 deletions.
88 changes: 47 additions & 41 deletions priv/public/ui/app/components/directives/mn_memory_quota/mn_memory_quota.html
View file
Expand Up @@ -14,27 +14,29 @@
<p>RAM Available: {{::config.totalMemorySize}} mb</p>
</div>
<div
class="formrow"
class="formrow checkbox-list"
ng-if="config.services"
mn-services="config">
</div>
<div
class="formrow"
ng-if="config.displayedServices.kv">
<label for="kv_ram_quota">Data RAM Quota</label>
<input
type="number"
min="0"
id="kv_ram_quota"
mn-focus
ng-disabled="config.services && !config.services.model.kv || (rbac && !rbac.cluster.pools.write)"
ng-model="config.memoryQuota">
<small>mb (min {{::config.minMemorySize}})</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for data service per node.
</span></span>
</a>
<div class="form-inline">
<input
type="number"
min="0"
id="kv_ram_quota"
mn-focus
ng-disabled="config.services && !config.services.model.kv || (rbac && !rbac.cluster.pools.write)"
ng-model="config.memoryQuota">
<small>mb (min {{::config.minMemorySize}})</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for data service per node.
</span></span>
</a>
</div>
<div
class="error"
ng-show="errors.memoryQuota">
Expand All @@ -46,19 +48,21 @@
class="formrow"
ng-if="config.displayedServices.index">
<label for="index_ram_quota">Index RAM Quota</label>
<input
type="number"
min="0"
id="index_ram_quota"
ng-disabled="config.services && !config.services.model.index || (rbac && !rbac.cluster.pools.write)"
mn-focus="config.services.model.kv === false"
ng-model="config.indexMemoryQuota">
<small>mb (min 256)</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for index service per node.
</span></span>
</a>
<div class="form-inline">
<input
type="number"
min="0"
id="index_ram_quota"
ng-disabled="config.services && !config.services.model.index || (rbac && !rbac.cluster.pools.write)"
mn-focus="config.services.model.kv === false"
ng-model="config.indexMemoryQuota">
<small>mb (min 256)</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for index service per node.
</span></span>
</a>
</div>
<div
class="error"
ng-show="errors.indexMemoryQuota">
Expand All @@ -67,22 +71,24 @@
</div>

<div
class="formrow memory-quota"
class="formrow"
ng-if="config.displayedServices.fts">
<label for="fts_ram_quota">Full Text RAM Quota</label>
<input
type="number"
min="0"
id="fts_ram_quota"
mn-focus="config.services.model.kv === false && config.services.model.index === false"
ng-disabled="config.services && !config.services.model.fts || (rbac && !rbac.cluster.pools.write)"
ng-model="config.ftsMemoryQuota">
<small>mb (min 256)</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for full text service per node.
</span></span>
</a>
<div class="form-inline">
<input
type="number"
min="0"
id="fts_ram_quota"
mn-focus="config.services.model.kv === false && config.services.model.index === false"
ng-disabled="config.services && !config.services.model.fts || (rbac && !rbac.cluster.pools.write)"
ng-model="config.ftsMemoryQuota">
<small>mb (min 256)</small>
<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg"><span>
Main memory allocation amount for full text service per node.
</span></span>
</a>
</div>
<div
class="error"
ng-show="errors.ftsMemoryQuota">
Expand Down
44 changes: 33 additions & 11 deletions priv/public/ui/app/components/directives/mn_services/mn_services.html
View file
@@ -1,14 +1,36 @@
<label>Services:</label>
<div class="wizard_services">
<input type="checkbox" class="js_service_flag" name="services" value="kv" id="kv_service" ng-model="config.services.model.kv" ng-disabled="config.services.disabled.kv || !isEnterprise" />
<label class="label" for="kv_service">Data</label>
<input type="checkbox" class="js_service_flag" name="services" value="index" id="index_service" ng-change="onChange(config.services.model.index, 'index')" ng-model="config.services.model.index" ng-disabled="config.services.disabled.index" />
<label class="label" for="index_service">Index</label>
<input type="checkbox" class="js_service_flag" name="services" value="n1ql" id="n1ql_service" ng-change="onChange(config.services.model.n1ql, 'n1ql')" ng-model="config.services.model.n1ql" ng-disabled="config.services.disabled.n1ql" />
<label class="label" for="n1ql_service">Query</label>
<input type="checkbox" class="js_service_flag" name="services" value="fts" id="fts_service" ng-change="onChange(config.services.model.fts, 'fts')" ng-model="config.services.model.fts" ng-disabled="config.services.disabled.fts" />
<label class="label" for="fts_service">Full Text</label>
</div>
<h4>Services</h4>
<input
type="checkbox"
value="kv"
id="kv_service"
ng-model="config.services.model.kv"
ng-disabled="config.services.disabled.kv || !isEnterprise">
<label for="kv_service">Data</label>
<input
type="checkbox"
value="index"
id="index_service"
ng-change="onChange(config.services.model.index, 'index')"
ng-model="config.services.model.index"
ng-disabled="config.services.disabled.index">
<label for="index_service">Index</label>
<input
type="checkbox"
value="n1ql"
id="n1ql_service"
ng-change="onChange(config.services.model.n1ql, 'n1ql')"
ng-model="config.services.model.n1ql"
ng-disabled="config.services.disabled.n1ql">
<label for="n1ql_service">Query</label>
<input
type="checkbox"
value="fts"
id="fts_service"
ng-change="onChange(config.services.model.fts, 'fts')"
ng-model="config.services.model.fts"
ng-disabled="config.services.disabled.fts">
<label for="fts_service">Full Text</label>

<a class="tooltip text_11"><span>What&#39;s this?</span>
<span class="tooltip_msg" style="width:350px;"><span>
Only uncheck services you are certain you will NOT use on this node. Services are enabled on a per-node basis.
Expand Down
47 changes: 22 additions & 25 deletions priv/public/ui/app/components/directives/mn_storage_mode/mn_storage_mode.html
View file
@@ -1,27 +1,24 @@
<div class="storage-mode row">
<div class="error-container err-indexMemoryQuota" ng-show="errors.storageMode">
{{errors.storageMode | mnFormatStorageModeError}}
<label for="index_ram_quota" ng-hide="noLabel">Index Storage Setting:</label>
<div class="checkbox-list storage-mode">
<div class="indent-1">
<input
type="radio"
value="forestdb"
id="storage_mode_forestdb"
ng-model="config.storageMode"
ng-disabled="isDisabled">
<label for="storage_mode_forestdb" class="checkbox">Standard Global Secondary Indexes</label>
</div>
<div class="indent-1">
<input
type="radio"
value="memory_optimized"
id="storage_memory_optimized"
ng-model="config.storageMode"
ng-disabled="isDisabled">
<label for="storage_memory_optimized" class="checkbox">Memory-Optimized Global Secondary Indexes</label>
</div>
<label for="index_ram_quota" ng-hide="noLabel" style="display: inline-block; vertical-align: top;">Index Storage Setting:</label>
<div style="display: inline-block;">
<div>
<input
type="radio"
value="forestdb"
id="storage_mode_forestdb"
ng-model="config.storageMode"
ng-disabled="isDisabled"
>
<label for="storage_mode_forestdb" style="width:auto;margin-right:5px;">Standard Global Secondary Indexes</label>
</div>
<div>
<input
type="radio"
value="memory_optimized"
id="storage_memory_optimized"
ng-model="config.storageMode"
ng-disabled="isDisabled">
<label for="storage_memory_optimized" style="width:auto;">Memory-Optimized Global Secondary Indexes</label>
</div>
<div class="error error-field" ng-show="errors.storageMode">
{{errors.storageMode | mnFormatStorageModeError}}
</div>
</div>
</div>
4 changes: 2 additions & 2 deletions priv/public/ui/app/components/directives/mn_vertical_bar/mn_vertical_bar.html
View file
@@ -1,5 +1,5 @@
<div class="vertical_bar" ng-if="conf.exist">
<div class="used" ng-style="{height: conf.height + '%', top: conf.top + '%'}"></div>
</div>
<div class="wrap" ng-if="conf.exist">{{conf.value | mnTruncateTo3Digits}}%</div>
<div class="not_active" ng-if="!conf.exist">N/A</div>
<span ng-show="conf.exist">{{conf.value | mnTruncateTo3Digits}}%</span>
<span ng-show="!conf.exist">N/A</span>
13 changes: 12 additions & 1 deletion priv/public/ui/app/css/cbui-base.css
View file
Expand Up @@ -132,6 +132,10 @@ hr {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.main-content hr {
margin-right: -2rem;
}

img,
video,
audio,
Expand Down Expand Up @@ -583,6 +587,12 @@ a:active {
color: #689fde;
}

a[disabled] {
pointer-events: none;
color: #afafaf;
cursor: "default";
}

.disabled-link {
color: #a1a1a1 !important;
cursor: default !important;
Expand Down Expand Up @@ -693,6 +703,7 @@ table th,
table td {
font-size: .875rem;
padding: 1rem;
vertical-align: middle;
}

.border-top {
Expand Down Expand Up @@ -1190,4 +1201,4 @@ select.select-small {
/* background colors ----------------------------------- */
.grayblue-5 {
background-color: #f6f7f9;
}
}
82 changes: 79 additions & 3 deletions priv/public/ui/app/css/cbui-components.css
View file
Expand Up @@ -226,12 +226,23 @@ td.node_name a {
cursor: pointer;
}

td.dynamic_healthy {
.node-status {
padding:0;
width: 4px;
background-color:#2ca01c;
}

td.dynamic_healthy {
background-color: #2ca01c;
}
td.dynamic_unhealthy {
background-color: red;
}
td.dynamic_inactiveFailed,
td.dynamic_warmup {
background-color: orange;
}


/* Main Header Elements ------------ */
header .logobug {
margin: 0 .5rem 0 0;
Expand Down Expand Up @@ -724,6 +735,8 @@ section.status-red .cbui-tablerow-statusmsg {
justify-content:flex-end;
}

.without-titlebar-close .ui-dialog-titlebar-close {display: none;}

/* Sign In page details ------------ */
.sign-in-background {
background: #eceff2;
Expand All @@ -746,7 +759,7 @@ section.status-red .cbui-tablerow-statusmsg {
}

.dialog-small {
width: 320px;
width: 380px;
}

.dialog-small .panel-content {
Expand Down Expand Up @@ -855,6 +868,7 @@ section.status-red .cbui-tablerow-statusmsg {
padding: 0.25rem 0.5rem;
position: relative;
top: -3px;
white-space: nowrap;
}

.label.lt-blue {
Expand Down Expand Up @@ -1055,6 +1069,9 @@ meter {
.bar-usages.label-top-0-gold .label-top-0 {
color: rgb(193, 151, 16);
}
.bar-usages.label-top-0-red .label-top-0 {
color: rgb(228, 58, 27);
}
.bar-usages.overcommitted .label-bottom-2 {
color: rgb(244, 0, 21);
}
Expand Down Expand Up @@ -1160,3 +1177,62 @@ meter {
height: 1rem;
vertical-align: middle;
}

/* vertical usage bar --------------- */

.vertical_bar {
display: inline-block;
vertical-align: middle;
width: 1rem;
height: 3rem;
background: white;
border: .1rem solid #999;
border-radius: .1rem; margin-right: .3rem;
}
.vertical_bar .used {
position: relative;
background: #4287D6;
}

/* rebalance progress --------------- */

.rebalance-progress {
position: relative;
height: 1rem;
background-color: rgb(229, 229, 229);
width: 100%;
}
.rebalance-progress div {
position: absolute;
height: 100%;
background-color: #4287D6

}

/* create xdcr dialog --------------- */

.dynamic-hightlight span {
Background-color: LightSkyBlue;
}
.match_indicator {
background-color: #ffbd44;
color: #fff;
font-size: 0.7rem;
text-align: center;
line-height: 1.5rem;
position: absolute;
width: 4rem;
height: 1.6rem;
top: -1.8rem;
right: 0.2rem;
}
.match_indicator.dynamic_match {background-color: green;}
.match_indicator .no_match,
.match_indicator.dynamic_match .match,
.match_indicator.dynamic_spinner .loading {display: block;}
.match_indicator.dynamic_spinner .no_match,
.match_indicator.dynamic_spinner .match,
.match_indicator.dynamic_match .no_match,
.match_indicator.dynamic_match .loading,
.match_indicator .loading,
.match_indicator .match {display: none;}

0 comments on commit 22dd0b8

Please sign in to comment.