Apache
/
lucene
mirror of https://github.com/apache/lucene.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

SOLR-3238: CoreAdmin UI-Refactoring 

git-svn-id: https://svn.apache.org/repos/asf/lucene/dev/trunk@1331261 13f79535-47bb-0310-9956-ffa450edef68
This commit is contained in:
Stefan Matheis 2012-04-27 07:18:53 +00:00
parent 9dcae1a12f
commit 0cd09a8900
4 changed files with 283 additions and 373 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
solr/webapp/web/css/styles/common.css
View File

@ -28,6 +28,11 @@ input, select, textarea
padding: 2px; padding: 2px;
} }
input[readonly=readonly]
{
border-color: #f0f0f0;
}
button button
{ {
background-color: #e6e6e6; background-color: #e6e6e6;

236
solr/webapp/web/css/styles/cores.css
View File

@ -1,48 +1,34 @@
#content #cores #content #cores
{ {
position: relative;
}
#content #cores #ui-block
{
background-color: #fff;
height: 200px;
display: none;
position: absolute;
left: -5px;
top: 35px;
width: 500px;
} }
#content #cores #frame #content #cores #frame
{ {
float: right; float: right;
width: 78%; width: 86%;
} }
#content #cores #navigation #content #cores #navigation
{ {
background-image: url( ../../img/div.gif ); padding-top: 50px;
background-position: 100% 0; width: 12%;
background-repeat: repeat-y;
width: 20%;
} }
#content #cores #list #content #cores #navigation a
{ {
float: left; padding-left: 5px;
padding-top: 15px;
width: 100%;
}
#content #cores #list a
{
border-right: 1px solid #f0f0f0;
display: block;
margin-left: 1px;
padding: 3px 0;
}
#content #cores #list a:hover
{
background-color: #fafafa;
}
#content #cores #list .current a
{
background-color: #fff;
border-right-color: #fff;
border-top: 1px solid #f0f0f0;
border-bottom: 1px solid #f0f0f0;
font-weight: bold;
} }
#content #cores #frame .actions #content #cores #frame .actions
@ -50,181 +36,119 @@
margin-bottom: 20px; margin-bottom: 20px;
} }
#content #cores .actions form .buttons #content #cores .actions div.action
{ {
padding-left: 40px; width: 300px;
} }
#content #cores .actions form a #content #cores .actions div.action .cloud
{
display: block;
float: left;
height: 20px;
margin-right: 5px;
padding-left: 21px;
}
#content #cores .actions form a span
{ {
display: none; display: none;
} }
#content #cores .actions form a.submit
{
background-image: url( ../../img/ico/tick.png );
background-position: 50% 50%;
}
#content #cores .actions form a.submit:hover
{
background-color: #e6f3e6;
}
#content #cores .actions form a.reset
{
background-image: url( ../../img/ico/cross.png );
background-position: 50% 50%;
}
#content #cores .actions form a.reset:hover
{
background-color: #f3e6e6;
}
#content #cores .actions form p #content #cores .actions form p
{ {
padding-bottom: 3px; padding-bottom: 8px;
} }
#content #cores .actions form label #content #cores .actions form label
{ {
float: left; float: left;
width: 40px; padding-top: 3px;
padding-bottom: 3px;
text-align: right;
width: 25%;
} }
#content #cores .actions form input, #content #cores .actions form input,
#content #cores .actions form select #content #cores .actions form select,
#content #cores .actions form .buttons
{ {
width: 100px; float: right;
width: 73%;
} }
#content #cores .actions form select option.disabled #content #cores .actions form .buttons
{ {
color: #c0c0c0; padding-top: 10px;
} }
#content #cores .actions .button-holder #content #cores .actions form button.submit
{ {
float: left; margin-right: 20px;
margin-right: 10px;
margin-bottom: 5px;
} }
#content #cores .actions .button-holder.active #content #cores .actions form button.submit span
{
margin-bottom: 0;
}
#content #cores .actions .button-holder .button
{
background-color: #f5f5f5;
border: 1px solid #c0c0c0;
position: relative;
z-index: 100;
}
#content #cores .actions .button-holder.active .button
{
background-color: #fff;
border-bottom-color: #fff;
padding-bottom: 5px;
}
#content #cores .actions .button-holder .button a
{
background-position: 5px 50%;
display: block;
padding: 1px 5px;
padding-left: 24px;
}
#content #cores .actions .button-holder .button a.success
{ {
background-image: url( ../../img/ico/tick.png ); background-image: url( ../../img/ico/tick.png );
} }
#content #cores .actions .button-holder.active .button a #content #cores .actions form button.reset span
{
cursor: auto;
}
#content #cores .actions .button-holder .button-content
{
background-color: #fff;
border: 1px solid #c0c0c0;
box-shadow: 5px 5px 10px #c0c0c0;
-moz-box-shadow: 5px 5px 10px #c0c0c0;
-webkit-box-shadow: 5px 5px 10px #c0c0c0;
display: none;
margin-top: -1px;
padding: 5px;
padding-top: 15px;
position: absolute;
z-index: 99;
}
#content #cores .actions .button-holder.active .button-content
{
display: block;
}
#content #cores .actions .button .reload
{
background-image: url( ../../img/ico/arrow-circle.png );
}
#content #cores .actions .button .rename
{
background-image: url( ../../img/ico/ui-text-field-select.png );
}
#content #cores .actions .button .swap
{
background-image: url( ../../img/ico/arrow-switch.png );
}
#content #cores .actions .button .unload
{ {
background-image: url( ../../img/ico/cross.png ); background-image: url( ../../img/ico/cross.png );
} }
#content #cores .actions .button .optimize #content #cores .actions #add
{ {
background-image: url( ../../img/ico/hammer-screwdriver.png ); left: 0;
display: none; position: absolute;
} }
#content #cores #navigation .add #content #cores .actions #add span
{ {
background-image: url( ../../img/ico/plus-button.png ); background-image: url( ../../img/ico/plus-button.png );
} }
#content #cores #navigation .add label #content #cores .actions #unload
{ {
width: 85px; margin-right: 20px;
} }
#content #cores #navigation .add input #content #cores .actions #unload span
{ {
width: 155px; background-image: url( ../../img/ico/cross.png );
} }
#content #cores #navigation .add .buttons #content #cores .actions #reload span
{ {
padding-left: 85px; background-image: url( ../../img/ico/arrow-circle.png );
} }
#content #cores #data #core-data h2 { background-image: url( ../../img/ico/database.png ); } #content #cores .actions #rename span
{
background-image: url( ../../img/ico/ui-text-field-select.png );
}
#content #cores .actions #swap span
{
background-image: url( ../../img/ico/arrow-switch.png );
}
#content #cores .actions #optimize
{
display: none;
}
#content #cores .actions #optimize span
{
background-image: url( ../../img/ico/hammer-screwdriver.png );
}
#content #cores .actions div.action
{
background-color: #fff;
border: 1px solid #f0f0f0;
box-shadow: 5px 5px 10px #c0c0c0;
-moz-box-shadow: 5px 5px 10px #c0c0c0;
-webkit-box-shadow: 5px 5px 10px #c0c0c0;
display: none;
position: absolute;
left: -50px;
top: 40;
padding: 10px;
}
#content #cores #data #core-data h2 { background-image: url( ../../img/ico/box.png ); }
#content #cores #data #index-data h2 { background-image: url( ../../img/ico/chart.png ); } #content #cores #data #index-data h2 { background-image: url( ../../img/ico/chart.png ); }
#content #cores #data #index-data #content #cores #data #index-data

179
solr/webapp/web/js/scripts/cores.js
View File

@ -157,7 +157,6 @@ sammy.get
{ {
var cores_element = $( '#cores', content_element ); var cores_element = $( '#cores', content_element );
var navigation_element = $( '#navigation', cores_element ); var navigation_element = $( '#navigation', cores_element );
var list_element = $( '#list', navigation_element );
var data_element = $( '#data', cores_element ); var data_element = $( '#data', cores_element );
var core_data_element = $( '#core-data', data_element ); var core_data_element = $( '#core-data', data_element );
var index_data_element = $( '#index-data', data_element ); var index_data_element = $( '#index-data', data_element );
@ -169,7 +168,7 @@ sammy.get
cores : cores, cores : cores,
basepath : path_parts[1], basepath : path_parts[1],
current_core : current_core, current_core : current_core,
navigation_element : list_element navigation_element : navigation_element
} }
); );
@ -178,9 +177,6 @@ sammy.get
// core-data // core-data
$( 'h2 span', core_data_element )
.html( core_data.name );
$( '.startTime dd', core_data_element ) $( '.startTime dd', core_data_element )
.html( core_data.startTime ); .html( core_data.startTime );
@ -207,7 +203,7 @@ sammy.get
$( '.optimized dd', index_data_element ) $( '.optimized dd', index_data_element )
.addClass( core_data.index.optimized ? 'ico-1' : 'ico-0' ); .addClass( core_data.index.optimized ? 'ico-1' : 'ico-0' );
$( '#actions .optimize', cores_element ) $( '#actions #optimize', cores_element )
.show(); .show();
$( '.optimized dd span', index_data_element ) $( '.optimized dd span', index_data_element )
@ -244,89 +240,121 @@ sammy.get
core_selects core_selects
.html( core_names.join( "\n") ); .html( core_names.join( "\n") );
$( 'option[value="' + current_core + '"]', core_selects.filter( '#swap_core' ) )
.attr( 'selected', 'selected' );
$( 'option[value="' + current_core + '"]', core_selects.filter( '.other' ) ) $( 'option[value="' + current_core + '"]', core_selects.filter( '.other' ) )
.attr( 'disabled', 'disabled' ) .remove();
.addClass( 'disabled' );
$( 'input[name="core"]', cores_element ) $( 'input[data-core="current"]', cores_element )
.val( current_core ); .val( current_core );
// layout // layout
var ui_block = $( '#ui-block' );
var actions_element = $( '.actions', cores_element ); var actions_element = $( '.actions', cores_element );
var button_holder_element = $( '.button-holder.options', actions_element ); var div_action = $( 'div.action', actions_element );
button_holder_element ui_block
.die( 'toggle' ) .css( 'opacity', 0.7 )
.live .width( cores_element.width() + 10 )
( .height( cores_element.height() );
'toggle',
function( event )
{
var element = $( this );
element $( 'button.action', actions_element )
.toggleClass( 'active' );
if( element.hasClass( 'active' ) )
{
button_holder_element
.not( element )
.removeClass( 'active' );
}
}
);
$( '.button a', button_holder_element )
.die( 'click' ) .die( 'click' )
.live .live
( (
'click', 'click',
function( event ) function( event )
{ {
$( this ).parents( '.button-holder' ) var self = $( this );
.trigger( 'toggle' );
self
.toggleClass( 'open' );
$( '.action.' + self.attr( 'id' ), actions_element )
.trigger( 'open' );
return false;
} }
); );
$( 'form a.submit', button_holder_element ) div_action
.die( 'close' )
.live
(
'close',
function( event )
{
div_action.hide();
ui_block.hide();
}
)
.die( 'open' )
.live
(
'open',
function( event )
{
var self = $( this );
var rel = $( '#' + self.data( 'rel' ) );
self
.trigger( 'close' )
.show()
.css( 'left', rel.position().left );
ui_block
.show();
}
);
$( 'form button.reset', actions_element )
.die( 'click' ) .die( 'click' )
.live .live
( (
'click', 'click',
function( event ) function( event )
{ {
var element = $( this ); $( this ).closest( 'div.action' )
var form_element = element.parents( 'form' ); .trigger( 'close' );
var action = $( 'input[name="action"]', form_element ).val().toLowerCase(); }
);
form_element var form_callback = {
.ajaxSubmit
rename : function( form, response )
{
var url = path_parts[1] + $( 'input[name="other"]', form ).val();
context.redirect( url );
}
};
$( 'form', div_action )
.ajaxForm
( (
{ {
url : app.config.solr_path + app.config.core_admin_path + '?wt=json', url : app.config.solr_path + app.config.core_admin_path + '?wt=json',
dataType : 'json', dataType : 'json',
beforeSubmit : function( array, form, options ) beforeSubmit : function( array, form, options )
{ {
//loader $( 'button[type="submit"] span', form )
.addClass( 'loader' );
}, },
success : function( response, status_text, xhr, form ) success : function( response, status_text, xhr, form )
{ {
var action = $( 'input[name="action"]', form ).val().toLowerCase();
delete app.cores_data; delete app.cores_data;
if( 'rename' === action ) if( form_callback[action] )
{ {
context.redirect( path_parts[1] + $( 'input[name="other"]', form_element ).val() ); form_callback[action]( form, response );
} }
else if( 'swap' === action ) else
{ {
window.location.reload(); sammy.refresh();
} }
$( 'a.reset', form ) $( 'button.reset', form )
.trigger( 'click' ); .trigger( 'click' );
}, },
error : function( xhr, text_status, error_thrown ) error : function( xhr, text_status, error_thrown )
@ -334,33 +362,13 @@ sammy.get
}, },
complete : function() complete : function()
{ {
//loader $( 'button span.loader', actions_element )
.removeClass( 'loader' );
} }
} }
); );
return false; var reload_button = $( '#actions #reload', cores_element );
}
);
$( 'form a.reset', button_holder_element )
.die( 'click' )
.live
(
'click',
function( event )
{
$( this ).parents( 'form' )
.resetForm();
$( this ).parents( '.button-holder' )
.trigger( 'toggle' );
return false;
}
);
var reload_button = $( '#actions .reload', cores_element );
reload_button reload_button
.die( 'click' ) .die( 'click' )
.live .live
@ -376,7 +384,7 @@ sammy.get
context : $( this ), context : $( this ),
beforeSend : function( xhr, settings ) beforeSend : function( xhr, settings )
{ {
this $( 'span', this )
.addClass( 'loader' ); .addClass( 'loader' );
}, },
success : function( response, text_status, xhr ) success : function( response, text_status, xhr )
@ -384,6 +392,9 @@ sammy.get
this this
.addClass( 'success' ); .addClass( 'success' );
delete app.cores_data;
sammy.refresh();
window.setTimeout window.setTimeout
( (
function() function()
@ -391,7 +402,7 @@ sammy.get
reload_button reload_button
.removeClass( 'success' ); .removeClass( 'success' );
}, },
5000 1000
); );
}, },
error : function( xhr, text_status, error_thrown ) error : function( xhr, text_status, error_thrown )
@ -399,7 +410,7 @@ sammy.get
}, },
complete : function( xhr, text_status ) complete : function( xhr, text_status )
{ {
this $( 'span', this )
.removeClass( 'loader' ); .removeClass( 'loader' );
} }
} }
@ -407,13 +418,19 @@ sammy.get
} }
); );
$( '#actions .unload', cores_element ) $( '#actions #unload', cores_element )
.die( 'click' ) .die( 'click' )
.live .live
( (
'click', 'click',
function( event ) function( event )
{ {
var ret = confirm( 'Do you really want to unload Core "' + current_core + '"?' );
if( !ret )
{
return false;
}
$.ajax $.ajax
( (
{ {
@ -422,7 +439,7 @@ sammy.get
context : $( this ), context : $( this ),
beforeSend : function( xhr, settings ) beforeSend : function( xhr, settings )
{ {
this $( 'span', this )
.addClass( 'loader' ); .addClass( 'loader' );
}, },
success : function( response, text_status, xhr ) success : function( response, text_status, xhr )
@ -435,7 +452,7 @@ sammy.get
}, },
complete : function( xhr, text_status ) complete : function( xhr, text_status )
{ {
this $( 'span', this )
.removeClass( 'loader' ); .removeClass( 'loader' );
} }
} }
@ -443,7 +460,7 @@ sammy.get
} }
); );
var optimize_button = $( '#actions .optimize', cores_element ); var optimize_button = $( '#actions #optimize', cores_element );
optimize_button optimize_button
.die( 'click' ) .die( 'click' )
.live .live
@ -459,7 +476,7 @@ sammy.get
context : $( this ), context : $( this ),
beforeSend : function( xhr, settings ) beforeSend : function( xhr, settings )
{ {
this $( 'span', this )
.addClass( 'loader' ); .addClass( 'loader' );
}, },
success : function( response, text_status, xhr ) success : function( response, text_status, xhr )
@ -474,7 +491,7 @@ sammy.get
optimize_button optimize_button
.removeClass( 'success' ); .removeClass( 'success' );
}, },
5000 1000
); );
$( '.optimized dd.ico-0', index_data_element ) $( '.optimized dd.ico-0', index_data_element )
@ -487,7 +504,7 @@ sammy.get
}, },
complete : function( xhr, text_status ) complete : function( xhr, text_status )
{ {
this $( 'span', this )
.removeClass( 'loader' ); .removeClass( 'loader' );
} }
} }

134
solr/webapp/web/tpl/cores.html
View File

@ -16,82 +16,89 @@ limitations under the License.
--> -->
<div id="cores" class="clearfix"> <div id="cores" class="clearfix">
<div id="ui-block">&nbsp;</div>
<div id="frame"> <div id="frame">
<div id="actions" class="actions clearfix"> <div id="actions" class="actions clearfix">
<div class="button-holder"> <button id="add" class="action"><span>Add Core</span></button>
<div class="button"> <button id="unload" class="warn"><span>Unload</span></button>
<a class="reload">Reload</a> <button id="rename" class="action"><span>Rename</span></button>
</div> <button id="swap" class="action"><span>Swap</span></button>
<button id="reload"><span>Reload</span></button>
<button id="optimize"><span>Optimize</span></button>
<div class="action add" data-rel="add">
<form>
<input type="hidden" name="action" value="CREATE">
<p class="clearfix"><label for="add_name">name:</label>
<input type="text" name="name" id="add_name" placeholder="new_core"></p>
<p class="clearfix"><label for="add_instanceDir">instanceDir:</label>
<input type="text" name="instanceDir" id="add_instanceDir" placeholder="new_core"></p>
<p class="clearfix"><label for="add_dataDir">dataDir:</label>
<input type="text" name="dataDir" id="dataDir" placeholder="data"></p>
<p class="clearfix"><label for="add_config">config:</label>
<input type="text" name="config" id="add_config" placeholder="solrconfig.xml"></p>
<p class="clearfix"><label for="add_schema">schema:</label>
<input type="text" name="schema" id="add_schema" placeholder="schema.xml"></p>
<p class="clearfix buttons">
<button type="submit" class="submit"><span>Add Core</span></button>
<button type="reset" class="reset"><span>Cancel</span></button>
</p>
</form>
</div> </div>
<div class="button-holder options rename"> <div class="action rename" data-rel="rename">
<div class="button">
<a class="rename">Rename</a>
</div>
<div class="button-content">
<form> <form>
<input type="hidden" name="action" value="RENAME"> <input type="hidden" name="action" value="RENAME">
<input type="hidden" name="core" data-core="current">
<p class="clearfix"><label for="rename_core">from:</label> <p class="clearfix"><label for="rename_other">New Name:</label>
<input type="text" name="core" id="rename_core" readonly="readonly"></p> <input type="text" name="other" data-core="current" id="rename_other"></p>
<p class="clearfix"><label for="rename_other">to:</label>
<input type="text" name="other" id="rename_other"></p>
<p class="clearfix buttons"> <p class="clearfix buttons">
<a class="submit"><span>Rename</span></a> <button type="submit" class="submit"><span>Rename Core</span></button>
<a class="reset"><span>Cancel</span></a> <button type="reset" class="reset"><span>Cancel</span></button>
</p> </p>
</form> </form>
</div> </div>
</div>
<div class="button-holder options swap"> <div class="action swap" data-rel="swap">
<div class="button">
<a class="swap">Swap</a>
</div>
<div class="button-content">
<form> <form>
<input type="hidden" name="action" value="SWAP"> <input type="hidden" name="action" value="SWAP">
<input type="hidden" name="core">
<p class="clearfix"><label for="swap_core">this:</label> <p class="clearfix"><label for="swap_core">this:</label>
<select id="swap_core" class="core" disabled="disabled"> <input type="text" id="swap_core" name="core" data-core="current" readonly="readonly"></p>
</select></p>
<p class="clearfix"><label for="swap_other">and:</label> <p class="clearfix"><label for="swap_other">and:</label>
<select name="other" id="swap_other" class="other"> <select name="other" id="swap_other" name="other" class="other">
</select></p> </select></p>
<p class="clearfix buttons"> <p class="clearfix buttons">
<a class="submit"><span>Swap</span></a> <button type="submit" class="submit"><span>Swap Cores</span></button>
<a class="reset"><span>Cancel</span></a> <button type="reset" class="reset"><span>Cancel</span></button>
</p> </p>
</form> </form>
</div> </div>
</div>
<div class="button-holder">
<div class="button">
<a class="unload">Unload</a>
</div>
</div>
<div class="button-holder">
<div class="button">
<a class="optimize">Optimize</a>
</div>
</div>
</div> </div>
@ -99,7 +106,7 @@ limitations under the License.
<div class="block" id="core-data"> <div class="block" id="core-data">
<h2><span></span></h2> <h2><span>Core</span></h2>
<div class="message-container"> <div class="message-container">
<div class="message"></div> <div class="message"></div>
@ -192,49 +199,6 @@ limitations under the License.
<div id="navigation" class="clearfix"> <div id="navigation" class="clearfix">
<div class="actions">
<div class="button-holder options add">
<div class="button">
<a class="add">Add Core</a>
</div>
<div class="button-content">
<form>
<input type="hidden" name="action" value="CREATE">
<p class="clearfix"><label for="add_name">name:</label>
<input type="text" name="name" id="add_name"></p>
<p class="clearfix"><label for="add_instanceDir">instanceDir:</label>
<input type="text" name="instanceDir" id="add_instanceDir"></p>
<p class="clearfix"><label for="add_config">config:</label>
<input type="text" name="config" id="add_config"></p>
<p class="clearfix"><label for="add_schema">schema:</label>
<input type="text" name="schema" id="add_schema"></p>
<p class="clearfix"><label for="add_dataDir">dataDir:</label>
<input type="text" name="dataDir" id="dataDir"></p>
<p class="clearfix buttons">
<a class="submit"><span>Add Core</span></a>
<a class="reset"><span>Cancel</span></a>
</p>
</form>
</div>
</div>
</div>
<div id="list">
</div>
</div> </div>
</div> </div>