SOLR-4284: Admin UI - make core list scrollable separate from the rest of the UI

git-svn-id: https://svn.apache.org/repos/asf/lucene/dev/trunk@1439602 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Stefan Matheis 2013-01-28 19:56:10 +00:00
parent 5dbcae4cd3
commit 6cb265da45
12 changed files with 160 additions and 83 deletions

View File

@ -112,6 +112,9 @@ Optimizations
* SOLR-4306: Utilize indexInfo=false when gathering core names in UI
(steffkes)
* SOLR-4284: Admin UI - make core list scrollable separate from the rest of
the UI (steffkes)
Other Changes
----------------------

View File

@ -111,8 +111,12 @@ limitations under the License.
</ul>
<ul id="menu-selector">
</ul>
<div id="core-selector">
<select data-placeholder="Core Selector"></select>
</div>
<div id="core-menu">
<ul></ul>
</div>
</div>
</div>

View File

@ -172,7 +172,7 @@ ul
#header
{
padding-bottom: 10px;
position: absolute;
position: fixed;
z-index: 42;
}
@ -340,12 +340,6 @@ ul
width: 100%;
}
#content > pre
{
max-height: 600px;
overflow: auto;
}
#content .block
{
margin-bottom: 10px;

View File

@ -1,13 +1,13 @@
#menu-wrapper
{
position: absolute;
top: 90px;
position: fixed;
top: 120px;
width: 150px;
}
.has-environment #menu-wrapper
{
top: 130px;
top: 160px;
}
#menu-wrapper a
@ -18,6 +18,23 @@
text-overflow: ellipsis;
}
#core-selector
{
margin-top: 20px;
padding-right: 10px;
}
#core-selector a
{
padding: 0;
padding-left: 8px;
}
#core-selector select
{
width: 100%;
}
#menu-wrapper .active p
{
background-color: #fafafa;
@ -121,32 +138,27 @@
display: none;
}
#menu-selector
{
margin-top: 20px;
}
#menu-selector p
#core-menu p
{
border-top: 1px solid #f0f0f0;
}
#menu-selector li:first-child p
#core-menu li:first-child p
{
border-top: 0;
}
#menu-selector p a
#core-menu p a
{
background-image: url( ../../img/ico/status-offline.png );
}
#menu-selector .active p a
#core-menu .active p a
{
background-image: url( ../../img/ico/box.png );
}
#menu-selector ul,
#core-menu ul,
#menu ul
{
display: none;
@ -154,7 +166,7 @@
padding-bottom: 10px;
}
#menu-selector .active ul,
#core-menu .active ul,
#menu .active ul
{
display: block;
@ -165,7 +177,7 @@
border-bottom: 0;
}
#menu-selector ul li a,
#core-menu ul li a,
#menu ul li a
{
background-position: 7px 50%;
@ -175,20 +187,20 @@
padding-left: 26px;
}
#menu-selector ul li:last-child a,
#core-menu ul li:last-child a,
#menu ul li:last-child a
{
border-bottom: 0;
}
#menu-selector ul li a:hover,
#core-menu ul li a:hover,
#menu ul li a:hover
{
background-color: #f0f0f0;
color: #333;
}
#menu-selector ul li.active a,
#core-menu ul li.active a,
#menu ul li.active a
{
background-color: #d0d0d0;
@ -213,7 +225,7 @@
#menu #cloud.global .rgraph a { background-image: url( ../../img/ico/asterisk.png ); }
#menu #cloud.global .dump a { background-image: url( ../../img/ico/download-cloud.png ); }
#menu-selector .ping.error a
#core-menu .ping.error a
{
background-color: #ffcccc;
@ -222,17 +234,18 @@
cursor: help;
}
#menu-selector .query a { background-image: url( ../../img/ico/magnifier.png ); }
#menu-selector .schema a { background-image: url( ../../img/ico/table.png ); }
#menu-selector .config a { background-image: url( ../../img/ico/gear.png ); }
#menu-selector .analysis a { background-image: url( ../../img/ico/funnel.png ); }
#menu-selector .schema-browser a { background-image: url( ../../img/ico/book-open-text.png ); }
#menu-selector .replication a { background-image: url( ../../img/ico/node.png ); }
#menu-selector .distribution a { background-image: url( ../../img/ico/node-select.png ); }
#menu-selector .ping a { background-image: url( ../../img/ico/system-monitor.png ); }
#menu-selector .logging a { background-image: url( ../../img/ico/inbox-document-text.png ); }
#menu-selector .plugins a { background-image: url( ../../img/ico/block.png ); }
#menu-selector .dataimport a { background-image: url( ../../img/ico/document-import.png ); }
#core-menu .overview a { background-image: url( ../../img/ico/home.png ); }
#core-menu .query a { background-image: url( ../../img/ico/magnifier.png ); }
#core-menu .schema a { background-image: url( ../../img/ico/table.png ); }
#core-menu .config a { background-image: url( ../../img/ico/gear.png ); }
#core-menu .analysis a { background-image: url( ../../img/ico/funnel.png ); }
#core-menu .schema-browser a { background-image: url( ../../img/ico/book-open-text.png ); }
#core-menu .replication a { background-image: url( ../../img/ico/node.png ); }
#core-menu .distribution a { background-image: url( ../../img/ico/node-select.png ); }
#core-menu .ping a { background-image: url( ../../img/ico/system-monitor.png ); }
#core-menu .logging a { background-image: url( ../../img/ico/inbox-document-text.png ); }
#core-menu .plugins a { background-image: url( ../../img/ico/block.png ); }
#core-menu .dataimport a { background-image: url( ../../img/ico/document-import.png ); }
#content #navigation

BIN
solr/webapp/web/img/ico/home.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 752 B

View File

@ -92,11 +92,15 @@ var sammy = $.sammy
$( 'li.active', menu_wrapper )
.removeClass( 'active' );
if( this.params.splat )
// global dashboard doesn't have params.splat
if( !this.params.splat )
{
this.params.splat = [ '~index' ];
}
var selector = '~' === this.params.splat[0][0]
? '#' + this.params.splat[0].replace( /^~/, '' ) + '.global'
: '#menu-selector #' + this.params.splat[0].replace( /\./g, '__' );
: '#core-selector #' + this.params.splat[0].replace( /\./g, '__' );
var active_element = $( selector, menu_wrapper );
@ -106,6 +110,8 @@ var sammy = $.sammy
return false;
}
if( active_element.hasClass( 'global' ) )
{
active_element
.addClass( 'active' );
@ -115,10 +121,28 @@ var sammy = $.sammy
.addClass( 'active' );
}
if( !active_element.hasClass( 'global' ) )
{
this.active_core = active_element;
$( '#core-selector option[selected]' )
.removeAttr( 'selected' )
.trigger( 'liszt:updated' );
$( '#core-selector .chzn-container > a' )
.addClass( 'chzn-default' );
}
else
{
active_element
.attr( 'selected', 'selected' )
.trigger( 'liszt:updated' );
if( !this.params.splat[1] )
{
this.params.splat[1] = 'overview';
}
$( '#core-menu .' + this.params.splat[1] )
.addClass( 'active' );
this.active_core = active_element;
}
}
);
@ -143,9 +167,10 @@ var solr_admin = function( app_config )
plugin_data = null,
this.menu_element = $( '#menu-selector' );
this.config = config;
this.menu_element = $( '#core-selector select' );
this.core_menu = $( '#core-menu ul' );
this.config = config;
this.timeout = null;
this.core_regex_base = '^#\\/([\\w\\d-\\.]+)';
@ -197,6 +222,9 @@ var solr_admin = function( app_config )
that.menu_element
.empty();
var core_list = [];
core_list.push( '<option></option>' );
var core_count = 0;
for( var core_name in that.cores_data )
{
@ -214,31 +242,23 @@ var solr_admin = function( app_config )
classes.push( 'default' );
}
var core_tpl = '<li id="' + core_name.replace( /\./g, '__' ) + '" '
var core_tpl = '<option '
+ ' id="' + core_name.replace( /\./g, '__' ) + '" '
+ ' class="' + classes.join( ' ' ) + '"'
+ ' data-basepath="' + core_path + '"'
+ ' schema="' + cores.status[core_name]['schema'] + '"'
+ ' config="' + cores.status[core_name]['config'] + '"'
+ '>' + "\n"
+ ' <p><a href="#/' + core_name + '" title="' + core_name + '">' + core_name + '</a></p>' + "\n"
+ ' <ul>' + "\n"
+ ' value="#/' + core_name + '"'
+ ' title="' + core_name + '"'
+ '>'
+ core_name
+ '</option>';
+ ' <li class="ping"><a rel="' + core_path + '/admin/ping"><span>Ping</span></a></li>' + "\n"
+ ' <li class="query"><a href="#/' + core_name + '/query"><span>Query</span></a></li>' + "\n"
+ ' <li class="schema"><a href="#/' + core_name + '/schema"><span>Schema</span></a></li>' + "\n"
+ ' <li class="config"><a href="#/' + core_name + '/config"><span>Config</span></a></li>' + "\n"
+ ' <li class="replication"><a href="#/' + core_name + '/replication"><span>Replication</span></a></li>' + "\n"
+ ' <li class="analysis"><a href="#/' + core_name + '/analysis"><span>Analysis</span></a></li>' + "\n"
+ ' <li class="schema-browser"><a href="#/' + core_name + '/schema-browser"><span>Schema Browser</span></a></li>' + "\n"
+ ' <li class="plugins"><a href="#/' + core_name + '/plugins"><span>Plugins / Stats</span></a></li>' + "\n"
+ ' <li class="dataimport"><a href="#/' + core_name + '/dataimport"><span>Dataimport</span></a></li>' + "\n"
+ ' </ul>' + "\n"
+ '</li>';
core_list.push( core_tpl );
}
that.menu_element
.append( core_tpl );
}
.append( core_list.join( "\n" ) );
if( cores.initFailures )
{
@ -288,6 +308,52 @@ var solr_admin = function( app_config )
{
that.set_cores_data( response );
that.menu_element
.chosen()
.off( 'change' )
.on
(
'change',
function( event )
{
location.href = $( 'option:selected', this ).val();
return false;
}
)
.on
(
'liszt:updated',
function( event )
{
var core_name = $( 'option:selected', this ).text();
if( core_name )
{
that.core_menu
.html
(
'<li class="overview"><a href="#/' + core_name + '"><span>Overview</span></a></li>' + "\n" +
'<li class="ping"><a rel="' + that.config.solr_path + '/' + core_name + '/admin/ping"><span>Ping</span></a></li>' + "\n" +
'<li class="query"><a href="#/' + core_name + '/query"><span>Query</span></a></li>' + "\n" +
'<li class="schema"><a href="#/' + core_name + '/schema"><span>Schema</span></a></li>' + "\n" +
'<li class="config"><a href="#/' + core_name + '/config"><span>Config</span></a></li>' + "\n" +
'<li class="replication"><a href="#/' + core_name + '/replication"><span>Replication</span></a></li>' + "\n" +
'<li class="analysis"><a href="#/' + core_name + '/analysis"><span>Analysis</span></a></li>' + "\n" +
'<li class="schema-browser"><a href="#/' + core_name + '/schema-browser"><span>Schema Browser</span></a></li>' + "\n" +
'<li class="plugins"><a href="#/' + core_name + '/plugins"><span>Plugins / Stats</span></a></li>' + "\n" +
'<li class="dataimport"><a href="#/' + core_name + '/dataimport"><span>Dataimport</span></a></li>' + "\n"
)
.show();
}
else
{
that.core_menu
.hide()
.empty();
}
}
);
for( var core_name in response.status )
{
var core_path = config.solr_path + '/' + core_name;

View File

@ -208,9 +208,6 @@ sammy.get
{
var content_element = $( '#content' );
$( '#menu-wrapper #index' )
.addClass( 'active' );
content_element
.html( '<div id="index"></div>' );

View File

@ -21,7 +21,7 @@ sammy.get
/^#\/(~java-properties)$/,
function( context )
{
var core_basepath = $( 'li[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var core_basepath = $( '[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var content_element = $( '#content' );
content_element

View File

@ -406,7 +406,7 @@ sammy.get
/^#\/(~logging)$/,
function( context )
{
var core_basepath = $( 'li[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var core_basepath = $( '[data-basepath]', app.menu_element ).attr( 'data-basepath' );
loglevel_path = core_basepath + '/admin/logging';
var content_element = $( '#content' );
@ -492,7 +492,7 @@ sammy.get
/^#\/(~logging)\/level$/,
function( context )
{
var core_basepath = $( 'li[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var core_basepath = $( '[data-basepath]', app.menu_element ).attr( 'data-basepath' );
loglevel_path = core_basepath + '/admin/logging';
var content_element = $( '#content' );

View File

@ -15,7 +15,7 @@
limitations under the License.
*/
$( '.ping a', app.menu_element )
$( '.ping a', app.core_menu )
.live
(
'click',

View File

@ -228,7 +228,7 @@ sammy.bind
var related_select_element = $( '#related select', params.schema_browser_element )
var type = 'index';
var sammy_basepath = '#/' + $( 'p a', params.active_core ).html() + '/schema-browser';
var sammy_basepath = app.core_menu.find( '.active a' ).attr( 'href' );
if( !related_navigation_meta.hasClass( 'done' ) )
{
@ -640,7 +640,7 @@ sammy.bind
}
related_select_element
.attr( 'rel', '#/' + $( 'p a', params.active_core ).html() + '/schema-browser' )
.attr( 'rel', app.core_menu.find( '.active a' ).attr( 'href' ) )
.append( related_options )
.chosen();

View File

@ -21,7 +21,7 @@ sammy.get
/^#\/(~threads)$/,
function( context )
{
var core_basepath = $( 'li[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var core_basepath = $( '[data-basepath]', app.menu_element ).attr( 'data-basepath' );
var content_element = $( '#content' );
$.get