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 * SOLR-4306: Utilize indexInfo=false when gathering core names in UI
(steffkes) (steffkes)
* SOLR-4284: Admin UI - make core list scrollable separate from the rest of
the UI (steffkes)
Other Changes Other Changes
---------------------- ----------------------

View File

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

View File

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

View File

@ -1,13 +1,13 @@
#menu-wrapper #menu-wrapper
{ {
position: absolute; position: fixed;
top: 90px; top: 120px;
width: 150px; width: 150px;
} }
.has-environment #menu-wrapper .has-environment #menu-wrapper
{ {
top: 130px; top: 160px;
} }
#menu-wrapper a #menu-wrapper a
@ -18,6 +18,23 @@
text-overflow: ellipsis; 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 #menu-wrapper .active p
{ {
background-color: #fafafa; background-color: #fafafa;
@ -121,32 +138,27 @@
display: none; display: none;
} }
#menu-selector #core-menu p
{
margin-top: 20px;
}
#menu-selector p
{ {
border-top: 1px solid #f0f0f0; border-top: 1px solid #f0f0f0;
} }
#menu-selector li:first-child p #core-menu li:first-child p
{ {
border-top: 0; border-top: 0;
} }
#menu-selector p a #core-menu p a
{ {
background-image: url( ../../img/ico/status-offline.png ); 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 ); background-image: url( ../../img/ico/box.png );
} }
#menu-selector ul, #core-menu ul,
#menu ul #menu ul
{ {
display: none; display: none;
@ -154,7 +166,7 @@
padding-bottom: 10px; padding-bottom: 10px;
} }
#menu-selector .active ul, #core-menu .active ul,
#menu .active ul #menu .active ul
{ {
display: block; display: block;
@ -165,7 +177,7 @@
border-bottom: 0; border-bottom: 0;
} }
#menu-selector ul li a, #core-menu ul li a,
#menu ul li a #menu ul li a
{ {
background-position: 7px 50%; background-position: 7px 50%;
@ -175,20 +187,20 @@
padding-left: 26px; padding-left: 26px;
} }
#menu-selector ul li:last-child a, #core-menu ul li:last-child a,
#menu ul li:last-child a #menu ul li:last-child a
{ {
border-bottom: 0; border-bottom: 0;
} }
#menu-selector ul li a:hover, #core-menu ul li a:hover,
#menu ul li a:hover #menu ul li a:hover
{ {
background-color: #f0f0f0; background-color: #f0f0f0;
color: #333; color: #333;
} }
#menu-selector ul li.active a, #core-menu ul li.active a,
#menu ul li.active a #menu ul li.active a
{ {
background-color: #d0d0d0; background-color: #d0d0d0;
@ -213,7 +225,7 @@
#menu #cloud.global .rgraph a { background-image: url( ../../img/ico/asterisk.png ); } #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 #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; background-color: #ffcccc;
@ -222,17 +234,18 @@
cursor: help; cursor: help;
} }
#menu-selector .query a { background-image: url( ../../img/ico/magnifier.png ); } #core-menu .overview a { background-image: url( ../../img/ico/home.png ); }
#menu-selector .schema a { background-image: url( ../../img/ico/table.png ); } #core-menu .query a { background-image: url( ../../img/ico/magnifier.png ); }
#menu-selector .config a { background-image: url( ../../img/ico/gear.png ); } #core-menu .schema a { background-image: url( ../../img/ico/table.png ); }
#menu-selector .analysis a { background-image: url( ../../img/ico/funnel.png ); } #core-menu .config a { background-image: url( ../../img/ico/gear.png ); }
#menu-selector .schema-browser a { background-image: url( ../../img/ico/book-open-text.png ); } #core-menu .analysis a { background-image: url( ../../img/ico/funnel.png ); }
#menu-selector .replication a { background-image: url( ../../img/ico/node.png ); } #core-menu .schema-browser a { background-image: url( ../../img/ico/book-open-text.png ); }
#menu-selector .distribution a { background-image: url( ../../img/ico/node-select.png ); } #core-menu .replication a { background-image: url( ../../img/ico/node.png ); }
#menu-selector .ping a { background-image: url( ../../img/ico/system-monitor.png ); } #core-menu .distribution a { background-image: url( ../../img/ico/node-select.png ); }
#menu-selector .logging a { background-image: url( ../../img/ico/inbox-document-text.png ); } #core-menu .ping a { background-image: url( ../../img/ico/system-monitor.png ); }
#menu-selector .plugins a { background-image: url( ../../img/ico/block.png ); } #core-menu .logging a { background-image: url( ../../img/ico/inbox-document-text.png ); }
#menu-selector .dataimport a { background-image: url( ../../img/ico/document-import.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 #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 ) $( 'li.active', menu_wrapper )
.removeClass( 'active' ); .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] var selector = '~' === this.params.splat[0][0]
? '#' + this.params.splat[0].replace( /^~/, '' ) + '.global' ? '#' + 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 ); var active_element = $( selector, menu_wrapper );
@ -106,6 +110,8 @@ var sammy = $.sammy
return false; return false;
} }
if( active_element.hasClass( 'global' ) )
{
active_element active_element
.addClass( 'active' ); .addClass( 'active' );
@ -115,10 +121,28 @@ var sammy = $.sammy
.addClass( 'active' ); .addClass( 'active' );
} }
if( !active_element.hasClass( 'global' ) ) $( '#core-selector option[selected]' )
{ .removeAttr( 'selected' )
this.active_core = active_element; .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, plugin_data = null,
this.menu_element = $( '#menu-selector' ); this.menu_element = $( '#core-selector select' );
this.config = config; this.core_menu = $( '#core-menu ul' );
this.config = config;
this.timeout = null; this.timeout = null;
this.core_regex_base = '^#\\/([\\w\\d-\\.]+)'; this.core_regex_base = '^#\\/([\\w\\d-\\.]+)';
@ -197,6 +222,9 @@ var solr_admin = function( app_config )
that.menu_element that.menu_element
.empty(); .empty();
var core_list = [];
core_list.push( '<option></option>' );
var core_count = 0; var core_count = 0;
for( var core_name in that.cores_data ) for( var core_name in that.cores_data )
{ {
@ -214,31 +242,23 @@ var solr_admin = function( app_config )
classes.push( 'default' ); classes.push( 'default' );
} }
var core_tpl = '<li id="' + core_name.replace( /\./g, '__' ) + '" ' var core_tpl = '<option '
+ ' id="' + core_name.replace( /\./g, '__' ) + '" '
+ ' class="' + classes.join( ' ' ) + '"' + ' class="' + classes.join( ' ' ) + '"'
+ ' data-basepath="' + core_path + '"' + ' data-basepath="' + core_path + '"'
+ ' schema="' + cores.status[core_name]['schema'] + '"' + ' schema="' + cores.status[core_name]['schema'] + '"'
+ ' config="' + cores.status[core_name]['config'] + '"' + ' config="' + cores.status[core_name]['config'] + '"'
+ '>' + "\n" + ' value="#/' + core_name + '"'
+ ' <p><a href="#/' + core_name + '" title="' + core_name + '">' + core_name + '</a></p>' + "\n" + ' title="' + core_name + '"'
+ ' <ul>' + "\n" + '>'
+ core_name
+ '</option>';
+ ' <li class="ping"><a rel="' + core_path + '/admin/ping"><span>Ping</span></a></li>' + "\n" core_list.push( core_tpl );
+ ' <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>';
that.menu_element that.menu_element
.append( core_tpl ); .append( core_list.join( "\n" ) );
}
if( cores.initFailures ) if( cores.initFailures )
{ {
@ -288,6 +308,52 @@ var solr_admin = function( app_config )
{ {
that.set_cores_data( response ); 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 ) for( var core_name in response.status )
{ {
var core_path = config.solr_path + '/' + core_name; var core_path = config.solr_path + '/' + core_name;

View File

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

View File

@ -21,7 +21,7 @@ sammy.get
/^#\/(~java-properties)$/, /^#\/(~java-properties)$/,
function( context ) 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' ); var content_element = $( '#content' );
content_element content_element

View File

@ -406,7 +406,7 @@ sammy.get
/^#\/(~logging)$/, /^#\/(~logging)$/,
function( context ) 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'; loglevel_path = core_basepath + '/admin/logging';
var content_element = $( '#content' ); var content_element = $( '#content' );
@ -492,7 +492,7 @@ sammy.get
/^#\/(~logging)\/level$/, /^#\/(~logging)\/level$/,
function( context ) 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'; loglevel_path = core_basepath + '/admin/logging';
var content_element = $( '#content' ); var content_element = $( '#content' );

View File

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

View File

@ -228,7 +228,7 @@ sammy.bind
var related_select_element = $( '#related select', params.schema_browser_element ) var related_select_element = $( '#related select', params.schema_browser_element )
var type = 'index'; 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' ) ) if( !related_navigation_meta.hasClass( 'done' ) )
{ {
@ -640,7 +640,7 @@ sammy.bind
} }
related_select_element 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 ) .append( related_options )
.chosen(); .chosen();

View File

@ -21,7 +21,7 @@ sammy.get
/^#\/(~threads)$/, /^#\/(~threads)$/,
function( context ) 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' ); var content_element = $( '#content' );
$.get $.get