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

View File

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

View File

@ -1,48 +1,34 @@
#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
{
float: right;
width: 78%;
width: 86%;
}
#content #cores #navigation
{
background-image: url( ../../img/div.gif );
background-position: 100% 0;
background-repeat: repeat-y;
width: 20%;
padding-top: 50px;
width: 12%;
}
#content #cores #list
#content #cores #navigation a
{
float: left;
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;
padding-left: 5px;
}
#content #cores #frame .actions
@ -50,181 +36,119 @@
margin-bottom: 20px;
}
#content #cores .actions form .buttons
#content #cores .actions div.action
{
padding-left: 40px;
width: 300px;
}
#content #cores .actions form a
{
display: block;
float: left;
height: 20px;
margin-right: 5px;
padding-left: 21px;
}
#content #cores .actions form a span
#content #cores .actions div.action .cloud
{
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
{
padding-bottom: 3px;
padding-bottom: 8px;
}
#content #cores .actions form label
{
float: left;
width: 40px;
padding-top: 3px;
padding-bottom: 3px;
text-align: right;
width: 25%;
}
#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: 10px;
margin-bottom: 5px;
margin-right: 20px;
}
#content #cores .actions .button-holder.active
{
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
#content #cores .actions form button.submit span
{
background-image: url( ../../img/ico/tick.png );
}
#content #cores .actions .button-holder.active .button a
{
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
#content #cores .actions form button.reset span
{
background-image: url( ../../img/ico/cross.png );
}
#content #cores .actions .button .optimize
#content #cores .actions #add
{
background-image: url( ../../img/ico/hammer-screwdriver.png );
display: none;
left: 0;
position: absolute;
}
#content #cores #navigation .add
#content #cores .actions #add span
{
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

View File

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

View File

@ -16,81 +16,88 @@ limitations under the License.
-->
<div id="cores" class="clearfix">
<div id="ui-block">&nbsp;</div>
<div id="frame">
<div id="actions" class="actions clearfix">
<div class="button-holder">
<div class="button">
<a class="reload">Reload</a>
</div>
<button id="add" class="action"><span>Add Core</span></button>
<button id="unload" class="warn"><span>Unload</span></button>
<button id="rename" class="action"><span>Rename</span></button>
<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 class="button-holder options rename">
<div class="button">
<a class="rename">Rename</a>
</div>
<div class="button-content">
<form>
<div class="action rename" data-rel="rename">
<input type="hidden" name="action" value="RENAME">
<form>
<p class="clearfix"><label for="rename_core">from:</label>
<input type="text" name="core" id="rename_core" readonly="readonly"></p>
<input type="hidden" name="action" value="RENAME">
<input type="hidden" name="core" data-core="current">
<p class="clearfix"><label for="rename_other">to:</label>
<input type="text" name="other" id="rename_other"></p>
<p class="clearfix"><label for="rename_other">New Name:</label>
<input type="text" name="other" data-core="current" id="rename_other"></p>
<p class="clearfix buttons">
<a class="submit"><span>Rename</span></a>
<a class="reset"><span>Cancel</span></a>
</p>
<p class="clearfix buttons">
<button type="submit" class="submit"><span>Rename Core</span></button>
<button type="reset" class="reset"><span>Cancel</span></button>
</p>
</form>
</form>
</div>
</div>
<div class="button-holder options swap">
<div class="button">
<a class="swap">Swap</a>
</div>
<div class="button-content">
<form>
<div class="action swap" data-rel="swap">
<input type="hidden" name="action" value="SWAP">
<input type="hidden" name="core">
<form>
<p class="clearfix"><label for="swap_core">this:</label>
<select id="swap_core" class="core" disabled="disabled">
</select></p>
<input type="hidden" name="action" value="SWAP">
<p class="clearfix"><label for="swap_other">and:</label>
<select name="other" id="swap_other" class="other">
</select></p>
<p class="clearfix"><label for="swap_core">this:</label>
<input type="text" id="swap_core" name="core" data-core="current" readonly="readonly"></p>
<p class="clearfix buttons">
<a class="submit"><span>Swap</span></a>
<a class="reset"><span>Cancel</span></a>
</p>
<p class="clearfix"><label for="swap_other">and:</label>
<select name="other" id="swap_other" name="other" class="other">
</select></p>
<p class="clearfix buttons">
<button type="submit" class="submit"><span>Swap Cores</span></button>
<button type="reset" class="reset"><span>Cancel</span></button>
</p>
</form>
</form>
</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>
@ -99,7 +106,7 @@ limitations under the License.
<div class="block" id="core-data">
<h2><span></span></h2>
<h2><span>Core</span></h2>
<div class="message-container">
<div class="message"></div>
@ -191,49 +198,6 @@ limitations under the License.
</div>
<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>