Skip to content

Commit

Permalink
Added the ability to show/hide Nodes and Indices
Browse files Browse the repository at this point in the history
  • Loading branch information
@karmi
karmi committed Oct 14, 2013
1 parent 4bb823f commit 071a56b
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 83 deletions.
20 changes: 20 additions & 0 deletions css/app.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,16 @@ header section .label.darker

/* Nodes */

#nodes-wrapper h2 a
{ color: #999;
text-transform: none;
float: right; }

#nodes-wrapper h2 a:hover
{ color: #666;
border-bottom: 1px solid #666;
cursor: pointer; }

#nodes .node
{ margin: 0.25em 0.5em 0.25em 0;
padding: 0.25em 0.5em 0.25em 0;
Expand All @@ -138,6 +148,16 @@ header section .label.darker

/* Indices */

#indices-wrapper h2 a
{ color: #999;
text-transform: none;
float: right; }

#indices-wrapper h2 a:hover
{ color: #666;
border-bottom: 1px solid #666;
cursor: pointer; }

#indices
{ counter-reset: index; }

Expand Down
184 changes: 101 additions & 83 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,98 +86,116 @@ <h2 class="label clear">
<div id="chart"></div>
</section>

<h2 class="label">Nodes</h2>
<script type="text/x-handlebars">
<div id="nodes" class="clearfix">
{{#each App.nodes}}
<div {{bindAttr class=":node master"}}>
<h3><span {{bindAttr class="master:icon-star"}}></span> {{name}}</h3>
<div class="meta">
<p><span class="label">ID: </span>{{id}}</p>
<p><span class="label">IP: </span>{{http_address}}</p>
<p><span class="label">Host: </span>{{hostname}}</p>
<p><span class="label">Load: </span>{{load}}</p>
<p><span class="label">Size: </span>{{disk}}</p>
<p><span class="label">Docs: </span>{{#bind docs}}{{number_with_delimiter docs}}{{/bind}}</p>
<p><span class="label">Heap: </span>{{jvm_heap_used}}
<small class="dimmed" title="Heap max">/{{jvm_heap_max}}</small></p>
</div>
<section id="nodes-wrapper">
<script type="text/x-handlebars">
<h2 class="label clear">
Nodes
<small><a {{action "toggle" target="App.toggleNodes"}}>{{App.toggleNodes.text}}</a></small>
</h2>
</script>
<script type="text/x-handlebars">
{{#unless App.nodes.hidden}}
<div id="nodes" class="clearfix">
{{#each App.nodes}}
<div {{bindAttr class=":node master"}}>
<h3><span {{bindAttr class="master:icon-star"}}></span> {{name}}</h3>
<div class="meta">
<p><span class="label">ID: </span>{{id}}</p>
<p><span class="label">IP: </span>{{http_address}}</p>
<p><span class="label">Host: </span>{{hostname}}</p>
<p><span class="label">Load: </span>{{load}}</p>
<p><span class="label">Size: </span>{{disk}}</p>
<p><span class="label">Docs: </span>{{#bind docs}}{{number_with_delimiter docs}}{{/bind}}</p>
<p><span class="label">Heap: </span>{{jvm_heap_used}}
<small class="dimmed" title="Heap max">/{{jvm_heap_max}}</small></p>
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
</script>
<br>

<h2 class="label">Indices</h2>
<script type="text/x-handlebars">
<div id="indices">
{{#each index in App.indices.sorted}}
{{#with index}}
<div {{bindAttr class=":index :clearfix state show_detail:expanded"}}>
<div class="basic-info clearfix">
<h3><a {{bindAttr href="url"}} title="Browse Index">{{name}}</a></h3>

<div class="buttons">
{{#unless closed}}
<button {{action "showDetail" target="App.indices"}}>
{{#if show_detail}}Hide details{{else}}Show details{{/if}}
</button>
{{/unless}}
</div>
{{/unless}}
</script>
<br>
</section>

<section id="indices-wrapper">
<script type="text/x-handlebars">
<h2 class="label clear">
Indices
<small><a {{action "toggle" target="App.toggleIndices"}}>{{App.toggleIndices.text}}</a></small>
</h2>
</script>
<script type="text/x-handlebars">
{{#unless App.indices.hidden}}
<div id="indices">
{{#each index in App.indices.sorted}}
{{#with index}}
<div {{bindAttr class=":index :clearfix state show_detail:expanded"}}>
<div class="basic-info clearfix">
<h3><a {{bindAttr href="url"}} title="Browse Index">{{name}}</a></h3>

<div class="buttons">
{{#unless closed}}
<button {{action "showDetail" target="App.indices"}}>
{{#if show_detail}}Hide details{{else}}Show details{{/if}}
</button>
{{/unless}}
</div>

<div class="shards">
{{#each shards}}
<div {{bindAttr class=":shard primary state recovery.stage" title="state"}}>
{{name}}
<div class="shards">
{{#each shards}}
<div {{bindAttr class=":shard primary state recovery.stage" title="state"}}>
{{name}}
</div>
{{/each}}
</div>
{{/each}}
</div>

<div class="meta">
<p>
{{settings.number_of_shards}} shards /
{{settings.number_of_replicas}} replicas /
{{#bind docs}}{{number_with_delimiter docs}}{{/bind}} docs /
{{size}} /
{{indexing.index_time}} indexing /
{{search.query_time}} querying /
{{state}}
</p>
<div class="meta">
<p>
{{settings.number_of_shards}} shards /
{{settings.number_of_replicas}} replicas /
{{#bind docs}}{{number_with_delimiter docs}}{{/bind}} docs /
{{size}} /
{{indexing.index_time}} indexing /
{{search.query_time}} querying /
{{state}}
</p>
</div>
</div>
</div>

<!-- Shard Allocation -->
{{#if show_detail}}
<div class="extra-info shards clearfix">
{{#unless show_detail_loaded}}
<div class="loading">Waiting for data...</div>
{{/unless}}
{{#each nodes}}
<div class="node">
<h3>{{name}} <small>{{hostname}}</small></h3>
<div class="clearfix">
{{#each shards}}
<div {{bindAttr class=":shard primary state recovery.stage" title="state"}}>
<h3>{{name}}</h3>
<div class="meta">
<p>{{state}}/{{recovery.stage}}</p>
<p>
{{recovery.time}}
{{recovery.size}}
</p>
</div>
</div>
{{/each}}
<!-- Shard Allocation -->
{{#if show_detail}}
<div class="extra-info shards clearfix">
{{#unless show_detail_loaded}}
<div class="loading">Waiting for data...</div>
{{/unless}}
{{#each nodes}}
<div class="node">
<h3>{{name}} <small>{{hostname}}</small></h3>
<div class="clearfix">
{{#each shards}}
<div {{bindAttr class=":shard primary state recovery.stage" title="state"}}>
<h3>{{name}}</h3>
<div class="meta">
<p>{{state}}/{{recovery.stage}}</p>
<p>
{{recovery.time}}
{{recovery.size}}
</p>
</div>
</div>
{{/each}}
</div>
</div>
{{/each}}
</div>
{{/each}}
</div>
{{/if}}
{{/if}}
</div>
{{/with}}
{{/each}}
</div>
{{/with}}
{{/each}}
</ul>
</script>
{{/unless}}
</script>
</section>

<audio id="alert-green" src="audio/alert-green.mp3"></audio>
<audio id="alert-yellow" src="audio/alert-yellow.mp3"></audio>
Expand Down
30 changes: 30 additions & 0 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,13 +94,16 @@ App.cluster = Ember.Object.create({
});

App.nodes = Ember.ArrayController.create({
hidden: false,
content: [],

contains: function(item) {
return (Ember.typeOf(item) == 'string') ? this.mapProperty('id').contains(item) : this._super();
},

refresh: function() {
if (App.nodes.hidden) { return }

clearTimeout(App.nodes.poller)
setTimeout(function() { App.set("refreshing", false) }, 1000)
App.nodes.poller = setTimeout( function() { App.nodes.__perform_refresh() }, App.refresh_interval.value )
Expand Down Expand Up @@ -158,13 +161,16 @@ App.nodes = Ember.ArrayController.create({
});

App.indices = Ember.ArrayController.create({
hidden: false,
content: [],

contains: function(item) {
return (Ember.typeOf(item) == 'string') ? this.mapProperty('name').contains(item) : this._super();
},

refresh: function() {
if (App.indices.hidden) { return }

clearTimeout(App.indices.poller)
setTimeout(function() { App.set("refreshing", false) }, 1000)
App.indices.poller = setTimeout( function() { App.indices.__perform_refresh() }, App.refresh_interval.value )
Expand Down Expand Up @@ -415,6 +421,30 @@ App.toggleChart = Ember.View.create({

this.set("text", visible ? 'Show' : 'Hide')
visible ? chart.hide('fast') : chart.show('fast')
App.nodes.refresh();
}
});

App.toggleIndices = Ember.View.create({
hidden: false,
text: 'Hide',

toggle: function(event) {
this.set("text", this.get('hidden') ? 'Hide' : 'Show')
this.toggleProperty('hidden')
App.indices.toggleProperty('hidden')
App.indices.refresh();
}
});

App.toggleNodes = Ember.View.create({
hidden: false,
text: 'Hide',

toggle: function(event) {
this.set("text", this.get('hidden') ? 'Hide' : 'Show')
this.toggleProperty('hidden')
App.nodes.toggleProperty('hidden')
}
});

Expand Down

0 comments on commit 071a56b

Please sign in to comment.